@shortfuse/materialdesignweb 0.2.0 → 0.5.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.
Files changed (416) hide show
  1. package/.browserslistrc +2 -1
  2. package/.eslintrc.json +188 -30
  3. package/.stylelintrc.json +643 -2
  4. package/.vscode/launch.json +20 -5
  5. package/.vscode/settings.json +3 -0
  6. package/CHANGELOG.md +36 -0
  7. package/README.md +82 -2
  8. package/adapters/datatable/column.js +176 -0
  9. package/adapters/datatable/index.js +253 -437
  10. package/adapters/dom/index.js +586 -0
  11. package/adapters/list/index.js +36 -113
  12. package/adapters/search/index.js +153 -180
  13. package/components/appbar/_spec.scss +165 -0
  14. package/components/appbar/_theme.scss +0 -0
  15. package/components/appbar/index.scss +2 -0
  16. package/components/banner/_spec.scss +83 -0
  17. package/components/banner/_theme.scss +0 -0
  18. package/components/banner/index.scss +2 -0
  19. package/components/bottomnav/README.md +4 -4
  20. package/components/bottomnav/_spec.scss +149 -0
  21. package/components/bottomnav/_theme.scss +0 -0
  22. package/components/bottomnav/index.js +100 -120
  23. package/components/bottomnav/index.scss +2 -0
  24. package/components/bottomnav/item.js +88 -0
  25. package/components/button/README.md +16 -22
  26. package/components/button/_spec.scss +162 -0
  27. package/components/button/_theme.scss +42 -0
  28. package/components/button/index.eta +32 -0
  29. package/components/button/index.js +37 -48
  30. package/components/button/index.pug +18 -0
  31. package/components/button/index.scss +2 -0
  32. package/components/card/_spec.scss +241 -0
  33. package/components/card/_theme.scss +0 -0
  34. package/components/card/index.scss +2 -0
  35. package/components/chip/_spec.scss +111 -0
  36. package/components/chip/_theme.scss +105 -0
  37. package/components/chip/index.js +23 -0
  38. package/components/chip/index.scss +2 -0
  39. package/components/chip/item.js +20 -0
  40. package/components/datatable/_spec.scss +225 -0
  41. package/components/datatable/_theme.scss +128 -0
  42. package/components/datatable/cell.js +44 -0
  43. package/components/datatable/columnheader.js +46 -0
  44. package/components/datatable/index.js +339 -443
  45. package/components/datatable/index.scss +2 -0
  46. package/components/datatable/row.js +48 -0
  47. package/components/datatable/rowheader.js +18 -0
  48. package/components/dialog/_spec.scss +203 -0
  49. package/components/dialog/_theme.scss +7 -0
  50. package/components/dialog/index.js +512 -437
  51. package/components/dialog/index.scss +2 -0
  52. package/components/divider/_spec.scss +11 -0
  53. package/components/divider/_theme.scss +0 -0
  54. package/components/divider/index.scss +2 -0
  55. package/components/elevation/_spec.scss +9 -0
  56. package/components/elevation/_theme.scss +0 -0
  57. package/components/elevation/index.scss +2 -0
  58. package/components/fab/{style.scss → _spec.scss} +104 -79
  59. package/components/fab/_theme.scss +0 -0
  60. package/components/fab/index.js +85 -79
  61. package/components/fab/index.scss +2 -0
  62. package/components/grid/_spec.scss +169 -0
  63. package/components/grid/_theme.scss +0 -0
  64. package/components/grid/index.scss +2 -0
  65. package/components/layout/_mixins.scss +11 -0
  66. package/components/layout/_spec.scss +916 -0
  67. package/components/layout/_theme.scss +19 -0
  68. package/components/layout/index.js +454 -0
  69. package/components/layout/index.scss +2 -0
  70. package/components/list/_spec.scss +363 -0
  71. package/components/list/_theme.scss +102 -0
  72. package/components/list/content.js +106 -0
  73. package/components/list/index.js +234 -79
  74. package/components/list/index.scss +2 -0
  75. package/components/list/item.js +167 -0
  76. package/components/list/secondary.js +45 -0
  77. package/components/menu/_spec.scss +329 -0
  78. package/components/menu/_theme.scss +0 -0
  79. package/components/menu/index.js +636 -651
  80. package/components/menu/index.scss +2 -0
  81. package/components/menu/item.js +231 -0
  82. package/components/progress/_spec.scss +156 -0
  83. package/components/progress/_theme.scss +0 -0
  84. package/components/progress/index.js +29 -13
  85. package/components/progress/index.scss +2 -0
  86. package/components/selection/_spec.scss +376 -0
  87. package/components/selection/_theme.scss +134 -0
  88. package/components/selection/index.eta +60 -0
  89. package/components/selection/index.js +70 -0
  90. package/components/selection/index.pug +30 -0
  91. package/components/selection/index.scss +2 -0
  92. package/components/selection/input.js +54 -0
  93. package/components/selection/radiogroup.js +40 -0
  94. package/components/slider/{style.scss → _spec.scss} +31 -34
  95. package/components/slider/_theme.scss +0 -0
  96. package/components/slider/index.scss +2 -0
  97. package/components/snackbar/_spec.scss +150 -0
  98. package/components/snackbar/_theme.scss +0 -0
  99. package/components/snackbar/index.js +293 -206
  100. package/components/snackbar/index.scss +2 -0
  101. package/components/tab/_spec.scss +220 -0
  102. package/components/tab/_theme.scss +0 -0
  103. package/components/tab/content.js +210 -0
  104. package/components/tab/index.js +229 -213
  105. package/components/tab/index.scss +2 -0
  106. package/components/tab/item.js +88 -0
  107. package/components/tab/list.js +196 -0
  108. package/components/tab/panel.js +54 -0
  109. package/components/textfield/README.md +4 -4
  110. package/components/textfield/_spec.scss +763 -0
  111. package/components/textfield/_theme.scss +264 -0
  112. package/components/textfield/index.eta +74 -0
  113. package/components/textfield/index.js +132 -138
  114. package/components/textfield/index.pug +30 -0
  115. package/components/textfield/index.scss +2 -0
  116. package/components/tooltip/_spec.scss +185 -0
  117. package/components/tooltip/_theme.scss +0 -0
  118. package/components/tooltip/index.scss +2 -0
  119. package/components/type/_spec.scss +227 -0
  120. package/components/type/_theme.scss +0 -0
  121. package/components/type/index.scss +2 -0
  122. package/core/_breakpoint.scss +189 -0
  123. package/core/_elevation.scss +78 -0
  124. package/core/_length.scss +8 -0
  125. package/core/_motion.scss +31 -0
  126. package/core/_platform.scss +12 -0
  127. package/core/_type.scss +128 -0
  128. package/core/aria/attributes.js +141 -0
  129. package/core/aria/button.js +49 -0
  130. package/core/aria/keyboard.js +92 -0
  131. package/core/aria/rovingtabindex.js +175 -0
  132. package/core/aria/tab.js +59 -0
  133. package/core/document/index.js +39 -0
  134. package/core/dom.js +180 -0
  135. package/core/overlay/_spec.scss +28 -0
  136. package/core/overlay/_theme.scss +147 -0
  137. package/core/overlay/index.js +95 -0
  138. package/core/overlay/index.scss +2 -0
  139. package/core/ripple/_spec.scss +196 -0
  140. package/core/ripple/_theme.scss +20 -0
  141. package/core/ripple/index.js +286 -0
  142. package/core/ripple/index.scss +2 -0
  143. package/core/theme/_aliases.scss +15 -0
  144. package/core/theme/_config.scss +8 -0
  145. package/core/theme/_functions.scss +22 -0
  146. package/{components/theming/palettes.scss → core/theme/_palettes.scss} +173 -151
  147. package/core/theme/_spec.scss +0 -0
  148. package/core/theme/_theme.scss +268 -0
  149. package/core/theme/index.js +50 -0
  150. package/core/theme/index.scss +4 -0
  151. package/core/throttler.js +42 -0
  152. package/core/transition/index.js +465 -0
  153. package/docs/_flex.scss +28 -0
  154. package/docs/_menuoptions.js +183 -0
  155. package/docs/_partials/_androidnavbar.eta +5 -0
  156. package/docs/_partials/_androidstatusbar.eta +13 -0
  157. package/docs/_partials/_appbar.eta +27 -0
  158. package/docs/_partials/_buttontest.eta +31 -0
  159. package/docs/_partials/_header.eta +146 -0
  160. package/docs/_partials/_navlistitem.eta +16 -0
  161. package/docs/_partials/_target.eta +1 -0
  162. package/docs/_sample-utils.js +88 -0
  163. package/docs/{src/storage.js → _storage.js} +0 -0
  164. package/docs/docs.scss +331 -0
  165. package/docs/framework.scss +26 -0
  166. package/docs/index.eta +12 -0
  167. package/docs/index.js +7 -0
  168. package/docs/pages/appbar.eta +108 -0
  169. package/docs/pages/appbar.js +0 -0
  170. package/docs/pages/bottomnav.eta +188 -0
  171. package/docs/pages/bottomnav.js +118 -0
  172. package/docs/pages/button.eta +124 -0
  173. package/docs/pages/button.js +224 -0
  174. package/docs/pages/card.eta +90 -0
  175. package/docs/pages/card.js +175 -0
  176. package/docs/pages/chip.eta +122 -0
  177. package/docs/pages/chip.js +80 -0
  178. package/docs/pages/color.eta +143 -0
  179. package/docs/pages/color.js +261 -0
  180. package/docs/pages/datatable.eta +323 -0
  181. package/docs/pages/datatable.js +160 -0
  182. package/docs/pages/dialog.eta +184 -0
  183. package/docs/{src/components → pages}/dialog.js +35 -48
  184. package/docs/pages/dom.eta +26 -0
  185. package/docs/pages/dom.js +140 -0
  186. package/docs/pages/elevation.eta +35 -0
  187. package/docs/pages/elevation.js +0 -0
  188. package/docs/pages/fab.eta +99 -0
  189. package/docs/{src/components → pages}/fab.js +6 -13
  190. package/docs/pages/grid.eta +135 -0
  191. package/docs/pages/grid.js +128 -0
  192. package/docs/pages/layout.eta +8 -0
  193. package/docs/pages/layout.js +0 -0
  194. package/docs/pages/list.eta +465 -0
  195. package/docs/pages/list.js +8 -0
  196. package/docs/pages/menu.eta +274 -0
  197. package/docs/{src/components → pages}/menu.js +26 -42
  198. package/docs/pages/overlay.eta +69 -0
  199. package/docs/pages/overlay.js +3 -0
  200. package/docs/pages/progress.eta +23 -0
  201. package/docs/{src/components → pages}/progress.js +2 -4
  202. package/docs/pages/ripple.eta +27 -0
  203. package/docs/pages/ripple.js +3 -0
  204. package/docs/pages/search.eta +242 -0
  205. package/docs/pages/search.js +226 -0
  206. package/docs/pages/selection.eta +107 -0
  207. package/docs/pages/selection.js +12 -0
  208. package/docs/pages/slider.eta +23 -0
  209. package/docs/pages/slider.js +0 -0
  210. package/docs/pages/snackbar.eta +83 -0
  211. package/docs/{src/components → pages}/snackbar.js +31 -36
  212. package/docs/pages/tab.eta +407 -0
  213. package/docs/pages/tab.js +152 -0
  214. package/docs/pages/textfield.eta +487 -0
  215. package/docs/{src/components → pages}/textfield.js +41 -45
  216. package/docs/pages/tooltip.eta +92 -0
  217. package/docs/pages/tooltip.js +0 -0
  218. package/docs/pages/transition.eta +117 -0
  219. package/docs/pages/transition.js +52 -0
  220. package/docs/pages/type.eta +31 -0
  221. package/docs/pages/type.js +0 -0
  222. package/docs/postrender.js +41 -0
  223. package/docs/prerender.js +16 -0
  224. package/docs/pwa/_dialogs.eta +143 -0
  225. package/docs/pwa/_menus.eta +16 -0
  226. package/docs/pwa/pwa-prerender.js +3 -0
  227. package/docs/pwa/pwa.eta +478 -0
  228. package/docs/pwa/pwa.js +298 -0
  229. package/docs/pwa/pwa.scss +31 -0
  230. package/docs/themes/theme-colored.scss +15 -0
  231. package/docs/themes/theme-default.scss +3 -0
  232. package/index.scss +27 -0
  233. package/jsconfig.json +8 -2
  234. package/package.json +54 -27
  235. package/scripts/deploy-docs.sh +9 -0
  236. package/templates/index.eta +2 -0
  237. package/templates/index.pug +3 -0
  238. package/tsconfig.json +16 -0
  239. package/utils/function.js +3 -0
  240. package/webpack.config.js +224 -68
  241. package/_index.scss +0 -4
  242. package/components/all-components.scss +0 -21
  243. package/components/bottomnav/style.scss +0 -190
  244. package/components/bottomnav/theming.scss +0 -76
  245. package/components/button/style.scss +0 -315
  246. package/components/button/theming.scss +0 -134
  247. package/components/card/style.scss +0 -175
  248. package/components/card/theming.scss +0 -43
  249. package/components/common/dom.js +0 -51
  250. package/components/common/functions.scss +0 -174
  251. package/components/common/mixins.scss +0 -122
  252. package/components/common/motion.scss +0 -36
  253. package/components/common/type.scss +0 -104
  254. package/components/common/variables.scss +0 -46
  255. package/components/datatable/style.scss +0 -257
  256. package/components/datatable/theming.scss +0 -119
  257. package/components/dialog/style.scss +0 -159
  258. package/components/dialog/theming.scss +0 -29
  259. package/components/divider/style.scss +0 -7
  260. package/components/divider/theming.scss +0 -20
  261. package/components/elevation/style.scss +0 -32
  262. package/components/layout/style.scss +0 -223
  263. package/components/list/style.scss +0 -358
  264. package/components/list/theming.scss +0 -83
  265. package/components/menu/style.scss +0 -280
  266. package/components/menu/theming.scss +0 -80
  267. package/components/navdrawer/index.js +0 -200
  268. package/components/navdrawer/style.scss +0 -595
  269. package/components/navdrawer/theming.scss +0 -62
  270. package/components/progress/style.scss +0 -136
  271. package/components/ripple/index.js +0 -63
  272. package/components/ripple/ripple.scss +0 -122
  273. package/components/selection/style.scss +0 -320
  274. package/components/selection/theming.scss +0 -98
  275. package/components/snackbar/style.scss +0 -212
  276. package/components/switch/style.scss +0 -3
  277. package/components/tab/style.scss +0 -275
  278. package/components/tab/theming.scss +0 -34
  279. package/components/template/theming.scss +0 -31
  280. package/components/textfield/style.scss +0 -795
  281. package/components/textfield/theming.scss +0 -256
  282. package/components/theming/globals.scss +0 -25
  283. package/components/theming/theming.scss +0 -559
  284. package/components/toolbar/style.scss +0 -190
  285. package/components/toolbar/theming.scss +0 -32
  286. package/components/tooltip/style.scss +0 -135
  287. package/components/type/style.scss +0 -167
  288. package/components/type/theming.scss +0 -25
  289. package/docs/bottomnav.html +0 -1
  290. package/docs/bottomnav.min.js +0 -2
  291. package/docs/bottomnav.min.js.map +0 -1
  292. package/docs/button.html +0 -1
  293. package/docs/button.min.js +0 -2
  294. package/docs/button.min.js.map +0 -1
  295. package/docs/card.html +0 -1
  296. package/docs/card.min.js +0 -2
  297. package/docs/card.min.js.map +0 -1
  298. package/docs/components.min.css +0 -1
  299. package/docs/components.min.js +0 -2
  300. package/docs/components.min.js.map +0 -1
  301. package/docs/datatable.html +0 -1
  302. package/docs/datatable.min.js +0 -2
  303. package/docs/datatable.min.js.map +0 -1
  304. package/docs/dialog.html +0 -1
  305. package/docs/dialog.min.js +0 -2
  306. package/docs/dialog.min.js.map +0 -1
  307. package/docs/docs.min.css +0 -1
  308. package/docs/docs.min.js +0 -2
  309. package/docs/docs.min.js.map +0 -1
  310. package/docs/elevation.html +0 -1
  311. package/docs/elevation.min.js +0 -2
  312. package/docs/elevation.min.js.map +0 -1
  313. package/docs/fab.html +0 -1
  314. package/docs/fab.min.js +0 -2
  315. package/docs/fab.min.js.map +0 -1
  316. package/docs/index.html +0 -1
  317. package/docs/index.min.js +0 -2
  318. package/docs/index.min.js.map +0 -1
  319. package/docs/layout.html +0 -1
  320. package/docs/layout.min.js +0 -2
  321. package/docs/layout.min.js.map +0 -1
  322. package/docs/list.html +0 -1
  323. package/docs/list.min.js +0 -2
  324. package/docs/list.min.js.map +0 -1
  325. package/docs/menu.html +0 -1
  326. package/docs/menu.min.js +0 -2
  327. package/docs/menu.min.js.map +0 -1
  328. package/docs/navdrawer.html +0 -1
  329. package/docs/navdrawer.min.js +0 -2
  330. package/docs/navdrawer.min.js.map +0 -1
  331. package/docs/prerender.min.js +0 -2
  332. package/docs/prerender.min.js.map +0 -1
  333. package/docs/progress.html +0 -1
  334. package/docs/progress.min.js +0 -2
  335. package/docs/progress.min.js.map +0 -1
  336. package/docs/search.html +0 -1
  337. package/docs/search.min.js +0 -2
  338. package/docs/search.min.js.map +0 -1
  339. package/docs/selection.html +0 -1
  340. package/docs/selection.min.js +0 -2
  341. package/docs/selection.min.js.map +0 -1
  342. package/docs/slider.html +0 -1
  343. package/docs/slider.min.js +0 -2
  344. package/docs/slider.min.js.map +0 -1
  345. package/docs/snackbar.html +0 -1
  346. package/docs/snackbar.min.js +0 -2
  347. package/docs/snackbar.min.js.map +0 -1
  348. package/docs/src/components/bottomnav.js +0 -16
  349. package/docs/src/components/bottomnav.pug +0 -112
  350. package/docs/src/components/button.js +0 -156
  351. package/docs/src/components/button.pug +0 -194
  352. package/docs/src/components/card.js +0 -136
  353. package/docs/src/components/card.pug +0 -133
  354. package/docs/src/components/datatable.js +0 -183
  355. package/docs/src/components/datatable.pug +0 -324
  356. package/docs/src/components/dialog.pug +0 -138
  357. package/docs/src/components/elevation.js +0 -3
  358. package/docs/src/components/elevation.pug +0 -17
  359. package/docs/src/components/fab.pug +0 -84
  360. package/docs/src/components/layout.js +0 -116
  361. package/docs/src/components/layout.pug +0 -104
  362. package/docs/src/components/list.js +0 -15
  363. package/docs/src/components/list.pug +0 -293
  364. package/docs/src/components/menu.pug +0 -292
  365. package/docs/src/components/navdrawer.js +0 -112
  366. package/docs/src/components/navdrawer.pug +0 -113
  367. package/docs/src/components/progress.pug +0 -17
  368. package/docs/src/components/search.js +0 -206
  369. package/docs/src/components/search.pug +0 -149
  370. package/docs/src/components/selection.js +0 -6
  371. package/docs/src/components/selection.pug +0 -116
  372. package/docs/src/components/slider.js +0 -3
  373. package/docs/src/components/slider.pug +0 -19
  374. package/docs/src/components/snackbar.pug +0 -145
  375. package/docs/src/components/tab.js +0 -137
  376. package/docs/src/components/tab.pug +0 -329
  377. package/docs/src/components/textfield.pug +0 -416
  378. package/docs/src/components/toolbar.js +0 -6
  379. package/docs/src/components/toolbar.pug +0 -86
  380. package/docs/src/components/tooltip.js +0 -6
  381. package/docs/src/components/tooltip.pug +0 -76
  382. package/docs/src/components/type.js +0 -6
  383. package/docs/src/components/type.pug +0 -34
  384. package/docs/src/components.scss +0 -1
  385. package/docs/src/docs.scss +0 -284
  386. package/docs/src/index.js +0 -3
  387. package/docs/src/index.pug +0 -6
  388. package/docs/src/menuoptions.js +0 -136
  389. package/docs/src/mixins.pug +0 -139
  390. package/docs/src/prerender.js +0 -26
  391. package/docs/src/sample-utils.js +0 -108
  392. package/docs/src/targetHandler.js +0 -50
  393. package/docs/src/theming.ie11.scss +0 -18
  394. package/docs/src/theming.scss +0 -18
  395. package/docs/tab.html +0 -1
  396. package/docs/tab.min.js +0 -2
  397. package/docs/tab.min.js.map +0 -1
  398. package/docs/textfield.html +0 -2
  399. package/docs/textfield.min.js +0 -2
  400. package/docs/textfield.min.js.map +0 -1
  401. package/docs/theming.ie11.min.css +0 -1
  402. package/docs/theming.ie11.min.js +0 -2
  403. package/docs/theming.ie11.min.js.map +0 -1
  404. package/docs/theming.min.css +0 -1
  405. package/docs/theming.min.js +0 -2
  406. package/docs/theming.min.js.map +0 -1
  407. package/docs/toolbar.html +0 -1
  408. package/docs/toolbar.min.js +0 -2
  409. package/docs/toolbar.min.js.map +0 -1
  410. package/docs/tooltip.html +0 -1
  411. package/docs/tooltip.min.js +0 -2
  412. package/docs/tooltip.min.js.map +0 -1
  413. package/docs/type.html +0 -1
  414. package/docs/type.min.js +0 -2
  415. package/docs/type.min.js.map +0 -1
  416. package/index.js +0 -16
package/docs/pages/list.eta ADDED
@@ -0,0 +1,465 @@
1
+ <% var T = '../../templates/index.eta' %>
2
+ <% layout('../_partials/_header.eta', {page: 'list'}) %>
3
+ <div class="comparison js">
4
+ <div class="render">
5
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
6
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'teal 500', dark:true, start: ['menu'], end: ['more_vert'], body: 'Topics' }) %>
7
+ <div class="content" style="padding-top:2px;">
8
+ <ul class="mdw-list">
9
+ <li class="mdw-list__item">
10
+ <a class="mdw-list__content">Attractions</a>
11
+ </li>
12
+ <li class="mdw-list__item" aria-expanded="true">
13
+ <a class="mdw-list__content">
14
+ <div class="mdw-list__text">Dining</div>
15
+ <div class="mdw-list__secondary mdw-theme material-icons" mdw-ink="medium">expand_more</div>
16
+ </a>
17
+ <ul class="mdw-list">
18
+ <li class="mdw-list__item">
19
+ <a class="mdw-list__content">Breakfast &amp; brunch</a>
20
+ </li>
21
+ <li class="mdw-list__item">
22
+ <a class="mdw-list__content">New American</a>
23
+ </li>
24
+ <li class="mdw-list__item">
25
+ <a class="mdw-list__content">Sushi bars</a>
26
+ </li>
27
+ </ul>
28
+ </li>
29
+ <li class="mdw-list__item">
30
+ <a class="mdw-list__content">Education</a>
31
+ </li>
32
+ <li class="mdw-list__item">
33
+ <a class="mdw-list__content">Family</a>
34
+ </li>
35
+ <li class="mdw-list__item">
36
+ <a class="mdw-list__content">Health</a>
37
+ </li>
38
+ <li class="mdw-list__item">
39
+ <a class="mdw-list__content">Office</a>
40
+ </li>
41
+ <li class="mdw-list__item">
42
+ <a class="mdw-list__content">Promotions</a>
43
+ </li>
44
+ <li class="mdw-list__item">
45
+ <a class="mdw-list__content">Radio</a>
46
+ </li>
47
+ <li class="mdw-list__item">
48
+ <a class="mdw-list__content">Recipes</a>
49
+ </li>
50
+ <li class="mdw-list__item">
51
+ <a class="mdw-list__content">Sports</a>
52
+ </li>
53
+ <li class="mdw-list__item">
54
+ <a class="mdw-list__content">Travel</a>
55
+ </li>
56
+ </ul>
57
+ </div>
58
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
59
+ </div>
60
+ </div>
61
+ <div class="comparison js">
62
+ <div class="render">
63
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'secondary 700', dark:true }) %>
64
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'secondary 500', dark:true, start: ['menu'], end: ['search', 'check_circle'], body: 'Inbox' }) %>
65
+ <div class="content">
66
+ <ul class="mdw-list" mdw-divider>
67
+ <li class="mdw-list__item">
68
+ <a class="mdw-list__content">
69
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
70
+ <div class="mdw-list__text">
71
+ <div class="mdw-list__text-line">Ali Connors</div>
72
+ <div class="mdw-list__text-line">Brunch this weekend?</div>
73
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">I'll be in your neighborhood doing errands this weekend. Do you want to meet?</div>
74
+ </div>
75
+ </a>
76
+ </li>
77
+ <li class="mdw-list__item">
78
+ <a class="mdw-list__content">
79
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
80
+ <div class="mdw-list__text">
81
+ <div class="mdw-list__text-line">me, Scott, Jennifer</div>
82
+ <div class="mdw-list__text-line">Summer BBQ</div>
83
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Wish I could come. but I'm out of town this weekend.</div>
84
+ </div>
85
+ </a>
86
+ </li>
87
+ <li class="mdw-list__item">
88
+ <a class="mdw-list__content">
89
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
90
+ <div class="mdw-list__text">
91
+ <div class="mdw-list__text-line">Sandra Adams</div>
92
+ <div class="mdw-list__text-line">Oui oui</div>
93
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Do you have Paris recommendations? Have you ever been?</div>
94
+ </div>
95
+ </a>
96
+ </li>
97
+ <li class="mdw-list__item">
98
+ <a class="mdw-list__content">
99
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
100
+ <div class="mdw-list__text">
101
+ <div class="mdw-list__text-line">Trevor Hansen</div>
102
+ <div class="mdw-list__text-line">Order Confirmation</div>
103
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Thank you for your recent order from Google.</div>
104
+ </div>
105
+ </a>
106
+ </li>
107
+ <li class="mdw-list__item">
108
+ <a class="mdw-list__content">
109
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
110
+ <div class="mdw-list__text">
111
+ <div class="mdw-list__text-line">Britta Holt</div>
112
+ <div class="mdw-list__text-line">Recipe to try</div>
113
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">We should eat this: Grated Squash, Corn, and tomatillo Tacos.</div>
114
+ </div>
115
+ </a>
116
+ </li>
117
+ <li class="mdw-list__item">
118
+ <a class="mdw-list__content">
119
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
120
+ <div class="mdw-list__text">
121
+ <div class="mdw-list__text-line">David Park</div>
122
+ <div class="mdw-list__text-line">Giants game</div>
123
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Any interest in seeing</div>
124
+ </div>
125
+ </a>
126
+ </li>
127
+ <li class="mdw-list__item">
128
+ <a class="mdw-list__content">
129
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
130
+ <div class="mdw-list__text">
131
+ <div class="mdw-list__text-line">Montauk weekend</div>
132
+ <div class="mdw-list__text-line">-----</div>
133
+ <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">-----</div>
134
+ </div>
135
+ </a>
136
+ </li>
137
+ </ul>
138
+ </div>
139
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
140
+ </div>
141
+ </div>
142
+ <div class="comparison">
143
+ <div class="render">
144
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'deeppurple 700', dark:true }) %>
145
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'deeppurple 500', dark:true, start: ['menu'], end: ['search', 'more_vert'], body: 'Topics (CSS-Only)' }) %>
146
+ <div class="content" style="padding-top:2px;">
147
+ <ul class="mdw-list">
148
+ <li class="mdw-list__item">
149
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Attractions</a>
150
+ </li>
151
+ <li class="mdw-list__item">
152
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Dining</a>
153
+ </li>
154
+ <li class="mdw-list__item">
155
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Education</a>
156
+ </li>
157
+ <li class="mdw-list__item">
158
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Family</a>
159
+ </li>
160
+ <li class="mdw-list__item">
161
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Health</a>
162
+ </li>
163
+ <li class="mdw-list__item">
164
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Office</a>
165
+ </li>
166
+ <li class="mdw-list__item">
167
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Promotions</a>
168
+ </li>
169
+ <li class="mdw-list__item">
170
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Radio</a>
171
+ </li>
172
+ <li class="mdw-list__item">
173
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Recipes</a>
174
+ </li>
175
+ <li class="mdw-list__item">
176
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Sports</a>
177
+ </li>
178
+ <li class="mdw-list__item">
179
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Travel</a>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="comparison">
186
+ <div class="render">
187
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
188
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'teal 500', dark:true, start: ['menu'], end: ['more_vert'], body: 'Topics (CSS-Only)' }) %>
189
+ <div class="content" style="padding-top:2px;">
190
+ <ul class="mdw-list" mdw-divider>
191
+ <li class="mdw-list__item">
192
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
193
+ <div class="mdw-list__text">Attractions</div>
194
+ </a>
195
+ </li>
196
+ <li class="mdw-list__item">
197
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
198
+ <div class="mdw-list__text">Dining</div>
199
+ </a>
200
+ </li>
201
+ <li class="mdw-list__item">
202
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
203
+ <div class="mdw-list__text">Education</div>
204
+ </a>
205
+ </li>
206
+ <li class="mdw-list__item">
207
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
208
+ <div class="mdw-list__text">Family</div>
209
+ </a>
210
+ </li>
211
+ <li class="mdw-list__item">
212
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
213
+ <div class="mdw-list__text">Health</div>
214
+ </a>
215
+ </li>
216
+ <li class="mdw-list__item">
217
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
218
+ <div class="mdw-list__text">Office</div>
219
+ </a>
220
+ </li>
221
+ <li class="mdw-list__item">
222
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
223
+ <div class="mdw-list__text">Promotions</div>
224
+ </a>
225
+ </li>
226
+ <li class="mdw-list__item">
227
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
228
+ <div class="mdw-list__text">Radio</div>
229
+ </a>
230
+ </li>
231
+ <li class="mdw-list__item">
232
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
233
+ <div class="mdw-list__text">Recipes</div>
234
+ </a>
235
+ </li>
236
+ <li class="mdw-list__item">
237
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
238
+ <div class="mdw-list__text">Sports</div>
239
+ </a>
240
+ </li>
241
+ <li class="mdw-list__item">
242
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
243
+ <div class="mdw-list__text">Travel</div>
244
+ </a>
245
+ </li>
246
+ </ul>
247
+ </div>
248
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
249
+ </div>
250
+ </div>
251
+ <div class="comparison">
252
+ <div class="render">
253
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'deeppurple 700', dark:true }) %>
254
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'deeppurple 500', dark:true, start: ['menu'], end: ['search', 'more_vert'], body: 'Topics (CSS-Only)' }) %>
255
+ <div class="content" style="padding-top:2px;">
256
+ <ul class="mdw-list">
257
+ <li class="mdw-list__item">
258
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Attractions
259
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">local_activity</div>
260
+ </a>
261
+ </li>
262
+ <li class="mdw-list__item">
263
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Dining
264
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">local_dining</div>
265
+ </a>
266
+ </li>
267
+ <li class="mdw-list__item">
268
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Education
269
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">edit</div>
270
+ </a>
271
+ </li>
272
+ <li class="mdw-list__item">
273
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Family
274
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">people</div>
275
+ </a>
276
+ </li>
277
+ <li class="mdw-list__item">
278
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Health
279
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">healing</div>
280
+ </a>
281
+ </li>
282
+ <li class="mdw-list__item">
283
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Office
284
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">business</div>
285
+ </a>
286
+ </li>
287
+ <li class="mdw-list__item">
288
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Promotions
289
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">local_offer</div>
290
+ </a>
291
+ </li>
292
+ <li class="mdw-list__item">
293
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Radio
294
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">radio</div>
295
+ </a>
296
+ </li>
297
+ <li class="mdw-list__item">
298
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Recipes
299
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">book</div>
300
+ </a>
301
+ </li>
302
+ <li class="mdw-list__item">
303
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Sports
304
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">stars</div>
305
+ </a>
306
+ </li>
307
+ <li class="mdw-list__item">
308
+ <a class="mdw-list__content mdw-overlay mdw-ripple">Travel
309
+ <div class="mdw-list__icon mdw-theme material-icons" mdw-ink="medium">local_airport</div>
310
+ </a>
311
+ </li>
312
+ </ul>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ <div class="comparison">
317
+ <div class="render">
318
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'cyan 700', dark:true }) %>
319
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'cyan 500', dark:true, start: ['menu'], end: ['search'], body: 'Inbox (CSS-Only)' }) %>
320
+ <div class="content">
321
+ <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">Today</div>
322
+ <ul class="mdw-list" mdw-divider>
323
+ <li class="mdw-list__item">
324
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
325
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
326
+ <div class="mdw-list__text">
327
+ <div class="mdw-list__text-line">Brunch this weekend?</div>
328
+ <div class="mdw-list__text-line">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
329
+ </div>
330
+ </a>
331
+ </li>
332
+ <li class="mdw-list__item">
333
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
334
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
335
+ <div class="mdw-list__text">
336
+ <div class="mdw-list__text-line">Summer BBQ<span> </span></span><span class="mdw-theme" mdw-ink="medium">4</span></div>
337
+ <div class="mdw-list__text-line">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
338
+ </div>
339
+ </a>
340
+ </li>
341
+ <li class="mdw-list__item">
342
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
343
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
344
+ <div class="mdw-list__text">
345
+ <div class="mdw-list__text-line">Oui oui</div>
346
+ <div class="mdw-list__text-line">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
347
+ </div>
348
+ </a>
349
+ </li>
350
+ <li class="mdw-list__item">
351
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
352
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
353
+ <div class="mdw-list__text">
354
+ <div class="mdw-list__text-line">Birthday gift</div>
355
+ <div class="mdw-list__text-line">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
356
+ </div>
357
+ </a>
358
+ </li>
359
+ <li class="mdw-list__item">
360
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
361
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
362
+ <div class="mdw-list__text">
363
+ <div class="mdw-list__text-line">Recipe to try</div>
364
+ <div class="mdw-list__text-line">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos.</span></div>
365
+ </div>
366
+ </a>
367
+ </li>
368
+ <li class="mdw-list__item">
369
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
370
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
371
+ <div class="mdw-list__text">
372
+ <div class="mdw-list__text-line">Giants game</div>
373
+ <div class="mdw-list__text-line">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
374
+ </div>
375
+ </a>
376
+ </li>
377
+ <li class="mdw-list__item">
378
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
379
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
380
+ <div class="mdw-list__text">
381
+ <div class="mdw-list__text-line">Montauk weekend</div>
382
+ <div class="mdw-list__text-line">-----<span class="mdw-theme" mdw-ink="medium"> &mdash; -----</span></div>
383
+ </div>
384
+ </a>
385
+ </li>
386
+ </ul>
387
+ </div>
388
+ <%~ includeFile('../_partials/_androidnavbar.eta') %>
389
+ </div>
390
+ </div>
391
+ <div class="comparison">
392
+ <div class="render">
393
+ <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'deeppurple 700', dark:true }) %>
394
+ <%~ includeFile('../_partials/_appbar.eta', { surface:'deeppurple 500', dark:true, start: ['menu'], end: ['search'], body: 'Inbox (CSS-Only)' }) %>
395
+ <div class="content">
396
+ <div class="mdw-list__content mdw-list__subheader mdw-theme" mdw-ink="medium">Today</div>
397
+ <ul class="mdw-list" mdw-divider>
398
+ <li class="mdw-list__item">
399
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
400
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
401
+ <div class="mdw-list__text">
402
+ <div class="mdw-list__text-line">Brunch this weekend?</div>
403
+ <div class="mdw-list__text-block">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
404
+ </div>
405
+ </a>
406
+ </li>
407
+ <li class="mdw-list__item">
408
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
409
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
410
+ <div class="mdw-list__text">
411
+ <div class="mdw-list__text-line">Summer BBQ<span class="mdw-theme" mdw-ink="medium"> 4</span></div>
412
+ <div class="mdw-list__text-block">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
413
+ </div>
414
+ </a>
415
+ </li>
416
+ <li class="mdw-list__item">
417
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
418
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
419
+ <div class="mdw-list__text">
420
+ <div class="mdw-list__text-line">Oui oui</div>
421
+ <div class="mdw-list__text-block">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
422
+ </div>
423
+ </a>
424
+ </li>
425
+ <li class="mdw-list__item">
426
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
427
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
428
+ <div class="mdw-list__text">
429
+ <div class="mdw-list__text-line">Birthday gift</div>
430
+ <div class="mdw-list__text-block">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
431
+ </div>
432
+ </a>
433
+ </li>
434
+ <li class="mdw-list__item">
435
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
436
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
437
+ <div class="mdw-list__text">
438
+ <div class="mdw-list__text-line">Recipe to try</div>
439
+ <div class="mdw-list__text-block">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos.</span></div>
440
+ </div>
441
+ </a>
442
+ </li>
443
+ <li class="mdw-list__item">
444
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
445
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
446
+ <div class="mdw-list__text">
447
+ <div class="mdw-list__text-line">Giants game</div>
448
+ <div class="mdw-list__text-block">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
449
+ </div>
450
+ </a>
451
+ </li>
452
+ <li class="mdw-list__item">
453
+ <a class="mdw-list__content mdw-overlay mdw-ripple">
454
+ <div class="mdw-list__avatar material-icons" style="font-size:40px;">&#xE853;</div>
455
+ <div class="mdw-list__text">
456
+ <div class="mdw-list__text-line">Montauk weekend</div>
457
+ <div class="mdw-list__text-block">-----<span class="mdw-theme" mdw-ink="medium"> &mdash; -----</span></div>
458
+ </div>
459
+ </a>
460
+ </li>
461
+ </ul>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ <script src="list.min.js"></script>
package/docs/pages/list.js ADDED
@@ -0,0 +1,8 @@
1
+ import * as List from '../../components/list/index.js';
2
+
3
+ /** @return {void} */
4
+ function initializeMdwComponents() {
5
+ for (const element of document.querySelectorAll('.js .mdw-list')) List.attach(element);
6
+ }
7
+
8
+ initializeMdwComponents();