color-elements 0.0.2 → 0.0.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 (484) hide show
  1. package/README.md +30 -15
  2. package/_build/copy-config.json +1 -1
  3. package/_build/eleventy.js +7 -2
  4. package/_build/filters-extra.js +1 -1
  5. package/_includes/component.njk +9 -1
  6. package/_includes/partials/_nav-links.njk +11 -4
  7. package/_redirects +8 -1
  8. package/assets/css/style.css +78 -1
  9. package/assets/js/index.js +6 -6
  10. package/data/components.json +12 -0
  11. package/debug.html +447 -0
  12. package/index.js +5 -1
  13. package/package.json +2 -1
  14. package/src/channel-picker/README.md +103 -0
  15. package/src/channel-picker/channel-picker.css +31 -0
  16. package/src/channel-picker/channel-picker.js +168 -0
  17. package/src/channel-picker/channel-picker.webp +0 -0
  18. package/src/channel-slider/README.md +50 -8
  19. package/src/channel-slider/channel-slider.css +47 -5
  20. package/src/channel-slider/channel-slider.js +74 -39
  21. package/src/channel-slider/channel-slider.webp +0 -0
  22. package/src/color-chart/README.md +129 -0
  23. package/src/color-chart/color-chart-global.css +97 -0
  24. package/src/color-chart/color-chart.css +112 -0
  25. package/src/color-chart/color-chart.js +441 -0
  26. package/src/color-chart/color-chart.webp +0 -0
  27. package/src/color-inline/README.md +42 -1
  28. package/src/color-inline/color-inline.css +11 -4
  29. package/src/color-inline/color-inline.js +56 -50
  30. package/src/color-inline/color-inline.webp +0 -0
  31. package/src/color-picker/README.md +107 -5
  32. package/src/color-picker/color-picker.css +21 -6
  33. package/src/color-picker/color-picker.js +147 -60
  34. package/src/color-picker/color-picker.webp +0 -0
  35. package/src/color-scale/README.md +75 -0
  36. package/src/color-scale/color-scale.css +40 -0
  37. package/src/color-scale/color-scale.js +164 -0
  38. package/src/color-scale/color-scale.webp +0 -0
  39. package/src/color-slider/README.md +31 -4
  40. package/src/color-slider/color-slider.css +17 -7
  41. package/src/color-slider/color-slider.js +80 -38
  42. package/src/color-slider/color-slider.webp +0 -0
  43. package/src/color-swatch/README.md +265 -6
  44. package/src/color-swatch/color-swatch.css +162 -27
  45. package/src/color-swatch/color-swatch.js +191 -217
  46. package/src/color-swatch/color-swatch.webp +0 -0
  47. package/src/common/color-element.js +86 -0
  48. package/src/common/dom.js +1 -1
  49. package/src/common/util.js +12 -99
  50. package/src/gamut-badge/README.md +145 -0
  51. package/src/gamut-badge/gamut-badge.css +78 -0
  52. package/src/gamut-badge/gamut-badge.js +121 -0
  53. package/src/gamut-badge/gamut-badge.webp +0 -0
  54. package/src/index.js.njk +1 -1
  55. package/src/space-picker/README.md +121 -0
  56. package/src/space-picker/space-picker.css +23 -0
  57. package/src/space-picker/space-picker.js +213 -0
  58. package/src/space-picker/space-picker.webp +0 -0
  59. package/_data/components.json +0 -8
  60. package/lib/README.md +0 -4
  61. package/lib/colorjs.io/LICENSE +0 -21
  62. package/lib/colorjs.io/README.json +0 -3
  63. package/lib/colorjs.io/README.md +0 -257
  64. package/lib/colorjs.io/colorjs.io/LICENSE +0 -21
  65. package/lib/colorjs.io/colorjs.io/README.json +0 -3
  66. package/lib/colorjs.io/colorjs.io/README.md +0 -257
  67. package/lib/colorjs.io/colorjs.io/dist/color-fn.cjs +0 -5437
  68. package/lib/colorjs.io/colorjs.io/dist/color-fn.cjs.map +0 -1
  69. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.cjs +0 -7048
  70. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.cjs.map +0 -1
  71. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.min.cjs +0 -2
  72. package/lib/colorjs.io/colorjs.io/dist/color-fn.legacy.min.cjs.map +0 -1
  73. package/lib/colorjs.io/colorjs.io/dist/color-fn.min.cjs +0 -2
  74. package/lib/colorjs.io/colorjs.io/dist/color-fn.min.cjs.map +0 -1
  75. package/lib/colorjs.io/colorjs.io/dist/color.cjs +0 -5759
  76. package/lib/colorjs.io/colorjs.io/dist/color.cjs.map +0 -1
  77. package/lib/colorjs.io/colorjs.io/dist/color.global.js +0 -5760
  78. package/lib/colorjs.io/colorjs.io/dist/color.global.js.map +0 -1
  79. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.js +0 -7400
  80. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.js.map +0 -1
  81. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.min.js +0 -2
  82. package/lib/colorjs.io/colorjs.io/dist/color.global.legacy.min.js.map +0 -1
  83. package/lib/colorjs.io/colorjs.io/dist/color.global.min.js +0 -2
  84. package/lib/colorjs.io/colorjs.io/dist/color.global.min.js.map +0 -1
  85. package/lib/colorjs.io/colorjs.io/dist/color.js +0 -5755
  86. package/lib/colorjs.io/colorjs.io/dist/color.js.map +0 -1
  87. package/lib/colorjs.io/colorjs.io/dist/color.legacy.cjs +0 -7399
  88. package/lib/colorjs.io/colorjs.io/dist/color.legacy.cjs.map +0 -1
  89. package/lib/colorjs.io/colorjs.io/dist/color.legacy.js +0 -7395
  90. package/lib/colorjs.io/colorjs.io/dist/color.legacy.js.map +0 -1
  91. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.cjs +0 -2
  92. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.cjs.map +0 -1
  93. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.js +0 -2
  94. package/lib/colorjs.io/colorjs.io/dist/color.legacy.min.js.map +0 -1
  95. package/lib/colorjs.io/colorjs.io/dist/color.min.cjs +0 -2
  96. package/lib/colorjs.io/colorjs.io/dist/color.min.cjs.map +0 -1
  97. package/lib/colorjs.io/colorjs.io/dist/color.min.js +0 -2
  98. package/lib/colorjs.io/colorjs.io/dist/color.min.js.map +0 -1
  99. package/lib/colorjs.io/colorjs.io/package.json +0 -113
  100. package/lib/colorjs.io/colorjs.io/src/CATs.js +0 -131
  101. package/lib/colorjs.io/colorjs.io/src/adapt.js +0 -62
  102. package/lib/colorjs.io/colorjs.io/src/angles.js +0 -44
  103. package/lib/colorjs.io/colorjs.io/src/chromaticity.js +0 -33
  104. package/lib/colorjs.io/colorjs.io/src/clone.js +0 -7
  105. package/lib/colorjs.io/colorjs.io/src/color.js +0 -201
  106. package/lib/colorjs.io/colorjs.io/src/contrast/APCA.js +0 -102
  107. package/lib/colorjs.io/colorjs.io/src/contrast/Lstar.js +0 -17
  108. package/lib/colorjs.io/colorjs.io/src/contrast/Michelson.js +0 -22
  109. package/lib/colorjs.io/colorjs.io/src/contrast/WCAG21.js +0 -20
  110. package/lib/colorjs.io/colorjs.io/src/contrast/Weber.js +0 -27
  111. package/lib/colorjs.io/colorjs.io/src/contrast/deltaPhi.js +0 -25
  112. package/lib/colorjs.io/colorjs.io/src/contrast/index.js +0 -6
  113. package/lib/colorjs.io/colorjs.io/src/contrast.js +0 -28
  114. package/lib/colorjs.io/colorjs.io/src/defaults.js +0 -12
  115. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaE2000.js +0 -179
  116. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaE76.js +0 -7
  117. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaECMC.js +0 -114
  118. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEHCT.js +0 -51
  119. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEITP.js +0 -24
  120. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEJz.js +0 -43
  121. package/lib/colorjs.io/colorjs.io/src/deltaE/deltaEOK.js +0 -19
  122. package/lib/colorjs.io/colorjs.io/src/deltaE/index.js +0 -27
  123. package/lib/colorjs.io/colorjs.io/src/deltaE.js +0 -19
  124. package/lib/colorjs.io/colorjs.io/src/display.js +0 -83
  125. package/lib/colorjs.io/colorjs.io/src/distance.js +0 -21
  126. package/lib/colorjs.io/colorjs.io/src/equals.js +0 -10
  127. package/lib/colorjs.io/colorjs.io/src/get.js +0 -11
  128. package/lib/colorjs.io/colorjs.io/src/getAll.js +0 -20
  129. package/lib/colorjs.io/colorjs.io/src/getColor.js +0 -36
  130. package/lib/colorjs.io/colorjs.io/src/hooks.js +0 -37
  131. package/lib/colorjs.io/colorjs.io/src/inGamut.js +0 -25
  132. package/lib/colorjs.io/colorjs.io/src/index-fn.js +0 -28
  133. package/lib/colorjs.io/colorjs.io/src/index.js +0 -38
  134. package/lib/colorjs.io/colorjs.io/src/interpolation.js +0 -222
  135. package/lib/colorjs.io/colorjs.io/src/keywords.js +0 -158
  136. package/lib/colorjs.io/colorjs.io/src/luminance.js +0 -27
  137. package/lib/colorjs.io/colorjs.io/src/multiply-matrices.js +0 -44
  138. package/lib/colorjs.io/colorjs.io/src/parse.js +0 -198
  139. package/lib/colorjs.io/colorjs.io/src/rgbspace.js +0 -64
  140. package/lib/colorjs.io/colorjs.io/src/serialize.js +0 -86
  141. package/lib/colorjs.io/colorjs.io/src/set.js +0 -33
  142. package/lib/colorjs.io/colorjs.io/src/setAll.js +0 -12
  143. package/lib/colorjs.io/colorjs.io/src/space-accessors.js +0 -86
  144. package/lib/colorjs.io/colorjs.io/src/space.js +0 -440
  145. package/lib/colorjs.io/colorjs.io/src/spaces/a98rgb-linear.js +0 -28
  146. package/lib/colorjs.io/colorjs.io/src/spaces/a98rgb.js +0 -11
  147. package/lib/colorjs.io/colorjs.io/src/spaces/acescc.js +0 -76
  148. package/lib/colorjs.io/colorjs.io/src/spaces/acescg.js +0 -54
  149. package/lib/colorjs.io/colorjs.io/src/spaces/cam16.js +0 -362
  150. package/lib/colorjs.io/colorjs.io/src/spaces/hct.js +0 -157
  151. package/lib/colorjs.io/colorjs.io/src/spaces/hpluv.js +0 -130
  152. package/lib/colorjs.io/colorjs.io/src/spaces/hsl.js +0 -91
  153. package/lib/colorjs.io/colorjs.io/src/spaces/hsluv.js +0 -162
  154. package/lib/colorjs.io/colorjs.io/src/spaces/hsv.js +0 -65
  155. package/lib/colorjs.io/colorjs.io/src/spaces/hwb.js +0 -58
  156. package/lib/colorjs.io/colorjs.io/src/spaces/ictcp.js +0 -133
  157. package/lib/colorjs.io/colorjs.io/src/spaces/index-fn-hdr.js +0 -7
  158. package/lib/colorjs.io/colorjs.io/src/spaces/index-fn.js +0 -29
  159. package/lib/colorjs.io/colorjs.io/src/spaces/index.js +0 -8
  160. package/lib/colorjs.io/colorjs.io/src/spaces/jzazbz.js +0 -118
  161. package/lib/colorjs.io/colorjs.io/src/spaces/jzczhz.js +0 -53
  162. package/lib/colorjs.io/colorjs.io/src/spaces/lab-d65.js +0 -74
  163. package/lib/colorjs.io/colorjs.io/src/spaces/lab.js +0 -74
  164. package/lib/colorjs.io/colorjs.io/src/spaces/lch.js +0 -67
  165. package/lib/colorjs.io/colorjs.io/src/spaces/lchuv.js +0 -68
  166. package/lib/colorjs.io/colorjs.io/src/spaces/luv.js +0 -85
  167. package/lib/colorjs.io/colorjs.io/src/spaces/oklab.js +0 -74
  168. package/lib/colorjs.io/colorjs.io/src/spaces/oklch.js +0 -68
  169. package/lib/colorjs.io/colorjs.io/src/spaces/p3-linear.js +0 -22
  170. package/lib/colorjs.io/colorjs.io/src/spaces/p3.js +0 -13
  171. package/lib/colorjs.io/colorjs.io/src/spaces/prophoto-linear.js +0 -28
  172. package/lib/colorjs.io/colorjs.io/src/spaces/prophoto.js +0 -19
  173. package/lib/colorjs.io/colorjs.io/src/spaces/rec2020-linear.js +0 -27
  174. package/lib/colorjs.io/colorjs.io/src/spaces/rec2020.js +0 -31
  175. package/lib/colorjs.io/colorjs.io/src/spaces/rec2100-hlg.js +0 -49
  176. package/lib/colorjs.io/colorjs.io/src/spaces/rec2100-pq.js +0 -37
  177. package/lib/colorjs.io/colorjs.io/src/spaces/srgb-linear.js +0 -30
  178. package/lib/colorjs.io/colorjs.io/src/spaces/srgb.js +0 -127
  179. package/lib/colorjs.io/colorjs.io/src/spaces/xyz-abs-d65.js +0 -40
  180. package/lib/colorjs.io/colorjs.io/src/spaces/xyz-d50.js +0 -12
  181. package/lib/colorjs.io/colorjs.io/src/spaces/xyz-d65.js +0 -18
  182. package/lib/colorjs.io/colorjs.io/src/to.js +0 -26
  183. package/lib/colorjs.io/colorjs.io/src/toGamut.js +0 -310
  184. package/lib/colorjs.io/colorjs.io/src/util.js +0 -254
  185. package/lib/colorjs.io/colorjs.io/src/variations.js +0 -14
  186. package/lib/colorjs.io/colorjs.io/types/index.d.cts +0 -4
  187. package/lib/colorjs.io/colorjs.io/types/index.d.ts +0 -42
  188. package/lib/colorjs.io/colorjs.io/types/src/CATs.d.ts +0 -13
  189. package/lib/colorjs.io/colorjs.io/types/src/adapt.d.ts +0 -12
  190. package/lib/colorjs.io/colorjs.io/types/src/angles.d.ts +0 -7
  191. package/lib/colorjs.io/colorjs.io/types/src/chromaticity.d.ts +0 -7
  192. package/lib/colorjs.io/colorjs.io/types/src/clone.d.ts +0 -3
  193. package/lib/colorjs.io/colorjs.io/types/src/color.d.ts +0 -160
  194. package/lib/colorjs.io/colorjs.io/types/src/contrast/APCA.d.ts +0 -5
  195. package/lib/colorjs.io/colorjs.io/types/src/contrast/Lstar.d.ts +0 -5
  196. package/lib/colorjs.io/colorjs.io/types/src/contrast/Michelson.d.ts +0 -5
  197. package/lib/colorjs.io/colorjs.io/types/src/contrast/WCAG21.d.ts +0 -5
  198. package/lib/colorjs.io/colorjs.io/types/src/contrast/Weber.d.ts +0 -5
  199. package/lib/colorjs.io/colorjs.io/types/src/contrast/deltaPhi.d.ts +0 -5
  200. package/lib/colorjs.io/colorjs.io/types/src/contrast/index.d.ts +0 -11
  201. package/lib/colorjs.io/colorjs.io/types/src/contrast.d.ts +0 -12
  202. package/lib/colorjs.io/colorjs.io/types/src/defaults.d.ts +0 -2
  203. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaE2000.d.ts +0 -11
  204. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaE76.d.ts +0 -5
  205. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaECMC.d.ts +0 -9
  206. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEHCT.d.ts +0 -5
  207. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEITP.d.ts +0 -5
  208. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEJz.d.ts +0 -5
  209. package/lib/colorjs.io/colorjs.io/types/src/deltaE/deltaEOK.d.ts +0 -5
  210. package/lib/colorjs.io/colorjs.io/types/src/deltaE/index.d.ts +0 -14
  211. package/lib/colorjs.io/colorjs.io/types/src/deltaE.d.ts +0 -12
  212. package/lib/colorjs.io/colorjs.io/types/src/display.d.ts +0 -17
  213. package/lib/colorjs.io/colorjs.io/types/src/distance.d.ts +0 -8
  214. package/lib/colorjs.io/colorjs.io/types/src/equals.d.ts +0 -3
  215. package/lib/colorjs.io/colorjs.io/types/src/get.d.ts +0 -4
  216. package/lib/colorjs.io/colorjs.io/types/src/getAll.d.ts +0 -7
  217. package/lib/colorjs.io/colorjs.io/types/src/getColor.d.ts +0 -4
  218. package/lib/colorjs.io/colorjs.io/types/src/hooks.d.ts +0 -52
  219. package/lib/colorjs.io/colorjs.io/types/src/inGamut.d.ts +0 -8
  220. package/lib/colorjs.io/colorjs.io/types/src/index-fn.d.cts +0 -1
  221. package/lib/colorjs.io/colorjs.io/types/src/index-fn.d.ts +0 -63
  222. package/lib/colorjs.io/colorjs.io/types/src/index.d.ts +0 -125
  223. package/lib/colorjs.io/colorjs.io/types/src/interpolation.d.ts +0 -77
  224. package/lib/colorjs.io/colorjs.io/types/src/keywords.d.ts +0 -2
  225. package/lib/colorjs.io/colorjs.io/types/src/luminance.d.ts +0 -10
  226. package/lib/colorjs.io/colorjs.io/types/src/multiply-matrices.d.ts +0 -9
  227. package/lib/colorjs.io/colorjs.io/types/src/parse.d.ts +0 -16
  228. package/lib/colorjs.io/colorjs.io/types/src/rgbspace.d.ts +0 -10
  229. package/lib/colorjs.io/colorjs.io/types/src/serialize.d.ts +0 -13
  230. package/lib/colorjs.io/colorjs.io/types/src/set.d.ts +0 -18
  231. package/lib/colorjs.io/colorjs.io/types/src/setAll.d.ts +0 -14
  232. package/lib/colorjs.io/colorjs.io/types/src/space-accessors.d.ts +0 -1
  233. package/lib/colorjs.io/colorjs.io/types/src/space-coord-accessors.d.ts +0 -69
  234. package/lib/colorjs.io/colorjs.io/types/src/space.d.ts +0 -143
  235. package/lib/colorjs.io/colorjs.io/types/src/spaces/a98rgb-linear.d.ts +0 -3
  236. package/lib/colorjs.io/colorjs.io/types/src/spaces/a98rgb.d.ts +0 -3
  237. package/lib/colorjs.io/colorjs.io/types/src/spaces/acescc.d.ts +0 -3
  238. package/lib/colorjs.io/colorjs.io/types/src/spaces/acescg.d.ts +0 -3
  239. package/lib/colorjs.io/colorjs.io/types/src/spaces/hpluv.d.ts +0 -3
  240. package/lib/colorjs.io/colorjs.io/types/src/spaces/hsl.d.ts +0 -3
  241. package/lib/colorjs.io/colorjs.io/types/src/spaces/hsluv.d.ts +0 -3
  242. package/lib/colorjs.io/colorjs.io/types/src/spaces/hsv.d.ts +0 -3
  243. package/lib/colorjs.io/colorjs.io/types/src/spaces/hwb.d.ts +0 -3
  244. package/lib/colorjs.io/colorjs.io/types/src/spaces/ictcp.d.ts +0 -3
  245. package/lib/colorjs.io/colorjs.io/types/src/spaces/index-fn-hdr.d.ts +0 -9
  246. package/lib/colorjs.io/colorjs.io/types/src/spaces/index-fn.d.ts +0 -29
  247. package/lib/colorjs.io/colorjs.io/types/src/spaces/index.d.ts +0 -4
  248. package/lib/colorjs.io/colorjs.io/types/src/spaces/jzazbz.d.ts +0 -3
  249. package/lib/colorjs.io/colorjs.io/types/src/spaces/jzczhz.d.ts +0 -3
  250. package/lib/colorjs.io/colorjs.io/types/src/spaces/lab-d65.d.ts +0 -3
  251. package/lib/colorjs.io/colorjs.io/types/src/spaces/lab.d.ts +0 -3
  252. package/lib/colorjs.io/colorjs.io/types/src/spaces/lch.d.ts +0 -3
  253. package/lib/colorjs.io/colorjs.io/types/src/spaces/lchuv.d.ts +0 -3
  254. package/lib/colorjs.io/colorjs.io/types/src/spaces/luv.d.ts +0 -3
  255. package/lib/colorjs.io/colorjs.io/types/src/spaces/oklab.d.ts +0 -3
  256. package/lib/colorjs.io/colorjs.io/types/src/spaces/oklch.d.ts +0 -3
  257. package/lib/colorjs.io/colorjs.io/types/src/spaces/p3-linear.d.ts +0 -3
  258. package/lib/colorjs.io/colorjs.io/types/src/spaces/p3.d.ts +0 -3
  259. package/lib/colorjs.io/colorjs.io/types/src/spaces/prophoto-linear.d.ts +0 -3
  260. package/lib/colorjs.io/colorjs.io/types/src/spaces/prophoto.d.ts +0 -3
  261. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2020-linear.d.ts +0 -3
  262. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2020.d.ts +0 -3
  263. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2100-hlg.d.ts +0 -3
  264. package/lib/colorjs.io/colorjs.io/types/src/spaces/rec2100-pq.d.ts +0 -3
  265. package/lib/colorjs.io/colorjs.io/types/src/spaces/srgb-linear.d.ts +0 -3
  266. package/lib/colorjs.io/colorjs.io/types/src/spaces/srgb.d.ts +0 -3
  267. package/lib/colorjs.io/colorjs.io/types/src/spaces/xyz-abs-d65.d.ts +0 -3
  268. package/lib/colorjs.io/colorjs.io/types/src/spaces/xyz-d50.d.ts +0 -3
  269. package/lib/colorjs.io/colorjs.io/types/src/spaces/xyz-d65.d.ts +0 -3
  270. package/lib/colorjs.io/colorjs.io/types/src/to.d.ts +0 -14
  271. package/lib/colorjs.io/colorjs.io/types/src/toGamut.d.ts +0 -45
  272. package/lib/colorjs.io/colorjs.io/types/src/util.d.ts +0 -58
  273. package/lib/colorjs.io/colorjs.io/types/src/variations.d.ts +0 -5
  274. package/lib/colorjs.io/dist/color-fn.cjs +0 -5437
  275. package/lib/colorjs.io/dist/color-fn.cjs.map +0 -1
  276. package/lib/colorjs.io/dist/color-fn.legacy.cjs +0 -7048
  277. package/lib/colorjs.io/dist/color-fn.legacy.cjs.map +0 -1
  278. package/lib/colorjs.io/dist/color-fn.legacy.min.cjs +0 -2
  279. package/lib/colorjs.io/dist/color-fn.legacy.min.cjs.map +0 -1
  280. package/lib/colorjs.io/dist/color-fn.min.cjs +0 -2
  281. package/lib/colorjs.io/dist/color-fn.min.cjs.map +0 -1
  282. package/lib/colorjs.io/dist/color.cjs +0 -5759
  283. package/lib/colorjs.io/dist/color.cjs.map +0 -1
  284. package/lib/colorjs.io/dist/color.global.js +0 -5760
  285. package/lib/colorjs.io/dist/color.global.js.map +0 -1
  286. package/lib/colorjs.io/dist/color.global.legacy.js +0 -7400
  287. package/lib/colorjs.io/dist/color.global.legacy.js.map +0 -1
  288. package/lib/colorjs.io/dist/color.global.legacy.min.js +0 -2
  289. package/lib/colorjs.io/dist/color.global.legacy.min.js.map +0 -1
  290. package/lib/colorjs.io/dist/color.global.min.js +0 -2
  291. package/lib/colorjs.io/dist/color.global.min.js.map +0 -1
  292. package/lib/colorjs.io/dist/color.js +0 -5755
  293. package/lib/colorjs.io/dist/color.js.map +0 -1
  294. package/lib/colorjs.io/dist/color.legacy.cjs +0 -7399
  295. package/lib/colorjs.io/dist/color.legacy.cjs.map +0 -1
  296. package/lib/colorjs.io/dist/color.legacy.js +0 -7395
  297. package/lib/colorjs.io/dist/color.legacy.js.map +0 -1
  298. package/lib/colorjs.io/dist/color.legacy.min.cjs +0 -2
  299. package/lib/colorjs.io/dist/color.legacy.min.cjs.map +0 -1
  300. package/lib/colorjs.io/dist/color.legacy.min.js +0 -2
  301. package/lib/colorjs.io/dist/color.legacy.min.js.map +0 -1
  302. package/lib/colorjs.io/dist/color.min.cjs +0 -2
  303. package/lib/colorjs.io/dist/color.min.cjs.map +0 -1
  304. package/lib/colorjs.io/dist/color.min.js +0 -2
  305. package/lib/colorjs.io/dist/color.min.js.map +0 -1
  306. package/lib/colorjs.io/package.json +0 -113
  307. package/lib/colorjs.io/src/CATs.js +0 -131
  308. package/lib/colorjs.io/src/adapt.js +0 -62
  309. package/lib/colorjs.io/src/angles.js +0 -44
  310. package/lib/colorjs.io/src/chromaticity.js +0 -33
  311. package/lib/colorjs.io/src/clone.js +0 -7
  312. package/lib/colorjs.io/src/color.js +0 -201
  313. package/lib/colorjs.io/src/contrast/APCA.js +0 -102
  314. package/lib/colorjs.io/src/contrast/Lstar.js +0 -17
  315. package/lib/colorjs.io/src/contrast/Michelson.js +0 -22
  316. package/lib/colorjs.io/src/contrast/WCAG21.js +0 -20
  317. package/lib/colorjs.io/src/contrast/Weber.js +0 -27
  318. package/lib/colorjs.io/src/contrast/deltaPhi.js +0 -25
  319. package/lib/colorjs.io/src/contrast/index.js +0 -6
  320. package/lib/colorjs.io/src/contrast.js +0 -28
  321. package/lib/colorjs.io/src/defaults.js +0 -12
  322. package/lib/colorjs.io/src/deltaE/deltaE2000.js +0 -179
  323. package/lib/colorjs.io/src/deltaE/deltaE76.js +0 -7
  324. package/lib/colorjs.io/src/deltaE/deltaECMC.js +0 -114
  325. package/lib/colorjs.io/src/deltaE/deltaEHCT.js +0 -51
  326. package/lib/colorjs.io/src/deltaE/deltaEITP.js +0 -24
  327. package/lib/colorjs.io/src/deltaE/deltaEJz.js +0 -43
  328. package/lib/colorjs.io/src/deltaE/deltaEOK.js +0 -19
  329. package/lib/colorjs.io/src/deltaE/index.js +0 -27
  330. package/lib/colorjs.io/src/deltaE.js +0 -19
  331. package/lib/colorjs.io/src/display.js +0 -83
  332. package/lib/colorjs.io/src/distance.js +0 -21
  333. package/lib/colorjs.io/src/equals.js +0 -10
  334. package/lib/colorjs.io/src/get.js +0 -11
  335. package/lib/colorjs.io/src/getAll.js +0 -20
  336. package/lib/colorjs.io/src/getColor.js +0 -36
  337. package/lib/colorjs.io/src/hooks.js +0 -37
  338. package/lib/colorjs.io/src/inGamut.js +0 -25
  339. package/lib/colorjs.io/src/index-fn.js +0 -28
  340. package/lib/colorjs.io/src/index.js +0 -38
  341. package/lib/colorjs.io/src/interpolation.js +0 -222
  342. package/lib/colorjs.io/src/keywords.js +0 -158
  343. package/lib/colorjs.io/src/luminance.js +0 -27
  344. package/lib/colorjs.io/src/multiply-matrices.js +0 -44
  345. package/lib/colorjs.io/src/parse.js +0 -198
  346. package/lib/colorjs.io/src/rgbspace.js +0 -64
  347. package/lib/colorjs.io/src/serialize.js +0 -86
  348. package/lib/colorjs.io/src/set.js +0 -33
  349. package/lib/colorjs.io/src/setAll.js +0 -12
  350. package/lib/colorjs.io/src/space-accessors.js +0 -86
  351. package/lib/colorjs.io/src/space.js +0 -440
  352. package/lib/colorjs.io/src/spaces/a98rgb-linear.js +0 -28
  353. package/lib/colorjs.io/src/spaces/a98rgb.js +0 -11
  354. package/lib/colorjs.io/src/spaces/acescc.js +0 -76
  355. package/lib/colorjs.io/src/spaces/acescg.js +0 -54
  356. package/lib/colorjs.io/src/spaces/cam16.js +0 -362
  357. package/lib/colorjs.io/src/spaces/hct.js +0 -157
  358. package/lib/colorjs.io/src/spaces/hpluv.js +0 -130
  359. package/lib/colorjs.io/src/spaces/hsl.js +0 -91
  360. package/lib/colorjs.io/src/spaces/hsluv.js +0 -162
  361. package/lib/colorjs.io/src/spaces/hsv.js +0 -65
  362. package/lib/colorjs.io/src/spaces/hwb.js +0 -58
  363. package/lib/colorjs.io/src/spaces/ictcp.js +0 -133
  364. package/lib/colorjs.io/src/spaces/index-fn-hdr.js +0 -7
  365. package/lib/colorjs.io/src/spaces/index-fn.js +0 -29
  366. package/lib/colorjs.io/src/spaces/index.js +0 -8
  367. package/lib/colorjs.io/src/spaces/jzazbz.js +0 -118
  368. package/lib/colorjs.io/src/spaces/jzczhz.js +0 -53
  369. package/lib/colorjs.io/src/spaces/lab-d65.js +0 -74
  370. package/lib/colorjs.io/src/spaces/lab.js +0 -74
  371. package/lib/colorjs.io/src/spaces/lch.js +0 -67
  372. package/lib/colorjs.io/src/spaces/lchuv.js +0 -68
  373. package/lib/colorjs.io/src/spaces/luv.js +0 -85
  374. package/lib/colorjs.io/src/spaces/oklab.js +0 -74
  375. package/lib/colorjs.io/src/spaces/oklch.js +0 -68
  376. package/lib/colorjs.io/src/spaces/p3-linear.js +0 -22
  377. package/lib/colorjs.io/src/spaces/p3.js +0 -13
  378. package/lib/colorjs.io/src/spaces/prophoto-linear.js +0 -28
  379. package/lib/colorjs.io/src/spaces/prophoto.js +0 -19
  380. package/lib/colorjs.io/src/spaces/rec2020-linear.js +0 -27
  381. package/lib/colorjs.io/src/spaces/rec2020.js +0 -31
  382. package/lib/colorjs.io/src/spaces/rec2100-hlg.js +0 -49
  383. package/lib/colorjs.io/src/spaces/rec2100-pq.js +0 -37
  384. package/lib/colorjs.io/src/spaces/srgb-linear.js +0 -30
  385. package/lib/colorjs.io/src/spaces/srgb.js +0 -127
  386. package/lib/colorjs.io/src/spaces/xyz-abs-d65.js +0 -40
  387. package/lib/colorjs.io/src/spaces/xyz-d50.js +0 -12
  388. package/lib/colorjs.io/src/spaces/xyz-d65.js +0 -18
  389. package/lib/colorjs.io/src/to.js +0 -26
  390. package/lib/colorjs.io/src/toGamut.js +0 -310
  391. package/lib/colorjs.io/src/util.js +0 -254
  392. package/lib/colorjs.io/src/variations.js +0 -14
  393. package/lib/colorjs.io/types/index.d.cts +0 -4
  394. package/lib/colorjs.io/types/index.d.ts +0 -42
  395. package/lib/colorjs.io/types/src/CATs.d.ts +0 -13
  396. package/lib/colorjs.io/types/src/adapt.d.ts +0 -12
  397. package/lib/colorjs.io/types/src/angles.d.ts +0 -7
  398. package/lib/colorjs.io/types/src/chromaticity.d.ts +0 -7
  399. package/lib/colorjs.io/types/src/clone.d.ts +0 -3
  400. package/lib/colorjs.io/types/src/color.d.ts +0 -160
  401. package/lib/colorjs.io/types/src/contrast/APCA.d.ts +0 -5
  402. package/lib/colorjs.io/types/src/contrast/Lstar.d.ts +0 -5
  403. package/lib/colorjs.io/types/src/contrast/Michelson.d.ts +0 -5
  404. package/lib/colorjs.io/types/src/contrast/WCAG21.d.ts +0 -5
  405. package/lib/colorjs.io/types/src/contrast/Weber.d.ts +0 -5
  406. package/lib/colorjs.io/types/src/contrast/deltaPhi.d.ts +0 -5
  407. package/lib/colorjs.io/types/src/contrast/index.d.ts +0 -11
  408. package/lib/colorjs.io/types/src/contrast.d.ts +0 -12
  409. package/lib/colorjs.io/types/src/defaults.d.ts +0 -2
  410. package/lib/colorjs.io/types/src/deltaE/deltaE2000.d.ts +0 -11
  411. package/lib/colorjs.io/types/src/deltaE/deltaE76.d.ts +0 -5
  412. package/lib/colorjs.io/types/src/deltaE/deltaECMC.d.ts +0 -9
  413. package/lib/colorjs.io/types/src/deltaE/deltaEHCT.d.ts +0 -5
  414. package/lib/colorjs.io/types/src/deltaE/deltaEITP.d.ts +0 -5
  415. package/lib/colorjs.io/types/src/deltaE/deltaEJz.d.ts +0 -5
  416. package/lib/colorjs.io/types/src/deltaE/deltaEOK.d.ts +0 -5
  417. package/lib/colorjs.io/types/src/deltaE/index.d.ts +0 -14
  418. package/lib/colorjs.io/types/src/deltaE.d.ts +0 -12
  419. package/lib/colorjs.io/types/src/display.d.ts +0 -17
  420. package/lib/colorjs.io/types/src/distance.d.ts +0 -8
  421. package/lib/colorjs.io/types/src/equals.d.ts +0 -3
  422. package/lib/colorjs.io/types/src/get.d.ts +0 -4
  423. package/lib/colorjs.io/types/src/getAll.d.ts +0 -7
  424. package/lib/colorjs.io/types/src/getColor.d.ts +0 -4
  425. package/lib/colorjs.io/types/src/hooks.d.ts +0 -52
  426. package/lib/colorjs.io/types/src/inGamut.d.ts +0 -8
  427. package/lib/colorjs.io/types/src/index-fn.d.cts +0 -1
  428. package/lib/colorjs.io/types/src/index-fn.d.ts +0 -63
  429. package/lib/colorjs.io/types/src/index.d.ts +0 -125
  430. package/lib/colorjs.io/types/src/interpolation.d.ts +0 -77
  431. package/lib/colorjs.io/types/src/keywords.d.ts +0 -2
  432. package/lib/colorjs.io/types/src/luminance.d.ts +0 -10
  433. package/lib/colorjs.io/types/src/multiply-matrices.d.ts +0 -9
  434. package/lib/colorjs.io/types/src/parse.d.ts +0 -16
  435. package/lib/colorjs.io/types/src/rgbspace.d.ts +0 -10
  436. package/lib/colorjs.io/types/src/serialize.d.ts +0 -13
  437. package/lib/colorjs.io/types/src/set.d.ts +0 -18
  438. package/lib/colorjs.io/types/src/setAll.d.ts +0 -14
  439. package/lib/colorjs.io/types/src/space-accessors.d.ts +0 -1
  440. package/lib/colorjs.io/types/src/space-coord-accessors.d.ts +0 -69
  441. package/lib/colorjs.io/types/src/space.d.ts +0 -143
  442. package/lib/colorjs.io/types/src/spaces/a98rgb-linear.d.ts +0 -3
  443. package/lib/colorjs.io/types/src/spaces/a98rgb.d.ts +0 -3
  444. package/lib/colorjs.io/types/src/spaces/acescc.d.ts +0 -3
  445. package/lib/colorjs.io/types/src/spaces/acescg.d.ts +0 -3
  446. package/lib/colorjs.io/types/src/spaces/hpluv.d.ts +0 -3
  447. package/lib/colorjs.io/types/src/spaces/hsl.d.ts +0 -3
  448. package/lib/colorjs.io/types/src/spaces/hsluv.d.ts +0 -3
  449. package/lib/colorjs.io/types/src/spaces/hsv.d.ts +0 -3
  450. package/lib/colorjs.io/types/src/spaces/hwb.d.ts +0 -3
  451. package/lib/colorjs.io/types/src/spaces/ictcp.d.ts +0 -3
  452. package/lib/colorjs.io/types/src/spaces/index-fn-hdr.d.ts +0 -9
  453. package/lib/colorjs.io/types/src/spaces/index-fn.d.ts +0 -29
  454. package/lib/colorjs.io/types/src/spaces/index.d.ts +0 -4
  455. package/lib/colorjs.io/types/src/spaces/jzazbz.d.ts +0 -3
  456. package/lib/colorjs.io/types/src/spaces/jzczhz.d.ts +0 -3
  457. package/lib/colorjs.io/types/src/spaces/lab-d65.d.ts +0 -3
  458. package/lib/colorjs.io/types/src/spaces/lab.d.ts +0 -3
  459. package/lib/colorjs.io/types/src/spaces/lch.d.ts +0 -3
  460. package/lib/colorjs.io/types/src/spaces/lchuv.d.ts +0 -3
  461. package/lib/colorjs.io/types/src/spaces/luv.d.ts +0 -3
  462. package/lib/colorjs.io/types/src/spaces/oklab.d.ts +0 -3
  463. package/lib/colorjs.io/types/src/spaces/oklch.d.ts +0 -3
  464. package/lib/colorjs.io/types/src/spaces/p3-linear.d.ts +0 -3
  465. package/lib/colorjs.io/types/src/spaces/p3.d.ts +0 -3
  466. package/lib/colorjs.io/types/src/spaces/prophoto-linear.d.ts +0 -3
  467. package/lib/colorjs.io/types/src/spaces/prophoto.d.ts +0 -3
  468. package/lib/colorjs.io/types/src/spaces/rec2020-linear.d.ts +0 -3
  469. package/lib/colorjs.io/types/src/spaces/rec2020.d.ts +0 -3
  470. package/lib/colorjs.io/types/src/spaces/rec2100-hlg.d.ts +0 -3
  471. package/lib/colorjs.io/types/src/spaces/rec2100-pq.d.ts +0 -3
  472. package/lib/colorjs.io/types/src/spaces/srgb-linear.d.ts +0 -3
  473. package/lib/colorjs.io/types/src/spaces/srgb.d.ts +0 -3
  474. package/lib/colorjs.io/types/src/spaces/xyz-abs-d65.d.ts +0 -3
  475. package/lib/colorjs.io/types/src/spaces/xyz-d50.d.ts +0 -3
  476. package/lib/colorjs.io/types/src/spaces/xyz-d65.d.ts +0 -3
  477. package/lib/colorjs.io/types/src/to.d.ts +0 -14
  478. package/lib/colorjs.io/types/src/toGamut.d.ts +0 -45
  479. package/lib/colorjs.io/types/src/util.d.ts +0 -58
  480. package/lib/colorjs.io/types/src/variations.d.ts +0 -5
  481. package/src/color-gamut/README.md +0 -75
  482. package/src/color-gamut/color-gamut.css +0 -32
  483. package/src/color-gamut/color-gamut.js +0 -172
  484. package/src/common/color.js +0 -12
package/debug.html ADDED
@@ -0,0 +1,447 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <!-- <link rel="stylesheet" href="./src/color-chart/color-chart-global.css"> -->
8
+ <title>Document</title>
9
+ <style>
10
+ :root {
11
+ --test: red;
12
+ }
13
+
14
+ html,
15
+ body {
16
+ margin: 0;
17
+ min-height: 100vh;
18
+ }
19
+ </style>
20
+ </head>
21
+
22
+ <!-- <body style="display: grid; place-items: center; align-content: center; margin: 2rem"> -->
23
+
24
+ <body style="display: grid; align-items: center; align-content: center; margin: 2rem">
25
+
26
+ <html-demo>
27
+ <channel-slider space="lch" color="lch(91% 14 50)" channel="c"></channel-slider>
28
+ </html-demo>
29
+
30
+ <!-- <html-demo>
31
+ <label for="el">Element:</label>
32
+ <color-chart y="oklch.l" id="el">
33
+ <color-scale
34
+ colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
35
+ </color-chart>
36
+
37
+ <style>
38
+ #el:focus {
39
+ outline: 2px solid salmon;
40
+ outline-offset: 2px;
41
+ }
42
+ </style>
43
+ </html-demo> -->
44
+ <!-- <html-demo>
45
+ <space-picker id="picker" spaces="oklch, p3, srgb" value="oklch"></space-picker>
46
+
47
+ <script>
48
+ picker.labelFor = space => space.id;
49
+ </script>
50
+ </html-demo> -->
51
+ <!-- <html-demo>
52
+ <channel-slider space="jzazbz" color="oklch(50% 50% 180)"></channel-slider>
53
+ </html-demo> -->
54
+ <!-- <html-demo>
55
+ <color-slider space="jzazbz" color="oklch(50% 50% 180)"></color-slider>
56
+ </html-demo> -->
57
+ <!-- <html-demo>
58
+ <color-swatch>
59
+ oklch(65% 0.15 210)
60
+ </color-swatch>
61
+ </html-demo>
62
+ <html-demo>
63
+ <color-swatch label="My color">
64
+ oklch(65% 0.15 210)
65
+ </color-swatch>
66
+ </html-demo>
67
+ <html-demo>
68
+ <color-swatch value="oklch(65% 0.15 210)"></color-swatch>
69
+ </html-demo>
70
+ <html-demo>
71
+ <color-swatch value="oklch(65% 0.15 210)">Color Label</color-swatch>
72
+ </html-demo> -->
73
+ <!-- <html-demo>
74
+ <color-picker space="oklch" color="oklch(60% 30% 180)"></color-picker>
75
+ </html-demo> -->
76
+ <!-- <html-demo>
77
+ <color-picker></color-picker>
78
+ </html-demo> -->
79
+ <!-- <html-demo>
80
+ <color-scale editable space="oklch" colors="Gray 50: #f9fafb,
81
+ Gray 100: #f3f4f6,
82
+ Gray 400: #9ca3af,
83
+ Gray 500: #6b7280,
84
+ Gray 850: #1a202c"></color-scale>
85
+
86
+ <style>
87
+ color-scale::part(delete-button) {
88
+ border: none;
89
+ border-radius: .2em;
90
+ }
91
+ </style>
92
+ </html-demo> -->
93
+ <!-- <html-demo>
94
+ <color-scale editable="editable" space="oklch"
95
+ colors="Peach: #F6D6D6, Yellow: #F6F7C4, Mint: #A1EEBD, Blue: #7BD3EA"></color-scale>
96
+ </html-demo> -->
97
+ <!-- <html-demo>
98
+ <color-scale editable="color" colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
99
+ </html-demo>
100
+ <html-demo>
101
+ <label>
102
+ <input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked" />Editable
103
+ </label>
104
+ <color-scale space="oklch" colors="Peach: #F6D6D6, Yellow: #F6F7C4, Mint: #A1EEBD, Blue: #7BD3EA"></color-scale>
105
+ </html-demo> -->
106
+ <!-- <html-demo>
107
+ <label>
108
+ <input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked" />Editable
109
+ </label>
110
+ <color-scale space="oklch" colors="
111
+ Gray 50: #f9fafb,
112
+ Gray 100: #f3f4f6,
113
+ Gray 400: #9ca3af,
114
+ Gray 500: #6b7280,
115
+ Gray 850: #1a202c
116
+ "></color-scale>
117
+ </html-demo> -->
118
+ <!-- <color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
119
+ <color-scale class="js"
120
+ colors="10: oklch(22.74% 0.05346 127.56), 20: oklch(31.363% 0.07637 127.56), 30: oklch(38.586% 0.09929 127.56), 40: oklch(45.71% 0.1222 127.56), 50: oklch(55.583% 0.14511 127.56), 60: oklch(65.706% 0.16802 127.56), 70: oklch(74.234% 0.14016 127.56), 80: oklch(82.712% 0.09698 127.56), 90: oklch(91.289% 0.04521 127.56), 95: oklch(95.028% 0.0168 127.56), 05: oklch(17.028% 0.04201 127.56)"
121
+ info="L: oklch.l, C: oklch.c, H: oklch.h" style="--color-count: 11;"></color-scale>
122
+ <color-scale class="wa"
123
+ colors="10 (WA) / 10: oklch(22.96% 0.05732 124.46), 20 (WA) / 20: oklch(31.023% 0.07932 126.35), 30 (WA) / 30: oklch(38.591% 0.0999 127.27), 40 (WA) / 40: oklch(45.187% 0.11752 127.61), 50 (WA) / 50: oklch(54.919% 0.144 128.2), 60 (WA) / 60: oklch(65.706% 0.16802 127.56), 70 (WA) / 70: oklch(74.318% 0.14579 124.41), 80 (WA) / 80: oklch(82.976% 0.10008 122.07), 90 (WA) / 90: oklch(91.96% 0.04779 121.53), 95 (WA) / 95: oklch(95.877% 0.02304 120.19), 05 (WA) / 05: oklch(17.406% 0.04251 122.61)"
124
+ info="L: oklch.l, C: oklch.c, H: oklch.h" style="--color-count: 11;"></color-scale>
125
+ </color-chart> -->
126
+ <!-- <color-chart y="oklch.l">
127
+ <color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"
128
+ info="L: oklch.l, C: oklch.c, H: oklch.h"></color-scale>
129
+ </color-chart> -->
130
+ <!-- <color-chart y="lab.b" info="oklch.l, oklch.c, oklch.h">
131
+ <color-scale
132
+ colors="10: #fff0f7, 20: #ffd6e8, 30: #ffafd2, 40: #ff7eb6, 50: #ee5396, 60: #d02670, 70: #9f1853, 80: #740937, 90: #510224, 100: #2a0a18"></color-scale>
133
+ </color-chart> -->
134
+ <!-- <color-chart y="oklch.h" info="L: oklch.l, C: oklch.c, H: oklch.h">
135
+ <color-scale
136
+ colors="0: #e7f5ff, 1: #d0ebff, 2: #a5d8ff, 3: #74c0fc, 4: #4dabf7, 5: #339af0, 6: #228be6, 7: #1c7ed6, 8: #1971c2, 9: #1864ab, 10: #145591, 11: #114678, 12: #0d375e"></color-scale><color-scale
137
+ colors="0: #ebfbee, 1: #d3f9d8, 2: #b2f2bb, 3: #8ce99a, 4: #69db7c, 5: #51cf66, 6: #40c057, 7: #37b24d, 8: #2f9e44, 9: #2b8a3e, 10: #237032, 11: #1b5727, 12: #133d1b"></color-scale>
138
+ </color-chart> -->
139
+ <!--<color-chart y="oklch.c" ymin="0.1" ymax="0.2" info="oklch.c">
140
+ <color-scale
141
+ colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
142
+ <color-scale
143
+ colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
144
+ <color-scale
145
+ colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
146
+ </color-chart>-->
147
+
148
+ <!--<color-chart y="oklch.h" info="L: oklch.l, C: oklch.c, H: oklch.h">
149
+ <color-scale class="js" colors="10: oklch(24.407% 0.05594 29.731), 20: oklch(33.308% 0.07991 31.508), 30: oklch(40.809% 0.10388 33.285), 40: oklch(48.21% 0.12785 35.062), 50: oklch(58.362% 0.15183 36.839), 60: oklch(68.763% 0.1758 38.616), 70: oklch(76.854% 0.14664 39.468), 80: oklch(84.895% 0.10147 40.321), 90: oklch(93.036% 0.04731 41.174), 95: oklch(96.556% 0.01758 42.027), 05: oklch(18.556% 0.04395 29.731)"></color-scale>
150
+ <color-scale class="wa" colors="10 (WA) / 10: oklch(24.025% 0.06086 31.256), 20 (WA) / 20: oklch(32.951% 0.09091 32.447), 30 (WA) / 30: oklch(40.519% 0.11729 32.521), 40 (WA) / 40: oklch(48.059% 0.14232 32.918), 50 (WA) / 50: oklch(58.004% 0.15904 35.567), 60 (WA) / 60: oklch(68.763% 0.1758 38.616), 70 (WA) / 70: oklch(76.593% 0.14912 46.395), 80 (WA) / 80: oklch(84.512% 0.09722 53.3), 90 (WA) / 90: oklch(92.492% 0.0445 54.008), 95 (WA) / 95: oklch(96.208% 0.02193 54.343), 05 (WA) / 05: oklch(18.569% 0.04081 32.111)"></color-scale>
151
+ </color-chart>-->
152
+
153
+ <!-- <html-demo>
154
+ <space-picker></space-picker>
155
+ </html-demo>
156
+
157
+ <html-demo>
158
+ <space-picker value="oklab"></space-picker>
159
+ </html-demo>
160
+
161
+ <html-demo>
162
+ <space-picker spaces="oklch, p3, srgb"></space-picker>
163
+ </html-demo>
164
+
165
+ <html-demo>
166
+ <space-picker spaces="foo"></space-picker>
167
+ </html-demo>
168
+
169
+ <html-demo>
170
+ <space-picker spaces="oklch, p3, srgb" value="p3"></space-picker>
171
+ </html-demo>
172
+
173
+ <html-demo>
174
+ <space-picker spaces="bar, oklch, p3, srgb, foo" value="baz"></space-picker>
175
+ </html-demo>
176
+
177
+ <html-demo>
178
+ <space-picker onspacechange="this.nextElementSibling.textContent = this.value"></space-picker>
179
+ <output></output>
180
+ </html-demo>
181
+
182
+ <html-demo>
183
+ <space-picker id="space_picker" spaces="oklch, p3, srgb" value="p3"></space-picker>
184
+
185
+ <script type="module">
186
+ space_picker.groupBy = (space) => {
187
+ let isPolar = space.coords.h?.type === "angle";
188
+ return isPolar ? "Polar" : "Rectangular";
189
+ };
190
+ </script>
191
+ </html-demo> -->
192
+
193
+ <!-- <color-scale
194
+ colors="10: oklch(22.74% 0.05346 127.56), 20: oklch(31.363% 0.07637 127.56), 30: oklch(38.586% 0.09929 127.56), 40: oklch(45.71% 0.1222 127.56), 50: oklch(55.583% 0.14511 127.56), 60: oklch(65.706% 0.16802 127.56), 70: oklch(74.234% 0.14016 127.56), 80: oklch(82.712% 0.09698 127.56), 90: oklch(91.289% 0.04521 127.56), 95: oklch(95.028% 0.0168 127.56), 05: oklch(17.028% 0.04201 127.56)"></color-scale> -->
195
+
196
+ <!-- <color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
197
+ <color-scale
198
+ colors="opencolor 0 / 0: #f4fce3, opencolor 1 / 11.11111111111111: #e9fac8, opencolor 2 / 22.22222222222222: #d8f5a2, opencolor 3 / 33.33333333333333: #c0eb75, opencolor 4 / 44.44444444444444: #a9e34b, opencolor 5 / 55.55555555555556: #94d82d, opencolor 6 / 66.66666666666666: #82c91e, opencolor 7 / 77.77777777777777: #74b816, opencolor 8 / 88.88888888888889: #66a80f, opencolor 9 / 100: #5c940d">
199
+ </color-scale>
200
+ </color-chart> -->
201
+ <!-- <label>
202
+ Space:
203
+ <select onchange="this.parentNode.nextElementSibling.nextElementSibling.space = this.value">
204
+ <option value="cam16-jmh">CAM16-JMh</option>
205
+ <option value="hct">HCT</option>
206
+ <option value="hpluv">HPLuv</option>
207
+ <option value="hsl">HSL</option>
208
+ <option value="hsluv">HSLuv</option>
209
+ <option value="hsv">HSV</option>
210
+ <option value="hwb">HWB</option>
211
+ <option value="lch">LCH</option>
212
+ <option value="lchuv">LChuv</option>
213
+ <option value="oklch" selected>Oklch</option>
214
+ <option value="oklrch">Oklrch</option>
215
+ <option value="okhsl">Okhsl</option>
216
+ <option value="okhsv">Okhsv</option>
217
+ </select>
218
+ </label>
219
+ <label>Coord:
220
+ <select onchange="this.parentNode.nextElementSibling.y = this.value">
221
+ <option selected>oklch.l</option>
222
+ <option>oklch.c</option>
223
+ <option>oklch.h</option>
224
+ </select>
225
+ </label>
226
+ <color-chart y="oklch.l" info="L: oklch.l, C: oklch.c, H: oklch.h">
227
+ <color-scale
228
+ colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, 950: #450a0a"
229
+ info="oklch.l"></color-scale>
230
+ <color-scale
231
+ colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
232
+ <color-scale
233
+ colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
234
+ </color-chart> -->
235
+ <!-- <color-swatch id="dynamic_static">oklch(70% 0.25 138)</color-swatch>
236
+ <button onclick='dynamic_static.color = "oklch(60% 0.15 0)"'>Change color</button> -->
237
+ <!-- <color-picker id="dynamic_static" space="oklch"></color-picker>
238
+ <button onclick='dynamic_static.color = "gold"'>Change color</button> -->
239
+
240
+ <!--<html-demo>
241
+ <color-swatch info="deltaE2000, WCAG21 contrast" vs="gold" size="large">
242
+ oklch(65% 0.15 210)
243
+ </color-swatch>
244
+ </html-demo>-->
245
+ <!-- <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="gold" size="large">
246
+ oklch(65% 0.15 210)
247
+ </color-swatch> -->
248
+ <!-- <html-demo>
249
+ <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="gold" size="large">
250
+ oklch(65% 0.15 210)
251
+ </color-swatch>
252
+ </html-demo>
253
+
254
+ <html-demo>
255
+ <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE.2000, contrast.Weber" vs="gold" size="large">
256
+ oklch(65% 0.15 210)
257
+ </color-swatch>
258
+ </html-demo>
259
+
260
+ <html-demo>
261
+ <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE.2000, foo" vs="blue">
262
+ oklch(65% 0.15 210)
263
+ </color-swatch>
264
+ </html-demo> -->
265
+ <!-- <color-swatch info="L: oklch.l, C: oklch.c, H: oklch.h" vs="oklch(65% 0.15 210)" size="large">
266
+ oklch(65% 0.15 210)
267
+ </color-swatch> -->
268
+ <!-- <color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h, ΔE: 2000" vs="oklch(55% 0.1 210)" size="large">
269
+ oklch(55% 0.15 230)
270
+ </color-swatch>
271
+ <color-swatch data="L: oklch.l, C: oklch.c, H: oklch.h" vs="blue">oklch(65% 0.15 210)</color-swatch> -->
272
+ <!-- <color-swatch coords="L: l, C: c, H: h">oklch(80% 50% 70)</color-swatch> -->
273
+ <!-- <color-swatch size="large">green</color-swatch> -->
274
+ <!-- <div id="future_swatch_container"></div>
275
+ <script>
276
+ let swatch = document.createElement("color-swatch");
277
+ swatch.color = "oklch(65% 0.15 210)";
278
+ swatch.setAttribute("size", "large");
279
+ swatch.textContent = "Turquoise";
280
+ swatch.coords = "L: oklch.l, C: oklch.c, H: oklch.h";
281
+ future_swatch_container.append(swatch);
282
+ </script> -->
283
+
284
+ <!-- <color-scale colors="#e3fafc, #0b7285" steps="4" space="oklch" info="L: oklch.l, C: oklch.c" deltas></color-scale> -->
285
+ <!-- <color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
286
+ colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale> -->
287
+ <!-- <color-scale colors="rgb(255 0 0), rgb(0 0 255)" steps="4" space="oklch"></color-scale> -->
288
+
289
+ <!-- <color-scale
290
+ colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"
291
+ info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
292
+ <color-scale
293
+ colors="50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a"
294
+ info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
295
+ <color-scale
296
+ colors="50: #fff7ed, 100: #ffedd5, 200: #fed7aa, 300: #fdba74, 400: #fb923c, 500: #f97316, 600: #ea580c, 700: #c2410c, 800: #9a3412, 900: #7c2d12, 950: #431407"
297
+ info="L: lch.l, C: lch.c, H: lch.h"></color-scale>
298
+ <color-scale
299
+ colors="50: #fefce8, 100: #fef9c3, 200: #fef08a, 300: #fde047, 400: #facc15, 500: #eab308, 600: #ca8a04, 700: #a16207, 800: #854d0e, 900: #713f12, 950: #422006"
300
+ info="L: lch.l, C: lch.c, H: lch.h"></color-scale> -->
301
+ <!-- <color-scale space="oklch" colors="
302
+ #f8f9fa,
303
+ #f1f3f5,
304
+ #e9ecef
305
+ " info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="previous"></color-scale>
306
+
307
+
308
+ <color-scale space="oklch" colors="
309
+ #f8f9fa,
310
+ #f1f3f5,
311
+ #e9ecef
312
+ " info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="next"></color-scale>
313
+
314
+ <color-scale space="oklch" colors="
315
+ #f8f9fa,
316
+ #f1f3f5,
317
+ #e9ecef
318
+ " info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs="#f8f9fa"></color-scale> -->
319
+
320
+ <!-- <color-scale space="oklch" colors="
321
+ #f8f9fa,
322
+ #f1f3f5,
323
+ #e9ecef,
324
+ #dee2e6,
325
+ #ced4da,
326
+ #adb5bd,
327
+ #868e96,
328
+ #495057,
329
+ #343a40,
330
+ #212529
331
+ " info="L: oklch.l, C: oklch.c, H: oklch.h, deltaE2000" vs></color-scale> -->
332
+
333
+ <!-- <color-inline value="oklch(80% 50% 70)"></color-inline> -->
334
+ <!-- <button onclick="this.nextElementSibling.value = Math.random()">Random color</button>
335
+ <color-slider space="oklch" stops="gold, darkcyan, indigo"
336
+ oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider> -->
337
+ <!-- <button onclick="this.nextElementSibling.textContent = 'gold'">Random color</button>
338
+ <color-swatch>red</color-swatch> -->
339
+
340
+ <!-- <color-swatch size="large" oncolorchange="this.nextElementSibling.textContent = this.color">
341
+ <input value="oklch(90% .8 250)" />
342
+ </color-swatch>
343
+ <output></output> -->
344
+
345
+ <!--<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
346
+ <color-scale class="js"></color-scale>
347
+ <color-scale class="wa"></color-scale>
348
+ </color-chart>
349
+ <color-picker space="oklch" id="color_picker"></color-picker>
350
+
351
+ <script type="module">
352
+ // import Color from "https://colorjs.io/dist/color.js";
353
+ for (let colorScale of document.querySelectorAll("color-chart color-scale.js")) {
354
+ colorScale.colors = "10: oklch(23.363% 0.01102 274.75), 20: oklch(32.076% 0.01602 274.75), 30: oklch(39.389% 0.02119 274.75), 40: oklch(46.601% 0.02665 274.75), 50: oklch(56.564% 0.03294 274.75), 60: oklch(66.951% 0.02512 274.75), 70: oklch(75.289% 0.01834 274.75), 80: oklch(83.576% 0.0119 274.75), 90: oklch(91.963% 0.00568 274.75), 95: oklch(95.607% 0.00264 274.75), 05: oklch(17.607% 0.00857 274.75)";
355
+ }
356
+ // let color = new Color("oklch(56.564% 0.03294 274.75)");
357
+ let color = "oklch(56.564% 0.03294 274.75)";
358
+ color_picker.color = color;
359
+ </script>-->
360
+
361
+ <!-- <html-demo>
362
+ <color-picker id="custom-space-select" space="oklch" color="oklch(60% 30% 180)">
363
+ <select slot="space-picker" size="3" class="horizontal" onchange="this.parentElement.space = this.value">
364
+ <option value="oklch" selected>OKLCh</option>
365
+ <option value="hwb">HWB</option>
366
+ <option value="hpluv">HPLuv</option>
367
+ </select>
368
+ </color-picker>
369
+
370
+ <style>
371
+ select.horizontal {
372
+ writing-mode: tb;
373
+ field-sizing: content;
374
+
375
+ option {
376
+ writing-mode: horizontal-tb;
377
+ padding: .5em;
378
+ }
379
+ }
380
+ </style>
381
+ </html-demo> -->
382
+
383
+ <!--<html-demo>
384
+ <space-picker onspacechange="console.log(this.selectedSpace)"></space-picker>
385
+ </html-demo>-->
386
+
387
+ <!-- <html-demo>
388
+ <channel-picker></channel-picker>
389
+ </html-demo>
390
+
391
+ <html-demo>
392
+ <channel-picker value="foo.bar"></channel-picker>
393
+ </html-demo>
394
+
395
+ <html-demo>
396
+ <channel-picker value="oklch.bar"></channel-picker>
397
+ </html-demo>
398
+
399
+ <html-demo>
400
+ <channel-picker value="foo"></channel-picker>
401
+ </html-demo> -->
402
+
403
+ <!-- <html-demo>
404
+ <channel-picker value="p3.b"></channel-picker>
405
+ </html-demo>
406
+
407
+ <html-demo>
408
+ <channel-picker id="picker" value="hsl.h"></channel-picker>
409
+
410
+ <style>
411
+ #picker::part(space_picker) {
412
+ display: none;
413
+ }
414
+ </style>
415
+ </html-demo> -->
416
+
417
+ <!-- <html-demo>
418
+ <label>Coord:
419
+ <channel-picker onvaluechange="this.parentNode.nextElementSibling.y = this.value"></channel-picker>
420
+ </label>
421
+ <color-chart>
422
+ <color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
423
+ <color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
424
+ <color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
425
+ </color-chart>
426
+ </html-demo> -->
427
+
428
+ <!--<html-demo>
429
+ <channel-picker spaces="p3, oklch, hsl"></channel-picker>
430
+ </html-demo>-->
431
+
432
+
433
+ <script src="./index.js" type="module"></script>
434
+ <script src="./src/color-picker/color-picker.js" type="module"></script>
435
+ <!-- <script src="./src/color-slider/color-slider.js" type="module"></script> -->
436
+ <script src="./src/color-swatch/color-swatch.js" type="module"></script>
437
+ <script src="./src/color-scale/color-scale.js" type="module"></script>
438
+ <script src="./src/color-chart/color-chart.js" type="module"></script>
439
+ <script src="./src/space-picker/space-picker.js" type="module"></script>
440
+ <script src="./src/channel-picker/channel-picker.js" type="module"></script>
441
+ <!-- <script src="./src/gamut-badge/gamut-badge.js" type="module"></script>-->
442
+ <!-- <script src="./src/color-inline/color-inline.js" type="module"></script> -->
443
+ <script src="https://nudeui.com/elements/html-demo/html-demo.js" type="module"></script>
444
+
445
+ </body>
446
+
447
+ </html>
package/index.js CHANGED
@@ -1,6 +1,10 @@
1
1
  export { default as ColorPicker } from "./src/color-picker/color-picker.js";
2
+ export { default as ColorScale } from "./src/color-scale/color-scale.js";
3
+ export { default as ColorChart } from "./src/color-chart/color-chart.js";
2
4
  export { default as ColorSwatch } from "./src/color-swatch/color-swatch.js";
3
5
  export { default as ColorInline } from "./src/color-inline/color-inline.js";
4
6
  export { default as ChannelSlider } from "./src/channel-slider/channel-slider.js";
5
7
  export { default as ColorSlider } from "./src/color-slider/color-slider.js";
6
- export { default as ColorGamut } from "./src/color-gamut/color-gamut.js";
8
+ export { default as GamutBadge } from "./src/gamut-badge/gamut-badge.js";
9
+ export { default as ChannelPicker } from "./src/channel-picker/channel-picker.js";
10
+ export { default as SpacePicker } from "./src/space-picker/space-picker.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "color-elements",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "A set of web components for working with color. A Color.js project.",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -41,6 +41,7 @@
41
41
  "eslint": "latest",
42
42
  "globals": "latest",
43
43
  "markdown-it-attrs": "^4.1.6",
44
+ "markdown-it-anchor": "^8",
44
45
  "npm-run-all": "^4.1.5",
45
46
  "release-it": "^17.2.0"
46
47
  }
package/src/channel-picker/README.md ADDED
@@ -0,0 +1,103 @@
1
+ # `<channel-picker>`
2
+
3
+ ## Usage
4
+
5
+ ### Basic usage
6
+
7
+ ```html
8
+ <channel-picker value="oklab.a"></channel-picker>
9
+ ```
10
+
11
+ If no color channel is provided (via the `value` attribute/property),
12
+ the default `oklch.l` will be used:
13
+
14
+ ```html
15
+ <channel-picker></channel-picker>
16
+ ```
17
+
18
+ You can hide the `color-space` part with CSS to show only the coordinates of the specified space:
19
+
20
+ ```html
21
+ <channel-picker id="picker" value="hsl.h"></channel-picker>
22
+
23
+ <style>
24
+ #picker::part(color-space) {
25
+ display: none;
26
+ }
27
+ </style>
28
+ ```
29
+
30
+ ### Events
31
+
32
+ You can listen to the `valuechange` event to get the current value (the `value` property). When a new color space is selected,
33
+ the channel will be either preserved (if it is in the new space) or reset to the first available one:
34
+
35
+ ```html
36
+ <channel-picker onvaluechange="this.nextElementSibling.textContent = this.value"></channel-picker>
37
+ <output></output>
38
+ ```
39
+
40
+ ### Dynamic
41
+
42
+ All properties are reactive and can be set programmatically:
43
+
44
+ ```html
45
+ <button onclick="this.nextElementSibling.value = 'p3.b'">Switch to P3 Blue</button>
46
+ <channel-picker></channel-picker>
47
+ ```
48
+
49
+ `<channel-picker>` plays nicely with other color elements, like [`<channel-slider>`](../channel-slider):
50
+
51
+ ```html
52
+ <channel-picker id="channel_picker" value="oklch.c"></channel-picker>
53
+ <channel-slider id="channel_slider" color="oklch(50% 50% 180)"></channel-slider>
54
+
55
+ <style>
56
+ #channel_picker::part(color-space) {
57
+ display: none;
58
+ }
59
+ </style>
60
+
61
+ <script>
62
+ function updateSlider() {
63
+ let [space, channel] = channel_picker.value.split(".");
64
+ channel_slider.space = space;
65
+ channel_slider.channel = channel;
66
+ }
67
+
68
+ channel_picker.onvaluechange = updateSlider;
69
+ </script>
70
+ ```
71
+
72
+ ## Reference
73
+
74
+ ### Attributes & Properties
75
+
76
+ | Attribute | Property | Property type | Default value | Description |
77
+ |-----------|----------|---------------|---------------|----------------------------------|
78
+ | `value` | `value` | `string` | `oklch.l` | The current value of the picker. |
79
+
80
+ ### Getters
81
+
82
+ These properties are read-only.
83
+
84
+ | Property | Type | Description |
85
+ |----------|------|-------------|
86
+ | `selectedSpace` | `ColorSpace` | Color space object corresponding to the space picker current value. |
87
+ | `selectedChannel` | `object` | The current channel metadata.|
88
+
89
+ ### Events
90
+
91
+ | Name | Description |
92
+ |-----------------|--------------------------------------------------------------------------------|
93
+ | `input` | Fired when the color space or channel changes due to user action. |
94
+ | `change` | Fired when the color space or channel changes due to user action. |
95
+ | `valuechange` | Fired when the value changes for any reason, and once during initialization. |
96
+
97
+ ### Parts
98
+
99
+ | Name | Description |
100
+ |----------------|------------------------------------------------------|
101
+ | `color-space` | The internal [`<space-picker>`](../space-picker/) element. |
102
+ | `color-space-base` | The internal `<select>` element of [`<space-picker>`](../space-picker/). |
103
+ | `color-channel-base` | The internal `<select>` element. |
package/src/channel-picker/channel-picker.css ADDED
@@ -0,0 +1,31 @@
1
+ :host {
2
+ --border-width: 1px;
3
+ --border-color: rgb(0 0 0 / .2);
4
+ --border-radius: .2em;
5
+
6
+ padding: .3em .5em;
7
+
8
+ border: var(--border-width) solid var(--border-color);
9
+ border-radius: var(--border-radius);
10
+ }
11
+
12
+ #picker {
13
+ font: inherit;
14
+ color: inherit;
15
+ background: inherit;
16
+ border: none;
17
+ field-sizing: content;
18
+ cursor: pointer;
19
+
20
+ &:focus:not(:focus-visible) {
21
+ outline: none;
22
+ }
23
+ }
24
+
25
+ #space_picker {
26
+ padding: initial;
27
+ padding-inline-end: .4em;
28
+ border-radius: 0;
29
+ border: none;
30
+ border-inline-end: var(--border-width) solid var(--border-color);
31
+ }