@redvars/peacock 3.1.2 → 3.1.3

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 (346) hide show
  1. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/LoaderUtils.d.ts +0 -1
  2. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/LoaderUtils.js +0 -1
  3. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/LoaderUtils.js.map +1 -1
  4. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.d.ts +1 -1
  5. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js +1 -1
  6. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/avatar/avatar.js.map +1 -1
  7. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.d.ts +1 -1
  8. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js +1 -1
  9. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/badge/badge.js.map +1 -1
  10. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/button.d.ts +99 -0
  11. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/button.js +292 -0
  12. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/button.js.map +1 -0
  13. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/index.d.ts +1 -0
  14. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/index.js +2 -0
  15. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/button/index.js.map +1 -0
  16. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/ClockController.d.ts +10 -0
  17. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/ClockController.js +22 -0
  18. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/ClockController.js.map +1 -0
  19. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.d.ts +4 -6
  20. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js +8 -25
  21. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/clock/clock.js.map +1 -1
  22. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/code-highlighter.d.ts +26 -0
  23. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/code-highlighter.js +60 -0
  24. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/code-highlighter.js.map +1 -0
  25. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/index.d.ts +1 -0
  26. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/index.js +2 -0
  27. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/index.js.map +1 -0
  28. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/local.d.ts +6 -0
  29. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/local.js +7 -0
  30. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/code-highlighter/local.js.map +1 -0
  31. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.d.ts +1 -2
  32. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js +1 -8
  33. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/divider/divider.js.map +1 -1
  34. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.css.d.ts +1 -0
  35. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.css.js +47 -0
  36. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.css.js.map +1 -0
  37. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.d.ts +27 -0
  38. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.js +31 -0
  39. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/elevation.js.map +1 -0
  40. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/index.d.ts +1 -0
  41. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/index.js +2 -0
  42. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/elevation/index.js.map +1 -0
  43. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/FocusAttachableController.d.ts +9 -0
  44. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/FocusAttachableController.js +25 -0
  45. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/FocusAttachableController.js.map +1 -0
  46. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/focus-ring.d.ts +35 -0
  47. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/focus-ring.js +81 -0
  48. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/focus-ring.js.map +1 -0
  49. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/index.d.ts +1 -0
  50. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/index.js +2 -0
  51. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/focus-ring/index.js.map +1 -0
  52. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.d.ts +3 -2
  53. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js +4 -4
  54. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/icon/icon.js.map +1 -1
  55. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.d.ts +4 -0
  56. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js +4 -0
  57. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/index.js.map +1 -1
  58. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js +24 -18
  59. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/peacock-loader.js.map +1 -1
  60. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/index.d.ts +1 -0
  61. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/index.js +2 -0
  62. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/index.js.map +1 -0
  63. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/ripple.d.ts +9 -0
  64. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/ripple.js +125 -0
  65. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/ripple/ripple.js.map +1 -0
  66. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.d.ts +4 -0
  67. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js +22 -1
  68. package/.rollup.cache/E/git/redvars/peacock/components/dist/src/utils.js.map +1 -1
  69. package/.rollup.cache/E/git/redvars/peacock/components/dist/tsconfig.tsbuildinfo +1 -1
  70. package/bin/typedoc-gen.mjs +3 -4
  71. package/demo/index.html +45 -41
  72. package/dist/LoaderUtils.d.ts +23 -0
  73. package/dist/LoaderUtils.d.ts.map +1 -0
  74. package/dist/assets/styles/tokens.css +21 -53
  75. package/dist/avatar/avatar.d.ts +28 -0
  76. package/dist/avatar/avatar.d.ts.map +1 -0
  77. package/dist/avatar/index.d.ts +2 -0
  78. package/dist/avatar/index.d.ts.map +1 -0
  79. package/dist/avatar/p-avatar.d.ts +4 -0
  80. package/dist/avatar/p-avatar.d.ts.map +1 -0
  81. package/dist/avatar.js +42 -40
  82. package/dist/avatar.js.map +1 -1
  83. package/dist/badge/badge.d.ts +24 -0
  84. package/dist/badge/badge.d.ts.map +1 -0
  85. package/dist/badge/index.d.ts +2 -0
  86. package/dist/badge/index.d.ts.map +1 -0
  87. package/dist/badge/p-badge.d.ts +4 -0
  88. package/dist/badge/p-badge.d.ts.map +1 -0
  89. package/dist/badge.js +37 -36
  90. package/dist/badge.js.map +1 -1
  91. package/dist/button/button.d.ts +103 -0
  92. package/dist/button/button.d.ts.map +1 -0
  93. package/dist/button/index.d.ts +2 -0
  94. package/dist/button/index.d.ts.map +1 -0
  95. package/dist/button.js +710 -0
  96. package/dist/button.js.map +1 -0
  97. package/dist/class-map-BzIzngvN.js +89 -0
  98. package/dist/class-map-BzIzngvN.js.map +1 -0
  99. package/dist/class-map-CBk4-iMN.js +11 -0
  100. package/dist/class-map-CBk4-iMN.js.map +1 -0
  101. package/dist/class-map-Cavm-B1S.js +11 -0
  102. package/dist/class-map-Cavm-B1S.js.map +1 -0
  103. package/dist/class-map-DL5vM0J2.js +11 -0
  104. package/dist/class-map-DL5vM0J2.js.map +1 -0
  105. package/dist/class-map-IbP5VjmB.js +11 -0
  106. package/dist/class-map-IbP5VjmB.js.map +1 -0
  107. package/dist/clock/ClockController.d.ts +11 -0
  108. package/dist/clock/ClockController.d.ts.map +1 -0
  109. package/dist/clock/clock.d.ts +26 -0
  110. package/dist/clock/clock.d.ts.map +1 -0
  111. package/dist/clock/index.d.ts +2 -0
  112. package/dist/clock/index.d.ts.map +1 -0
  113. package/dist/clock.js +42 -35
  114. package/dist/clock.js.map +1 -1
  115. package/dist/code-highlighter/code-highlighter.d.ts +27 -0
  116. package/dist/code-highlighter/code-highlighter.d.ts.map +1 -0
  117. package/dist/code-highlighter/index.d.ts +2 -0
  118. package/dist/code-highlighter/index.d.ts.map +1 -0
  119. package/dist/code-highlighter/local.d.ts +7 -0
  120. package/dist/code-highlighter/local.d.ts.map +1 -0
  121. package/dist/code-highlighter.js +66 -0
  122. package/dist/code-highlighter.js.map +1 -0
  123. package/dist/custom-elements-jsdocs.json +589 -34
  124. package/dist/directive-CkFJvUQK.js +45 -0
  125. package/dist/directive-CkFJvUQK.js.map +1 -0
  126. package/dist/divider/divider.d.ts +28 -0
  127. package/dist/divider/divider.d.ts.map +1 -0
  128. package/dist/divider/index.d.ts +2 -0
  129. package/dist/divider/index.d.ts.map +1 -0
  130. package/dist/divider.js +55 -61
  131. package/dist/divider.js.map +1 -1
  132. package/dist/elevation/elevation.d.ts +28 -0
  133. package/dist/elevation/elevation.d.ts.map +1 -0
  134. package/dist/elevation/index.d.ts +2 -0
  135. package/dist/elevation/index.d.ts.map +1 -0
  136. package/dist/elevation-Bl1N6qEq.js +100 -0
  137. package/dist/elevation-Bl1N6qEq.js.map +1 -0
  138. package/dist/elevation-CbF5he8B.js +103 -0
  139. package/dist/elevation-CbF5he8B.js.map +1 -0
  140. package/dist/elevation-D3F6Z1jU.js +100 -0
  141. package/dist/elevation-D3F6Z1jU.js.map +1 -0
  142. package/dist/elevation.js +77 -0
  143. package/dist/elevation.js.map +1 -0
  144. package/dist/focus-ring/FocusAttachableController.d.ts +10 -0
  145. package/dist/focus-ring/FocusAttachableController.d.ts.map +1 -0
  146. package/dist/focus-ring/focus-ring.d.ts +36 -0
  147. package/dist/focus-ring/focus-ring.d.ts.map +1 -0
  148. package/dist/focus-ring/index.d.ts +2 -0
  149. package/dist/focus-ring/index.d.ts.map +1 -0
  150. package/dist/focus-ring.js +105 -0
  151. package/dist/focus-ring.js.map +1 -0
  152. package/dist/icon/datasource.d.ts +3 -0
  153. package/dist/icon/datasource.d.ts.map +1 -0
  154. package/dist/icon/icon.d.ts +42 -0
  155. package/dist/icon/icon.d.ts.map +1 -0
  156. package/dist/icon/index.d.ts +2 -0
  157. package/dist/icon/index.d.ts.map +1 -0
  158. package/dist/icon/p-icon.d.ts +4 -0
  159. package/dist/icon/p-icon.d.ts.map +1 -0
  160. package/dist/icon.js +26 -26
  161. package/dist/icon.js.map +1 -1
  162. package/dist/index.d.ts +9 -0
  163. package/dist/index.d.ts.map +1 -0
  164. package/dist/index.js +9 -5
  165. package/dist/index.js.map +1 -1
  166. package/dist/link/link.css.d.ts +3 -0
  167. package/dist/link/link.css.d.ts.map +1 -0
  168. package/dist/lit-element-B7NX__Gq.js +2851 -0
  169. package/dist/lit-element-B7NX__Gq.js.map +1 -0
  170. package/dist/lit-element-Bq5B2QNv.js +28 -0
  171. package/dist/lit-element-Bq5B2QNv.js.map +1 -0
  172. package/dist/lit-element-CkD27PXL.js +28 -0
  173. package/dist/lit-element-CkD27PXL.js.map +1 -0
  174. package/dist/lit-element-DHH1_Q-3.js +28 -0
  175. package/dist/lit-element-DHH1_Q-3.js.map +1 -0
  176. package/dist/peacock-loader.d.ts +2 -0
  177. package/dist/peacock-loader.d.ts.map +1 -0
  178. package/dist/peacock-loader.js +465 -116
  179. package/dist/peacock-loader.js.map +1 -1
  180. package/dist/property-BXcRN0hQ.js +39 -0
  181. package/dist/property-BXcRN0hQ.js.map +1 -0
  182. package/dist/property-CR1ZrEd9.js +45 -0
  183. package/dist/property-CR1ZrEd9.js.map +1 -0
  184. package/dist/property-CqSbFxyM.js +45 -0
  185. package/dist/property-CqSbFxyM.js.map +1 -0
  186. package/dist/property-DNaigT7h.js +39 -0
  187. package/dist/property-DNaigT7h.js.map +1 -0
  188. package/dist/property-yt9tIYgR.js +39 -0
  189. package/dist/property-yt9tIYgR.js.map +1 -0
  190. package/dist/query-CV342L_h.js +189 -0
  191. package/dist/query-CV342L_h.js.map +1 -0
  192. package/dist/ripple-Blc5Rqhb.js +102 -0
  193. package/dist/ripple-Blc5Rqhb.js.map +1 -0
  194. package/dist/ripple-BqTcEQAP.js +102 -0
  195. package/dist/ripple-BqTcEQAP.js.map +1 -0
  196. package/dist/ripple-BqUjb18i.js +105 -0
  197. package/dist/ripple-BqUjb18i.js.map +1 -0
  198. package/dist/ripple-Buzs-MON.js +106 -0
  199. package/dist/ripple-Buzs-MON.js.map +1 -0
  200. package/dist/ripple-Bz5B_LoE.js +102 -0
  201. package/dist/ripple-Bz5B_LoE.js.map +1 -0
  202. package/dist/ripple-CAq7Ix6x.js +106 -0
  203. package/dist/ripple-CAq7Ix6x.js.map +1 -0
  204. package/dist/ripple-CDqSm_Vy.js +106 -0
  205. package/dist/ripple-CDqSm_Vy.js.map +1 -0
  206. package/dist/ripple-CJtPH28B.js +102 -0
  207. package/dist/ripple-CJtPH28B.js.map +1 -0
  208. package/dist/ripple-CKTd8obC.js +92 -0
  209. package/dist/ripple-CKTd8obC.js.map +1 -0
  210. package/dist/ripple-CKnDWTVQ.js +107 -0
  211. package/dist/ripple-CKnDWTVQ.js.map +1 -0
  212. package/dist/ripple-CeR8eLuc.js +93 -0
  213. package/dist/ripple-CeR8eLuc.js.map +1 -0
  214. package/dist/ripple-Czp3eR6w.js +127 -0
  215. package/dist/ripple-Czp3eR6w.js.map +1 -0
  216. package/dist/ripple-DIab1MaY.js +106 -0
  217. package/dist/ripple-DIab1MaY.js.map +1 -0
  218. package/dist/ripple-DUFMimxZ.js +120 -0
  219. package/dist/ripple-DUFMimxZ.js.map +1 -0
  220. package/dist/ripple-DVmDdoNV.js +102 -0
  221. package/dist/ripple-DVmDdoNV.js.map +1 -0
  222. package/dist/ripple-DYnhXK5d.js +118 -0
  223. package/dist/ripple-DYnhXK5d.js.map +1 -0
  224. package/dist/ripple-DnudV47f.js +102 -0
  225. package/dist/ripple-DnudV47f.js.map +1 -0
  226. package/dist/ripple-DsC-h31M.js +119 -0
  227. package/dist/ripple-DsC-h31M.js.map +1 -0
  228. package/dist/ripple-DvM0SPd9.js +128 -0
  229. package/dist/ripple-DvM0SPd9.js.map +1 -0
  230. package/dist/ripple-NWIiDgX2.js +128 -0
  231. package/dist/ripple-NWIiDgX2.js.map +1 -0
  232. package/dist/ripple-X3U_R8lT.js +106 -0
  233. package/dist/ripple-X3U_R8lT.js.map +1 -0
  234. package/dist/ripple.js +128 -0
  235. package/dist/ripple.js.map +1 -0
  236. package/dist/src/LoaderUtils.d.ts +0 -1
  237. package/dist/src/avatar/avatar.d.ts +1 -1
  238. package/dist/src/badge/badge.d.ts +1 -1
  239. package/dist/src/button/button.d.ts +99 -0
  240. package/dist/src/button/index.d.ts +1 -0
  241. package/dist/src/clock/ClockController.d.ts +10 -0
  242. package/dist/src/clock/clock.d.ts +4 -6
  243. package/dist/src/code-highlighter/code-highlighter.d.ts +26 -0
  244. package/dist/src/code-highlighter/index.d.ts +1 -0
  245. package/dist/src/code-highlighter/local.d.ts +6 -0
  246. package/dist/src/divider/divider.d.ts +1 -2
  247. package/dist/src/elevation/elevation.css.d.ts +1 -0
  248. package/dist/src/elevation/elevation.d.ts +27 -0
  249. package/dist/src/elevation/index.d.ts +1 -0
  250. package/dist/src/focus-ring/FocusAttachableController.d.ts +9 -0
  251. package/dist/src/focus-ring/focus-ring.d.ts +35 -0
  252. package/dist/src/focus-ring/index.d.ts +1 -0
  253. package/dist/src/icon/icon.d.ts +3 -2
  254. package/dist/src/index.d.ts +4 -0
  255. package/dist/src/ripple/index.d.ts +1 -0
  256. package/dist/src/ripple/ripple.d.ts +9 -0
  257. package/dist/src/utils.d.ts +4 -0
  258. package/dist/state-BXOdKkbT.js +10 -0
  259. package/dist/state-BXOdKkbT.js.map +1 -0
  260. package/dist/state-BfUul2Gq.js +10 -0
  261. package/dist/state-BfUul2Gq.js.map +1 -0
  262. package/dist/state-CNX6DhqO.js +10 -0
  263. package/dist/state-CNX6DhqO.js.map +1 -0
  264. package/dist/state-Cl3mjeR1.js +10 -0
  265. package/dist/state-Cl3mjeR1.js.map +1 -0
  266. package/dist/state-WDFgnqnd.js +36 -0
  267. package/dist/state-WDFgnqnd.js.map +1 -0
  268. package/dist/style-inject.es--nCJ9F_D.js +55 -0
  269. package/dist/style-inject.es--nCJ9F_D.js.map +1 -0
  270. package/dist/style-inject.es-tgCJW-Cu.js +29 -0
  271. package/dist/style-inject.es-tgCJW-Cu.js.map +1 -0
  272. package/dist/styleMixins.css-0Uq-6ouM.js +14 -0
  273. package/dist/styleMixins.css-0Uq-6ouM.js.map +1 -0
  274. package/dist/styleMixins.css-B8H9wDNA.js +17 -0
  275. package/dist/styleMixins.css-B8H9wDNA.js.map +1 -0
  276. package/dist/styleMixins.css-DrUsqddl.js +17 -0
  277. package/dist/styleMixins.css-DrUsqddl.js.map +1 -0
  278. package/dist/styleMixins.css-fokZCyF-.js +17 -0
  279. package/dist/styleMixins.css-fokZCyF-.js.map +1 -0
  280. package/dist/styleMixins.css.d.ts +10 -0
  281. package/dist/styleMixins.css.d.ts.map +1 -0
  282. package/dist/text/text.css.d.ts +3 -0
  283. package/dist/text/text.css.d.ts.map +1 -0
  284. package/dist/tsconfig.tsbuildinfo +1 -1
  285. package/dist/typedoc.json +340489 -0
  286. package/dist/utils-BVap5huR.js +157 -0
  287. package/dist/utils-BVap5huR.js.map +1 -0
  288. package/dist/utils-CY3RyfcA.js +157 -0
  289. package/dist/utils-CY3RyfcA.js.map +1 -0
  290. package/dist/utils-CdOdn2dW.js +149 -0
  291. package/dist/utils-CdOdn2dW.js.map +1 -0
  292. package/dist/utils-DD_cg6Ms.js +157 -0
  293. package/dist/utils-DD_cg6Ms.js.map +1 -0
  294. package/dist/utils.d.ts +8 -0
  295. package/dist/utils.d.ts.map +1 -0
  296. package/package.json +4 -2
  297. package/readme.md +1 -1
  298. package/rollup.config.js +9 -1
  299. package/scss/mixin.scss +50 -0
  300. package/src/LoaderUtils.ts +122 -122
  301. package/src/avatar/avatar.scss +38 -0
  302. package/src/avatar/avatar.ts +1 -1
  303. package/src/badge/badge.scss +31 -0
  304. package/src/badge/badge.ts +1 -1
  305. package/src/button/_button-sizes.scss +59 -0
  306. package/src/button/button.scss +430 -0
  307. package/src/button/button.ts +304 -0
  308. package/src/button/demo/index.html +42 -0
  309. package/src/button/index.ts +1 -0
  310. package/src/clock/ClockController.ts +32 -0
  311. package/src/clock/clock.scss +9 -0
  312. package/src/clock/clock.ts +39 -57
  313. package/src/code-highlighter/code-highlighter.scss +0 -0
  314. package/src/code-highlighter/code-highlighter.ts +58 -0
  315. package/src/code-highlighter/demo/index.html +58 -0
  316. package/src/code-highlighter/index.ts +1 -0
  317. package/src/code-highlighter/local.ts +11 -0
  318. package/src/divider/divider.scss +56 -0
  319. package/src/divider/divider.ts +1 -7
  320. package/src/elevation/demo/index.html +58 -0
  321. package/src/elevation/elevation.scss +61 -0
  322. package/src/elevation/elevation.ts +32 -0
  323. package/src/elevation/index.ts +1 -0
  324. package/src/focus-ring/FocusAttachableController.ts +36 -0
  325. package/src/focus-ring/demo/index.html +58 -0
  326. package/src/focus-ring/focus-ring.scss +22 -0
  327. package/src/focus-ring/focus-ring.ts +83 -0
  328. package/src/focus-ring/index.ts +1 -0
  329. package/src/icon/icon.scss +19 -0
  330. package/src/icon/icon.ts +131 -131
  331. package/src/index.ts +9 -5
  332. package/src/link/demo/index.html +34 -0
  333. package/src/link/link.scss +24 -0
  334. package/src/peacock-loader.ts +69 -64
  335. package/src/ripple/index.ts +1 -0
  336. package/src/ripple/ripple.ts +134 -0
  337. package/src/styles.d.ts +3 -1
  338. package/src/text/text.scss +48 -0
  339. package/src/utils.ts +29 -1
  340. package/tsconfig.json +23 -22
  341. package/demo/int.html +0 -31
  342. package/src/avatar/avatar.css.ts +0 -41
  343. package/src/badge/badge.css.ts +0 -34
  344. package/src/clock/clock.css.ts +0 -12
  345. package/src/divider/divider.css.ts +0 -58
  346. package/src/icon/icon.css.ts +0 -22
package/src/link/demo/index.html ADDED
@@ -0,0 +1,34 @@
1
+ <!doctype html>
2
+ <html lang='en-GB'>
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
6
+
7
+ <!-- Default font : Noto Sans and Noto Sans Mono -->
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
11
+
12
+
13
+ <style>
14
+ body {
15
+ background: #fafafa;
16
+ }
17
+ </style>
18
+
19
+ </head>
20
+ <body>
21
+
22
+
23
+ <p class='text-body'>
24
+ <a href='#' class='link with-icon'><p-icon name='home'></p-icon> link</a>
25
+ </p>
26
+
27
+ <p class='text-body'>
28
+ <a href='#' class='link inherit'> Testing No Style</a>
29
+ </p>
30
+
31
+
32
+ <script type='module' src='/dist/peacock-loader.js'></script>
33
+ </body>
34
+ </html>
package/src/link/link.scss ADDED
@@ -0,0 +1,24 @@
1
+ @use "../../scss/mixin";
2
+
3
+ .link {
4
+ border-radius: inherit;
5
+ corner-shape: inherit;
6
+
7
+ color: var(--color-primary);
8
+ --icon-color: currentColor;
9
+ text-decoration: none;
10
+
11
+ &:hover, &:focus-visible {
12
+ text-decoration: underline;
13
+ }
14
+
15
+ &.inherit {
16
+ color: inherit;
17
+ }
18
+
19
+ &.with-icon {
20
+ display: inline-flex;
21
+ align-items: center;
22
+ gap: 0.5em;
23
+ }
24
+ }
package/src/peacock-loader.ts CHANGED
@@ -1,64 +1,69 @@
1
- // Eager loaded
2
- import cssComponentsStyleSheet from '@redvars/peacock-design-tokens/dist/tokens.css';
3
- import { Icon } from './icon/icon.js';
4
- import { Avatar } from './avatar/avatar.js';
5
- import { Badge } from './badge/badge.js';
6
- import { Divider } from './divider/divider.js';
7
-
8
- import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
9
- import { createLinkStyles } from './link/link.css.js';
10
- import { createTextStyles } from './text/text.css.js';
11
-
12
- const libraryPrefix = 'p';
13
-
14
- function buildSheet(styleSheet: any) {
15
- const sheet = new CSSStyleSheet();
16
- // Add rules
17
- sheet.replaceSync(styleSheet.toString());
18
- return sheet;
19
- }
20
-
21
- const styleSheets = [buildSheet(cssComponentsStyleSheet)];
22
-
23
- const linkStylesheet = createLinkStyles(libraryPrefix).styleSheet;
24
- if (linkStylesheet) styleSheets.push(linkStylesheet);
25
-
26
- const textStylesheet = createTextStyles(libraryPrefix).styleSheet;
27
- if (textStylesheet) styleSheets.push(textStylesheet);
28
-
29
- function stringifyStyleSheet(stylesheet: any) {
30
- // Use Array.from() to convert the CSSRuleList to an array
31
- return (
32
- Array.from(stylesheet.cssRules)
33
- // Map each rule to its cssText property
34
- .map((rule: any) => rule.cssText || '')
35
- // Join all the rules with a newline character
36
- .join('\\n')
37
- );
38
- }
39
-
40
- document.adoptedStyleSheets = styleSheets;
41
-
42
- const loaderConfig: LoaderConfig = {
43
- prefix: libraryPrefix,
44
- components: {
45
- icon: {
46
- CustomElementClass: Icon,
47
- // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
48
- },
49
- avatar: {
50
- CustomElementClass: Avatar,
51
- },
52
- badge: {
53
- CustomElementClass: Badge,
54
- },
55
- divider: {
56
- CustomElementClass: Divider,
57
- },
58
- clock: {
59
- importPath: '.' + '/clock.js',
60
- },
61
- },
62
- };
63
-
64
- new LoaderUtils(loaderConfig).start();
1
+ // Eager loaded
2
+ import cssComponentsStyleSheet from '@redvars/peacock-design-tokens/dist/tokens.css';
3
+
4
+ import { Elevation } from './elevation/elevation.js';
5
+ import { FocusRing } from './focus-ring/focus-ring.js';
6
+ import { Ripple } from './ripple/ripple.js';
7
+
8
+ import { Icon } from './icon/icon.js';
9
+ import { Avatar } from './avatar/avatar.js';
10
+ import { Badge } from './badge/badge.js';
11
+ import { Divider } from './divider/divider.js';
12
+ import { Button } from './button/button.js';
13
+
14
+ import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
15
+ import linkStyles from './link/link.scss';
16
+ import textStylesheet from './text/text.scss';
17
+
18
+ const libraryPrefix = 'p';
19
+
20
+ function buildSheet(styleSheet: any) {
21
+ const sheet = new CSSStyleSheet();
22
+ // Add rules
23
+ sheet.replaceSync(styleSheet.toString());
24
+ return sheet;
25
+ }
26
+
27
+ const styleSheets = [
28
+ buildSheet(cssComponentsStyleSheet),
29
+ buildSheet(linkStyles),
30
+ buildSheet(textStylesheet),
31
+ ];
32
+
33
+ document.adoptedStyleSheets = styleSheets;
34
+
35
+ const loaderConfig: LoaderConfig = {
36
+ prefix: libraryPrefix,
37
+ components: {
38
+ icon: {
39
+ CustomElementClass: Icon,
40
+ // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
41
+ },
42
+ 'focus-ring': {
43
+ CustomElementClass: FocusRing,
44
+ },
45
+ avatar: {
46
+ CustomElementClass: Avatar,
47
+ },
48
+ badge: {
49
+ CustomElementClass: Badge,
50
+ },
51
+ button: {
52
+ CustomElementClass: Button,
53
+ },
54
+ divider: {
55
+ CustomElementClass: Divider,
56
+ },
57
+ elevation: {
58
+ CustomElementClass: Elevation,
59
+ },
60
+ clock: {
61
+ importPath: './clock.js',
62
+ },
63
+ ripple: {
64
+ CustomElementClass: Ripple,
65
+ },
66
+ },
67
+ };
68
+
69
+ new LoaderUtils(loaderConfig).start();
package/src/ripple/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Ripple } from './ripple.js';
package/src/ripple/ripple.ts ADDED
@@ -0,0 +1,134 @@
1
+ import { LitElement, html, css } from 'lit';
2
+
3
+ export class Ripple extends LitElement {
4
+ static styles = css`
5
+ :host {
6
+ position: absolute;
7
+ inset: 0; /* top/left/bottom/right: 0 */
8
+ pointer-events: none; /* Let clicks pass through to parent */
9
+ overflow: hidden;
10
+ border-radius: inherit; /* Inherit parent's rounded corners */
11
+ z-index: 0;
12
+ --ripple-state-opacity: 0;
13
+ --ripple-pressed-color: var(--color-on-surface);
14
+ }
15
+
16
+ .ripple:before {
17
+ content: '';
18
+ opacity: var(--ripple-state-opacity);
19
+ pointer-events: none;
20
+ position: absolute;
21
+
22
+ background-color: var(--ripple-pressed-color);
23
+ inset: 0;
24
+ transition:
25
+ opacity 15ms linear,
26
+ background-color 15ms linear;
27
+ }
28
+
29
+ .ripple:after {
30
+ content: '';
31
+ opacity: var(--ripple-state-opacity);
32
+ pointer-events: none;
33
+ position: absolute;
34
+ background: radial-gradient(
35
+ closest-side,
36
+ var(--ripple-pressed-color) max(100% - 70px, 65%),
37
+ transparent 100%
38
+ );
39
+ transform-origin: center center;
40
+ transition: opacity 375ms linear;
41
+
42
+ width: 25px;
43
+ top: 0px;
44
+ transform: translate(51.4375px, 7.5px) scale(8.75941);
45
+ left: 0px;
46
+ height: 25px;
47
+ }
48
+
49
+ .ripple-effect {
50
+ position: absolute;
51
+ border-radius: 50%;
52
+ background-color: var(--ripple-pressed-color);
53
+ opacity: 0.12; /* Material 3 State Layer Opacity */
54
+ transform: scale(0);
55
+ animation: ripple-anim 600ms linear forwards;
56
+ }
57
+
58
+ @keyframes ripple-anim {
59
+ to {
60
+ transform: scale(1);
61
+ opacity: 0;
62
+ }
63
+ }
64
+ `;
65
+
66
+ connectedCallback() {
67
+ super.connectedCallback();
68
+ // We defer slightly to ensure the parent DOM is ready
69
+ requestAnimationFrame(() => {
70
+ this._setupParent();
71
+ });
72
+ }
73
+
74
+ disconnectedCallback() {
75
+ super.disconnectedCallback();
76
+ if (this.parentElement) {
77
+ this.parentElement.removeEventListener('pointerdown', this._createRipple);
78
+ }
79
+ }
80
+
81
+ _setupParent() {
82
+ const parent = this.parentElement;
83
+ if (!parent) return;
84
+
85
+ // 1. Force parent to be relative so we can position absolutely inside it
86
+ const style = window.getComputedStyle(parent);
87
+ if (style.position === 'static') {
88
+ parent.style.position = 'relative';
89
+ }
90
+
91
+ // 2. Attach listener to the parent
92
+ parent.addEventListener('pointerdown', this._createRipple);
93
+ }
94
+
95
+ // Arrow function to bind 'this' automatically
96
+ _createRipple = (event: PointerEvent) => {
97
+ const parent = this.parentElement;
98
+ if (!parent) return;
99
+
100
+ const rect = parent.getBoundingClientRect();
101
+
102
+ // 1. Calculate diameter (furthest corner)
103
+ const diameter = Math.max(rect.width, rect.height) * 2.5;
104
+ const radius = diameter / 2;
105
+
106
+ // 2. Calculate position relative to the parent
107
+ const x = event.clientX - rect.left;
108
+ const y = event.clientY - rect.top;
109
+
110
+ // 3. Create the ripple element
111
+ // We create this manually to avoid triggering a full Lit render cycle
112
+ // for a transient, fire-and-forget animation.
113
+ const ripple = document.createElement('div');
114
+ ripple.classList.add('ripple-effect');
115
+
116
+ ripple.style.width = `${diameter}px`;
117
+ ripple.style.height = `${diameter}px`;
118
+ ripple.style.left = `${x - radius}px`;
119
+ ripple.style.top = `${y - radius}px`;
120
+
121
+ // 4. Append to Shadow DOM
122
+ this.renderRoot.appendChild(ripple);
123
+
124
+ // 5. Cleanup
125
+ ripple.addEventListener('animationend', () => {
126
+ ripple.remove();
127
+ });
128
+ };
129
+
130
+ render() {
131
+ // No HTML needed in the template, we inject ripples dynamically
132
+ return html`<div class="ripple"></div>`;
133
+ }
134
+ }
package/src/styles.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  declare module '*.css' {
2
- const content: Record<string, string>;
2
+ import { CSSResultGroup } from 'lit';
3
+
4
+ const content: Record<string, string> | CSSResultGroup;
3
5
  export default content;
4
6
  }
5
7
 
package/src/text/text.scss ADDED
@@ -0,0 +1,48 @@
1
+ @use "../../scss/mixin";
2
+ @use "sass:string";
3
+
4
+
5
+ @mixin _apply-typography($value-type) {
6
+ @include mixin.get-typography(#{$value-type});
7
+ @if string.index($value-type, "body") {
8
+ margin-block-end: var(--spacing-200);
9
+ }
10
+ @if string.index($value-type, "headline") {
11
+ margin-block-end: var(--spacing-200);
12
+ }
13
+ @if string.index($value-type, "display") {
14
+ margin-block-end: var(--spacing-400);
15
+ }
16
+ @if string.index($value-type, "title") {
17
+ margin-block-end: var(--spacing-400);
18
+ }
19
+ }
20
+
21
+ /// Mixin to define text classes for a specific type and value-type
22
+ /// @param {String} $type - The type name to be used in the class name (e.g., .text-#{$type})
23
+ /// @param {String} $value-type - The value-type name to be passed to get-typography and get-margin-end
24
+ /// @param {Boolean} $important [true] - Whether to use !important in typography properties
25
+ @mixin define-text-classes($type, $value-type) {
26
+ .text-#{$type} {
27
+ @include _apply-typography($value-type);
28
+ }
29
+
30
+ .text-#{$type}-emphasized {
31
+ @include _apply-typography(#{$value-type}-emphasized);
32
+ }
33
+ }
34
+
35
+
36
+ /// List of typography types
37
+ $types: "display", "headline", "body", 'code', 'label', 'title';
38
+
39
+ /// List of typography sizes
40
+ $sizes: "large", "medium", 'small';
41
+
42
+ /// Generate text classes for each type and size
43
+ @each $type in $types {
44
+ @include define-text-classes($type, #{$type}-medium);
45
+ @each $size in $sizes {
46
+ @include define-text-classes(#{$type}-#{$size}, #{$type}-#{$size});
47
+ }
48
+ }
package/src/utils.ts CHANGED
@@ -24,7 +24,7 @@ export async function createCacheFetch(name: string) {
24
24
  if (cache) {
25
25
  const cachedResponse = await cache.match(request);
26
26
  if (cachedResponse) {
27
- return await cachedResponse.text();
27
+ return cachedResponse.text();
28
28
  }
29
29
  }
30
30
 
@@ -151,3 +151,31 @@ export function observerSlotChangesWithCallback(
151
151
 
152
152
  callback(__hasMeaningfulContent(slot));
153
153
  }
154
+
155
+ export function throttle(
156
+ func: Function,
157
+ delay: number,
158
+ options = { leading: true, trailing: true },
159
+ ) {
160
+ let timerId: any;
161
+ let lastExec = 0;
162
+
163
+ return function (...args: any[]) {
164
+ // @ts-ignore
165
+ const context = this;
166
+ const now = Date.now();
167
+
168
+ const shouldCallNow = options.leading && now - lastExec >= delay;
169
+
170
+ if (shouldCallNow) {
171
+ func.apply(context, args);
172
+ lastExec = now;
173
+ } else if (options.trailing && !timerId) {
174
+ timerId = setTimeout(() => {
175
+ func.apply(context, args);
176
+ lastExec = Date.now();
177
+ timerId = null;
178
+ }, delay);
179
+ }
180
+ };
181
+ }
package/tsconfig.json CHANGED
@@ -1,22 +1,23 @@
1
- {
2
- "compilerOptions": {
3
- "target": "es2021",
4
- "module": "NodeNext",
5
- "moduleResolution": "NodeNext",
6
- "noEmitOnError": true,
7
- "lib": ["es2021", "dom", "DOM.Iterable"],
8
- "strict": true,
9
- "esModuleInterop": true,
10
- "allowSyntheticDefaultImports": true,
11
- "experimentalDecorators": true,
12
- "importHelpers": false,
13
- "outDir": "dist",
14
- "sourceMap": true,
15
- "inlineSources": true,
16
- "rootDir": "./",
17
- "declaration": true,
18
- "incremental": true,
19
- "skipLibCheck": true
20
- },
21
- "include": ["**/*.ts"]
22
- }
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es2021",
4
+ "module": "NodeNext",
5
+ "moduleResolution": "NodeNext",
6
+ "noEmitOnError": true,
7
+ "lib": ["es2021", "dom", "DOM.Iterable"],
8
+ "strict": true,
9
+ "esModuleInterop": true,
10
+ "allowSyntheticDefaultImports": true,
11
+ "experimentalDecorators": true,
12
+ "importHelpers": false,
13
+ "outDir": "dist",
14
+ "sourceMap": true,
15
+ "inlineSources": true,
16
+ "rootDir": "./",
17
+ "declaration": true,
18
+ "incremental": true,
19
+ "skipLibCheck": true,
20
+ "baseUrl": "./"
21
+ },
22
+ "include": ["**/*.ts"]
23
+ }
package/demo/int.html DELETED
@@ -1,31 +0,0 @@
1
- <!doctype html>
2
- <html lang='en-GB'>
3
- <head>
4
- <meta charset='utf-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
6
- <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
7
- <style>
8
- body {
9
- background: #fafafa;
10
- }
11
- </style>
12
-
13
-
14
- </head>
15
- <body>
16
-
17
- <a href='/src/icon/demo/index.html'>icon</a>
18
-
19
- <p-icon provider='carbon' name='logo--github'></p-icon>
20
-
21
- <br />
22
-
23
- <a href='/src/avatar/demo/index.html'>avatar</a>
24
- <p-avatar name='Test'></p-avatar>
25
-
26
- <p-clock></p-clock>
27
-
28
-
29
- <script type='module' src='/dist/peacock-loader.js'></script>
30
- </body>
31
- </html>
package/src/avatar/avatar.css.ts DELETED
@@ -1,41 +0,0 @@
1
- import { css } from 'lit';
2
- import { getTypography } from '../styleMixins.css.js';
3
-
4
- export const styles = css`
5
- :host {
6
- display: inline-block;
7
- pointer-events: none;
8
- --avatar-size: 2rem;
9
- --avatar-background-color: var(--color-primary);
10
- --avatar-text-color: var(--color-on-primary);
11
- --avatar-border-radius: var(--global-avatar-border-radius);
12
- }
13
-
14
- .avatar-container {
15
- display: flex;
16
- align-items: center;
17
- gap: var(--spacing-050);
18
- line-height: 0;
19
- }
20
-
21
- .avatar {
22
- border-radius: var(--avatar-border-radius);
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- color: var(--avatar-text-color);
27
- width: var(--avatar-size);
28
- height: var(--avatar-size);
29
- ${getTypography('body-large-emphasized')}
30
- background-color: var(--avatar-background-color);
31
-
32
- font-size: calc(var(--avatar-size) * 0.4);
33
-
34
- .image {
35
- width: 100%;
36
- height: 100%;
37
- overflow: hidden;
38
- border-radius: inherit;
39
- }
40
- }
41
- `;
package/src/badge/badge.css.ts DELETED
@@ -1,34 +0,0 @@
1
- import { css } from 'lit';
2
- import { getTypography } from '../styleMixins.css.js';
3
-
4
- export const styles = css`
5
- :host {
6
- display: inline-block;
7
- --badge-color: var(--global-badge-color);
8
- }
9
-
10
- .badge {
11
- pointer-events: none;
12
- z-index: var(--z-index-badge);
13
- color: var(--color-white);
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- background-color: var(--badge-color);
18
- border-radius: var(--shape-corner-full);
19
- box-sizing: border-box;
20
-
21
- &.slot-has-content {
22
- height: 1rem;
23
- min-width: 1rem;
24
- padding-inline: var(--spacing-050);
25
- ${getTypography('label-small')};
26
- color: var(--color-on-error);
27
- }
28
-
29
- &:not(.slot-has-content) {
30
- height: 0.375rem;
31
- width: 0.375rem;
32
- }
33
- }
34
- `;
package/src/clock/clock.css.ts DELETED
@@ -1,12 +0,0 @@
1
- import { css } from 'lit';
2
- import { getTypography } from '../styleMixins.css.js';
3
-
4
- export const styles = css`
5
- :host {
6
- display: inline-block;
7
- }
8
-
9
- .current-time {
10
- ${getTypography('body-medium')}
11
- }
12
- `;
package/src/divider/divider.css.ts DELETED
@@ -1,58 +0,0 @@
1
- import { css } from 'lit';
2
-
3
- export const styles = css`
4
- :host {
5
- display: block;
6
-
7
- --divider-color: var(--color-outline-variant);
8
- --divider-padding: var(--spacing-200);
9
- }
10
-
11
- .divider {
12
- display: flex;
13
- margin: 0;
14
- @include get-typography(body-small-emphasized);
15
- color: var(--divider-color);
16
-
17
- &:not(.vertical) {
18
- width: 100%;
19
- padding: var(--divider-padding) 0;
20
- align-items: center;
21
- justify-content: center;
22
-
23
- .line {
24
- width: 100%;
25
- border-top: 1px solid var(--divider-color);
26
- }
27
-
28
- &.slot-has-content .slot-container {
29
- padding: 0 var(--spacing-200);
30
- }
31
- }
32
-
33
- &.vertical {
34
- height: 100%;
35
- padding: 0 var(--divider-padding);
36
- flex-direction: column;
37
- align-items: center;
38
- justify-content: center;
39
-
40
- .line {
41
- height: 100%;
42
- border-right: 1px solid var(--divider-color);
43
- }
44
-
45
- &.slot-has-content .slot-container {
46
- padding: var(--spacing-200) 0;
47
- }
48
- }
49
- }
50
-
51
- :host(:not([vertical])) {
52
- width: auto;
53
- }
54
-
55
- :host([vertical]) {
56
- height: auto;
57
- }
58
- `;
package/src/icon/icon.css.ts DELETED
@@ -1,22 +0,0 @@
1
- import { css } from 'lit';
2
-
3
- export const styles = css`
4
- :host {
5
- display: inline-block;
6
- line-height: 0;
7
- --icon-size: inherit;
8
- --icon-color: inherit;
9
- }
10
-
11
- .icon {
12
- display: inline-block;
13
- height: var(--icon-size, 1rem);
14
- width: var(--icon-size, 1rem);
15
-
16
- svg {
17
- fill: var(--icon-color);
18
- height: 100%;
19
- width: 100%;
20
- }
21
- }
22
- `;