@shortfuse/materialdesignweb 0.7.1 → 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.
Files changed (7) hide show
  1. package/README.md +112 -108
  2. package/components/Card.js +3 -1
  3. package/dist/index.min.js +4 -4
  4. package/dist/index.min.js.map +3 -3
  5. package/dist/meta.json +1 -1
  6. package/mixins/AriaReflectorMixin.js +0 -2
  7. package/package.json +1 -1
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
+ ![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
+
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
- # Web Ready
24
+ ## Pre-bundled
24
25
  ````html
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
+ <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 supports theming over URL params.
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]('./theming/loader.js') for an example.
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&custom=yellow,orange:orange,green:0f0,alias:aqua&lightness=auto';
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.md) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |
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
- | [Surface](components/Surface.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable") | [:heavy_check_mark:](# "Ready") |
139
- | [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") |
140
- | [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") |
141
- | [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") |
142
- | [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") |
143
- | Time Picker | | [:grey_question:](# "Unknown") |
144
- | [Tooltip](components/Tooltip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip") | [:heavy_check_mark:](# "Ready") |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Badge.js?compression=gzip&softmax=2048&max=4096&label=Badge) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/BottomAppBar.js?compression=gzip&softmax=2048&max=4096&label=BottomAppBar) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Button.js?compression=gzip&softmax=2048&max=4096&label=Button) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Card.js?compression=gzip&softmax=2048&max=4096&label=Card) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Fab.js?compression=gzip&softmax=2048&max=4096&label=Fab) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ExtendedFab.js?compression=gzip&softmax=2048&max=4096&label=ExtendedFab) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/IconButton.js?compression=gzip&softmax=2048&max=4096&label=IconButton) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SegmentedButton.js?compression=gzip&softmax=2048&max=4096&label=SegmentedButton) |
99
+ | [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SegmentedButtonGroup.js?compression=gzip&softmax=2048&max=4096&label=SegmentedButtonGroup) |
100
+ | [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Checkbox.js?compression=gzip&softmax=2048&max=4096&label=Checkbox) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/CheckboxIcon.js?compression=gzip&softmax=2048&max=4096&label=CheckboxIcon) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Chip.js?compression=gzip&softmax=2048&max=4096&label=Chip) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/FilterChip.js?compression=gzip&softmax=2048&max=4096&label=FilteredChip) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Dialog.js?compression=gzip&softmax=2048&max=4096&label=Dialog) |
107
+ | Dialog: Full-screen | | [:grey_question:](# "Unknown") | |
108
+ | [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Divider.js?compression=gzip&softmax=2048&max=4096&label=Divider) |
109
+ | [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip&softmax=2048&max=4096&label=Icon) |
110
+ | [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/List.js?compression=gzip&softmax=2048&max=4096&label=List) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListItem.js?compression=gzip&softmax=2048&max=4096&label=ListItem) |
111
+ | [List Select](components/ListSelect.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListSelect.js?compression=gzip&softmax=2048&max=4096&label=ListSelect) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListOption.js?compression=gzip&softmax=2048&max=4096&label=ListOption) |
112
+ | [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Menu.js?compression=gzip&softmax=2048&max=4096&label=Menu) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/MenuItem.js?compression=gzip&softmax=2048&max=4096&label=MenuItem) |
113
+ | [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavBar.js?compression=gzip&softmax=2048&max=4096&label=NavBar) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavBarItem.js?compression=gzip&softmax=2048&max=4096&label=NavBarItem) |
114
+ | [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavDrawer.js?compression=gzip&softmax=2048&max=4096&label=NavDrawer) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavDrawerItem.js?compression=gzip&softmax=2048&max=4096&label=NavDrawerItem) |
115
+ | [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavRail.js?compression=gzip&softmax=2048&max=4096&label=NavRail) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavRailItem.js?compression=gzip&softmax=2048&max=4096&label=NavRailItem) |
116
+ | [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Progress.js?compression=gzip&softmax=2048&max=4096&label=Progress) |
117
+ | Search | | [:memo:](# "Planned") | |
118
+ | [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Radio.js?compression=gzip&softmax=2048&max=4096&label=Radio) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/RadioIcon.js?compression=gzip&softmax=2048&max=4096&label=RadioIcon) |
119
+ | [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Slider.js?compression=gzip&softmax=2048&max=4096&label=Slider) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Snackbar.js?compression=gzip&softmax=2048&max=4096&label=Snackbar) |
121
+ | [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Switch.js?compression=gzip&softmax=2048&max=4096&label=Switch) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SwitchIcon.js?compression=gzip&softmax=2048&max=4096&label=SwitchIcon) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Tab.js?compression=gzip&softmax=2048&max=4096&label=Tab) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabList.js?compression=gzip&softmax=2048&max=4096&label=TabList) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabPanel.js?compression=gzip&softmax=2048&max=4096&label=TabPanel) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabContent.js?compression=gzip&softmax=2048&max=4096&label=TabContent) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Input.js?compression=gzip&softmax=2048&max=4096&label=Input) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TextArea.js?compression=gzip&softmax=2048&max=4096&label=TextArea) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Select.js?compression=gzip&softmax=2048&max=4096&label=Select) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Tooltip.js?compression=gzip&softmax=2048&max=4096&label=Tooltip) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TopAppBar.js?compression=gzip&softmax=2048&max=4096&label=TopAppBar) |
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
- | [Surface](components/Surface.js) | Themeable, flexable, shapeable, elevateable element | [:heavy_check_mark:](# "Ready") |
132
+ | Component | Description | Status | Size |
133
+ | :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
134
+ | [Box](components/Box.js) | Simple themeable component with Flexbox options | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Box.js?compression=gzip&softmax=2048&max=4096&label=Box) |
135
+ | [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Layout.js?compression=gzip&softmax=2048&max=4096&label=Box) |
136
+ | [Pane](components/Pane.js) | 12-column pane layout | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Pane.js?compression=gzip&softmax=2048&max=4096&label=Pane) |
137
+ | [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip&softmax=2048&max=4096&label=Icon) |
138
+ | [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Body.js?compression=gzip&softmax=2048&max=4096&label=Body) |
139
+ | [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Label.js?compression=gzip&softmax=2048&max=4096&label=Label) |
140
+ | [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Headline.js?compression=gzip&softmax=2048&max=4096&label=Headline) |
141
+ | [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Title.js?compression=gzip&softmax=2048&max=4096&label=Title) |
142
+ | [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Ripple.js?compression=gzip&softmax=2048&max=4096&label=Ripple) |
143
+ | [Shape](components/Shape.js) | Themeable, flexable, shapeable element | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
144
+ | [Surface](components/Surface.js) | Themeable, flexable, shapeable, elevateable element | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
161
145
 
162
146
 
163
147
  # Mixins
164
148
 
165
- | Component | Description | Status |
166
- | :----------------------------------------------- | :----------------------------------------------- | :--------------------------------------: |
167
- | [ARIA Reflector](mixins/AriaReflectorMixin.js) | Reflects ARIA Properties | [:heavy_check_mark:](# "Ready") |
168
- | [ARIA Toolbar](mixins/AriaToolbarMixin.js) | Shared ARIA Toolbar functionality | [:heavy_check_mark:](# "Ready") |
169
- | [Control](mixins/ControlMixin.js) | HTML Control wrapper | [:heavy_check_mark:](# "Ready") |
170
- | [Density](mixins/DensityMixin.js) | Component density options | [:heavy_check_mark:](# "Ready") |
171
- | [Flexable](mixins/FlexableMixin.js) | Add flexbox options as attributes | [:heavy_check_mark:](# "Ready") |
172
- | [Form Associated](mixins/FormAssociatedMixin.js) | Form-associated custom element support | [:heavy_check_mark:](# "Ready") |
173
- | [Input](mixins/InputMixin.js) | HTMLInputElement wrapper | [:heavy_check_mark:](# "Ready") |
174
- | [Keyboard Nav](mixins/KeyboardNavMixin.js) | Adds arrow key navigation and roving tab index | [:warning:](# "Issues") |
175
- | [Resize Observer](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer | [:heavy_check_mark:](# "Ready") |
176
- | [Ripple](mixins/RippleMixin.js) | Replaces pressed state with ripple effect | [:heavy_check_mark:](# "Ready") |
177
- | [RTL Observer](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# "Ready") |
178
- | [Scroll Listener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# "Ready") |
179
- | [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# "Issues") |
180
- | [Surface](mixins/ShapeMixin.js) | Adds elevation tint and shadows to elements | [:warning:](# "Issues") |
181
- | [Text Field](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# "Ready") |
182
- | [Tooltip Trigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# "Under Construction") |
183
- | [Touch Target](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# "Under Construction") |
149
+ | Mixin | Description | Status | Size |
150
+ | :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: |
151
+ | [AriaReflector](mixins/AriaReflectorMixin.js) | Reflects ARIA Properties | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/AriaReflectorMixin.js?compression=gzip&softmax=2048&max=4096&label=ARIAReflector) |
152
+ | [AriaToolbar](mixins/AriaToolbarMixin.js) | Shared ARIA Toolbar functionality | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/AriaToolbarMixin.js?compression=gzip&softmax=2048&max=4096&label=ARIAToolbar) |
153
+ | [Control](mixins/ControlMixin.js) | HTML Control wrapper | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ControlMixin.js?compression=gzip&softmax=2048&max=4096&label=Control) |
154
+ | [Density](mixins/DensityMixin.js) | Component density options | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/DensityMixin.js?compression=gzip&softmax=2048&max=4096&label=Density) |
155
+ | [Flexable](mixins/FlexableMixin.js) | Add flexbox options as attributes | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/FlexableMixin.js?compression=gzip&softmax=2048&max=4096&label=Flexable) |
156
+ | [FormAssociated](mixins/FormAssociatedMixin.js) | Form-associated custom element support | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/FormAssociatedMixin.js?compression=gzip&softmax=2048&max=4096&label=FormAssociated) |
157
+ | [Input](mixins/InputMixin.js) | HTMLInputElement wrapper | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/InputMixin.js?compression=gzip&softmax=2048&max=4096&label=Input) |
158
+ | [KeyboardNav](mixins/KeyboardNavMixin.js) | Adds arrow key navigation and roving tab index | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/KeyboardNavMixin.js?compression=gzip&softmax=2048&max=4096&label=KeyboardNav) |
159
+ | [ResizeObserver](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ResizeObserverMixin.js?compression=gzip&softmax=2048&max=4096&label=ResizeObserver) |
160
+ | [Ripple](mixins/RippleMixin.js) | Replaces pressed state with ripple effect | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RippleMixin.js?compression=gzip&softmax=2048&max=4096&label=Ripple) |
161
+ | [RTLObserver](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RTLObserverMixin.js?compression=gzip&softmax=2048&max=4096&label=RTLObserver) |
162
+ | [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ScrollListenerMixin.js?compression=gzip&softmax=2048&max=4096&label=ScrollListener) |
163
+ | [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ShapeMixin.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
164
+ | [Surface](mixins/ShapeMixin.js) | Adds elevation tint and shadows to elements | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/SurfaceMixin.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
165
+ | [TextField](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TextFieldMixin.js?compression=gzip&softmax=2048&max=4096&label=TextField) |
166
+ | [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TooltipTriggerMixin.js?compression=gzip&softmax=2048&max=4096&label=TooltipTrigger) |
167
+ | [TouchTarget](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TouchTargetMixin.js?compression=gzip&softmax=2048&max=4096&label=TouchTarget) |
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") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/Composition.js?compression=gzip&softmax=2048&max=4096&label=Composition) |
174
+ | [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/CustomElement.js?compression=gzip&softmax=2048&max=4096&label=CustomElement) |
175
+ | [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/css.js?compression=gzip&softmax=2048&max=4096&label=css) |
176
+ | [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/customTypes.js?compression=gzip&softmax=2048&max=4096&label=customTypes) |
177
+ | [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/dom.js?compression=gzip&softmax=2048&max=4096&label=dom) |
178
+ | [identify](core/identify.js) | Node identification functions | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/identify.js?compression=gzip&softmax=2048&max=4096&label=identify) |
179
+ | [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/observe.js?compression=gzip&softmax=2048&max=4096&label=observe) |
180
+ | [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# "Ready") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/template.js?compression=gzip&softmax=2048&max=4096&label=template) |
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:is([elevated],[filled]) {
75
+ #shape:where([elevated],[filled],[color]) {
74
76
  background-color: rgb(var(--mdw-bg));
75
77
  }
76
78