@universal-material/web 3.0.8 → 3.0.10

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 (364) hide show
  1. package/.editorconfig +8 -0
  2. package/.eleventy.cjs +21 -0
  3. package/.eslintignore +6 -0
  4. package/.eslintrc.json +98 -0
  5. package/.prettierrc.json +7 -0
  6. package/.vscode/extensions.json +9 -0
  7. package/CHANGELOG.md +98 -0
  8. package/LICENSE +28 -0
  9. package/docs/.nojekyll +0 -0
  10. package/docs/api/index.html +149 -0
  11. package/docs/docs.css +185 -0
  12. package/docs/examples/index.html +75 -0
  13. package/docs/examples/name-property/index.html +65 -0
  14. package/docs/index.html +75 -0
  15. package/docs/install/index.html +53 -0
  16. package/docs/prism-okaidia.css +123 -0
  17. package/docs/src/_api-section.pug +27 -0
  18. package/docs/src/_layout.pug +182 -0
  19. package/docs/src/components/button-set/alignment.html +29 -0
  20. package/docs/src/components/button-set/stack.html +5 -0
  21. package/docs/src/components/button-set/usage.html +35 -0
  22. package/docs/src/components/button-set.pug +16 -0
  23. package/docs/src/components/cards/card-media.html +39 -0
  24. package/docs/src/components/cards/card-with-actions.html +38 -0
  25. package/docs/src/components/cards/simple-card.html +3 -0
  26. package/docs/src/components/cards.pug +15 -0
  27. package/docs/src/components/checkbox/usage.html +33 -0
  28. package/docs/src/components/checkbox.pug +7 -0
  29. package/docs/src/components/chips/chip-input.html +73 -0
  30. package/docs/src/components/chips/default-chips.html +25 -0
  31. package/docs/src/components/chips/elevated-chips.html +25 -0
  32. package/docs/src/components/chips/selected-chips.html +50 -0
  33. package/docs/src/components/chips.pug +16 -0
  34. package/docs/src/components/common-buttons/anchor-buttons.html +6 -0
  35. package/docs/src/components/common-buttons/buttons-icons.html +24 -0
  36. package/docs/src/components/common-buttons/buttons-trailing-icons.html +25 -0
  37. package/docs/src/components/common-buttons/buttons-variants.html +6 -0
  38. package/docs/src/components/common-buttons/filled-colors.html +4 -0
  39. package/docs/src/components/common-buttons.pug +22 -0
  40. package/docs/src/components/data-tables/simple-table.html +47 -0
  41. package/docs/src/components/data-tables/table-footer.html +59 -0
  42. package/docs/src/components/data-tables/table-header.html +43 -0
  43. package/docs/src/components/data-tables.pug +15 -0
  44. package/docs/src/components/datepicker.pug +133 -0
  45. package/docs/src/components/dialogs/example.html +44 -0
  46. package/docs/src/components/dialogs.pug +19 -0
  47. package/docs/src/components/dividers/no-margin.html +7 -0
  48. package/docs/src/components/dividers/usage.html +7 -0
  49. package/docs/src/components/dividers.pug +13 -0
  50. package/docs/src/components/dropdown-menus/down-end.html +10 -0
  51. package/docs/src/components/dropdown-menus/down-left.html +10 -0
  52. package/docs/src/components/dropdown-menus/down-right.html +10 -0
  53. package/docs/src/components/dropdown-menus/down-start.html +10 -0
  54. package/docs/src/components/dropdown-menus/down.html +10 -0
  55. package/docs/src/components/dropdown-menus/up-end.html +10 -0
  56. package/docs/src/components/dropdown-menus/up-left.html +10 -0
  57. package/docs/src/components/dropdown-menus/up-right.html +10 -0
  58. package/docs/src/components/dropdown-menus/up-start.html +10 -0
  59. package/docs/src/components/dropdown-menus/up.html +10 -0
  60. package/docs/src/components/expansion-panel.pug +33 -0
  61. package/docs/src/components/fab/button-colors.html +18 -0
  62. package/docs/src/components/fab/button-sizes.html +11 -0
  63. package/docs/src/components/fab/extended-buttons.html +18 -0
  64. package/docs/src/components/fab/floating-action-area.html +5 -0
  65. package/docs/src/components/fab/floating-menu.html +10 -0
  66. package/docs/src/components/fab/lowered-buttons.html +6 -0
  67. package/docs/src/components/fab.pug +25 -0
  68. package/docs/src/components/icon-buttons/anchor-buttons.html +15 -0
  69. package/docs/src/components/icon-buttons/buttons-variants.html +15 -0
  70. package/docs/src/components/icon-buttons/toggle-buttons-manual.html +44 -0
  71. package/docs/src/components/icon-buttons/toggle-buttons.html +48 -0
  72. package/docs/src/components/icon-buttons.pug +18 -0
  73. package/docs/src/components/lists/list-avatars.html +14 -0
  74. package/docs/src/components/lists/list-custom-dividers.html +23 -0
  75. package/docs/src/components/lists/list-dividers.html +17 -0
  76. package/docs/src/components/lists/list-dynamic.html +26 -0
  77. package/docs/src/components/lists/list-hover.html +17 -0
  78. package/docs/src/components/lists/list-icons.html +17 -0
  79. package/docs/src/components/lists/list-indexed.html +123 -0
  80. package/docs/src/components/lists/list-sections.html +16 -0
  81. package/docs/src/components/lists/list-three-lines.html +20 -0
  82. package/docs/src/components/lists/list-two-lines.html +20 -0
  83. package/docs/src/components/lists/list-with-action.html +26 -0
  84. package/docs/src/components/lists/list-with-activated-item.html +17 -0
  85. package/docs/src/components/lists/simple-list.html +17 -0
  86. package/docs/src/components/lists.pug +94 -0
  87. package/docs/src/components/menus.pug +55 -0
  88. package/docs/src/components/progress/circular-progress.html +13 -0
  89. package/docs/src/components/progress/determinate-progress.html +3 -0
  90. package/docs/src/components/progress/indeterminate-progress.html +3 -0
  91. package/docs/src/components/progress/progress-color.html +3 -0
  92. package/docs/src/components/progress.pug +18 -0
  93. package/docs/src/components/ripple/usage.html +9 -0
  94. package/docs/src/components/ripple.pug +10 -0
  95. package/docs/src/components/selection-controls/checkbox.html +22 -0
  96. package/docs/src/components/selection-controls/radio-button.html +36 -0
  97. package/docs/src/components/selection-controls/switch.html +12 -0
  98. package/docs/src/components/selection-controls.pug +13 -0
  99. package/docs/src/components/sliders/example.html +42 -0
  100. package/docs/src/components/sliders.pug +7 -0
  101. package/docs/src/components/snackbar/example.html +35 -0
  102. package/docs/src/components/snackbars.pug +21 -0
  103. package/docs/src/components/steppers.pug +57 -0
  104. package/docs/src/components/tabs/example.html +45 -0
  105. package/docs/src/components/tabs.pug +8 -0
  106. package/docs/src/components/text-fields.pug +88 -0
  107. package/docs/src/components/toolbars/simple-toolbar.html +33 -0
  108. package/docs/src/components/toolbars.pug +7 -0
  109. package/docs/src/content/typography/example.html +15 -0
  110. package/docs/src/content/typography.pug +8 -0
  111. package/docs/src/css/docs.scss +189 -0
  112. package/docs/src/index.pug +10 -0
  113. package/docs/src/js/docs.js +161 -0
  114. package/docs/src/js/universal-material.js +757 -0
  115. package/docs/src/js/universal-material.js.map +1 -0
  116. package/docs/src/js/universal-material.min.js +17 -0
  117. package/docs/src/js/universal-material.min.js.map +1 -0
  118. package/docs/src/layout/grid.pug +15 -0
  119. package/docs/src/utilities/background-colors/common-colors.html +7 -0
  120. package/docs/src/utilities/background-colors/theme-colors.html +16 -0
  121. package/docs/src/utilities/background-colors.pug +10 -0
  122. package/docs/src/utilities/text-and-background-colors/common-colors.html +80 -0
  123. package/docs/src/utilities/text-and-background-colors/theme-colors.html +208 -0
  124. package/docs/src/utilities/text-and-background-colors.pug +10 -0
  125. package/docs/src/utilities/text-colors/common-colors.html +12 -0
  126. package/docs/src/utilities/text-colors/emphasis-colors.html +26 -0
  127. package/docs/src/utilities/text-colors/theme-colors.html +37 -0
  128. package/docs/src/utilities/text-colors.pug +13 -0
  129. package/gulpfile.js +225 -0
  130. package/index.html +11 -0
  131. package/package.json +1 -1
  132. package/rollup.config.js +42 -0
  133. package/src/_utils.scss +20 -0
  134. package/src/_variables.scss +68 -0
  135. package/src/button/button-base.styles.scss +75 -0
  136. package/src/button/button-base.ts +147 -0
  137. package/src/button/button-set.styles.scss +35 -0
  138. package/src/button/button-set.ts +33 -0
  139. package/src/button/button.styles.scss +97 -0
  140. package/src/button/button.ts +64 -0
  141. package/src/button/fab.styles.scss +90 -0
  142. package/src/button/fab.ts +55 -0
  143. package/src/button/icon-button.styles.scss +74 -0
  144. package/src/button/icon-button.ts +72 -0
  145. package/src/card/card-content.styles.scss +11 -0
  146. package/src/card/card-content.ts +45 -0
  147. package/src/card/card-media.styles.scss +9 -0
  148. package/src/card/card-media.ts +24 -0
  149. package/src/card/card.styles.scss +27 -0
  150. package/src/card/card.ts +37 -0
  151. package/src/checkbox/checkbox.ts +77 -0
  152. package/src/container/container.styles.scss +39 -0
  153. package/src/container/container.ts +24 -0
  154. package/src/divider/divider.styles.scss +13 -0
  155. package/src/divider/divider.ts +21 -0
  156. package/src/elevation/elevation.styles.scss +31 -0
  157. package/src/elevation/elevation.ts +17 -0
  158. package/{index.js → src/index.ts} +1 -1
  159. package/src/ripple/ripple.styles.scss +80 -0
  160. package/src/ripple/ripple.ts +150 -0
  161. package/src/shared/base.styles.scss +5 -0
  162. package/src/table/table-body.styles.scss +9 -0
  163. package/src/table/table-body.ts +21 -0
  164. package/src/table/table-cell.styles.scss +9 -0
  165. package/src/table/table-cell.ts +21 -0
  166. package/src/table/table-head.styles.scss +9 -0
  167. package/src/table/table-head.ts +21 -0
  168. package/src/table/table-header-cell.styles.scss +10 -0
  169. package/src/table/table-header-cell.ts +21 -0
  170. package/src/table/table-row.styles.scss +3 -0
  171. package/src/table/table-row.ts +21 -0
  172. package/src/table/table.styles.scss +12 -0
  173. package/{table/table.js → src/table/table.ts} +15 -6
  174. package/src/theme/color.ts +6 -0
  175. package/src/theme/css-var-builder.ts +36 -0
  176. package/{theme/index.js → src/theme/index.ts} +0 -1
  177. package/src/theme/neutral-colors.ts +21 -0
  178. package/src/theme/rgb-color.ts +19 -0
  179. package/src/theme/theme-builder.ts +201 -0
  180. package/{theme/theme-color.d.ts → src/theme/theme-color.ts} +3 -2
  181. package/tsconfig.json +36 -0
  182. package/web-dev-server.config.js +25 -0
  183. package/web-test-runner.config.js +120 -0
  184. package/button/button-base.d.ts +0 -43
  185. package/button/button-base.d.ts.map +0 -1
  186. package/button/button-base.js +0 -152
  187. package/button/button-base.js.map +0 -1
  188. package/button/button-base.styles.d.ts +0 -2
  189. package/button/button-base.styles.d.ts.map +0 -1
  190. package/button/button-base.styles.js +0 -75
  191. package/button/button-base.styles.js.map +0 -1
  192. package/button/button-set.d.ts +0 -20
  193. package/button/button-set.d.ts.map +0 -1
  194. package/button/button-set.js +0 -38
  195. package/button/button-set.js.map +0 -1
  196. package/button/button-set.styles.d.ts +0 -2
  197. package/button/button-set.styles.d.ts.map +0 -1
  198. package/button/button-set.styles.js +0 -39
  199. package/button/button-set.styles.js.map +0 -1
  200. package/button/button.d.ts +0 -34
  201. package/button/button.d.ts.map +0 -1
  202. package/button/button.js +0 -64
  203. package/button/button.js.map +0 -1
  204. package/button/button.styles.d.ts +0 -2
  205. package/button/button.styles.d.ts.map +0 -1
  206. package/button/button.styles.js +0 -96
  207. package/button/button.styles.js.map +0 -1
  208. package/button/fab.d.ts +0 -31
  209. package/button/fab.d.ts.map +0 -1
  210. package/button/fab.js +0 -63
  211. package/button/fab.js.map +0 -1
  212. package/button/fab.styles.d.ts +0 -2
  213. package/button/fab.styles.d.ts.map +0 -1
  214. package/button/fab.styles.js +0 -89
  215. package/button/fab.styles.js.map +0 -1
  216. package/button/icon-button.d.ts +0 -35
  217. package/button/icon-button.d.ts.map +0 -1
  218. package/button/icon-button.js +0 -79
  219. package/button/icon-button.js.map +0 -1
  220. package/button/icon-button.styles.d.ts +0 -2
  221. package/button/icon-button.styles.d.ts.map +0 -1
  222. package/button/icon-button.styles.js +0 -70
  223. package/button/icon-button.styles.js.map +0 -1
  224. package/card/card-content.d.ts +0 -13
  225. package/card/card-content.d.ts.map +0 -1
  226. package/card/card-content.js +0 -44
  227. package/card/card-content.js.map +0 -1
  228. package/card/card-content.styles.d.ts +0 -2
  229. package/card/card-content.styles.d.ts.map +0 -1
  230. package/card/card-content.styles.js +0 -15
  231. package/card/card-content.styles.js.map +0 -1
  232. package/card/card-media.d.ts +0 -12
  233. package/card/card-media.d.ts.map +0 -1
  234. package/card/card-media.js +0 -29
  235. package/card/card-media.js.map +0 -1
  236. package/card/card-media.styles.d.ts +0 -2
  237. package/card/card-media.styles.d.ts.map +0 -1
  238. package/card/card-media.styles.js +0 -13
  239. package/card/card-media.styles.js.map +0 -1
  240. package/card/card.d.ts +0 -19
  241. package/card/card.d.ts.map +0 -1
  242. package/card/card.js +0 -40
  243. package/card/card.js.map +0 -1
  244. package/card/card.styles.d.ts +0 -2
  245. package/card/card.styles.d.ts.map +0 -1
  246. package/card/card.styles.js +0 -28
  247. package/card/card.styles.js.map +0 -1
  248. package/checkbox/checkbox.d.ts +0 -16
  249. package/checkbox/checkbox.d.ts.map +0 -1
  250. package/checkbox/checkbox.js +0 -75
  251. package/checkbox/checkbox.js.map +0 -1
  252. package/container/container.d.ts +0 -13
  253. package/container/container.d.ts.map +0 -1
  254. package/container/container.js +0 -23
  255. package/container/container.js.map +0 -1
  256. package/container/container.styles.d.ts +0 -2
  257. package/container/container.styles.d.ts.map +0 -1
  258. package/container/container.styles.js +0 -43
  259. package/container/container.styles.js.map +0 -1
  260. package/custom-elements.json +0 -3706
  261. package/divider/divider.d.ts +0 -14
  262. package/divider/divider.d.ts.map +0 -1
  263. package/divider/divider.js +0 -27
  264. package/divider/divider.js.map +0 -1
  265. package/divider/divider.styles.d.ts +0 -2
  266. package/divider/divider.styles.d.ts.map +0 -1
  267. package/divider/divider.styles.js +0 -15
  268. package/divider/divider.styles.js.map +0 -1
  269. package/elevation/elevation.d.ts +0 -11
  270. package/elevation/elevation.d.ts.map +0 -1
  271. package/elevation/elevation.js +0 -21
  272. package/elevation/elevation.js.map +0 -1
  273. package/elevation/elevation.styles.d.ts +0 -2
  274. package/elevation/elevation.styles.d.ts.map +0 -1
  275. package/elevation/elevation.styles.js +0 -28
  276. package/elevation/elevation.styles.js.map +0 -1
  277. package/index.d.ts +0 -27
  278. package/index.d.ts.map +0 -1
  279. package/index.js.map +0 -1
  280. package/ripple/ripple.d.ts +0 -25
  281. package/ripple/ripple.d.ts.map +0 -1
  282. package/ripple/ripple.js +0 -119
  283. package/ripple/ripple.js.map +0 -1
  284. package/ripple/ripple.styles.d.ts +0 -2
  285. package/ripple/ripple.styles.d.ts.map +0 -1
  286. package/ripple/ripple.styles.js +0 -74
  287. package/ripple/ripple.styles.js.map +0 -1
  288. package/shared/base.styles.d.ts +0 -2
  289. package/shared/base.styles.d.ts.map +0 -1
  290. package/shared/base.styles.js +0 -9
  291. package/shared/base.styles.js.map +0 -1
  292. package/table/table-body.d.ts +0 -11
  293. package/table/table-body.d.ts.map +0 -1
  294. package/table/table-body.js +0 -21
  295. package/table/table-body.js.map +0 -1
  296. package/table/table-body.styles.d.ts +0 -2
  297. package/table/table-body.styles.d.ts.map +0 -1
  298. package/table/table-body.styles.js +0 -11
  299. package/table/table-body.styles.js.map +0 -1
  300. package/table/table-cell.d.ts +0 -11
  301. package/table/table-cell.d.ts.map +0 -1
  302. package/table/table-cell.js +0 -21
  303. package/table/table-cell.js.map +0 -1
  304. package/table/table-cell.styles.d.ts +0 -2
  305. package/table/table-cell.styles.d.ts.map +0 -1
  306. package/table/table-cell.styles.js +0 -11
  307. package/table/table-cell.styles.js.map +0 -1
  308. package/table/table-head.d.ts +0 -11
  309. package/table/table-head.d.ts.map +0 -1
  310. package/table/table-head.js +0 -21
  311. package/table/table-head.js.map +0 -1
  312. package/table/table-head.styles.d.ts +0 -2
  313. package/table/table-head.styles.d.ts.map +0 -1
  314. package/table/table-head.styles.js +0 -11
  315. package/table/table-head.styles.js.map +0 -1
  316. package/table/table-header-cell.d.ts +0 -11
  317. package/table/table-header-cell.d.ts.map +0 -1
  318. package/table/table-header-cell.js +0 -21
  319. package/table/table-header-cell.js.map +0 -1
  320. package/table/table-header-cell.styles.d.ts +0 -2
  321. package/table/table-header-cell.styles.d.ts.map +0 -1
  322. package/table/table-header-cell.styles.js +0 -12
  323. package/table/table-header-cell.styles.js.map +0 -1
  324. package/table/table-row.d.ts +0 -11
  325. package/table/table-row.d.ts.map +0 -1
  326. package/table/table-row.js +0 -21
  327. package/table/table-row.js.map +0 -1
  328. package/table/table-row.styles.d.ts +0 -2
  329. package/table/table-row.styles.d.ts.map +0 -1
  330. package/table/table-row.styles.js +0 -7
  331. package/table/table-row.styles.js.map +0 -1
  332. package/table/table.d.ts +0 -16
  333. package/table/table.d.ts.map +0 -1
  334. package/table/table.js.map +0 -1
  335. package/table/table.styles.d.ts +0 -2
  336. package/table/table.styles.d.ts.map +0 -1
  337. package/table/table.styles.js +0 -16
  338. package/table/table.styles.js.map +0 -1
  339. package/theme/color.d.ts +0 -7
  340. package/theme/color.d.ts.map +0 -1
  341. package/theme/color.js +0 -2
  342. package/theme/color.js.map +0 -1
  343. package/theme/css-var-builder.d.ts +0 -9
  344. package/theme/css-var-builder.d.ts.map +0 -1
  345. package/theme/css-var-builder.js +0 -25
  346. package/theme/css-var-builder.js.map +0 -1
  347. package/theme/index.d.ts +0 -2
  348. package/theme/index.d.ts.map +0 -1
  349. package/theme/index.js.map +0 -1
  350. package/theme/neutral-colors.d.ts +0 -4
  351. package/theme/neutral-colors.d.ts.map +0 -1
  352. package/theme/neutral-colors.js +0 -19
  353. package/theme/neutral-colors.js.map +0 -1
  354. package/theme/rgb-color.d.ts +0 -9
  355. package/theme/rgb-color.d.ts.map +0 -1
  356. package/theme/rgb-color.js +0 -13
  357. package/theme/rgb-color.js.map +0 -1
  358. package/theme/theme-builder.d.ts +0 -27
  359. package/theme/theme-builder.d.ts.map +0 -1
  360. package/theme/theme-builder.js +0 -146
  361. package/theme/theme-builder.js.map +0 -1
  362. package/theme/theme-color.d.ts.map +0 -1
  363. package/theme/theme-color.js +0 -2
  364. package/theme/theme-color.js.map +0 -1
package/docs/examples/index.html ADDED
@@ -0,0 +1,75 @@
1
+
2
+ <!doctype html>
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title><my-element> ⌲ Examples ⌲ Basic</title>
9
+ <link rel="stylesheet" href="../docs.css">
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
11
+ <link href="../prism-okaidia.css" rel="stylesheet" />
12
+ <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
13
+ <script src="/node_modules/lit/polyfill-support.js"></script>
14
+ <script type="module" src="../my-element.bundled.js"></script>
15
+ </head>
16
+ <body>
17
+
18
+ <header>
19
+ <h1>&lt;my-element></h1>
20
+ <h2>A web component just for me.</h2>
21
+ </header>
22
+
23
+ <nav>
24
+ <a href="../">Home</a>
25
+ <a href="">Examples</a>
26
+ <a href="../api/">API</a>
27
+ <a href="../install/">Install</a>
28
+ </nav>
29
+ <div id="main-wrapper">
30
+ <main>
31
+
32
+ <h1>Example: Basic</h1>
33
+ <section class="examples">
34
+ <nav class="collection">
35
+ <ul>
36
+
37
+ <li class=selected>
38
+ <a href="">A basic example</a>
39
+ </li>
40
+
41
+ <li class=>
42
+ <a href="name-property/">Setting the name property</a>
43
+ </li>
44
+
45
+ </ul>
46
+ </nav>
47
+ <div>
48
+ <style>
49
+ my-element p {
50
+ border: solid 1px blue;
51
+ padding: 8px;
52
+ }
53
+ </style>
54
+ <my-element>
55
+ <p>This is child content</p>
56
+ </my-element>
57
+ <h3>CSS</h3>
58
+ <pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
59
+ <h3>HTML</h3>
60
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
61
+
62
+ </div>
63
+ </section>
64
+
65
+ </main>
66
+ </div>
67
+
68
+ <footer>
69
+ <p>
70
+ Made with
71
+ <a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
72
+ </p>
73
+ </footer>
74
+ </body>
75
+ </html>
package/docs/examples/name-property/index.html ADDED
@@ -0,0 +1,65 @@
1
+
2
+ <!doctype html>
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title><my-element> ⌲ Examples ⌲ Name Property</title>
9
+ <link rel="stylesheet" href="../../docs.css">
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
11
+ <link href="../../prism-okaidia.css" rel="stylesheet" />
12
+ <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
13
+ <script src="/node_modules/lit/polyfill-support.js"></script>
14
+ <script type="module" src="../../my-element.bundled.js"></script>
15
+ </head>
16
+ <body>
17
+
18
+ <header>
19
+ <h1>&lt;my-element></h1>
20
+ <h2>A web component just for me.</h2>
21
+ </header>
22
+
23
+ <nav>
24
+ <a href="../../">Home</a>
25
+ <a href="../">Examples</a>
26
+ <a href="../../api/">API</a>
27
+ <a href="../../install/">Install</a>
28
+ </nav>
29
+ <div id="main-wrapper">
30
+ <main>
31
+
32
+ <h1>Example: Name Property</h1>
33
+ <section class="examples">
34
+ <nav class="collection">
35
+ <ul>
36
+
37
+ <li class=>
38
+ <a href="../">A basic example</a>
39
+ </li>
40
+
41
+ <li class=selected>
42
+ <a href="">Setting the name property</a>
43
+ </li>
44
+
45
+ </ul>
46
+ </nav>
47
+ <div>
48
+ <p><my-element name="Earth"></my-element></p>
49
+ <h3>HTML</h3>
50
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
51
+
52
+ </div>
53
+ </section>
54
+
55
+ </main>
56
+ </div>
57
+
58
+ <footer>
59
+ <p>
60
+ Made with
61
+ <a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
62
+ </p>
63
+ </footer>
64
+ </body>
65
+ </html>
package/docs/index.html ADDED
@@ -0,0 +1,75 @@
1
+
2
+ <!doctype html>
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title><my-element> ⌲ Home</title>
9
+ <link rel="stylesheet" href="docs.css">
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
11
+ <link href="prism-okaidia.css" rel="stylesheet" />
12
+ <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
13
+ <script src="/node_modules/lit/polyfill-support.js"></script>
14
+ <script type="module" src="my-element.bundled.js"></script>
15
+ </head>
16
+ <body>
17
+
18
+ <header>
19
+ <h1>&lt;my-element></h1>
20
+ <h2>A web component just for me.</h2>
21
+ </header>
22
+
23
+ <nav>
24
+ <a href="">Home</a>
25
+ <a href="examples/">Examples</a>
26
+ <a href="api/">API</a>
27
+ <a href="install/">Install</a>
28
+ </nav>
29
+ <div id="main-wrapper">
30
+ <main>
31
+ <h1>&lt;my-element&gt;</h1>
32
+ <p><code>&lt;my-element&gt;</code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
33
+ <h2>As easy as HTML</h2>
34
+ <section class="columns">
35
+ <div>
36
+ <p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
37
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
38
+ </div>
39
+ <div>
40
+ <p><my-element></my-element></p>
41
+ </div>
42
+ </section>
43
+ <h2>Configure with attributes</h2>
44
+ <section class="columns">
45
+ <div>
46
+ <p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p>
47
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
48
+ </div>
49
+ <div>
50
+ <p><my-element name="HTML"></my-element></p>
51
+ </div>
52
+ </section>
53
+ <h2>Declarative rendering</h2>
54
+ <section class="columns">
55
+ <div>
56
+ <p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
57
+ <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><br> html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br> &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2><br> &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element><br> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br> document<span class="token punctuation">.</span>body<br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
58
+ </div>
59
+ <div>
60
+ <h2>This is a &lt;my-element&gt;</h2>
61
+ <my-element name="lit-html"></my-element>
62
+ </div>
63
+ </section>
64
+
65
+ </main>
66
+ </div>
67
+
68
+ <footer>
69
+ <p>
70
+ Made with
71
+ <a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
72
+ </p>
73
+ </footer>
74
+ </body>
75
+ </html>
package/docs/install/index.html ADDED
@@ -0,0 +1,53 @@
1
+
2
+ <!doctype html>
3
+
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title><my-element> ⌲ Install</title>
9
+ <link rel="stylesheet" href="../docs.css">
10
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
11
+ <link href="../prism-okaidia.css" rel="stylesheet" />
12
+ <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
13
+ <script src="/node_modules/lit/polyfill-support.js"></script>
14
+ <script type="module" src="../my-element.bundled.js"></script>
15
+ </head>
16
+ <body>
17
+
18
+ <header>
19
+ <h1>&lt;my-element></h1>
20
+ <h2>A web component just for me.</h2>
21
+ </header>
22
+
23
+ <nav>
24
+ <a href="../">Home</a>
25
+ <a href="../examples/">Examples</a>
26
+ <a href="../api/">API</a>
27
+ <a href="">Install</a>
28
+ </nav>
29
+ <div id="main-wrapper">
30
+ <main>
31
+ <h1>Install</h1>
32
+ <p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
33
+ <h2>Local Installation</h2>
34
+ <pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i my-element</code></pre>
35
+ <h2>CDN</h2>
36
+ <p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
37
+ <p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite &quot;bare&quot; module specifiers to full URLs.</p>
38
+ <h3>HTML</h3>
39
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
40
+ <h3>JavaScript</h3>
41
+ <pre class="language-html"><code class="language-html">import {MyElement} from 'https://unpkg.com/my-element?module';</code></pre>
42
+
43
+ </main>
44
+ </div>
45
+
46
+ <footer>
47
+ <p>
48
+ Made with
49
+ <a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
50
+ </p>
51
+ </footer>
52
+ </body>
53
+ </html>
package/docs/prism-okaidia.css ADDED
@@ -0,0 +1,123 @@
1
+ /**
2
+ * okaidia theme for JavaScript, CSS and HTML
3
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
4
+ * @author ocodia
5
+ */
6
+
7
+ code[class*="language-"],
8
+ pre[class*="language-"] {
9
+ color: #f8f8f2;
10
+ background: none;
11
+ text-shadow: 0 1px rgba(0, 0, 0, 0.3);
12
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
13
+ font-size: 1em;
14
+ text-align: left;
15
+ white-space: pre;
16
+ word-spacing: normal;
17
+ word-break: normal;
18
+ word-wrap: normal;
19
+ line-height: 1.5;
20
+
21
+ -moz-tab-size: 4;
22
+ -o-tab-size: 4;
23
+ tab-size: 4;
24
+
25
+ -webkit-hyphens: none;
26
+ -moz-hyphens: none;
27
+ -ms-hyphens: none;
28
+ hyphens: none;
29
+ }
30
+
31
+ /* Code blocks */
32
+ pre[class*="language-"] {
33
+ padding: 1em;
34
+ margin: .5em 0;
35
+ overflow: auto;
36
+ border-radius: 0.3em;
37
+ }
38
+
39
+ :not(pre) > code[class*="language-"],
40
+ pre[class*="language-"] {
41
+ background: #272822;
42
+ }
43
+
44
+ /* Inline code */
45
+ :not(pre) > code[class*="language-"] {
46
+ padding: .1em;
47
+ border-radius: .3em;
48
+ white-space: normal;
49
+ }
50
+
51
+ .token.comment,
52
+ .token.prolog,
53
+ .token.doctype,
54
+ .token.cdata {
55
+ color: #8292a2;
56
+ }
57
+
58
+ .token.punctuation {
59
+ color: #f8f8f2;
60
+ }
61
+
62
+ .token.namespace {
63
+ opacity: .7;
64
+ }
65
+
66
+ .token.property,
67
+ .token.tag,
68
+ .token.constant,
69
+ .token.symbol,
70
+ .token.deleted {
71
+ color: #f92672;
72
+ }
73
+
74
+ .token.boolean,
75
+ .token.number {
76
+ color: #ae81ff;
77
+ }
78
+
79
+ .token.selector,
80
+ .token.attr-name,
81
+ .token.string,
82
+ .token.char,
83
+ .token.builtin,
84
+ .token.inserted {
85
+ color: #a6e22e;
86
+ }
87
+
88
+ .token.operator,
89
+ .token.entity,
90
+ .token.url,
91
+ .language-css .token.string,
92
+ .style .token.string,
93
+ .token.variable {
94
+ color: #f8f8f2;
95
+ }
96
+
97
+ .token.atrule,
98
+ .token.attr-value,
99
+ .token.function,
100
+ .token.class-name {
101
+ color: #e6db74;
102
+ }
103
+
104
+ .token.keyword {
105
+ color: #66d9ef;
106
+ }
107
+
108
+ .token.regex,
109
+ .token.important {
110
+ color: #fd971f;
111
+ }
112
+
113
+ .token.important,
114
+ .token.bold {
115
+ font-weight: bold;
116
+ }
117
+ .token.italic {
118
+ font-style: italic;
119
+ }
120
+
121
+ .token.entity {
122
+ cursor: help;
123
+ }
package/docs/src/_api-section.pug ADDED
@@ -0,0 +1,27 @@
1
+ mixin renderApiSection(properties)
2
+ h5.u-headline-m.article-title API
3
+
4
+ u-card.api-card(variant="outlined")
5
+ u-table(slot="before-content")
6
+ u-thead
7
+ u-tr
8
+ u-th Property
9
+ u-th Attribute
10
+ u-th Type
11
+ u-th Default
12
+ u-th Description
13
+ u-tbody
14
+ each property in properties
15
+ u-tr
16
+ u-td
17
+ if property.name != null && property.name.trim() != ''
18
+ code= property.name
19
+ u-td
20
+ if property.attribute != null && property.attribute.trim() != ''
21
+ code= property.attribute
22
+ u-td
23
+ code= property.type
24
+ u-td
25
+ if property.default != null && property.default.trim() != ''
26
+ code= property.default
27
+ u-td.api-description-cell !{property.description}
package/docs/src/_layout.pug ADDED
@@ -0,0 +1,182 @@
1
+ include _apis
2
+ include _api-section
3
+
4
+ mixin renderTitle(title)
5
+ h4.u-display-m.chapter-title #{title}
6
+
7
+ mixin renderSection(title)
8
+ h5.u-headline-m.article-title #{title}
9
+ u-card.example-card(variant="outlined")
10
+ block
11
+
12
+ doctype html
13
+ html
14
+ head
15
+ meta(charset='utf-8')
16
+ meta(http-equiv='X-UA-Compatible', content='IE=edge')
17
+ meta(name='mobile-web-app-capable', content='yes')
18
+ meta(name='viewport', content='width=device-width, initial-scale=1')
19
+ meta(name='description', content='')
20
+ meta(name='author', content='')
21
+ base(href="/")
22
+
23
+ title Universal Material
24
+
25
+ link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/atelier-sulphurpool-light.min.css")
26
+
27
+ link(rel="preconnect" href="https://fonts.googleapis.com")
28
+ link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
29
+ link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap")
30
+
31
+ link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css")
32
+ link(rel="stylesheet" href="css/docs.css")
33
+
34
+ body.u-android
35
+ .u-drawer.u-drawer-lg-dismissible
36
+ aside.u-drawer-content.u-navigation-drawer
37
+ .u-drawer-scrollable-container
38
+ h6.u-navigation-drawer-headline.u-headline-s Material Design
39
+
40
+ nav.u-list.u-list-selectable
41
+ a.u-list-item(href="")
42
+ .u-list-item-content
43
+ | Introduction
44
+
45
+ //a.u-list-item(href="layout/grid.html")
46
+ .u-list-item-content
47
+ span Grid
48
+
49
+ //a.u-list-item(href="content/typography.html")
50
+ .u-list-item-content
51
+ span Typography
52
+
53
+ //.u-list-item
54
+ .u-list-item-content
55
+ span Colors
56
+ .u-list-item-icon.mdi.mdi-chevron-down
57
+
58
+ //.nested-menu-items
59
+ a.u-list-item(href="utilities/text-colors.html")
60
+ .u-list-item-content
61
+ span Text
62
+ a.u-list-item(href="utilities/background-colors.html")
63
+ .u-list-item-content
64
+ span Background
65
+ a.u-list-item(href="utilities/text-and-background-colors.html")
66
+ .u-list-item-content
67
+ span Text and background
68
+
69
+ .u-list-item
70
+ .u-list-item-content
71
+ span Buttons
72
+ .u-list-item-icon.mdi.mdi-chevron-down
73
+
74
+ .nested-menu-items
75
+ a.u-list-item(href="components/common-buttons.html")
76
+ .u-list-item-content
77
+ span Common buttons
78
+ a.u-list-item(href="components/fab.html")
79
+ .u-list-item-content
80
+ span Floating Action Button (FAB)
81
+ a.u-list-item(href="components/icon-buttons.html")
82
+ .u-list-item-content
83
+ span Icon buttons
84
+ a.u-list-item(href="components/button-set.html")
85
+ .u-list-item-content
86
+ span Button set
87
+
88
+ a.u-list-item(href="components/cards.html")
89
+ .u-list-item-content
90
+ span Cards
91
+
92
+ //a.u-list-item(href="components/checkbox.html")
93
+ .u-list-item-content
94
+ span Checkbox
95
+
96
+ //a.u-list-item(href="components/chips.html")
97
+ .u-list-item-content
98
+ span Chips
99
+
100
+ a.u-list-item(href="components/data-tables.html")
101
+ .u-list-item-content
102
+ span Data tables
103
+
104
+ //a.u-list-item(href="components/dialogs.html")
105
+ .u-list-item-content
106
+ span Dialogs
107
+
108
+ a.u-list-item(href="components/dividers.html")
109
+ .u-list-item-content
110
+ span Dividers
111
+
112
+ //a.u-list-item(href="components/lists.html")
113
+ .u-list-item-content
114
+ span Lists
115
+
116
+ //a.u-list-item(href="components/menus.html")
117
+ .u-list-item-content
118
+ span Menus
119
+
120
+ //a.u-list-item(href="components/progress.html")
121
+ .u-list-item-content
122
+ span Progress
123
+
124
+ a.u-list-item(href="components/ripple.html")
125
+ .u-list-item-content
126
+ span Ripple
127
+
128
+ //a.u-list-item(href="components/selection-controls.html")
129
+ .u-list-item-content
130
+ span Selection controls
131
+
132
+ //a.u-list-item(href="components/sliders.html")
133
+ .u-list-item-content
134
+ span Sliders
135
+
136
+ //a.u-list-item(href="components/snackbars.html")
137
+ .u-list-item-content
138
+ span Snackbars
139
+
140
+ //a.u-list-item(href="components/tabs.html")
141
+ .u-list-item-content
142
+ span Tabs
143
+
144
+ //a.u-list-item(href="components/text-fields.html")
145
+ .u-list-item-content
146
+ span Text fields
147
+
148
+ //a.u-list-item(href="components/toolbars.html")
149
+ .u-list-item-content
150
+ span Toolbars
151
+
152
+ .u-drawer-backdrop.d-lg-none
153
+ .u-toolbar.u-toolbar-fixed#app-bar
154
+ .u-toolbar-row
155
+ .u-toolbar-start
156
+ .u-toolbar-actions
157
+ button.u-toolbar-action.u-icon-btn(type="button")#menu-toggle
158
+ i.u-btn-icon.mdi.mdi-menu
159
+ .u-toolbar-center
160
+ .u-toolbar-title Material
161
+ .u-toolbar-end
162
+ .u-toolbar-actions
163
+ span.u-dropdown.u-toolbar-action
164
+ button.u-icon-btn.u-dropdown-toggle
165
+ i.u-btn-icon.mdi.mdi-theme-light-dark
166
+ .u-dropdown-menu.down-start
167
+ .u-dropdown-content
168
+ button.u-dropdown-item(href='#', onclick="setThemeMode(ThemeMode.Auto)") System
169
+ button.u-dropdown-item(href='#', onclick="setThemeMode(ThemeMode.Light)") Light
170
+ button.u-dropdown-item(href='#', onclick="setThemeMode(ThemeMode.Dark)") Dark
171
+
172
+ a.u-toolbar-action.u-icon-btn(href="/angular", title="Universal Material Angular")
173
+ i.u-btn-icon.mdi.mdi-angular
174
+ button.u-toolbar-action.u-icon-btn#rtl-toggle(type="button", title="Rtl")
175
+ i.u-btn-icon.mdi.mdi-format-align-right
176
+
177
+ u-container.chapter#main-content
178
+ block content
179
+
180
+ script(src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js')
181
+ script(src="js/docs.js" type="module")
182
+ block scripts
package/docs/src/components/button-set/alignment.html ADDED
@@ -0,0 +1,29 @@
1
+ <u-button-set>
2
+ <u-button variant="outlined">Cancel</u-button>
3
+ <u-button>Ok</u-button>
4
+ </u-button-set>
5
+
6
+ <u-button-set align="center">
7
+ <u-button variant="outlined">Cancel</u-button>
8
+ <u-button>Ok</u-button>
9
+ </u-button-set>
10
+
11
+ <u-button-set align="start">
12
+ <u-button variant="outlined">Cancel</u-button>
13
+ <u-button>Ok</u-button>
14
+ </u-button-set>
15
+
16
+ <u-button-set stack>
17
+ <u-button variant="outlined">Cancel</u-button>
18
+ <u-button>Ok</u-button>
19
+ </u-button-set>
20
+
21
+ <u-button-set align="center" stack>
22
+ <u-button variant="outlined">Cancel</u-button>
23
+ <u-button>Ok</u-button>
24
+ </u-button-set>
25
+
26
+ <u-button-set align="start" stack>
27
+ <u-button variant="outlined">Cancel</u-button>
28
+ <u-button>Ok</u-button>
29
+ </u-button-set>
package/docs/src/components/button-set/stack.html ADDED
@@ -0,0 +1,5 @@
1
+ <u-button-set stack>
2
+ <u-button variant="text">Set</u-button>
3
+ <u-button variant="text">Cancel</u-button>
4
+ <u-button variant="text">Clear</u-button>
5
+ </u-button-set>