@universal-material/web 3.0.10 → 3.0.11

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/button/button-base.d.ts +43 -0
  2. package/button/button-base.d.ts.map +1 -0
  3. package/button/button-base.js +152 -0
  4. package/button/button-base.js.map +1 -0
  5. package/button/button-base.styles.d.ts +2 -0
  6. package/button/button-base.styles.d.ts.map +1 -0
  7. package/button/button-base.styles.js +75 -0
  8. package/button/button-base.styles.js.map +1 -0
  9. package/button/button-set.d.ts +20 -0
  10. package/button/button-set.d.ts.map +1 -0
  11. package/button/button-set.js +38 -0
  12. package/button/button-set.js.map +1 -0
  13. package/button/button-set.styles.d.ts +2 -0
  14. package/button/button-set.styles.d.ts.map +1 -0
  15. package/button/button-set.styles.js +39 -0
  16. package/button/button-set.styles.js.map +1 -0
  17. package/button/button.d.ts +34 -0
  18. package/button/button.d.ts.map +1 -0
  19. package/button/button.js +64 -0
  20. package/button/button.js.map +1 -0
  21. package/button/button.styles.d.ts +2 -0
  22. package/button/button.styles.d.ts.map +1 -0
  23. package/button/button.styles.js +96 -0
  24. package/button/button.styles.js.map +1 -0
  25. package/button/fab.d.ts +31 -0
  26. package/button/fab.d.ts.map +1 -0
  27. package/button/fab.js +63 -0
  28. package/button/fab.js.map +1 -0
  29. package/button/fab.styles.d.ts +2 -0
  30. package/button/fab.styles.d.ts.map +1 -0
  31. package/button/fab.styles.js +89 -0
  32. package/button/fab.styles.js.map +1 -0
  33. package/button/icon-button.d.ts +35 -0
  34. package/button/icon-button.d.ts.map +1 -0
  35. package/button/icon-button.js +79 -0
  36. package/button/icon-button.js.map +1 -0
  37. package/button/icon-button.styles.d.ts +2 -0
  38. package/button/icon-button.styles.d.ts.map +1 -0
  39. package/button/icon-button.styles.js +70 -0
  40. package/button/icon-button.styles.js.map +1 -0
  41. package/card/card-content.d.ts +13 -0
  42. package/card/card-content.d.ts.map +1 -0
  43. package/card/card-content.js +44 -0
  44. package/card/card-content.js.map +1 -0
  45. package/card/card-content.styles.d.ts +2 -0
  46. package/card/card-content.styles.d.ts.map +1 -0
  47. package/card/card-content.styles.js +15 -0
  48. package/card/card-content.styles.js.map +1 -0
  49. package/card/card-media.d.ts +12 -0
  50. package/card/card-media.d.ts.map +1 -0
  51. package/card/card-media.js +29 -0
  52. package/card/card-media.js.map +1 -0
  53. package/card/card-media.styles.d.ts +2 -0
  54. package/card/card-media.styles.d.ts.map +1 -0
  55. package/card/card-media.styles.js +13 -0
  56. package/card/card-media.styles.js.map +1 -0
  57. package/card/card.d.ts +19 -0
  58. package/card/card.d.ts.map +1 -0
  59. package/card/card.js +40 -0
  60. package/card/card.js.map +1 -0
  61. package/card/card.styles.d.ts +2 -0
  62. package/card/card.styles.d.ts.map +1 -0
  63. package/card/card.styles.js +28 -0
  64. package/card/card.styles.js.map +1 -0
  65. package/checkbox/checkbox.d.ts +16 -0
  66. package/checkbox/checkbox.d.ts.map +1 -0
  67. package/checkbox/checkbox.js +75 -0
  68. package/checkbox/checkbox.js.map +1 -0
  69. package/container/container.d.ts +13 -0
  70. package/container/container.d.ts.map +1 -0
  71. package/container/container.js +23 -0
  72. package/container/container.js.map +1 -0
  73. package/container/container.styles.d.ts +2 -0
  74. package/container/container.styles.d.ts.map +1 -0
  75. package/container/container.styles.js +43 -0
  76. package/container/container.styles.js.map +1 -0
  77. package/custom-elements.json +3706 -0
  78. package/divider/divider.d.ts +14 -0
  79. package/divider/divider.d.ts.map +1 -0
  80. package/divider/divider.js +27 -0
  81. package/divider/divider.js.map +1 -0
  82. package/divider/divider.styles.d.ts +2 -0
  83. package/divider/divider.styles.d.ts.map +1 -0
  84. package/divider/divider.styles.js +15 -0
  85. package/divider/divider.styles.js.map +1 -0
  86. package/elevation/elevation.d.ts +11 -0
  87. package/elevation/elevation.d.ts.map +1 -0
  88. package/elevation/elevation.js +21 -0
  89. package/elevation/elevation.js.map +1 -0
  90. package/elevation/elevation.styles.d.ts +2 -0
  91. package/elevation/elevation.styles.d.ts.map +1 -0
  92. package/elevation/elevation.styles.js +28 -0
  93. package/elevation/elevation.styles.js.map +1 -0
  94. package/index.d.ts +27 -0
  95. package/index.d.ts.map +1 -0
  96. package/{src/index.ts → index.js} +1 -1
  97. package/index.js.map +1 -0
  98. package/package.json +1 -1
  99. package/ripple/ripple.d.ts +25 -0
  100. package/ripple/ripple.d.ts.map +1 -0
  101. package/ripple/ripple.js +119 -0
  102. package/ripple/ripple.js.map +1 -0
  103. package/ripple/ripple.styles.d.ts +2 -0
  104. package/ripple/ripple.styles.d.ts.map +1 -0
  105. package/ripple/ripple.styles.js +74 -0
  106. package/ripple/ripple.styles.js.map +1 -0
  107. package/shared/base.styles.d.ts +2 -0
  108. package/shared/base.styles.d.ts.map +1 -0
  109. package/shared/base.styles.js +9 -0
  110. package/shared/base.styles.js.map +1 -0
  111. package/table/table-body.d.ts +11 -0
  112. package/table/table-body.d.ts.map +1 -0
  113. package/table/table-body.js +21 -0
  114. package/table/table-body.js.map +1 -0
  115. package/table/table-body.styles.d.ts +2 -0
  116. package/table/table-body.styles.d.ts.map +1 -0
  117. package/table/table-body.styles.js +11 -0
  118. package/table/table-body.styles.js.map +1 -0
  119. package/table/table-cell.d.ts +11 -0
  120. package/table/table-cell.d.ts.map +1 -0
  121. package/table/table-cell.js +21 -0
  122. package/table/table-cell.js.map +1 -0
  123. package/table/table-cell.styles.d.ts +2 -0
  124. package/table/table-cell.styles.d.ts.map +1 -0
  125. package/table/table-cell.styles.js +11 -0
  126. package/table/table-cell.styles.js.map +1 -0
  127. package/table/table-head.d.ts +11 -0
  128. package/table/table-head.d.ts.map +1 -0
  129. package/table/table-head.js +21 -0
  130. package/table/table-head.js.map +1 -0
  131. package/table/table-head.styles.d.ts +2 -0
  132. package/table/table-head.styles.d.ts.map +1 -0
  133. package/table/table-head.styles.js +11 -0
  134. package/table/table-head.styles.js.map +1 -0
  135. package/table/table-header-cell.d.ts +11 -0
  136. package/table/table-header-cell.d.ts.map +1 -0
  137. package/table/table-header-cell.js +21 -0
  138. package/table/table-header-cell.js.map +1 -0
  139. package/table/table-header-cell.styles.d.ts +2 -0
  140. package/table/table-header-cell.styles.d.ts.map +1 -0
  141. package/table/table-header-cell.styles.js +12 -0
  142. package/table/table-header-cell.styles.js.map +1 -0
  143. package/table/table-row.d.ts +11 -0
  144. package/table/table-row.d.ts.map +1 -0
  145. package/table/table-row.js +21 -0
  146. package/table/table-row.js.map +1 -0
  147. package/table/table-row.styles.d.ts +2 -0
  148. package/table/table-row.styles.d.ts.map +1 -0
  149. package/table/table-row.styles.js +7 -0
  150. package/table/table-row.styles.js.map +1 -0
  151. package/table/table.d.ts +16 -0
  152. package/table/table.d.ts.map +1 -0
  153. package/{src/table/table.ts → table/table.js} +6 -15
  154. package/table/table.js.map +1 -0
  155. package/table/table.styles.d.ts +2 -0
  156. package/table/table.styles.d.ts.map +1 -0
  157. package/table/table.styles.js +16 -0
  158. package/table/table.styles.js.map +1 -0
  159. package/theme/color.d.ts +7 -0
  160. package/theme/color.d.ts.map +1 -0
  161. package/theme/color.js +2 -0
  162. package/theme/color.js.map +1 -0
  163. package/theme/css-var-builder.d.ts +9 -0
  164. package/theme/css-var-builder.d.ts.map +1 -0
  165. package/theme/css-var-builder.js +25 -0
  166. package/theme/css-var-builder.js.map +1 -0
  167. package/theme/index.d.ts +2 -0
  168. package/theme/index.d.ts.map +1 -0
  169. package/{src/theme/index.ts → theme/index.js} +1 -0
  170. package/theme/index.js.map +1 -0
  171. package/theme/neutral-colors.d.ts +4 -0
  172. package/theme/neutral-colors.d.ts.map +1 -0
  173. package/theme/neutral-colors.js +19 -0
  174. package/theme/neutral-colors.js.map +1 -0
  175. package/theme/rgb-color.d.ts +9 -0
  176. package/theme/rgb-color.d.ts.map +1 -0
  177. package/theme/rgb-color.js +13 -0
  178. package/theme/rgb-color.js.map +1 -0
  179. package/theme/theme-builder.d.ts +27 -0
  180. package/theme/theme-builder.d.ts.map +1 -0
  181. package/theme/theme-builder.js +146 -0
  182. package/theme/theme-builder.js.map +1 -0
  183. package/{src/theme/theme-color.ts → theme/theme-color.d.ts} +2 -3
  184. package/theme/theme-color.d.ts.map +1 -0
  185. package/theme/theme-color.js +2 -0
  186. package/theme/theme-color.js.map +1 -0
  187. package/.editorconfig +0 -8
  188. package/.eleventy.cjs +0 -21
  189. package/.eslintignore +0 -6
  190. package/.eslintrc.json +0 -98
  191. package/.prettierrc.json +0 -7
  192. package/.vscode/extensions.json +0 -9
  193. package/CHANGELOG.md +0 -98
  194. package/LICENSE +0 -28
  195. package/docs/.nojekyll +0 -0
  196. package/docs/api/index.html +0 -149
  197. package/docs/docs.css +0 -185
  198. package/docs/examples/index.html +0 -75
  199. package/docs/examples/name-property/index.html +0 -65
  200. package/docs/index.html +0 -75
  201. package/docs/install/index.html +0 -53
  202. package/docs/prism-okaidia.css +0 -123
  203. package/docs/src/_api-section.pug +0 -27
  204. package/docs/src/_layout.pug +0 -182
  205. package/docs/src/components/button-set/alignment.html +0 -29
  206. package/docs/src/components/button-set/stack.html +0 -5
  207. package/docs/src/components/button-set/usage.html +0 -35
  208. package/docs/src/components/button-set.pug +0 -16
  209. package/docs/src/components/cards/card-media.html +0 -39
  210. package/docs/src/components/cards/card-with-actions.html +0 -38
  211. package/docs/src/components/cards/simple-card.html +0 -3
  212. package/docs/src/components/cards.pug +0 -15
  213. package/docs/src/components/checkbox/usage.html +0 -33
  214. package/docs/src/components/checkbox.pug +0 -7
  215. package/docs/src/components/chips/chip-input.html +0 -73
  216. package/docs/src/components/chips/default-chips.html +0 -25
  217. package/docs/src/components/chips/elevated-chips.html +0 -25
  218. package/docs/src/components/chips/selected-chips.html +0 -50
  219. package/docs/src/components/chips.pug +0 -16
  220. package/docs/src/components/common-buttons/anchor-buttons.html +0 -6
  221. package/docs/src/components/common-buttons/buttons-icons.html +0 -24
  222. package/docs/src/components/common-buttons/buttons-trailing-icons.html +0 -25
  223. package/docs/src/components/common-buttons/buttons-variants.html +0 -6
  224. package/docs/src/components/common-buttons/filled-colors.html +0 -4
  225. package/docs/src/components/common-buttons.pug +0 -22
  226. package/docs/src/components/data-tables/simple-table.html +0 -47
  227. package/docs/src/components/data-tables/table-footer.html +0 -59
  228. package/docs/src/components/data-tables/table-header.html +0 -43
  229. package/docs/src/components/data-tables.pug +0 -15
  230. package/docs/src/components/datepicker.pug +0 -133
  231. package/docs/src/components/dialogs/example.html +0 -44
  232. package/docs/src/components/dialogs.pug +0 -19
  233. package/docs/src/components/dividers/no-margin.html +0 -7
  234. package/docs/src/components/dividers/usage.html +0 -7
  235. package/docs/src/components/dividers.pug +0 -13
  236. package/docs/src/components/dropdown-menus/down-end.html +0 -10
  237. package/docs/src/components/dropdown-menus/down-left.html +0 -10
  238. package/docs/src/components/dropdown-menus/down-right.html +0 -10
  239. package/docs/src/components/dropdown-menus/down-start.html +0 -10
  240. package/docs/src/components/dropdown-menus/down.html +0 -10
  241. package/docs/src/components/dropdown-menus/up-end.html +0 -10
  242. package/docs/src/components/dropdown-menus/up-left.html +0 -10
  243. package/docs/src/components/dropdown-menus/up-right.html +0 -10
  244. package/docs/src/components/dropdown-menus/up-start.html +0 -10
  245. package/docs/src/components/dropdown-menus/up.html +0 -10
  246. package/docs/src/components/expansion-panel.pug +0 -33
  247. package/docs/src/components/fab/button-colors.html +0 -18
  248. package/docs/src/components/fab/button-sizes.html +0 -11
  249. package/docs/src/components/fab/extended-buttons.html +0 -18
  250. package/docs/src/components/fab/floating-action-area.html +0 -5
  251. package/docs/src/components/fab/floating-menu.html +0 -10
  252. package/docs/src/components/fab/lowered-buttons.html +0 -6
  253. package/docs/src/components/fab.pug +0 -25
  254. package/docs/src/components/icon-buttons/anchor-buttons.html +0 -15
  255. package/docs/src/components/icon-buttons/buttons-variants.html +0 -15
  256. package/docs/src/components/icon-buttons/toggle-buttons-manual.html +0 -44
  257. package/docs/src/components/icon-buttons/toggle-buttons.html +0 -48
  258. package/docs/src/components/icon-buttons.pug +0 -18
  259. package/docs/src/components/lists/list-avatars.html +0 -14
  260. package/docs/src/components/lists/list-custom-dividers.html +0 -23
  261. package/docs/src/components/lists/list-dividers.html +0 -17
  262. package/docs/src/components/lists/list-dynamic.html +0 -26
  263. package/docs/src/components/lists/list-hover.html +0 -17
  264. package/docs/src/components/lists/list-icons.html +0 -17
  265. package/docs/src/components/lists/list-indexed.html +0 -123
  266. package/docs/src/components/lists/list-sections.html +0 -16
  267. package/docs/src/components/lists/list-three-lines.html +0 -20
  268. package/docs/src/components/lists/list-two-lines.html +0 -20
  269. package/docs/src/components/lists/list-with-action.html +0 -26
  270. package/docs/src/components/lists/list-with-activated-item.html +0 -17
  271. package/docs/src/components/lists/simple-list.html +0 -17
  272. package/docs/src/components/lists.pug +0 -94
  273. package/docs/src/components/menus.pug +0 -55
  274. package/docs/src/components/progress/circular-progress.html +0 -13
  275. package/docs/src/components/progress/determinate-progress.html +0 -3
  276. package/docs/src/components/progress/indeterminate-progress.html +0 -3
  277. package/docs/src/components/progress/progress-color.html +0 -3
  278. package/docs/src/components/progress.pug +0 -18
  279. package/docs/src/components/ripple/usage.html +0 -9
  280. package/docs/src/components/ripple.pug +0 -10
  281. package/docs/src/components/selection-controls/checkbox.html +0 -22
  282. package/docs/src/components/selection-controls/radio-button.html +0 -36
  283. package/docs/src/components/selection-controls/switch.html +0 -12
  284. package/docs/src/components/selection-controls.pug +0 -13
  285. package/docs/src/components/sliders/example.html +0 -42
  286. package/docs/src/components/sliders.pug +0 -7
  287. package/docs/src/components/snackbar/example.html +0 -35
  288. package/docs/src/components/snackbars.pug +0 -21
  289. package/docs/src/components/steppers.pug +0 -57
  290. package/docs/src/components/tabs/example.html +0 -45
  291. package/docs/src/components/tabs.pug +0 -8
  292. package/docs/src/components/text-fields.pug +0 -88
  293. package/docs/src/components/toolbars/simple-toolbar.html +0 -33
  294. package/docs/src/components/toolbars.pug +0 -7
  295. package/docs/src/content/typography/example.html +0 -15
  296. package/docs/src/content/typography.pug +0 -8
  297. package/docs/src/css/docs.scss +0 -189
  298. package/docs/src/index.pug +0 -10
  299. package/docs/src/js/docs.js +0 -161
  300. package/docs/src/js/universal-material.js +0 -757
  301. package/docs/src/js/universal-material.js.map +0 -1
  302. package/docs/src/js/universal-material.min.js +0 -17
  303. package/docs/src/js/universal-material.min.js.map +0 -1
  304. package/docs/src/layout/grid.pug +0 -15
  305. package/docs/src/utilities/background-colors/common-colors.html +0 -7
  306. package/docs/src/utilities/background-colors/theme-colors.html +0 -16
  307. package/docs/src/utilities/background-colors.pug +0 -10
  308. package/docs/src/utilities/text-and-background-colors/common-colors.html +0 -80
  309. package/docs/src/utilities/text-and-background-colors/theme-colors.html +0 -208
  310. package/docs/src/utilities/text-and-background-colors.pug +0 -10
  311. package/docs/src/utilities/text-colors/common-colors.html +0 -12
  312. package/docs/src/utilities/text-colors/emphasis-colors.html +0 -26
  313. package/docs/src/utilities/text-colors/theme-colors.html +0 -37
  314. package/docs/src/utilities/text-colors.pug +0 -13
  315. package/gulpfile.js +0 -225
  316. package/index.html +0 -11
  317. package/rollup.config.js +0 -42
  318. package/src/_utils.scss +0 -20
  319. package/src/_variables.scss +0 -68
  320. package/src/button/button-base.styles.scss +0 -75
  321. package/src/button/button-base.ts +0 -147
  322. package/src/button/button-set.styles.scss +0 -35
  323. package/src/button/button-set.ts +0 -33
  324. package/src/button/button.styles.scss +0 -97
  325. package/src/button/button.ts +0 -64
  326. package/src/button/fab.styles.scss +0 -90
  327. package/src/button/fab.ts +0 -55
  328. package/src/button/icon-button.styles.scss +0 -74
  329. package/src/button/icon-button.ts +0 -72
  330. package/src/card/card-content.styles.scss +0 -11
  331. package/src/card/card-content.ts +0 -45
  332. package/src/card/card-media.styles.scss +0 -9
  333. package/src/card/card-media.ts +0 -24
  334. package/src/card/card.styles.scss +0 -27
  335. package/src/card/card.ts +0 -37
  336. package/src/checkbox/checkbox.ts +0 -77
  337. package/src/container/container.styles.scss +0 -39
  338. package/src/container/container.ts +0 -24
  339. package/src/divider/divider.styles.scss +0 -13
  340. package/src/divider/divider.ts +0 -21
  341. package/src/elevation/elevation.styles.scss +0 -31
  342. package/src/elevation/elevation.ts +0 -17
  343. package/src/ripple/ripple.styles.scss +0 -80
  344. package/src/ripple/ripple.ts +0 -150
  345. package/src/shared/base.styles.scss +0 -5
  346. package/src/table/table-body.styles.scss +0 -9
  347. package/src/table/table-body.ts +0 -21
  348. package/src/table/table-cell.styles.scss +0 -9
  349. package/src/table/table-cell.ts +0 -21
  350. package/src/table/table-head.styles.scss +0 -9
  351. package/src/table/table-head.ts +0 -21
  352. package/src/table/table-header-cell.styles.scss +0 -10
  353. package/src/table/table-header-cell.ts +0 -21
  354. package/src/table/table-row.styles.scss +0 -3
  355. package/src/table/table-row.ts +0 -21
  356. package/src/table/table.styles.scss +0 -12
  357. package/src/theme/color.ts +0 -6
  358. package/src/theme/css-var-builder.ts +0 -36
  359. package/src/theme/neutral-colors.ts +0 -21
  360. package/src/theme/rgb-color.ts +0 -19
  361. package/src/theme/theme-builder.ts +0 -201
  362. package/tsconfig.json +0 -36
  363. package/web-dev-server.config.js +0 -25
  364. package/web-test-runner.config.js +0 -120
package/docs/docs.css DELETED
@@ -1,185 +0,0 @@
1
- * {
2
- box-sizing: border-box;
3
- }
4
-
5
- body {
6
- margin: 0;
7
- color: #333;
8
- font-family: 'Open Sans', arial, sans-serif;
9
- min-width: min-content;
10
- min-height: 100vh;
11
- font-size: 18px;
12
- display: flex;
13
- flex-direction: column;
14
- align-items: stretch;
15
- }
16
-
17
- #main-wrapper {
18
- flex-grow: 1;
19
- }
20
-
21
- main {
22
- max-width: 1024px;
23
- margin: 0 auto;
24
- }
25
-
26
- a:visited {
27
- color: inherit;
28
- }
29
-
30
- header {
31
- width: 100%;
32
- display: flex;
33
- flex-direction: column;
34
- align-items: center;
35
- justify-content: center;
36
- height: 360px;
37
- margin: 0;
38
- background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
39
- color: white;
40
- }
41
-
42
- footer {
43
- width: 100%;
44
- min-height: 120px;
45
- background: gray;
46
- color: white;
47
- display: flex;
48
- flex-direction: column;
49
- justify-content: center;
50
- padding: 12px;
51
- margin-top: 64px;
52
- }
53
-
54
- h1 {
55
- font-size: 2.5em;
56
- font-weight: 400;
57
- }
58
-
59
- h2 {
60
- font-size: 1.6em;
61
- font-weight: 300;
62
- margin: 64px 0 12px;
63
- }
64
-
65
- h3 {
66
- font-weight: 300;
67
- }
68
-
69
- header h1 {
70
- width: auto;
71
- font-size: 2.8em;
72
- margin: 0;
73
- }
74
-
75
- header h2 {
76
- width: auto;
77
- margin: 0;
78
- }
79
-
80
- nav {
81
- display: grid;
82
- width: 100%;
83
- max-width: 100%;
84
- grid-template-columns: repeat(auto-fit, 240px);
85
- justify-content: center;
86
- border-bottom: 1px solid #efefef;
87
- }
88
-
89
- nav > a {
90
- color: #444;
91
- display: block;
92
- flex: 1;
93
- font-size: 18px;
94
- padding: 20px 0;
95
- text-align: center;
96
- text-decoration: none;
97
- }
98
-
99
- nav > a:hover {
100
- text-decoration: underline;
101
- }
102
-
103
- nav.collection {
104
- border: none;
105
- }
106
-
107
- nav.collection > ul {
108
- padding: 0;
109
- list-style: none;
110
- }
111
-
112
- nav.collection > ul > li {
113
- padding: 4px 0;
114
- }
115
-
116
- nav.collection > ul > li.selected {
117
- font-weight: 600;
118
- }
119
-
120
- nav.collection a {
121
- text-decoration: none;
122
- }
123
-
124
- nav.collection a:hover {
125
- text-decoration: underline;
126
- }
127
-
128
- section.columns {
129
- display: grid;
130
- grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
131
- grid-gap: 48px;
132
- justify-content: center;
133
- }
134
-
135
- section.columns > div {
136
- flex: 1;
137
- }
138
-
139
- section.examples {
140
- display: grid;
141
- grid-template-columns: 240px minmax(400px, 784px);
142
- grid-gap: 48px;
143
- justify-content: center;
144
- }
145
-
146
- section.examples h2:first-of-type {
147
- margin-top: 0;
148
- }
149
-
150
- table {
151
- width: 100%;
152
- border-collapse: collapse;
153
- }
154
- th {
155
- font-weight: 600;
156
- }
157
-
158
- td, th {
159
- border: solid 1px #aaa;
160
- padding: 4px;
161
- text-align: left;
162
- vertical-align: top;
163
- }
164
-
165
-
166
-
167
-
168
- :root {
169
- --reference-width: 100vh;
170
- --sm-breakpoint: 576px;
171
- --md-breakpoint: 768px;
172
- --lg-breakpoint: 992px;
173
- --xl-breakpoint: 1200px;
174
- --xs-container-width: 100%;
175
- --xs-container-width-value: clamp(0px, calc(var(--sm-breakpoint) - var(--reference-width)) * 100000, var(--xs-container-width));
176
- --is-xl: 1px;
177
- --is-sm: clamp(0, calc(0 * max(0, min(1, calc((100% - var(--sm-breakpoint)) / (var(--md-breakpoint) - var(--sm-breakpoint)))))), 1);
178
- --is-md: clamp(0, calc(0 * max(0, min(1, calc((100% - var(--md-breakpoint)) / (var(--lg-breakpoint) - var(--md-breakpoint)))))), 1);
179
- --is-lg: clamp(0, calc(0 *max(0, min(1, calc((100% - var(--lg-breakpoint)) / (var(--xl-breakpoint) - var(--lg-breakpoint)))))), 1);
180
- }
181
-
182
- .container {
183
- width: var(--xs-container-width-value);
184
- border: 1px solid black;
185
- }
package/docs/examples/index.html DELETED
@@ -1,75 +0,0 @@
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 DELETED
@@ -1,65 +0,0 @@
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 DELETED
@@ -1,75 +0,0 @@
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 DELETED
@@ -1,53 +0,0 @@
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 DELETED
@@ -1,123 +0,0 @@
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 DELETED
@@ -1,27 +0,0 @@
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}