@shortfuse/materialdesignweb 0.7.6 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -68
- package/components/Badge.js +2 -2
- package/components/BottomAppBar.js +3 -5
- package/components/Box.js +33 -3
- package/components/Button.js +48 -21
- package/components/Button.md +9 -9
- package/components/Card.js +9 -16
- package/components/Checkbox.js +45 -36
- package/components/CheckboxIcon.js +2 -2
- package/components/Chip.js +1 -1
- package/components/Dialog.js +228 -359
- package/components/DialogActions.js +2 -2
- package/components/Divider.js +3 -3
- package/components/ExtendedFab.js +4 -8
- package/components/Fab.js +1 -2
- package/components/FilterChip.js +4 -4
- package/components/Headline.js +1 -1
- package/components/Icon.js +8 -8
- package/components/IconButton.js +9 -14
- package/components/Input.js +273 -1
- package/components/Layout.js +485 -16
- package/components/List.js +6 -4
- package/components/ListItem.js +12 -12
- package/components/ListOption.js +21 -5
- package/components/Listbox.js +239 -0
- package/components/Menu.js +77 -526
- package/components/MenuItem.js +12 -14
- package/components/Nav.js +0 -2
- package/components/NavBar.js +8 -79
- package/components/NavDrawer.js +12 -11
- package/components/NavDrawerItem.js +2 -1
- package/components/NavItem.js +18 -8
- package/components/NavRail.js +15 -7
- package/components/NavRailItem.js +3 -1
- package/components/Popup.js +20 -0
- package/components/Progress.js +24 -23
- package/components/Radio.js +42 -35
- package/components/RadioIcon.js +3 -3
- package/components/Ripple.js +2 -3
- package/components/Search.js +85 -0
- package/components/SegmentedButton.js +1 -10
- package/components/SegmentedButtonGroup.js +16 -10
- package/components/Select.js +4 -4
- package/components/Shape.js +1 -1
- package/components/Slider.js +43 -50
- package/components/Snackbar.js +4 -5
- package/components/Surface.js +3 -3
- package/components/Switch.js +55 -21
- package/components/SwitchIcon.js +10 -8
- package/components/Tab.js +11 -9
- package/components/TabContent.js +4 -3
- package/components/TabList.js +2 -2
- package/components/TabPanel.js +11 -8
- package/components/TextArea.js +38 -35
- package/components/Tooltip.js +2 -2
- package/components/TopAppBar.js +65 -147
- package/core/Composition.js +985 -628
- package/core/CompositionAdapter.js +315 -0
- package/core/CustomElement.js +153 -90
- package/core/DomAdapter.js +586 -0
- package/core/ICustomElement.d.ts +2 -2
- package/core/css.js +8 -7
- package/core/customTypes.js +53 -31
- package/{utils → core}/jsonMergePatch.js +36 -14
- package/core/observe.js +111 -57
- package/core/optimizations.js +23 -0
- package/core/template.js +17 -11
- package/core/test.js +126 -0
- package/core/typings.d.ts +11 -5
- package/core/uid.js +13 -0
- package/dist/index.min.js +83 -152
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +1 -1
- package/mixins/AriaReflectorMixin.js +1 -2
- package/mixins/AriaToolbarMixin.js +2 -3
- package/mixins/ControlMixin.js +25 -17
- package/mixins/DensityMixin.js +0 -1
- package/mixins/FlexableMixin.js +1 -2
- package/mixins/FormAssociatedMixin.js +13 -10
- package/mixins/InputMixin.js +2 -9
- package/mixins/KeyboardNavMixin.js +14 -1
- package/mixins/PopupMixin.js +757 -0
- package/mixins/RTLObserverMixin.js +0 -1
- package/mixins/ResizeObserverMixin.js +0 -1
- package/mixins/RippleMixin.js +3 -4
- package/mixins/ScrollListenerMixin.js +41 -32
- package/mixins/SemiStickyMixin.js +151 -0
- package/mixins/ShapeMixin.js +29 -24
- package/mixins/StateMixin.js +11 -6
- package/mixins/SurfaceMixin.js +3 -57
- package/mixins/TextFieldMixin.js +57 -65
- package/mixins/ThemableMixin.js +78 -156
- package/mixins/TooltipTriggerMixin.js +7 -13
- package/mixins/TouchTargetMixin.js +4 -3
- package/package.json +9 -5
- package/theming/index.js +1 -1
- package/theming/themableMixinLoader.js +12 -0
- package/utils/{hct → material-color}/blend.js +8 -10
- package/utils/{hct → material-color/hct}/Cam16.js +196 -69
- package/utils/{hct → material-color/hct}/Hct.js +61 -19
- package/utils/{hct → material-color/hct}/ViewingConditions.js +3 -3
- package/utils/{hct → material-color/hct}/hctSolver.js +9 -16
- package/utils/{hct → material-color}/helper.js +11 -18
- package/utils/{hct → material-color/palettes}/CorePalette.js +79 -19
- package/utils/{hct → material-color/palettes}/TonalPalette.js +12 -4
- package/utils/material-color/scheme/Scheme.js +376 -0
- package/utils/{hct/colorUtils.js → material-color/utils/color.js} +61 -1
- package/utils/popup.js +46 -25
- package/components/ListSelect.js +0 -220
- package/components/Option.js +0 -91
- package/components/Pane.js +0 -281
- package/core/identify.js +0 -40
- package/utils/hct/Scheme.js +0 -587
- /package/utils/{hct/mathUtils.js → material-color/utils/math.js} +0 -0
package/README.md
CHANGED
|
@@ -6,15 +6,6 @@ Material Design for Web
|
|
|
6
6
|
   
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
# Current status
|
|
10
|
-
|
|
11
|
-
Working on:
|
|
12
|
-
* Array rendering (sub templates)
|
|
13
|
-
* * Nav Drawer list population
|
|
14
|
-
* * Search results population
|
|
15
|
-
* * Text Field Dropdown population
|
|
16
|
-
* Cross-DOM-boundary custom colors
|
|
17
|
-
|
|
18
9
|
# Demo
|
|
19
10
|
|
|
20
11
|
https://clshortfuse.github.io/materialdesignweb/
|
|
@@ -52,12 +43,8 @@ import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/component
|
|
|
52
43
|
// OR
|
|
53
44
|
import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';
|
|
54
45
|
|
|
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
46
|
const button = new Button();
|
|
60
|
-
button.textContent = 'Hello World!';
|
|
47
|
+
button.textContent = 'Hello World!';
|
|
61
48
|
document.body.append(button);
|
|
62
49
|
|
|
63
50
|
````
|
|
@@ -85,55 +72,54 @@ Notes:
|
|
|
85
72
|
|
|
86
73
|
# Components
|
|
87
74
|
|
|
88
|
-
| Component | Features
|
|
89
|
-
| :----------------------------------------------------------- |
|
|
90
|
-
| [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density")
|
|
91
|
-
| [Bottom App Bar](components/BottomAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar")
|
|
92
|
-
| Bottom Sheet |
|
|
93
|
-
| [Button](components/Button.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA 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")
|
|
95
|
-
| [Fab](components/Fab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button")
|
|
96
|
-
| [Fab - Extended](components/ExtendedFab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button")
|
|
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")
|
|
98
|
-
| [Segmented Button](components/SegmentedButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option")
|
|
99
|
-
| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox")
|
|
100
|
-
| [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox")
|
|
101
|
-
| [Chip](components/Chip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button")
|
|
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")
|
|
103
|
-
| Chip: Filter Dropdown |
|
|
104
|
-
| Chip: Input |
|
|
105
|
-
| Date Picker |
|
|
106
|
-
| [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog")
|
|
107
|
-
| Dialog: Full-screen |
|
|
108
|
-
| [Divider](components/Divider.js) | [:crayon:](# "Ink")
|
|
109
|
-
| [Icon](components/Icon.js) | [:crayon:](# "Ink")
|
|
110
|
-
| [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List")
|
|
111
|
-
| [
|
|
112
|
-
| [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu")
|
|
113
|
-
| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav")
|
|
114
|
-
| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav")
|
|
115
|
-
| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav")
|
|
116
|
-
| [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress")
|
|
117
|
-
| Search
|
|
118
|
-
| [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio")
|
|
119
|
-
| [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider")
|
|
120
|
-
| [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status")
|
|
121
|
-
| [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch")
|
|
122
|
-
| [Tab](components/Tab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tab List \| Tab \| Tab Panel")
|
|
123
|
-
| [Text Input](components/Input.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textbox")
|
|
124
|
-
| [Text Area](components/TextArea.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA 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")
|
|
126
|
-
| Time Picker |
|
|
127
|
-
| [Tooltip](components/Tooltip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip")
|
|
128
|
-
| [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:
|
|
75
|
+
| Component | Features | Status | Size |
|
|
76
|
+
| :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
77
|
+
| [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") | [:heavy_check_mark:](# "Ready") |  |
|
|
78
|
+
| [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") |  |
|
|
79
|
+
| Bottom Sheet | | [:memo:](# "Planned") | |
|
|
80
|
+
| [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") |  |
|
|
81
|
+
| [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") |  |
|
|
82
|
+
| [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") |  |
|
|
83
|
+
| [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") |  |
|
|
84
|
+
| [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") |  |
|
|
85
|
+
| [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") |  |
|
|
86
|
+
| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") |  |
|
|
87
|
+
| [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") |   |
|
|
88
|
+
| [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") |  |
|
|
89
|
+
| [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") |  |
|
|
90
|
+
| Chip: Filter Dropdown | | [:construction:](# "Under Construction") | |
|
|
91
|
+
| Chip: Input | | [:construction:](# "Under Construction") | |
|
|
92
|
+
| Date Picker | | [:grey_question:](# "Unknown") | |
|
|
93
|
+
| [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog") | [:heavy_check_mark:](# "Ready") |  |
|
|
94
|
+
| Dialog: Full-screen | | [:grey_question:](# "Unknown") | |
|
|
95
|
+
| [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |  |
|
|
96
|
+
| [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |  |
|
|
97
|
+
| [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") |   |
|
|
98
|
+
| [Listbox](components/Listbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |   |
|
|
99
|
+
| [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") |   |
|
|
100
|
+
| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |   |
|
|
101
|
+
| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") |   |
|
|
102
|
+
| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |   |
|
|
103
|
+
| [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") |  |
|
|
104
|
+
| [Search](components/Search.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:construction:](# "Under Construction") |  |
|
|
105
|
+
| [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") |   |
|
|
106
|
+
| [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") |  |
|
|
107
|
+
| [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status") | [:heavy_check_mark:](# "Ready") |  |
|
|
108
|
+
| [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") |   |
|
|
109
|
+
| [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") |     |
|
|
110
|
+
| [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") |  |
|
|
111
|
+
| [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") |  |
|
|
112
|
+
| [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") |  |
|
|
113
|
+
| Time Picker | | [:grey_question:](# "Unknown") | |
|
|
114
|
+
| [Tooltip](components/Tooltip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip") | [:heavy_check_mark:](# "Ready") |  |
|
|
115
|
+
| [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:wheelchair:](# "ARIA") | [:heavy_check_mark:](# "Ready") |  |
|
|
129
116
|
|
|
130
117
|
# Additional
|
|
131
118
|
|
|
132
119
|
| Component | Description | Status | Size |
|
|
133
120
|
| :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
134
|
-
| [Box](components/Box.js) | Simple themeable component with
|
|
121
|
+
| [Box](components/Box.js) | Simple themeable component with Flex and Grid options | [:heavy_check_mark:](# "Ready") |  |
|
|
135
122
|
| [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
123
|
| [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") |  |
|
|
138
124
|
| [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") |  |
|
|
139
125
|
| [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") |  |
|
|
@@ -161,23 +147,26 @@ Notes:
|
|
|
161
147
|
| [RTLObserver](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# "Ready") |  |
|
|
162
148
|
| [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# "Ready") |  |
|
|
163
149
|
| [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# "Issues") |  |
|
|
164
|
-
| [Surface](mixins/
|
|
150
|
+
| [Surface](mixins/SurfaceMixin.js) | Adds shadows to elements | [:warning:](# "Issues") |  |
|
|
165
151
|
| [TextField](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# "Ready") |  |
|
|
166
152
|
| [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# "Under Construction") |  |
|
|
167
153
|
| [TouchTarget](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# "Under Construction") |  |
|
|
168
154
|
|
|
169
155
|
# Core
|
|
170
156
|
|
|
171
|
-
| File
|
|
172
|
-
|
|
|
173
|
-
| [Composition](core/Composition.js)
|
|
174
|
-
| [CustomElement](core/CustomElement.js)
|
|
175
|
-
| [
|
|
176
|
-
| [
|
|
177
|
-
| [
|
|
178
|
-
| [
|
|
179
|
-
| [
|
|
180
|
-
| [
|
|
157
|
+
| File | Description | Status | Size |
|
|
158
|
+
| :---------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
159
|
+
| [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# "Under Construction") |  |
|
|
160
|
+
| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") |  |
|
|
161
|
+
| [CompositionAdapter](core/Composition.js) | Handles data array to elements binding | [:construction:](# "Under Construction") |  |
|
|
162
|
+
| [jsonMergePatch](core/jsonMergePatch.js) | Applies, constructors, and evaluates JSON Merge Patch | [:construction:](# "Under Construction") |  |
|
|
163
|
+
| [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") |  |
|
|
164
|
+
| [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") |  |
|
|
165
|
+
| [optimizations](core/optimizations.js) | Micro-optimizations functions | [:construction:](# "Under Construction") |  |
|
|
166
|
+
| [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") |  |
|
|
167
|
+
| [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") |  |
|
|
168
|
+
| [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# "Ready") |  |
|
|
169
|
+
| [uid](core/uid.js) | Generates a UID string | [:heavy_check_mark:](# "Ready") |  |
|
|
181
170
|
|
|
182
171
|
|
|
183
172
|
# Other Components
|
package/components/Badge.js
CHANGED
|
@@ -4,11 +4,11 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
|
|
|
4
4
|
import ThemableMixin from '../mixins/ThemableMixin.js';
|
|
5
5
|
|
|
6
6
|
export default CustomElement
|
|
7
|
+
.extend()
|
|
7
8
|
.mixin(ThemableMixin)
|
|
8
9
|
.mixin(DensityMixin)
|
|
9
10
|
.mixin(ShapeMixin)
|
|
10
|
-
.
|
|
11
|
-
.html/* html */`<slot id=slot></slot>`
|
|
11
|
+
.html`<slot id=slot></slot>`
|
|
12
12
|
.css`
|
|
13
13
|
:host {
|
|
14
14
|
--mdw-shape__size: 8px;
|
|
@@ -10,23 +10,21 @@ import Surface from './Surface.js';
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
export default Surface
|
|
13
|
+
.extend()
|
|
13
14
|
.mixin(AriaToolbarMixin)
|
|
14
15
|
.mixin(AriaReflectorMixin)
|
|
15
|
-
.extend()
|
|
16
16
|
.set({
|
|
17
17
|
elevated: true,
|
|
18
18
|
_ariaRole: 'toolbar',
|
|
19
19
|
})
|
|
20
20
|
.observe({
|
|
21
|
-
color: { empty: 'surface' },
|
|
21
|
+
color: { empty: 'surface-container' },
|
|
22
22
|
})
|
|
23
23
|
.css`
|
|
24
24
|
/* https://m3.material.io/components/bottom-app-bar/specs */
|
|
25
25
|
|
|
26
26
|
:host {
|
|
27
|
-
--mdw-
|
|
28
|
-
--mdw-surface__tint__raised: var(--mdw-surface__tint__2);
|
|
29
|
-
--mdw-bg: var(--mdw-color__surface);
|
|
27
|
+
--mdw-bg: var(--mdw-color__surface-container);
|
|
30
28
|
--mdw-ink: var(--mdw-color__on-surface);
|
|
31
29
|
|
|
32
30
|
display: flex;
|
package/components/Box.js
CHANGED
|
@@ -7,11 +7,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
|
|
|
7
7
|
* They should have simple geometry for rendering and layout.
|
|
8
8
|
*/
|
|
9
9
|
export default CustomElement
|
|
10
|
+
.extend()
|
|
10
11
|
.mixin(ThemableMixin)
|
|
11
12
|
.mixin(FlexableMixin)
|
|
12
|
-
.extend()
|
|
13
13
|
.observe({
|
|
14
14
|
inline: 'boolean',
|
|
15
|
+
grid: 'boolean',
|
|
15
16
|
block: {
|
|
16
17
|
type: 'boolean',
|
|
17
18
|
empty: true,
|
|
@@ -29,11 +30,16 @@ export default CustomElement
|
|
|
29
30
|
:host([flex]:where([inline])) {
|
|
30
31
|
display: inline-flex;
|
|
31
32
|
}
|
|
32
|
-
|
|
33
|
+
|
|
33
34
|
:host([color]) {
|
|
34
35
|
background-color: rgb(var(--mdw-bg));
|
|
35
36
|
color: rgb(var(--mdw-ink));
|
|
36
37
|
}
|
|
38
|
+
|
|
39
|
+
:host(:is([color="none"],[color="transparent"])) {
|
|
40
|
+
background-color: transparent;
|
|
41
|
+
color: inherit;
|
|
42
|
+
}
|
|
37
43
|
|
|
38
44
|
:host([ink]) {
|
|
39
45
|
color: rgb(var(--mdw-ink));
|
|
@@ -49,6 +55,30 @@ export default CustomElement
|
|
|
49
55
|
block-size: inherit;
|
|
50
56
|
inline-size: inherit;
|
|
51
57
|
}
|
|
58
|
+
|
|
59
|
+
:host([grid]) {
|
|
60
|
+
display: grid;
|
|
61
|
+
column-gap: 16px; /* Gutters */
|
|
62
|
+
grid-auto-flow: row;
|
|
63
|
+
grid-template-columns: repeat(var(--mdw-grid__columns), 1fr);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
#slot[grid]::slotted(*) { grid-column: auto / span calc(var(--mdw-grid__columns)) }
|
|
67
|
+
#slot[grid]::slotted([col-span="1"]) { grid-column: auto / span 1; }
|
|
68
|
+
#slot[grid]::slotted([col-span="2"]) { grid-column: auto / span min(2, var(--mdw-grid__columns)); }
|
|
69
|
+
#slot[grid]::slotted([col-span="3"]) { grid-column: auto / span min(3, var(--mdw-grid__columns)); }
|
|
70
|
+
#slot[grid]::slotted([col-span="4"]) { grid-column: auto / span min(4, var(--mdw-grid__columns)); }
|
|
71
|
+
#slot[grid]::slotted([col-span="5"]) { grid-column: auto / span min(5, var(--mdw-grid__columns)); }
|
|
72
|
+
#slot[grid]::slotted([col-span="6"]) { grid-column: auto / span min(6, var(--mdw-grid__columns)); }
|
|
73
|
+
#slot[grid]::slotted([col-span="7"]) { grid-column: auto / span min(7, var(--mdw-grid__columns)); }
|
|
74
|
+
#slot[grid]::slotted([col-span="8"]) { grid-column: auto / span min(8, var(--mdw-grid__columns)); }
|
|
75
|
+
#slot[grid]::slotted([col-span="9"]) { grid-column: auto / span min(9, var(--mdw-grid__columns)); }
|
|
76
|
+
#slot[grid]::slotted([col-span="10"]) { grid-column: auto / span min(10, var(--mdw-grid__columns)); }
|
|
77
|
+
#slot[grid]::slotted([col-span="11"]) { grid-column: auto / span min(11, var(--mdw-grid__columns)); }
|
|
78
|
+
#slot[grid]::slotted([col-span="12"]) { grid-column: auto / span min(12, var(--mdw-grid__columns)); }
|
|
79
|
+
#slot[grid]::slotted([col-span="50%"]) { grid-column: auto / span max(calc(var(--mdw-grid__columns) / 2), 1); }
|
|
80
|
+
#slot[grid]::slotted([col-span="25%"]) { grid-column: auto / span max(calc(var(--mdw-grid__columns) / 4), 1); }
|
|
81
|
+
|
|
52
82
|
`
|
|
53
|
-
.html
|
|
83
|
+
.html`<slot id=slot type-style={typeStyle} grid={grid}></slot>`
|
|
54
84
|
.autoRegister('mdw-box');
|
package/components/Button.js
CHANGED
|
@@ -9,6 +9,7 @@ import SurfaceMixin from '../mixins/SurfaceMixin.js';
|
|
|
9
9
|
import ThemableMixin from '../mixins/ThemableMixin.js';
|
|
10
10
|
|
|
11
11
|
export default CustomElement
|
|
12
|
+
.extend()
|
|
12
13
|
.mixin(ThemableMixin)
|
|
13
14
|
.mixin(DensityMixin)
|
|
14
15
|
.mixin(SurfaceMixin)
|
|
@@ -16,7 +17,6 @@ export default CustomElement
|
|
|
16
17
|
.mixin(StateMixin)
|
|
17
18
|
.mixin(RippleMixin)
|
|
18
19
|
.mixin(InputMixin)
|
|
19
|
-
.extend()
|
|
20
20
|
.define({
|
|
21
21
|
stateTargetElement() { return this.refs.control; },
|
|
22
22
|
})
|
|
@@ -28,34 +28,61 @@ export default CustomElement
|
|
|
28
28
|
type: { empty: 'button' },
|
|
29
29
|
elevated: 'boolean',
|
|
30
30
|
filled: 'string',
|
|
31
|
+
href: 'string',
|
|
31
32
|
outlined: 'boolean',
|
|
32
33
|
icon: 'string',
|
|
33
34
|
iconInk: 'string',
|
|
34
35
|
src: 'string',
|
|
35
36
|
svg: 'string',
|
|
37
|
+
viewBox: 'string',
|
|
36
38
|
svgPath: 'string',
|
|
39
|
+
_slotInnerText: 'string',
|
|
37
40
|
})
|
|
38
41
|
.expressions({
|
|
39
42
|
hasIcon({ icon, svg, src, svgPath }) {
|
|
40
43
|
return icon ?? svg ?? src ?? svgPath;
|
|
41
44
|
},
|
|
45
|
+
computedAriaLabel({ ariaLabel, _slotInnerText }) {
|
|
46
|
+
return ariaLabel?.trim() || _slotInnerText?.trim() || null;
|
|
47
|
+
},
|
|
48
|
+
})
|
|
49
|
+
.methods({
|
|
50
|
+
focus(...options) {
|
|
51
|
+
if (this.href) {
|
|
52
|
+
this.refs.anchor.focus(...options);
|
|
53
|
+
} else {
|
|
54
|
+
this.refs.control.focus(...options);
|
|
55
|
+
}
|
|
56
|
+
},
|
|
42
57
|
})
|
|
43
|
-
.html
|
|
44
|
-
<mdw-icon
|
|
45
|
-
<
|
|
58
|
+
.html`
|
|
59
|
+
<mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabledState} outlined={outlined} aria-hidden=true svg={svg} src={src} svg-path={svgPath} view-box={viewBox}>{icon}</mdw-icon>
|
|
60
|
+
<a mdw-if={href} id=anchor href={href} aria-label="{computedAriaLabel}"></a>
|
|
61
|
+
<slot id=slot disabled={disabledState} aria-hidden=false></slot>
|
|
46
62
|
`
|
|
63
|
+
.childEvents({
|
|
64
|
+
slot: {
|
|
65
|
+
slotchange() {
|
|
66
|
+
// Firefox and Webkit will not apply label from slots.
|
|
67
|
+
// https://bugs.webkit.org/show_bug.cgi?id=254934
|
|
68
|
+
// https://bugzilla.mozilla.org/show_bug.cgi?id=1826194
|
|
69
|
+
if (navigator.userAgent.includes('Firefox')
|
|
70
|
+
|| (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrom'))) {
|
|
71
|
+
this._slotInnerText = this.textContent;
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
})
|
|
47
76
|
.on({
|
|
48
77
|
composed() {
|
|
49
78
|
const {
|
|
50
|
-
shape,
|
|
51
|
-
surface, control, label, slot,
|
|
52
|
-
icon,
|
|
79
|
+
shape, state, rippleContainer, surface, control,
|
|
53
80
|
} = this.refs;
|
|
54
81
|
surface.append(shape);
|
|
55
|
-
shape.append(state, rippleContainer
|
|
56
|
-
label.append(icon, slot);
|
|
57
|
-
|
|
82
|
+
shape.append(state, rippleContainer);
|
|
58
83
|
shape.setAttribute('filled', '{filled}');
|
|
84
|
+
control.setAttribute('aria-label', '{computedAriaLabel}');
|
|
85
|
+
control.setAttribute('hidden', '{href}');
|
|
59
86
|
control.setAttribute('role', 'button');
|
|
60
87
|
},
|
|
61
88
|
})
|
|
@@ -99,12 +126,10 @@ export default CustomElement
|
|
|
99
126
|
|
|
100
127
|
/** Elevated Color Defaults */
|
|
101
128
|
:host(:where([elevated])) {
|
|
102
|
-
--mdw-bg: var(--mdw-color__surface);
|
|
129
|
+
--mdw-bg: var(--mdw-color__surface-container-low);
|
|
103
130
|
--mdw-ink: var(--mdw-color__primary);
|
|
104
131
|
--mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
|
|
105
132
|
--mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
|
|
106
|
-
--mdw-surface__tint: var(--mdw-surface__tint__1);
|
|
107
|
-
--mdw-surface__tint__raised: var(--mdw-surface__tint__2);
|
|
108
133
|
}
|
|
109
134
|
/** Filled Color Defaults */
|
|
110
135
|
:host(:where([filled])) {
|
|
@@ -112,8 +137,6 @@ export default CustomElement
|
|
|
112
137
|
--mdw-ink: var(--mdw-color__on-primary);
|
|
113
138
|
--mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
|
|
114
139
|
--mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
|
|
115
|
-
--mdw-surface__tint: 0;
|
|
116
|
-
--mdw-surface__tint__raised: var(--mdw-surface__tint__1);
|
|
117
140
|
}
|
|
118
141
|
/** Filled Tonal Color Defaults */
|
|
119
142
|
:host(:where([filled="tonal"])) {
|
|
@@ -152,7 +175,15 @@ export default CustomElement
|
|
|
152
175
|
}
|
|
153
176
|
|
|
154
177
|
#control {
|
|
155
|
-
cursor:
|
|
178
|
+
cursor: pointer;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
#anchor {
|
|
182
|
+
position: absolute;
|
|
183
|
+
inset: 0;
|
|
184
|
+
|
|
185
|
+
cursor: pointer;
|
|
186
|
+
outline: none;
|
|
156
187
|
}
|
|
157
188
|
|
|
158
189
|
:host([disabled]) {
|
|
@@ -185,11 +216,7 @@ export default CustomElement
|
|
|
185
216
|
color: rgba(var(--mdw-color__on-surface));
|
|
186
217
|
}
|
|
187
218
|
|
|
188
|
-
#
|
|
189
|
-
cursor: pointer;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
#label[disabled] {
|
|
219
|
+
#control[form-disabled] {
|
|
193
220
|
cursor: not-allowed;
|
|
194
221
|
}
|
|
195
222
|
|