@shortfuse/materialdesignweb 0.7.1-9 → 0.7.2
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 +158 -105
- package/components/Card.js +3 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +3 -3
- package/dist/meta.json +1 -1
- package/mixins/AriaReflectorMixin.js +0 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
# materialdesignweb
|
|
2
2
|
Material Design for Web
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
*A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
   
|
|
7
|
+
|
|
7
8
|
|
|
8
9
|
# Current status
|
|
9
10
|
|
|
@@ -20,131 +21,163 @@ https://clshortfuse.github.io/materialdesignweb/
|
|
|
20
21
|
|
|
21
22
|
# Getting started
|
|
22
23
|
|
|
24
|
+
## Pre-bundled
|
|
23
25
|
````html
|
|
24
|
-
<script type="module"
|
|
25
|
-
|
|
26
|
+
<script type="module"
|
|
27
|
+
src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
|
|
26
28
|
|
|
27
29
|
<mdw-button>Hello World!</mdw-button>
|
|
28
30
|
````
|
|
29
31
|
|
|
32
|
+
Includes all components and theming over URL params.
|
|
33
|
+
|
|
34
|
+
## Development
|
|
35
|
+
|
|
36
|
+
### Static Theme Generation:
|
|
37
|
+
|
|
38
|
+
> `npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css`
|
|
39
|
+
|
|
40
|
+
### Dynamic Theme Generation:
|
|
41
|
+
|
|
42
|
+
See [loader.js](./theming/loader.js) for an example.
|
|
43
|
+
|
|
44
|
+
### Component Loading
|
|
45
|
+
|
|
46
|
+
````js
|
|
47
|
+
import { Button } from '@shortfuse/materialdesignweb';
|
|
48
|
+
// OR
|
|
49
|
+
import Button from '@shortfuse/materialdesignweb/components/Button.js';
|
|
50
|
+
// OR
|
|
51
|
+
import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';
|
|
52
|
+
// OR
|
|
53
|
+
import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';
|
|
54
|
+
|
|
55
|
+
// Components will auto register after one microtask (right before next event loop)
|
|
56
|
+
// We can bypass this by registering it manually:
|
|
57
|
+
|
|
58
|
+
Button.register();
|
|
59
|
+
const button = new Button();
|
|
60
|
+
button.textContent = 'Hello World!';
|
|
61
|
+
document.body.append(button);
|
|
62
|
+
|
|
63
|
+
````
|
|
64
|
+
|
|
30
65
|
# Support
|
|
31
66
|
|
|
32
|
-
* Unbundled: Chrome >=94
|
|
33
|
-
* Bundled: >1% browsers *(polyfills not included)*
|
|
34
67
|
|
|
35
|
-
|
|
68
|
+
| Feature | Chrome | Edge | Firefox | Safari |
|
|
69
|
+
| ----------------------------------------------------------------------------------------------------- | -----: | ---: | ------: | -----: |
|
|
70
|
+
| [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) | 53 | 79 | 63 | 10 |
|
|
71
|
+
| [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) | 84 | 84 | 79 | 14.1 |
|
|
72
|
+
| [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)† | 77 | 79 | 93 | 16.4 |
|
|
73
|
+
| [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)† | 53 | 79 | 94 | 15 |
|
|
74
|
+
| [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* | 73 | 79 | 101 | 16.4 |
|
|
75
|
+
| | | | | |
|
|
76
|
+
| Supported | 84 | 84 | 93 | 16.4 |
|
|
36
77
|
|
|
37
|
-
*
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
*
|
|
44
|
-
* [:wheelchair:](# "ARIA") - ARIA Role
|
|
45
|
-
|
|
46
|
-
* [:heavy_check_mark:](# "Ready") - Ready
|
|
47
|
-
* [:warning:](# "Issues") - Issues
|
|
48
|
-
* [:construction:](# "Under Construction") - Under Construction
|
|
49
|
-
* [:memo:](# "Planned") - Planned
|
|
50
|
-
* [:grey_question:](# "Unknown") - Unknown
|
|
51
|
-
* [:skull:](# "Not planned") - Not planned
|
|
78
|
+
*Optional
|
|
79
|
+
|
|
80
|
+
†Can be polyfilled
|
|
81
|
+
|
|
82
|
+
Notes:
|
|
83
|
+
|
|
84
|
+
* Compatibility may be extended via polyfills (not included)
|
|
52
85
|
|
|
53
86
|
# Components
|
|
54
87
|
|
|
55
|
-
| Component | Features | Status |
|
|
56
|
-
| :----------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: |
|
|
57
|
-
| [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") | [:heavy_check_mark:](# "Ready") |
|
|
58
|
-
| [Bottom App Bar](components/BottomAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:heavy_check_mark:](# "Ready") |
|
|
59
|
-
| Bottom Sheet | | [:memo:](# "Planned") |
|
|
60
|
-
| [Button](components/Button.
|
|
61
|
-
| [Card](components/Card.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA Figure") | [:heavy_check_mark:](# "Ready") |
|
|
62
|
-
| [Fab](components/Fab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |
|
|
63
|
-
| [Fab - Extended](components/ExtendedFab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |
|
|
64
|
-
| [Icon Button](components/IconButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button \| Checkbox") | [:heavy_check_mark:](# "Ready") |
|
|
65
|
-
| [Segmented Button](components/SegmentedButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |
|
|
66
|
-
| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") |
|
|
67
|
-
| [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") |
|
|
68
|
-
| [Chip](components/Chip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |
|
|
69
|
-
| [Chip - Filter](components/FilterChip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Checkbox \| Radio") | [:heavy_check_mark:](# "Ready") |
|
|
70
|
-
| Chip: Filter Dropdown | | [:construction:](# "Under Construction") |
|
|
71
|
-
| Chip: Input | | [:construction:](# "Under Construction") |
|
|
72
|
-
| Date Picker | | [:grey_question:](# "Unknown") |
|
|
73
|
-
| [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog") | [:heavy_check_mark:](# "Ready") |
|
|
74
|
-
| Dialog: Full-screen | | [:grey_question:](# "Unknown") |
|
|
75
|
-
| [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |
|
|
76
|
-
| [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |
|
|
77
|
-
| [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") |
|
|
78
|
-
| [List Select](components/ListSelect.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |
|
|
79
|
-
| [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") |
|
|
80
|
-
| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |
|
|
81
|
-
| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") |
|
|
82
|
-
| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |
|
|
83
|
-
| [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") |
|
|
84
|
-
| Search | | [:memo:](# "Planned") |
|
|
85
|
-
| [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") |
|
|
86
|
-
| [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") |
|
|
87
|
-
| [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status") | [:heavy_check_mark:](# "Ready") |
|
|
88
|
-
| [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") |
|
|
89
|
-
| [
|
|
90
|
-
| [
|
|
91
|
-
| [Text
|
|
92
|
-
| [Text
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
| [
|
|
96
|
-
| [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA") | [:heavy_check_mark:](# "Ready") |
|
|
88
|
+
| Component | Features | Status | Size |
|
|
89
|
+
| :----------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
90
|
+
| [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") | [:heavy_check_mark:](# "Ready") |  |
|
|
91
|
+
| [Bottom App Bar](components/BottomAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:heavy_check_mark:](# "Ready") |  |
|
|
92
|
+
| Bottom Sheet | | [:memo:](# "Planned") | |
|
|
93
|
+
| [Button](components/Button.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
|
|
94
|
+
| [Card](components/Card.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA Figure") | [:heavy_check_mark:](# "Ready") |  |
|
|
95
|
+
| [Fab](components/Fab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
|
|
96
|
+
| [Fab - Extended](components/ExtendedFab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
|
|
97
|
+
| [Icon Button](components/IconButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button \| Checkbox") | [:heavy_check_mark:](# "Ready") |  |
|
|
98
|
+
| [Segmented Button](components/SegmentedButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |  |
|
|
99
|
+
| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") |  |
|
|
100
|
+
| [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") |   |
|
|
101
|
+
| [Chip](components/Chip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
|
|
102
|
+
| [Chip - Filter](components/FilterChip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Checkbox \| Radio") | [:heavy_check_mark:](# "Ready") |  |
|
|
103
|
+
| Chip: Filter Dropdown | | [:construction:](# "Under Construction") | |
|
|
104
|
+
| Chip: Input | | [:construction:](# "Under Construction") | |
|
|
105
|
+
| Date Picker | | [:grey_question:](# "Unknown") | |
|
|
106
|
+
| [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog") | [:heavy_check_mark:](# "Ready") |  |
|
|
107
|
+
| Dialog: Full-screen | | [:grey_question:](# "Unknown") | |
|
|
108
|
+
| [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |  |
|
|
109
|
+
| [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |  |
|
|
110
|
+
| [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") |   |
|
|
111
|
+
| [List Select](components/ListSelect.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |   |
|
|
112
|
+
| [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") |   |
|
|
113
|
+
| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |   |
|
|
114
|
+
| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") |   |
|
|
115
|
+
| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |   |
|
|
116
|
+
| [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") |  |
|
|
117
|
+
| Search | | [:memo:](# "Planned") | |
|
|
118
|
+
| [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") |   |
|
|
119
|
+
| [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") |  |
|
|
120
|
+
| [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status") | [:heavy_check_mark:](# "Ready") |  |
|
|
121
|
+
| [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") |   |
|
|
122
|
+
| [Tab](components/Tab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tab List \| Tab \| Tab Panel") | [:heavy_check_mark:](# "Ready") |     |
|
|
123
|
+
| [Text Input](components/Input.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textbox") | [:heavy_check_mark:](# "Ready") |  |
|
|
124
|
+
| [Text Area](components/TextArea.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textarea") | [:heavy_check_mark:](# "Ready") |  |
|
|
125
|
+
| [Text Select](components/Select.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Combobox") | [:heavy_check_mark:](# "Ready") |  |
|
|
126
|
+
| Time Picker | | [:grey_question:](# "Unknown") | |
|
|
127
|
+
| [Tooltip](components/Tooltip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip") | [:heavy_check_mark:](# "Ready") |  |
|
|
128
|
+
| [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA") | [:heavy_check_mark:](# "Ready") |  |
|
|
97
129
|
|
|
98
130
|
# Additional
|
|
99
131
|
|
|
100
|
-
| Component | Description | Status |
|
|
101
|
-
| :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: |
|
|
102
|
-
| [Box](components/Box.js) | Simple themeable component with Flexbox options | [:heavy_check_mark:](# "Ready") |
|
|
103
|
-
| [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# "Under Construction") |
|
|
104
|
-
| [Pane](components/Pane.js) | 12-column pane layout | [:construction:](# "Under Construction") |
|
|
105
|
-
| [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") |
|
|
106
|
-
| [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") |
|
|
107
|
-
| [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") |
|
|
108
|
-
| [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# "Ready") |
|
|
109
|
-
| [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# "Ready") |
|
|
110
|
-
| [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# "Ready") |
|
|
111
|
-
| [
|
|
132
|
+
| Component | Description | Status | Size |
|
|
133
|
+
| :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
134
|
+
| [Box](components/Box.js) | Simple themeable component with Flexbox options | [:heavy_check_mark:](# "Ready") |  |
|
|
135
|
+
| [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# "Under Construction") |  |
|
|
136
|
+
| [Pane](components/Pane.js) | 12-column pane layout | [:construction:](# "Under Construction") |  |
|
|
137
|
+
| [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") |  |
|
|
138
|
+
| [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") |  |
|
|
139
|
+
| [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") |  |
|
|
140
|
+
| [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# "Ready") |  |
|
|
141
|
+
| [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# "Ready") |  |
|
|
142
|
+
| [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# "Ready") |  |
|
|
143
|
+
| [Shape](components/Shape.js) | Themeable, flexable, shapeable element | [:heavy_check_mark:](# "Ready") |  |
|
|
144
|
+
| [Surface](components/Surface.js) | Themeable, flexable, shapeable, elevateable element | [:heavy_check_mark:](# "Ready") |  |
|
|
112
145
|
|
|
113
146
|
|
|
114
147
|
# Mixins
|
|
115
148
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
| [
|
|
119
|
-
| [
|
|
120
|
-
| [Control](mixins/ControlMixin.js)
|
|
121
|
-
| [Density](mixins/DensityMixin.js)
|
|
122
|
-
| [Flexable](mixins/FlexableMixin.js)
|
|
123
|
-
| [
|
|
124
|
-
| [Input](mixins/InputMixin.js)
|
|
125
|
-
| [
|
|
126
|
-
| [
|
|
127
|
-
| [Ripple](mixins/RippleMixin.js)
|
|
128
|
-
| [
|
|
129
|
-
| [
|
|
130
|
-
| [Shape](mixins/ShapeMixin.js)
|
|
131
|
-
| [Surface](mixins/ShapeMixin.js)
|
|
132
|
-
| [
|
|
133
|
-
| [
|
|
134
|
-
| [
|
|
149
|
+
| Mixin | Description | Status | Size |
|
|
150
|
+
| :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
151
|
+
| [AriaReflector](mixins/AriaReflectorMixin.js) | Reflects ARIA Properties | [:heavy_check_mark:](# "Ready") |  |
|
|
152
|
+
| [AriaToolbar](mixins/AriaToolbarMixin.js) | Shared ARIA Toolbar functionality | [:heavy_check_mark:](# "Ready") |  |
|
|
153
|
+
| [Control](mixins/ControlMixin.js) | HTML Control wrapper | [:heavy_check_mark:](# "Ready") |  |
|
|
154
|
+
| [Density](mixins/DensityMixin.js) | Component density options | [:heavy_check_mark:](# "Ready") |  |
|
|
155
|
+
| [Flexable](mixins/FlexableMixin.js) | Add flexbox options as attributes | [:heavy_check_mark:](# "Ready") |  |
|
|
156
|
+
| [FormAssociated](mixins/FormAssociatedMixin.js) | Form-associated custom element support | [:heavy_check_mark:](# "Ready") |  |
|
|
157
|
+
| [Input](mixins/InputMixin.js) | HTMLInputElement wrapper | [:heavy_check_mark:](# "Ready") |  |
|
|
158
|
+
| [KeyboardNav](mixins/KeyboardNavMixin.js) | Adds arrow key navigation and roving tab index | [:warning:](# "Issues") |  |
|
|
159
|
+
| [ResizeObserver](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer | [:heavy_check_mark:](# "Ready") |  |
|
|
160
|
+
| [Ripple](mixins/RippleMixin.js) | Replaces pressed state with ripple effect | [:heavy_check_mark:](# "Ready") |  |
|
|
161
|
+
| [RTLObserver](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# "Ready") |  |
|
|
162
|
+
| [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# "Ready") |  |
|
|
163
|
+
| [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# "Issues") |  |
|
|
164
|
+
| [Surface](mixins/ShapeMixin.js) | Adds elevation tint and shadows to elements | [:warning:](# "Issues") |  |
|
|
165
|
+
| [TextField](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# "Ready") |  |
|
|
166
|
+
| [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# "Under Construction") |  |
|
|
167
|
+
| [TouchTarget](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# "Under Construction") |  |
|
|
135
168
|
|
|
136
169
|
# Core
|
|
137
170
|
|
|
138
|
-
| File | Description | Status |
|
|
139
|
-
| :------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: |
|
|
140
|
-
| [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# "Under Construction") |
|
|
141
|
-
| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") |
|
|
142
|
-
| [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") |
|
|
143
|
-
| [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") |
|
|
144
|
-
| [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") |
|
|
145
|
-
| [identify](core/identify.js) | Node identification functions | [:construction:](# "Under Construction") |
|
|
146
|
-
| [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") |
|
|
147
|
-
| [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# "Ready") |
|
|
171
|
+
| File | Description | Status | Size |
|
|
172
|
+
| :------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
173
|
+
| [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# "Under Construction") |  |
|
|
174
|
+
| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") |  |
|
|
175
|
+
| [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") |  |
|
|
176
|
+
| [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") |  |
|
|
177
|
+
| [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") |  |
|
|
178
|
+
| [identify](core/identify.js) | Node identification functions | [:construction:](# "Under Construction") |  |
|
|
179
|
+
| [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") |  |
|
|
180
|
+
| [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# "Ready") |  |
|
|
148
181
|
|
|
149
182
|
|
|
150
183
|
# Other Components
|
|
@@ -159,6 +192,26 @@ These components do not have official M3 guidelines
|
|
|
159
192
|
| Image List | [:grey_question:](# "Unknown") |
|
|
160
193
|
| Side Sheet | [:grey_question:](# "Unknown") |
|
|
161
194
|
|
|
195
|
+
|
|
196
|
+
# Legend
|
|
197
|
+
|
|
198
|
+
* [:paintbrush:](# "Background") - Background Theming
|
|
199
|
+
* [:crayon:](# "Ink") - Ink (Foreground) Theming
|
|
200
|
+
* [:o:](# "Outline") - Outline
|
|
201
|
+
* [:a:](# "Font") - Font Theming
|
|
202
|
+
* [:large_blue_diamond:](# "Shape") - Shape Size Theming
|
|
203
|
+
* [:signal_strength:](# "Density") - Density
|
|
204
|
+
* [:arrow_up_down:](# "Flexable") - Flexable layout
|
|
205
|
+
* [:wheelchair:](# "ARIA") - ARIA Role
|
|
206
|
+
|
|
207
|
+
* [:heavy_check_mark:](# "Ready") - Ready
|
|
208
|
+
* [:warning:](# "Issues") - Issues
|
|
209
|
+
* [:construction:](# "Under Construction") - Under Construction
|
|
210
|
+
* [:memo:](# "Planned") - Planned
|
|
211
|
+
* [:grey_question:](# "Unknown") - Unknown
|
|
212
|
+
* [:skull:](# "Not planned") - Not planned
|
|
213
|
+
|
|
214
|
+
|
|
162
215
|
# Archive
|
|
163
216
|
|
|
164
217
|
The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.
|
package/components/Card.js
CHANGED
|
@@ -6,10 +6,12 @@ import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
|
|
|
6
6
|
import ShapeMixin from '../mixins/ShapeMixin.js';
|
|
7
7
|
import StateMixin from '../mixins/StateMixin.js';
|
|
8
8
|
import SurfaceMixin from '../mixins/SurfaceMixin.js';
|
|
9
|
+
import ThemableMixin from '../mixins/ThemableMixin.js';
|
|
9
10
|
|
|
10
11
|
const SUPPORTS_INERT = 'inert' in HTMLElement.prototype;
|
|
11
12
|
|
|
12
13
|
export default CustomElement
|
|
14
|
+
.mixin(ThemableMixin)
|
|
13
15
|
.mixin(FlexableMixin)
|
|
14
16
|
.mixin(SurfaceMixin)
|
|
15
17
|
.mixin(ShapeMixin)
|
|
@@ -70,7 +72,7 @@ export default CustomElement
|
|
|
70
72
|
letter-spacing: var(--mdw-type__letter-spacing);
|
|
71
73
|
}
|
|
72
74
|
|
|
73
|
-
#shape:
|
|
75
|
+
#shape:where([elevated],[filled],[color]) {
|
|
74
76
|
background-color: rgb(var(--mdw-bg));
|
|
75
77
|
}
|
|
76
78
|
|