diff --git a/package-lock.json b/package-lock.json
index 233be9a7066..31a2eb944c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,6 +2,16 @@
"requires": true,
"lockfileVersion": 1,
"dependencies": {
+ "JSONStream": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+ "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+ "dev": true,
+ "requires": {
+ "jsonparse": "1.3.1",
+ "through": "2.3.8"
+ }
+ },
"abbrev": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@@ -273,12 +283,6 @@
"integrity": "sha1-onTthawIhJtr14R8RYB0XcUa37E=",
"dev": true
},
- "array-differ": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
- "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
- "dev": true
- },
"array-filter": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
@@ -1286,9 +1290,9 @@
"integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
"dev": true,
"requires": {
+ "JSONStream": "1.3.1",
"combine-source-map": "0.7.2",
"defined": "1.0.0",
- "JSONStream": "1.3.1",
"through2": "2.0.3",
"umd": "3.0.1"
}
@@ -1322,6 +1326,7 @@
"integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==",
"dev": true,
"requires": {
+ "JSONStream": "1.3.1",
"assert": "1.4.1",
"browser-pack": "6.0.2",
"browser-resolve": "1.11.2",
@@ -1343,7 +1348,6 @@
"https-browserify": "1.0.0",
"inherits": "2.0.3",
"insert-module-globals": "7.0.1",
- "JSONStream": "1.3.1",
"labeled-stream-splicer": "2.0.0",
"module-deps": "4.1.1",
"os-browserify": "0.3.0",
@@ -2039,12 +2043,6 @@
"color-name": "1.1.2"
}
},
- "color-diff": {
- "version": "0.1.7",
- "resolved": "https://registry.npmjs.org/color-diff/-/color-diff-0.1.7.tgz",
- "integrity": "sha1-bbeM2UgqjkWdQIIer0tQMoPcuOI=",
- "dev": true
- },
"color-name": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.2.tgz",
@@ -2060,56 +2058,6 @@
"color-name": "1.1.2"
}
},
- "colorguard": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/colorguard/-/colorguard-1.2.0.tgz",
- "integrity": "sha1-8/rK9cquuk71RlPZ+yW7cxd8DYQ=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "color-diff": "0.1.7",
- "log-symbols": "1.0.2",
- "object-assign": "4.1.1",
- "pipetteur": "2.0.3",
- "plur": "2.1.2",
- "postcss": "5.2.17",
- "postcss-reporter": "1.4.1",
- "text-table": "0.2.0",
- "yargs": "1.3.3"
- },
- "dependencies": {
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- }
- },
- "postcss-reporter": {
- "version": "1.4.1",
- "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-1.4.1.tgz",
- "integrity": "sha1-wTbwpbFhkV83ndN2XGEHX357mvI=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "lodash": "4.17.4",
- "log-symbols": "1.0.2",
- "postcss": "5.2.17"
- }
- },
- "yargs": {
- "version": "1.3.3",
- "resolved": "https://registry.npmjs.org/yargs/-/yargs-1.3.3.tgz",
- "integrity": "sha1-BU3oth8i7v23IHBZ6u+da4P7kxo=",
- "dev": true
- }
- }
- },
"colormin": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
@@ -2506,8 +2454,8 @@
"integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==",
"dev": true,
"requires": {
- "is-text-path": "1.0.1",
"JSONStream": "1.3.1",
+ "is-text-path": "1.0.1",
"lodash": "4.17.4",
"meow": "3.7.0",
"split2": "2.2.0",
@@ -2756,54 +2704,6 @@
}
}
},
- "css-rule-stream": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/css-rule-stream/-/css-rule-stream-1.1.0.tgz",
- "integrity": "sha1-N4bnGYmD2WWibjGVfgkHjLt3BaI=",
- "dev": true,
- "requires": {
- "css-tokenize": "1.0.1",
- "duplexer2": "0.0.2",
- "ldjson-stream": "1.2.1",
- "through2": "0.6.5"
- },
- "dependencies": {
- "isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
- "dev": true
- },
- "readable-stream": {
- "version": "1.0.34",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
- "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
- "dev": true,
- "requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "0.0.1",
- "string_decoder": "0.10.31"
- }
- },
- "string_decoder": {
- "version": "0.10.31",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
- "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
- "dev": true
- },
- "through2": {
- "version": "0.6.5",
- "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
- "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
- "dev": true,
- "requires": {
- "readable-stream": "1.0.34",
- "xtend": "4.0.1"
- }
- }
- }
- },
"css-selector-tokenizer": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
@@ -2828,42 +2728,6 @@
}
}
},
- "css-tokenize": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz",
- "integrity": "sha1-RiXLHtohwUOFi3+B1oA8HSb8FL4=",
- "dev": true,
- "requires": {
- "inherits": "2.0.3",
- "readable-stream": "1.1.14"
- },
- "dependencies": {
- "isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
- "dev": true
- },
- "readable-stream": {
- "version": "1.1.14",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
- "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
- "dev": true,
- "requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "0.0.1",
- "string_decoder": "0.10.31"
- }
- },
- "string_decoder": {
- "version": "0.10.31",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
- "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
- "dev": true
- }
- }
- },
"cssesc": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -3276,101 +3140,6 @@
"isarray": "1.0.0"
}
},
- "doiuse": {
- "version": "2.6.0",
- "resolved": "https://registry.npmjs.org/doiuse/-/doiuse-2.6.0.tgz",
- "integrity": "sha1-GJLRC2Gpo1at2/K2FJM+gfi7ODQ=",
- "dev": true,
- "requires": {
- "browserslist": "1.7.7",
- "caniuse-db": "1.0.30000676",
- "css-rule-stream": "1.1.0",
- "duplexer2": "0.0.2",
- "jsonfilter": "1.1.2",
- "ldjson-stream": "1.2.1",
- "lodash": "4.17.4",
- "multimatch": "2.1.0",
- "postcss": "5.2.17",
- "source-map": "0.4.4",
- "through2": "0.6.5",
- "yargs": "3.10.0"
- },
- "dependencies": {
- "browserslist": {
- "version": "1.7.7",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
- "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
- "dev": true,
- "requires": {
- "caniuse-db": "1.0.30000676",
- "electron-to-chromium": "1.3.13"
- }
- },
- "isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
- "dev": true
- },
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- },
- "dependencies": {
- "source-map": {
- "version": "0.5.6",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
- "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
- "dev": true
- }
- }
- },
- "readable-stream": {
- "version": "1.0.34",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
- "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
- "dev": true,
- "requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "0.0.1",
- "string_decoder": "0.10.31"
- }
- },
- "source-map": {
- "version": "0.4.4",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
- "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
- "dev": true,
- "requires": {
- "amdefine": "1.0.1"
- }
- },
- "string_decoder": {
- "version": "0.10.31",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
- "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
- "dev": true
- },
- "through2": {
- "version": "0.6.5",
- "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
- "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
- "dev": true,
- "requires": {
- "readable-stream": "1.0.34",
- "xtend": "4.0.1"
- }
- }
- }
- },
"dom-events": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-events/-/dom-events-0.1.1.tgz",
@@ -3420,41 +3189,6 @@
"integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
"dev": true
},
- "duplexer2": {
- "version": "0.0.2",
- "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
- "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
- "dev": true,
- "requires": {
- "readable-stream": "1.1.14"
- },
- "dependencies": {
- "isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
- "dev": true
- },
- "readable-stream": {
- "version": "1.1.14",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
- "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
- "dev": true,
- "requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "0.0.1",
- "string_decoder": "0.10.31"
- }
- },
- "string_decoder": {
- "version": "0.10.31",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
- "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
- "dev": true
- }
- }
- },
"duplexer3": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -5284,11 +5018,6 @@
}
}
},
- "string_decoder": {
- "version": "0.10.31",
- "bundled": true,
- "dev": true
- },
"string-width": {
"version": "1.0.2",
"bundled": true,
@@ -5299,6 +5028,11 @@
"strip-ansi": "3.0.1"
}
},
+ "string_decoder": {
+ "version": "0.10.31",
+ "bundled": true,
+ "dev": true
+ },
"stringstream": {
"version": "0.0.5",
"bundled": true,
@@ -5510,12 +5244,6 @@
"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
"dev": true
},
- "gather-stream": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/gather-stream/-/gather-stream-1.0.0.tgz",
- "integrity": "sha1-szmUr0V6gRVwDUEPMXczy+egkEs=",
- "dev": true
- },
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -6384,10 +6112,10 @@
"integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
"dev": true,
"requires": {
+ "JSONStream": "1.3.1",
"combine-source-map": "0.7.2",
"concat-stream": "1.5.2",
"is-buffer": "1.1.5",
- "JSONStream": "1.3.1",
"lexical-scope": "1.2.0",
"process": "0.11.10",
"through2": "2.0.3",
@@ -6461,12 +6189,6 @@
"integrity": "sha1-HgOlL9rYOou7KyXL9JmLTP/NPew=",
"dev": true
},
- "irregular-plurals": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.3.0.tgz",
- "integrity": "sha512-njf5A+Mxb3kojuHd1DzISjjIl+XhyzovXEOyPPSzdQozq/Lf2tN27mOrAAsxEPZxpn6I4MGzs1oo9TxXxPFpaA==",
- "dev": true
- },
"is-absolute-url": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
@@ -7015,86 +6737,6 @@
"graceful-fs": "4.1.11"
}
},
- "jsonfilter": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/jsonfilter/-/jsonfilter-1.1.2.tgz",
- "integrity": "sha1-Ie987cdRk4E8dZMulqmL4gW6WhE=",
- "dev": true,
- "requires": {
- "JSONStream": "0.8.4",
- "minimist": "1.2.0",
- "stream-combiner": "0.2.2",
- "through2": "0.6.5"
- },
- "dependencies": {
- "isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
- "dev": true
- },
- "jsonparse": {
- "version": "0.0.5",
- "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-0.0.5.tgz",
- "integrity": "sha1-MwVCrT8KZUZlt3jz6y2an6UHrGQ=",
- "dev": true
- },
- "JSONStream": {
- "version": "0.8.4",
- "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
- "integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=",
- "dev": true,
- "requires": {
- "jsonparse": "0.0.5",
- "through": "2.3.8"
- }
- },
- "minimist": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
- "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
- "dev": true
- },
- "readable-stream": {
- "version": "1.0.34",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
- "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
- "dev": true,
- "requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "0.0.1",
- "string_decoder": "0.10.31"
- }
- },
- "stream-combiner": {
- "version": "0.2.2",
- "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
- "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
- "dev": true,
- "requires": {
- "duplexer": "0.1.1",
- "through": "2.3.8"
- }
- },
- "string_decoder": {
- "version": "0.10.31",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
- "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
- "dev": true
- },
- "through2": {
- "version": "0.6.5",
- "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
- "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
- "dev": true,
- "requires": {
- "readable-stream": "1.0.34",
- "xtend": "4.0.1"
- }
- }
- }
- },
"jsonify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
@@ -7113,16 +6755,6 @@
"integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
"dev": true
},
- "JSONStream": {
- "version": "1.3.1",
- "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
- "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
- "dev": true,
- "requires": {
- "jsonparse": "1.3.1",
- "through": "2.3.8"
- }
- },
"jsprim": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
@@ -7340,12 +6972,6 @@
"is-buffer": "1.1.5"
}
},
- "known-css-properties": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.2.0.tgz",
- "integrity": "sha512-UTCzU28rRI9wkb8qSGoZa9pgWvxr4LjP2MEhi9XHb/1XMOJy0uTnIxaxzj8My/PORG+kQG6VzAcGvRw66eIOfA==",
- "dev": true
- },
"labeled-stream-splicer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.0.tgz",
@@ -7404,61 +7030,6 @@
"invert-kv": "1.0.0"
}
},
- "ldjson-stream": {
- "version": "1.2.1",
- "resolved": "https://registry.npmjs.org/ldjson-stream/-/ldjson-stream-1.2.1.tgz",
- "integrity": "sha1-kb7O2lrE7SsX5kn7d356v6AYnCs=",
- "dev": true,
- "requires": {
- "split2": "0.2.1",
- "through2": "0.6.5"
- },
- "dependencies": {
- "isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
- "dev": true
- },
- "readable-stream": {
- "version": "1.0.34",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
- "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
- "dev": true,
- "requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "0.0.1",
- "string_decoder": "0.10.31"
- }
- },
- "split2": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/split2/-/split2-0.2.1.tgz",
- "integrity": "sha1-At2smtwD7Au3jBKC7Aecpuha6QA=",
- "dev": true,
- "requires": {
- "through2": "0.6.5"
- }
- },
- "string_decoder": {
- "version": "0.10.31",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
- "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
- "dev": true
- },
- "through2": {
- "version": "0.6.5",
- "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
- "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
- "dev": true,
- "requires": {
- "readable-stream": "1.0.34",
- "xtend": "4.0.1"
- }
- }
- }
- },
"lerna": {
"version": "2.0.0-beta.36",
"resolved": "https://registry.npmjs.org/lerna/-/lerna-2.0.0-beta.36.tgz",
@@ -7778,15 +7349,6 @@
"integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
"dev": true
},
- "log-symbols": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
- "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3"
- }
- },
"log4js": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/log4js/-/log4js-2.4.1.tgz",
@@ -8366,6 +7928,7 @@
"integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
"dev": true,
"requires": {
+ "JSONStream": "1.3.1",
"browser-resolve": "1.11.2",
"cached-path-relative": "1.0.1",
"concat-stream": "1.5.2",
@@ -8373,7 +7936,6 @@
"detective": "4.7.1",
"duplexer2": "0.1.4",
"inherits": "2.0.3",
- "JSONStream": "1.3.1",
"parents": "1.0.1",
"readable-stream": "2.2.9",
"resolve": "1.3.3",
@@ -8433,18 +7995,6 @@
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
- "multimatch": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
- "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=",
- "dev": true,
- "requires": {
- "array-differ": "1.0.0",
- "array-union": "1.0.2",
- "arrify": "1.0.1",
- "minimatch": "3.0.4"
- }
- },
"mute-stream": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -8939,12 +8489,6 @@
"wrappy": "1.0.2"
}
},
- "onecolor": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/onecolor/-/onecolor-3.0.4.tgz",
- "integrity": "sha1-daRvgNpseqpbTarhekcZi9llJJQ=",
- "dev": true
- },
"onetime": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
@@ -9358,16 +8902,6 @@
"pinkie": "2.0.4"
}
},
- "pipetteur": {
- "version": "2.0.3",
- "resolved": "https://registry.npmjs.org/pipetteur/-/pipetteur-2.0.3.tgz",
- "integrity": "sha1-GVV2CVno0aEcsqUOyD7sRwYz5J8=",
- "dev": true,
- "requires": {
- "onecolor": "3.0.4",
- "synesthesia": "1.0.1"
- }
- },
"pkg-dir": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
@@ -9377,15 +8911,6 @@
"find-up": "1.1.2"
}
},
- "plur": {
- "version": "2.1.2",
- "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz",
- "integrity": "sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=",
- "dev": true,
- "requires": {
- "irregular-plurals": "1.3.0"
- }
- },
"pluralize": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
@@ -9661,29 +9186,6 @@
}
}
},
- "postcss-less": {
- "version": "0.14.0",
- "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-0.14.0.tgz",
- "integrity": "sha1-xjGwicbM5CK5oQ86lY0r7dOBkyQ=",
- "dev": true,
- "requires": {
- "postcss": "5.2.17"
- },
- "dependencies": {
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- }
- }
- }
- },
"postcss-load-config": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz",
@@ -10110,32 +9612,6 @@
}
}
},
- "postcss-reporter": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-3.0.0.tgz",
- "integrity": "sha1-CeoPN6RExWk4eGBuCbAY6+/3z48=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "lodash": "4.17.4",
- "log-symbols": "1.0.2",
- "postcss": "5.2.17"
- },
- "dependencies": {
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- }
- }
- }
- },
"postcss-resolve-nested-selector": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
@@ -10719,15 +10195,6 @@
"graceful-fs": "4.1.11"
}
},
- "read-file-stdin": {
- "version": "0.2.1",
- "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz",
- "integrity": "sha1-JezP86FTtoCa+ssj7hU4fbng7mE=",
- "dev": true,
- "requires": {
- "gather-stream": "1.0.0"
- }
- },
"read-only-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-2.0.0.tgz",
@@ -12071,15 +11538,6 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
- "string_decoder": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
- "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
- "dev": true,
- "requires": {
- "safe-buffer": "5.0.1"
- }
- },
"string-width": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz",
@@ -12101,6 +11559,15 @@
"function-bind": "1.1.0"
}
},
+ "string_decoder": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+ "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
+ "dev": true,
+ "requires": {
+ "safe-buffer": "5.0.1"
+ }
+ },
"stringify-object-es5": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/stringify-object-es5/-/stringify-object-es5-2.5.0.tgz",
@@ -12172,67 +11639,6 @@
"integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
"dev": true
},
- "stylehacks": {
- "version": "2.3.2",
- "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-2.3.2.tgz",
- "integrity": "sha1-ZMg+BDimjJ7fRJ6MVSp9mrYAmws=",
- "dev": true,
- "requires": {
- "browserslist": "1.7.7",
- "chalk": "1.1.3",
- "log-symbols": "1.0.2",
- "minimist": "1.2.0",
- "plur": "2.1.2",
- "postcss": "5.2.17",
- "postcss-reporter": "1.4.1",
- "postcss-selector-parser": "2.2.3",
- "read-file-stdin": "0.2.1",
- "text-table": "0.2.0",
- "write-file-stdout": "0.0.2"
- },
- "dependencies": {
- "browserslist": {
- "version": "1.7.7",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
- "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
- "dev": true,
- "requires": {
- "caniuse-db": "1.0.30000676",
- "electron-to-chromium": "1.3.13"
- }
- },
- "minimist": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
- "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
- "dev": true
- },
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- }
- },
- "postcss-reporter": {
- "version": "1.4.1",
- "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-1.4.1.tgz",
- "integrity": "sha1-wTbwpbFhkV83ndN2XGEHX357mvI=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "lodash": "4.17.4",
- "log-symbols": "1.0.2",
- "postcss": "5.2.17"
- }
- }
- }
- },
"stylelint": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-8.2.0.tgz",
@@ -12691,194 +12097,27 @@
}
},
"stylelint-scss": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-1.5.1.tgz",
- "integrity": "sha1-pariA/xaqrpITH0TgPKFYLbzOsA=",
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-2.2.0.tgz",
+ "integrity": "sha512-O3jIpujSDrMHlGoXT3AYsOz2DPb49Y+0rCPGU34BHrbMBWSciwkvtm4WFrYi/cDnbpkXFemC0lHwmtspK8IQEA==",
"dev": true,
"requires": {
"lodash": "4.17.4",
"postcss-media-query-parser": "0.2.3",
"postcss-resolve-nested-selector": "0.1.1",
- "postcss-selector-parser": "2.2.3",
- "postcss-value-parser": "3.3.0",
- "stylelint": "7.13.0"
+ "postcss-selector-parser": "3.1.1",
+ "postcss-value-parser": "3.3.0"
},
"dependencies": {
- "autoprefixer": {
- "version": "6.7.7",
- "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
- "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
+ "postcss-selector-parser": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
+ "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
"dev": true,
"requires": {
- "browserslist": "1.7.7",
- "caniuse-db": "1.0.30000676",
- "normalize-range": "0.1.2",
- "num2fraction": "1.2.2",
- "postcss": "5.2.17",
- "postcss-value-parser": "3.3.0"
- }
- },
- "browserslist": {
- "version": "1.7.7",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
- "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
- "dev": true,
- "requires": {
- "caniuse-db": "1.0.30000676",
- "electron-to-chromium": "1.3.13"
- }
- },
- "chalk": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
- "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
- "dev": true,
- "requires": {
- "ansi-styles": "3.2.0",
- "escape-string-regexp": "1.0.5",
- "supports-color": "4.2.1"
- },
- "dependencies": {
- "ansi-styles": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
- "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
- "dev": true,
- "requires": {
- "color-convert": "1.9.0"
- }
- },
- "supports-color": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz",
- "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==",
- "dev": true,
- "requires": {
- "has-flag": "2.0.0"
- }
- }
- }
- },
- "get-stdin": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
- "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=",
- "dev": true
- },
- "globby": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
- "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
- "dev": true,
- "requires": {
- "array-union": "1.0.2",
- "glob": "7.1.2",
- "object-assign": "4.1.1",
- "pify": "2.3.0",
- "pinkie-promise": "2.0.1"
- }
- },
- "has-flag": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
- "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
- "dev": true
- },
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- },
- "dependencies": {
- "chalk": {
- "version": "1.1.3",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
- "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
- "dev": true,
- "requires": {
- "ansi-styles": "2.2.1",
- "escape-string-regexp": "1.0.5",
- "has-ansi": "2.0.0",
- "strip-ansi": "3.0.1",
- "supports-color": "2.0.0"
- },
- "dependencies": {
- "supports-color": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
- "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
- "dev": true
- }
- }
- }
- }
- },
- "postcss-scss": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.4.1.tgz",
- "integrity": "sha1-rXcbgfD3L19IRdCKpg+TVXZT1Uw=",
- "dev": true,
- "requires": {
- "postcss": "5.2.17"
- }
- },
- "resolve-from": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
- "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
- "dev": true
- },
- "stylelint": {
- "version": "7.13.0",
- "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-7.13.0.tgz",
- "integrity": "sha1-ER+Xttpy53XICADWu29fhpmXeF0=",
- "dev": true,
- "requires": {
- "autoprefixer": "6.7.7",
- "balanced-match": "0.4.2",
- "chalk": "2.0.1",
- "colorguard": "1.2.0",
- "cosmiconfig": "2.1.3",
- "debug": "2.6.8",
- "doiuse": "2.6.0",
- "execall": "1.0.0",
- "file-entry-cache": "2.0.0",
- "get-stdin": "5.0.1",
- "globby": "6.1.0",
- "globjoin": "0.1.4",
- "html-tags": "2.0.0",
- "ignore": "3.3.3",
- "imurmurhash": "0.1.4",
- "known-css-properties": "0.2.0",
- "lodash": "4.17.4",
- "log-symbols": "1.0.2",
- "mathml-tag-names": "2.0.1",
- "meow": "3.7.0",
- "micromatch": "2.3.11",
- "normalize-selector": "0.2.0",
- "pify": "2.3.0",
- "postcss": "5.2.17",
- "postcss-less": "0.14.0",
- "postcss-media-query-parser": "0.2.3",
- "postcss-reporter": "3.0.0",
- "postcss-resolve-nested-selector": "0.1.1",
- "postcss-scss": "0.4.1",
- "postcss-selector-parser": "2.2.3",
- "postcss-value-parser": "3.3.0",
- "resolve-from": "3.0.0",
- "specificity": "0.3.1",
- "string-width": "2.0.0",
- "style-search": "0.1.0",
- "stylehacks": "2.3.2",
- "sugarss": "0.2.0",
- "svg-tags": "1.0.0",
- "table": "4.0.1"
+ "dot-prop": "4.1.1",
+ "indexes-of": "1.0.1",
+ "uniq": "1.0.1"
}
}
}
@@ -12926,29 +12165,6 @@
}
}
},
- "sugarss": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-0.2.0.tgz",
- "integrity": "sha1-rDQjdWMyfG/4l7ZHQr9q7BkK054=",
- "dev": true,
- "requires": {
- "postcss": "5.2.17"
- },
- "dependencies": {
- "postcss": {
- "version": "5.2.17",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
- "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
- "dev": true,
- "requires": {
- "chalk": "1.1.3",
- "js-base64": "2.1.9",
- "source-map": "0.5.6",
- "supports-color": "3.2.3"
- }
- }
- }
- },
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
@@ -12993,23 +12209,6 @@
"integrity": "sha1-cX0izFPwzh3vVZQ2LzqJouu5EQU=",
"dev": true
},
- "synesthesia": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/synesthesia/-/synesthesia-1.0.1.tgz",
- "integrity": "sha1-XvlepUjA1cbm+btLDQcx3/hkp3c=",
- "dev": true,
- "requires": {
- "css-color-names": "0.0.3"
- },
- "dependencies": {
- "css-color-names": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.3.tgz",
- "integrity": "sha1-3gzvFvTYqoIioyDVttfpu62nufY=",
- "dev": true
- }
- }
- },
"syntax-error": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.3.0.tgz",
@@ -14262,12 +13461,6 @@
"slide": "1.1.6"
}
},
- "write-file-stdout": {
- "version": "0.0.2",
- "resolved": "https://registry.npmjs.org/write-file-stdout/-/write-file-stdout-0.0.2.tgz",
- "integrity": "sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=",
- "dev": true
- },
"ws": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
index 8bb1d3e9e66..32868e68aef 100644
--- a/packages/mdc-list/README.md
+++ b/packages/mdc-list/README.md
@@ -33,17 +33,20 @@ MDC Lists are designed to be accessible and RTL aware.
## Installation
-
```
npm install --save @material/list
```
## Usage
-### Basic Lists
+### HTML Structure
+#### Single-Line List
A basic list consists simply of the list itself, and list items taking up one line.
+List items (rows) can contain primary and secondary actions. Lists items can contain 1 supporting graphic tile and/or 1 metadata tile that are positioned at the start and end of the list item, respectively.
+
+
```html
Single-line item
@@ -52,390 +55,125 @@ A basic list consists simply of the list itself, and list items taking up one li
```
-#### RTL Support
-
-A list will flip its direction if it is _placed within an ancestor element containing a `dir`
-attribute with value `"rtl"`_. This applies to all lists regardless of type.
-
-```html
-
-
-
-
-```
-
-#### Dark Mode Support
-
-Like other MDC Web components, lists support dark mode either when an `mdc-list--theme-dark` class is
-attached to the root element, or the element has an ancestor with class `mdc-theme--dark`.
-
-```html
-
-
-
- A list item on a dark background
-
-
-```
-
-#### Non-interactive lists
-
-By default, list items receive styles for hover, focus, and press states (including the ripple effect if
-`MDCRipple` is instantiated). It is possible to opt out of these styles by adding the `mdc-list--non-interactive`
-modifier to the parent list.
-
-> **Note**: In order to receive focus state, list items must either use a focusable element such as ``, or have an
-> explicit `tabindex` attribute value.
-
-### "Dense" Lists
-
-Lists can be made more compact by using the `mdc-list--dense` modifier class.
-
-```html
-
-```
-
-### Two-Line List Items
-
-While in theory you can add any number of "lines" to a list item, you can use the `mdc-list--two-line` combined with
-some extra markup around the text to style a list in the two-line list style as defined by
-[the spec](https://material.io/guidelines/components/lists.html#lists-specs) (see "Two-line lists").
+#### Two-Line List
+While in theory you can add any number of "lines" to a list item, you can use the `mdc-list--two-line` combined with some extra markup around the text to style a list in the two-line list style as defined by [the spec](https://material.io/guidelines/components/lists.html#lists-specs) (see "Two-line lists").
```html
- Two-line item
- Secondary text
+ First-line text
+
+ Second-line text
+
-
-```
-
-### List Item Tile Elements
-
-As mentioned in the spec, list items (rows) can contain primary and secondary actions. They can also contain
-things such as avatars, icons, interactive controls, etc. We call all of these items *tiles*. Lists items
-can contain 1 **supporting graphic** tile and/or 1 **metadata** tile that are positioned at the start
-and end of the list item, respectively. These tiles are correctly flipped in RTL contexts.
-
-> _N.B._ Please keep accessibility in mind when using things such as icons / icon fonts for tile
-> elements. Font Awesome has [excellent guidelines](http://fontawesome.io/accessibility/) for this.
-
-#### Adding a Supporting Graphic
-
-You can add a supporting graphic using an element with class `mdc-list-item__graphic` class.
-
-```html
-
-
- network_wifi
- Wi-Fi
-
-
- bluetooth
- Bluetooth
-
-
- data_usage
- Data Usage
-
-
-```
-
-#### Making a Graphic an Avatar
-
-You can use the `mdc-list--avatar-list` modifier class to style the graphic elements as what
-the spec calls "avatars" - large, circular tiles that lend themselves well to contact images,
-profile pictures, etc.
-
-```html
-Contacts
-
-
-
-
-
-
-
-```
-
-#### Adding Metadata
-
-Metadata tiles can be added in a similar way to graphics. Place an element after the text
-with a `mdc-list-item__meta` class.
-
-```html
-Contacts
-
```
-Supporting graphics and metadata can be combined easily. Check out the list demo for many examples of how
-tiles can be configured.
-
-> NOTE: If using controls such as a switch within a list tile, you may need to override
-> the width and height styles set on the tile element.
-
-### Using Ink Ripples for Interactive Lists
-
-MDC List supports adding ripples to `mdc-list-item` elements, for example in the case of a nav menu.
-To add ripples to lists, simply attach a ripple to each list item. Note that this can be easily done
-via `mdc-auto-init` when using [material-components-web](../material-components-web).
-
-```html
-
-
-
- network_wifi
-
- Wi-Fi
-
-
-
- bluetooth
-
- Bluetooth
-
-
-
- data_usage
-
- Data Usage
-
-
-
-```
-
-### List Dividers
-
-MDC List contains an `mdc-list-divider` class which can be used as full-width or inset
-subdivisions either within lists themselves, or standalone between related groups of content.
-
-To use within lists, simply add the `mdc-list-divider` class to a list item.
-
-```html
-
- Item 1 - Division 1
- Item 2 - Division 1
- Item 3 - Division 1
- Item 1 - Division 2
- Item 1 - Division 2
-
-```
-
-> Note the `role="separator"` attribute on the list divider. It is important to include this so that
-> assistive technology can be made aware that this is a presentational element and is not meant to
-> be included as an item in a list. Note that `separator` is indeed a
-> [valid role](https://w3c.github.io/html/grouping-content.html#the-li-element) for `li` elements.
-
-Dividers are designed to span the full width of the list by default (especially useful in the context of drawers and menus).
-To make a divider match the padding of list items, add the `mdc-list-divider--padded` modifier class.
-
-Inset dividers are useful when working with lists which have graphics.
-To add an inset divider, also add the `mdc-list-divider--inset` modifier class to the divider element.
-
-### List Groups
-
-Multiple related lists can be grouped together using the `mdc-list-group` class on a containing
-element. `mdc-list-divider` elements can be used in these groups _between_ lists to help
-differentiate them.
+#### List Groups
+Multiple related lists can be grouped together using the `mdc-list-group` class on a containing element.
```html
- Single-line item
- Single-line item
- Single-line item
+ line item
+ line item
+ line item
-
-
- Single-line item
- Single-line item
- Single-line item
+ line item
+ line item
+ line item
```
-### Tips/Tricks
-
-#### Bordered Lists
-
-While hinted at within the spec, **bordered lists** - where each list item has a border around
-it - are not officially part of the list component spec. However, they seem to be used
-often in web applications, especially those suited more for desktop. The following example shows how
-to add borders to lists.
+#### List Dividers
+MDC List contains an `mdc-list-divider` class which can be used as full-width or inset subdivisions either within lists themselves, or standalone between related groups of content.
```html
-
-
-
- Item 1
- Item 2
- Item 3
+
+ Item 1 - Division 1
+ Item 2 - Division 1
+ Item 1 - Division 2
+ Item 2 - Division 2
```
-#### Control Tile Positions
-
-In some cases, you may want the supporting graphic or metadata to be positioned differently than the center.
-An example of this is in [this mock][pos-mock] showing a timestamp being positioned in the top-right corner
-or a list item. You can easily do this by adding an `align-self` rule to the tiles you'd like
-styled this way. For example, given a `timestamp` class for metadata:
-
-```css
-.mdc-list-item__meta.timestamp {
- /* Lock to top of container. */
- align-self: flex-start;
-}
-```
+> NOTE: the role="separator" attribute on the list divider. It is important to include this so that assistive technology can be made aware that this is a presentational element and is not meant to be included as an item in a list. Note that separator is indeed a valid role for li elements.
-[pos-mock]: https://material-design.storage.googleapis.com/publish/material_v_9/0Bx4BSt6jniD7ckJuUHNnUVlVYTQ/components_lists_content1.png
-
-Alternatively, if you have _multiple_ items you'd like to put into a tile, you can give it `display: flex` and
-`flex-direction: column`. This will allow you to stack items within a tile, one on top of another.
-
-For example, let's say you're building a messaging app and, naturally, you want a list of messages
-as part of your UI. Your designer wants a timestamp in the top-right corner and an "unread"
-indicator below it corner.
-
-The HTML for this can be easily added:
+OR
```html
-
-
-
- Ali Connors
- Lunch this afternoon? I was...
-
-
-
- 4:36pm
- chat_bubble
-
-
-
+
+ Item 1 - List 1
+ Item 2 - List 1
+
+
+ Item 1 - List 2
+ Item 2 - List 2
-```
-
-And the basic CSS is relatively trivial:
-
-```css
-.msgs-list .mdc-list-item__meta {
- width: auto;
- height: auto;
- display: inline-flex;
- flex-direction: column;
- align-items: flex-end;
-}
```
### CSS Classes
-
-#### Blocks
-
-CSS Class | Description
---- | ---
-`mdc-list` | A container for rows (`mdc-list-item`s)
-`mdc-list-group` | Wraps one or more `mdc-list` and/or `mdc-list-divider` elements
-`mdc-list-item` | An individual row in an `mdc-list`
-`mdc-list-divider` | Separates two rows or two lists using a horizontal bar
-
-#### Modifiers
-
-CSS Class | Description
---- | ---
-`mdc-list--dense` | Increases the density of the list, making it appear more compact
-`mdc-list--avatar-list` | Configures the leading tiles of each row to display images instead of icons
-`mdc-list--two-line` | Increases the height of the row to give it greater visual separation from adjacent rows
-`mdc-list-item--selected` | Styles the row in a selected\* state
-`mdc-list-item--activated` | Styles the row in an activated\* state
-`mdc-list-divider--inset` | Increases the leading margin of the divider so that it does not intersect the avatar column
-
-\* **Note**: the difference between _selected_ and _activated_ states:
-
-- _Selected_ is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
- Multiple items in a list can be _selected_ at the same time.
-- _Activated_ is more permanent within the page's lifetime. E.g., the currently highlighted destination in a nav drawer.
- Only one item in a list can be _activated_ at a time.
-
-#### Elements
-
CSS Class | Description
--- | ---
-`mdc-list-item__graphic` | The first tile in the row (in LTR languages, the left-most)
-`mdc-list-item__meta` | The last tile in the row (in LTR languages, the right-most)
-`mdc-list-item__text` | Primary text for the row (displayed as the middle tile)
-`mdc-list-item__secondary-text` | Secondary text for the row (displayed in the middle tile)
-`mdc-list-group__subheader` | Heading text displayed above each list in a group
+`mdc-list` | Mandatory, for the list element
+`mdc-list--non-interactive` | Optional, disables interactivity affordances
+`mdc-list--dense` | Optional, styles the density of the list, making it appear more compact
+`mdc-list--avatar-list` | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger
+`mdc-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines)
+`mdc-list-item` | Mandatory, for the list item element
+`mdc-list-item__text` | Optional, primary text for the row (displayed as middle column of the list item)
+`mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`
+`mdc-list-item--selected` | Optional, styles the row in an selected* state
+`mdc-list-item--activated` | Optional, styles the row in an activated* state
+`mdc-list-item__graphic` | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
+`mdc-list-item__meta` | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
+`mdc-list-group` | Optional, wrapper around two or more mdc-list elements to be grouped together
+`mdc-list-group__subheader` | Optional, heading text displayed above each list in a group
+`mdc-list-divider` | Optional, for list divider element
+`mdc-list-divider--padded` | Optional, leaves gaps on each side of divider to match padding of `list-item__meta`
+`mdc-list-divider--inset` | Optional, increases the leading margin of the divider so that it does not intersect the avatar column
+
+> NOTE: `mdc-list-divider` class can be used between list items (example 1) *OR* between two lists (example 2)
+
+> NOTE: the difference between selected and activated states:
+
+* *Selected* state should be implemented on the `.list-item` when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.
+* Multiple items can be selected at the same time when using the *selected* state
+* *Activated* state is similar to selected state, however should only be implemented once within a specific list.
+* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page.
### Sass Mixins
-
Mixin | Description
--- | ---
-`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text
-`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text
-`mdc-list-item-graphic-fill-color($color)` | Sets the fill color of the supporting graphic
-`mdc-list-item-graphic-ink-color($color)` | Sets the ink color of the supporting graphic
-`mdc-list-item-meta-ink-color($color)` | Sets the ink color of the metadata element
-`mdc-list-divider-color($color)` | Sets the color of the divider
-`mdc-list-group-subheader-ink-color($color)` | Sets the ink color of the list group subheader
+`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text of the list item
+`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text of the list item
+`mdc-list-item-graphic-fill-color($color)` | Sets background ink color of the graphic element within list item
+`mdc-list-item-graphic-ink-color($color)` | Sets ink color of the graphic element within list item
+`mdc-list-item-meta-ink-color($color)` | Sets ink color of the meta element within list item
+`mdc-list-divider-color($color)` | Sets divider ink color
+`mdc-list-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group
- Janet Perkins
- 
- Mary Johnson
-
- 
- Peter Carlsson
-
-