diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef24e5461..8ea65b080 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
### Added
- Added custom properties to style `mwc-radio`'s colors
+- Added custom properties to style `mwc-checkbox`'s colors
### Fixed
@@ -19,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- **BREAKING** `mwc-tab` can now only have slotted content via the
`hasImageIcon` flag.
+- **BREAKING:VISUAL** `mwc-checkbox` default display is changed from inline to inline-block.
## [0.11.1] - 2019-11-26
diff --git a/packages/base/package.json b/packages/base/package.json
index 97b02cf74..d851efff7 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -9,9 +9,9 @@
},
"license": "Apache-2.0",
"dependencies": {
- "@material/base": "=5.0.0-canary.f978109c3.0",
- "@material/dom": "=5.0.0-canary.f978109c3.0",
- "@material/ripple": "=5.0.0-canary.f978109c3.0",
+ "@material/base": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/dom": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/ripple": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/button/package.json b/packages/button/package.json
index bbf64bb45..9d235059e 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/button": "=5.0.0-canary.f978109c3.0",
+ "@material/button": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"@material/mwc-icon": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
index a3c5d06c4..9ea645434 100644
--- a/packages/checkbox/README.md
+++ b/packages/checkbox/README.md
@@ -40,9 +40,9 @@ npm install @material/mwc-checkbox
```
-### Standard, disabled, and custom styles
+### Standard, disabled
-
+
```html
@@ -56,16 +56,36 @@ npm install @material/mwc-checkbox
+```
+
+### Styled standard, disabled
+
+
+
+```html
+
-
-
-
-
+
+
+
+
+
+
+
+
+
```
@@ -133,6 +153,11 @@ Name | Type | Default | Description
| Name | Default | Description |
| ----------------------- | --------- | ----------------------------------- |
| `--mdc-theme-secondary` | ![](images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.
+| `--mdc-theme-on-surface` | ![](images/color_000.png) `#000` | Color of the unchecked focus ripple.
+| `--mdc-checkbox-mark-color` | ![](images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).
+| `--mdc-checkbox-unchecked-color` | ![](images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.
+| `--mdc-checkbox-disabled-color` | ![](images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.
+
## Additional references
diff --git a/packages/checkbox/images/color_0,0,0,38.png b/packages/checkbox/images/color_0,0,0,38.png
new file mode 100644
index 000000000..96a8734c5
Binary files /dev/null and b/packages/checkbox/images/color_0,0,0,38.png differ
diff --git a/packages/checkbox/images/color_0,0,0,54.png b/packages/checkbox/images/color_0,0,0,54.png
new file mode 100644
index 000000000..7872de775
Binary files /dev/null and b/packages/checkbox/images/color_0,0,0,54.png differ
diff --git a/packages/checkbox/images/color_000.png b/packages/checkbox/images/color_000.png
new file mode 100644
index 000000000..7b190bd82
Binary files /dev/null and b/packages/checkbox/images/color_000.png differ
diff --git a/packages/checkbox/images/color_fff.png b/packages/checkbox/images/color_fff.png
new file mode 100644
index 000000000..66473cd4e
Binary files /dev/null and b/packages/checkbox/images/color_fff.png differ
diff --git a/packages/checkbox/images/standard_disabled.png b/packages/checkbox/images/standard_disabled.png
new file mode 100644
index 000000000..4b8581b23
Binary files /dev/null and b/packages/checkbox/images/standard_disabled.png differ
diff --git a/packages/checkbox/images/standard_disabled_styled.png b/packages/checkbox/images/standard_disabled_styled.png
deleted file mode 100644
index e04257c14..000000000
Binary files a/packages/checkbox/images/standard_disabled_styled.png and /dev/null differ
diff --git a/packages/checkbox/images/styled_standard_disabled.png b/packages/checkbox/images/styled_standard_disabled.png
new file mode 100644
index 000000000..593e5c458
Binary files /dev/null and b/packages/checkbox/images/styled_standard_disabled.png differ
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
index ed9334864..455921010 100644
--- a/packages/checkbox/package.json
+++ b/packages/checkbox/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/checkbox": "=5.0.0-canary.f978109c3.0",
+ "@material/checkbox": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
"lit-element": "^2.2.1",
diff --git a/packages/checkbox/src/mwc-checkbox.scss b/packages/checkbox/src/mwc-checkbox.scss
index 6eeca642c..bdbc8d77f 100644
--- a/packages/checkbox/src/mwc-checkbox.scss
+++ b/packages/checkbox/src/mwc-checkbox.scss
@@ -21,4 +21,19 @@ limitations under the License.
:host {
outline: none;
+ display: inline-block;
}
+
+.mdc-checkbox {
+ .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {
+ background-color: var(--mdc-checkbox-unchecked-color, #{$mdc-checkbox-border-color});
+ }
+}
+
+@include mdc-checkbox-disabled-container-colors(
+ $unmarked-stroke-color: var(--mdc-checkbox-disabled-color, #{$mdc-checkbox-disabled-color}),
+ $marked-fill-color: var(--mdc-checkbox-disabled-color, #{$mdc-checkbox-disabled-color}),
+);
+@include mdc-checkbox-container-colors($unmarked-stroke-color: var(--mdc-checkbox-unchecked-color, #{$mdc-checkbox-border-color}));
+@include mdc-checkbox-ink-color(var(--mdc-checkbox-mark-color, #{$mdc-checkbox-mark-color}));
+@include mdc-checkbox-disabled-ink-color(var(--mdc-checkbox-mark-color, #{$mdc-checkbox-mark-color}));
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 937a3392a..04579a0fe 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -15,10 +15,10 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/dialog": "=5.0.0-canary.f978109c3.0",
- "@material/dom": "=5.0.0-canary.f978109c3.0",
+ "@material/dialog": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/dom": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
- "@material/touch-target": "=5.0.0-canary.f978109c3.0",
+ "@material/touch-target": "=5.0.0-canary.a5dbd8a2a.0",
"blocking-elements": "^0.1.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
diff --git a/packages/drawer/package.json b/packages/drawer/package.json
index cd7d3f9b1..bbfc3e952 100644
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -16,7 +16,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/drawer": "=5.0.0-canary.f978109c3.0",
+ "@material/drawer": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"blocking-elements": "^0.1.0",
"lit-element": "^2.2.1",
diff --git a/packages/fab/package.json b/packages/fab/package.json
index d13985630..689fa4eff 100644
--- a/packages/fab/package.json
+++ b/packages/fab/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/fab": "=5.0.0-canary.f978109c3.0",
+ "@material/fab": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"@material/mwc-icon": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
diff --git a/packages/floating-label/package.json b/packages/floating-label/package.json
index afb882a9a..d103ea6dc 100644
--- a/packages/floating-label/package.json
+++ b/packages/floating-label/package.json
@@ -12,7 +12,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/floating-label": "=5.0.0-canary.f978109c3.0",
+ "@material/floating-label": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/formfield/package.json b/packages/formfield/package.json
index b67d25b30..abdf3188f 100644
--- a/packages/formfield/package.json
+++ b/packages/formfield/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/form-field": "=5.0.0-canary.f978109c3.0",
+ "@material/form-field": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
diff --git a/packages/icon-button-toggle/package.json b/packages/icon-button-toggle/package.json
index 0c3e0008d..36f3079f8 100644
--- a/packages/icon-button-toggle/package.json
+++ b/packages/icon-button-toggle/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/icon-button": "=5.0.0-canary.f978109c3.0",
+ "@material/icon-button": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"@material/mwc-icon": "^0.11.1",
"@material/mwc-icon-button": "^0.11.1",
diff --git a/packages/icon-button/package.json b/packages/icon-button/package.json
index 09a24ec5f..287ffde76 100644
--- a/packages/icon-button/package.json
+++ b/packages/icon-button/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/icon-button": "=5.0.0-canary.f978109c3.0",
+ "@material/icon-button": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"@material/mwc-icon": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
diff --git a/packages/line-ripple/package.json b/packages/line-ripple/package.json
index 83e6d93b5..249dd700e 100644
--- a/packages/line-ripple/package.json
+++ b/packages/line-ripple/package.json
@@ -12,7 +12,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/line-ripple": "=5.0.0-canary.f978109c3.0",
+ "@material/line-ripple": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/linear-progress/package.json b/packages/linear-progress/package.json
index 1725a2db2..aab22d3f0 100644
--- a/packages/linear-progress/package.json
+++ b/packages/linear-progress/package.json
@@ -15,7 +15,7 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/linear-progress": "=5.0.0-canary.f978109c3.0",
+ "@material/linear-progress": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
diff --git a/packages/notched-outline/package.json b/packages/notched-outline/package.json
index 3b3276518..e235b30ac 100644
--- a/packages/notched-outline/package.json
+++ b/packages/notched-outline/package.json
@@ -16,9 +16,9 @@
"license": "Apache-2.0",
"dependencies": {
"@material/mwc-base": "^0.11.1",
- "@material/notched-outline": "=5.0.0-canary.f978109c3.0",
- "@material/shape": "=5.0.0-canary.f978109c3.0",
- "@material/theme": "=5.0.0-canary.f978109c3.0",
+ "@material/notched-outline": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/shape": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/theme": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/radio/package.json b/packages/radio/package.json
index 91650b378..ce8cc43c2 100644
--- a/packages/radio/package.json
+++ b/packages/radio/package.json
@@ -17,7 +17,7 @@
"dependencies": {
"@material/mwc-base": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
- "@material/radio": "=5.0.0-canary.f978109c3.0",
+ "@material/radio": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/ripple/package.json b/packages/ripple/package.json
index 39bad4b2b..8f991a7ff 100644
--- a/packages/ripple/package.json
+++ b/packages/ripple/package.json
@@ -15,9 +15,9 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/dom": "=5.0.0-canary.f978109c3.0",
+ "@material/dom": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
- "@material/ripple": "=5.0.0-canary.f978109c3.0",
+ "@material/ripple": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/slider/package.json b/packages/slider/package.json
index a223f95b8..9e7a1ccae 100644
--- a/packages/slider/package.json
+++ b/packages/slider/package.json
@@ -16,7 +16,7 @@
"license": "Apache-2.0",
"dependencies": {
"@material/mwc-base": "^0.11.1",
- "@material/slider": "=5.0.0-canary.f978109c3.0",
+ "@material/slider": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/snackbar/package.json b/packages/snackbar/package.json
index 9fe3b6693..2a502c07b 100644
--- a/packages/snackbar/package.json
+++ b/packages/snackbar/package.json
@@ -16,7 +16,7 @@
"license": "Apache-2.0",
"dependencies": {
"@material/mwc-base": "^0.11.1",
- "@material/snackbar": "=5.0.0-canary.f978109c3.0",
+ "@material/snackbar": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/switch/package.json b/packages/switch/package.json
index e869f212d..c06d29a49 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -14,7 +14,7 @@
"dependencies": {
"@material/mwc-base": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
- "@material/switch": "=5.0.0-canary.f978109c3.0",
+ "@material/switch": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/tab-bar/package.json b/packages/tab-bar/package.json
index 9ae91afe2..c2182ba7f 100644
--- a/packages/tab-bar/package.json
+++ b/packages/tab-bar/package.json
@@ -19,7 +19,7 @@
"@material/mwc-base": "^0.11.1",
"@material/mwc-tab": "^0.11.1",
"@material/mwc-tab-scroller": "^0.11.1",
- "@material/tab-bar": "=5.0.0-canary.f978109c3.0",
+ "@material/tab-bar": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/tab-indicator/package.json b/packages/tab-indicator/package.json
index 133da17d1..e7c28a3fc 100644
--- a/packages/tab-indicator/package.json
+++ b/packages/tab-indicator/package.json
@@ -17,7 +17,7 @@
"license": "Apache-2.0",
"dependencies": {
"@material/mwc-base": "^0.11.1",
- "@material/tab-indicator": "=5.0.0-canary.f978109c3.0",
+ "@material/tab-indicator": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/tab-scroller/package.json b/packages/tab-scroller/package.json
index 3f919130b..7e5ddf1db 100644
--- a/packages/tab-scroller/package.json
+++ b/packages/tab-scroller/package.json
@@ -16,9 +16,9 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/dom": "=5.0.0-canary.f978109c3.0",
+ "@material/dom": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
- "@material/tab-scroller": "=5.0.0-canary.f978109c3.0",
+ "@material/tab-scroller": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/tab/package.json b/packages/tab/package.json
index 14c32c9c4..2ad0292ff 100644
--- a/packages/tab/package.json
+++ b/packages/tab/package.json
@@ -20,7 +20,7 @@
"@material/mwc-icon": "^0.11.1",
"@material/mwc-ripple": "^0.11.1",
"@material/mwc-tab-indicator": "^0.11.1",
- "@material/tab": "=5.0.0-canary.f978109c3.0",
+ "@material/tab": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/textarea/package.json b/packages/textarea/package.json
index 48f35dd5c..533bf051b 100644
--- a/packages/textarea/package.json
+++ b/packages/textarea/package.json
@@ -12,7 +12,7 @@
"dependencies": {
"@material/mwc-base": "^0.11.1",
"@material/mwc-textfield": "^0.11.1",
- "@material/textfield": "=5.0.0-canary.f978109c3.0",
+ "@material/textfield": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
index cca6562b8..4fec0d940 100644
--- a/packages/textfield/package.json
+++ b/packages/textfield/package.json
@@ -10,16 +10,16 @@
"author": "",
"license": "Apache-2.0",
"dependencies": {
- "@material/floating-label": "=5.0.0-canary.f978109c3.0",
- "@material/line-ripple": "=5.0.0-canary.f978109c3.0",
+ "@material/floating-label": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/line-ripple": "=5.0.0-canary.a5dbd8a2a.0",
"@material/mwc-base": "^0.11.1",
"@material/mwc-floating-label": "^0.11.1",
"@material/mwc-icon": "^0.11.1",
"@material/mwc-line-ripple": "^0.11.1",
"@material/mwc-notched-outline": "^0.11.1",
- "@material/shape": "=5.0.0-canary.f978109c3.0",
- "@material/textfield": "=5.0.0-canary.f978109c3.0",
- "@material/theme": "=5.0.0-canary.f978109c3.0",
+ "@material/shape": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/textfield": "=5.0.0-canary.a5dbd8a2a.0",
+ "@material/theme": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"
diff --git a/packages/top-app-bar-fixed/package.json b/packages/top-app-bar-fixed/package.json
index 202b9fb84..c90e5645d 100644
--- a/packages/top-app-bar-fixed/package.json
+++ b/packages/top-app-bar-fixed/package.json
@@ -18,7 +18,7 @@
"dependencies": {
"@material/mwc-base": "^0.11.1",
"@material/mwc-top-app-bar": "^0.11.1",
- "@material/top-app-bar": "=5.0.0-canary.f978109c3.0",
+ "@material/top-app-bar": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"tslib": "^1.10.0"
},
diff --git a/packages/top-app-bar/package.json b/packages/top-app-bar/package.json
index 830cde80a..60294771b 100644
--- a/packages/top-app-bar/package.json
+++ b/packages/top-app-bar/package.json
@@ -17,7 +17,7 @@
"license": "Apache-2.0",
"dependencies": {
"@material/mwc-base": "^0.11.1",
- "@material/top-app-bar": "=5.0.0-canary.f978109c3.0",
+ "@material/top-app-bar": "=5.0.0-canary.a5dbd8a2a.0",
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"tslib": "^1.10.0"