kemet-ui 1.4.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (946) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +2940 -2397
  3. package/dist/.storybook/decorators.d.ts +2 -0
  4. package/dist/.storybook/decorators.js +28 -0
  5. package/dist/.storybook/decorators.js.map +1 -0
  6. package/dist/components/kemet-accordion/kemet-accordion-panel.d.ts +51 -0
  7. package/dist/components/kemet-accordion/kemet-accordion-panel.js +94 -134
  8. package/dist/components/kemet-accordion/kemet-accordion-panel.js.map +1 -0
  9. package/dist/components/kemet-accordion/kemet-accordion.d.ts +37 -0
  10. package/dist/components/kemet-accordion/kemet-accordion.js +113 -129
  11. package/dist/components/kemet-accordion/kemet-accordion.js.map +1 -0
  12. package/dist/components/kemet-accordion/stories.d.ts +10 -0
  13. package/dist/components/kemet-accordion/stories.js +44 -0
  14. package/dist/components/kemet-accordion/stories.js.map +1 -0
  15. package/dist/components/kemet-accordion/styles.d.ts +2 -0
  16. package/dist/components/kemet-accordion/styles.js +42 -0
  17. package/dist/components/kemet-accordion/styles.js.map +1 -0
  18. package/dist/components/kemet-accordion/types.d.ts +9 -0
  19. package/dist/components/kemet-accordion/types.js +2 -0
  20. package/dist/components/kemet-accordion/types.js.map +1 -0
  21. package/dist/components/kemet-alert/docs/stories.d.ts +9 -0
  22. package/dist/components/kemet-alert/docs/stories.js +77 -0
  23. package/dist/components/kemet-alert/docs/stories.js.map +1 -0
  24. package/dist/components/kemet-alert/kemet-alert.d.ts +52 -0
  25. package/dist/components/kemet-alert/kemet-alert.js +67 -65
  26. package/dist/components/kemet-alert/kemet-alert.js.map +1 -0
  27. package/dist/components/kemet-alert/stories.d.ts +9 -0
  28. package/dist/components/kemet-alert/stories.js +77 -0
  29. package/dist/components/kemet-alert/stories.js.map +1 -0
  30. package/dist/components/kemet-alert/styles.d.ts +1 -0
  31. package/dist/components/kemet-alert/styles.js +4 -4
  32. package/dist/components/kemet-alert/styles.js.map +1 -0
  33. package/dist/components/kemet-alert/types.d.ts +10 -0
  34. package/dist/components/kemet-alert/types.js +2 -0
  35. package/dist/components/kemet-alert/types.js.map +1 -0
  36. package/dist/components/kemet-avatar/docs/stories.d.ts +10 -0
  37. package/dist/components/kemet-avatar/docs/stories.js +85 -0
  38. package/dist/components/kemet-avatar/docs/stories.js.map +1 -0
  39. package/dist/components/kemet-avatar/kemet-avatar.d.ts +43 -0
  40. package/dist/components/kemet-avatar/kemet-avatar.js +48 -88
  41. package/dist/components/kemet-avatar/kemet-avatar.js.map +1 -0
  42. package/dist/components/kemet-avatar/kemet-avatars.d.ts +20 -0
  43. package/dist/components/kemet-avatar/kemet-avatars.js +15 -31
  44. package/dist/components/kemet-avatar/kemet-avatars.js.map +1 -0
  45. package/dist/components/kemet-avatar/stories.d.ts +10 -0
  46. package/dist/components/kemet-avatar/stories.js +85 -0
  47. package/dist/components/kemet-avatar/stories.js.map +1 -0
  48. package/dist/components/kemet-avatar/styles.d.ts +2 -0
  49. package/dist/components/kemet-avatar/styles.js +58 -0
  50. package/dist/components/kemet-avatar/styles.js.map +1 -0
  51. package/dist/components/kemet-avatar/types.d.ts +8 -0
  52. package/dist/components/kemet-avatar/types.js +2 -0
  53. package/dist/components/kemet-avatar/types.js.map +1 -0
  54. package/dist/components/kemet-badge/docs/stories.d.ts +9 -0
  55. package/dist/components/kemet-badge/docs/stories.js +40 -0
  56. package/dist/components/kemet-badge/docs/stories.js.map +1 -0
  57. package/dist/components/kemet-badge/kemet-badge.d.ts +30 -0
  58. package/dist/components/kemet-badge/kemet-badge.js +38 -89
  59. package/dist/components/kemet-badge/kemet-badge.js.map +1 -0
  60. package/dist/components/kemet-badge/styles.d.ts +1 -0
  61. package/dist/components/kemet-badge/styles.js +40 -0
  62. package/dist/components/kemet-badge/styles.js.map +1 -0
  63. package/dist/components/kemet-badge/types.d.ts +6 -0
  64. package/dist/components/kemet-badge/types.js +2 -0
  65. package/dist/components/kemet-badge/types.js.map +1 -0
  66. package/dist/components/kemet-button/docs/stories.d.ts +9 -0
  67. package/dist/components/kemet-button/docs/stories.js +51 -0
  68. package/dist/components/kemet-button/docs/stories.js.map +1 -0
  69. package/dist/components/kemet-button/kemet-button.d.ts +89 -0
  70. package/dist/components/kemet-button/kemet-button.js +101 -195
  71. package/dist/components/kemet-button/kemet-button.js.map +1 -0
  72. package/dist/components/kemet-button/styles.d.ts +1 -0
  73. package/dist/components/kemet-button/styles.js +73 -0
  74. package/dist/components/kemet-button/styles.js.map +1 -0
  75. package/dist/components/kemet-button/types.d.ts +10 -0
  76. package/dist/components/kemet-button/types.js +2 -0
  77. package/dist/components/kemet-button/types.js.map +1 -0
  78. package/dist/components/kemet-card/kemet-card.d.ts +47 -0
  79. package/dist/components/kemet-card/kemet-card.js +17 -21
  80. package/dist/components/kemet-card/kemet-card.js.map +1 -0
  81. package/dist/components/kemet-card/styles.d.ts +1 -0
  82. package/dist/components/kemet-card/styles.js +2 -2
  83. package/dist/components/kemet-card/styles.js.map +1 -0
  84. package/dist/components/kemet-card/types.d.ts +3 -0
  85. package/dist/components/kemet-card/types.js +2 -0
  86. package/dist/components/kemet-card/types.js.map +1 -0
  87. package/dist/components/kemet-carousel/kemet-carousel-current.d.ts +26 -0
  88. package/dist/components/kemet-carousel/kemet-carousel-current.js +32 -34
  89. package/dist/components/kemet-carousel/kemet-carousel-current.js.map +1 -0
  90. package/dist/components/kemet-carousel/kemet-carousel-first.d.ts +25 -0
  91. package/dist/components/kemet-carousel/kemet-carousel-first.js +30 -35
  92. package/dist/components/kemet-carousel/kemet-carousel-first.js.map +1 -0
  93. package/dist/components/kemet-carousel/kemet-carousel-last.d.ts +25 -0
  94. package/dist/components/kemet-carousel/kemet-carousel-last.js +30 -35
  95. package/dist/components/kemet-carousel/kemet-carousel-last.js.map +1 -0
  96. package/dist/components/kemet-carousel/kemet-carousel-link.d.ts +31 -0
  97. package/dist/components/kemet-carousel/kemet-carousel-link.js +40 -41
  98. package/dist/components/kemet-carousel/kemet-carousel-link.js.map +1 -0
  99. package/dist/components/kemet-carousel/kemet-carousel-next.d.ts +25 -0
  100. package/dist/components/kemet-carousel/kemet-carousel-next.js +30 -35
  101. package/dist/components/kemet-carousel/kemet-carousel-next.js.map +1 -0
  102. package/dist/components/kemet-carousel/kemet-carousel-prev.d.ts +25 -0
  103. package/dist/components/kemet-carousel/kemet-carousel-prev.js +30 -35
  104. package/dist/components/kemet-carousel/kemet-carousel-prev.js.map +1 -0
  105. package/dist/components/kemet-carousel/kemet-carousel-slide.d.ts +29 -0
  106. package/dist/components/kemet-carousel/kemet-carousel-slide.js +38 -39
  107. package/dist/components/kemet-carousel/kemet-carousel-slide.js.map +1 -0
  108. package/dist/components/kemet-carousel/kemet-carousel-total.d.ts +26 -0
  109. package/dist/components/kemet-carousel/kemet-carousel-total.js +32 -34
  110. package/dist/components/kemet-carousel/kemet-carousel-total.js.map +1 -0
  111. package/dist/components/kemet-carousel/kemet-carousel.d.ts +101 -0
  112. package/dist/components/kemet-carousel/kemet-carousel.js +326 -340
  113. package/dist/components/kemet-carousel/kemet-carousel.js.map +1 -0
  114. package/dist/components/kemet-carousel/styles.d.ts +1 -0
  115. package/dist/components/kemet-carousel/styles.js +2 -2
  116. package/dist/components/kemet-carousel/styles.js.map +1 -0
  117. package/dist/components/kemet-carousel/types.d.ts +21 -0
  118. package/dist/components/kemet-carousel/types.js +2 -0
  119. package/dist/components/kemet-carousel/types.js.map +1 -0
  120. package/dist/components/kemet-checkbox/kemet-checkbox.d.ts +71 -0
  121. package/dist/components/kemet-checkbox/kemet-checkbox.js +118 -217
  122. package/dist/components/kemet-checkbox/kemet-checkbox.js.map +1 -0
  123. package/dist/components/kemet-checkbox/styles.d.ts +1 -0
  124. package/dist/components/kemet-checkbox/styles.js +83 -0
  125. package/dist/components/kemet-checkbox/styles.js.map +1 -0
  126. package/dist/components/kemet-checkbox/types.d.ts +15 -0
  127. package/dist/components/kemet-checkbox/types.js +2 -0
  128. package/dist/components/kemet-checkbox/types.js.map +1 -0
  129. package/dist/components/kemet-combo/kemet-combo.d.ts +50 -0
  130. package/dist/components/kemet-combo/kemet-combo.js +111 -175
  131. package/dist/components/kemet-combo/kemet-combo.js.map +1 -0
  132. package/dist/components/kemet-combo/styles.d.ts +1 -0
  133. package/dist/components/kemet-combo/styles.js +44 -0
  134. package/dist/components/kemet-combo/styles.js.map +1 -0
  135. package/dist/components/kemet-combo/types.d.ts +5 -0
  136. package/dist/components/kemet-combo/types.js +2 -0
  137. package/dist/components/kemet-combo/types.js.map +1 -0
  138. package/dist/components/kemet-count/kemet-count.d.ts +39 -0
  139. package/dist/components/kemet-count/kemet-count.js +79 -82
  140. package/dist/components/kemet-count/kemet-count.js.map +1 -0
  141. package/dist/components/kemet-draggable/kemet-draggable.d.ts +42 -0
  142. package/dist/components/kemet-draggable/kemet-draggable.js +111 -114
  143. package/dist/components/kemet-draggable/kemet-draggable.js.map +1 -0
  144. package/dist/components/kemet-draggable/types.d.ts +6 -0
  145. package/dist/components/kemet-draggable/types.js +2 -0
  146. package/dist/components/kemet-draggable/types.js.map +1 -0
  147. package/dist/components/kemet-drawer/kemet-drawer.d.ts +48 -0
  148. package/dist/components/kemet-drawer/kemet-drawer.js +50 -65
  149. package/dist/components/kemet-drawer/kemet-drawer.js.map +1 -0
  150. package/dist/components/kemet-drawer/styles.d.ts +2 -0
  151. package/dist/components/kemet-drawer/styles.js +3 -5
  152. package/dist/components/kemet-drawer/styles.js.map +1 -0
  153. package/dist/components/kemet-drawer/types.d.ts +8 -0
  154. package/dist/components/kemet-drawer/types.js +2 -0
  155. package/dist/components/kemet-drawer/types.js.map +1 -0
  156. package/dist/components/kemet-fab/kemet-fab.d.ts +49 -0
  157. package/dist/components/kemet-fab/kemet-fab.js +64 -67
  158. package/dist/components/kemet-fab/kemet-fab.js.map +1 -0
  159. package/dist/components/kemet-fab/styles.d.ts +1 -0
  160. package/dist/components/kemet-fab/styles.js +5 -5
  161. package/dist/components/kemet-fab/styles.js.map +1 -0
  162. package/dist/components/kemet-fab/types.d.ts +8 -0
  163. package/dist/components/kemet-fab/types.js +2 -0
  164. package/dist/components/kemet-fab/types.js.map +1 -0
  165. package/dist/components/kemet-field/kemet-field.d.ts +61 -0
  166. package/dist/components/kemet-field/kemet-field.js +102 -182
  167. package/dist/components/kemet-field/kemet-field.js.map +1 -0
  168. package/dist/components/kemet-field/styles.d.ts +1 -0
  169. package/dist/components/kemet-field/styles.js +61 -0
  170. package/dist/components/kemet-field/styles.js.map +1 -0
  171. package/dist/components/kemet-field/types.d.ts +13 -0
  172. package/dist/components/kemet-field/types.js +2 -0
  173. package/dist/components/kemet-field/types.js.map +1 -0
  174. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +21 -0
  175. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js +29 -39
  176. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js.map +1 -0
  177. package/dist/components/kemet-flipcard/kemet-flipcard.d.ts +52 -0
  178. package/dist/components/kemet-flipcard/kemet-flipcard.js +97 -173
  179. package/dist/components/kemet-flipcard/kemet-flipcard.js.map +1 -0
  180. package/dist/components/kemet-flipcard/styles.d.ts +1 -0
  181. package/dist/components/kemet-flipcard/styles.js +85 -0
  182. package/dist/components/kemet-flipcard/styles.js.map +1 -0
  183. package/dist/components/kemet-flipcard/types.d.ts +7 -0
  184. package/dist/components/kemet-flipcard/types.js +2 -0
  185. package/dist/components/kemet-flipcard/types.js.map +1 -0
  186. package/dist/components/kemet-icon/kemet-icon.d.ts +28 -0
  187. package/dist/components/kemet-icon/kemet-icon.js +86 -101
  188. package/dist/components/kemet-icon/kemet-icon.js.map +1 -0
  189. package/dist/components/kemet-icon/styles.d.ts +1 -0
  190. package/dist/components/kemet-icon/styles.js +9 -0
  191. package/dist/components/kemet-icon/styles.js.map +1 -0
  192. package/dist/components/kemet-icon/types.d.ts +5 -0
  193. package/dist/components/kemet-icon/types.js +2 -0
  194. package/dist/components/kemet-icon/types.js.map +1 -0
  195. package/dist/components/kemet-input/kemet-input.d.ts +193 -0
  196. package/dist/components/kemet-input/kemet-input.js +296 -447
  197. package/dist/components/kemet-input/kemet-input.js.map +1 -0
  198. package/dist/components/kemet-input/styles.d.ts +1 -0
  199. package/dist/components/kemet-input/styles.js +115 -0
  200. package/dist/components/kemet-input/styles.js.map +1 -0
  201. package/dist/components/kemet-input/types.d.ts +35 -0
  202. package/dist/components/kemet-input/types.js +2 -0
  203. package/dist/components/kemet-input/types.js.map +1 -0
  204. package/dist/components/kemet-modal/kemet-modal-close.d.ts +21 -0
  205. package/dist/components/kemet-modal/kemet-modal-close.js +27 -30
  206. package/dist/components/kemet-modal/kemet-modal-close.js.map +1 -0
  207. package/dist/components/kemet-modal/kemet-modal.d.ts +49 -0
  208. package/dist/components/kemet-modal/kemet-modal.js +101 -115
  209. package/dist/components/kemet-modal/kemet-modal.js.map +1 -0
  210. package/dist/components/kemet-modal/styles.d.ts +2 -0
  211. package/dist/components/kemet-modal/styles.js +4 -4
  212. package/dist/components/kemet-modal/styles.js.map +1 -0
  213. package/dist/components/kemet-modal/types.d.ts +8 -0
  214. package/dist/components/kemet-modal/types.js +2 -0
  215. package/dist/components/kemet-modal/types.js.map +1 -0
  216. package/dist/components/kemet-password/kemet-password.d.ts +77 -0
  217. package/dist/components/kemet-password/kemet-password.js +142 -144
  218. package/dist/components/kemet-password/kemet-password.js.map +1 -0
  219. package/dist/components/kemet-password/styles.d.ts +1 -0
  220. package/dist/components/kemet-password/styles.js +5 -5
  221. package/dist/components/kemet-password/styles.js.map +1 -0
  222. package/dist/components/kemet-password/types.d.ts +10 -0
  223. package/dist/components/kemet-password/types.js +2 -0
  224. package/dist/components/kemet-password/types.js.map +1 -0
  225. package/dist/components/kemet-popper/kemet-popper-close.d.ts +22 -0
  226. package/dist/components/kemet-popper/kemet-popper-close.js +49 -0
  227. package/dist/components/kemet-popper/kemet-popper-close.js.map +1 -0
  228. package/dist/components/kemet-popper/kemet-popper.d.ts +63 -0
  229. package/dist/components/kemet-popper/kemet-popper.js +182 -0
  230. package/dist/components/kemet-popper/kemet-popper.js.map +1 -0
  231. package/dist/components/kemet-popper/styles.d.ts +1 -0
  232. package/dist/components/kemet-popper/styles.effects.d.ts +8 -0
  233. package/dist/components/{kemet-popover → kemet-popper}/styles.effects.js +9 -16
  234. package/dist/components/kemet-popper/styles.effects.js.map +1 -0
  235. package/dist/components/kemet-popper/styles.js +28 -0
  236. package/dist/components/kemet-popper/styles.js.map +1 -0
  237. package/dist/components/kemet-popper/types.d.ts +3 -0
  238. package/dist/components/kemet-popper/types.js +2 -0
  239. package/dist/components/kemet-popper/types.js.map +1 -0
  240. package/dist/components/kemet-radio/kemet-radio.d.ts +56 -0
  241. package/dist/components/kemet-radio/kemet-radio.js +76 -153
  242. package/dist/components/kemet-radio/kemet-radio.js.map +1 -0
  243. package/dist/components/kemet-radio/kemet-radios.d.ts +49 -0
  244. package/dist/components/kemet-radio/kemet-radios.js +112 -178
  245. package/dist/components/kemet-radio/kemet-radios.js.map +1 -0
  246. package/dist/components/kemet-radio/styles.d.ts +2 -0
  247. package/dist/components/kemet-radio/styles.js +102 -0
  248. package/dist/components/kemet-radio/styles.js.map +1 -0
  249. package/dist/components/kemet-radio/types.d.ts +20 -0
  250. package/dist/components/kemet-radio/types.js +2 -0
  251. package/dist/components/kemet-radio/types.js.map +1 -0
  252. package/dist/components/kemet-rotator/kemet-rotator.d.ts +40 -0
  253. package/dist/components/kemet-rotator/kemet-rotator.js +91 -180
  254. package/dist/components/kemet-rotator/kemet-rotator.js.map +1 -0
  255. package/dist/components/kemet-rotator/styles.d.ts +1 -0
  256. package/dist/components/kemet-rotator/styles.js +72 -0
  257. package/dist/components/kemet-rotator/styles.js.map +1 -0
  258. package/dist/components/kemet-rotator/types.d.ts +9 -0
  259. package/dist/components/kemet-rotator/types.js +2 -0
  260. package/dist/components/kemet-rotator/types.js.map +1 -0
  261. package/dist/components/kemet-scroll-link/kemet-scroll-link.d.ts +31 -0
  262. package/dist/components/kemet-scroll-link/kemet-scroll-link.js +62 -79
  263. package/dist/components/kemet-scroll-link/kemet-scroll-link.js.map +1 -0
  264. package/dist/components/kemet-scroll-link/types.d.ts +6 -0
  265. package/dist/components/kemet-scroll-link/types.js +2 -0
  266. package/dist/components/kemet-scroll-link/types.js.map +1 -0
  267. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +34 -0
  268. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js +49 -86
  269. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js.map +1 -0
  270. package/dist/components/kemet-scroll-nav/styles.d.ts +1 -0
  271. package/dist/components/kemet-scroll-nav/styles.js +26 -0
  272. package/dist/components/kemet-scroll-nav/styles.js.map +1 -0
  273. package/dist/components/kemet-scroll-nav/types.d.ts +6 -0
  274. package/dist/components/kemet-scroll-nav/types.js +2 -0
  275. package/dist/components/kemet-scroll-nav/types.js.map +1 -0
  276. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +44 -0
  277. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +79 -124
  278. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +1 -0
  279. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +30 -0
  280. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +36 -47
  281. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +1 -0
  282. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +46 -0
  283. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js +93 -164
  284. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map +1 -0
  285. package/dist/components/kemet-scroll-snap/styles.d.ts +2 -0
  286. package/dist/components/kemet-scroll-snap/styles.js +74 -0
  287. package/dist/components/kemet-scroll-snap/styles.js.map +1 -0
  288. package/dist/components/kemet-scroll-snap/types.d.ts +20 -0
  289. package/dist/components/kemet-scroll-snap/types.js +2 -0
  290. package/dist/components/kemet-scroll-snap/types.js.map +1 -0
  291. package/dist/components/kemet-select/kemet-option.d.ts +29 -0
  292. package/dist/components/kemet-select/kemet-option.js +28 -33
  293. package/dist/components/kemet-select/kemet-option.js.map +1 -0
  294. package/dist/components/kemet-select/kemet-select.d.ts +110 -0
  295. package/dist/components/kemet-select/kemet-select.js +179 -265
  296. package/dist/components/kemet-select/kemet-select.js.map +1 -0
  297. package/dist/components/kemet-select/styles.d.ts +1 -0
  298. package/dist/components/kemet-select/styles.js +73 -0
  299. package/dist/components/kemet-select/styles.js.map +1 -0
  300. package/dist/components/kemet-select/types.d.ts +20 -0
  301. package/dist/components/kemet-select/types.js +2 -0
  302. package/dist/components/kemet-select/types.js.map +1 -0
  303. package/dist/components/kemet-sortable/kemet-sortable-item.d.ts +21 -0
  304. package/dist/components/kemet-sortable/kemet-sortable-item.js +21 -39
  305. package/dist/components/kemet-sortable/kemet-sortable-item.js.map +1 -0
  306. package/dist/components/kemet-sortable/kemet-sortable.d.ts +25 -0
  307. package/dist/components/kemet-sortable/kemet-sortable.js +61 -79
  308. package/dist/components/kemet-sortable/kemet-sortable.js.map +1 -0
  309. package/dist/components/kemet-sortable/styles.d.ts +2 -0
  310. package/dist/components/kemet-sortable/styles.js +22 -0
  311. package/dist/components/kemet-sortable/styles.js.map +1 -0
  312. package/dist/components/kemet-sortable/types.d.ts +3 -0
  313. package/dist/components/kemet-sortable/types.js +2 -0
  314. package/dist/components/kemet-sortable/types.js.map +1 -0
  315. package/dist/components/kemet-svgs/kemet-svg.d.ts +38 -0
  316. package/dist/components/kemet-svgs/kemet-svg.js +76 -90
  317. package/dist/components/kemet-svgs/kemet-svg.js.map +1 -0
  318. package/dist/components/kemet-svgs/kemet-svgs.d.ts +27 -0
  319. package/dist/components/kemet-svgs/kemet-svgs.js +39 -48
  320. package/dist/components/kemet-svgs/kemet-svgs.js.map +1 -0
  321. package/dist/components/kemet-svgs/types.d.ts +10 -0
  322. package/dist/components/kemet-svgs/types.js +2 -0
  323. package/dist/components/kemet-svgs/types.js.map +1 -0
  324. package/dist/components/kemet-tabs/kemet-tab-panel.d.ts +27 -0
  325. package/dist/components/kemet-tabs/kemet-tab-panel.js +36 -76
  326. package/dist/components/kemet-tabs/kemet-tab-panel.js.map +1 -0
  327. package/dist/components/kemet-tabs/kemet-tab.d.ts +37 -0
  328. package/dist/components/kemet-tabs/kemet-tab.js +57 -92
  329. package/dist/components/kemet-tabs/kemet-tab.js.map +1 -0
  330. package/dist/components/kemet-tabs/kemet-tabs.d.ts +95 -0
  331. package/dist/components/kemet-tabs/kemet-tabs.js +456 -472
  332. package/dist/components/kemet-tabs/kemet-tabs.js.map +1 -0
  333. package/dist/components/kemet-tabs/styles.d.ts +3 -0
  334. package/dist/components/kemet-tabs/styles.js +57 -3
  335. package/dist/components/kemet-tabs/styles.js.map +1 -0
  336. package/dist/components/kemet-tabs/types.d.ts +29 -0
  337. package/dist/components/kemet-tabs/types.js +2 -0
  338. package/dist/components/kemet-tabs/types.js.map +1 -0
  339. package/dist/components/kemet-textarea/kemet-textarea.d.ts +123 -0
  340. package/dist/components/kemet-textarea/kemet-textarea.js +235 -308
  341. package/dist/components/kemet-textarea/kemet-textarea.js.map +1 -0
  342. package/dist/components/kemet-textarea/styles.d.ts +1 -0
  343. package/dist/components/kemet-textarea/styles.js +69 -0
  344. package/dist/components/kemet-textarea/styles.js.map +1 -0
  345. package/dist/components/kemet-textarea/types.d.ts +20 -0
  346. package/dist/components/kemet-textarea/types.js +2 -0
  347. package/dist/components/kemet-textarea/types.js.map +1 -0
  348. package/dist/components/kemet-toggle/kemet-toggle.d.ts +60 -0
  349. package/dist/components/kemet-toggle/kemet-toggle.js +73 -169
  350. package/dist/components/kemet-toggle/kemet-toggle.js.map +1 -0
  351. package/dist/components/kemet-toggle/styles.d.ts +1 -0
  352. package/dist/components/kemet-toggle/styles.js +84 -0
  353. package/dist/components/kemet-toggle/styles.js.map +1 -0
  354. package/dist/components/kemet-toggle/types.d.ts +10 -0
  355. package/dist/components/kemet-toggle/types.js +2 -0
  356. package/dist/components/kemet-toggle/types.js.map +1 -0
  357. package/dist/components/kemet-tooltip/kemet-tooltip.d.ts +33 -0
  358. package/dist/components/kemet-tooltip/kemet-tooltip.js +68 -0
  359. package/dist/components/kemet-tooltip/kemet-tooltip.js.map +1 -0
  360. package/dist/components/kemet-tooltip/styles.d.ts +1 -0
  361. package/dist/components/kemet-tooltip/styles.js +61 -0
  362. package/dist/components/kemet-tooltip/styles.js.map +1 -0
  363. package/dist/components/kemet-tooltip/types.d.ts +3 -0
  364. package/dist/components/kemet-tooltip/types.js +2 -0
  365. package/dist/components/kemet-tooltip/types.js.map +1 -0
  366. package/dist/components/kemet-tracker/kemet-tracker-step.d.ts +63 -0
  367. package/dist/components/kemet-tracker/kemet-tracker-step.js +75 -76
  368. package/dist/components/kemet-tracker/kemet-tracker-step.js.map +1 -0
  369. package/dist/components/kemet-tracker/kemet-tracker.d.ts +26 -0
  370. package/dist/components/kemet-tracker/kemet-tracker.js +59 -65
  371. package/dist/components/kemet-tracker/kemet-tracker.js.map +1 -0
  372. package/dist/components/kemet-tracker/styles.d.ts +1 -0
  373. package/dist/components/kemet-tracker/styles.js +2 -2
  374. package/dist/components/kemet-tracker/styles.js.map +1 -0
  375. package/dist/components/kemet-tracker/types.d.ts +13 -0
  376. package/dist/components/kemet-tracker/types.js +2 -0
  377. package/dist/components/kemet-tracker/types.js.map +1 -0
  378. package/dist/components/kemet-upload/kemet-upload-file.d.ts +46 -0
  379. package/dist/components/kemet-upload/kemet-upload-file.js +69 -117
  380. package/dist/components/kemet-upload/kemet-upload-file.js.map +1 -0
  381. package/dist/components/kemet-upload/kemet-upload.d.ts +58 -0
  382. package/dist/components/kemet-upload/kemet-upload.js +105 -169
  383. package/dist/components/kemet-upload/kemet-upload.js.map +1 -0
  384. package/dist/components/kemet-upload/styles.d.ts +3 -0
  385. package/dist/components/kemet-upload/styles.js +117 -1
  386. package/dist/components/kemet-upload/styles.js.map +1 -0
  387. package/dist/components/kemet-upload/types.d.ts +21 -0
  388. package/dist/components/kemet-upload/types.js +2 -0
  389. package/dist/components/kemet-upload/types.js.map +1 -0
  390. package/dist/kemet-components.bundle.js +88 -0
  391. package/dist/kemet-components.bundle.js.map +1 -0
  392. package/dist/kemet-components.cjs +8910 -7781
  393. package/dist/kemet-components.js +8717 -7582
  394. package/dist/src/components/kemet-accordion/kemet-accordion-panel.d.ts +51 -0
  395. package/dist/src/components/kemet-accordion/kemet-accordion-panel.js +136 -0
  396. package/dist/src/components/kemet-accordion/kemet-accordion-panel.js.map +1 -0
  397. package/dist/src/components/kemet-accordion/kemet-accordion.d.ts +37 -0
  398. package/dist/src/components/kemet-accordion/kemet-accordion.js +129 -0
  399. package/dist/src/components/kemet-accordion/kemet-accordion.js.map +1 -0
  400. package/dist/src/components/kemet-accordion/stories.d.ts +10 -0
  401. package/dist/src/components/kemet-accordion/stories.js +44 -0
  402. package/dist/src/components/kemet-accordion/stories.js.map +1 -0
  403. package/dist/src/components/kemet-accordion/styles.d.ts +2 -0
  404. package/dist/src/components/kemet-accordion/styles.js +42 -0
  405. package/dist/src/components/kemet-accordion/styles.js.map +1 -0
  406. package/dist/src/components/kemet-accordion/types.d.ts +9 -0
  407. package/dist/src/components/kemet-accordion/types.js +2 -0
  408. package/dist/src/components/kemet-accordion/types.js.map +1 -0
  409. package/dist/src/components/kemet-alert/docs/stories.d.ts +9 -0
  410. package/dist/src/components/kemet-alert/docs/stories.js +77 -0
  411. package/dist/src/components/kemet-alert/docs/stories.js.map +1 -0
  412. package/dist/src/components/kemet-alert/kemet-alert.d.ts +52 -0
  413. package/dist/src/components/kemet-alert/kemet-alert.js +108 -0
  414. package/dist/src/components/kemet-alert/kemet-alert.js.map +1 -0
  415. package/dist/src/components/kemet-alert/styles.d.ts +1 -0
  416. package/dist/src/components/kemet-alert/styles.js +104 -0
  417. package/dist/src/components/kemet-alert/styles.js.map +1 -0
  418. package/dist/src/components/kemet-alert/types.d.ts +10 -0
  419. package/dist/src/components/kemet-alert/types.js +2 -0
  420. package/dist/src/components/kemet-alert/types.js.map +1 -0
  421. package/dist/src/components/kemet-avatar/docs/stories.d.ts +11 -0
  422. package/dist/src/components/kemet-avatar/docs/stories.js +86 -0
  423. package/dist/src/components/kemet-avatar/docs/stories.js.map +1 -0
  424. package/dist/src/components/kemet-avatar/kemet-avatar.d.ts +43 -0
  425. package/dist/src/components/kemet-avatar/kemet-avatar.js +78 -0
  426. package/dist/src/components/kemet-avatar/kemet-avatar.js.map +1 -0
  427. package/dist/src/components/kemet-avatar/kemet-avatars.d.ts +20 -0
  428. package/dist/src/components/kemet-avatar/kemet-avatars.js +25 -0
  429. package/dist/src/components/kemet-avatar/kemet-avatars.js.map +1 -0
  430. package/dist/src/components/kemet-avatar/styles.d.ts +2 -0
  431. package/dist/src/components/kemet-avatar/styles.js +58 -0
  432. package/dist/src/components/kemet-avatar/styles.js.map +1 -0
  433. package/dist/src/components/kemet-avatar/types.d.ts +8 -0
  434. package/dist/src/components/kemet-avatar/types.js +2 -0
  435. package/dist/src/components/kemet-avatar/types.js.map +1 -0
  436. package/dist/src/components/kemet-badge/docs/stories.d.ts +9 -0
  437. package/dist/src/components/kemet-badge/docs/stories.js +40 -0
  438. package/dist/src/components/kemet-badge/docs/stories.js.map +1 -0
  439. package/dist/src/components/kemet-badge/kemet-badge.d.ts +30 -0
  440. package/dist/src/components/kemet-badge/kemet-badge.js +55 -0
  441. package/dist/src/components/kemet-badge/kemet-badge.js.map +1 -0
  442. package/dist/src/components/kemet-badge/styles.d.ts +1 -0
  443. package/dist/src/components/kemet-badge/styles.js +40 -0
  444. package/dist/src/components/kemet-badge/styles.js.map +1 -0
  445. package/dist/src/components/kemet-badge/types.d.ts +6 -0
  446. package/dist/src/components/kemet-badge/types.js +2 -0
  447. package/dist/src/components/kemet-badge/types.js.map +1 -0
  448. package/dist/src/components/kemet-button/docs/stories.d.ts +9 -0
  449. package/dist/src/components/kemet-button/docs/stories.js +51 -0
  450. package/dist/src/components/kemet-button/docs/stories.js.map +1 -0
  451. package/dist/src/components/kemet-button/kemet-button.d.ts +89 -0
  452. package/dist/src/components/kemet-button/kemet-button.js +153 -0
  453. package/dist/src/components/kemet-button/kemet-button.js.map +1 -0
  454. package/dist/src/components/kemet-button/styles.d.ts +1 -0
  455. package/dist/src/components/kemet-button/styles.js +73 -0
  456. package/dist/src/components/kemet-button/styles.js.map +1 -0
  457. package/dist/src/components/kemet-button/types.d.ts +10 -0
  458. package/dist/src/components/kemet-button/types.js +2 -0
  459. package/dist/src/components/kemet-button/types.js.map +1 -0
  460. package/dist/src/components/kemet-card/docs/stories.d.ts +9 -0
  461. package/dist/src/components/kemet-card/docs/stories.js +108 -0
  462. package/dist/src/components/kemet-card/docs/stories.js.map +1 -0
  463. package/dist/src/components/kemet-card/kemet-card.d.ts +47 -0
  464. package/dist/src/components/kemet-card/kemet-card.js +65 -0
  465. package/dist/src/components/kemet-card/kemet-card.js.map +1 -0
  466. package/dist/src/components/kemet-card/styles.d.ts +1 -0
  467. package/dist/src/components/kemet-card/styles.js +63 -0
  468. package/dist/src/components/kemet-card/styles.js.map +1 -0
  469. package/dist/src/components/kemet-card/types.d.ts +3 -0
  470. package/dist/src/components/kemet-card/types.js +2 -0
  471. package/dist/src/components/kemet-card/types.js.map +1 -0
  472. package/dist/src/components/kemet-carousel/docs/stories.d.ts +17 -0
  473. package/dist/src/components/kemet-carousel/docs/stories.js +168 -0
  474. package/dist/src/components/kemet-carousel/docs/stories.js.map +1 -0
  475. package/dist/src/components/kemet-carousel/kemet-carousel-current.d.ts +26 -0
  476. package/dist/src/components/kemet-carousel/kemet-carousel-current.js +44 -0
  477. package/dist/src/components/kemet-carousel/kemet-carousel-current.js.map +1 -0
  478. package/dist/src/components/kemet-carousel/kemet-carousel-first.d.ts +25 -0
  479. package/dist/src/components/kemet-carousel/kemet-carousel-first.js +50 -0
  480. package/dist/src/components/kemet-carousel/kemet-carousel-first.js.map +1 -0
  481. package/dist/src/components/kemet-carousel/kemet-carousel-last.d.ts +25 -0
  482. package/dist/src/components/kemet-carousel/kemet-carousel-last.js +50 -0
  483. package/dist/src/components/kemet-carousel/kemet-carousel-last.js.map +1 -0
  484. package/dist/src/components/kemet-carousel/kemet-carousel-link.d.ts +31 -0
  485. package/dist/src/components/kemet-carousel/kemet-carousel-link.js +64 -0
  486. package/dist/src/components/kemet-carousel/kemet-carousel-link.js.map +1 -0
  487. package/dist/src/components/kemet-carousel/kemet-carousel-next.d.ts +25 -0
  488. package/dist/src/components/kemet-carousel/kemet-carousel-next.js +50 -0
  489. package/dist/src/components/kemet-carousel/kemet-carousel-next.js.map +1 -0
  490. package/dist/src/components/kemet-carousel/kemet-carousel-prev.d.ts +25 -0
  491. package/dist/src/components/kemet-carousel/kemet-carousel-prev.js +50 -0
  492. package/dist/src/components/kemet-carousel/kemet-carousel-prev.js.map +1 -0
  493. package/dist/src/components/kemet-carousel/kemet-carousel-slide.d.ts +29 -0
  494. package/dist/src/components/kemet-carousel/kemet-carousel-slide.js +53 -0
  495. package/dist/src/components/kemet-carousel/kemet-carousel-slide.js.map +1 -0
  496. package/dist/src/components/kemet-carousel/kemet-carousel-total.d.ts +26 -0
  497. package/dist/src/components/kemet-carousel/kemet-carousel-total.js +44 -0
  498. package/dist/src/components/kemet-carousel/kemet-carousel-total.js.map +1 -0
  499. package/dist/src/components/kemet-carousel/kemet-carousel.d.ts +114 -0
  500. package/dist/src/components/kemet-carousel/kemet-carousel.js +410 -0
  501. package/dist/src/components/kemet-carousel/kemet-carousel.js.map +1 -0
  502. package/dist/src/components/kemet-carousel/styles.d.ts +1 -0
  503. package/dist/src/components/kemet-carousel/styles.js +66 -0
  504. package/dist/src/components/kemet-carousel/styles.js.map +1 -0
  505. package/dist/src/components/kemet-carousel/types.d.ts +21 -0
  506. package/dist/src/components/kemet-carousel/types.js +2 -0
  507. package/dist/src/components/kemet-carousel/types.js.map +1 -0
  508. package/dist/src/components/kemet-checkbox/docs/stories.d.ts +9 -0
  509. package/dist/src/components/kemet-checkbox/docs/stories.js +45 -0
  510. package/dist/src/components/kemet-checkbox/docs/stories.js.map +1 -0
  511. package/dist/src/components/kemet-checkbox/kemet-checkbox.d.ts +71 -0
  512. package/dist/src/components/kemet-checkbox/kemet-checkbox.js +192 -0
  513. package/dist/src/components/kemet-checkbox/kemet-checkbox.js.map +1 -0
  514. package/dist/src/components/kemet-checkbox/styles.d.ts +1 -0
  515. package/dist/src/components/kemet-checkbox/styles.js +83 -0
  516. package/dist/src/components/kemet-checkbox/styles.js.map +1 -0
  517. package/dist/src/components/kemet-checkbox/types.d.ts +15 -0
  518. package/dist/src/components/kemet-checkbox/types.js +2 -0
  519. package/dist/src/components/kemet-checkbox/types.js.map +1 -0
  520. package/dist/src/components/kemet-combo/docs/stories.d.ts +11 -0
  521. package/dist/src/components/kemet-combo/docs/stories.js +30 -0
  522. package/dist/src/components/kemet-combo/docs/stories.js.map +1 -0
  523. package/dist/src/components/kemet-combo/kemet-combo.d.ts +50 -0
  524. package/dist/src/components/kemet-combo/kemet-combo.js +162 -0
  525. package/dist/src/components/kemet-combo/kemet-combo.js.map +1 -0
  526. package/dist/src/components/kemet-combo/styles.d.ts +1 -0
  527. package/dist/src/components/kemet-combo/styles.js +44 -0
  528. package/dist/src/components/kemet-combo/styles.js.map +1 -0
  529. package/dist/src/components/kemet-combo/types.d.ts +5 -0
  530. package/dist/src/components/kemet-combo/types.js +2 -0
  531. package/dist/src/components/kemet-combo/types.js.map +1 -0
  532. package/dist/src/components/kemet-count/docs/stories.d.ts +11 -0
  533. package/dist/src/components/kemet-count/docs/stories.js +51 -0
  534. package/dist/src/components/kemet-count/docs/stories.js.map +1 -0
  535. package/dist/src/components/kemet-count/kemet-count.d.ts +39 -0
  536. package/dist/src/components/kemet-count/kemet-count.js +98 -0
  537. package/dist/src/components/kemet-count/kemet-count.js.map +1 -0
  538. package/dist/src/components/kemet-draggable/docs/stories.d.ts +9 -0
  539. package/dist/src/components/kemet-draggable/docs/stories.js +32 -0
  540. package/dist/src/components/kemet-draggable/docs/stories.js.map +1 -0
  541. package/dist/src/components/kemet-draggable/kemet-draggable.d.ts +49 -0
  542. package/dist/src/components/kemet-draggable/kemet-draggable.js +137 -0
  543. package/dist/src/components/kemet-draggable/kemet-draggable.js.map +1 -0
  544. package/dist/src/components/kemet-draggable/types.d.ts +6 -0
  545. package/dist/src/components/kemet-draggable/types.js +2 -0
  546. package/dist/src/components/kemet-draggable/types.js.map +1 -0
  547. package/dist/src/components/kemet-drawer/docs/stories.d.ts +10 -0
  548. package/dist/src/components/kemet-drawer/docs/stories.js +91 -0
  549. package/dist/src/components/kemet-drawer/docs/stories.js.map +1 -0
  550. package/dist/src/components/kemet-drawer/kemet-drawer.d.ts +48 -0
  551. package/dist/src/components/kemet-drawer/kemet-drawer.js +95 -0
  552. package/dist/src/components/kemet-drawer/kemet-drawer.js.map +1 -0
  553. package/dist/src/components/kemet-drawer/styles.d.ts +2 -0
  554. package/dist/src/components/kemet-drawer/styles.js +314 -0
  555. package/dist/src/components/kemet-drawer/styles.js.map +1 -0
  556. package/dist/src/components/kemet-drawer/types.d.ts +8 -0
  557. package/dist/src/components/kemet-drawer/types.js +2 -0
  558. package/dist/src/components/kemet-drawer/types.js.map +1 -0
  559. package/dist/src/components/kemet-fab/docs/stories.d.ts +11 -0
  560. package/dist/src/components/kemet-fab/docs/stories.js +87 -0
  561. package/dist/src/components/kemet-fab/docs/stories.js.map +1 -0
  562. package/dist/src/components/kemet-fab/kemet-fab.d.ts +49 -0
  563. package/dist/src/components/kemet-fab/kemet-fab.js +107 -0
  564. package/dist/src/components/kemet-fab/kemet-fab.js.map +1 -0
  565. package/dist/src/components/kemet-fab/styles.d.ts +1 -0
  566. package/dist/src/components/kemet-fab/styles.js +95 -0
  567. package/dist/src/components/kemet-fab/styles.js.map +1 -0
  568. package/dist/src/components/kemet-fab/types.d.ts +8 -0
  569. package/dist/src/components/kemet-fab/types.js +2 -0
  570. package/dist/src/components/kemet-fab/types.js.map +1 -0
  571. package/dist/src/components/kemet-field/docs/stories.d.ts +15 -0
  572. package/dist/src/components/kemet-field/docs/stories.js +105 -0
  573. package/dist/src/components/kemet-field/docs/stories.js.map +1 -0
  574. package/dist/src/components/kemet-field/kemet-field.d.ts +61 -0
  575. package/dist/src/components/kemet-field/kemet-field.js +144 -0
  576. package/dist/src/components/kemet-field/kemet-field.js.map +1 -0
  577. package/dist/src/components/kemet-field/styles.d.ts +1 -0
  578. package/dist/src/components/kemet-field/styles.js +61 -0
  579. package/dist/src/components/kemet-field/styles.js.map +1 -0
  580. package/dist/src/components/kemet-field/types.d.ts +13 -0
  581. package/dist/src/components/kemet-field/types.js +2 -0
  582. package/dist/src/components/kemet-field/types.js.map +1 -0
  583. package/dist/src/components/kemet-flipcard/docs/stories.d.ts +11 -0
  584. package/dist/src/components/kemet-flipcard/docs/stories.js +109 -0
  585. package/dist/src/components/kemet-flipcard/docs/stories.js.map +1 -0
  586. package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +21 -0
  587. package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.js +42 -0
  588. package/dist/src/components/kemet-flipcard/kemet-flipcard-trigger.js.map +1 -0
  589. package/dist/src/components/kemet-flipcard/kemet-flipcard.d.ts +52 -0
  590. package/dist/src/components/kemet-flipcard/kemet-flipcard.js +131 -0
  591. package/dist/src/components/kemet-flipcard/kemet-flipcard.js.map +1 -0
  592. package/dist/src/components/kemet-flipcard/styles.d.ts +1 -0
  593. package/dist/src/components/kemet-flipcard/styles.js +85 -0
  594. package/dist/src/components/kemet-flipcard/styles.js.map +1 -0
  595. package/dist/src/components/kemet-flipcard/types.d.ts +7 -0
  596. package/dist/src/components/kemet-flipcard/types.js +2 -0
  597. package/dist/src/components/kemet-flipcard/types.js.map +1 -0
  598. package/dist/src/components/kemet-icon/docs/stories.d.ts +9 -0
  599. package/dist/src/components/kemet-icon/docs/stories.js +34 -0
  600. package/dist/src/components/kemet-icon/docs/stories.js.map +1 -0
  601. package/dist/src/components/kemet-icon/kemet-icon.d.ts +28 -0
  602. package/dist/src/components/kemet-icon/kemet-icon.js +114 -0
  603. package/dist/src/components/kemet-icon/kemet-icon.js.map +1 -0
  604. package/dist/src/components/kemet-icon/styles.d.ts +1 -0
  605. package/dist/src/components/kemet-icon/styles.js +9 -0
  606. package/dist/src/components/kemet-icon/styles.js.map +1 -0
  607. package/dist/src/components/kemet-icon/types.d.ts +5 -0
  608. package/dist/src/components/kemet-icon/types.js +2 -0
  609. package/dist/src/components/kemet-icon/types.js.map +1 -0
  610. package/dist/src/components/kemet-input/docs/stories.d.ts +9 -0
  611. package/dist/src/components/kemet-input/docs/stories.js +142 -0
  612. package/dist/src/components/kemet-input/docs/stories.js.map +1 -0
  613. package/dist/src/components/kemet-input/kemet-input.d.ts +193 -0
  614. package/dist/src/components/kemet-input/kemet-input.js +417 -0
  615. package/dist/src/components/kemet-input/kemet-input.js.map +1 -0
  616. package/dist/src/components/kemet-input/styles.d.ts +1 -0
  617. package/dist/src/components/kemet-input/styles.js +115 -0
  618. package/dist/src/components/kemet-input/styles.js.map +1 -0
  619. package/dist/src/components/kemet-input/types.d.ts +35 -0
  620. package/dist/src/components/kemet-input/types.js +2 -0
  621. package/dist/src/components/kemet-input/types.js.map +1 -0
  622. package/dist/src/components/kemet-modal/docs/stories.d.ts +10 -0
  623. package/dist/src/components/kemet-modal/docs/stories.js +101 -0
  624. package/dist/src/components/kemet-modal/docs/stories.js.map +1 -0
  625. package/dist/src/components/kemet-modal/kemet-modal-close.d.ts +21 -0
  626. package/dist/src/components/kemet-modal/kemet-modal-close.js +40 -0
  627. package/dist/src/components/kemet-modal/kemet-modal-close.js.map +1 -0
  628. package/dist/src/components/kemet-modal/kemet-modal.d.ts +49 -0
  629. package/dist/src/components/kemet-modal/kemet-modal.js +131 -0
  630. package/dist/src/components/kemet-modal/kemet-modal.js.map +1 -0
  631. package/dist/src/components/kemet-modal/styles.d.ts +2 -0
  632. package/dist/src/components/kemet-modal/styles.js +267 -0
  633. package/dist/src/components/kemet-modal/styles.js.map +1 -0
  634. package/dist/src/components/kemet-modal/types.d.ts +8 -0
  635. package/dist/src/components/kemet-modal/types.js +2 -0
  636. package/dist/src/components/kemet-modal/types.js.map +1 -0
  637. package/dist/src/components/kemet-password/docs/stories.d.ts +10 -0
  638. package/dist/src/components/kemet-password/docs/stories.js +37 -0
  639. package/dist/src/components/kemet-password/docs/stories.js.map +1 -0
  640. package/dist/src/components/kemet-password/kemet-password.d.ts +77 -0
  641. package/dist/src/components/kemet-password/kemet-password.js +184 -0
  642. package/dist/src/components/kemet-password/kemet-password.js.map +1 -0
  643. package/dist/src/components/kemet-password/styles.d.ts +1 -0
  644. package/dist/src/components/kemet-password/styles.js +80 -0
  645. package/dist/src/components/kemet-password/styles.js.map +1 -0
  646. package/dist/src/components/kemet-password/types.d.ts +10 -0
  647. package/dist/src/components/kemet-password/types.js +2 -0
  648. package/dist/src/components/kemet-password/types.js.map +1 -0
  649. package/dist/src/components/kemet-popper/docs/stories.d.ts +10 -0
  650. package/dist/src/components/kemet-popper/docs/stories.js +72 -0
  651. package/dist/src/components/kemet-popper/docs/stories.js.map +1 -0
  652. package/dist/src/components/kemet-popper/kemet-popper-close.d.ts +22 -0
  653. package/dist/src/components/kemet-popper/kemet-popper-close.js +49 -0
  654. package/dist/src/components/kemet-popper/kemet-popper-close.js.map +1 -0
  655. package/dist/src/components/kemet-popper/kemet-popper.d.ts +63 -0
  656. package/dist/src/components/kemet-popper/kemet-popper.js +182 -0
  657. package/dist/src/components/kemet-popper/kemet-popper.js.map +1 -0
  658. package/dist/src/components/kemet-popper/styles.d.ts +1 -0
  659. package/dist/src/components/kemet-popper/styles.effects.d.ts +8 -0
  660. package/dist/src/components/kemet-popper/styles.effects.js +306 -0
  661. package/dist/src/components/kemet-popper/styles.effects.js.map +1 -0
  662. package/dist/src/components/kemet-popper/styles.js +28 -0
  663. package/dist/src/components/kemet-popper/styles.js.map +1 -0
  664. package/dist/src/components/kemet-popper/types.d.ts +3 -0
  665. package/dist/src/components/kemet-popper/types.js +2 -0
  666. package/dist/src/components/kemet-popper/types.js.map +1 -0
  667. package/dist/src/components/kemet-radio/docs/stories.d.ts +10 -0
  668. package/dist/src/components/kemet-radio/docs/stories.js +40 -0
  669. package/dist/src/components/kemet-radio/docs/stories.js.map +1 -0
  670. package/dist/src/components/kemet-radio/kemet-radio.d.ts +56 -0
  671. package/dist/src/components/kemet-radio/kemet-radio.js +129 -0
  672. package/dist/src/components/kemet-radio/kemet-radio.js.map +1 -0
  673. package/dist/src/components/kemet-radio/kemet-radios.d.ts +49 -0
  674. package/dist/src/components/kemet-radio/kemet-radios.js +143 -0
  675. package/dist/src/components/kemet-radio/kemet-radios.js.map +1 -0
  676. package/dist/src/components/kemet-radio/styles.d.ts +2 -0
  677. package/dist/src/components/kemet-radio/styles.js +102 -0
  678. package/dist/src/components/kemet-radio/styles.js.map +1 -0
  679. package/dist/src/components/kemet-radio/types.d.ts +20 -0
  680. package/dist/src/components/kemet-radio/types.js +2 -0
  681. package/dist/src/components/kemet-radio/types.js.map +1 -0
  682. package/dist/src/components/kemet-rotator/docs/stories.d.ts +9 -0
  683. package/dist/src/components/kemet-rotator/docs/stories.js +46 -0
  684. package/dist/src/components/kemet-rotator/docs/stories.js.map +1 -0
  685. package/dist/src/components/kemet-rotator/kemet-rotator.d.ts +40 -0
  686. package/dist/src/components/kemet-rotator/kemet-rotator.js +122 -0
  687. package/dist/src/components/kemet-rotator/kemet-rotator.js.map +1 -0
  688. package/dist/src/components/kemet-rotator/styles.d.ts +1 -0
  689. package/dist/src/components/kemet-rotator/styles.js +72 -0
  690. package/dist/src/components/kemet-rotator/styles.js.map +1 -0
  691. package/dist/src/components/kemet-rotator/types.d.ts +9 -0
  692. package/dist/src/components/kemet-rotator/types.js +2 -0
  693. package/dist/src/components/kemet-rotator/types.js.map +1 -0
  694. package/dist/src/components/kemet-scroll-link/docs/stories.d.ts +9 -0
  695. package/dist/src/components/kemet-scroll-link/docs/stories.js +97 -0
  696. package/dist/src/components/kemet-scroll-link/docs/stories.js.map +1 -0
  697. package/dist/src/components/kemet-scroll-link/kemet-scroll-link.d.ts +31 -0
  698. package/dist/src/components/kemet-scroll-link/kemet-scroll-link.js +82 -0
  699. package/dist/src/components/kemet-scroll-link/kemet-scroll-link.js.map +1 -0
  700. package/dist/src/components/kemet-scroll-link/types.d.ts +6 -0
  701. package/dist/src/components/kemet-scroll-link/types.js +2 -0
  702. package/dist/src/components/kemet-scroll-link/types.js.map +1 -0
  703. package/dist/src/components/kemet-scroll-nav/docs/stories.d.ts +10 -0
  704. package/dist/src/components/kemet-scroll-nav/docs/stories.js +162 -0
  705. package/dist/src/components/kemet-scroll-nav/docs/stories.js.map +1 -0
  706. package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +34 -0
  707. package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js +70 -0
  708. package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js.map +1 -0
  709. package/dist/src/components/kemet-scroll-nav/styles.d.ts +1 -0
  710. package/dist/src/components/kemet-scroll-nav/styles.js +27 -0
  711. package/dist/src/components/kemet-scroll-nav/styles.js.map +1 -0
  712. package/dist/src/components/kemet-scroll-nav/types.d.ts +6 -0
  713. package/dist/src/components/kemet-scroll-nav/types.js +2 -0
  714. package/dist/src/components/kemet-scroll-nav/types.js.map +1 -0
  715. package/dist/src/components/kemet-scroll-snap/docs/stories.d.ts +11 -0
  716. package/dist/src/components/kemet-scroll-snap/docs/stories.js +131 -0
  717. package/dist/src/components/kemet-scroll-snap/docs/stories.js.map +1 -0
  718. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +44 -0
  719. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +120 -0
  720. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +1 -0
  721. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +30 -0
  722. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +53 -0
  723. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +1 -0
  724. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +46 -0
  725. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.js +122 -0
  726. package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap.js.map +1 -0
  727. package/dist/src/components/kemet-scroll-snap/styles.d.ts +2 -0
  728. package/dist/src/components/kemet-scroll-snap/styles.js +74 -0
  729. package/dist/src/components/kemet-scroll-snap/styles.js.map +1 -0
  730. package/dist/src/components/kemet-scroll-snap/types.d.ts +20 -0
  731. package/dist/src/components/kemet-scroll-snap/types.js +2 -0
  732. package/dist/src/components/kemet-scroll-snap/types.js.map +1 -0
  733. package/dist/src/components/kemet-select/docs/stories.d.ts +10 -0
  734. package/dist/src/components/kemet-select/docs/stories.js +57 -0
  735. package/dist/src/components/kemet-select/docs/stories.js.map +1 -0
  736. package/dist/src/components/kemet-select/kemet-option.d.ts +29 -0
  737. package/dist/src/components/kemet-select/kemet-option.js +45 -0
  738. package/dist/src/components/kemet-select/kemet-option.js.map +1 -0
  739. package/dist/src/components/kemet-select/kemet-select.d.ts +110 -0
  740. package/dist/src/components/kemet-select/kemet-select.js +239 -0
  741. package/dist/src/components/kemet-select/kemet-select.js.map +1 -0
  742. package/dist/src/components/kemet-select/styles.d.ts +1 -0
  743. package/dist/src/components/kemet-select/styles.js +73 -0
  744. package/dist/src/components/kemet-select/styles.js.map +1 -0
  745. package/dist/src/components/kemet-select/types.d.ts +20 -0
  746. package/dist/src/components/kemet-select/types.js +2 -0
  747. package/dist/src/components/kemet-select/types.js.map +1 -0
  748. package/dist/src/components/kemet-sortable/docs/stories.d.ts +10 -0
  749. package/dist/src/components/kemet-sortable/docs/stories.js +34 -0
  750. package/dist/src/components/kemet-sortable/docs/stories.js.map +1 -0
  751. package/dist/src/components/kemet-sortable/kemet-sortable-item.d.ts +21 -0
  752. package/dist/src/components/kemet-sortable/kemet-sortable-item.js +30 -0
  753. package/dist/src/components/kemet-sortable/kemet-sortable-item.js.map +1 -0
  754. package/dist/src/components/kemet-sortable/kemet-sortable.d.ts +25 -0
  755. package/dist/src/components/kemet-sortable/kemet-sortable.js +77 -0
  756. package/dist/src/components/kemet-sortable/kemet-sortable.js.map +1 -0
  757. package/dist/src/components/kemet-sortable/styles.d.ts +2 -0
  758. package/dist/src/components/kemet-sortable/styles.js +22 -0
  759. package/dist/src/components/kemet-sortable/styles.js.map +1 -0
  760. package/dist/src/components/kemet-sortable/types.d.ts +3 -0
  761. package/dist/src/components/kemet-sortable/types.js +2 -0
  762. package/dist/src/components/kemet-sortable/types.js.map +1 -0
  763. package/dist/src/components/kemet-svgs/docs/stories.d.ts +10 -0
  764. package/dist/src/components/kemet-svgs/docs/stories.js +67 -0
  765. package/dist/src/components/kemet-svgs/docs/stories.js.map +1 -0
  766. package/dist/src/components/kemet-svgs/kemet-svg.d.ts +38 -0
  767. package/dist/src/components/kemet-svgs/kemet-svg.js +97 -0
  768. package/dist/src/components/kemet-svgs/kemet-svg.js.map +1 -0
  769. package/dist/src/components/kemet-svgs/kemet-svgs.d.ts +27 -0
  770. package/dist/src/components/kemet-svgs/kemet-svgs.js +51 -0
  771. package/dist/src/components/kemet-svgs/kemet-svgs.js.map +1 -0
  772. package/dist/src/components/kemet-svgs/types.d.ts +10 -0
  773. package/dist/src/components/kemet-svgs/types.js +2 -0
  774. package/dist/src/components/kemet-svgs/types.js.map +1 -0
  775. package/dist/src/components/kemet-tabs/docs/stories.d.ts +9 -0
  776. package/dist/src/components/kemet-tabs/docs/stories.js +142 -0
  777. package/dist/src/components/kemet-tabs/docs/stories.js.map +1 -0
  778. package/dist/src/components/kemet-tabs/kemet-tab-panel.d.ts +27 -0
  779. package/dist/src/components/kemet-tabs/kemet-tab-panel.js +52 -0
  780. package/dist/src/components/kemet-tabs/kemet-tab-panel.js.map +1 -0
  781. package/dist/src/components/kemet-tabs/kemet-tab.d.ts +37 -0
  782. package/dist/src/components/kemet-tabs/kemet-tab.js +79 -0
  783. package/dist/src/components/kemet-tabs/kemet-tab.js.map +1 -0
  784. package/dist/src/components/kemet-tabs/kemet-tabs.d.ts +91 -0
  785. package/dist/src/components/kemet-tabs/kemet-tabs.js +523 -0
  786. package/dist/src/components/kemet-tabs/kemet-tabs.js.map +1 -0
  787. package/dist/src/components/kemet-tabs/styles.d.ts +3 -0
  788. package/dist/src/components/kemet-tabs/styles.js +268 -0
  789. package/dist/src/components/kemet-tabs/styles.js.map +1 -0
  790. package/dist/src/components/kemet-tabs/types.d.ts +27 -0
  791. package/dist/src/components/kemet-tabs/types.js +2 -0
  792. package/dist/src/components/kemet-tabs/types.js.map +1 -0
  793. package/dist/src/components/kemet-textarea/docs/stories.d.ts +9 -0
  794. package/dist/src/components/kemet-textarea/docs/stories.js +88 -0
  795. package/dist/src/components/kemet-textarea/docs/stories.js.map +1 -0
  796. package/dist/src/components/kemet-textarea/kemet-textarea.d.ts +123 -0
  797. package/dist/src/components/kemet-textarea/kemet-textarea.js +293 -0
  798. package/dist/src/components/kemet-textarea/kemet-textarea.js.map +1 -0
  799. package/dist/src/components/kemet-textarea/styles.d.ts +1 -0
  800. package/dist/src/components/kemet-textarea/styles.js +69 -0
  801. package/dist/src/components/kemet-textarea/styles.js.map +1 -0
  802. package/dist/src/components/kemet-textarea/types.d.ts +20 -0
  803. package/dist/src/components/kemet-textarea/types.js +2 -0
  804. package/dist/src/components/kemet-textarea/types.js.map +1 -0
  805. package/dist/src/components/kemet-toggle/docs/stories.d.ts +9 -0
  806. package/dist/src/components/kemet-toggle/docs/stories.js +58 -0
  807. package/dist/src/components/kemet-toggle/docs/stories.js.map +1 -0
  808. package/dist/src/components/kemet-toggle/kemet-toggle.d.ts +60 -0
  809. package/dist/src/components/kemet-toggle/kemet-toggle.js +130 -0
  810. package/dist/src/components/kemet-toggle/kemet-toggle.js.map +1 -0
  811. package/dist/src/components/kemet-toggle/styles.d.ts +1 -0
  812. package/dist/src/components/kemet-toggle/styles.js +84 -0
  813. package/dist/src/components/kemet-toggle/styles.js.map +1 -0
  814. package/dist/src/components/kemet-toggle/types.d.ts +10 -0
  815. package/dist/src/components/kemet-toggle/types.js +2 -0
  816. package/dist/src/components/kemet-toggle/types.js.map +1 -0
  817. package/dist/src/components/kemet-tooltip/docs/stories.d.ts +10 -0
  818. package/dist/src/components/kemet-tooltip/docs/stories.js +72 -0
  819. package/dist/src/components/kemet-tooltip/docs/stories.js.map +1 -0
  820. package/dist/src/components/kemet-tooltip/kemet-tooltip.d.ts +33 -0
  821. package/dist/src/components/kemet-tooltip/kemet-tooltip.js +68 -0
  822. package/dist/src/components/kemet-tooltip/kemet-tooltip.js.map +1 -0
  823. package/dist/src/components/kemet-tooltip/styles.d.ts +1 -0
  824. package/dist/src/components/kemet-tooltip/styles.js +61 -0
  825. package/dist/src/components/kemet-tooltip/styles.js.map +1 -0
  826. package/dist/src/components/kemet-tooltip/types.d.ts +3 -0
  827. package/dist/src/components/kemet-tooltip/types.js +2 -0
  828. package/dist/src/components/kemet-tooltip/types.js.map +1 -0
  829. package/dist/src/components/kemet-tracker/docs/stories.d.ts +10 -0
  830. package/dist/src/components/kemet-tracker/docs/stories.js +46 -0
  831. package/dist/src/components/kemet-tracker/docs/stories.js.map +1 -0
  832. package/dist/src/components/kemet-tracker/kemet-tracker-step.d.ts +63 -0
  833. package/dist/src/components/kemet-tracker/kemet-tracker-step.js +127 -0
  834. package/dist/src/components/kemet-tracker/kemet-tracker-step.js.map +1 -0
  835. package/dist/src/components/kemet-tracker/kemet-tracker.d.ts +26 -0
  836. package/dist/src/components/kemet-tracker/kemet-tracker.js +70 -0
  837. package/dist/src/components/kemet-tracker/kemet-tracker.js.map +1 -0
  838. package/dist/src/components/kemet-tracker/styles.d.ts +1 -0
  839. package/dist/src/components/kemet-tracker/styles.js +111 -0
  840. package/dist/src/components/kemet-tracker/styles.js.map +1 -0
  841. package/dist/src/components/kemet-tracker/types.d.ts +13 -0
  842. package/dist/src/components/kemet-tracker/types.js +2 -0
  843. package/dist/src/components/kemet-tracker/types.js.map +1 -0
  844. package/dist/src/components/kemet-upload/docs/stories.d.ts +10 -0
  845. package/dist/src/components/kemet-upload/docs/stories.js +57 -0
  846. package/dist/src/components/kemet-upload/docs/stories.js.map +1 -0
  847. package/dist/src/components/kemet-upload/kemet-upload-file.d.ts +46 -0
  848. package/dist/src/components/kemet-upload/kemet-upload-file.js +110 -0
  849. package/dist/src/components/kemet-upload/kemet-upload-file.js.map +1 -0
  850. package/dist/src/components/kemet-upload/kemet-upload.d.ts +58 -0
  851. package/dist/src/components/kemet-upload/kemet-upload.js +154 -0
  852. package/dist/src/components/kemet-upload/kemet-upload.js.map +1 -0
  853. package/dist/src/components/kemet-upload/styles.d.ts +3 -0
  854. package/dist/src/components/kemet-upload/styles.js +169 -0
  855. package/dist/src/components/kemet-upload/styles.js.map +1 -0
  856. package/dist/src/components/kemet-upload/types.d.ts +21 -0
  857. package/dist/src/components/kemet-upload/types.js +2 -0
  858. package/dist/src/components/kemet-upload/types.js.map +1 -0
  859. package/dist/src/stories/styles/borders/borders.stories.d.ts +5 -0
  860. package/dist/src/stories/styles/borders/borders.stories.js +46 -0
  861. package/dist/src/stories/styles/borders/borders.stories.js.map +1 -0
  862. package/dist/src/stories/styles/borders/stories.d.ts +5 -0
  863. package/dist/src/stories/styles/borders/stories.js +46 -0
  864. package/dist/src/stories/styles/borders/stories.js.map +1 -0
  865. package/dist/src/stories/styles/borders.stories.d.ts +5 -0
  866. package/dist/src/stories/styles/borders.stories.js +46 -0
  867. package/dist/src/stories/styles/borders.stories.js.map +1 -0
  868. package/dist/src/stories/styles/elevation/elevation.stories.d.ts +1 -0
  869. package/dist/src/stories/styles/elevation/elevation.stories.js +15 -0
  870. package/dist/src/stories/styles/elevation/elevation.stories.js.map +1 -0
  871. package/dist/src/stories/styles/elevation/stories.d.ts +5 -0
  872. package/dist/src/stories/styles/elevation/stories.js +21 -0
  873. package/dist/src/stories/styles/elevation/stories.js.map +1 -0
  874. package/dist/src/stories/styles/flexcolumn/stories.d.ts +6 -0
  875. package/dist/src/stories/styles/flexcolumn/stories.js +44 -0
  876. package/dist/src/stories/styles/flexcolumn/stories.js.map +1 -0
  877. package/dist/src/stories/styles/flexgrid/stories.d.ts +6 -0
  878. package/dist/src/stories/styles/flexgrid/stories.js +44 -0
  879. package/dist/src/stories/styles/flexgrid/stories.js.map +1 -0
  880. package/dist/src/stories/styles/flexlist/stories.d.ts +7 -0
  881. package/dist/src/stories/styles/flexlist/stories.js +45 -0
  882. package/dist/src/stories/styles/flexlist/stories.js.map +1 -0
  883. package/dist/src/stories/styles/flexrow/stories.d.ts +10 -0
  884. package/dist/src/stories/styles/flexrow/stories.js +77 -0
  885. package/dist/src/stories/styles/flexrow/stories.js.map +1 -0
  886. package/dist/src/stories/styles/spacing/stories.d.ts +6 -0
  887. package/dist/src/stories/styles/spacing/stories.js +49 -0
  888. package/dist/src/stories/styles/spacing/stories.js.map +1 -0
  889. package/dist/src/stories/styles/typealignment/stories.d.ts +5 -0
  890. package/dist/src/stories/styles/typealignment/stories.js +14 -0
  891. package/dist/src/stories/styles/typealignment/stories.js.map +1 -0
  892. package/dist/src/stories/styles/typography/stories.d.ts +6 -0
  893. package/dist/src/stories/styles/typography/stories.js +41 -0
  894. package/dist/src/stories/styles/typography/stories.js.map +1 -0
  895. package/dist/src/stories/styles/visibility/stories.d.ts +6 -0
  896. package/dist/src/stories/styles/visibility/stories.js +60 -0
  897. package/dist/src/stories/styles/visibility/stories.js.map +1 -0
  898. package/dist/src/stories/templates/bootstrap/stories.d.ts +6 -0
  899. package/dist/src/stories/templates/bootstrap/stories.js +159 -0
  900. package/dist/src/stories/templates/bootstrap/stories.js.map +1 -0
  901. package/dist/src/stories/templates/foundation/stories.d.ts +8 -0
  902. package/dist/src/stories/templates/foundation/stories.js +911 -0
  903. package/dist/src/stories/templates/foundation/stories.js.map +1 -0
  904. package/dist/src/utilities/controllers/forms.d.ts +11 -0
  905. package/dist/src/utilities/controllers/forms.js +102 -0
  906. package/dist/src/utilities/controllers/forms.js.map +1 -0
  907. package/dist/src/utilities/misc/constants.d.ts +5 -0
  908. package/dist/src/utilities/misc/constants.js +6 -0
  909. package/dist/src/utilities/misc/constants.js.map +1 -0
  910. package/dist/src/utilities/misc/events.d.ts +1 -0
  911. package/dist/src/utilities/misc/events.js +4 -0
  912. package/dist/src/utilities/misc/events.js.map +1 -0
  913. package/dist/styles/kemet.base.css +106 -0
  914. package/dist/styles/kemet.base.css.map +1 -0
  915. package/dist/styles/kemet.core.css +37 -762
  916. package/dist/styles/kemet.core.css.map +1 -1
  917. package/dist/tsconfig.tsbuildinfo +1 -0
  918. package/dist/utilities/controllers/forms.d.ts +11 -0
  919. package/dist/utilities/controllers/forms.js +93 -114
  920. package/dist/utilities/controllers/forms.js.map +1 -0
  921. package/dist/utilities/misc/constants.d.ts +5 -0
  922. package/dist/utilities/misc/constants.js +6 -0
  923. package/dist/utilities/misc/constants.js.map +1 -0
  924. package/dist/utilities/misc/decorators.d.ts +1 -0
  925. package/dist/utilities/misc/decorators.js +5 -0
  926. package/dist/utilities/misc/decorators.js.map +1 -0
  927. package/dist/utilities/misc/events.d.ts +1 -0
  928. package/dist/utilities/misc/events.js +2 -3
  929. package/dist/utilities/misc/events.js.map +1 -0
  930. package/package.json +69 -76
  931. package/dist/components/kemet-popover/kemet-popover-close.js +0 -57
  932. package/dist/components/kemet-popover/kemet-popover.js +0 -418
  933. package/dist/components/kemet-popover/styles.tooltip.js +0 -96
  934. package/dist/kemet-components.min.js +0 -3689
  935. package/dist/styles/components/_config.scss +0 -4
  936. package/dist/styles/components/accordion.scss +0 -9
  937. package/dist/styles/components/drawer.scss +0 -11
  938. package/dist/styles/components/modal.scss +0 -8
  939. package/dist/styles/components/scrollsnap.scss +0 -11
  940. package/dist/styles/core/_config.scss +0 -354
  941. package/dist/styles/core/_helpers.scss +0 -407
  942. package/dist/styles/core/attributes.scss +0 -38
  943. package/dist/styles/core/base.scss +0 -38
  944. package/dist/styles/core/layout.scss +0 -169
  945. package/dist/styles/kemet.components.scss +0 -4
  946. package/dist/styles/kemet.core.scss +0 -3
@@ -1,3689 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2019 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- const t=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e=Symbol(),s=new Map;class i{constructor(t,s){if(this._$cssResult$=!0,s!==e)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let e=s.get(this.cssText);return t&&void 0===e&&(s.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const o=t=>new i("string"==typeof t?t:t+"",e),r=(t,...s)=>{const o=1===t.length?t[0]:s.reduce(((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1]),t[0]);return new i(o,e)},a=t?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return o(e)})(t):t
7
- /**
8
- * @license
9
- * Copyright 2017 Google LLC
10
- * SPDX-License-Identifier: BSD-3-Clause
11
- */;var n;const l=window.trustedTypes,d=l?l.emptyScript:"",h=window.reactiveElementPolyfillSupport,c={toAttribute(t,e){switch(e){case Boolean:t=t?d:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},p=(t,e)=>e!==t&&(e==e||t==t),u={attribute:!0,type:String,converter:c,reflect:!1,hasChanged:p};class m extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;null!==(e=this.l)&&void 0!==e||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const i=this._$Eh(s,e);void 0!==i&&(this._$Eu.set(i,s),t.push(i))})),t}static createProperty(t,e=u){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const o=this[t];this[e]=i,this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||u}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eh(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this._$Eg)&&void 0!==e?e:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this._$Eg)||void 0===e||e.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])}))}createRenderRoot(){var e;const s=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return((e,s)=>{t?e.adoptedStyleSheets=s.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):s.forEach((t=>{const s=document.createElement("style"),i=window.litNonce;void 0!==i&&s.setAttribute("nonce",i),s.textContent=t.cssText,e.appendChild(s)}))})(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ES(t,e,s=u){var i,o;const r=this.constructor._$Eh(t,s);if(void 0!==r&&!0===s.reflect){const a=(null!==(o=null===(i=s.converter)||void 0===i?void 0:i.toAttribute)&&void 0!==o?o:c.toAttribute)(e,s.type);this._$Ei=t,null==a?this.removeAttribute(r):this.setAttribute(r,a),this._$Ei=null}}_$AK(t,e){var s,i,o;const r=this.constructor,a=r._$Eu.get(t);if(void 0!==a&&this._$Ei!==a){const t=r.getPropertyOptions(a),n=t.converter,l=null!==(o=null!==(i=null===(s=n)||void 0===s?void 0:s.fromAttribute)&&void 0!==i?i:"function"==typeof n?n:null)&&void 0!==o?o:c.fromAttribute;this._$Ei=a,this[a]=l(e,t.type),this._$Ei=null}}requestUpdate(t,e,s){let i=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||p)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this._$Ep=this._$E_())}async _$E_(){this.isUpdatePending=!0;try{await this._$Ep}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,e)=>this[e]=t)),this._$Et=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null===(e=this._$Eg)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$ES(e,this[e],t))),this._$EC=void 0),this._$EU()}updated(t){}firstUpdated(t){}}
12
- /**
13
- * @license
14
- * Copyright 2017 Google LLC
15
- * SPDX-License-Identifier: BSD-3-Clause
16
- */
17
- var f;m.finalized=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:m}),(null!==(n=globalThis.reactiveElementVersions)&&void 0!==n?n:globalThis.reactiveElementVersions=[]).push("1.3.2");const g=globalThis.trustedTypes,v=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,b=`lit$${(Math.random()+"").slice(9)}$`,k="?"+b,y=`<${k}>`,x=document,w=(t="")=>x.createComment(t),$=t=>null===t||"object"!=typeof t&&"function"!=typeof t,E=Array.isArray,S=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,A=/>/g,C=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,z=/'/g,L=/"/g,B=/^(?:script|style|textarea|title)$/i,I=(t=>(e,...s)=>({_$litType$:t,strings:e,values:s}))(1),O=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),P=new WeakMap,D=x.createTreeWalker(x,129,null,!1),M=(t,e)=>{const s=t.length-1,i=[];let o,r=2===e?"<svg>":"",a=S;for(let e=0;e<s;e++){const s=t[e];let n,l,d=-1,h=0;for(;h<s.length&&(a.lastIndex=h,l=a.exec(s),null!==l);)h=a.lastIndex,a===S?"!--"===l[1]?a=_:void 0!==l[1]?a=A:void 0!==l[2]?(B.test(l[2])&&(o=RegExp("</"+l[2],"g")),a=C):void 0!==l[3]&&(a=C):a===C?">"===l[0]?(a=null!=o?o:S,d=-1):void 0===l[1]?d=-2:(d=a.lastIndex-l[2].length,n=l[1],a=void 0===l[3]?C:'"'===l[3]?L:z):a===L||a===z?a=C:a===_||a===A?a=S:(a=C,o=void 0);const c=a===C&&t[e+1].startsWith("/>")?" ":"";r+=a===S?s+y:d>=0?(i.push(n),s.slice(0,d)+"$lit$"+s.slice(d)+b+c):s+b+(-2===d?(i.push(void 0),e):c)}const n=r+(t[s]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==v?v.createHTML(n):n,i]};class U{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const a=t.length-1,n=this.parts,[l,d]=M(t,e);if(this.el=U.createElement(l,s),D.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=D.nextNode())&&n.length<a;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(b)){const s=d[r++];if(t.push(e),void 0!==s){const t=i.getAttribute(s.toLowerCase()+"$lit$").split(b),e=/([.?@])?(.*)/.exec(s);n.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?Y:"?"===e[1]?V:"@"===e[1]?F:R})}else n.push({type:6,index:o})}for(const e of t)i.removeAttribute(e)}if(B.test(i.tagName)){const t=i.textContent.split(b),e=t.length-1;if(e>0){i.textContent=g?g.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],w()),D.nextNode(),n.push({type:2,index:++o});i.append(t[e],w())}}}else if(8===i.nodeType)if(i.data===k)n.push({type:2,index:o});else{let t=-1;for(;-1!==(t=i.data.indexOf(b,t+1));)n.push({type:7,index:o}),t+=b.length-1}o++}}static createElement(t,e){const s=x.createElement("template");return s.innerHTML=t,s}}function X(t,e,s=t,i){var o,r,a,n;if(e===O)return e;let l=void 0!==i?null===(o=s._$Cl)||void 0===o?void 0:o[i]:s._$Cu;const d=$(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==d&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===d?l=void 0:(l=new d(t),l._$AT(t,s,i)),void 0!==i?(null!==(a=(n=s)._$Cl)&&void 0!==a?a:n._$Cl=[])[i]=l:s._$Cu=l),void 0!==l&&(e=X(t,l._$AS(t,e.values),l,i)),e}class N{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:s},parts:i}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:x).importNode(s,!0);D.currentNode=o;let r=D.nextNode(),a=0,n=0,l=i[0];for(;void 0!==l;){if(a===l.index){let e;2===l.type?e=new q(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new j(r,this,t)),this.v.push(e),l=i[++n]}a!==(null==l?void 0:l.index)&&(r=D.nextNode(),a++)}return o}m(t){let e=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class q{constructor(t,e,s,i){var o;this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cg=null===(o=null==i?void 0:i.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=X(this,t,e),$(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==O&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):(t=>{var e;return E(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.S(t):this.$(t)}M(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==T&&$(this._$AH)?this._$AA.nextSibling.data=t:this.k(x.createTextNode(t)),this._$AH=t}T(t){var e;const{values:s,_$litType$:i}=t,o="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=U.createElement(i.h,this.options)),i);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.m(s);else{const t=new N(o,this),e=t.p(this.options);t.m(s),this.k(e),this._$AH=t}}_$AC(t){let e=P.get(t.strings);return void 0===e&&P.set(t.strings,e=new U(t)),e}S(t){E(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new q(this.M(w()),this.M(w()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cg=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class R{constructor(t,e,s,i,o){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=T}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const o=this.strings;let r=!1;if(void 0===o)t=X(this,t,e,0),r=!$(t)||t!==this._$AH&&t!==O,r&&(this._$AH=t);else{const i=t;let a,n;for(t=o[0],a=0;a<o.length-1;a++)n=X(this,i[s+a],e,a),n===O&&(n=this._$AH[a]),r||(r=!$(n)||n!==this._$AH[a]),n===T?t=T:t!==T&&(t+=(null!=n?n:"")+o[a+1]),this._$AH[a]=n}r&&!i&&this.C(t)}C(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class Y extends R{constructor(){super(...arguments),this.type=3}C(t){this.element[this.name]=t===T?void 0:t}}const H=g?g.emptyScript:"";class V extends R{constructor(){super(...arguments),this.type=4}C(t){t&&t!==T?this.element.setAttribute(this.name,H):this.element.removeAttribute(this.name)}}class F extends R{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){var s;if((t=null!==(s=X(this,t,e,0))&&void 0!==s?s:T)===O)return;const i=this._$AH,o=t===T&&i!==T||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,r=t!==T&&(i===T||o);o&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class j{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){X(this,t)}}const K=window.litHtmlPolyfillSupport;
18
- /**
19
- * @license
20
- * Copyright 2017 Google LLC
21
- * SPDX-License-Identifier: BSD-3-Clause
22
- */
23
- var W,J;null==K||K(U,q),(null!==(f=globalThis.litHtmlVersions)&&void 0!==f?f:globalThis.litHtmlVersions=[]).push("2.2.3");class Z extends m{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,e,s)=>{var i,o;const r=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let a=r._$litPart$;if(void 0===a){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;r._$litPart$=a=new q(e.insertBefore(w(),t),t,void 0,null!=s?s:{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return O}}Z.finalized=!0,Z._$litElement$=!0,null===(W=globalThis.litElementHydrateSupport)||void 0===W||W.call(globalThis,{LitElement:Z});const G=globalThis.litElementPolyfillSupport;null==G||G({LitElement:Z}),(null!==(J=globalThis.litElementVersions)&&void 0!==J?J:globalThis.litElementVersions=[]).push("3.2.0");const Q=(t,e,s,i=!0,o=!0)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:i,composed:o,detail:s}))};customElements.get("kemet-icon")||customElements.define("kemet-icon",class extends Z{static get properties(){return{icon:{type:String},set:{type:String},size:{type:Number}}}static get styles(){return[r`
24
- :host {
25
- display: inline-flex;
26
- align-items: center;
27
- justify-content: center;
28
- }
29
- `]}constructor(){super(),this.set="bootstrap",this.icon="alarm",this.size=16}updated(){this.getIcon(),this.style.width=`${this.size}px`,this.style.height=`${this.size}px`}render(){return I``}async getIcon(){const t=new DOMParser;let e;try{if(e=await fetch(`${this.getUrl()}/${this.icon}.svg`).then((t=>t.text())),e.indexOf("</svg>")<0)throw new Error("Not a valid svg.")}catch(t){e="",console.error(t)}const s=t.parseFromString(e,"image/svg+xml").documentElement,i=this.shadowRoot.querySelector("svg");if("svg"===s.tagName)s.setAttribute("id",this.icon),s.setAttribute("width",`${this.size}px`),s.setAttribute("height",`${this.size}px`),s.setAttribute("fill","currentColor"),i&&i.remove(),this.shadowRoot.appendChild(s);else{console.error(`Could not find icon "${this.icon}" in set "${this.set}"`);const e=`\n <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="kemet-error" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" width="${this.size}" height="${this.size}">\n <style type="text/css">\n .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}\n .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EC1C24;}\n </style>\n <g>\n <path class="st0" d="M256,0c70.7,0,134.7,28.7,181,75c46.3,46.3,75,110.3,75,181c0,70.7-28.7,134.7-75,181 c-46.3,46.3-110.3,75-181,75c-70.7,0-134.7-28.7-181-75C28.7,390.7,0,326.7,0,256c0-70.7,28.7-134.7,75-181S185.3,0,256,0z"/>\n <path class="st1" d="M512,256c0-70.7-28.7-134.7-75-181C390.7,28.7,326.7,0,256,0C193,0,135.5,22.8,90.9,60.6l-0.1-0.1 C85.3,65.1,80,69.9,75,75c-5,5.1-9.9,10.3-14.5,15.8l0.1,0.1C22.8,135.5,0,193,0,256c0,70.7,28.7,134.7,75,181 c46.3,46.3,110.3,75,181,75c63,0,120.5-22.8,165.1-60.6l0.1,0.1c5.4-4.6,10.7-9.5,15.8-14.5c5-5,9.9-10.3,14.5-15.8l-0.1-0.1 C489.2,376.6,512,319,512,256z M256,42.9c58.9,0,112.1,23.9,150.7,62.4c38.6,38.6,62.4,91.9,62.4,150.7c0,51.1-18.1,98-48.1,134.8 L121.2,90.9C158,60.9,204.9,42.9,256,42.9z M256,469.1c-58.8,0-112.1-23.9-150.7-62.4C66.7,368.1,42.9,314.9,42.9,256 c0-51.1,18.1-98,48.1-134.8l299.8,299.8C354,451.1,307.1,469.1,256,469.1z"/>\n </g>\n </svg>\n `,s=t.parseFromString(e,"image/svg+xml").documentElement;i&&i.remove(),this.shadowRoot.appendChild(s)}}getUrl(){let t;switch(this.set){case"bootstrap":default:t="https://unpkg.com/bootstrap-icons@latest/icons";break;case"font-awesome-brands":t="https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/brands";break;case"font-awesome-regular":t="https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/regular";break;case"font-awesome-solid":t="https://unpkg.com/@fortawesome/fontawesome-free@latest/svgs/solid"}return t}});customElements.get("kemet-accordion-panel")||customElements.define("kemet-accordion-panel",class extends Z{static get styles(){return[r`
30
- *,
31
- *::before,
32
- *::after {
33
- box-sizing: border-box;
34
- }
35
-
36
- :host {
37
- display: block;
38
- padding: 1.5rem 1rem;
39
- border-bottom: 1px solid var(--kemet-color-primary);
40
- }
41
-
42
- .trigger {
43
- cursor: pointer;
44
- display: grid;
45
- gap: 1rem;
46
- grid-template-columns: 1fr auto;
47
- width: 100%;
48
- text-align: left;
49
- padding: 0;
50
- border: none;
51
- background: none;
52
- }
53
-
54
- .body {
55
- overflow: hidden;
56
- transition: all var(--kemet-accordion-panel-transition-speed, 300ms) ease;
57
- }
58
-
59
- ::slotted([slot='body']) {
60
- padding: 1rem 0;
61
- }
62
- `]}static get properties(){return{opened:{type:Boolean,reflect:!0},maxHeight:{type:String,attribute:"max-height"},slug:{type:String}}}constructor(){super(),this.opened=void 0,this.maxHeight="0px",this.slug="panel"}firstUpdated(){this.focusableSelector="body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",this.bodyElement=this.querySelector('[slot="body"]'),this.bodyElementFirst=this.bodyElement.querySelector(":first-child"),this.bodyElementLast=this.bodyElement.querySelector(":last-child"),this.bodyElementFirst&&(this.bodyElementFirst.style.marginTop=0),this.bodyELementLast&&(this.bodyElementLast.style.marginBottom=0)}updated(t){t.get("opened")||!0!==this.opened||(this.maxHeight=`${this.bodyElement.offsetHeight}px`,Q(this,"kemet-accordion-panel-opened",this)),t.get("opened")&&!1===this.opened&&(this.maxHeight="0px",Q(this,"kemet-accordion-panel-closed",this)),this.a11y(),this.focusableBodyElements()}render(){return I`
63
- <button
64
- class="trigger"
65
- part="trigger"
66
- @click=${()=>this.toggle()}
67
- @keydown=${t=>this.handleKeyDown(t)}
68
- >
69
- <slot name="trigger"></slot>
70
- <slot name="icon"></slot>
71
- </button>
72
- <section class="body" part="body" style="max-height:${this.maxHeight};">
73
- <slot name="body"></slot>
74
- </section>
75
- `}toggle(){this.opened=!this.opened}focusableBodyElements(){const t=this.bodyElement.querySelectorAll(this.focusableSelector);this.opened?t.forEach((t=>{t.removeAttribute("tabindex")})):t.forEach((t=>{t.setAttribute("tabindex","-1")}))}a11y(){const t=this.shadowRoot.querySelector(".trigger"),e=this.shadowRoot.querySelector(".body");t.setAttribute("id",`${this.slug}-button`),t.setAttribute("aria-controls",`${this.slug}-content`),e.setAttribute("id",`${this.slug}-content`),e.setAttribute("aria-labelledby",`${this.slug}-button`),e.setAttribute("aria-hidden",`${!this.opened}`)}handleKeyDown(t){"Space"!==t.key&&"Enter"!==t.key||this.toggle()}});const tt=r`
76
- :host {
77
- --kemet-alert-padding: 1rem;
78
- --kemet-alert-border-thickness: 4px;
79
- --kemet-alert-status-color: inherit;
80
-
81
- display: flex;
82
- grid-template-columns: auto 1fr auto;
83
- gap: var(--kemet-alert-gap, var(--kemet-alert-padding));
84
- align-items: var(--kemet-alert-align-items, center);
85
- opacity: 0;
86
- padding: var(--kemet-alert-padding);
87
- border: var(--kemet-alert-border, 1px solid var(--kemet-color-gray2));
88
- transition: opacity 300ms ease;
89
- }
90
-
91
- :host([opened]) {
92
- opacity: 1;
93
- }
94
-
95
- :host([border-status="top"]) {
96
- border-top: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
97
- }
98
-
99
- :host([border-status="right"]) {
100
- border-right: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
101
- }
102
-
103
- :host([border-status="bottom"]) {
104
- border-bottom: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
105
- }
106
-
107
- :host([border-status="left"]) {
108
- border-left: var(--kemet-alert-border-thickness) solid var(--kemet-alert-status-color);
109
- }
110
-
111
- :host([status="standard"]) {
112
- --kemet-alert-status-color: var(--kemet-color-black);
113
- }
114
-
115
- :host([status="primary"]) {
116
- --kemet-alert-status-color: var(--kemet-color-primary);
117
- }
118
-
119
- :host([status="success"]) {
120
- --kemet-alert-status-color: var(--kemet-color-success);
121
- }
122
-
123
- :host([status="warning"]) {
124
- --kemet-alert-status-color: var(--kemet-color-warning);
125
- }
126
-
127
- :host([status="error"]) {
128
- --kemet-alert-status-color: var(--kemet-color-error);
129
- }
130
-
131
- :host([hidden]) {
132
- display: none;
133
- }
134
-
135
- :host([reveal]) {
136
- animation: fadeIn 300ms ease forwards;
137
- }
138
-
139
- :host([overlay]) {
140
- position: fixed;
141
- }
142
-
143
- :host([overlay*="full"]) {
144
- width: 100%;
145
- }
146
-
147
- :host([overlay*="top"]) {
148
- top: 0;
149
- }
150
-
151
- :host([overlay*="bottom"]) {
152
- bottom: 0;
153
- }
154
-
155
- :host([overlay*="left"]) {
156
- left: 0;
157
- }
158
-
159
- :host([overlay*="right"]) {
160
- right: 0;
161
- }
162
-
163
- .close {
164
- cursor: pointer;
165
- margin-left: auto;
166
- }
167
-
168
- ::slotted(kemet-icon) {
169
- color: var(--kemet-alert-status-color);
170
- }
171
-
172
- @keyframes fadeIn {
173
- from { opacity: 0; }
174
- to { opacity: 1; }
175
- }
176
- `;customElements.get("kemet-alert")||customElements.define("kemet-alert",class extends Z{static get styles(){return[tt]}static get properties(){return{opened:{type:Boolean,reflect:!0},reveal:{type:Boolean,reflect:!0},closable:{type:Boolean,reflect:!0},borderStatus:{type:String,reflect:!0,attribute:"border-status"},hidden:{type:Boolean,reflect:!0},overlay:{type:String,reflect:!0}}}shouldUpdate(t){return t.has("opened")&&!t.get("opened")&&(this.hidden=!1,this.reveal=!0),!0}firstUpdated(){this.handleMotion()}updated(t){t.get("opened")||!0!==this.opened?Q(this,"kemet-alert-closed",this):Q(this,"kemet-alert-opened",this)}render(){return I`
177
- <slot name="icon"></slot>
178
- <div>
179
- <slot></slot>
180
- </div>
181
- <div class="close" part="close">
182
- ${this.makeCloseBtn()}
183
- </div>
184
- `}makeCloseBtn(){return this.closable?I`<kemet-icon icon="x-lg" @click=${()=>{this.opened=!1}}></kemet-icon>`:null}handleMotion(){this.addEventListener("transitionend",(()=>{this.opened||(this.hidden=!0)})),this.addEventListener("animationend",(()=>{this.reveal=!1}))}});customElements.get("kemet-accordion")||customElements.define("kemet-accordion",class extends Z{static get styles(){return[r`
185
- :host {
186
- display: block;
187
- }
188
- `]}static get properties(){return{currentPanel:{type:Number},togglePanels:{type:Boolean,attribute:"toggle-panels"}}}constructor(){super(),this.togglePanels=!1,this.currentPanel=void 0,this.addEventListener("kemet-accordion-panel-opened",this.handlePanelOpened.bind(this))}firstUpdated(){this.onKeyDown=t=>this.handleKeyDown(t)}render(){return I`<slot @slotchange=${t=>this.handleSlotChange(t)}></slot>`}handleSlotChange(){this.panels=this.querySelectorAll("kemet-accordion-panel"),this.panels.forEach((t=>{t.removeEventListener("keydown",this.onKeyDown),t.addEventListener("keydown",this.onKeyDown)}))}handlePanelOpened(t){this.togglePanels&&this.panels.forEach((e=>{e!==t.detail&&(e.opened=!1)}))}navigatePanels(t){switch(t){case"home":this.currentPanel=0;break;case"end":this.currentPanel=this.panels.length-1;break;case"next":this.currentPanel+=1;break;case"prev":this.currentPanel-=1;break;default:this.currentPanelFocus=0}this.currentPanel>this.panels.length-1&&(this.currentPanel=0),this.currentPanel<0&&(this.currentPanel=this.panels.length-1),this.panels[this.currentPanel].shadowRoot.querySelector("button").focus()}handleKeyDown(t){switch(t.key){case"Enter":case"Space":t.preventDefault(),t.target.click();break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),this.navigatePanels("prev");break;case"ArrowRight":case"ArrowDown":t.preventDefault(),this.navigatePanels("next");break;case"End":t.preventDefault(),this.navigatePanels("end");break;case"Home":t.preventDefault(),this.navigatePanels("home")}}expandAll(){this.panels.forEach((t=>{t.opened=!0}))}collapseAll(){this.panels.forEach((t=>{t.opened=!1}))}});customElements.get("kemet-avatar")||customElements.define("kemet-avatar",class extends Z{static get styles(){return[r`
189
- *,
190
- *::before,
191
- *::after {
192
- box-sizing: border-box;
193
- }
194
-
195
- :host {
196
- display: inline-flex;
197
- color: var(--kemet-avatar-color, var(--kemet-color-white));
198
- position: relative;
199
- background-color: var(--kemet-avatar-background-color, var(--kemet-color-gray4));
200
- }
201
-
202
- :host([circle]) {
203
- border-radius: 50%;
204
- }
205
-
206
- :host([circle]) > * {
207
- border-radius: 50%;
208
- }
209
-
210
- :host([rounded]) {
211
- border-radius: var(--kemet-avatar-rounded-radius, 1rem);
212
- }
213
-
214
- :host([rounded]) > * {
215
- border-radius: var(--kemet-avatar-rounded-radius, 1rem);
216
- }
217
-
218
- .initials {
219
- margin: var(--kemet-avatar-initials-margin, 1rem);
220
- }
221
-
222
- ::slotted(kemet-badge) {
223
- position: absolute;
224
- bottom: 0;
225
- right: 0;
226
- border-radius: 50%;
227
- }
228
- `]}static get properties(){return{size:{type:Number},image:{type:String},label:{type:String},initials:{type:String},circle:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0}}}firstUpdated(){this.makeSize()}render(){return I`
229
- ${this.makeContent()}
230
- <slot name="status"></slot>
231
- `}makeSize(){this.size&&(this.style.width=`${this.size}px`,this.style.height=`${this.size}px`)}makeContent(){return this.image?I`<img src=${this.image} alt=${this.label} />`:this.initials?I`<div part="initials" class="initials">${this.initials}</div>`:I`<slot></slot>`}});customElements.get("kemet-avatars")||customElements.define("kemet-avatars",class extends Z{static get styles(){return[r`
232
- *,
233
- *::before,
234
- *::after {
235
- box-sizing: border-box;
236
- }
237
-
238
- :host {
239
- display: inline-flex;
240
- }
241
-
242
- ::slotted(kemet-avatar:not(:first-of-type)) {
243
- margin-left: var(--kemet-avatars-squeeze, -1.5rem);
244
- }
245
- `]}render(){return I`<slot></slot>`}});customElements.get("kemet-badge")||customElements.define("kemet-badge",class extends Z{static get styles(){return[r`
246
- :host {
247
- display: inline-flex;
248
- align-items: center;
249
- justify-content: center;
250
- padding: var(--kemet-badge-padding, 10px);
251
- line-height: 1;
252
- color: var(--kemet-color-white);
253
- }
254
-
255
- :host([status='primary']) {
256
- background-color: var(--kemet-color-primary);
257
- }
258
-
259
- :host([status='success']) {
260
- background-color: var(--kemet-color-success);
261
- }
262
-
263
- :host([status='standard']) {
264
- background-color: var(--kemet-color-gray6);
265
- }
266
-
267
- :host([status='warning']) {
268
- background-color: var(--kemet-color-warning);
269
- }
270
-
271
- :host([status='error']) {
272
- background-color: var(--kemet-color-error);
273
- }
274
-
275
- :host([circle]) {
276
- border-radius: 50%;
277
- }
278
-
279
- :host([pill]) {
280
- border-radius: 99rem;
281
- }
282
- `]}static get properties(){return{status:{type:String,reflect:!0},circle:{type:Boolean,reflect:!0},pill:{type:Boolean,reflect:!0},circlePadding:{type:Number,attribute:"circle-padding"}}}constructor(){super(),this.status="primary",this.pill=!1,this.circle=!1,this.circlePadding=0}render(){return I`<slot @slotchange=${()=>this.handleSlotChange()}></slot>`}handleSlotChange(){this.circle&&(this.style.height=`${this.offsetWidth+this.circlePadding}px`,this.style.width=`${this.offsetWidth+this.circlePadding}px`)}});class et{host;form;options;constructor(t,e){(this.host=t).addController(this),this.options={form:t=>t.closest("form"),name:t=>t.name,value:t=>t.value,disabled:t=>t.disabled,checkValidity:t=>"function"!=typeof t.checkValidity||t.checkValidity(),...e},this.handleFormData=this.handleFormData.bind(this),this.handleFormSubmit=this.handleFormSubmit.bind(this)}hostConnected(){this.form=this.options.form(this.host),this.form&&(this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit))}hostDisconnected(){this.form&&(this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form=void 0)}handleFormData(t){const e=this.options.disabled(this.host),s=this.options.name(this.host),i=this.options.value(this.host);e||"string"!=typeof s||void 0===i||(Array.isArray(i)?i.forEach((e=>{t.formData?.append(s,e.toString())})):t.formData?.append(s,i.toString()))}handleFormSubmit(t){const e=this.options.disabled(this.host),s=this.options.checkValidity;if(this.form=this.options.form(this.host),this.form&&!this.form.noValidate&&!e&&!s(this.host)){t.preventDefault(),t.stopImmediatePropagation();this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios").forEach((t=>{t.checkValidity(),t.checkValidity()||(t.status="error",t.invalid=!0,t.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:t.validity?t.validity:{},element:t}}))),t.checkLimitValidity&&!t.checkLimitValidity()&&(t.status="error",t.invalid=!0,t.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:{passedLimit:!0},element:t}})))}))}}submit(){const t=document.createElement("button");this.form&&(t.type="submit",t.style.position="absolute",t.style.width="0",t.style.height="0",t.style.clip="rect(0 0 0 0)",t.style.clipPath="inset(50%)",t.style.overflow="hidden",t.style.whiteSpace="nowrap",this.form.append(t),t.click(),t.remove())}}customElements.get("kemet-button")||customElements.define("kemet-button",class extends Z{static get styles(){return[r`
283
- :host {
284
- cursor: pointer;
285
- display: inline-flex;
286
- align-items: center;
287
- justify-content: center;
288
- font-size: var(--kemet-button-font-size, inherit);
289
- color: var(--kemet-button-color, var(--kemet-color-white));
290
- width: var(--kemet-button-width, auto);
291
- height: var(--kemet-button-height, auto);
292
- border: var(--kemet-button-border, 0);
293
- border-radius: var(--kemet-button-border-radius, 0);
294
- transition: filter var(--kemet-button-transition-speed, 300ms) ease;
295
- background-color: var(--kemet-button-background-color, var(--kemet-color-primary));
296
- }
297
-
298
- :host(:hover:not([disabled])) {
299
- filter: brightness(var(--kemet-button-hover-brightness, 1.25));
300
- }
301
-
302
- :host([disabled]) {
303
- opacity: var(--kemet-button-disabled-opacity, 0.5);
304
- }
305
-
306
- .button {
307
- cursor: pointer;
308
- text-decoration: none;
309
- display: flex;
310
- gap: var(--kemet-button-gap, 0.5rem);
311
- align-items: center;
312
- color: inherit;
313
- font-size: inherit;
314
- padding: var(--kemet-button-padding, 1rem 1.25rem);
315
- border: 0;
316
- background: none;
317
- }
318
-
319
- :host([disabled]) .button {
320
- cursor: not-allowed;
321
- }
322
-
323
- :host([type='text']) {
324
- --kemet-button-color: var(--kemet-color-primary);
325
- --kemet-button-background-color: none;
326
- }
327
-
328
- :host([type='text']:hover) {
329
- text-decoration: var(--kemet-button-hover-decoration, underline);
330
- }
331
-
332
- :host([type='circle']) {
333
- --kemet-button-border-radius: 50%;
334
- --kemet-button-width: var(--kemet-button-circle-size, 50px);
335
- --kemet-button-height: var(--kemet-button-circle-size, 50px);
336
- }
337
-
338
- :host([type='rounded']) {
339
- --kemet-button-border-radius: var(--kemet-button-rounded-amount, 6px);
340
- }
341
-
342
- :host([type='pill']) {
343
- --kemet-button-border-radius: 10rem;
344
- }
345
-
346
- :host([outlined]) {
347
- --kemet-button-color: var(--kemet-color-primary);
348
- --kemet-button-background-color: var(--kemet-color-white);
349
- --kemet-button-border: var(--kemet-button-border-width, 1px) var(--kemet-button-border-style, solid) var(--kemet-button-border-color, var(--kemet-color-primary));
350
- }
351
- `]}static get properties(){return{active:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},link:{type:String},outlined:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},type:{type:String,reflect:!0}}}constructor(){super(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("mouseover",this.handleMouseOver.bind(this)),this.addEventListener("mouseout",this.handleMouseOut.bind(this)),this.addEventListener("blur",this.handleBlur.bind(this)),this.addEventListener("keyup",(t=>this.handleKeyUp(t))),this.type="standard",this.outline=!1,this.disable=!1,this.formSubmitController=new et(this)}render(){return this.link&&!this.disabled?I`
352
- <a href=${this.link} class="button" role="button" part="button">
353
- <slot name="left"></slot>
354
- <slot></slot>
355
- <slot name="right"></slot>
356
- </a>
357
- `:I`
358
- <button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled?"true":"false"}>
359
- <slot name="left"></slot>
360
- <slot></slot>
361
- <slot name="right"></slot>
362
- </button>
363
- `}handleMouseOver(){this.hover=!0}handleMouseOut(){this.hover=!1}handleClick(){this.hover=!1,this.active=!0,setTimeout((()=>{this.active=!1}),300),this.shadowRoot.querySelector("button")&&this.formSubmitController.submit(this)}handleBlur(){this.focused=!1,this.active=!1,this.hover=!1}handleKeyUp(t){"Tab"===t.key&&(this.focused=!0)}});const st=r`
364
- *,
365
- *::before,
366
- *::after {
367
- box-sizing: border-box;
368
- }
369
-
370
- :host {
371
- --kemet-card-padding: 1rem;
372
- --kemet-card-border-color: var(--kemet-color-gray4);
373
-
374
- color: var(--kemet-card-color, var(--kemet-color-black));
375
- display: inline-flex;
376
- flex-direction: column;
377
- max-width: var(--kemet-card-max-width, 360px);
378
- border: var(--kemet-card-border, 1px solid var(--kemet-card-border-color));
379
- border-radius: var(--kemet-card-border-radius, 0);
380
- background-color: var(--kemet-card-background-color, var(--kemet-color-white));
381
- }
382
-
383
- :host([center]) {
384
- align-items: center;
385
- text-align: center;
386
- }
387
-
388
- .body {
389
- padding: var(--kemet-card-body-padding, var(--kemet-card-padding));
390
- }
391
-
392
- .media {
393
- position: relative;
394
- }
395
-
396
- ::slotted(*) {
397
- max-width: 100%;
398
- }
399
-
400
- ::slotted(img) {
401
- display: flex;
402
- max-width: 100%;
403
- }
404
-
405
- ::slotted([slot="header"]) {
406
- padding: var(--kemet-card-header-padding, var(--kemet-card-padding));
407
- border-bottom: var(--kemet-card-header-border-bottom, 1px solid var(--kemet-card-border-color));
408
- }
409
-
410
- ::slotted([slot="caption"]) {
411
- color: var(--kemet-card-caption-color, var(--kemet-color-white));
412
- position: absolute;
413
- bottom: 0;
414
- width: 100%;
415
- padding: var(--kemet-card-caption-padding, calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding));
416
- background-color: var(--kemet-card-caption-background-color, rgba(0,0,0,0.35));
417
- }
418
-
419
- ::slotted([slot="footer"]) {
420
- padding: var(--kemet-card-footer-padding, var(--kemet-card-padding));
421
- border-top: var(--kemet-card-footer-border-top, 1px solid var(--kemet-card-border-color));
422
- }
423
- `;customElements.get("kemet-card")||customElements.define("kemet-card",class extends Z{static get styles(){return[st]}static get properties(){return{center:{type:Boolean,reflect:!0}}}render(){return I`
424
- <slot name="header"></slot>
425
- <div class="media" part="media">
426
- <slot name="media"></slot>
427
- <slot name="caption"></slot>
428
- </div>
429
- <div class="body" part="body">
430
- <slot></slot>
431
- </div>
432
- </div>
433
- <slot name="footer"></slot>
434
- `}});
435
- /**
436
- * @license
437
- * Copyright 2018 Google LLC
438
- * SPDX-License-Identifier: BSD-3-Clause
439
- */
440
- const it=t=>null!=t?t:T
441
- /**
442
- * @license
443
- * Copyright 2017 Google LLC
444
- * SPDX-License-Identifier: BSD-3-Clause
445
- */,ot=1,rt=2,at=3,nt=4,lt=t=>(...e)=>({_$litDirective$:t,values:e});class dt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
446
- /**
447
- * @license
448
- * Copyright 2020 Google LLC
449
- * SPDX-License-Identifier: BSD-3-Clause
450
- */const ht={},ct=lt(class extends dt{constructor(t){if(super(t),t.type!==at&&t.type!==ot&&t.type!==nt)throw Error("The `live` directive is not allowed on child or event bindings");if(!(t=>void 0===t.strings)(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===O||e===T)return e;const s=t.element,i=t.name;if(t.type===at){if(e===s[i])return O}else if(t.type===nt){if(!!e===s.hasAttribute(i))return O}else if(t.type===ot&&s.getAttribute(i)===e+"")return O;return((t,e=ht)=>{t._$AH=e;
451
- /**
452
- * @license
453
- * Copyright 2020 Google LLC
454
- * SPDX-License-Identifier: BSD-3-Clause
455
- */})(t),e}});customElements.get("kemet-checkbox")||customElements.define("kemet-checkbox",class extends Z{static get styles(){return[r`
456
- *,
457
- *::before,
458
- *::after {
459
- box-sizing: border-box;
460
- }
461
-
462
- :host {
463
- display: inline-block;
464
- }
465
-
466
- :host([disabled]) {
467
- opacity: 0.5;
468
- }
469
-
470
- label {
471
- display: inline-flex;
472
- gap: 0.5rem;
473
- align-items: center;
474
- }
475
-
476
- input {
477
- cursor: pointer;
478
- margin: 0;
479
- padding: 0;
480
- width: var(--kemet-checkbox-size, 18px);
481
- height: var(--kemet-checkbox-size, 18px);
482
- position: absolute;
483
- opacity: 0;
484
- }
485
-
486
- button {
487
- margin: 0;
488
- border: none;
489
- background: none;
490
- }
491
-
492
- [part='checkbox'] {
493
- color: var(--kemet-checkbox-color, var(--kemet-color-primary));
494
- display: flex;
495
- align-items: center;
496
- justify-content: center;
497
- width: var(--kemet-checkbox-size, 18px);
498
- height: var(--kemet-checkbox-size, 18px);
499
- border: var(--kemet-checkbox-border, 1px solid var(--kemet-color-primary));
500
- }
501
-
502
- :host([rounded]) [part='checkbox'] {
503
- border-radius: var(--kemet-checkbox-border-radius, 4px);
504
- }
505
-
506
- :host([filled][checked]) [part='checkbox'],
507
- :host([filled][indeterminate]) [part='checkbox'] {
508
- border: none;
509
- background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
510
- }
511
-
512
- [part='mark'] {
513
- display: flex;
514
- width: calc(var(--kemet-checkbox-size, 18px) - 4px);
515
- height: calc(var(--kemet-checkbox-size, 18px) - 4px);
516
- }
517
-
518
- :host([filled][checked]) [part='mark'],
519
- :host([filled][indeterminate]) [part='mark'] {
520
- color: var(--kemet-checkbox-filled-color, var(--kemet-color-white));
521
- }
522
-
523
- [part='message'] {
524
- display: block;
525
- margin-top: 0.5rem;
526
- }
527
-
528
- :host([status='error']) [part='message'] {
529
- color: var(--kemet-color-error);
530
- }
531
-
532
- :host([status='warning']) [part='message'] {
533
- color: var(--kemet-color-error);
534
- }
535
- `]}static get properties(){return{label:{type:String},checked:{type:Boolean,reflect:!0},indeterminate:{type:Boolean,reflect:!0},name:{type:String},value:{type:String},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0},filled:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},message:{type:String}}}constructor(){super(),this.label="",this.name="checkbox",this.disabled=!1,this.required=!1,this.rounded=!1,this.filled=!1,this.status="standard",this.formSubmitController=new et(this)}firstUpdated(){this.input=this.shadowRoot.querySelector("input")}render(){return I`
536
- <label part="label">
537
- <input
538
- type="checkbox"
539
- name=${it(this.name)}
540
- .value=${this.value}
541
- .indeterminate=${ct(this.indeterminate)}
542
- .checked=${ct(this.checked)}
543
- .disabled=${this.disabled}
544
- .required=${this.required}
545
- aria-checked=${this.checked?"true":"false"}
546
- @click=${()=>this.handleClick()}
547
- @blur=${()=>this.handleBlur()}
548
- @focus=${()=>this.handleFocus()}
549
- @change=${()=>this.handleChange()}
550
- />
551
- <button part="checkbox" aria-label=${this.label}>
552
- ${this.makeCheckMark()}
553
- </button>
554
- <span part="text">${this.label}</span>
555
- </label>
556
- ${this.makeMessage()}
557
- `}click(){this.input.click()}handleClick(){this.checked=!this.checked,this.indeterminate=!1,Q(this,"kemet-checkbox-change",this)}handleBlur(){this.focused=!1,Q(this,"kemet-checkbox-focused",!1)}handleFocus(){this.focused=!0,Q(this,"kemet-checkbox-focused",!0)}handleChange(){this.value=this.checked,this.input.checkValidity()&&(this.status="standard")}makeMessage(){return"error"===this.status||"warning"===this.status?I`<span part="message">${this.message}</span>`:null}makeCheckMark(){return this.checked?I`
558
- <span part="mark">
559
- <svg viewBox="0 0 16 16">
560
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
561
- <g stroke="currentColor" stroke-width="2">
562
- <g transform="translate(3.428571, 3.428571)">
563
- <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
564
- <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
565
- </g>
566
- </g>
567
- </g>
568
- </svg>
569
- </span>
570
- `:!this.checked&&this.indeterminate?I`
571
- <span part="mark">
572
- <svg viewBox="0 0 16 16">
573
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
574
- <g stroke="currentColor" stroke-width="2">
575
- <g transform="translate(2.285714, 6.857143)">
576
- <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
577
- </g>
578
- </g>
579
- </g>
580
- </svg>
581
- </span>
582
- `:null}checkValidity(){return this.input.checkValidity()}});class pt extends Z{static get styles(){return[r`
583
- :host {
584
- display: inline-block;
585
- }
586
- `]}static get properties(){return{current:{type:Number}}}firstUpdated(){this.carousel=this.closest("kemet-carousel")}updated(){this.current=this.carousel.index+1}render(){return I`${this.current}`}}customElements.get("kemet-carousel-current")||customElements.define("kemet-carousel-current",pt);class ut extends Z{static get styles(){return[r`
587
- :host {
588
- cursor: pointer;
589
- }
590
-
591
- :host([disabled]) {
592
- cursor: not-allowed;
593
- }
594
- `]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
595
- <span tabindex="0" @keyup=${()=>this.first()} @click=${()=>this.first()}>
596
- <slot></slot>
597
- </span>
598
- `}first(){this.disabled||Q(this,"kemet-carousel-first",this)}}customElements.get("kemet-carousel-first")||customElements.define("kemet-carousel-first",ut);class mt extends Z{static get styles(){return[r`
599
- :host {
600
- cursor: pointer;
601
- }
602
-
603
- :host([disabled]) {
604
- cursor: not-allowed;
605
- }
606
- `]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
607
- <span tabindex="0" @keyup=${()=>this.last()} @click=${()=>this.last()}>
608
- <slot></slot>
609
- </span>
610
- `}last(){this.disabled||Q(this,"kemet-carousel-last",this)}}customElements.get("kemet-carousel-last")||customElements.define("kemet-carousel-last",mt);customElements.get("kemet-carousel-next")||customElements.define("kemet-carousel-next",class extends Z{static get styles(){return[r`
611
- :host {
612
- cursor: pointer;
613
- }
614
-
615
- :host([disabled]) {
616
- cursor: not-allowed;
617
- }
618
- `]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
619
- <span tabindex="0" @keyup=${()=>this.next()} @click=${()=>this.next()}>
620
- <slot></slot>
621
- </span>
622
- `}next(){this.disabled||Q(this,"kemet-carousel-next",this)}});customElements.get("kemet-carousel-slide")||customElements.define("kemet-carousel-slide",class extends Z{static get styles(){return[r`
623
- :host,
624
- :host *,
625
- :host *::before,
626
- *::after {
627
- box-sizing: border-box;
628
- }
629
-
630
- :host {
631
- flex: 0 0 auto;
632
- }
633
- `]}static get properties(){return{selected:{type:Boolean,reflect:!0},"aria-hidden":{type:String,reflect:!0}}}constructor(){super(),this.selected=!1,this["aria-hidden"]="true"}render(){return I`
634
- <slot></slot>
635
- `}});class ft extends Z{static get styles(){return[r`
636
- :host {
637
- display: inline-block;
638
- }
639
- `]}static get properties(){return{total:{type:Number}}}firstUpdated(){this.carousel=this.closest("kemet-carousel")}updated(){this.total=this.carousel.total}render(){return I`${this.total}`}}customElements.get("kemet-carousel-total")||customElements.define("kemet-carousel-total",ft);class gt extends Z{static get styles(){return[r`
640
- :host {
641
- cursor: pointer;
642
- }
643
-
644
- :host([disabled]) {
645
- cursor: not-allowed;
646
- }
647
- `]}static get properties(){return{disabled:{type:Boolean,reflect:!0}}}render(){return I`
648
- <span tabindex="0" @keyup=${()=>this.prev()} @click=${()=>this.prev()}>
649
- <slot></slot>
650
- </span>
651
- `}prev(){this.disabled||Q(this,"kemet-carousel-prev",this)}}customElements.get("kemet-carousel-prev")||customElements.define("kemet-carousel-prev",gt);customElements.get("kemet-carousel-link")||customElements.define("kemet-carousel-link",class extends Z{static get properties(){return{slide:{type:Number,reflect:!0},selected:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}}}static get styles(){return[r`
652
- :host([selected]) {
653
- color: var(--kemet-carousel-link-selected-color, var(--kemet-color-primary));
654
- }
655
-
656
- :host(:not([selected])) {
657
- cursor: pointer;
658
- }
659
-
660
- :host([disabled]) {
661
- cursor: not-allowed;
662
- }
663
- `]}render(){return I`
664
- <span tabindex="0" @keyup=${()=>this.changed()} @click=${()=>this.changed()}>
665
- <slot></slot>
666
- </span>
667
- `}changed(){this.disabled||Q(this,"kemet-carousel-link",this)}});const vt=r`
668
- :host,
669
- *,
670
- *::before,
671
- *::after {
672
- box-sizing: border-box;
673
- }
674
-
675
- :host {
676
- position: relative;
677
- display: grid;
678
- grid-template-columns: minmax(0, 1fr);
679
- align-items: center;
680
- width: var(--kemet-carousel-width, 100%);
681
- height: var(--kemet-carousel-height, auto);
682
- overflow: visible;
683
- }
684
-
685
- :host([arrows]) {
686
- grid-template-columns: auto minmax(0, 1fr) auto;
687
- }
688
-
689
- .toolbar {
690
- display: flex;
691
- gap: var(--kemet-carousel-toolbar-gap, 1rem);
692
- align-items: center;
693
- justify-content: var(--kemet-carousel-toolbar-justify-content, center);
694
- line-height: 1;
695
- padding: var(--kemet-carousel-toolbar-padding, 1rem);
696
- }
697
-
698
- :host([inner]) .toolbar {
699
- width: var(--kemet-carousel-toolbar-inner-width, 100%);
700
- position: absolute;
701
- bottom: var(--kemet-carousel-toolbar-inner-bottom, 0);
702
- top: var(--kemet-carousel-toolbar-inner-top, auto);
703
- color: var(--kemet-carousel-toolbar-inner-color, var(--kemet-color-white));
704
- background-color: var(--kemet-carousel-toolbar-inner-background-color, rgba(0, 0, 0, 0.4));
705
- }
706
-
707
- .slides {
708
- overflow: hidden;
709
- position: relative;
710
- padding: 1rem 0;
711
- border: var(--kemet-carousel-slides-border, 1px solid var(--kemet-color-gray1));
712
- }
713
-
714
- .slider {
715
- display: flex;
716
- flex-wrap: nowrap;
717
- transition: transform var(--kemet-carousel-transition-speed, 300ms) ease;
718
- }
719
-
720
- ::slotted([slot='next']),
721
- ::slotted([slot='prev']) {
722
- opacity: var(--kemet-carousel-arrows-opacity, 0.25);
723
- transition: opacity var(--kemet-carousel-arrows-transition-speed, 300ms) ease-in-out;
724
- }
725
-
726
- :host(:hover) ::slotted([slot='next']),
727
- :host(:hover) ::slotted([slot='prev']) {
728
- opacity: var(--kemet-carousel-arrows-opacity-hover, 1);
729
- }
730
- `;customElements.get("kemet-carousel")||customElements.define("kemet-carousel",class extends Z{static get styles(){return[vt]}static get properties(){return{index:{type:Number,reflect:!0},total:{type:Number},sliderWidth:{type:String},sliderTranslateX:{type:String},inner:{type:Boolean,reflect:!0},arrows:{type:Boolean,reflect:!0},options:{type:Object},breakpoints:{type:Object}}}constructor(){super(),this.index=0,this.total=0,this.sliderWidth="auto",this.sliderTranslateX="0",this.inner=!1,this.arrows=!1,this.options={perView:1,perMove:1,gap:12,slideshow:0,rewind:!0,center:!1},this.breakpoints={768:{perView:2,gap:24,rewind:!1},1280:{perView:2.5,center:!0}},this.addEventListener("kemet-carousel-first",this.handleFirst.bind(this)),this.addEventListener("kemet-carousel-last",this.handleLast.bind(this)),this.addEventListener("kemet-carousel-next",this.handleNext.bind(this)),this.addEventListener("kemet-carousel-prev",this.handlePrev.bind(this)),this.addEventListener("kemet-carousel-link",this.handleLink.bind(this))}firstUpdated(){this.slides=[],this.links=[],this.containerElement=this.shadowRoot.querySelector('[part="container"]'),this.slidesElement=this.shadowRoot.querySelector('[part="slides"]'),this.sliderElement=this.shadowRoot.querySelector('[part="slider"]'),this.toolbarElement=this.shadowRoot.querySelector('[part="toolbar"]'),this.toolbarSlotElement=this.querySelector('[slot="toolbar"]'),this.informationElement=this.querySelector("kemet-carousel-information"),window.addEventListener("resize",(()=>{this.setSlideSize(),this.setToolbarSize(),this.updateIndex(this.index)})),this.sliderElement.addEventListener("transitionend",this.handleTransitionEnd.bind(this)),this.swipeMove=t=>{t.preventDefault();const e=t.touches?t.touches[0].pageX:t.pageX,s=this.slides[this.index];this.sliderTranslateX=e-this.startX-s.offsetLeft+"px"},this.handleSlideShow=()=>{this.getOption("slideshow")>0&&(this.updateIndex(this.index+1),clearTimeout(this.handleSlideShow))},this.setSlideSize(),this.goToSlide(this.index)}updated(t){this.setSlideSize(),this.setToolbarSize(),t.has("index")&&(this.updateIndex(this.index),setTimeout(this.handleSlideShow,1e3*this.getOption("slideshow")))}render(){return I`
731
- <slot name="prev" @slotchange=${this.handleArrows}></slot>
732
- <div class="container" part="container">
733
- <section
734
- class="slides"
735
- part="slides"
736
- @mousedown=${this.swipeStart}
737
- @mouseup=${this.swipeEnd}
738
- @touchstart=${this.swipeStart}
739
- @touchend=${this.swipeEnd}
740
- @mouseleave=${this.swipeLeave}
741
- >
742
- <div class="slider" part="slider" style="width:${this.sliderWidth}; transform:translateX(${this.sliderTranslateX});">
743
- <slot name="slides" @slotchange="${this.handleSlotChange}"></slot>
744
- </div>
745
- </section>
746
- ${this.makeToolbar()}
747
- </div>
748
- <slot name="next" @slotchange=${this.handleArrows}></slot>
749
- `}swipeStart(t){this.startX=t.touches?t.touches[0].pageX:t.pageX,this.addEventListener("mousemove",this.swipeMove),this.addEventListener("touchmove",this.swipeMove)}swipeEnd(t){this.updateIndex(this.swipeUpdate(t)),this.removeEventListener("mousemove",this.swipeMove,!1),this.removeEventListener("touchmove",this.swipeMove,!1)}swipeUpdate(t){const e=t.changedTouches?t.changedTouches[0].pageX:t.pageX,s=this.startX>e?"right":"left",i=this.slidesElement.offsetWidth/3,o=this.startX-e,r=Math.abs(o)>i;let{index:a}=this;return r&&"right"===s&&(a=this.index>=this.slides.length-1?this.index:this.index+1),r&&"left"===s&&(a=this.index<1?0:this.index-1),a}swipeLeave(){this.updateIndex(this.index),this.removeEventListener("mousemove",this.swipeMove,!1),this.removeEventListener("touchmove",this.swipeMove,!1)}setSlideSize(){this.slideWidth=this.containerElement.offsetWidth/this.getOption("perView"),this.slides.forEach((t=>{t.style.marginLeft=this.getOption("gap")/2+"px",t.style.marginRight=this.getOption("gap")/2+"px",t.style.width=this.slideWidth-this.getOption("gap")+"px"})),this.sliderWidth=this.slideWidth*this.slides.length+"px"}setToolbarSize(){if(this.inner&&this.toolbarElement){const t=this.slidesElement.offsetWidth;this.toolbarElement.style.width=`${t}px`}}makeToolbar(){return this.toolbarSlotElement?I`
750
- <section class="toolbar" part="toolbar">
751
- <slot name="toolbar"></slot>
752
- </section>
753
- `:null}handleSlotChange(){const t=this.querySelectorAll("kemet-carousel-slide"),e=this.querySelectorAll("kemet-carousel-link");t.forEach((t=>{this.slides.push(t)})),this.updateInformation(),this.total=t.length,t[this.index].selected=!0,e.forEach((t=>{this.links.push(t)}))}handleArrows(){this.arrows=!0}handleFirst(){this.updateIndex(0)}handleLast(){this.updateIndex(this.slides.length-1)}handleNext(){let t=this.index+this.getOption("perMove");t>=this.slides.length&&(t=this.getOption("rewind")?0:this.index),this.updateIndex(t)}handlePrev(){let t=this.index-this.getOption("perMove");t<0&&(t=this.getOption("rewind")?this.slides.length-1:this.index),this.updateIndex(t)}updateIndex(t){let e=this.slides[this.index],s=this.links[t];this.links.forEach((t=>{t.selected=!1})),s||([s]=this.links),s&&(s.selected=!0),e&&(e.setAttribute("aria-hidden","true"),t>-1&&t<this.slides.length?this.index=t:(console.warn("An invalid index number was entered. The kemet-carousel has been reset to the first slide."),this.index=0),this.goToSlide(this.index),e=this.slides[this.index],e.setAttribute("aria-hidden","false"),this.slides.forEach((t=>{t.selected=!1})),e.selected=!0,Q(this,"kemet-carousel-change-start",this),this.updateInformation())}updateInformation(){this.informationSlot=this.slides[this.index].querySelector('[slot="information"]'),this.informationElement&&(this.informationSlot?this.informationElement.innerHTML=this.informationSlot.outerHTML:this.informationElement.innerHTML="")}goToSlide(t){if(!0===this.getOption("center")){const e=this.slidesElement.offsetWidth/2,s=this.slideWidth*t;this.sliderTranslateX=s-(s-e)-this.slideWidth/2-s+"px"}else this.sliderTranslateX=this.slideWidth*t*-1+"px"}handleTransitionEnd(){const t=this.querySelector("kemet-carousel-current");t&&(t.current=this.index+1),Q(this,"kemet-carousel-change-finished",this)}handleLink(t){this.updateIndex(t.detail.slide)}getOption(t){const e=Object.keys(this.breakpoints);let s=this.options[t];return e.forEach((e=>(window.matchMedia(`(min-width: ${e}px)`).matches&&void 0!==this.breakpoints[e][t]&&(s=this.breakpoints[e][t]),s))),s}});customElements.get("kemet-combo")||customElements.define("kemet-combo",class extends Z{static get styles(){return[r`
754
- :host {
755
- opacity: 0;
756
- width: var(--kemet-combo-width, calc(100% - 2px));
757
- margin: var(--kemet-combo-margin, 1rem auto);
758
- pointer-events: none;
759
- display: block;
760
- position: relative;
761
- transition: opacity 0.3s ease-in-out;
762
- }
763
-
764
- :host([show]) {
765
- opacity: 1;
766
- pointer-events: auto;
767
- }
768
-
769
- ul {
770
- width: 100%;
771
- max-height: var(--kemet-combo-max-height, calc(5 * 3rem));
772
- position: absolute;
773
- z-index: 1;
774
- list-style: none;
775
- margin: 0;
776
- padding: 0;
777
- overflow-y: scroll;
778
- border: var(--kemet-combo-border, 1px solid var(--kemet-color-primary));
779
- border-radius: var(--kemet-combo-border-radius, var(--kemet-border-radius));
780
- background-color: var(--kemet-combo-background-color, var(--kemet-color-white));
781
- box-shadow: var(--kemet-combo-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
782
- }
783
- li {
784
- line-height: 3rem;
785
- padding: 0 1.5rem;
786
- cursor: pointer;
787
- }
788
- li:hover,
789
- li:focus {
790
- color: var(--kemet-combo-hover-color, var(--kemet-color-white));
791
- outline: none;
792
- background-color: var(--kemet-combo-hover-background-color, var(--kemet-color-primary));
793
- }
794
- `]}static get properties(){return{slug:{type:String},options:{type:Array},filteredOptions:{type:Array},show:{type:Boolean,reflect:!0}}}constructor(){super(),this.options=[]}firstUpdated(){this.field=this.closest("kemet-field"),this.input=this.field.querySelector('[slot="input"]'),this.slug=this.field.slug||"slug",this.input.addEventListener("kemet-input-input",this.handleInput.bind(this)),this.input.addEventListener("keydown",(t=>this.handleInputKeyDown(t)))}render(){return I`
795
- <div
796
- role="combobox"
797
- part="combobox"
798
- aria-expanded=${this.show}
799
- aria-controls="${this.slug}-listbox"
800
- aria-haspopup="listbox"
801
- id="${this.slug}-combobox"
802
- aria-label="${this.field?.label}"
803
- >
804
- <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox" part="listbox">
805
- ${this.makeOptions()}
806
- </ul>
807
- </div>
808
- `}makeOptions(){if(this.input){this.filteredOptions=this.options.filter((t=>-1!==t.toLowerCase().indexOf(this.input.value?.toLowerCase())));return this.filteredOptions.map(((t,e)=>I`<li
809
- id="${this.slug}-option-${e}"
810
- role="option"
811
- tabindex="0"
812
- aria-selected="false"
813
- @click=${t=>this.handleSelection(t)}
814
- @keydown=${t=>this.handleOptionKeyDown(t)}
815
- >
816
- ${t}
817
- </li>`))}return null}handleInput(t){this.makeOptions(),t.detail.length>0?this.show=!0:this.show=!1}handleSelection(t){this.input.value=t.target.innerText,this.show=!1,Q(this,"kemet-combo-section",{element:t.target,text:t.target.innerText,id:t.target.getAttribute("id")})}handleOptionKeyDown(t){if(t.preventDefault(),"ArrowDown"===t.code){const e=t.target.nextElementSibling;e?e.focus():this.shadowRoot.querySelector("li").focus()}if("ArrowUp"===t.code){const e=t.target.previousElementSibling;e?e.focus():this.shadowRoot.querySelector("li:last-child").focus()}"Escape"!==t.code&&"Tab"!==t.code||(this.show=!1,this.input.focus()),"Enter"!==t.code&&"Space"!==t.code||this.handleSelection(t)}handleInputKeyDown(t){"ArrowDown"===t.code&&this.shadowRoot.querySelector("li").focus(),"Escape"===t.code&&(this.show=!1)}});customElements.get("kemet-count")||customElements.define("kemet-count",class extends Z{static get styles(){return[r`
818
- :host {
819
- display: block;
820
- font-size: var(--kemet-count-font-size, 90%);
821
- margin-top: 0.8rem;
822
- }
823
- `]}static get properties(){return{message:{type:String},remaining:{type:Number},limit:{type:Number},validateImmediately:{type:Boolean,attribute:"validate-immediately"}}}firstUpdated(){this.field=this.closest("kemet-field"),this.inputSlot=this.field.querySelector('[slot="input"]'),this.remaining=this.limit-this.field.length,this.field.addEventListener("kemet-field-input",(t=>{this.remaining=this.limit-t.detail;const e=this.input||this.textarea;e&&(this.remaining<0?(e.validity.passedLimit=!0,this.validateImmediately&&(this.inputSlot.status="error",this.inputSlot.invalid=!0,Q(this,"kemet-count-status",{status:"error",validity:e.validity,element:this.inputSlot}))):(this.inputSlot.status="standard",e.checkValidity(),Q(this,"kemet-count-status",{status:"standard",validity:e.validity,element:this.inputSlot})))})),this.input=this.inputSlot.shadowRoot.querySelector("input"),this.textarea=this.inputSlot.shadowRoot.querySelector("textarea")}render(){return I`${this.remaining} ${this.message}`}});customElements.get("kemet-draggable")||customElements.define("kemet-draggable",class extends Z{static get styles(){return r`
824
- :host {
825
- display: inline-block;
826
- }
827
-
828
- #draggable {
829
- position: absolute;
830
- }
831
- `}static get properties(){return{memory:{type:String},top:{type:String},left:{type:String},measure:{type:Boolean}}}constructor(){super(),this.top="auto",this.left="auto",this.measure=!1}firstUpdated(){this.position1=0,this.position2=0,this.position3=0,this.position4=0,this.mouseMove=t=>this.drag(t),this.mouseUp=()=>this.stopDrag(),this.draggableElement=this.shadowRoot.getElementById("draggable");const t=JSON.parse(localStorage.getItem(this.memory));t&&(this.top=t.top,this.left=t.left),this.measure&&this.measureContent()}render(){return I`
832
- <div id="draggable" @mousedown=${t=>this.startDrag(t)} style="top:${this.top}; left:${this.left}">
833
- <slot></slot>
834
- </div>
835
- `}startDrag(t){t&&(t.preventDefault(),this.position3=t.clientX,this.position4=t.clientY),document.addEventListener("mouseup",this.mouseUp),document.addEventListener("mousemove",this.mouseMove),Q(this,"kemet-draggable-start",this)}drag(t){t.preventDefault(),this.position1=this.position3-t.clientX,this.position2=this.position4-t.clientY,this.position3=t.clientX,this.position4=t.clientY,this.top=this.draggableElement.offsetTop-this.position2+"px",this.left=this.draggableElement.offsetLeft-this.position1+"px"}stopDrag(){if(document.removeEventListener("mouseup",this.mouseUp),document.removeEventListener("mousemove",this.mouseMove),this.memory){const t={top:this.top,left:this.left};localStorage.setItem(this.memory,JSON.stringify(t))}Q(this,"kemet-draggable-stop",this)}measureContent(){this.style.width=`${this.draggableElement.offsetWidth}px`,this.style.height=`${this.draggableElement.offsetHeight}px`}});const bt=`${document.documentElement.scrollHeight}px`,kt=r`
836
- *,
837
- *::before,
838
- *::after {
839
- box-sizing: border-box;
840
- }
841
-
842
- :host {
843
- width: 100%;
844
- }
845
-
846
- .off-canvas {
847
- position: relative;
848
- overflow: hidden;
849
- }
850
-
851
- .off-canvas__nav {
852
- position: fixed;
853
- top: 0;
854
- left: 0;
855
- z-index: 100;
856
- visibility: hidden;
857
- height: 100%;
858
- transition: all 0.5s;
859
- }
860
-
861
- .off-canvas__nav::after {
862
- position: absolute;
863
- top: 0;
864
- right: 0;
865
- width: 100%;
866
- height: 100%;
867
- background: rgba(0, 0, 0, 0.2);
868
- content: '';
869
- opacity: 1;
870
- transition: opacity 0.5s;
871
- }
872
-
873
- :host([opened]) .off-canvas__nav::after {
874
- width: 0;
875
- height: 0;
876
- opacity: 0;
877
- transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
878
- }
879
-
880
- .off-canvas__pusher {
881
- position: relative;
882
- left: 0;
883
- z-index: 99;
884
- height: 100%;
885
- transition: transform 0.5s;
886
- }
887
-
888
- :host([overlay]) .off-canvas__pusher::after {
889
- position: absolute;
890
- top: 0;
891
- right: 0;
892
- width: 0;
893
- height: 0;
894
- background: var(--kemet-drawer-overlay-color, rgba(0, 0, 0, 0.2));
895
- content: '';
896
- opacity: 0;
897
- transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
898
- }
899
-
900
- :host([opened]) .off-canvas__pusher::after {
901
- width: 100%;
902
- height: 100%;
903
- opacity: 1;
904
- transition: opacity 0.5s;
905
- transform: scale(2);
906
- }
907
-
908
- .off-canvas__content {
909
- position: relative;
910
- /* overflow-y: scroll; */
911
- min-height: 100vh;
912
- }
913
-
914
- .off-canvas__wrapper {
915
- position: relative;
916
- }
917
-
918
- ::slotted([slot="content"]) {
919
- min-height: 100vh;
920
- }
921
-
922
- /* -------------------------------------- */
923
- /* custom properties */
924
- /* -------------------------------------- */
925
-
926
- .off-canvas__nav {
927
- width: var(--kemet-drawer-width, 300px);
928
- height: var(--kemet-drawer-height, 100%);
929
- color: var(--kemet-drawer-color, #fafafa);
930
- background: var(--kemet-drawer-background-color, #202020);
931
- }
932
- `,yt=r`
933
- /* slide */
934
- :host([effect='slide']) .off-canvas__nav {
935
- visibility: visible;
936
- transform: translate3d(-100%, 0, 0);
937
- }
938
-
939
- :host([effect='slide'][opened]) .off-canvas__nav {
940
- visibility: visible;
941
- transform: translate3d(0, 0, 0);
942
- }
943
-
944
- :host([effect='slide']) .off-canvas__nav:after {
945
- display: none;
946
- }
947
-
948
- :host([effect='slide'][side='right']) .off-canvas__nav {
949
- transform: translate3d(100vw, 0, 0);
950
- }
951
-
952
- :host([effect='slide'][side='right'][opened]) .off-canvas__nav {
953
- transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
954
- }
955
-
956
- :host([effect='slide'][side='top']) .off-canvas__nav {
957
- width: 100vw;
958
- height: var(--kemet-drawer-height, 100vh);
959
- transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
960
- }
961
-
962
- :host([effect='slide'][side='top'][opened]) .off-canvas__nav {
963
- transform: translate3d(0, 0, 0);
964
- }
965
-
966
- :host([effect='slide'][side='bottom']) .off-canvas__nav {
967
- width: 100vw;
968
- height: var(--kemet-drawer-height, 100vh);
969
- transform: translate3d(0, ${o(bt)}, 0);
970
- }
971
-
972
- :host([effect='slide'][side='bottom'][opened]) .off-canvas__nav {
973
- transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
974
- }
975
-
976
- /* reveal */
977
- :host([effect='reveal'][opened]) .off-canvas__pusher {
978
- transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);
979
- }
980
-
981
- :host([effect='reveal']) .off-canvas__nav {
982
- z-index: 1;
983
- }
984
-
985
- :host([effect='reveal'][opened]) .off-canvas__nav {
986
- visibility: visible;
987
- transition: transform 0.5s;
988
- }
989
-
990
- :host([effect='reveal']) .off-canvas__nav::after {
991
- display: none;
992
- }
993
-
994
- :host([effect='reveal'][side='right'][opened]) .off-canvas__pusher {
995
- transform: translate3d(0, 0, 0);
996
- }
997
-
998
- :host([effect='reveal'][side='right']) .off-canvas__nav {
999
- transform: translate3d(100vw, 0, 0);
1000
- }
1001
-
1002
- :host([effect='reveal'][side='right'][opened]) .off-canvas__nav {
1003
- transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
1004
- }
1005
-
1006
- :host([effect='reveal'][side='top']) .off-canvas__nav {
1007
- width: 100vw;
1008
- height: var(--kemet-drawer-height, 100vh);
1009
- transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
1010
- }
1011
-
1012
- :host([effect='reveal'][side='top'][opened]) .off-canvas__nav {
1013
- transform: translate3d(0, 0, 0);
1014
- }
1015
-
1016
- :host([effect='reveal'][side='top'][opened]) .off-canvas__pusher {
1017
- transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);
1018
- }
1019
-
1020
- :host([effect='reveal'][side='bottom']) .off-canvas__nav {
1021
- width: 100vw;
1022
- height: var(--kemet-drawer-height, 100vh);
1023
- transform: translate3d(0, ${o(bt)}, 0);
1024
- }
1025
-
1026
- :host([effect='reveal'][side='bottom'][opened]) .off-canvas__nav {
1027
- transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
1028
- }
1029
-
1030
- :host([effect='reveal'][side='bottom'][opened]) .off-canvas__pusher {
1031
- transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
1032
- }
1033
-
1034
- /* push */
1035
- :host([effect='push'][opened]) .off-canvas__pusher {
1036
- transform: translate3d(var(--kemet-drawer-width, 300px), 0, 0);
1037
- }
1038
-
1039
- :host([effect='push']) .off-canvas__nav {
1040
- transform: translate3d(-100%, 0, 0);
1041
- }
1042
-
1043
- :host([effect='push'][opened]) .off-canvas__nav {
1044
- visibility: visible;
1045
- transition: transform 0.5s;
1046
- transform: translate3d(0, 0, 0);
1047
- }
1048
-
1049
- :host([effect='push']) .off-canvas__nav::after {
1050
- display: none;
1051
- }
1052
-
1053
- :host([effect='push'][side='right'][opened]) .off-canvas__pusher {
1054
- transform: translate3d(calc(var(--kemet-drawer-width, 300px) * -1), 0, 0);
1055
- }
1056
-
1057
- :host([effect='push'][side='right']) .off-canvas__nav {
1058
- transform: translate3d(100vw, 0, 0);
1059
- }
1060
-
1061
- :host([effect='push'][side='right'][opened]) .off-canvas__nav {
1062
- transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
1063
- }
1064
-
1065
- :host([effect='push'][side='top']) .off-canvas__nav {
1066
- width: 100vw;
1067
- height: var(--kemet-drawer-height, 100vh);
1068
- transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
1069
- }
1070
-
1071
- :host([effect='push'][side='top'][opened]) .off-canvas__nav {
1072
- transform: translate3d(0, 0, 0);
1073
- }
1074
-
1075
- :host([effect='push'][side='top'][opened]) .off-canvas__pusher {
1076
- transform: translate3d(0, var(--kemet-drawer-height, 100vh), 0);
1077
- }
1078
-
1079
- :host([effect='push'][side='bottom']) .off-canvas__nav {
1080
- width: 100vw;
1081
- height: var(--kemet-drawer-height, 100vh);
1082
- transform: translate3d(0, ${o(bt)}, 0);
1083
- }
1084
-
1085
- :host([effect='push'][side='bottom'][opened]) .off-canvas__nav {
1086
- transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
1087
- }
1088
-
1089
- :host([effect='push'][side='bottom'][opened]) .off-canvas__pusher {
1090
- transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
1091
- }
1092
-
1093
- /* scale */
1094
- :host([effect='scale']) .off-canvas__pusher {
1095
- transform-style: preserve-3d;
1096
- }
1097
-
1098
- :host([effect='scale'][opened]) .off-canvas__pusher {
1099
- transform: translate3d(0, 0, 0) scale(0.95);
1100
- }
1101
-
1102
- :host([effect='scale']) .off-canvas__nav {
1103
- opacity: 1;
1104
- transform: translate3d(-100%, 0, 0);
1105
- }
1106
-
1107
- :host([effect='scale'][opened]) .off-canvas__nav {
1108
- visibility: visible;
1109
- transition: transform 0.5s;
1110
- transform: translate3d(0, 0, 0);
1111
- }
1112
-
1113
- :host([effect='scale']) .off-canvas__nav::after {
1114
- display: none;
1115
- }
1116
-
1117
- :host([effect='scale'][side='right']) .off-canvas__nav {
1118
- transform: translate3d(100vw, 0, 0);
1119
- }
1120
-
1121
- :host([effect='scale'][side='right'][opened]) .off-canvas__nav {
1122
- transform: translate3d(calc(100vw - var(--kemet-drawer-width, 300px)), 0, 0);
1123
- }
1124
-
1125
- :host([effect='scale'][side='top']) .off-canvas__nav {
1126
- width: 100vw;
1127
- height: var(--kemet-drawer-height, 100vh);
1128
- transform: translate3d(0, calc(var(--kemet-drawer-height, 100vh) * -1), 0);
1129
- }
1130
-
1131
- :host([effect='scale'][side='top'][opened]) .off-canvas__nav {
1132
- transform: translate3d(0, 0, 0);
1133
- }
1134
-
1135
- :host([effect='scale'][side='bottom']) .off-canvas__nav {
1136
- width: 100vw;
1137
- height: var(--kemet-drawer-height, 100vh);
1138
- transform: translate3d(0, ${o(bt)}, 0);
1139
- }
1140
-
1141
- :host([effect='scale'][side='bottom'][opened]) .off-canvas__nav {
1142
- transform: translate3d(0, calc(100vh - var(--kemet-drawer-height, 100vh)), 0);
1143
- }
1144
- `;customElements.get("kemet-drawer")||customElements.define("kemet-drawer",class extends Z{static get styles(){return[kt,yt]}static get properties(){return{opened:{type:Boolean,reflect:!0},effect:{type:String,reflect:!0},side:{type:String,reflect:!0},overlay:{type:Boolean,reflect:!0}}}constructor(){super(),this.opened=void 0,this.effect="slide",this.side="left",this.overlay=!1}firstUpdated(){this.addEventListener("click",(t=>{this.opened&&"kemet-drawer"===t.target.tagName.toLowerCase()&&(this.opened=!1)}))}updated(t){t.get("opened")||!0!==this.opened||Q(this,"kemet-drawer-opened",this),t.get("opened")&&!1===this.opened&&Q(this,"kemet-drawer-closed",this)}render(){return I`
1145
- <section class="off-canvas" part="container">
1146
- <nav class="off-canvas__nav" part="drawer" title="Drawer">
1147
- <slot name="navigation"></slot>
1148
- </nav>
1149
- <div class="off-canvas__pusher" part="pusher">
1150
- <main class="off-canvas__content" part="content">
1151
- <div class="off-canvas__wrapper" part="wrapper">
1152
- <slot name="content"></slot>
1153
- </div>
1154
- </main>
1155
- </div>
1156
- </section>
1157
- `}});const xt=r`
1158
- :host {
1159
- --kemet-fab-size: 50px;
1160
-
1161
- display: inline-block;
1162
- position: relative;
1163
- }
1164
-
1165
- button {
1166
- color: var(--kemet-fab-color, var(--kemet-color-white));
1167
- font-size: inherit;
1168
- display: inline-flex;
1169
- padding: 0;
1170
- position: relative;
1171
- min-height: var(--kemet-fab-size);
1172
- min-width: var(--kemet-fab-size);
1173
- max-width: var(--kemet-fab-size);
1174
- align-items: center;
1175
- justify-content: flex-start;
1176
- transition: all 0.4s ease;
1177
- border: none;
1178
- background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
1179
- }
1180
-
1181
- :host([outlined]) button {
1182
- color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
1183
- border: var(--kemet-fab-outlined-border, 1px solid var(--kemet-color-primary));
1184
- background-color: transparent;
1185
- }
1186
-
1187
- :host([pill]) button {
1188
- border-radius: var(--kemet-fab-pill-radius, 10rem);
1189
- }
1190
-
1191
- button::before {
1192
- content: '';
1193
- position: absolute;
1194
- top: 0;
1195
- left: 0;
1196
- right: 0;
1197
- bottom: 0;
1198
- z-index: -1;
1199
- width: 100%;
1200
- height: 100%;
1201
- transition: background-color 0.3s ease-in-out;
1202
- background-color: var(--kemet-fab-background-color, var(--kemet-color-primary));
1203
- }
1204
-
1205
- :host([pill]) button::before {
1206
- border-radius: var(--kemet-fab-pill-radius, 10rem);
1207
- }
1208
-
1209
- :host([outlined]) button::before {
1210
- border: var(--kemet-fab-outline-border, 1px solid var(--kemet-color-primary));
1211
- background-color: transparent;
1212
- }
1213
-
1214
- :host([expanded]) button {
1215
- max-width: 99rem;
1216
- padding: 0 1.35rem 0 0.25rem;
1217
- }
1218
-
1219
- :host([disabled]) button {
1220
- opacity: 0.5;
1221
- cursor: not-allowed;
1222
- }
1223
-
1224
- .icon {
1225
- width: var(--kemet-fab-size);
1226
- height: var(--kemet-fab-size);
1227
- display: flex;
1228
- flex: 0 0 auto;
1229
- align-items: center;
1230
- justify-content: center;
1231
- }
1232
-
1233
- .text {
1234
- color: var(--kemet-fab-color, var(--kemet-color-white));
1235
- z-index: 1;
1236
- white-space: nowrap;
1237
- pointer-events: none;
1238
- opacity: 0;
1239
- transition: opacity 0.2s ease-in-out;
1240
- }
1241
-
1242
- :host([outlined]) .text {
1243
- color: var(--kemet-fab-outlined-color, var(--kemet-color-primary));
1244
- }
1245
-
1246
- :host([expanded]) .text {
1247
- opacity: 1;
1248
- }
1249
- `;customElements.get("kemet-fab")||customElements.define("kemet-fab",class extends Z{static get styles(){return[xt]}static get properties(){return{expanded:{type:Boolean,reflect:!0},outlined:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},pill:{type:Boolean,reflect:!0},expandPoint:{type:Number,attribute:"expand-point"},collapsePoint:{type:Number,attribute:"collapse-point"}}}constructor(){super(),this.outlined=!1,this.disabled=!1,this.expanded=!1}firstUpdated(){window.addEventListener("scroll",this.handleScroll.bind(this)),this.addEventListener("mouseover",this.handleMouseOver.bind(this)),this.addEventListener("mouseout",this.handleMouseOut.bind(this))}render(){return I`
1250
- <button class="button" part="button" ?disabled=${this.disabled} aria-disabled=${this.disabled?"true":"false"}>
1251
- <span class="icon" part="icon">
1252
- <slot name="icon"></slot>
1253
- </span>
1254
- <span class="text" part="text">
1255
- <slot></slot>
1256
- </span>
1257
- </button>
1258
- `}handleMouseOver(){this.disabled||(this.expanded=!0)}handleMouseOut(){this.disabled||(this.expanded=!1)}handleScroll(){window.scrollY>this.expandPoint&&(this.expanded=!0),window.scrollY<this.expandPoint&&(this.expanded=!1),window.scrollY>this.collapsePoint&&(this.expanded=!1),window.scrollY<this.collapsePoint&&(this.expanded=!0)}});customElements.get("kemet-field")||customElements.define("kemet-field",class extends Z{static get styles(){return[r`
1259
- *,
1260
- *::before,
1261
- *::after {
1262
- box-sizing: border-box;
1263
- }
1264
-
1265
- :host {
1266
- display: block;
1267
- }
1268
-
1269
- :host([disabled]) {
1270
- opacity: 0.5;
1271
- }
1272
-
1273
- label {
1274
- position: relative;
1275
- display: block;
1276
- }
1277
-
1278
- label span {
1279
- color: inherit;
1280
- display: inline-flex;
1281
- gap: 0.5rem;
1282
- align-items: center;
1283
- margin-bottom: 0.8rem;
1284
- }
1285
-
1286
- :host([status='error']) kemet-icon {
1287
- color: var(--kemet-color-error);
1288
- }
1289
-
1290
- :host([status='success']) kemet-icon {
1291
- color: var(--kemet-color-success);
1292
- }
1293
-
1294
- :host([status='warning']) kemet-icon {
1295
- color: var(--kemet-color-warning);
1296
- }
1297
-
1298
- .message {
1299
- font-size: 0.9rem;
1300
- line-height: 1;
1301
- display: block;
1302
- margin-top: 0.8rem;
1303
- }
1304
-
1305
- :host([status='error']) .message {
1306
- color: var(--kemet-color-error);
1307
- }
1308
-
1309
- :host([status='success']) .message {
1310
- color: var(--kemet-color-success);
1311
- }
1312
-
1313
- :host([status='warning']) .message {
1314
- color: var(--kemet-color-warning);
1315
- }
1316
- `]}static get properties(){return{slug:{type:String},label:{type:String},message:{type:String},focused:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},filled:{type:Boolean,reflect:!0},length:{type:Number},disabled:{type:Boolean,reflect:!0},errorIcon:{type:String,attribute:"error-icon"},successIcon:{type:String,attribute:"success-icon"}}}constructor(){super(),this.status="standard",this.errorIcon="exclamation-triangle-fill",this.successIcon="check-lg",this.addEventListener("kemet-input-focused",(t=>this.handleFocused(t))),this.addEventListener("kemet-input-status",(t=>this.handleStatus(t))),this.addEventListener("kemet-input-input",(t=>this.handleInput(t))),this.addEventListener("kemet-count-status",(t=>this.handleStatus(t))),this.addEventListener("kemet-combo-selection",(t=>this.handleSelection(t)))}firstUpdated(){this.slotInput=this.querySelector('[slot="input"]'),this.slotCombo=this.querySelector('[slot="combo"]'),this.slotInput.value?this.length=this.slotInput.value.length:this.length=0}render(){return I`
1317
- <label for="${this.slug}" id="${this.slug}-label" part="label">
1318
- <span part="text">${this.label}${this.makeStatusIcon()}</span>
1319
- <slot name="input"></slot>
1320
- </label>
1321
- ${this.makeStatusMessage()}
1322
- <slot name="component"></slot>
1323
- `}makeStatusIcon(){return"error"===this.status||"warning"===this.status?I`<kemet-icon icon="${this.errorIcon}" size="16"></kemet-icon>`:"success"===this.status?I`<kemet-icon icon="${this.successIcon}" size="16"></kemet-icon>`:null}makeStatusMessage(){return"standard"!==this.status?I`<span class="message" part="message">${this.message}</span>`:null}handleFocused(t){this.focused=t.detail,!this.focused&&this.slotCombo&&this.slotCombo.options.length<1&&(this.slotCombo.show=!1)}handleStatus(t){this.status=t.detail.status}handleInput(t){Q(this,"kemet-field-input",t.detail.length),""===t.detail?this.filled=!1:this.filled=!0}handleSelection(t){this.slotInput.setAttribute("aria-activedescendant",t.detail)}});customElements.get("kemet-flipcard-trigger")||customElements.define("kemet-flipcard-trigger",class extends Z{static get styles(){return[r`
1324
- :host {
1325
- cursor: pointer;
1326
- }
1327
- `]}firstUpdated(){this.keyCodes={ENTER:13,SPACE:32}}render(){return I`
1328
- <slot tabindex="0" @click=${()=>this.trigger()} @keypress=${t=>this.handleKeyup(t)}></slot>
1329
- `}trigger(){Q(this,"kemet-flipcard-flipped",this)}handleKeyup(t){t.preventDefault(),t.keyCode===this.keyCodes.ENTER&&this.trigger()}});customElements.get("kemet-flipcard")||window.customElements.define("kemet-flipcard",class extends Z{static get styles(){return r`
1330
- *,
1331
- ::after,
1332
- ::before {
1333
- box-sizing: border-box;
1334
- }
1335
-
1336
- :host {
1337
- display: inline-block;
1338
- width: var(--kemet-flipcard-width, 100%);
1339
- height: var(--kemet-flipcard-height, auto);
1340
- aspect-ratio: var(--kemet-flipcard-ratio, 16/9);
1341
- perspective: 1000px;
1342
- }
1343
-
1344
- section {
1345
- position: relative;
1346
- width: 100%;
1347
- height: 100%;
1348
- transition: transform 0.8s;
1349
- transform-style: preserve-3d;
1350
- }
1351
-
1352
- .front,
1353
- .back {
1354
- position: absolute;
1355
- display: flex;
1356
- width: 100%;
1357
- height: 100%;
1358
- backface-visibility: hidden;
1359
- /* overflow: hidden; */
1360
- border-radius: var(--kemet-flipcard-border-radius, 0);
1361
- border: var(--kemet-flipcard-border, 2px solid var(--kemet-color-primary));
1362
- }
1363
-
1364
- :host([rounded]) .front,
1365
- :host([rounded]) .back {
1366
- border-radius: var(--kemet-border-radius);
1367
- }
1368
-
1369
- .front {
1370
- color: var(--kemet-flipcard-front-color, #202020);
1371
- background-color: var(--kemet-flipcard-front-background-color, #fafafa);
1372
- }
1373
-
1374
- :host([flipped]) .front {
1375
- z-index: -1;
1376
- }
1377
-
1378
- .back {
1379
- color: var(--kemet-flipcard-back-color, #202020);
1380
- background-color: var(--kemet-flipcard-back-background-color, #fafafa)
1381
- }
1382
-
1383
- :host([axis="horizontal"]) .back {
1384
- transform: rotateY(180deg);
1385
- }
1386
-
1387
- :host([flipped][axis="horizontal"]) section {
1388
- transform: rotateY(180deg);
1389
- }
1390
-
1391
- :host([axis="vertical"]) .back {
1392
- transform: rotateX(180deg);
1393
- }
1394
-
1395
- :host([flipped][axis="vertical"]) section {
1396
- transform: rotateX(180deg);
1397
- }
1398
-
1399
- :host([flip-on-hover]) section {
1400
- cursor: pointer;
1401
- }
1402
-
1403
- ::slotted([slot="front"]),
1404
- ::slotted([slot="back"]) {
1405
- display: inline-block;
1406
- margin: auto;
1407
- position: relative;
1408
- width: 100%;
1409
- height: 100%;
1410
- }
1411
- `}static get properties(){return{axis:{type:String,reflect:!0},flipped:{type:Boolean,reflect:!0},flipOnHover:{type:Boolean,attribute:"flip-on-hover"},height:{type:String},measure:{type:Boolean}}}constructor(){super(),this.axis="horizontal",this.flipped=!1,this.flipOnHover=!1,this.height="auto",this.measure=!1,this.addEventListener("kemet-flipcard-flipped",(()=>{this.flipped=!this.flipped}))}firstUpdated(){this.frontChildren=this.shadowRoot.querySelector('[name="front"]').assignedNodes({flatten:!0}),this.backChildren=this.shadowRoot.querySelector('[name="back"]').assignedNodes({flatten:!0}),[this.frontElement]=this.frontChildren,[this.backElement]=this.backChildren,window.addEventListener("resize",this.determineHeight.bind(this))}updated(){this.determineHeight()}render(){return I`
1412
- <section
1413
- tabindex="0"
1414
- part="wrapper"
1415
- @blur=${()=>{this.flipOnHover&&(this.flipped=!1)}}
1416
- @focus=${()=>{this.flipOnHover&&(this.flipped=!0)}}
1417
- @mouseover=${()=>{this.flipOnHover&&(this.flipped=!0)}}
1418
- @mouseout=${()=>{this.flipOnHover&&(this.flipped=!1)}}>
1419
- <div id="front" class="front" part="front">
1420
- <slot name="front" @slotchange="${()=>this.determineHeight()}"></slot>
1421
- </div>
1422
- <div id="back" class="back" part="back">
1423
- <slot name="back" @slotchange="${()=>this.determineHeight()}"></slot>
1424
- </div>
1425
- </section>
1426
- `}determineHeight(){setTimeout((()=>{this.measure?(this.frontElement.offsetHeight>this.backElement.offsetHeight?this.height=`${this.frontElement.offsetHeight}px`:this.height=`${this.backElement.offsetHeight}px`,this.style.height=this.height):this.style.removeProperty("height")}),0)}});customElements.get("kemet-input")||customElements.define("kemet-input",class extends Z{static get styles(){return[r`
1427
- :host {
1428
- position: relative;
1429
- display: block;
1430
- }
1431
-
1432
- input {
1433
- display: block;
1434
- font-size: 1rem;
1435
- width: 100%;
1436
- height: var(--kemet-input-height, 50px);
1437
- padding: var(--kemet-input-padding, 0.5rem 1rem);
1438
- border: var(--kemet-input-border, 1px solid var(--kemet-color-primary));
1439
- appearance: none;
1440
- box-sizing: border-box;
1441
- }
1442
-
1443
- input[type='color'] {
1444
- min-width: 10rem;
1445
- }
1446
-
1447
- input[type='search']::-webkit-search-decoration,
1448
- input[type='search']::-webkit-search-cancel-button,
1449
- input[type='search']::-webkit-search-results-button,
1450
- input[type='search']::-webkit-search-results-decoration {
1451
- display: none;
1452
- }
1453
-
1454
- :host([status='error']) input {
1455
- border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));
1456
- }
1457
-
1458
- :host([status='success']) input {
1459
- border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
1460
- }
1461
-
1462
- :host([status='warning']) input {
1463
- border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
1464
- }
1465
-
1466
- :host([disabled]) input {
1467
- opacity: 0.5;
1468
- }
1469
-
1470
- :host([icon-left]) input {
1471
- padding-left: var(--kemet-input-icon-left-padding, 3rem);
1472
- }
1473
-
1474
- :host([icon-right]) input {
1475
- padding-right: var(--kemet-input-icon-right-padding, 3rem);
1476
- }
1477
-
1478
- :host([rounded]) input {
1479
- border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
1480
- }
1481
-
1482
- :host([filled]) input {
1483
- border: var(--kemet-input-border-filled, none);
1484
- color: var(--kemet-input-color-filled, var(--kemet-color-white));
1485
- background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
1486
- }
1487
-
1488
- :host([filled]) kemet-icon,
1489
- :host([filled]) input::placeholder {
1490
- color: var(--kemet-input-color-filled, var(--kemet-color-white));
1491
- }
1492
-
1493
- :host([status='error'][filled]) input {
1494
- background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
1495
- }
1496
-
1497
- :host([status='success'][filled]) input {
1498
- background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
1499
- }
1500
-
1501
- :host([status='warning'][filled]) input {
1502
- background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
1503
- }
1504
-
1505
- kemet-icon {
1506
- color: var(--kemet-color-primary);
1507
- position: absolute;
1508
- top: 50%;
1509
- transform: translateY(-50%);
1510
- }
1511
-
1512
- kemet-icon.left {
1513
- left: 1rem;
1514
- }
1515
-
1516
- kemet-icon.right {
1517
- right: 1rem;
1518
- }
1519
-
1520
- kemet-icon.eye,
1521
- kemet-icon.search {
1522
- cursor: pointer;
1523
- }
1524
-
1525
- :host([status='error']) kemet-icon {
1526
- color: var(--kemet-color-error);
1527
- }
1528
-
1529
- :host([status='warning']) kemet-icon {
1530
- color: var(--kemet-color-error);
1531
- }
1532
-
1533
- :host([status='success']) kemet-icon {
1534
- color: var(--kemet-color-success);
1535
- }
1536
- `]}static get properties(){return{slug:{type:String},name:{type:String},placeholder:{type:String},minlength:{type:String},maxlength:{type:String},min:{type:String},max:{type:String},step:{type:String},autocomplete:{type:String},pattern:{type:String},inputmode:{type:String},autofocus:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean},required:{type:Boolean,reflect:!0},type:{type:String},value:{type:String},invalid:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},validateOnBlur:{type:Boolean,attribute:"validate-on-blur"},ariaAutoComplete:{type:String,attribute:"aria-autocomplete"},ariaControls:{type:String,attribute:"aria-controls"},ariaActiveDescendant:{type:String,attribute:"aria-activedescendant"},rounded:{type:Boolean,reflect:!0},filled:{type:Boolean,reflect:!0},iconRight:{type:String,reflect:!0,attribute:"icon-right"},iconLeft:{type:String,reflect:!0,attribute:"icon-left"},iconSize:{type:Number},validity:{type:Object},isPasswordVisible:{type:Boolean},inputType:{type:String},focused:{type:Boolean,reflect:!0}}}constructor(){super(),this.name="input",this.type="text",this.value="",this.status="standard",this.iconSize=20,this.validateOnBlur=!1,this.isPasswordVisible=!1,this.focused=!1,this.formSubmitController=new et(this)}firstUpdated(){this.input=this.shadowRoot.querySelector("input"),this.field=this.closest("kemet-field"),this.form=this.closest("form"),this.slug=this.field?this.field.slug:"input",this.field&&this.field.addEventListener("fmc-password-status",(t=>this.handleStatus(t)))}render(){return I`
1537
- <div>
1538
- ${this.makeIconLeft()}
1539
- <input
1540
- part="input"
1541
- id=${this.slug}
1542
- name=${this.name}
1543
- placeholder=${it(this.placeholder)}
1544
- minlength=${it(this.minlength)}
1545
- maxlength=${it(this.maxlength)}
1546
- min=${it(this.min)}
1547
- max=${it(this.max)}
1548
- step=${it(this.step)}
1549
- autocomplete=${it(this.autocomplete)}
1550
- aria-autocomplete=${it(this.ariaAutoComplete)}
1551
- aria-controls=${it(this.ariaControls)}
1552
- aria-activedescendant=${it(this.ariaActiveDescendant)}
1553
- pattern=${it(this.pattern)}
1554
- inputmode=${it(this.inputmode)}
1555
- aria-invalid=${this.invalid?"true":"false"}
1556
- ?autofocus=${this.autofocus}
1557
- ?disabled=${this.disabled}
1558
- ?readonly=${this.readonly}
1559
- ?required=${this.required}
1560
- .type="${"password"===this.type&&this.isPasswordVisible?"text":this.type}"
1561
- .value=${ct(this.value)}
1562
- @change=${this.handleChange}
1563
- @input=${this.handleInput}
1564
- @invalid=${this.handleInvalid}
1565
- @focus=${this.handleFocus}
1566
- @blur=${this.handleBlur}
1567
- />
1568
- ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}
1569
- </div>
1570
- `}makeIconRight(){return this.iconRight?I`
1571
- <kemet-icon class="right" icon="${this.iconRight}" size="${this.iconSize?this.iconSize:20}"></kemet-icon>
1572
- `:null}makeIconLeft(){return this.iconLeft?I`
1573
- <kemet-icon class="left" icon="${this.iconLeft}" size="${this.iconSize?this.iconSize:16}"></kemet-icon>
1574
- `:null}makeIconClear(){return"search"===this.type&&""!==this.value?I`
1575
- <kemet-icon class="search right" icon="x-lg" size="${this.iconSize}" @click=${()=>this.handleClear()}></kemet-icon>
1576
- `:null}makeVisibilityToggle(){return"password"===this.type?I`<kemet-icon
1577
- class="eye right"
1578
- icon="${this.setPasswordIcon()}"
1579
- @click=${()=>this.togglePasswordVisibility()}
1580
- ></kemet-icon>`:null}setPasswordIcon(){return this.isPasswordVisible?"eye":"eye-slash"}handleFocus(){this.focused=!0,Q(this,"kemet-input-focused",!0)}handleBlur(){this.validateOnBlur&&this.form&&!this.form.noValidate&&(this.input.checkValidity(),this.validity=this.input.validity),this.focused=!1,Q(this,"kemet-input-focused",!1)}handleChange(){this.value=this.input.value,this.input.checkValidity()&&this.checkLimitValidity()&&"success"!==this.status&&(this.invalid=!1,this.status="standard",this.validity=this.input.validity,Q(this,"kemet-input-status",{status:"standard",validity:this.input.validity,element:this}))}handleInput(){this.value=this.input.value,Q(this,"kemet-input-input",this.value)}handleInvalid(){this.validity=this.input.validity,this.validateOnBlur&&(this.invalid=!0,this.status="error",Q(this,"kemet-input-status",{status:"error",validity:this.input.validity,element:this}))}handleStatus(t){this.status=t.detail.status}togglePasswordVisibility(){this.isPasswordVisible=!this.isPasswordVisible}handleClear(){this.value="",Q(this,"kemet-input-input",this.value)}checkLimitValidity(){if(this.field){const t=this.field.querySelector("kemet-count");if(t)return this.value.length<t.limit}return!0}checkValidity(){return this.input.checkValidity()}focus(){this.input.focus()}});const wt=r`
1581
- :host {
1582
- color: inherit;
1583
- display: none;
1584
- }
1585
-
1586
- :host([show]) {
1587
- display: block;
1588
- }
1589
-
1590
- p {
1591
- margin: 1.6rem 0;
1592
- }
1593
-
1594
- .status {
1595
- display: grid;
1596
- align-items: center;
1597
- grid-template-columns: 1fr auto;
1598
- line-height: 1;
1599
- margin-top: 0.8rem;
1600
- }
1601
-
1602
- .status > span {
1603
- text-transform: capitalize;
1604
- }
1605
-
1606
- .status--weak,
1607
- .status--better {
1608
- color: var(--kemet-color-error);
1609
- }
1610
-
1611
- .status--strong {
1612
- color: var(--kemet-color-success);
1613
- }
1614
-
1615
- .indicator {
1616
- display: flex;
1617
- gap: 0.4rem;
1618
- margin: 0;
1619
- list-style: none;
1620
- }
1621
-
1622
- .indicator li {
1623
- width: 1.6rem;
1624
- height: 0.2rem;
1625
- background-color: var(--fds-color--gray2);
1626
- }
1627
-
1628
- .status--weak .indicator li:nth-child(1) {
1629
- background-color: var(--kemet-color-error);
1630
- }
1631
-
1632
- .status--better .indicator li:nth-child(1),
1633
- .status--better .indicator li:nth-child(2) {
1634
- background-color: var(--kemet-color-error);
1635
- }
1636
-
1637
- .status--strong .indicator li {
1638
- background-color: var(--kemet-color-success);
1639
- }
1640
-
1641
- .rules {
1642
- color: var(--kemet-color-primary);
1643
- list-style: none;
1644
- font-size: 90%;
1645
- padding-left: 2rem;
1646
- }
1647
-
1648
- .rules li {
1649
- position: relative;
1650
- }
1651
-
1652
- .rules kemet-icon {
1653
- color: var(--kemet-color-success);
1654
- position: absolute;
1655
- left: -2.4rem;
1656
- }
1657
- `;customElements.get("kemet-password")||customElements.define("kemet-password",class extends Z{static get styles(){return[wt]}static get properties(){return{rules:{type:Array},show:{type:Boolean,reflect:!0},value:{type:String},message:{type:String},strength:{type:String},icon:{type:String},iconSize:{type:Number}}}constructor(){super(),this.rules=[{pattern:"(?=.{8,}$)",message:"At least 8 characters long"},{pattern:"(?=.*[a-z])(?=.*[A-Z])",message:"Uppercase and lowercase"},{pattern:"(?=.*[0-9])",message:"At least one number (0-9)"}],this.message="Please make sure you meet all the requirements.",this.icon="check2",this.iconSize=16}firstUpdated(){this.field=this.closest("kemet-field"),this.input=this.field.querySelector('[slot="input"]'),this.slug=this.field.slug,this.input.addEventListener("kemet-input-input",this.handleInput.bind(this))}render(){return I`
1658
- <div role="alert" aria-live="assertive">
1659
- <div class="status status--${this.strength}" part="status">
1660
- <span>${this.strength}</span>
1661
- <ul class="indicator" part="indicator">
1662
- <li></li>
1663
- <li></li>
1664
- <li></li>
1665
- </ul>
1666
- </div>
1667
- <p class="message" part="message">${this.message}</p>
1668
- <ul class="rules" part="rules">
1669
- ${this.makeRules()}
1670
- </ul>
1671
- </div>
1672
- `}makeRules(){if(this.input){return this.rules.map(((t,e)=>{const s=new RegExp(t.pattern).test(this.input.value);return this.rules[e].meetsCriteria=s,I`<li>${this.makeCheckIcon(s)} ${t.message}</li>`}))}return null}makeCheckIcon(t){return t?I`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`:null}handleInput(t){this.value=t.detail,this.setStrength(),this.visibility()}setStrength(){setTimeout((()=>{const t=this.rules.length,e=this.rules.filter((t=>t.meetsCriteria)).length,s=Math.round(e/t*100)/100;s<=.33&&(this.strength="weak",this.status="error"),s>.33&&s<=.67&&(this.strength="better",this.status="error"),s>.67&&(this.strength="strong",this.status="success"),Q(this,"kemet-password-status",{status:this.status,validity:{meetsPasswordCriteria:"success"===this.status},element:this})}),1)}visibility(){this.value.length>0?this.show=!0:this.show=!1}});customElements.get("kemet-modal-close")||customElements.define("kemet-modal-close",class extends Z{static get styles(){return[r`
1673
- :host {
1674
- position: absolute;
1675
- top: -0.5rem;
1676
- right: -0.5rem;
1677
- border: 2px solid white;
1678
- border-radius: 50%;
1679
- cursor: pointer;
1680
- }
1681
- `]}render(){return I`
1682
- <slot @keyup=${()=>this.close()} @click=${()=>this.close()}></slot>
1683
- `}close(){Q(this,"kemet-modal-close-press",this)}});const $t=r`
1684
- *,
1685
- *::before,
1686
- *::after {
1687
- box-sizing: border-box;
1688
- }
1689
-
1690
- :host {
1691
- position: fixed;
1692
- display: flex;
1693
- top: 0;
1694
- left: 0;
1695
- z-index: 99;
1696
- width: 100%;
1697
- height: 100vh;
1698
- visibility: hidden;
1699
- backface-visibility: hidden;
1700
- }
1701
-
1702
- :host([opened]) {
1703
- visibility: visible;
1704
- }
1705
-
1706
- .content {
1707
- position: relative;
1708
- z-index: 3;
1709
- margin: auto;
1710
- min-width: var(--kemet-modal-content-min-width, 0);
1711
- max-width: var(--kemet-modal-content-max-width, none);
1712
- }
1713
-
1714
- :host([mobile]) .content {
1715
- min-width: var(--kemet-modal-content-mobile-min-width, 100%);
1716
- min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
1717
- padding: var(--kemet-modal-content-mobile-padding, 1rem);
1718
- }
1719
-
1720
- .overlay {
1721
- position: fixed;
1722
- width: 100%;
1723
- height: 100%;
1724
- visibility: hidden;
1725
- top: 0;
1726
- left: 0;
1727
- z-index: 1;
1728
- opacity: 0;
1729
- background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
1730
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1731
- }
1732
-
1733
- :host([opened]) .overlay {
1734
- opacity: 1;
1735
- visibility: visible;
1736
- }
1737
- `,Et=r`
1738
- /* fadein-scaleup */
1739
- :host([effect="fadein-scaleup"]) .content {
1740
- transform: scale(0.7);
1741
- opacity: 0;
1742
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1743
- }
1744
-
1745
- :host([effect="fadein-scaleup"][opened]) .content {
1746
- transform: scale(1);
1747
- opacity: 1;
1748
- }
1749
-
1750
- /* slide-right */
1751
- :host([effect="slide-right"]) .content {
1752
- transform: translateX(20%);
1753
- opacity: 0;
1754
- transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
1755
- }
1756
-
1757
- :host([effect="slide-right"][opened]) .content {
1758
- transform: translateX(0);
1759
- opacity: 1;
1760
- }
1761
-
1762
- /* slide-bottom */
1763
- :host([effect="slide-bottom"]) .content {
1764
- transform: translateY(20%);
1765
- opacity: 0;
1766
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1767
- }
1768
-
1769
- :host([effect="slide-bottom"][opened]) .content {
1770
- transform: translateY(0);
1771
- opacity: 1;
1772
- }
1773
-
1774
- /* newspaper */
1775
- :host([effect="newspaper"]) .content {
1776
- transform: scale(0) rotate(720deg);
1777
- opacity: 0;
1778
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1779
- }
1780
-
1781
- :host([effect="newspaper"][opened]) .content {
1782
- transform: scale(1) rotate(0deg);
1783
- opacity: 1;
1784
- }
1785
-
1786
- /* fall */
1787
- :host([effect="fall"]) {
1788
- perspective: 1300px;
1789
- }
1790
-
1791
- :host([effect="fall"]) .content {
1792
- transform-style: preserve-3d;
1793
- transform: translateZ(600px) rotateX(20deg);
1794
- opacity: 0;
1795
- }
1796
-
1797
- :host([effect="fall"][opened]) .content {
1798
- transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
1799
- transform: translateZ(0px) rotateX(0deg);
1800
- opacity: 1;
1801
- }
1802
-
1803
- /* side-fall */
1804
- :host([effect="side-fall"]) {
1805
- perspective: 1300px;
1806
- }
1807
-
1808
- :host([effect="side-fall"]) .content {
1809
- transform-style: preserve-3d;
1810
- transform: translate(30%) translateZ(600px) rotate(10deg);
1811
- opacity: 0;
1812
- }
1813
-
1814
- :host([effect="side-fall"][opened]) .content {
1815
- transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
1816
- transform: translate(0%) translateZ(0) rotate(0deg);
1817
- opacity: 1;
1818
- }
1819
-
1820
- /* flip-horizontal */
1821
- :host([effect="flip-horizontal"]) {
1822
- perspective: 1300px;
1823
- }
1824
-
1825
- :host([effect="flip-horizontal"]) .content {
1826
- transform-style: preserve-3d;
1827
- transform: rotateY(-70deg);
1828
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1829
- opacity: 0;
1830
- }
1831
-
1832
- :host([effect="flip-horizontal"][opened]) .content {
1833
- transform: rotateY(0deg);
1834
- opacity: 1;
1835
- }
1836
-
1837
- /* flip-vertical */
1838
- :host([effect="flip-vertical"]) {
1839
- perspective: 1300px;
1840
- }
1841
-
1842
- :host([effect="flip-vertical"]) .content {
1843
- transform-style: preserve-3d;
1844
- transform: rotateX(-70deg);
1845
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1846
- opacity: 0;
1847
- }
1848
-
1849
- :host([effect="flip-vertical"][opened]) .content {
1850
- transform: rotateX(0deg);
1851
- opacity: 1;
1852
- }
1853
-
1854
- /* sign-3d */
1855
- :host([effect="sign-3d"]) {
1856
- perspective: 1300px;
1857
- }
1858
-
1859
- :host([effect="sign-3d"]) .content {
1860
- transform-style: preserve-3d;
1861
- transform: rotateX(-60deg);
1862
- transform-origin: 50% 0;
1863
- opacity: 0;
1864
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1865
- }
1866
-
1867
- :host([effect="sign-3d"][opened]) .content {
1868
- transform: rotateX(0deg);
1869
- opacity: 1;
1870
- }
1871
-
1872
- /* super-scaled */
1873
- :host([effect="super-scaled"]) .content {
1874
- transform: scale(2);
1875
- opacity: 0;
1876
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1877
- }
1878
-
1879
- :host([effect="super-scaled"][opened]) .content {
1880
- transform: scale(1);
1881
- opacity: 1;
1882
- }
1883
-
1884
- /* slit */
1885
- :host([effect="slit"]) {
1886
- perspective: 1300px;
1887
- }
1888
-
1889
- :host([effect="slit"]) .content {
1890
- transform-style: preserve-3d;
1891
- transform: translateZ(-3000px) rotateY(90deg);
1892
- opacity: 0;
1893
- }
1894
-
1895
- :host([effect="slit"][opened]) .content {
1896
- animation: slit .7s forwards ease-out;
1897
- }
1898
-
1899
- @keyframes slit {
1900
- 50% {
1901
- transform: translateZ(-250px) rotateY(89deg);
1902
- opacity: 1;
1903
- animation-timing-function: ease-in;}
1904
- 100% {
1905
- transform: translateZ(0) rotateY(0deg);
1906
- opacity: 1;
1907
- }
1908
- }
1909
-
1910
- /* rotate-bottom */
1911
- :host([effect="rotate-bottom"]) {
1912
- perspective: 1300px;
1913
- }
1914
-
1915
- :host([effect="rotate-bottom"]) .content {
1916
- transform-style: preserve-3d;
1917
- transform: translateY(100%) rotateX(90deg);
1918
- transform-origin: 0 100%;
1919
- opacity: 0;
1920
- transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
1921
- }
1922
-
1923
- :host([effect="rotate-bottom"][opened]) .content {
1924
- transform: translateY(0%) rotateX(0deg);
1925
- opacity: 1;
1926
- }
1927
-
1928
- /* rotate-left */
1929
- :host([effect="rotate-left"]) {
1930
- perspective: 1300px;
1931
- }
1932
-
1933
- :host([effect="rotate-left"]) .content {
1934
- transform-style: preserve-3d;
1935
- transform: translateZ(100px) translateX(-30%) rotateY(90deg);
1936
- transform-origin: 0 100%;
1937
- opacity: 0;
1938
- transition: all var(--kemet-modal-transition-speed, 0.3s);
1939
- }
1940
-
1941
- :host([effect="rotate-left"][opened]) .content {
1942
- transform: translateZ(0px) translateX(0%) rotateY(0deg);
1943
- opacity: 1;
1944
- }
1945
- `;customElements.get("kemet-modal")||customElements.define("kemet-modal",class extends Z{static get styles(){return[$t,Et]}static get properties(){return{opened:{type:Boolean,reflect:!0},effect:{type:String,reflect:!0},closeOnClick:{type:Boolean,attribute:"close-on-click"},breakpoint:{type:String},mobile:{type:Boolean,reflect:!0}}}constructor(){super(),this.opened=!1,this.closeOnClick=!1,this.breakpoint="600px",this.addEventListener("kemet-modal-close-pressed",(()=>{this.opened=!1}))}firstUpdated(){this.focusableSelector="body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",this.focusableElements=this.querySelectorAll(this.focusableSelector),this.addEventListener("keyup",(t=>{"Escape"===t.key&&(this.opened=!1)})),this.addEventListener("click",(t=>{this.opened&&this.closeOnClick&&"kemet-modal"===t.target.tagName.toLowerCase()&&(this.opened=!1)})),window.addEventListener("resize",(()=>{this.isMobile()})),this.focusableElements.forEach((t=>{t.addEventListener("keydown",(t=>this.handleFocusableDown(t)))}))}updated(t){t.get("opened")||!0!==this.opened||(setTimeout((()=>{this.focusableElements[0]?.focus()}),100),Q(this,"kemet-modal-opened",this)),t.get("opened")&&!1===this.opened&&Q(this,"kemet-modal-closed",this),this.isMobile()}render(){return I`
1946
- <div class="content" part="content">
1947
- <slot></slot>
1948
- </div>
1949
- <div class="overlay" part="overlay"></div>
1950
- `}isMobile(){const t=window.matchMedia(`(max-width: ${this.breakpoint})`);this.mobile=t.matches}handleFocusableDown(t){const e=this.focusableElements[0],s=this.focusableElements[this.focusableElements.length-1];"Tab"===t.key&&(t.shiftKey&&document.activeElement===e?(t.preventDefault(),s.focus()):t.shiftKey||document.activeElement!==s||(t.preventDefault(),e.focus()))}});const St=13,_t=32;window.customElements.define("kemet-popover-close",class extends Z{static get styles(){return[r`
1951
- button {
1952
- font: inherit;
1953
- color: inherit;
1954
- cursor: pointer;
1955
- border: 0;
1956
- background: transparent;
1957
- }
1958
- `]}render(){return I`
1959
- <button @click=${()=>this.close()} @keyup=${t=>this.handleKeyboard(t)}>
1960
- <slot></slot>
1961
- </button>
1962
- `}close(){Q(this,"kemet-popover-close-btn",this)}handleKeyboard(t){t.preventDefault(),t.keyCode!==_t&&t.keyCode!==St||this.close()}});const At=r`
1963
- #tooltip {
1964
- display: flex;
1965
- position: absolute;
1966
- }
1967
-
1968
- #tooltip polygon {
1969
- fill: var(--kemet-popover-background-color, #202020);
1970
- }
1971
-
1972
- :host([position="top"]) #tooltip {
1973
- left: 50%;
1974
- transform: translateX(-50%);
1975
- }
1976
-
1977
- :host([position="right"]) #tooltip {
1978
- right: 100%;
1979
- top: 50%;
1980
- transform-origin: top;
1981
- transform: translateY(-50%);
1982
- }
1983
-
1984
- :host([position="bottom"]) #tooltip {
1985
- bottom: 100%;
1986
- left: 50%;
1987
- transform-origin: left;
1988
- transform: translateX(-50%);
1989
- }
1990
-
1991
- :host([position="left"]) #tooltip {
1992
- left: 100%;
1993
- top: 50%;
1994
- transform-origin: top;
1995
- transform: translateY(-50%);
1996
- }
1997
-
1998
- /* svg */
1999
- #tooltip svg {
2000
- position: relative;
2001
- }
2002
-
2003
- :host([position="right"]) svg {
2004
- transform: rotate(90deg);
2005
- right: -8px;
2006
- }
2007
-
2008
- :host([position="bottom"]) svg {
2009
- transform: rotate(180deg);
2010
- right: -8px;
2011
- }
2012
-
2013
- :host([position="left"]) svg {
2014
- transform: rotate(270deg);
2015
- right: 8px;
2016
- }
2017
- `,Ct=r`
2018
- #custom-tooltip {
2019
- display: flex;
2020
- position: absolute;
2021
- z-index: 3;
2022
- }
2023
-
2024
- :host([position="top"]) #custom-tooltip {
2025
- left: 50%;
2026
- transform: translateX(-50%);
2027
- }
2028
-
2029
- :host([position="right"]) #custom-tooltip {
2030
- right: 100%;
2031
- top: 50%;
2032
- transform-origin: top;
2033
- transform: translateY(-50%);
2034
- }
2035
-
2036
- :host([position="bottom"]) #custom-tooltip {
2037
- bottom: 100%;
2038
- left: 50%;
2039
- transform-origin: left;
2040
- transform: translateX(-50%);
2041
- }
2042
-
2043
- :host([position="left"]) #custom-tooltip {
2044
- left: 100%;
2045
- top: 50%;
2046
- transform-origin: top;
2047
- transform: translateY(-50%);
2048
- }
2049
-
2050
- ::slotted([slot="custom-tooltip"]) {
2051
- display: flex;
2052
- }
2053
- `,zt=r`
2054
- :host([effect="fade"]) #content {
2055
- opacity: 0;
2056
- transition: all var(--kemet-popover-transition-speed, 0.3s);
2057
- }
2058
-
2059
- :host([effect="fade"][opened]) #content {
2060
- opacity: 1;
2061
- }
2062
- `,Lt=r`
2063
- :host([effect="scale"]) #content {
2064
- opacity: 0;
2065
- transition: all var(--kemet-popover-transition-speed, 0.3s);
2066
- }
2067
-
2068
- :host([effect="scale"][opened]) #content {
2069
- opacity: 1;
2070
- }
2071
-
2072
- :host([effect="scale"][position="top"]) #content,
2073
- :host([effect="scale"][position="bottom"]) #content {
2074
- transform: translateX(-50%) scale(0.7);
2075
- }
2076
-
2077
- :host([effect="scale"][position="top"][opened]) #content,
2078
- :host([effect="scale"][position="bottom"][opened]) #content {
2079
- transform: translateX(-50%) scale(1);
2080
- }
2081
-
2082
- :host([effect="scale"][position="left"]) #content,
2083
- :host([effect="scale"][position="right"]) #content {
2084
- transform: translateY(-50%) scale(0.7);
2085
- }
2086
-
2087
- :host([effect="scale"][position="left"][opened]) #content,
2088
- :host([effect="scale"][position="right"][opened]) #content {
2089
- transform: translateY(-50%) scale(1);
2090
- }
2091
- `,Bt=r`
2092
- :host([effect="slide"]) #content {
2093
- opacity: 0;
2094
- transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
2095
- }
2096
-
2097
- :host([effect="slide"][opened]) #content {
2098
- opacity: 1;
2099
- }
2100
-
2101
- :host([effect="slide"][position="top"]) #content {
2102
- transform: translateX(-50%) translateY(20%);
2103
- }
2104
-
2105
- :host([effect="slide"][position="top"][opened]) #content {
2106
- transform: translateX(-50%) translateY(0);
2107
- }
2108
-
2109
- :host([effect="slide"][position="bottom"]) #content {
2110
- transform: translateX(-50%) translateY(-20%);
2111
- }
2112
-
2113
- :host([effect="slide"][position="bottom"][opened]) #content {
2114
- transform: translateX(-50%) translateY(0);
2115
- }
2116
-
2117
- :host([effect="slide"][position="right"]) #content {
2118
- transform: translateY(-50%) translateX(-20%);
2119
- }
2120
-
2121
- :host([effect="slide"][position="right"][opened]) #content {
2122
- transform: translateY(-50%) translateX(0);
2123
- }
2124
-
2125
- :host([effect="slide"][position="left"]) #content {
2126
- transform: translateY(-50%) translateX(20%);
2127
- }
2128
-
2129
- :host([effect="slide"][position="left"][opened]) #content {
2130
- transform: translateY(-50%) translateX(0);
2131
- }
2132
- `,It=r`
2133
- :host([effect="fall"]) {
2134
- perspective: 1300px;
2135
- }
2136
-
2137
- :host([effect="fall"]) #content {
2138
- transform-style: preserve-3d;
2139
- opacity: 0;
2140
- }
2141
-
2142
- :host([effect="fall"][opened]) #content {
2143
- transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;
2144
- opacity: 1;
2145
- }
2146
-
2147
- :host([effect="fall"][position="top"]) #content {
2148
- transform: translateX(-50%) translateZ(600px) rotateX(20deg);
2149
- }
2150
-
2151
- :host([effect="fall"][position="top"][opened]) #content {
2152
- transform: translateX(-50%) translateZ(0px) rotateX(0deg);
2153
- }
2154
-
2155
- :host([effect="fall"][position="bottom"]) #content {
2156
- transform: translateX(-50%) translateZ(600px) rotateX(20deg);
2157
- }
2158
-
2159
- :host([effect="fall"][position="bottom"][opened]) #content {
2160
- transform: translateX(-50%) translateZ(0px) rotateX(0deg);
2161
- }
2162
-
2163
- :host([effect="fall"][position="right"]) #content {
2164
- transform: translateY(-50%) translateZ(600px) rotateX(20deg);
2165
- }
2166
-
2167
- :host([effect="fall"][position="right"][opened]) #content {
2168
- transform: translateY(-50%) translateZ(0px) rotateX(0deg);
2169
- }
2170
-
2171
- :host([effect="fall"][position="left"]) #content {
2172
- transform: translateY(-50%) translateZ(600px) rotateX(20deg);
2173
- }
2174
-
2175
- :host([effect="fall"][position="left"][opened]) #content {
2176
- transform: translateY(-50%) translateZ(0px) rotateX(0deg);
2177
- }
2178
- `,Ot=r`
2179
- :host([effect="flip-horizontal"]) {
2180
- perspective: 1300px;
2181
- }
2182
-
2183
- :host([effect="flip-horizontal"]) #content {
2184
- transform-style: preserve-3d;
2185
- transition: all var(--kemet-popover-transition-speed, 0.3s);
2186
- opacity: 0;
2187
- }
2188
-
2189
- :host([effect="flip-horizontal"][opened]) #content {
2190
- opacity: 1;
2191
- }
2192
-
2193
- :host([effect="flip-horizontal"][position="top"]) #content {
2194
- transform: translateX(-50%) rotateY(-70deg);
2195
- }
2196
-
2197
- :host([effect="flip-horizontal"][position="top"][opened]) #content {
2198
- transform: translateX(-50%) rotateY(0deg);
2199
- }
2200
-
2201
- :host([effect="flip-horizontal"][position="bottom"]) #content {
2202
- transform: translateX(-50%) rotateY(-70deg);
2203
- }
2204
-
2205
- :host([effect="flip-horizontal"][position="bottom"][opened]) #content {
2206
- transform: translateX(-50%) rotateY(0deg);
2207
- }
2208
-
2209
- :host([effect="flip-horizontal"][position="right"]) #content {
2210
- transform: translateY(-50%) rotateY(-70deg);
2211
- }
2212
-
2213
- :host([effect="flip-horizontal"][position="right"][opened]) #content {
2214
- transform: translateY(-50%) rotateY(0deg);
2215
- }
2216
-
2217
- :host([effect="flip-horizontal"][position="left"]) #content {
2218
- transform: translateY(-50%) rotateY(-70deg);
2219
- }
2220
-
2221
- :host([effect="flip-horizontal"][position="left"][opened]) #content {
2222
- transform: translateY(-50%) rotateY(0deg);
2223
- }
2224
- `,Tt=r`
2225
- :host([effect="flip-vertical"]) {
2226
- perspective: 1300px;
2227
- }
2228
-
2229
- :host([effect="flip-vertical"]) #content {
2230
- transform-style: preserve-3d;
2231
- transition: all var(--kemet-popover-transition-speed, 0.3s);
2232
- opacity: 0;
2233
- }
2234
-
2235
- :host([effect="flip-vertical"][opened]) #content {
2236
- opacity: 1;
2237
- }
2238
-
2239
- :host([effect="flip-vertical"][position="top"]) #content {
2240
- transform: translateX(-50%) rotateX(-70deg);
2241
- }
2242
-
2243
- :host([effect="flip-vertical"][position="top"][opened]) #content {
2244
- transform: translateX(-50%) rotateX(0deg);
2245
- }
2246
-
2247
- :host([effect="flip-vertical"][position="bottom"]) #content {
2248
- transform: translateX(-50%) rotateX(-70deg);
2249
- }
2250
-
2251
- :host([effect="flip-vertical"][position="bottom"][opened]) #content {
2252
- transform: translateX(-50%) rotateX(0deg);
2253
- }
2254
-
2255
- :host([effect="flip-vertical"][position="right"]) #content {
2256
- transform: translateY(-50%) rotateX(-70deg);
2257
- }
2258
-
2259
- :host([effect="flip-vertical"][position="right"][opened]) #content {
2260
- transform: translateY(-50%) rotateX(0deg);
2261
- }
2262
-
2263
- :host([effect="flip-vertical"][position="left"]) #content {
2264
- transform: translateY(-50%) rotateX(-70deg);
2265
- }
2266
-
2267
- :host([effect="flip-vertical"][position="left"][opened]) #content {
2268
- transform: translateY(-50%) rotateX(0deg);
2269
- }
2270
- `,Pt=r`
2271
- :host([effect="sign"]) {
2272
- perspective: 1300px;
2273
- }
2274
-
2275
- :host([effect="sign"]) #content {
2276
- transform-style: preserve-3d;
2277
- transition: all var(--kemet-popover-transition-speed, 0.3s);
2278
- opacity: 0;
2279
- }
2280
-
2281
- :host([effect="sign"][opened]) #content {
2282
- opacity: 1;
2283
- }
2284
-
2285
- :host([effect="sign"][position="top"]) #content {
2286
- transform-origin: 0 100%;
2287
- transform: translateX(-50%) rotateX(90deg);
2288
- }
2289
-
2290
- :host([effect="sign"][position="top"][opened]) #content {
2291
- transform: translateX(-50%) rotateX(0deg);
2292
- }
2293
-
2294
- :host([effect="sign"][position="bottom"]) #content {
2295
- transform-origin: 100% 0;
2296
- transform: translateX(-50%) rotateX(90deg);
2297
- }
2298
-
2299
- :host([effect="sign"][position="bottom"][opened]) #content {
2300
- transform: translateX(-50%) rotateX(0deg);
2301
- }
2302
-
2303
- :host([effect="sign"][position="right"]) #content {
2304
- transform-origin: 0 100%;
2305
- transform: translateY(-50%) rotateY(90deg);
2306
- }
2307
-
2308
- :host([effect="sign"][position="right"][opened]) #content {
2309
- transform: translateY(-50%) rotateY(0deg);
2310
- }
2311
-
2312
- :host([effect="sign"][position="left"]) #content {
2313
- transform-origin: 100% 0;
2314
- transform: translateY(-50%) rotateY(90deg);
2315
- }
2316
-
2317
- :host([effect="sign"][position="left"][opened]) #content {
2318
- transform: translateY(-50%) rotateY(0deg);
2319
- }
2320
- `,Dt=r`
2321
- :host([effect="super-scaled"]) #content {
2322
- opacity: 0;
2323
- transition: all var(--kemet-popover-transition-speed, 0.3s);
2324
- }
2325
-
2326
- :host([effect="super-scaled"][opened]) #content {
2327
- opacity: 1;
2328
- }
2329
-
2330
- :host([effect="super-scaled"][position="top"]) #content,
2331
- :host([effect="super-scaled"][position="bottom"]) #content {
2332
- transform: translateX(-50%) scale(2);
2333
- }
2334
-
2335
- :host([effect="super-scaled"][position="top"][opened]) #content,
2336
- :host([effect="super-scaled"][position="bottom"][opened]) #content {
2337
- transform: translateX(-50%) scale(1);
2338
- }
2339
-
2340
- :host([effect="super-scaled"][position="left"]) #content,
2341
- :host([effect="super-scaled"][position="right"]) #content {
2342
- transform: translateY(-50%) scale(2);
2343
- }
2344
-
2345
- :host([effect="super-scaled"][position="left"][opened]) #content,
2346
- :host([effect="super-scaled"][position="right"][opened]) #content {
2347
- transform: translateY(-50%) scale(1);
2348
- }
2349
- `,Mt=13,Ut=32,Xt=27;customElements.get("kemet-popover")||customElements.define("kemet-popover",class extends Z{static get styles(){return[r`
2350
- :host {
2351
- display: inline-block;
2352
- position: relative;
2353
- z-index: unset;
2354
- }
2355
-
2356
- #trigger {
2357
- display: inline-block;
2358
- cursor: pointer;
2359
- }
2360
-
2361
- ::slotted([slot="trigger"]) {
2362
- position: relative;
2363
- /* z-index: 2; */
2364
- }
2365
-
2366
- #content {
2367
- visibility: hidden;
2368
- pointer-events: none;
2369
- width: var(--kemet-popover-width, 100%);
2370
- height: var(--kemet-popover-height, auto);
2371
- position: absolute;
2372
- z-index: -1;
2373
- }
2374
-
2375
- :host([opened]) #content {
2376
- visibility: visible;
2377
- z-index: 9;
2378
- pointer-events: auto;
2379
- }
2380
-
2381
- ::slotted([slot="content"]) {
2382
- color: var(--kemet-popover-color, #fafafa);
2383
- display: block;
2384
- position: relative;
2385
- z-index: 2;
2386
- cursor: default;
2387
- width: 100%;
2388
- padding: 1rem;
2389
- box-sizing: border-box;
2390
- background-color: var(--kemet-popover-background-color, #202020);
2391
- transform: translate(var(--kemet-popover-content-offset-x, 0), var(--kemet-popover-content-offset-y, 0));
2392
- }
2393
-
2394
- :host([position="top"]) #content {
2395
- bottom: calc(100% + var(--kemet-popover-gap, 1rem));
2396
- left: 50%;
2397
- transform: translateX(-50%);
2398
- }
2399
-
2400
- :host([position="right"]) #content {
2401
- left: calc(100% + var(--kemet-popover-gap, 1rem));
2402
- top: 50%;
2403
- transform: translateY(-50%);
2404
- }
2405
-
2406
- :host([position="bottom"]) #content {
2407
- top: calc(100% + var(--kemet-popover-gap, 1rem));
2408
- left: 50%;
2409
- transform: translateX(-50%);
2410
- }
2411
-
2412
- :host([position="left"]) #content {
2413
- right: calc(100% + var(--kemet-popover-gap, 1rem));
2414
- top: 50%;
2415
- transform: translateY(-50%);
2416
- }
2417
-
2418
- #overlay {
2419
- display: none;
2420
- }
2421
-
2422
- :host([opened]) #overlay {
2423
- display: block;
2424
- position: fixed;
2425
- top: 0;
2426
- right: 0;
2427
- bottom: 0;
2428
- left: 0;
2429
- z-index: 1;
2430
- width: 100%;
2431
- height: 100%;
2432
- min-height: 100vh;
2433
- }
2434
- `,At,Ct,zt,Lt,Bt,It,Ot,Tt,Pt,Dt]}static get properties(){return{opened:{type:Boolean,reflect:!0},effect:{string:String,reflect:!0},position:{type:String,reflect:!0},tooltip:{type:Boolean},customTooltip:{type:Boolean,attribute:"custom-tooltip"},fireOn:{type:String,attribute:"fire-on"},clickOutside:{type:Boolean,attribute:"click-outside"},smart:{type:Boolean}}}constructor(){super(),this.opened=!1,this.effect=null,this.position="top",this.tooltip=!1,this.customTooltip=!1,this.fireOn="hover",this.clickOutside=!1,this.smart=!0,this.addEventListener("kemet-popover-close-btn",this.close.bind(this))}firstUpdated(){this.focusableSelector="body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popover-close",this.focusableElements=this.querySelectorAll(this.focusableSelector),this.contentElement=this.shadowRoot.querySelector('slot[name="content"]').assignedNodes({flatten:!0})[0],window.addEventListener("resize",(()=>{this.smartContent()})),"click"===this.fireOn&&this.focusableElements.forEach((t=>{t.addEventListener("keydown",(t=>this.handleFocusableDown(t)))}))}updated(t){t.get("opened")||!0!==this.opened||Q(this,"kemet-popover-opened",this),t.get("opened")&&!1===this.opened&&Q(this,"kemet-popover-closed",this),this.smartContent()}render(){return I`
2435
- <div
2436
- id="trigger"
2437
- part="trigger"
2438
- tabIndex="0"
2439
- @click=${"click"===this.fireOn?t=>this.toggle(t):null}
2440
- @keyup=${"click"===this.fireOn?t=>this.handleKeyUp(t):null}
2441
- @mouseover=${"click"!==this.fireOn?()=>this.open():null}
2442
- @focus=${"click"!==this.fireOn?()=>this.open():null}
2443
- @mouseout=${"click"!==this.fireOn?()=>this.close():null}
2444
- @blur=${"click"!==this.fireOn?()=>this.close():null}>
2445
- <slot name="trigger"></slot>
2446
- <div id="content" part="content">
2447
- <slot name="content"></slot>
2448
- ${this.makeTooltip()}
2449
- </div>
2450
- </div>
2451
- ${this.makeOverlay()}
2452
- `}open(){this.opened=!0}close(){this.opened=!1}toggle(t){const e="trigger"===t.target.getAttribute("slot"),s="trigger"===t.target.getAttribute("part");(e||s)&&(this.opened?this.close():this.open())}handleKeyUp(t){t.preventDefault(),t.keyCode===Xt&&this.close(),t.keyCode!==Mt&&t.keyCode!==Ut||this.toggle()}handleFocusableDown(t){const e=this.focusableElements[0],s=this.focusableElements[this.focusableElements.length-1];"Tab"===t.key&&(t.shiftKey&&document.activeElement===e?(t.preventDefault(),s.focus()):t.shiftKey||document.activeElement!==s||(t.preventDefault(),e.focus()))}makeTooltip(){return this.customTooltip?I`
2453
- <div id="custom-tooltip" part="custom-tooltip">
2454
- <slot name="custom-tooltip"></slot>
2455
- </div>
2456
- `:this.tooltip?I`
2457
- <div id="tooltip" part="tooltip">
2458
- <svg width="29px" height="14px" enable-background="new 0 0 29 14" viewBox="0 0 29 14">
2459
- <polygon points="0.15,0 14.5,14.35 28.85,0 "/>
2460
- </svg>
2461
- </div>
2462
- `:null}makeOverlay(){return this.clickOutside?I`
2463
- <div id="overlay" @keyup=${()=>this.close()} @click=${()=>this.close()}></div>
2464
- `:null}smartContent(){if(this.smart){this.contentElement.style.removeProperty("left"),this.contentElement.style.removeProperty("right"),this.contentElement.style.removeProperty("top"),this.contentElement.style.removeProperty("bottom");const t=this.contentElement.getBoundingClientRect(),e=24,s=t.left<0,i=window.innerWidth-t.right<0,o=t.top<0,r=t.bottom>window.innerHeight;"top"===this.position&&o&&this.setPosition(t),"right"===this.position&&i&&this.setPosition(t),"bottom"===this.position&&r&&this.setPosition(t),"left"===this.position&&s&&this.setPosition(t),s?this.contentElement.style.left=`${Math.abs(t.left-e)}px`:this.contentElement.style.removeProperty("left"),i?this.contentElement.style.right=`${Math.abs(window.innerWidth-t.right-e)}px`:this.contentElement.style.removeProperty("right"),o?this.contentElement.style.top=`${Math.abs(t.top-e)}px`:this.contentElement.style.removeProperty("top"),r?this.contentElement.style.bottom=`${Math.abs(t.bottom-window.innerHeight-e)}px`:this.contentElement.style.removeProperty("bottom")}}setPosition(t){t.top>0?this.position="top":t.right<window.innerWidth?this.position="right":t.bottom<window.innerHeight&&(this.position="bottom")}});customElements.get("kemet-radio")||customElements.define("kemet-radio",class extends Z{static get styles(){return[r`
2465
- *,
2466
- *::before,
2467
- *::after {
2468
- box-sizing: border-box;
2469
- }
2470
-
2471
- :host {
2472
- display: inline-block;
2473
- }
2474
-
2475
- :host([disabled]) {
2476
- opacity: 0.5;
2477
- }
2478
-
2479
- label {
2480
- cursor: pointer;
2481
- display: inline-flex;
2482
- gap: 0.5rem;
2483
- align-items: center;
2484
- margin-right: 0.5rem;
2485
- }
2486
-
2487
- input {
2488
- cursor: pointer;
2489
- margin: 0;
2490
- padding: 0;
2491
- width: var(--kemet-radio-size, 18px);
2492
- height: var(--kemet-radio-size, 18px);
2493
- position: absolute;
2494
- opacity: 0;
2495
- }
2496
-
2497
- button {
2498
- display: inline-flex;
2499
- align-items: center;
2500
- justify-content: center;
2501
- width: var(--kemet-radio-size, 18px);
2502
- height: var(--kemet-radio-size, 18px);
2503
- padding: 0;
2504
- border-radius: 50%;
2505
- background: none;
2506
- border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
2507
- }
2508
-
2509
- [part='dot'] {
2510
- display: inline-flex;
2511
- border-radius: 50%;
2512
- width: var(--kemet-radio-size, 18px);
2513
- height: var(--kemet-radio-size, 18px);
2514
- background: var(--kemet-radio-dot-color, var(--kemet-color-primary));
2515
- border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
2516
- box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));
2517
- }
2518
-
2519
- :host([filled]) [part='dot'] {
2520
- background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));
2521
- box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));
2522
- }
2523
- `]}static get properties(){return{label:{type:String},checked:{type:Boolean,reflect:!0},name:{type:String},value:{type:String},disabled:{type:Boolean,reflect:!0},focused:{type:Boolean,reflect:!0},filled:{type:Boolean,reflect:!0}}}constructor(){super(),this.label="",this.name=this.closest("kemet-radios").name||"radio-button",this.disabled=!1}firstUpdated(){this.input=this.shadowRoot.querySelector("input"),this.setAttribute("role","radio"),this.checked?this.setAttribute("aria-checked","true"):this.setAttribute("aria-checked","false")}render(){return I`
2524
- <label part="label">
2525
- <input
2526
- type="radio"
2527
- name=${it(this.name)}
2528
- .value=${this.value}
2529
- .checked=${ct(this.checked)}
2530
- .disabled=${this.disabled}
2531
- @blur=${()=>this.handleBlur()}
2532
- @focus=${()=>this.handleFocus()}
2533
- />
2534
- <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
2535
- <span part="text">${this.label}</span>
2536
- </label>
2537
- `}click(){this.input.click()}blur(){this.input.blur()}focus(){this.input.focus()}handleBlur(){this.focused=!1,Q(this,"kemet-radio-focused",!1)}handleFocus(){this.focused=!0,Q(this,"kemet-radio-focused",!0)}makeDot(){return this.checked?I`
2538
- <span part="dot"></span>
2539
- `:null}});customElements.get("kemet-radios")||customElements.define("kemet-radios",class extends Z{static get styles(){return[r`
2540
- *,
2541
- *::before,
2542
- *::after {
2543
- box-sizing: border-box;
2544
- }
2545
-
2546
- :host {
2547
- display: block;
2548
- }
2549
-
2550
- fieldset {
2551
- border: 0;
2552
- margin: 0;
2553
- padding: 0;
2554
- display: flex;
2555
- gap: 0.5rem;
2556
- }
2557
-
2558
- legend {
2559
- margin-bottom: 1rem;
2560
- }
2561
-
2562
- :host([axis='vertical']) fieldset {
2563
- flex-direction: column;
2564
- }
2565
-
2566
- [part='message'] {
2567
- display: block;
2568
- margin-top: 0.5rem;
2569
- }
2570
-
2571
- :host([status='error']) [part='message'] {
2572
- color: var(--kemet-color-error);
2573
- }
2574
-
2575
- :host([status='warning']) [part='message'] {
2576
- color: var(--kemet-color-error);
2577
- }
2578
- `]}static get properties(){return{legend:{type:String},axis:{type:String,reflect:!0},value:{type:String},name:{type:String},status:{type:String,reflect:!0},message:{type:String},required:{type:Boolean}}}constructor(){super(),this.legend="",this.axis="horizontal",this.name="radios",this.status="standard",this.formSubmitController=new et(this)}firstUpdated(){this.radios=this.querySelectorAll("kemet-radio"),this.setAttribute("role","radiogroup")}render(){return I`
2579
- <fieldset part="fieldset">
2580
- ${""!==this.legend?I`<legend part="legend">${this.legend}</legend>`:null}
2581
- <slot @click=${t=>this.handleClick(t)} @keydown=${t=>this.handleKeyDown(t)} @slotchange=${()=>this.handleSlotChange()}></slot>
2582
- </fieldset>
2583
- ${this.makeMessage()}
2584
- `}handleClick(t){const{target:e}=t;this.radios.forEach((t=>{t.checked=!1,t.tabIndex=t===e?0:-1,t.setAttribute("aria-checked","false")})),e.disabled||(e.checked=!0,e.setAttribute("aria-checked","true"),this.value=e.value,this.status="standard",Q(this,"kemet-radios-change",e))}handleKeyDown(t){const e=Array.from(this.radios),s=["ArrowRight","ArrowDown"].includes(t.key)?1:-1;let i=(e.findIndex((t=>t.checked))??e[0])+s;["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)&&(i<0&&(i=e.length-1),i>e.length-1&&(i=0),this.radios.forEach((t=>{t.checked=!1,t.tabIndex=-1})),this.radios[i].focus(),this.radios[i].checked=!0,this.radios[i].tabIndex=0)}handleSlotChange(){const t=Array.from(this.radios).find((t=>t.checked));this.radios.forEach((t=>{t.tabIndex=-1,t.input.tabIndex=-1})),t&&(t.tabIndex=0)}makeMessage(){return"error"===this.status||"warning"===this.status?I`<span part="message">${this.message}</span>`:null}checkValidity(){return!this.required||!!this.value}});
2585
- /**
2586
- * @license
2587
- * Copyright 2017 Google LLC
2588
- * SPDX-License-Identifier: BSD-3-Clause
2589
- */
2590
- class Nt extends dt{constructor(t){if(super(t),this.it=T,t.type!==rt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===T||null==t)return this.ft=void 0,this.it=t;if(t===O)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.ft;this.it=t;const e=[t];return e.raw=e,this.ft={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Nt.directiveName="unsafeHTML",Nt.resultType=1;const qt=lt(Nt);customElements.get("kemet-rotator")||customElements.define("kemet-rotator",class extends Z{static get styles(){return r`
2591
- :host {
2592
- display: flex;
2593
- }
2594
-
2595
- .rotator__slide {
2596
- pointer-events: none;
2597
- }
2598
-
2599
- .rotator__slide--active {
2600
- pointer-events: auto;
2601
- }
2602
-
2603
- /* fade effect */
2604
- :host([effect="fade"]) .rotator {
2605
- display: inline-flex;
2606
- flex-wrap: nowrap;
2607
- flex-direction: row;
2608
- }
2609
-
2610
- :host([effect="fade"]) .rotator__slide {
2611
- width: 100%;
2612
- flex: none;
2613
- opacity: 0;
2614
- box-sizing: border-box;
2615
- transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
2616
- }
2617
-
2618
- :host([effect="fade"]) .rotator__slide:not(:first-child) {
2619
- margin-left: -100%; /* this is the bulk of the overlay trick */
2620
- }
2621
-
2622
- :host([effect="fade"]) .rotator__slide--active {
2623
- opacity: 1;
2624
- }
2625
-
2626
- /* flip effect */
2627
- :host([effect="flip"]) .rotator {
2628
- display: flex;
2629
- position: relative;
2630
-
2631
- perspective: 500;
2632
- }
2633
-
2634
- :host([effect="flip"]) .rotator__slide {
2635
- display: block;
2636
- width: auto;
2637
- position: absolute;
2638
- top: -20px;
2639
- left: 0;
2640
-
2641
- opacity: 0;
2642
-
2643
- transform: rotateX(90deg);
2644
- transform-origin: 0% 0%;
2645
- transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
2646
- }
2647
-
2648
- :host([effect="flip"]) .rotator__slide--active {
2649
- top: 0;
2650
- opacity: 1;
2651
-
2652
- transform: rotateX(0deg);
2653
- }
2654
-
2655
- :host([effect="flip"]) .rotator__slide--prev {
2656
- top: 40px;;
2657
- transform: rotateX(-90deg);
2658
- }
2659
- `}static get properties(){return{activeSlide:{type:Number},width:{type:String},height:{type:String},messages:{type:Array},effect:{type:String,reflect:!0},rotationSpeed:{type:Number,attribute:"rotation-speed"}}}constructor(){super(),this.activeSlide=0,this.messages=[],this.effect="fade",this.rotationSpeed=3,this.width="auto",this.height="auto"}firstUpdated(){this.prevSlide=null,window.addEventListener("resize",this.setDimensions.bind(this))}updated(t){const e=!!t.get("width"),s=!!t.get("height");this.setDimensions(),e||s||setTimeout((()=>{this.rotationSpeed>0&&this.nextSlide()}),1e3*this.rotationSpeed)}render(){const t="flip"===this.effect?`width:${this.width};`:"",e="flip"===this.effect?`height:${this.height};`:"";return I`
2660
- <span class="rotator" style="${t} ${e}">
2661
- ${this.makeMessages()}
2662
- </span>
2663
- `}makeMessages(){return this.messages.map(((t,e)=>{const s=this.activeSlide===e?"rotator__slide--active":"",i=this.prevSlide===e?"rotator__slide--prev":"";return I`
2664
- <span class="rotator__slide ${s} ${i}">
2665
- ${qt(t)}
2666
- </span>
2667
- `}))}setDimensions(){if("flip"===this.effect){this.width=`${this.offsetWidth}px`;const t=this.shadowRoot.querySelectorAll(".rotator__slide");let e=0;t.forEach((t=>{t.offsetHeight>e&&(e=t.offsetHeight)})),this.height=`${e}px`}}nextSlide(){this.activeSlide<this.messages.length-1?(this.activeSlide+=1,this.prevSlide=this.activeSlide-1):(this.activeSlide=0,this.prevSlide=this.messages.length-1)}});customElements.get("kemet-scroll-link")||customElements.define("kemet-scroll-link",class extends Z{static get styles(){return r`
2668
- :host {
2669
- cursor: pointer;
2670
- display: inline-block;
2671
- }
2672
- `}static get properties(){return{element:{type:Object},target:{type:Object},xOffset:{type:Number,attribute:"x-offset",reflect:!0},yOffset:{type:Number,attribute:"y-offset",reflect:!0}}}constructor(){super(),this.element=this.element||window,this.target=this.target||document.querySelector("body"),this.xOffset=0,this.yOffset=0}firstUpdated(){this.keyCodes={ENTER:13,SPACE:32},this.isSmoothSupported="scrollBehavior"in document.documentElement.style}render(){return I`
2673
- <div tabindex="0" @click=${()=>this.handleScroll()} @keyup=${t=>this.handleKeyup(t)}>
2674
- <slot></slot>
2675
- </div>
2676
- `}handleKeyup(t){t.keyCode!==this.keyCodes.ENTER&&t.keyCode!==this.keyCodes.SPACE||this.handleScroll()}handleScroll(){const t=this.target.offsetTop+this.yOffset,e=this.target.offsetLeft+this.xOffset;this.isSmoothSupported?this.element.scrollTo({top:t,left:e,behavior:"smooth"}):this.element.scrollTo(e,t)}});customElements.get("kemet-scroll-nav")||customElements.define("kemet-scroll-nav",class extends Z{static get styles(){return[r`
2677
- :host {
2678
- display: block;
2679
- box-sizing: border-box;
2680
- padding: var(--kemet-scroll-nav-padding, 1rem 2rem);
2681
- background-color: var(--kemet-scroll-nav-background, #fafafa);
2682
- transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
2683
- }
2684
-
2685
- :host([transform]),
2686
- :host([effect="resize"]) {
2687
- position: fixed;
2688
- top: 0;
2689
- width: 100%;
2690
- }
2691
-
2692
- :host([effect="resize"]) {
2693
- height: var(--kemet-scroll-nav-resize-height, 400px);
2694
- }
2695
-
2696
- :host([transform][effect="resize"]) {
2697
- height: var(--kemet-scroll-nav-resize-height-transformed, 100px);
2698
- }
2699
- `]}static get properties(){return{effect:{type:String,reflect:!0},transform:{type:Boolean,reflect:!0},offset:{type:Number}}}constructor(){super(),this.effect="sticky",this.transform=!1,this.offset=0}render(){return I`
2700
- <slot></slot>
2701
- `}firstUpdated(){const t=this.offsetTop,e=this.offsetHeight;window.addEventListener("scroll",(()=>{this.handleScroll(t,e)}))}handleScroll(t,e){const s="sticky"===this.effect?t+this.offset:e+this.offset;window.pageYOffset>=s?this.transform=!0:this.transform=!1}});customElements.get("kemet-scroll-snap-paginator")||customElements.define("kemet-scroll-snap-paginator",class extends Z{static get styles(){return r`
2702
- :host {
2703
- margin: auto;
2704
- padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);
2705
- }
2706
-
2707
- nav {
2708
- display: flex;
2709
- gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);
2710
- }
2711
-
2712
- :host([center]) nav {
2713
- justify-content: center;
2714
- }
2715
-
2716
- .link {
2717
- cursor: pointer;
2718
- color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));
2719
- }
2720
- `}static get properties(){return{slides:{type:Array},icon:{type:String},size:{type:Number},center:{type:Boolean,reflect:!0},hideFocusedLinks:{type:Boolean,attribute:"hide-focused-links"},useNumberPages:{type:Boolean,reflect:!0,attribute:"use-number-pages"},useLabelPages:{type:Boolean,reflect:!0,attribute:"use-label-pages"}}}constructor(){super(),this.slides=[],this.icon="circle-fill",this.size=16,this.hideFocusedLinks=!1,this.useNumberPages=!1,this.useLabelPages=!1}updated(){const t=this.closest("kemet-scroll-snap");t&&t.addEventListener("kemet-scroll-snap-make-slides",(t=>{this.slides=t.detail}))}render(){return I`
2721
- <nav part="nav">${this.makePagination()}</nav>
2722
- `}makePagination(){let t=0;return this.slides?this.slides.map((e=>(t=t+=1,e.focused?I`
2723
- <span part="span">${this.pageDisplay(e,t)}</span>
2724
- `:I`
2725
- <span
2726
- class="link"
2727
- tabindex="0"
2728
- role="button"
2729
- @keyup="${t=>this.handleKeyboardInput(t,e.id)}"
2730
- @click=${()=>this.slideLink(e.id)}
2731
- aria-label="${e.label}">
2732
- ${this.pageDisplay(e,t)}
2733
- </span>
2734
- `))):null}pageDisplay(t,e){return this.useNumberPages?e:this.useLabelPages?t.label:I`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`}slideLink(t){Q(this,"kemet-scroll-snap-focus",t)}handleKeyboardInput(t,e){"Enter"!==t.code&&"Space"!==t.code||this.slideLink(e)}});customElements.get("kemet-scroll-snap-slide")||customElements.define("kemet-scroll-snap-slide",class extends Z{static get styles(){return r`
2735
- :host {
2736
- display: block;
2737
- flex: 0 0 auto;
2738
- width: var(--kemet-scroll-snap-slide-width, 100%);
2739
- scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
2740
- }
2741
- `}static get properties(){return{focused:{type:Boolean,reflect:!0},index:{type:String,reflect:!0},label:{type:String,reflect:!0}}}updated(){this.addTabIndex()}render(){return I`
2742
- <slot></slot>
2743
- `}addTabIndex(){this.setAttribute("tabindex","0")}});customElements.get("kemet-scroll-snap")||customElements.define("kemet-scroll-snap",class extends Z{static get styles(){return r`
2744
- *,
2745
- *::after,
2746
- *::before {
2747
- box-sizing: border-box;
2748
- }
2749
-
2750
- :host {
2751
- display: flex;
2752
- flex-direction: column;
2753
- width: 100%;
2754
- }
2755
-
2756
- :host([axis='horizontal']) {
2757
- margin: auto;
2758
- max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);
2759
- }
2760
-
2761
- :host([pagination="left"]),
2762
- :host([pagination="right"]) {
2763
- flex-direction: row;
2764
- }
2765
-
2766
- :host([pagination="none"]) ::slotted([slot="pagination"]) {
2767
- display: none;
2768
- }
2769
-
2770
- :host([pagination="top"]) ::slotted([slot="pagination"]),
2771
- :host([pagination="left"]) ::slotted([slot="pagination"]) {
2772
- order: -1;
2773
- }
2774
-
2775
-
2776
- ::slotted([slot="slides"]) {
2777
- display: flex;
2778
- gap: var(--kemet-scroll-snap-gap, 1.5rem);
2779
- scroll-snap-type: x mandatory;
2780
- overflow-x: scroll;
2781
- }
2782
-
2783
- /* vertical */
2784
- :host([axis="vertical"]) {
2785
- height: var(--kemet-scroll-snap-vertical-height, 100vh);
2786
- }
2787
-
2788
- :host([axis="vertical"]) ::slotted([slot="slides"]) {
2789
- flex-direction: column;
2790
- overflow-x: hidden;
2791
- scroll-snap-type: y mandatory;
2792
- padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);
2793
- }
2794
- `}static get properties(){return{axis:{type:String,reflect:!0},pagination:{type:String,reflect:!0}}}constructor(){super(),this.axis="horizontal",this.pagination="bottom",this.addEventListener("kemet-scroll-snap-focus",(t=>{this.focusSlide(t.detail)}))}firstUpdated(){this.isTouchDevice="ontouchstart"in document.documentElement,this.slides=[],this.setFocusedSlides()}updated(){this.setVerticalAttribute()}render(){return I`
2795
- <slot name="slides"></slot>
2796
- <slot name="pagination"></slot>
2797
- `}setFocusedSlides(){const t=this.querySelectorAll("kemet-scroll-snap-slide"),e=this.querySelector('[slot="slides"]'),s=new IntersectionObserver((t=>{t.forEach((t=>{const{target:e}=t;t.intersectionRatio>=.5?e.focused=!0:e.focused=!1})),this.makeSlides()}),{root:e,rootMargin:"0px",threshold:.5});t.forEach((t=>{s.observe(t)}))}makeSlides(){const t=[];this.querySelectorAll("kemet-scroll-snap-slide").forEach(((e,s)=>{const i=e;i.index=s,t.push({id:s,focused:i.focused,label:i.label})})),this.slides=t,Q(this,"kemet-scroll-snap-make-slides",this.slides)}focusSlide(t){this.querySelector(`kemet-scroll-snap-slide[index="${t}"]`).scrollIntoView({behavior:"smooth",block:"nearest"})}setVerticalAttribute(){"vertical"===this.axis&&document.querySelector("html").setAttribute("kemet-scroll-snap-axis","vertical")}});customElements.get("kemet-option")||customElements.define("kemet-option",class extends Z{static get properties(){return{label:{type:String},value:{type:String},disabled:{type:Boolean},selected:{type:Boolean}}}constructor(){super(),this.value=""}render(){return I`<slot></slot>`}});customElements.get("kemet-select")||customElements.define("kemet-select",class extends Z{static get styles(){return[r`
2798
- :host {
2799
- position: relative;
2800
- display: block;
2801
- }
2802
-
2803
- select {
2804
- display: block;
2805
- font-size: 1rem;
2806
- width: 100%;
2807
- padding: var(--kemet-select-padding, 1rem);
2808
- border: var(--kemet-select-border, 1px solid var(--kemet-color-primary));
2809
- appearance: none;
2810
- box-sizing: border-box;
2811
- background-color: transparent;
2812
- }
2813
-
2814
- :host([status='error']) select {
2815
- border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));
2816
- }
2817
-
2818
- :host([status='success']) select {
2819
- border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));
2820
- }
2821
-
2822
- :host([status='warning']) select {
2823
- border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));
2824
- }
2825
-
2826
- :host([disabled]) select {
2827
- opacity: 0.5;
2828
- }
2829
-
2830
- :host([rounded]) select {
2831
- border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));
2832
- }
2833
-
2834
- :host([filled]) select {
2835
- border: var(--kemet-select-border-filled, none);
2836
- color: var(--kemet-select-color-filled, var(--kemet-color-white));
2837
- background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));
2838
- }
2839
-
2840
- :host([filled]) kemet-icon {
2841
- color: var(--kemet-select-color-filled, var(--kemet-color-white));
2842
- }
2843
-
2844
- :host([status='error'][filled]) select {
2845
- background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));
2846
- }
2847
-
2848
- :host([status='success'][filled]) select {
2849
- background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));
2850
- }
2851
-
2852
- :host([status='warning'][filled]) select {
2853
- background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));
2854
- }
2855
-
2856
- kemet-icon {
2857
- position: absolute;
2858
- right: var(--kemet-select-icon-right, 1rem);
2859
- top: 50%;
2860
- transform: translateY(-50%);
2861
- }
2862
- `]}static get properties(){return{slug:{type:String},name:{type:String},value:{type:String},options:{type:Array},status:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},multiple:{type:Boolean},icon:{type:String},iconSize:{type:Number,attribute:"icon-size"},filled:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0}}}constructor(){super(),this.name="select",this.icon="chevron-down",this.iconSize=16,this.formSubmitController=new et(this),this.control=this.closest("kemet-field")}firstUpdated(){this.select=this.shadowRoot.querySelector("select"),this.selectedOption=this.querySelector("[selected]"),this.value=this.selectedOption?this.selectedOption.value:""}render(){return I`
2863
- <select
2864
- part="select"
2865
- id=${this.slug}
2866
- name=${this.name}
2867
- ?required=${this.required}
2868
- ?disabled=${this.disabled}
2869
- ?multiple=${this.multiple}
2870
- @change=${this.handleChange}
2871
- @focus=${this.handleFocus}
2872
- @blur=${this.handleBlur}
2873
- @invalid=${this.handleInvalid}
2874
- >
2875
- ${this.makeOptions()}
2876
- </select>
2877
- ${this.makeIcon()}
2878
- <slot @slotchange=${()=>this.makeOptions()}></slot>
2879
- `}makeOptions(){return this.options=[],this.optionElements=this.querySelectorAll("kemet-option"),this.optionElements.forEach((t=>{this.options=this.options.concat({label:t.label,value:t.value,disabled:t.disabled,selected:t.selected})})),this.options.map((t=>I`<option value=${t.value} ?disabled=${t.disabled} ?selected=${t.selected}>
2880
- ${t.label}
2881
- </option>`))}makeIcon(){return this.icon||""!==this.icon?I`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`:null}handleFocus(){this.hasFocus=!0,Q(this,"kemet-input-focused",!0)}handleBlur(){this.hasFocus=!1,Q(this,"kemet-input-focused",!1),this.select.checkValidity(),this.select.checkValidity()||(this.invalid=!0,this.status="error",this.control.status="error",Q(this,"kemet-input-status",{status:"error",validity:this.select.validity,element:this}))}handleChange(){this.value=this.select.value,this.select.checkValidity()&&(this.invalid=!1,this.status="standard",Q(this,"kemet-input-status",{status:"standard",validity:this.select.validity,element:this}))}handleInvalid(){this.invalid=!0,this.status="error",Q(this,"kemet-input-status",{status:"error",validity:this.select.validity,element:this})}checkValidity(){this.select.checkValidity()}});customElements.get("kemet-sortable-item")||customElements.define("kemet-sortable-item",class extends Z{static get styles(){return[r`
2882
- :host {
2883
- cursor: grab;
2884
- display: block;
2885
- padding: 1rem;
2886
- border: 1px solid var(--kemet-color-primary);
2887
- }
2888
-
2889
- :host([ghost]) {
2890
- opacity: 0.5;
2891
- border-style: dashed;
2892
- }
2893
- `]}static get properties(){return{ghost:{type:Boolean,reflect:!0}}}firstUpdated(){this.draggable=!0}render(){return I`<slot></slot>`}});"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var Rt={exports:{}};!function(t){function e(){var t={dragEvents:"ondragstart"in document.documentElement,draggable:"draggable"in document.documentElement,touchEvents:"ontouchstart"in document.documentElement,userAgentSupportingNativeDnD:void 0},e=!!window.chrome||/chrome/i.test(navigator.userAgent);return t.userAgentSupportingNativeDnD=!(/iPad|iPhone|iPod|Android/.test(navigator.userAgent)||e&&t.touchEvents),t}function s(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}function i(t){if(t&&Object.keys(t).forEach((function(e){_[e]=t[e]})),!_.forceApply){var i=e();if(i.userAgentSupportingNativeDnD&&i.draggable&&i.dragEvents)return!1}return E=s(),_.holdToDrag?n("touchstart",w,!1):n("touchstart",o,!1),!0}function o(t){if(!S){var e=r(t);if(e)try{S=new T(t,_,e,a)}catch(e){throw a(_,t,3),e}}}function r(t){var e=t.target;do{if(!1!==e.draggable&&e.getAttribute&&"true"===e.getAttribute("draggable"))return e}while((e=e.parentNode)&&e!==document.body)}function a(t,e,s){if(0===s&&t.defaultActionOverride)try{t.defaultActionOverride(e),e.defaultPrevented}catch(t){}S=null}function n(t,e,s){void 0===s&&(s=!0),document.addEventListener(t,e,!!E&&{passive:s})}function l(t,e){document.removeEventListener(t,e)}function d(t){return 0===t.length?0:t.reduce((function(t,e){return e+t}),0)/t.length}function h(t){return t&&t.tagName}function c(t,e){for(var s=0;s<t.changedTouches.length;s++)if(t.changedTouches[s].identifier===e)return!0;return!1}function p(t,e,s,i,o,r,a){void 0===a&&(a=null);var n=e.changedTouches[0],l=new Event(s,{bubbles:!0,cancelable:i});l.dataTransfer=r,l.relatedTarget=a,l.screenX=n.screenX,l.screenY=n.screenY,l.clientX=n.clientX,l.clientY=n.clientY,l.pageX=n.pageX,l.pageY=n.pageY;var d=t.getBoundingClientRect();return l.offsetX=l.clientX-d.left,l.offsetY=l.clientY-d.top,l}function u(t,e,s){for(var i=[],o=[],r=0;r<e.touches.length;r++){var a=e.touches[r];i.push(a[t+"X"]),o.push(a[t+"Y"])}s.x=d(i),s.y=d(o)}function m(t,e){if(1===t.nodeType){for(var s=getComputedStyle(t),i=0;i<s.length;i++){var o=s[i];e.style.setProperty(o,s.getPropertyValue(o),s.getPropertyPriority(o))}e.style.pointerEvents="none",e.removeAttribute("id"),e.removeAttribute("class"),e.removeAttribute("draggable")}if(t.hasChildNodes())for(i=0;i<t.childNodes.length;i++)m(t.childNodes[i],e.childNodes[i])}function f(t){var e=t.cloneNode(!0);return m(t,e),e.style.position="absolute",e.style.left="0px",e.style.top="0px",e.style.zIndex="999999",e.classList.add(B),e.classList.add(O),e}function g(t){return z.map((function(e){var s=t.style[e+"transform"];return s&&"none"!==s?s.replace(/translate\(\D*\d+[^,]*,\D*\d+[^,]*\)\s*/g,""):""}))}function v(t,e,s,i,o){void 0===o&&(o=!0);var r=e.x,a=e.y;i&&(r+=i.x,a+=i.y),o&&(r-=parseInt(t.offsetWidth,10)/2,a-=parseInt(t.offsetHeight,10)/2);for(var n="translate3d("+r+"px,"+a+"px, 0)",l=0;l<z.length;l++){var d=z[l]+"transform";t.style[d]=n+" "+s[l]}}function b(t,e,s,i){var o=getComputedStyle(t);if("hidden"!==o.visibility&&"none"!==o.display){e.classList.add(I);var r=getComputedStyle(e),a=parseFloat(r.transitionDuration);if(isNaN(a)||0===a)i();else{var n=t.getBoundingClientRect(),l={x:n.left,y:n.top};l.x+=document.body.scrollLeft||document.documentElement.scrollLeft,l.y+=document.body.scrollTop||document.documentElement.scrollTop,l.x-=parseInt(o.marginLeft,10),l.y-=parseInt(o.marginTop,10);var d=parseFloat(r.transitionDelay),h=Math.round(1e3*(a+d));v(e,l,s,void 0,!1),setTimeout(i,h)}}else i()}function k(t,e){return t?t===A[0]?C[0]:0===t.indexOf(A[1])||t===A[7]?C[1]:0===t.indexOf(A[4])?C[3]:t===A[6]?C[2]:C[1]:3===e.nodeType&&"A"===e.tagName?C[3]:C[1]}function y(t,e,s,i,o,r,a){void 0===r&&(r=!0),void 0===a&&(a=null);var n=p(e,s,t,r,document.defaultView,o,a),l=!e.dispatchEvent(n);return i.g=0,l}function x(t,e){if(!t||t===A[7])return e;if(e===C[1]){if(0===t.indexOf(C[1]))return C[1]}else if(e===C[3]){if(0===t.indexOf(C[3])||t.indexOf("Link")>-1)return C[3]}else if(e===C[2]&&(0===t.indexOf(C[2])||t.indexOf("Move")>-1))return C[2];return C[0]}function w(t){var e=t.target,s=function(){r.off(),a.off(),n.off(),clearTimeout(i)},i=setTimeout((function(){r.off(),a.off(),n.off(),o(t)}),_.holdToDrag),r=$(e,"touchend",s,this),a=$(e,"touchcancel",s,this),n=$(window,"scroll",s,this)}function $(t,e,s,i){return i&&(s=s.bind(i)),t.addEventListener(e,s),{off:function(){return t.removeEventListener(e,s)}}}var E,S,_={iterationInterval:150},A=["none","copy","copyLink","copyMove","link","linkMove","move","all"],C=["none","copy","move","link"],z=["","-webkit-"],L="dnd-poly-",B=L+"drag-image",I=L+"snapback",O=L+"icon",T=function(){function t(t,e,s,i){this.h=t,this.i=e,this.j=s,this.k=i,this.l=0,this.m=null,this.o=null,this.p=t,this.q=t.changedTouches[0],this.s=this.t.bind(this),this.u=this.v.bind(this),n("touchmove",this.s,!1),n("touchend",this.u,!1),n("touchcancel",this.u,!1)}return t.prototype.A=function(){var t=this;this.l=1,this.B=C[0],this.C={D:{},F:void 0,g:3,G:[]},this.H={x:null,y:null},this.I={x:null,y:null};var e=this.j;if(this.J=new P(this.C,(function(s,i,o){e=s,"number"!=typeof i&&"number"!=typeof o||(t.K={x:i||0,y:o||0})})),this.C.g=2,this.J.dropEffect=C[0],y("dragstart",this.j,this.p,this.C,this.J))return this.l=3,this.L(),!1;if(u("page",this.p,this.I),this.M=f(e),this.N=g(this.M),!this.K)if(this.i.dragImageOffset)this.K={x:this.i.dragImageOffset.x,y:this.i.dragImageOffset.y};else if(this.i.dragImageCenterOnTouch){var s=getComputedStyle(e);this.K={x:0-parseInt(s.marginLeft,10),y:0-parseInt(s.marginTop,10)}}else{var i=e.getBoundingClientRect();s=getComputedStyle(e),this.K={x:i.left-this.q.clientX-parseInt(s.marginLeft,10)+i.width/2,y:i.top-this.q.clientY-parseInt(s.marginTop,10)+i.height/2}}return v(this.M,this.I,this.N,this.K,this.i.dragImageCenterOnTouch),document.body.appendChild(this.M),this.O=setInterval((function(){t.P||(t.P=!0,t.R(),t.P=!1)}),this.i.iterationInterval),!0},t.prototype.L=function(){this.O&&(clearInterval(this.O),this.O=null),l("touchmove",this.s),l("touchend",this.u),l("touchcancel",this.u),this.M&&(this.M.parentNode.removeChild(this.M),this.M=null),this.k(this.i,this.p,this.l)},t.prototype.t=function(t){var e=this;if(!1!==c(t,this.q.identifier)){if(this.p=t,0===this.l){var s=void 0;if(this.i.dragStartConditionOverride)try{s=this.i.dragStartConditionOverride(t)}catch(t){s=!1}else s=1===t.touches.length;return s?void(!0===this.A()&&(this.h.preventDefault(),t.preventDefault())):void this.L()}if(t.preventDefault(),u("client",t,this.H),u("page",t,this.I),this.i.dragImageTranslateOverride)try{var i=!1;if(this.i.dragImageTranslateOverride(t,{x:this.H.x,y:this.H.y},this.m,(function(t,s){e.M&&(i=!0,e.H.x+=t,e.H.y+=s,e.I.x+=t,e.I.y+=s,v(e.M,e.I,e.N,e.K,e.i.dragImageCenterOnTouch))})),i)return}catch(t){}v(this.M,this.I,this.N,this.K,this.i.dragImageCenterOnTouch)}},t.prototype.v=function(t){if(!1!==c(t,this.q.identifier)){if(this.i.dragImageTranslateOverride)try{this.i.dragImageTranslateOverride(void 0,void 0,void 0,(function(){}))}catch(t){}if(0===this.l)return void this.L();t.preventDefault(),this.l="touchcancel"===t.type?3:2}},t.prototype.R=function(){var t=this,e=this.B;this.C.g=3,this.J.dropEffect=C[0];var s=y("drag",this.j,this.p,this.C,this.J);if(s&&(this.B=C[0]),s||2===this.l||3===this.l)return this.S(this.l)?void b(this.j,this.M,this.N,(function(){t.T()})):void this.T();var i=document.elementFromPoint(this.H.x,this.H.y),o=this.o;i!==this.m&&i!==this.o&&(this.m=i,null!==this.o&&(this.C.g=3,this.J.dropEffect=C[0],y("dragexit",this.o,this.p,this.C,this.J,!1)),null===this.m?this.o=this.m:(this.C.g=3,this.J.dropEffect=k(this.C.F,this.j),y("dragenter",this.m,this.p,this.C,this.J)?(this.o=this.m,this.B=x(this.J.effectAllowed,this.J.dropEffect)):this.m!==document.body&&(this.o=document.body))),o!==this.o&&h(o)&&(this.C.g=3,this.J.dropEffect=C[0],y("dragleave",o,this.p,this.C,this.J,!1,this.o)),h(this.o)&&(this.C.g=3,this.J.dropEffect=k(this.C.F,this.j),!1===y("dragover",this.o,this.p,this.C,this.J)?this.B=C[0]:this.B=x(this.J.effectAllowed,this.J.dropEffect)),e!==this.B&&this.M.classList.remove(L+e);var r=L+this.B;!1===this.M.classList.contains(r)&&this.M.classList.add(r)},t.prototype.S=function(t){var e=this.B===C[0]||null===this.o||3===t;return e?h(this.o)&&(this.C.g=3,this.J.dropEffect=C[0],y("dragleave",this.o,this.p,this.C,this.J,!1)):h(this.o)&&(this.C.g=1,this.J.dropEffect=this.B,!0===y("drop",this.o,this.p,this.C,this.J)?this.B=this.J.dropEffect:this.B=C[0]),e},t.prototype.T=function(){this.C.g=3,this.J.dropEffect=this.B,y("dragend",this.j,this.p,this.C,this.J,!1),this.l=2,this.L()},t}(),P=function(){function t(t,e){this.U=t,this.V=e,this.W=C[0]}return Object.defineProperty(t.prototype,"types",{get:function(){if(0!==this.U.g)return Object.freeze(this.U.G)},enumerable:!0,configurable:!0}),t.prototype.setData=function(t,e){if(2===this.U.g){if(t.indexOf(" ")>-1)throw new Error("illegal arg: type contains space");this.U.D[t]=e,-1===this.U.G.indexOf(t)&&this.U.G.push(t)}},t.prototype.getData=function(t){if(1===this.U.g||2===this.U.g)return this.U.D[t]||""},t.prototype.clearData=function(t){if(2===this.U.g){if(t&&this.U.D[t]){delete this.U.D[t];var e=this.U.G.indexOf(t);return void(e>-1&&this.U.G.splice(e,1))}this.U.D={},this.U.G=[]}},t.prototype.setDragImage=function(t,e,s){2===this.U.g&&this.V(t,e,s)},Object.defineProperty(t.prototype,"effectAllowed",{get:function(){return this.U.F},set:function(t){2===this.U.g&&A.indexOf(t)>-1&&(this.U.F=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropEffect",{get:function(){return this.W},set:function(t){0!==this.U.g&&A.indexOf(t)>-1&&(this.W=t)},enumerable:!0,configurable:!0}),t}();t.polyfill=i,Object.defineProperty(t,"__esModule",{value:!0})}(Rt.exports);customElements.get("kemet-sortable")||customElements.define("kemet-sortable",class extends Z{static get styles(){return[r`
2894
- :host {
2895
- display: flex;
2896
- gap: 1rem;
2897
- flex-direction: column;
2898
- }
2899
- `]}firstUpdated(){Rt.exports.polyfill(),this.addEventListener("dragstart",(t=>this.handleDragStart(t)),!1),this.addEventListener("dragenter",(t=>{t.preventDefault()}))}render(){return I`<slot></slot>`}handleDragStart(t){this.sortableItem=t.target,this.addEventListener("dragover",(t=>this.handleDragOver(t)),!1),this.addEventListener("dragend",(t=>this.handleDragEnd(t)),!1),setTimeout((()=>{this.sortableItem.ghost=!0}),0)}handleDragOver(t){t.preventDefault();const{target:e}=t;if(e&&"KEMET-SORTABLE-ITEM"===e.tagName){const s=(t=>{const e=t.target.getBoundingClientRect();return{x:t.pageX-e.left,y:t.pageY-e.top}})(t),i=(t=>{const e=t.getBoundingClientRect();return(e.bottom-e.top)/2})(t.target);s.y>i?this.insertBefore(this.sortableItem,e.nextSibling):this.insertBefore(this.sortableItem,e)}}handleDragEnd(t){t.preventDefault(),this.sortableItem.ghost=!1,Q(this,"kemet-sortable-drag-end",{event:t,current:this.sortableItem,all:this.querySelectorAll("kemet-sortable-item")})}});customElements.get("kemet-svg")||customElements.define("kemet-svg",class extends Z{static get styles(){return r`
2900
- :host {
2901
- display: inline-block;
2902
- }
2903
-
2904
- svg {
2905
- width: 100%;
2906
- height: 100%;
2907
- }
2908
- `}static get properties(){return{set:{type:String},svg:{type:String},size:{type:Number},ratio:{type:String},viewBox:{type:String}}}constructor(){super(),this.set="svgs",this.ratio="none",this.viewBox="0 0 128 128"}updated(){this.setSize(),this.getIcon()}render(){return I`
2909
- <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}"></svg>
2910
- `}setSize(){this.size&&(this.style.width=`${this.size}px`,this.style.height=`${this.size}px`)}getIcon(){let t;const e=document.kemetSVGs[this.set];e.forEach(((s,i)=>{const o=s.getAttribute("id");o&&o===this.svg&&(t=e[i])})),t?this.fillSVG(t):console.error(`Could not find svg "${this.svg}" in set "${this.set}".`)}fillSVG(t){const e=t.cloneNode(!0),s=this.shadowRoot.querySelector("svg"),i=s.querySelector("g");i&&i.remove(),s.appendChild(e)}});customElements.get("kemet-svgs")||customElements.define("kemet-svgs",class extends Z{static get styles(){return r`
2911
- :host {
2912
- display: none;
2913
- }
2914
- `}static get properties(){return{set:{type:String}}}constructor(){super(),this.set="svgs"}firstUpdated(){this.slotElement=this.shadowRoot.querySelector("slot"),document.kemetSVGs=document.kemetSVGs||{},this.populateIcons(),this.slotElement.addEventListener("slotchange",this.populateIcons())}render(){return I`<slot></slot>`}populateIcons(){const t=this.slotElement.assignedElements()[0],e=t?t.querySelectorAll("defs > g"):null;e&&(document.kemetSVGs[this.set]=e)}});customElements.define("kemet-tab-panel",class extends Z{static get styles(){return r`
2915
- :host {
2916
- width: 100%;
2917
- flex: 0 0 auto;
2918
- }
2919
-
2920
- ::slotted(img) {
2921
- max-width: 100%;
2922
- }
2923
-
2924
- :host(.fade) {
2925
- opacity: 0;
2926
- pointer-events: none;
2927
- transition: opacity var(--kemet-tab-panel-fade-speed, 0.5s) ease;
2928
- }
2929
-
2930
- :host(.fade[selected]) {
2931
- opacity: 1;
2932
- pointer-events: auto;
2933
- }
2934
-
2935
- :host(.fade.push) {
2936
- margin-left: -100%;
2937
- }
2938
-
2939
- :host(.vertical) {
2940
- display: none;
2941
- }
2942
-
2943
- :host(.vertical[selected]) {
2944
- display: block;
2945
- }
2946
- `}static get properties(){return{selected:{type:Boolean,reflect:!0},panel:{type:String}}}constructor(){super(),this.selected=!1}updated(){this.a11y()}render(){return I`
2947
- <slot></slot>
2948
- `}a11y(){this.setAttribute("role","tabpanel"),this.selected?this.setAttribute("tabindex","0"):this.setAttribute("tabindex","-1")}});customElements.define("kemet-tab",class extends Z{static get styles(){return r`
2949
- :host {
2950
- cursor: pointer;
2951
- display: inline-flex;
2952
- flex: 0 0 auto;
2953
- align-items: center;
2954
- justify-content: center;
2955
- white-space: nowrap;
2956
- padding: var(--kemet-tab-padding, 1rem);
2957
- }
2958
-
2959
- :host([selected]) {
2960
- cursor: auto;
2961
- color: var(--kemet-tab-color, var(--kemet-color-primary));
2962
- }
2963
-
2964
- kemet-icon {
2965
- cursor: pointer;
2966
- margin-left: 0.5rem;
2967
- }
2968
- `}static get properties(){return{selected:{type:Boolean,reflect:!0},link:{type:String},closable:{type:Boolean}}}constructor(){super(),this.selected=!1}firstUpdated(){this.addEventListener("click",this.select.bind(this))}updated(){this.a11y()}render(){return I`
2969
- <slot></slot>
2970
- ${this.makeCloseable()}
2971
- `}select(){Q(this,"kemet-tab-selected",this)}a11y(){this.setAttribute("role","tab"),this.selected?(this.setAttribute("aria-selected","true"),this.setAttribute("tabindex","0")):(this.setAttribute("aria-selected","false"),this.setAttribute("tabindex","-1"))}makeCloseable(){return this.closable?I`<kemet-icon icon="x-lg" @click=${()=>this.handleClosable()}></kemet-icon>`:null}handleClosable(){Q(this,"kemet-tab-close",this)}});const Yt=r`
2972
- :host {
2973
- --kemet-tabs-ink-size: 6px;
2974
- --kemet-tabs-ink-radius: 6px;
2975
- --kemet-tabs-divider-size: 1px;
2976
- --kemet-tabs-spacer: 1rem;
2977
-
2978
- display: flex;
2979
- flex-direction: column;
2980
- overflow: hidden;
2981
- position: relative;
2982
- }
2983
-
2984
- :host([placement='bottom']) {
2985
- flex-direction: column-reverse;
2986
- }
2987
-
2988
- :host([placement='left']) {
2989
- flex-direction: row;
2990
- }
2991
-
2992
- :host([placement='right']) {
2993
- flex-direction: row-reverse;
2994
- }
2995
-
2996
- :host([placement='left']),
2997
- :host([placement='right']) {
2998
- overflow: unset;
2999
- }
3000
-
3001
- /* panels */
3002
-
3003
- [part='panels'] > div {
3004
- display: flex;
3005
- }
3006
-
3007
- :host([panel-effect='slide']) [part='panels'] {
3008
- transition: transform var(--kemet-tabs-transition-speed, 0.5s) linear;
3009
- }
3010
-
3011
- :host([panel-effect='fade']) [part='panels'] {
3012
- transform: none !important;
3013
- }
3014
-
3015
- :host([panel-effect='fade']) [part='panels'] > div {
3016
- flex-flow: row nowrap;
3017
- }
3018
-
3019
- :host([placement='left']) [part='panels'],
3020
- :host([placement='right']) [part='panels'] {
3021
- transform: none !important;
3022
- position: relative;
3023
- width: 100%;
3024
- }
3025
-
3026
- :host([placement='top']) [part='panels'] > div {
3027
- margin-top: var(--kemet-tabs-spacer);
3028
- }
3029
-
3030
- :host([placement='right']) [part='panels'] > div {
3031
- margin-right: var(--kemet-tabs-spacer);
3032
- }
3033
-
3034
- :host([placement='bottom']) [part='panels'] > div {
3035
- margin-bottom: var(--kemet-tabs-spacer);
3036
- }
3037
-
3038
- :host([placement='left']) [part='panels'] > div {
3039
- margin-left: var(--kemet-tabs-spacer);
3040
- }
3041
-
3042
- /* tablist */
3043
-
3044
- [part='tablist'] {
3045
- display: flex;
3046
- }
3047
-
3048
- :host([placement='left']) [part='tablist'],
3049
- :host([placement='right']) [part='tablist'] {
3050
- display: flex;
3051
- flex-direction: column;
3052
- align-items: start;
3053
- }
3054
-
3055
- :host([tabs-align='center']) [part='tablist'] {
3056
- justify-content: center;
3057
- }
3058
-
3059
- :host([tabs-align='between']) [part='tablist'] {
3060
- justify-content: space-between;
3061
- }
3062
-
3063
- :host([tabs-align='evenly']) [part='tablist'] {
3064
- justify-content: space-evenly;
3065
- }
3066
-
3067
- :host([tabs-align='around']) [part='tablist'] {
3068
- justify-content: space-around
3069
- }
3070
-
3071
- :host([tabs-align='start']) [part='tablist'] {
3072
- justify-content: flex-start;
3073
- }
3074
-
3075
- :host([tabs-align='end']) [part='tablist'] {
3076
- justify-content: flex-end;
3077
- }
3078
-
3079
- :host([overflow]) [part='tablist'] {
3080
- justify-content: start;
3081
- }
3082
-
3083
- /* divider */
3084
-
3085
- [part='divider'] {
3086
- height: var(--kemet-tabs-divider-size);
3087
- background-color: var(--kemet-tabs-divider-color, var(--kemet-color-gray4));
3088
- }
3089
-
3090
- :host([placement='left']) [part='divider'],
3091
- :host([placement='right']) [part='divider'] {
3092
- width: var(--kemet-tabs-divider-size);
3093
- height: auto;
3094
- }
3095
-
3096
- /* ink */
3097
-
3098
- [part='ink'] {
3099
- height: var(--kemet-tabs-ink-size);
3100
- border-top-left-radius: var(--kemet-tabs-ink-radius);
3101
- border-top-right-radius: var(--kemet-tabs-ink-radius);
3102
- transition: all 300ms ease;
3103
- background-color: var(--kemet-tabs-ink-color, var(--kemet-color-primary));
3104
- }
3105
-
3106
- :host([placement='right']) [part='ink'] {
3107
- width: var(--kemet-tabs-ink-size);
3108
- border-top-right-radius: var(--kemet-tabs-ink-radius);
3109
- border-bottom-right-radius: var(--kemet-tabs-ink-radius);
3110
- border-top-left-radius: 0px;
3111
- border-bottom-left-radius: 0px;
3112
- }
3113
-
3114
- :host([placement='left']) [part='ink'] {
3115
- width: var(--kemet-tabs-ink-size);
3116
- border-top-right-radius: 0px;
3117
- border-bottom-right-radius: 0px;
3118
- border-top-left-radius: var(--kemet-tabs-ink-radius);
3119
- border-bottom-left-radius: var(--kemet-tabs-ink-radius);
3120
- }
3121
-
3122
- :host([placement='bottom']) [part='ink'] {
3123
- border-top-right-radius: 0px;
3124
- border-bottom-right-radius: var(--kemet-tabs-ink-radius);
3125
- border-top-left-radius: 0px;
3126
- border-bottom-left-radius: var(--kemet-tabs-ink-radius);
3127
- }
3128
-
3129
- /* links */
3130
-
3131
- :host([overflow]) [part='links'] {
3132
- overflow-x: auto;
3133
- margin: 0 2rem;
3134
- scroll-behavior: smooth;
3135
- }
3136
-
3137
- :host([overflow]) [part='links']::-webkit-scrollbar {
3138
- display: none;
3139
- width: 0;
3140
- background: transparent;
3141
- }
3142
-
3143
- :host([placement='bottom']) [part='links'] {
3144
- display: flex;
3145
- flex-direction: column-reverse;
3146
- }
3147
-
3148
- /* icon */
3149
-
3150
- [icon*='chevron'] {
3151
- cursor: pointer;
3152
- position: absolute;
3153
- top: 1rem;
3154
- }
3155
-
3156
- [icon='chevron-left'] {
3157
- left: 0;
3158
- }
3159
-
3160
- [icon='chevron-right'] {
3161
- right: 0;
3162
- }
3163
-
3164
- :host([placement='bottom']) [icon*='chevron'] {
3165
- top: auto;
3166
- bottom: 1rem;
3167
- }
3168
- `;customElements.get("kemet-tabs")||customElements.define("kemet-tabs",class extends Z{static get styles(){return[Yt]}static get properties(){return{selected:{type:String,reflect:!0},selectedIndex:{type:Number},panelPosition:{type:Number},panelEffect:{type:String,reflect:!0,attribute:"panel-effect"},swipe:{type:Boolean},placement:{type:String,reflect:!0},divider:{type:Boolean},tabsAlign:{type:String,reflect:!0,attribute:"tabs-align"},ink:{type:Object},hideInk:{type:Boolean,attribute:"hide-ink"},overflow:{type:Boolean,reflect:!0}}}constructor(){super(),this.selectedIndex=0,this.panelPosition=0,this.panelEffect="none",this.placement="top",this.tabsAlign="center",this.hideInk=!1,this.addEventListener("kemet-tab-selected",this.tabSelectedChange.bind(this)),this.addEventListener("kemet-tab-close",this.handleTabClose.bind(this)),window.addEventListener("resize",this.handleResize.bind(this))}firstUpdated(){this.tabs=[],this.panels=[],this.xDown=null,this.yDown=null,this.links=this.shadowRoot.getElementById("links")}render(){return I`
3169
- ${this.makeLeftArrow()}
3170
- ${this.makeRightArrow()}
3171
- <div id="links" part="links">
3172
- <div part='tablist' role="tablist">
3173
- <slot name="tab" @slotchange=${()=>this.handleLinksSlotChange()}></slot>
3174
- </div>
3175
- ${this.makeInk("links")}
3176
- </div>
3177
- ${this.makeInk("host")}
3178
- ${this.makeDivider()}
3179
- <section id="panels" part="panels" style="transform:translateX(${this.panelPosition}px);">
3180
- <div>
3181
- <slot name="panel" @slotchange=${()=>this.handlePanelsSlotChange()}></slot>
3182
- </div>
3183
- </section>
3184
- `}updated(){this.determineFade()}handleLinksSlotChange(){const t=this.querySelectorAll("kemet-tab");let e=0;t.forEach((t=>{t.index=e,e+=1,this.tabs=this.tabs.concat(t),t.addEventListener("keydown",(t=>this.handleTabKeydown(t)))})),this.tabs.length>0&&(this.tabs[0].selected=!0),setTimeout((()=>{this.selectTab()}),1),this.determineOverflow()}handlePanelsSlotChange(){const t=this.querySelectorAll("kemet-tab-panel"),e=this.shadowRoot.getElementById("panels");let s=0;t.forEach((t=>{t.index=s,s+=1,this.panels=this.panels.concat(t)})),this.panels.length>0&&(this.panels[0].selected=!0),this.swipe&&(e.addEventListener("touchstart",(t=>this.handleTouchStart(t)),!1),e.addEventListener("touchmove",(t=>this.handleTouchMove(t)),!1)),this.selectPanel()}handleLeftArrow(){const t=this.tabs.find((t=>t.selected))||this.tabs[0],e=t.previousElementSibling,s=this.tabs.findIndex((t=>t.selected));this.selected?this.selected=e?e.link:t.link:this.selectedIndex=s>0?s-1:0,e&&(this.links.scrollLeft=e.offsetLeft-20),this.selectTab(),this.selectPanel()}handleRightArrow(){const t=this.tabs.find((t=>t.selected))||this.tabs[this.tabs.length-1],e=t.nextElementSibling,s=this.tabs.findIndex((t=>t.selected));this.selected?this.selected=e?e.link:t.link:this.selectedIndex=s<this.tabs.length-1?s+1:this.tabs.length-1,e&&(this.links.scrollLeft=e.offsetLeft-20),this.selectTab(),this.selectPanel()}handleTabClose(t){const e=t.detail,s=this.panels[e.index];this.selected=this.tabs[0].link,this.selectedIndex=0,s.remove(),e.remove()}makeInk(t){return this.hideInk?null:"top"!==this.placement&&"bottom"!==this.placement||!this.ink||"links"!==t?"left"!==this.placement&&"right"!==this.placement||!this.ink||"host"!==t?null:I`<div part="ink" style="height:${this.ink.height}; transform:translateY(${this.ink.positionY})"></div>`:I`<div part="ink" style="width:${this.ink.width}; transform:translateX(${this.ink.positionX})"></div>`}makeDivider(){return this.divider?I`<div part="divider"></div>`:null}makeLeftArrow(){return this.overflow?I`<kemet-icon icon='chevron-left' size="20" @click=${()=>this.handleLeftArrow()}></kemet-icon>`:null}makeRightArrow(){return this.overflow?I`<kemet-icon icon='chevron-right' size="20" @click=${()=>this.handleRightArrow()}></kemet-icon>`:null}selectTab(){const t=this.links?parseInt(window.getComputedStyle(this.links).marginLeft.replace("px",""),10):0,e=this.overflow?t:0;this.selected?this.tabs.forEach((t=>{const s=t.getAttribute("link");s===this.selected?(t.selected=!0,this.selected=s,this.ink={width:`${t.offsetWidth}px`,height:`${t.offsetHeight}px`,positionX:t.offsetLeft-e+"px",positionY:`${t.offsetTop}px`},this.links.scrollLeft=t.offsetLeft-e):t.selected=!1})):this.tabs.forEach((t=>{this.selectedIndex===t.index?(t.selected=!0,this.ink={width:`${t.offsetWidth}px`,height:`${t.offsetHeight}px`,positionX:t.offsetLeft-e+"px",positionY:`${t.offsetTop}px`},this.links.scrollLeft=t.offsetLeft-e):t.selected=!1}))}selectPanel(){this.selected?this.panels.forEach((t=>{const e=t.getAttribute("panel");"fade"===this.panelEffect&&0!==t.index&&t.classList.add("push"),"left"!==this.placement&&"right"!==this.placement||t.classList.add("vertical"),e===this.selected?(t.selected=!0,this.animatePanel(e,null)):t.selected=!1})):this.panels.forEach((t=>{"fade"===this.panelEffect&&0!==t.index&&t.classList.add("push"),"left"!==this.placement&&"right"!==this.placement||t.classList.add("vertical"),this.selectedIndex===t.index?(t.selected=!0,this.animatePanel(null,t.index)):t.selected=!1}))}dispatchTabChange(){Q(this,"kemet-tab-changed",this.selected)}tabSelectedChange(t){this.selected?this.selected=t.detail.getAttribute("link"):this.selectedIndex=t.detail.index,this.selectTab(),this.selectPanel(),this.dispatchTabChange()}determineFade(){this.panels.forEach((t=>{"fade"===this.panelEffect&&t.classList.add("fade")}))}determineOverflow(){const t=this.offsetWidth,e=this.querySelectorAll("kemet-tab");let s=0;e.forEach((t=>{s+=t.offsetWidth})),s>t&&("top"===this.placement||"bottom"===this.placement)?this.overflow=!0:this.overflow=!1}handleResize(){if(this.tabs&&this.panels){const t=this.links?parseInt(window.getComputedStyle(this.links).marginLeft.replace("px",""),10):0,e=this.overflow?t:0,s=this.tabs.find((t=>t.selected));s&&(this.ink={width:`${s.offsetWidth}px`,height:`${s.offsetHeight}px`,positionX:s.offsetLeft-e+"px",positionY:`${s.offsetTop}px`}),this.determineOverflow(),this.selected?this.animatePanel(this.selected,null):this.animatePanel(null,this.selectedIndex)}}animatePanel(t,e){if(t){const e=this.querySelector(`[panel="${t}"]`);e&&(this.panelPosition=-1*e.offsetLeft)}else this.panels[e]&&(this.panelPosition=-1*this.panels[e].offsetLeft)}handleTabKeydown(t){if(this.selected){switch(t.key){case"Home":this.selected=this.tabs[0].getAttribute("link");break;case"End":this.selected=this.tabs[this.tabs.length-1].getAttribute("link");break;case"ArrowRight":const t=this.querySelector("kemet-tab[selected]").nextElementSibling,e=!!t&&t.getAttribute("link");e&&(this.selected=e);break;case"ArrowLeft":const s=this.querySelector("kemet-tab[selected]").previousElementSibling,i=!!s&&s.getAttribute("link");i&&(this.selected=i)}this.tabs.find((t=>t.link===this.selected)).focus()}else{switch(t.key){case"Home":this.selectedIndex=0;break;case"End":this.selectedIndex=this.tabs.length-1;break;case"ArrowRight":this.selectedIndex<this.tabs.length-1?this.selectedIndex+=1:this.selectedIndex=this.tabs.length-1;break;case"ArrowLeft":this.selectedIndex<1?this.selectedIndex=0:this.selectedIndex-=1}this.tabs[this.selectedIndex].focus()}}handleTouchStart(t){this.xDown=t.touches[0].clientX,this.yDown=t.touches[0].clientY}handleTouchMove(t){if(!this.xDown||!this.yDown)return;const e=t.touches[0].clientX,s=t.touches[0].clientY,i=this.xDown-e,o=this.yDown-s,r=this.querySelector("kemet-tab-panel[selected]").nextElementSibling,a=!!r&&r.getAttribute("panel"),n=this.querySelector("kemet-tab-panel[selected]").previousElementSibling,l=!!n&&n.getAttribute("panel");Math.abs(i)>Math.abs(o)&&(i>0?this.selected?a&&(this.selected=a):this.selectedIndex<this.tabs.length&&(this.selectedIndex+=1):this.selected?l&&(this.selected=l):this.selectedIndex>0&&(this.selectedIndex-=1),this.selectTab(),this.selectPanel()),this.xDown=null,this.yDown=null}});customElements.get("kemet-toggle")||customElements.define("kemet-toggle",class extends Z{static get styles(){return[r`
3185
- :host {
3186
- --kemet-toggle-width: 3.5rem;
3187
- --kemet-toggle-height: 2rem;
3188
- --kemet-toggle-handle-diameter: 1.6rem;
3189
- --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
3190
-
3191
- display: flex;
3192
- align-items: center;
3193
- }
3194
-
3195
- :host([disabled]) {
3196
- opacity: 0.5;
3197
- }
3198
-
3199
- label {
3200
- cursor: pointer;
3201
- display: flex;
3202
- align-items: center;
3203
- gap: 1rem;
3204
- font-size: inherit;
3205
- color: inherit;
3206
- }
3207
-
3208
- :host([disabled]) label {
3209
- cursor: not-allowed;
3210
- }
3211
-
3212
- input {
3213
- display: none;
3214
- }
3215
-
3216
- [part='control'] {
3217
- position: relative;
3218
- display: inline-flex;
3219
- margin: 0;
3220
- width: var(--kemet-toggle-width);
3221
- height: var(--kemet-toggle-height);
3222
- }
3223
-
3224
- [part='control'] > span {
3225
- transition: 300ms ease-in-out;
3226
- }
3227
-
3228
- [part='track'] {
3229
- width: var(--kemet-toggle-width);
3230
- height: var(--kemet-toggle-height);
3231
- border: var(--kemet-toggle-track-border, none);
3232
- border-radius: var(--kemet-toggle-height);
3233
- background-color: var(--kemet-toggle-track-color, var(--kemet-color-white));
3234
- box-shadow: var(--kemet-toggle-track-shadow, inset 0 0.4rem 0.7rem 0 rgba(47, 47, 47, 0.35), inset 0 -0.2rem 0.4rem 0 var(--kemet-color-gray1));
3235
- }
3236
-
3237
- :host([squared]) [part='track'] {
3238
- border-radius: 0;
3239
- }
3240
-
3241
- [part='handle'] {
3242
- position: absolute;
3243
- top: var(--kemet-toggle-handle-margin);
3244
- left: var(--kemet-toggle-handle-margin);
3245
- width: var(--kemet-toggle-handle-diameter);
3246
- height: var(--kemet-toggle-handle-diameter);
3247
- transform: translateX(0);
3248
- border: var(--kemet-toggle-handle-border, none);
3249
- border-radius: var(--kemet-toggle-handle-diameter);
3250
- background-color: var(--kemet-toggle-handle-color, var(--kemet-color-primary));
3251
- box-shadow: var(--kemet-toggle-handle-shadow, 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.1), 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2));
3252
- }
3253
-
3254
- :host([squared]) [part='handle'] {
3255
- border-radius: 0;
3256
- }
3257
-
3258
- :host([checked]) [part='handle'] {
3259
- transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
3260
- }
3261
-
3262
- .option {
3263
- font-size: 90%;
3264
- }
3265
- `]}static get properties(){return{name:{type:String},checked:{type:Boolean,reflect:!0},disabled:{type:Boolean},label:{type:String},show:{type:Boolean},squared:{type:Boolean},optionChecked:{type:String,attribute:"option-checked"},optionUnchecked:{type:String,attribute:"option-unchecked"}}}constructor(){super(),this.name="toggle-switch",this.disabled=!1,this.checked=!1,this.show=!1,this.squared=!1,this.label="",this.optionChecked="on",this.optionUnchecked="off",this.value=this.checked?this.optionChecked:this.optionUnchecked,this.formSubmitController=new et(this)}render(){return I`
3266
- <label part="label">
3267
- ${this.makeUncheckedOption()}
3268
- <span part="control">
3269
- <span part="track"></span>
3270
- <span part="handle"></span>
3271
- </span>
3272
- <input
3273
- role="switch"
3274
- type="checkbox"
3275
- name="${this.name}"
3276
- aria-label="${this.label}"
3277
- aria-checked=${this.checked?"true":"false"}
3278
- ?disabled=${this.disabled}
3279
- ?checked=${this.checked}
3280
- @change=${this.handleChange}
3281
- />
3282
- ${this.makeCheckedOption()}
3283
- <span part="text">${this.label}</span>
3284
- </label>
3285
- `}handleChange(){this.checked=!this.checked,this.value=this.checked?this.optionChecked:this.optionUnchecked,Q(this,"kemet-toggle-change",!0)}makeUncheckedOption(){return this.show?I`<span class="option" part="unchecked">${this.optionUnchecked}</span>`:null}makeCheckedOption(){return this.show?I`<span class="option" part="checked">${this.optionChecked}</span>`:null}});customElements.get("kemet-textarea")||customElements.define("kemet-textarea",class extends Z{static get styles(){return[r`
3286
- :host {
3287
- position: relative;
3288
- display: block;
3289
- }
3290
-
3291
- textarea {
3292
- display: block;
3293
- width: 100%;
3294
- padding: var(--kemet-textarea-padding, 1rem);
3295
- border: var(--kemet-textarea-border, 1px solid var(--kemet-color-primary));
3296
- appearance: none;
3297
- box-sizing: border-box;
3298
- }
3299
-
3300
- :host([status='error']) textarea {
3301
- border: var(--kemet-textarea-border-color-error, 1px solid var(--kemet-color-error));
3302
- }
3303
-
3304
- :host([status='success']) textarea {
3305
- border: var(--kemet-textarea-border-color-success, 1px solid var(--kemet-color-success));
3306
- }
3307
-
3308
- :host([status='warning']) textarea {
3309
- border: var(--kemet-textarea-border-color-warning, 1px solid var(--kemet-color-warning));
3310
- }
3311
-
3312
- :host([disabled]) textarea {
3313
- opacity: 0.5;
3314
- }
3315
-
3316
- :host([icon-left]) textarea {
3317
- padding-left: var(--kemet-textarea-icon-left-padding, 3rem);
3318
- }
3319
-
3320
- :host([icon-right]) textarea {
3321
- padding-right: var(--kemet-textarea-icon-right-padding, 3rem);
3322
- }
3323
-
3324
- :host([rounded]) textarea {
3325
- border-radius: var(--kemet-textarea-border-radius-rounded, var(--kemet-border-radius));
3326
- }
3327
-
3328
- :host([filled]) textarea {
3329
- border: var(--kemet-textarea-border-filled, none);
3330
- color: var(--kemet-textarea-color-filled, var(--kemet-color-white));
3331
- background-color: var(--kemet-textarea-background-color-filled, var(--kemet-color-primary));
3332
- }
3333
-
3334
- :host([filled]) textarea::placeholder {
3335
- color: var(--kemet-textarea-color-filled, var(--kemet-color-white));
3336
- }
3337
-
3338
- :host([status='error'][filled]) textarea {
3339
- background-color: var(--kemet-textarea-background-color-error, var(--kemet-color-error));
3340
- }
3341
-
3342
- :host([status='success'][filled]) textarea {
3343
- background-color: var(--kemet-textarea-background-color-success, var(--kemet-color-success));
3344
- }
3345
-
3346
- :host([status='warning'][filled]) textarea {
3347
- background-color: var(--kemet-textarea-background-color-warning, var(--kemet-color-warning));
3348
- }
3349
- `]}static get properties(){return{slug:{type:String},name:{type:String},placeholder:{type:String},minlength:{type:String},maxlength:{type:String},inputmode:{type:String},autofocus:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean},required:{type:Boolean,reflect:!0},value:{type:String},invalid:{type:Boolean,reflect:!0},status:{type:String,reflect:!0},rows:{type:Number},validateOnBlur:{type:Boolean,attribute:"validate-on-blur"},filled:{type:Boolean,reflect:!0},rounded:{type:Boolean,reflect:!0}}}constructor(){super(),this.slug="textarea",this.name="textarea",this.value="",this.status="standard",this.rows=4,this.formSubmitController=new et(this)}firstUpdated(){this.form=this.closest("form"),this.control=this.closest("kemet-field"),this.textarea=this.shadowRoot.querySelector("textarea")}render(){return I`
3350
- <textarea
3351
- part="textarea"
3352
- id=${this.slug}
3353
- name=${this.name}
3354
- .value=${ct(this.value)}
3355
- ?disabled=${this.disabled}
3356
- ?readonly=${this.readonly}
3357
- ?required=${this.required}
3358
- placeholder=${it(this.placeholder)}
3359
- rows=${it(this.rows)}
3360
- minlength=${it(this.minlength)}
3361
- maxlength=${it(this.maxlength)}
3362
- autocorrect=${it(this.autocorrect)}
3363
- ?autofocus=${this.autofocus}
3364
- spellcheck=${it(this.spellcheck)}
3365
- inputmode=${it(this.inputmode)}
3366
- @change=${this.handleChange}
3367
- @input=${this.handleInput}
3368
- @focus=${this.handleFocus}
3369
- @blur=${this.handleBlur}
3370
- @invalid=${this.handleInvalid}
3371
- ></textarea>
3372
- `}handleFocus(){this.hasFocus=!0,this.dispatchEvent(new CustomEvent("kemet-input-focused",{bubbles:!0,composed:!0,detail:!0}))}handleBlur(){this.hasFocus=!1,this.dispatchEvent(new CustomEvent("kemet-input-focused",{bubbles:!0,composed:!0,detail:!1})),this.validateOnBlur&&this.form&&!this.form.noValidate&&(this.textarea.checkValidity(),this.validity=this.textarea.validity)}handleChange(){this.value=this.textarea.value,this.textarea.checkValidity()&&this.checkLimitValidity()&&(this.invalid=!1,this.status="standard",this.validity=this.textarea.validity,this.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"standard",validity:this.textarea.validity,element:this}})))}handleInput(){this.value=this.textarea.value,this.dispatchEvent(new CustomEvent("kemet-input-input",{bubbles:!0,composed:!0,detail:this.value}))}handleInvalid(){this.validity=this.textarea.validity,this.validateOnBlur&&(this.invalid=!0,this.status="error",this.dispatchEvent(new CustomEvent("kemet-input-status",{bubbles:!0,composed:!0,detail:{status:"error",validity:this.textarea.validity,element:this}})))}checkLimitValidity(){if(this.control){const t=this.control.querySelector("kemet-count");if(t)return this.value.length<t.limit}return!0}checkValidity(){return this.textarea.checkValidity()}focus(){return this.textarea.focus()}});const Ht=r`
3373
- :host {
3374
- --kemet-tracker-step-dot-size: 50px;
3375
- --kemet-tracker-step-dot-size-mobile: 25px;
3376
- --kemet-tracker-step-dot-gap: 4px;
3377
- --kemet-tracker-step-standard-line-weight: 1px;
3378
- --kemet-tracker-step-completed-line-weight: 3px;
3379
- --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
3380
-
3381
- position: relative;
3382
- width: 100%;
3383
- text-align: center;
3384
- }
3385
-
3386
- .dot {
3387
- font-size: var(--kemet-tracker-step-dot-font-size, 90%);
3388
- color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
3389
- display: flex;
3390
- align-items: center;
3391
- justify-content: center;
3392
- margin: 0 auto;
3393
- position: relative;
3394
- z-index: 1;
3395
- width: var(--kemet-tracker-step-dot-size);
3396
- height: var(--kemet-tracker-step-dot-size);
3397
- border-radius: 100%;
3398
- transition: var(--kemet-tracker-step-dot-transition);
3399
- background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));
3400
- }
3401
-
3402
- .dot::after {
3403
- content: "";
3404
- width: unset;
3405
- height: unset;
3406
- position: absolute;
3407
- top: var(--kemet-tracker-step-dot-gap);
3408
- left: var(--kemet-tracker-step-dot-gap);
3409
- right: var(--kemet-tracker-step-dot-gap);
3410
- bottom: var(--kemet-tracker-step-dot-gap);
3411
- z-index: -1;
3412
- border-radius: 100%;
3413
- transition: var(--kemet-tracker-step-dot-transition);
3414
- border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));
3415
- background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
3416
- }
3417
-
3418
- :host([completed]) .dot {
3419
- color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
3420
- }
3421
-
3422
- :host([completed]) .dot::after {
3423
- border: 0;
3424
- background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
3425
- }
3426
-
3427
- :host([current]) .dot.animate {
3428
- color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
3429
- }
3430
-
3431
- :host([current]) .dot.animate::after {
3432
- border: 0;
3433
- background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
3434
- }
3435
-
3436
- :host([mobile]) .dot {
3437
- width: var(--kemet-tracker-step-dot-size-mobile);
3438
- height: var(--kemet-tracker-step-dot-size-mobile);
3439
- }
3440
-
3441
- .line {
3442
- display: block;
3443
- position: absolute;
3444
- left: 50%;
3445
- right: 0;
3446
- bottom: 0;
3447
- width: 100%;
3448
-
3449
- /* standard */
3450
- top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
3451
- height: var(--kemet-tracker-step-standard-line-weight);
3452
- background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));
3453
- }
3454
-
3455
- .line.completed {
3456
- width: 100%;
3457
- transform: scaleX(0);
3458
- transform-origin: left center;
3459
- top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
3460
- height: var(--kemet-tracker-step-completed-line-weight);
3461
- background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));
3462
- animation-name: grow;
3463
- animation-delay: 1s;
3464
- animation-duration: 600ms;
3465
- animation-fill-mode: forwards;
3466
- }
3467
-
3468
- :host([mobile]) .line {
3469
- top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
3470
- }
3471
-
3472
- :host([mobile]) .line.completed {
3473
- top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
3474
- }
3475
-
3476
- @keyframes grow {
3477
- from { transform: scaleX(0); }
3478
- to { transform: scaleX(1); }
3479
- }
3480
- `;customElements.get("kemet-tracker-step")||customElements.define("kemet-tracker-step",class extends Z{static get styles(){return[Ht]}static get properties(){return{step:{type:Number},completed:{type:Boolean,reflect:!0},current:{type:Boolean,reflect:!0},last:{type:Boolean,reflect:!0},mobile:{type:Boolean,reflect:!0},hideDotContent:{type:Boolean,reflect:!0,attribute:"hide-dot-content"},completedSize:{type:Number}}}constructor(){super(),this.completedSize=16}firstUpdated(){this.tracker=this.closest("kemet-tracker")}render(){return I`
3481
- ${this.makeLine()}
3482
- ${this.makeCompletedLine()}
3483
- <div class="dot" part="dot">${this.makeDotContent()}</div>
3484
- ${this.makeSlotContent()}
3485
- `}makeLine(){return this.last?null:I`<div class="line" part="line"></div>`}makeCompletedLine(){return this.completed&&!this.last?I`<div class="line completed" part="completed-line" @animationend=${()=>this.handleCompletedLineEnd()}></div>`:null}makeDotContent(){return!this.completed||this.mobile||this.hideDotContent?this.mobile||this.hideDotContent?null:I`
3486
- <span>${this.step}/${this.tracker?.total}</span>
3487
- `:I`
3488
- <kemet-icon icon="check2" size=${this.completedSize}></kemet-icon>
3489
- `}makeSlotContent(){return this.mobile?null:I`<slot></slot>`}handleCompletedLineEnd(){const t=this.tracker.querySelector("[current]").shadowRoot.querySelector(".dot");t&&t.classList.add("animate")}});customElements.get("kemet-tracker")||customElements.define("kemet-tracker",class extends Z{static get styles(){return[r`
3490
- :host {
3491
- display: flex;
3492
- justify-content: center;
3493
- align-items: flex-start;
3494
- }
3495
- `]}static get properties(){return{total:{type:Number},breakpoint:{type:String}}}constructor(){super(),this.breakpoint="767px"}firstUpdated(){this.steps=this.querySelectorAll("kemet-tracker-step"),this.isMobile(),window.addEventListener("resize",(()=>{this.isMobile()}))}render(){return I`<slot @slotchange=${()=>this.handleSlotChange()}></slot>`}handleSlotChange(){this.total=this.steps.length,this.steps.forEach(((t,e)=>{t.step=e+1,t.step===this.total&&(t.last=!0)}))}isMobile(){const t=window.matchMedia(`(max-width: ${this.breakpoint})`);this.steps.forEach((e=>{e.mobile=t.matches}))}});const Vt=r`
3496
- .lds-ripple {
3497
- display: inline-block;
3498
- position: relative;
3499
- width: 80px;
3500
- height: 80px;
3501
- }
3502
-
3503
- .lds-ripple div {
3504
- position: absolute;
3505
- border: 4px solid var(--kemet-upload-file-ripple-color);
3506
- opacity: 1;
3507
- border-radius: 50%;
3508
- animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
3509
- }
3510
-
3511
- .lds-ripple div:nth-child(2) {
3512
- animation-delay: -0.5s;
3513
- }
3514
-
3515
- @keyframes lds-ripple {
3516
- 0% {
3517
- top: 36px;
3518
- left: 36px;
3519
- width: 0;
3520
- height: 0;
3521
- opacity: 0;
3522
- }
3523
- 4.9% {
3524
- top: 36px;
3525
- left: 36px;
3526
- width: 0;
3527
- height: 0;
3528
- opacity: 0;
3529
- }
3530
- 5% {
3531
- top: 36px;
3532
- left: 36px;
3533
- width: 0;
3534
- height: 0;
3535
- opacity: 1;
3536
- }
3537
- 100% {
3538
- top: 0px;
3539
- left: 0px;
3540
- width: 72px;
3541
- height: 72px;
3542
- opacity: 0;
3543
- }
3544
- }
3545
- `,Ft=(t,e=2)=>{if(0===t)return"0 Bytes";const s=e<0?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,i)).toFixed(s))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`};customElements.get("kemet-upload-file")||customElements.define("kemet-upload-file",class extends Z{static get styles(){return[r`
3546
- :host {
3547
- --kemet-upload-file-ripple-color: var(--kemet-color-primary);
3548
-
3549
- color: var(--kemet-upload-file-color, var(--kemet-color-gray7));
3550
- display: grid;
3551
- gap: 1rem;
3552
- grid-template-columns: auto 1fr auto;
3553
- align-items: center;
3554
- padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
3555
- border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
3556
- }
3557
-
3558
- :host([status='error']) {
3559
- border: 1px solid var(--kemet-color-error);
3560
- }
3561
-
3562
- :host([status='complete']) {
3563
- border: 1px solid var(--kemet-color-success);
3564
- }
3565
-
3566
- h3 {
3567
- margin: 0;
3568
- }
3569
-
3570
- .percentage {
3571
- font-size: clamp(2rem, 3vw, 2.5rem);
3572
- align-self: center;
3573
- justify-self: center;
3574
- }
3575
-
3576
- .indicator {
3577
- transform: scale(0.8);
3578
- }
3579
-
3580
- :host([status='complete']) .message,
3581
- :host([status='complete']) .indicator {
3582
- color: var(--kemet-color-success);
3583
- }
3584
-
3585
- :host([status='error']) .message,
3586
- :host([status='error']) .indicator {
3587
- color: var(--kemet-color-error);
3588
- }
3589
- `,Vt]}static get properties(){return{name:{type:String},loaded:{type:Number},size:{type:Number},type:{type:String},status:{type:String,reflect:!0},percent:{type:Number},message:{type:String}}}constructor(){super(),this.loaded=0,this.size=0,this.percent=0}updated(){this.percent=this.calculatePercent()}render(){return I`
3590
- <div class="percentage" part="percentage">
3591
- <span>${this.percent}%</span>
3592
- </div>
3593
- <div>
3594
- <h3 part="filename">${this.name}</h3>
3595
- <span part="loaded">${Ft(this.loaded)} / ${Ft(this.size)}</span>
3596
- ${this.message?I`<div class="message" part="message">${this.message}</div>`:null}
3597
- </div>
3598
- <div class="indicator" part="indicator">
3599
- ${this.getStatusIcon()}
3600
- </div>
3601
- `}calculatePercent(){const t=Math.round(100*this.loaded/this.size);return t>100?100:t}getStatusIcon(){return"uploading"===this.status?I`<div class="lds-ripple"><div></div><div></div></div>`:"complete"===this.status?I`<kemet-icon icon="check-circle" size="48"></kemet-icon>`:"error"===this.status?I`<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`:null}});customElements.get("kemet-upload")||customElements.define("kemet-upload",class extends Z{static get styles(){return[r`
3602
- :host {
3603
- color: var(--kemet-upload-color, var(--kemet-color-white));
3604
- display: grid;
3605
- grid-template-columns: 1fr 1fr;
3606
- height: var(--kemet-upload-height, 364px);
3607
- border: var(--kemet-upload-border, 1rem solid var(--kemet-color-white));
3608
- background-color: var(--kemet-upload-background-color, var(--kemet-color-primary));
3609
- }
3610
-
3611
- :host([mobile]) {
3612
- display: block;
3613
- height: auto;
3614
- }
3615
-
3616
- input {
3617
- display: none;
3618
- }
3619
-
3620
- .button {
3621
- cursor: pointer;
3622
- font-size: 1rem;
3623
- display: block;
3624
- color: var(--kemet-color-white);
3625
- padding: 0.5rem 1rem;
3626
- border: 1px solid var(--kemet-color-white);
3627
- background-color: transparent;
3628
- }
3629
-
3630
- .upload {
3631
- display: flex;
3632
- align-items: center;
3633
- justify-content: center;
3634
- margin: 1rem;
3635
- flex-direction: column;
3636
- border: 2px dashed var(--kemet-color-white);
3637
- }
3638
-
3639
- :host([over]) .upload {
3640
- background-color: green;
3641
- }
3642
-
3643
- :host([mobile]) .upload {
3644
- height: 280px;
3645
- }
3646
-
3647
- .files {
3648
- display: flex;
3649
- gap: 1rem;
3650
- flex-direction: column;
3651
- padding: 0 1rem;
3652
- overflow: auto;
3653
- background-color: var(--kemet-color-white);
3654
- }
3655
-
3656
- :host([mobile]) .files {
3657
- padding: 0;
3658
- max-height: 280px;
3659
- }
3660
-
3661
- .heading {
3662
- font-size: 1.25rem;
3663
- margin: 0 0 2rem 0;
3664
- }
3665
-
3666
- :host([no-drag-drop]) .heading {
3667
- display: none;
3668
- }
3669
-
3670
- ::slotted(:first-child) {
3671
- margin-top: 1rem;
3672
- }
3673
- `]}static get properties(){return{slug:{type:String},accept:{type:String},multiple:{type:Boolean},over:{type:Boolean,reflect:!0},heading:{type:String},mobile:{type:Boolean,reflect:!0},breakpoint:{type:String,reflect:!0},noDragDrop:{type:Boolean,reflect:!0,attribute:"no-drag-drop"},maxSize:{type:Number,attribute:"max-size"},buttonLabel:{type:String,attribute:"button-label"}}}constructor(){super(),this.slug="upload",this.breakpoint="600px",this.buttonLabel="Browse Files",this.heading="Drag & Drop Files"}firstUpdated(){this.fileInputElement=this.shadowRoot.querySelector('[type="file"]'),this.upload=this.shadowRoot.querySelector(".upload"),["dragenter","dragover","dragleave","drop"].forEach((t=>{this.upload.addEventListener(t,(t=>(t=>{t.preventDefault(),t.stopPropagation()})(t)),!1)})),["dragenter","dragover"].forEach((t=>{this.upload.addEventListener(t,(()=>{this.over=!0}),!1)})),["dragleave","drop"].forEach((t=>{this.upload.addEventListener(t,(()=>{this.over=!1}),!1)})),this.isMobile(),this.hasDragDrop(),window.addEventListener("resize",(()=>{this.isMobile()})),this.upload.addEventListener("drop",(t=>this.handleDrop(t)),!1)}render(){return I`
3674
- <div class="upload" part="upload">
3675
- <kemet-icon icon="cloud-arrow-up" size="128"></kemet-icon>
3676
- <input
3677
- type="file"
3678
- id=${this.slug}
3679
- ?multiple=${this.multiple}
3680
- accept=${it(this.accept)?this.accept:null}
3681
- @change=${t=>this.handleChange(t)}
3682
- />
3683
- <h3 class="heading" part="heading">${this.heading}</h3>
3684
- <label class="button" part="button" for=${this.slug}>${this.buttonLabel}</label>
3685
- </div>
3686
- <div class="files" part="files">
3687
- <slot></slot>
3688
- </div>
3689
- `}handleChange(t){Q(this,"kemet-upload-change",{event:t,files:this.fileInputElement.files,fileElement:this.fileInputElement})}handleDrop(t){Q(this,"kemet-upload-change",{event:t,files:t?.dataTransfer.files||[],fileElement:this.fileInputElement})}isMobile(){const t=window.matchMedia(`(max-width: ${this.breakpoint})`);this.mobile=t.matches}hasDragDrop(){"draggable"in document.createElement("span")?this.noDragDrop=!1:this.noDragDrop=!0}});export{pt as KemetCarouselCurrent,ut as KemetCarouselFirst,mt as KemetCarouselLast,gt as KemetCarouselPrev,ft as KemetCarouselTotal};