@shortfuse/materialdesignweb 0.7.1 → 0.7.4
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 +112 -108
- package/components/Card.js +3 -1
- package/components/ListSelect.js +1 -1
- package/components/Select.js +12 -24
- package/components/Slider.js +1 -1
- package/components/TextArea.js +206 -219
- package/core/CustomElement.js +23 -5
- package/core/ICustomElement.d.ts +8 -5
- package/core/observe.js +17 -19
- package/core/typings.d.ts +2 -1
- package/dist/index.min.js +71 -69
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +1 -1
- package/mixins/AriaReflectorMixin.js +0 -2
- package/mixins/ControlMixin.js +192 -247
- package/mixins/FormAssociatedMixin.js +166 -30
- package/mixins/InputMixin.js +211 -290
- package/mixins/TextFieldMixin.js +18 -12
- package/package.json +8 -5
package/README.md
CHANGED
|
@@ -3,7 +3,8 @@ Material Design for Web
|
|
|
3
3
|
|
|
4
4
|
*A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*
|
|
5
5
|
|
|
6
|
-
https://badgen.net/npm/v/@shortfuse/materialdesignweb
|
|
6
|
+
   
|
|
7
|
+
|
|
7
8
|
|
|
8
9
|
# Current status
|
|
9
10
|
|
|
@@ -20,24 +21,25 @@ https://clshortfuse.github.io/materialdesignweb/
|
|
|
20
21
|
|
|
21
22
|
# Getting started
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
## Pre-bundled
|
|
24
25
|
````html
|
|
25
|
-
<script type="module"
|
|
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
|
|
|
30
|
-
Includes all components and
|
|
32
|
+
Includes all components and theming over URL params.
|
|
31
33
|
|
|
32
34
|
## Development
|
|
33
35
|
|
|
34
36
|
### Static Theme Generation:
|
|
35
37
|
|
|
36
|
-
`npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css`
|
|
38
|
+
> `npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css`
|
|
37
39
|
|
|
38
40
|
### Dynamic Theme Generation:
|
|
39
41
|
|
|
40
|
-
See [loader.js](
|
|
42
|
+
See [loader.js](./theming/loader.js) for an example.
|
|
41
43
|
|
|
42
44
|
### Component Loading
|
|
43
45
|
|
|
@@ -48,7 +50,7 @@ import Button from '@shortfuse/materialdesignweb/components/Button.js';
|
|
|
48
50
|
// OR
|
|
49
51
|
import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';
|
|
50
52
|
// OR
|
|
51
|
-
import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4
|
|
53
|
+
import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';
|
|
52
54
|
|
|
53
55
|
// Components will auto register after one microtask (right before next event loop)
|
|
54
56
|
// We can bypass this by registering it manually:
|
|
@@ -81,119 +83,101 @@ Notes:
|
|
|
81
83
|
|
|
82
84
|
* Compatibility may be extended via polyfills (not included)
|
|
83
85
|
|
|
84
|
-
# Legend
|
|
85
|
-
|
|
86
|
-
* [:paintbrush:](# "Background") - Background Theming
|
|
87
|
-
* [:crayon:](# "Ink") - Ink (Foreground) Theming
|
|
88
|
-
* [:o:](# "Outline") - Outline
|
|
89
|
-
* [:a:](# "Font") - Font Theming
|
|
90
|
-
* [:large_blue_diamond:](# "Shape") - Shape Size Theming
|
|
91
|
-
* [:signal_strength:](# "Density") - Density
|
|
92
|
-
* [:arrow_up_down:](# "Flexable") - Flexable layout
|
|
93
|
-
* [:wheelchair:](# "ARIA") - ARIA Role
|
|
94
|
-
|
|
95
|
-
* [:heavy_check_mark:](# "Ready") - Ready
|
|
96
|
-
* [:warning:](# "Issues") - Issues
|
|
97
|
-
* [:construction:](# "Under Construction") - Under Construction
|
|
98
|
-
* [:memo:](# "Planned") - Planned
|
|
99
|
-
* [:grey_question:](# "Unknown") - Unknown
|
|
100
|
-
* [:skull:](# "Not planned") - Not planned
|
|
101
|
-
|
|
102
86
|
# Components
|
|
103
87
|
|
|
104
|
-
| Component | Features | Status |
|
|
105
|
-
| :----------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: |
|
|
106
|
-
| [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") | [:heavy_check_mark:](# "Ready") |
|
|
107
|
-
| [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") |
|
|
108
|
-
| Bottom Sheet | | [:memo:](# "Planned") |
|
|
109
|
-
| [Button](components/Button.
|
|
110
|
-
| [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") |
|
|
111
|
-
| [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") |
|
|
112
|
-
| [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") |
|
|
113
|
-
| [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") |
|
|
114
|
-
| [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") |
|
|
115
|
-
| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") |
|
|
116
|
-
| [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") |
|
|
117
|
-
| [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") |
|
|
118
|
-
| [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") |
|
|
119
|
-
| Chip: Filter Dropdown | | [:construction:](# "Under Construction") |
|
|
120
|
-
| Chip: Input | | [:construction:](# "Under Construction") |
|
|
121
|
-
| Date Picker | | [:grey_question:](# "Unknown") |
|
|
122
|
-
| [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog") | [:heavy_check_mark:](# "Ready") |
|
|
123
|
-
| Dialog: Full-screen | | [:grey_question:](# "Unknown") |
|
|
124
|
-
| [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |
|
|
125
|
-
| [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |
|
|
126
|
-
| [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") |
|
|
127
|
-
| [List Select](components/ListSelect.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |
|
|
128
|
-
| [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") |
|
|
129
|
-
| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |
|
|
130
|
-
| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") |
|
|
131
|
-
| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |
|
|
132
|
-
| [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") |
|
|
133
|
-
| Search | | [:memo:](# "Planned") |
|
|
134
|
-
| [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") |
|
|
135
|
-
| [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") |
|
|
136
|
-
| [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status") | [:heavy_check_mark:](# "Ready") |
|
|
137
|
-
| [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") |
|
|
138
|
-
| [
|
|
139
|
-
| [
|
|
140
|
-
| [Text
|
|
141
|
-
| [Text
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
| [
|
|
145
|
-
| [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") |  |
|
|
146
129
|
|
|
147
130
|
# Additional
|
|
148
131
|
|
|
149
|
-
| Component | Description | Status |
|
|
150
|
-
| :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: |
|
|
151
|
-
| [Box](components/Box.js) | Simple themeable component with Flexbox options | [:heavy_check_mark:](# "Ready") |
|
|
152
|
-
| [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# "Under Construction") |
|
|
153
|
-
| [Pane](components/Pane.js) | 12-column pane layout | [:construction:](# "Under Construction") |
|
|
154
|
-
| [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") |
|
|
155
|
-
| [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") |
|
|
156
|
-
| [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") |
|
|
157
|
-
| [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# "Ready") |
|
|
158
|
-
| [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# "Ready") |
|
|
159
|
-
| [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# "Ready") |
|
|
160
|
-
| [
|
|
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") |  |
|
|
161
145
|
|
|
162
146
|
|
|
163
147
|
# Mixins
|
|
164
148
|
|
|
165
|
-
|
|
|
166
|
-
|
|
|
167
|
-
| [
|
|
168
|
-
| [
|
|
169
|
-
| [Control](mixins/ControlMixin.js)
|
|
170
|
-
| [Density](mixins/DensityMixin.js)
|
|
171
|
-
| [Flexable](mixins/FlexableMixin.js)
|
|
172
|
-
| [
|
|
173
|
-
| [Input](mixins/InputMixin.js)
|
|
174
|
-
| [
|
|
175
|
-
| [
|
|
176
|
-
| [Ripple](mixins/RippleMixin.js)
|
|
177
|
-
| [
|
|
178
|
-
| [
|
|
179
|
-
| [Shape](mixins/ShapeMixin.js)
|
|
180
|
-
| [Surface](mixins/ShapeMixin.js)
|
|
181
|
-
| [
|
|
182
|
-
| [
|
|
183
|
-
| [
|
|
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") |  |
|
|
184
168
|
|
|
185
169
|
# Core
|
|
186
170
|
|
|
187
|
-
| File | Description | Status |
|
|
188
|
-
| :------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: |
|
|
189
|
-
| [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# "Under Construction") |
|
|
190
|
-
| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") |
|
|
191
|
-
| [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") |
|
|
192
|
-
| [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") |
|
|
193
|
-
| [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") |
|
|
194
|
-
| [identify](core/identify.js) | Node identification functions | [:construction:](# "Under Construction") |
|
|
195
|
-
| [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") |
|
|
196
|
-
| [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") |  |
|
|
197
181
|
|
|
198
182
|
|
|
199
183
|
# Other Components
|
|
@@ -208,6 +192,26 @@ These components do not have official M3 guidelines
|
|
|
208
192
|
| Image List | [:grey_question:](# "Unknown") |
|
|
209
193
|
| Side Sheet | [:grey_question:](# "Unknown") |
|
|
210
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
|
+
|
|
211
215
|
# Archive
|
|
212
216
|
|
|
213
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
|
|
package/components/ListSelect.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { constructHTMLOptionsCollectionProxy } from '../dom/
|
|
1
|
+
import { constructHTMLOptionsCollectionProxy } from '../dom/HTMLOptionsCollectionProxy.js';
|
|
2
2
|
import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
|
|
3
3
|
import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
|
|
4
4
|
import StateMixin from '../mixins/StateMixin.js';
|
package/components/Select.js
CHANGED
|
@@ -4,20 +4,20 @@ import StateMixin from '../mixins/StateMixin.js';
|
|
|
4
4
|
import TextFieldMixin from '../mixins/TextFieldMixin.js';
|
|
5
5
|
import ThemableMixin from '../mixins/ThemableMixin.js';
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
/* @implements {HTMLSelectElement} */
|
|
9
|
-
|
|
10
|
-
export default class Select extends CustomElement
|
|
8
|
+
export default CustomElement
|
|
11
9
|
.mixin(ThemableMixin)
|
|
12
10
|
.mixin(StateMixin)
|
|
13
11
|
.mixin(ControlMixin)
|
|
14
12
|
.mixin(TextFieldMixin)
|
|
15
13
|
.extend()
|
|
16
14
|
.observe({
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
trailingIcon: { empty: 'arrow_drop_down' },
|
|
16
|
+
})
|
|
17
|
+
.overrides({
|
|
18
|
+
controlTagName: 'select',
|
|
19
|
+
controlVoidElement: false,
|
|
20
|
+
type: 'select-one',
|
|
21
21
|
})
|
|
22
22
|
.define({
|
|
23
23
|
_select() {
|
|
@@ -26,7 +26,6 @@ export default class Select extends CustomElement
|
|
|
26
26
|
/** Readonly values */
|
|
27
27
|
multiple: { value: false },
|
|
28
28
|
size: { value: 1 },
|
|
29
|
-
type: { value: 'select-one' },
|
|
30
29
|
})
|
|
31
30
|
.html/* html */`<slot id=slot></slot>`
|
|
32
31
|
.childEvents({
|
|
@@ -50,6 +49,10 @@ export default class Select extends CustomElement
|
|
|
50
49
|
prefix.remove();
|
|
51
50
|
suffix.remove();
|
|
52
51
|
},
|
|
52
|
+
_formResetChanged(oldValue, newValue) {
|
|
53
|
+
if (!newValue) return;
|
|
54
|
+
this._select.value = this.querySelector('option[selected]')?.value ?? '';
|
|
55
|
+
},
|
|
53
56
|
})
|
|
54
57
|
.css`
|
|
55
58
|
#slot {
|
|
@@ -105,19 +108,4 @@ export default class Select extends CustomElement
|
|
|
105
108
|
letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
|
|
106
109
|
}
|
|
107
110
|
`
|
|
108
|
-
.
|
|
109
|
-
controlTagName: 'select',
|
|
110
|
-
controlVoidElement: false,
|
|
111
|
-
})
|
|
112
|
-
.autoRegister('mdw-select') {
|
|
113
|
-
/* Overrides */
|
|
114
|
-
static clonedContentAttributes = [
|
|
115
|
-
...super.clonedContentAttributes,
|
|
116
|
-
'autocomplete', // Hint for form autofill feature
|
|
117
|
-
];
|
|
118
|
-
|
|
119
|
-
formResetCallback() {
|
|
120
|
-
this._select.value = this.querySelector('option[selected]')?.value ?? '';
|
|
121
|
-
super.formResetCallback();
|
|
122
|
-
}
|
|
123
|
-
}
|
|
111
|
+
.autoRegister('mdw-select');
|
package/components/Slider.js
CHANGED