kemet-ui 3.0.1 → 4.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 (482) hide show
  1. package/custom-elements.json +2671 -1274
  2. package/dist/{components/kemet-accordion/styles.js → styles/elements/accordion.ts} +4 -3
  3. package/dist/{components/kemet-alert/styles.js → styles/elements/alert.ts} +53 -3
  4. package/dist/{components/kemet-avatar/styles.js → styles/elements/avatar.ts} +26 -12
  5. package/dist/styles/elements/badge.ts +92 -0
  6. package/dist/{components/kemet-button/styles.js → styles/elements/button.ts} +32 -13
  7. package/dist/{components/kemet-card/styles.js → styles/elements/card.ts} +3 -3
  8. package/dist/{components/kemet-carousel/styles.js → styles/elements/carousel.ts} +2 -2
  9. package/dist/{components/kemet-checkbox/styles.js → styles/elements/checkbox.ts} +2 -2
  10. package/dist/{components/kemet-combo/styles.js → styles/elements/combo.ts} +2 -2
  11. package/dist/{components/kemet-drawer/styles.js → styles/elements/drawer.ts} +5 -3
  12. package/dist/{components/kemet-fab/styles.js → styles/elements/fab.ts} +2 -2
  13. package/dist/{components/kemet-field/styles.js → styles/elements/field.ts} +2 -14
  14. package/dist/{components/kemet-flipcard/styles.js → styles/elements/flipcard.ts} +2 -2
  15. package/dist/styles/elements/icon-lucide.ts +7 -0
  16. package/dist/{components/kemet-input/styles.js → styles/elements/input.ts} +36 -12
  17. package/dist/{components/kemet-modal/styles.js → styles/elements/modal.ts} +27 -6
  18. package/dist/styles/elements/multi-input.ts +125 -0
  19. package/dist/{components/kemet-password/styles.js → styles/elements/password.ts} +3 -3
  20. package/dist/{components/kemet-popper/styles.effects.js → styles/elements/popper.ts} +52 -9
  21. package/dist/{components/kemet-radio/styles.js → styles/elements/radio.ts} +4 -3
  22. package/dist/{components/kemet-rotator/styles.js → styles/elements/rotator.ts} +2 -2
  23. package/dist/{components/kemet-scroll-nav/styles.js → styles/elements/scroll-nav.ts} +2 -2
  24. package/dist/{components/kemet-scroll-snap/styles.js → styles/elements/scroll-snap.ts} +4 -3
  25. package/dist/{components/kemet-select/styles.js → styles/elements/select.ts} +34 -10
  26. package/dist/{components/kemet-sortable/styles.js → styles/elements/sortable.ts} +4 -3
  27. package/dist/{components/kemet-tabs/styles.js → styles/elements/tabs.ts} +7 -5
  28. package/dist/{components/kemet-textarea/styles.js → styles/elements/textarea.ts} +29 -4
  29. package/dist/styles/elements/timer.ts +13 -0
  30. package/dist/{components/kemet-toggle/styles.js → styles/elements/toggle.ts} +2 -2
  31. package/dist/{components/kemet-tooltip/styles.js → styles/elements/tooltip.ts} +2 -2
  32. package/dist/{components/kemet-tracker/styles.js → styles/elements/tracker.ts} +2 -2
  33. package/dist/{components/kemet-upload/styles.js → styles/elements/upload.ts} +6 -4
  34. package/dist/styles/kemet.base.css +24 -2
  35. package/dist/styles/kemet.base.css.map +1 -1
  36. package/dist/styles/kemet.core.css +266 -2
  37. package/dist/styles/kemet.core.css.map +1 -1
  38. package/dist/styles/shared/_config.scss +25 -1
  39. package/dist/styles/shared/_helpers.scss +19 -18
  40. package/package.json +76 -80
  41. package/types/global.d.ts +3 -0
  42. package/types/jsx.d.ts +140 -0
  43. package/dist/components/kemet-accordion/kemet-accordion-panel.d.ts +0 -50
  44. package/dist/components/kemet-accordion/kemet-accordion-panel.js +0 -137
  45. package/dist/components/kemet-accordion/kemet-accordion-panel.js.map +0 -1
  46. package/dist/components/kemet-accordion/kemet-accordion.d.ts +0 -38
  47. package/dist/components/kemet-accordion/kemet-accordion.js +0 -138
  48. package/dist/components/kemet-accordion/kemet-accordion.js.map +0 -1
  49. package/dist/components/kemet-accordion/stories.d.ts +0 -12
  50. package/dist/components/kemet-accordion/stories.js +0 -47
  51. package/dist/components/kemet-accordion/stories.js.map +0 -1
  52. package/dist/components/kemet-accordion/styles.d.ts +0 -2
  53. package/dist/components/kemet-accordion/styles.js.map +0 -1
  54. package/dist/components/kemet-alert/docs/stories.d.ts +0 -21
  55. package/dist/components/kemet-alert/docs/stories.js +0 -221
  56. package/dist/components/kemet-alert/docs/stories.js.map +0 -1
  57. package/dist/components/kemet-alert/kemet-alert.d.ts +0 -51
  58. package/dist/components/kemet-alert/kemet-alert.js +0 -111
  59. package/dist/components/kemet-alert/kemet-alert.js.map +0 -1
  60. package/dist/components/kemet-alert/styles.d.ts +0 -1
  61. package/dist/components/kemet-alert/styles.js.map +0 -1
  62. package/dist/components/kemet-alert/types.d.ts +0 -1
  63. package/dist/components/kemet-alert/types.js +0 -2
  64. package/dist/components/kemet-alert/types.js.map +0 -1
  65. package/dist/components/kemet-avatar/docs/stories.d.ts +0 -15
  66. package/dist/components/kemet-avatar/docs/stories.js +0 -108
  67. package/dist/components/kemet-avatar/docs/stories.js.map +0 -1
  68. package/dist/components/kemet-avatar/kemet-avatar.d.ts +0 -43
  69. package/dist/components/kemet-avatar/kemet-avatar.js +0 -78
  70. package/dist/components/kemet-avatar/kemet-avatar.js.map +0 -1
  71. package/dist/components/kemet-avatar/kemet-avatars.d.ts +0 -20
  72. package/dist/components/kemet-avatar/kemet-avatars.js +0 -25
  73. package/dist/components/kemet-avatar/kemet-avatars.js.map +0 -1
  74. package/dist/components/kemet-avatar/styles.d.ts +0 -2
  75. package/dist/components/kemet-avatar/styles.js.map +0 -1
  76. package/dist/components/kemet-badge/docs/stories.d.ts +0 -15
  77. package/dist/components/kemet-badge/docs/stories.js +0 -76
  78. package/dist/components/kemet-badge/docs/stories.js.map +0 -1
  79. package/dist/components/kemet-badge/kemet-badge.d.ts +0 -31
  80. package/dist/components/kemet-badge/kemet-badge.js +0 -55
  81. package/dist/components/kemet-badge/kemet-badge.js.map +0 -1
  82. package/dist/components/kemet-badge/styles.d.ts +0 -1
  83. package/dist/components/kemet-badge/styles.js +0 -42
  84. package/dist/components/kemet-badge/styles.js.map +0 -1
  85. package/dist/components/kemet-badge/types.d.ts +0 -1
  86. package/dist/components/kemet-badge/types.js +0 -2
  87. package/dist/components/kemet-badge/types.js.map +0 -1
  88. package/dist/components/kemet-button/docs/stories.d.ts +0 -21
  89. package/dist/components/kemet-button/docs/stories.js +0 -112
  90. package/dist/components/kemet-button/docs/stories.js.map +0 -1
  91. package/dist/components/kemet-button/kemet-button.d.ts +0 -89
  92. package/dist/components/kemet-button/kemet-button.js +0 -153
  93. package/dist/components/kemet-button/kemet-button.js.map +0 -1
  94. package/dist/components/kemet-button/styles.d.ts +0 -1
  95. package/dist/components/kemet-button/styles.js.map +0 -1
  96. package/dist/components/kemet-button/types.d.ts +0 -1
  97. package/dist/components/kemet-button/types.js +0 -2
  98. package/dist/components/kemet-button/types.js.map +0 -1
  99. package/dist/components/kemet-card/docs/stories.d.ts +0 -19
  100. package/dist/components/kemet-card/docs/stories.js +0 -120
  101. package/dist/components/kemet-card/docs/stories.js.map +0 -1
  102. package/dist/components/kemet-card/kemet-card.d.ts +0 -47
  103. package/dist/components/kemet-card/kemet-card.js +0 -65
  104. package/dist/components/kemet-card/kemet-card.js.map +0 -1
  105. package/dist/components/kemet-card/styles.d.ts +0 -1
  106. package/dist/components/kemet-card/styles.js.map +0 -1
  107. package/dist/components/kemet-carousel/docs/stories.d.ts +0 -23
  108. package/dist/components/kemet-carousel/docs/stories.js +0 -180
  109. package/dist/components/kemet-carousel/docs/stories.js.map +0 -1
  110. package/dist/components/kemet-carousel/kemet-carousel-current.d.ts +0 -26
  111. package/dist/components/kemet-carousel/kemet-carousel-current.js +0 -44
  112. package/dist/components/kemet-carousel/kemet-carousel-current.js.map +0 -1
  113. package/dist/components/kemet-carousel/kemet-carousel-first.d.ts +0 -25
  114. package/dist/components/kemet-carousel/kemet-carousel-first.js +0 -50
  115. package/dist/components/kemet-carousel/kemet-carousel-first.js.map +0 -1
  116. package/dist/components/kemet-carousel/kemet-carousel-last.d.ts +0 -25
  117. package/dist/components/kemet-carousel/kemet-carousel-last.js +0 -50
  118. package/dist/components/kemet-carousel/kemet-carousel-last.js.map +0 -1
  119. package/dist/components/kemet-carousel/kemet-carousel-link.d.ts +0 -31
  120. package/dist/components/kemet-carousel/kemet-carousel-link.js +0 -64
  121. package/dist/components/kemet-carousel/kemet-carousel-link.js.map +0 -1
  122. package/dist/components/kemet-carousel/kemet-carousel-next.d.ts +0 -25
  123. package/dist/components/kemet-carousel/kemet-carousel-next.js +0 -50
  124. package/dist/components/kemet-carousel/kemet-carousel-next.js.map +0 -1
  125. package/dist/components/kemet-carousel/kemet-carousel-prev.d.ts +0 -25
  126. package/dist/components/kemet-carousel/kemet-carousel-prev.js +0 -50
  127. package/dist/components/kemet-carousel/kemet-carousel-prev.js.map +0 -1
  128. package/dist/components/kemet-carousel/kemet-carousel-slide.d.ts +0 -29
  129. package/dist/components/kemet-carousel/kemet-carousel-slide.js +0 -53
  130. package/dist/components/kemet-carousel/kemet-carousel-slide.js.map +0 -1
  131. package/dist/components/kemet-carousel/kemet-carousel-total.d.ts +0 -26
  132. package/dist/components/kemet-carousel/kemet-carousel-total.js +0 -44
  133. package/dist/components/kemet-carousel/kemet-carousel-total.js.map +0 -1
  134. package/dist/components/kemet-carousel/kemet-carousel.d.ts +0 -118
  135. package/dist/components/kemet-carousel/kemet-carousel.js +0 -429
  136. package/dist/components/kemet-carousel/kemet-carousel.js.map +0 -1
  137. package/dist/components/kemet-carousel/styles.d.ts +0 -1
  138. package/dist/components/kemet-carousel/styles.js.map +0 -1
  139. package/dist/components/kemet-checkbox/docs/stories.d.ts +0 -13
  140. package/dist/components/kemet-checkbox/docs/stories.js +0 -45
  141. package/dist/components/kemet-checkbox/docs/stories.js.map +0 -1
  142. package/dist/components/kemet-checkbox/kemet-checkbox.d.ts +0 -71
  143. package/dist/components/kemet-checkbox/kemet-checkbox.js +0 -192
  144. package/dist/components/kemet-checkbox/kemet-checkbox.js.map +0 -1
  145. package/dist/components/kemet-checkbox/styles.d.ts +0 -1
  146. package/dist/components/kemet-checkbox/styles.js.map +0 -1
  147. package/dist/components/kemet-checkbox/types.d.ts +0 -15
  148. package/dist/components/kemet-checkbox/types.js +0 -2
  149. package/dist/components/kemet-checkbox/types.js.map +0 -1
  150. package/dist/components/kemet-combo/docs/stories.d.ts +0 -11
  151. package/dist/components/kemet-combo/docs/stories.js +0 -32
  152. package/dist/components/kemet-combo/docs/stories.js.map +0 -1
  153. package/dist/components/kemet-combo/kemet-combo.d.ts +0 -50
  154. package/dist/components/kemet-combo/kemet-combo.js +0 -158
  155. package/dist/components/kemet-combo/kemet-combo.js.map +0 -1
  156. package/dist/components/kemet-combo/styles.d.ts +0 -1
  157. package/dist/components/kemet-combo/styles.js.map +0 -1
  158. package/dist/components/kemet-count/docs/stories.d.ts +0 -11
  159. package/dist/components/kemet-count/docs/stories.js +0 -36
  160. package/dist/components/kemet-count/docs/stories.js.map +0 -1
  161. package/dist/components/kemet-count/kemet-count.d.ts +0 -39
  162. package/dist/components/kemet-count/kemet-count.js +0 -98
  163. package/dist/components/kemet-count/kemet-count.js.map +0 -1
  164. package/dist/components/kemet-draggable/docs/stories.d.ts +0 -10
  165. package/dist/components/kemet-draggable/docs/stories.js +0 -25
  166. package/dist/components/kemet-draggable/docs/stories.js.map +0 -1
  167. package/dist/components/kemet-draggable/kemet-draggable.d.ts +0 -49
  168. package/dist/components/kemet-draggable/kemet-draggable.js +0 -138
  169. package/dist/components/kemet-draggable/kemet-draggable.js.map +0 -1
  170. package/dist/components/kemet-drawer/docs/stories.d.ts +0 -16
  171. package/dist/components/kemet-drawer/docs/stories.js +0 -90
  172. package/dist/components/kemet-drawer/docs/stories.js.map +0 -1
  173. package/dist/components/kemet-drawer/kemet-drawer.d.ts +0 -48
  174. package/dist/components/kemet-drawer/kemet-drawer.js +0 -95
  175. package/dist/components/kemet-drawer/kemet-drawer.js.map +0 -1
  176. package/dist/components/kemet-drawer/styles.d.ts +0 -2
  177. package/dist/components/kemet-drawer/styles.js.map +0 -1
  178. package/dist/components/kemet-drawer/types.d.ts +0 -2
  179. package/dist/components/kemet-drawer/types.js +0 -2
  180. package/dist/components/kemet-drawer/types.js.map +0 -1
  181. package/dist/components/kemet-fab/docs/stories.d.ts +0 -14
  182. package/dist/components/kemet-fab/docs/stories.js +0 -78
  183. package/dist/components/kemet-fab/docs/stories.js.map +0 -1
  184. package/dist/components/kemet-fab/kemet-fab.d.ts +0 -49
  185. package/dist/components/kemet-fab/kemet-fab.js +0 -107
  186. package/dist/components/kemet-fab/kemet-fab.js.map +0 -1
  187. package/dist/components/kemet-fab/styles.d.ts +0 -1
  188. package/dist/components/kemet-fab/styles.js.map +0 -1
  189. package/dist/components/kemet-fab/types.d.ts +0 -8
  190. package/dist/components/kemet-fab/types.js +0 -2
  191. package/dist/components/kemet-fab/types.js.map +0 -1
  192. package/dist/components/kemet-field/docs/stories.d.ts +0 -15
  193. package/dist/components/kemet-field/docs/stories.js +0 -55
  194. package/dist/components/kemet-field/docs/stories.js.map +0 -1
  195. package/dist/components/kemet-field/kemet-field.d.ts +0 -61
  196. package/dist/components/kemet-field/kemet-field.js +0 -139
  197. package/dist/components/kemet-field/kemet-field.js.map +0 -1
  198. package/dist/components/kemet-field/styles.d.ts +0 -1
  199. package/dist/components/kemet-field/styles.js.map +0 -1
  200. package/dist/components/kemet-field/types.d.ts +0 -13
  201. package/dist/components/kemet-field/types.js +0 -2
  202. package/dist/components/kemet-field/types.js.map +0 -1
  203. package/dist/components/kemet-flipcard/docs/stories.d.ts +0 -14
  204. package/dist/components/kemet-flipcard/docs/stories.js +0 -60
  205. package/dist/components/kemet-flipcard/docs/stories.js.map +0 -1
  206. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.d.ts +0 -21
  207. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js +0 -41
  208. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js.map +0 -1
  209. package/dist/components/kemet-flipcard/kemet-flipcard.d.ts +0 -52
  210. package/dist/components/kemet-flipcard/kemet-flipcard.js +0 -129
  211. package/dist/components/kemet-flipcard/kemet-flipcard.js.map +0 -1
  212. package/dist/components/kemet-flipcard/styles.d.ts +0 -1
  213. package/dist/components/kemet-flipcard/styles.js.map +0 -1
  214. package/dist/components/kemet-flipcard/types.d.ts +0 -7
  215. package/dist/components/kemet-flipcard/types.js +0 -2
  216. package/dist/components/kemet-flipcard/types.js.map +0 -1
  217. package/dist/components/kemet-icon/docs/stories.d.ts +0 -9
  218. package/dist/components/kemet-icon/docs/stories.js +0 -27
  219. package/dist/components/kemet-icon/docs/stories.js.map +0 -1
  220. package/dist/components/kemet-icon/kemet-icon.d.ts +0 -28
  221. package/dist/components/kemet-icon/kemet-icon.js +0 -114
  222. package/dist/components/kemet-icon/kemet-icon.js.map +0 -1
  223. package/dist/components/kemet-icon/styles.d.ts +0 -1
  224. package/dist/components/kemet-icon/styles.js +0 -9
  225. package/dist/components/kemet-icon/styles.js.map +0 -1
  226. package/dist/components/kemet-icon/types.d.ts +0 -5
  227. package/dist/components/kemet-icon/types.js +0 -2
  228. package/dist/components/kemet-icon/types.js.map +0 -1
  229. package/dist/components/kemet-input/docs/stories.d.ts +0 -13
  230. package/dist/components/kemet-input/docs/stories.js +0 -83
  231. package/dist/components/kemet-input/docs/stories.js.map +0 -1
  232. package/dist/components/kemet-input/kemet-input.d.ts +0 -174
  233. package/dist/components/kemet-input/kemet-input.js +0 -397
  234. package/dist/components/kemet-input/kemet-input.js.map +0 -1
  235. package/dist/components/kemet-input/styles.d.ts +0 -1
  236. package/dist/components/kemet-input/styles.js.map +0 -1
  237. package/dist/components/kemet-input/types.d.ts +0 -35
  238. package/dist/components/kemet-input/types.js +0 -2
  239. package/dist/components/kemet-input/types.js.map +0 -1
  240. package/dist/components/kemet-modal/docs/stories.d.ts +0 -12
  241. package/dist/components/kemet-modal/docs/stories.js +0 -58
  242. package/dist/components/kemet-modal/docs/stories.js.map +0 -1
  243. package/dist/components/kemet-modal/kemet-modal-close.d.ts +0 -21
  244. package/dist/components/kemet-modal/kemet-modal-close.js +0 -40
  245. package/dist/components/kemet-modal/kemet-modal-close.js.map +0 -1
  246. package/dist/components/kemet-modal/kemet-modal.d.ts +0 -59
  247. package/dist/components/kemet-modal/kemet-modal.js +0 -150
  248. package/dist/components/kemet-modal/kemet-modal.js.map +0 -1
  249. package/dist/components/kemet-modal/styles.d.ts +0 -2
  250. package/dist/components/kemet-modal/styles.js.map +0 -1
  251. package/dist/components/kemet-modal/types.d.ts +0 -8
  252. package/dist/components/kemet-modal/types.js +0 -2
  253. package/dist/components/kemet-modal/types.js.map +0 -1
  254. package/dist/components/kemet-password/docs/stories.d.ts +0 -10
  255. package/dist/components/kemet-password/docs/stories.js +0 -29
  256. package/dist/components/kemet-password/docs/stories.js.map +0 -1
  257. package/dist/components/kemet-password/kemet-password.d.ts +0 -83
  258. package/dist/components/kemet-password/kemet-password.js +0 -155
  259. package/dist/components/kemet-password/kemet-password.js.map +0 -1
  260. package/dist/components/kemet-password/styles.d.ts +0 -1
  261. package/dist/components/kemet-password/styles.js.map +0 -1
  262. package/dist/components/kemet-password/types.d.ts +0 -10
  263. package/dist/components/kemet-password/types.js +0 -2
  264. package/dist/components/kemet-password/types.js.map +0 -1
  265. package/dist/components/kemet-popper/docs/stories.d.ts +0 -12
  266. package/dist/components/kemet-popper/docs/stories.js +0 -65
  267. package/dist/components/kemet-popper/docs/stories.js.map +0 -1
  268. package/dist/components/kemet-popper/kemet-popper-close.d.ts +0 -22
  269. package/dist/components/kemet-popper/kemet-popper-close.js +0 -48
  270. package/dist/components/kemet-popper/kemet-popper-close.js.map +0 -1
  271. package/dist/components/kemet-popper/kemet-popper.d.ts +0 -72
  272. package/dist/components/kemet-popper/kemet-popper.js +0 -173
  273. package/dist/components/kemet-popper/kemet-popper.js.map +0 -1
  274. package/dist/components/kemet-popper/styles.d.ts +0 -1
  275. package/dist/components/kemet-popper/styles.effects.d.ts +0 -8
  276. package/dist/components/kemet-popper/styles.effects.js.map +0 -1
  277. package/dist/components/kemet-popper/styles.js +0 -37
  278. package/dist/components/kemet-popper/styles.js.map +0 -1
  279. package/dist/components/kemet-popper/types.d.ts +0 -3
  280. package/dist/components/kemet-popper/types.js +0 -2
  281. package/dist/components/kemet-popper/types.js.map +0 -1
  282. package/dist/components/kemet-radio/docs/stories.d.ts +0 -12
  283. package/dist/components/kemet-radio/docs/stories.js +0 -44
  284. package/dist/components/kemet-radio/docs/stories.js.map +0 -1
  285. package/dist/components/kemet-radio/kemet-radio.d.ts +0 -57
  286. package/dist/components/kemet-radio/kemet-radio.js +0 -130
  287. package/dist/components/kemet-radio/kemet-radio.js.map +0 -1
  288. package/dist/components/kemet-radio/kemet-radios.d.ts +0 -50
  289. package/dist/components/kemet-radio/kemet-radios.js +0 -149
  290. package/dist/components/kemet-radio/kemet-radios.js.map +0 -1
  291. package/dist/components/kemet-radio/styles.d.ts +0 -2
  292. package/dist/components/kemet-radio/styles.js.map +0 -1
  293. package/dist/components/kemet-radio/types.d.ts +0 -20
  294. package/dist/components/kemet-radio/types.js +0 -2
  295. package/dist/components/kemet-radio/types.js.map +0 -1
  296. package/dist/components/kemet-rotator/docs/stories.d.ts +0 -10
  297. package/dist/components/kemet-rotator/docs/stories.js +0 -34
  298. package/dist/components/kemet-rotator/docs/stories.js.map +0 -1
  299. package/dist/components/kemet-rotator/kemet-rotator.d.ts +0 -40
  300. package/dist/components/kemet-rotator/kemet-rotator.js +0 -121
  301. package/dist/components/kemet-rotator/kemet-rotator.js.map +0 -1
  302. package/dist/components/kemet-rotator/styles.d.ts +0 -1
  303. package/dist/components/kemet-rotator/styles.js.map +0 -1
  304. package/dist/components/kemet-rotator/types.d.ts +0 -9
  305. package/dist/components/kemet-rotator/types.js +0 -2
  306. package/dist/components/kemet-rotator/types.js.map +0 -1
  307. package/dist/components/kemet-scroll-link/docs/stories.d.ts +0 -9
  308. package/dist/components/kemet-scroll-link/docs/stories.js +0 -97
  309. package/dist/components/kemet-scroll-link/docs/stories.js.map +0 -1
  310. package/dist/components/kemet-scroll-link/kemet-scroll-link.d.ts +0 -31
  311. package/dist/components/kemet-scroll-link/kemet-scroll-link.js +0 -83
  312. package/dist/components/kemet-scroll-link/kemet-scroll-link.js.map +0 -1
  313. package/dist/components/kemet-scroll-link/types.d.ts +0 -6
  314. package/dist/components/kemet-scroll-link/types.js +0 -2
  315. package/dist/components/kemet-scroll-link/types.js.map +0 -1
  316. package/dist/components/kemet-scroll-nav/docs/stories.d.ts +0 -10
  317. package/dist/components/kemet-scroll-nav/docs/stories.js +0 -162
  318. package/dist/components/kemet-scroll-nav/docs/stories.js.map +0 -1
  319. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.d.ts +0 -34
  320. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js +0 -65
  321. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js.map +0 -1
  322. package/dist/components/kemet-scroll-nav/styles.d.ts +0 -1
  323. package/dist/components/kemet-scroll-nav/styles.js.map +0 -1
  324. package/dist/components/kemet-scroll-nav/types.d.ts +0 -6
  325. package/dist/components/kemet-scroll-nav/types.js +0 -2
  326. package/dist/components/kemet-scroll-nav/types.js.map +0 -1
  327. package/dist/components/kemet-scroll-snap/docs/stories.d.ts +0 -17
  328. package/dist/components/kemet-scroll-snap/docs/stories.js +0 -121
  329. package/dist/components/kemet-scroll-snap/docs/stories.js.map +0 -1
  330. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts +0 -45
  331. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js +0 -120
  332. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +0 -1
  333. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.d.ts +0 -30
  334. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js +0 -53
  335. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +0 -1
  336. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.d.ts +0 -47
  337. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js +0 -117
  338. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map +0 -1
  339. package/dist/components/kemet-scroll-snap/styles.d.ts +0 -2
  340. package/dist/components/kemet-scroll-snap/styles.js.map +0 -1
  341. package/dist/components/kemet-scroll-snap/types.d.ts +0 -20
  342. package/dist/components/kemet-scroll-snap/types.js +0 -2
  343. package/dist/components/kemet-scroll-snap/types.js.map +0 -1
  344. package/dist/components/kemet-select/docs/stories.d.ts +0 -13
  345. package/dist/components/kemet-select/docs/stories.js +0 -49
  346. package/dist/components/kemet-select/docs/stories.js.map +0 -1
  347. package/dist/components/kemet-select/kemet-option.d.ts +0 -29
  348. package/dist/components/kemet-select/kemet-option.js +0 -45
  349. package/dist/components/kemet-select/kemet-option.js.map +0 -1
  350. package/dist/components/kemet-select/kemet-select.d.ts +0 -119
  351. package/dist/components/kemet-select/kemet-select.js +0 -198
  352. package/dist/components/kemet-select/kemet-select.js.map +0 -1
  353. package/dist/components/kemet-select/styles.d.ts +0 -1
  354. package/dist/components/kemet-select/styles.js.map +0 -1
  355. package/dist/components/kemet-select/types.d.ts +0 -20
  356. package/dist/components/kemet-select/types.js +0 -2
  357. package/dist/components/kemet-select/types.js.map +0 -1
  358. package/dist/components/kemet-sortable/docs/stories.d.ts +0 -10
  359. package/dist/components/kemet-sortable/docs/stories.js +0 -29
  360. package/dist/components/kemet-sortable/docs/stories.js.map +0 -1
  361. package/dist/components/kemet-sortable/kemet-sortable-item.d.ts +0 -21
  362. package/dist/components/kemet-sortable/kemet-sortable-item.js +0 -30
  363. package/dist/components/kemet-sortable/kemet-sortable-item.js.map +0 -1
  364. package/dist/components/kemet-sortable/kemet-sortable.d.ts +0 -25
  365. package/dist/components/kemet-sortable/kemet-sortable.js +0 -77
  366. package/dist/components/kemet-sortable/kemet-sortable.js.map +0 -1
  367. package/dist/components/kemet-sortable/styles.d.ts +0 -2
  368. package/dist/components/kemet-sortable/styles.js.map +0 -1
  369. package/dist/components/kemet-sortable/types.d.ts +0 -3
  370. package/dist/components/kemet-sortable/types.js +0 -2
  371. package/dist/components/kemet-sortable/types.js.map +0 -1
  372. package/dist/components/kemet-svgs/docs/stories.d.ts +0 -10
  373. package/dist/components/kemet-svgs/docs/stories.js +0 -67
  374. package/dist/components/kemet-svgs/docs/stories.js.map +0 -1
  375. package/dist/components/kemet-svgs/kemet-svg.d.ts +0 -38
  376. package/dist/components/kemet-svgs/kemet-svg.js +0 -97
  377. package/dist/components/kemet-svgs/kemet-svg.js.map +0 -1
  378. package/dist/components/kemet-svgs/kemet-svgs.d.ts +0 -27
  379. package/dist/components/kemet-svgs/kemet-svgs.js +0 -51
  380. package/dist/components/kemet-svgs/kemet-svgs.js.map +0 -1
  381. package/dist/components/kemet-svgs/types.d.ts +0 -10
  382. package/dist/components/kemet-svgs/types.js +0 -2
  383. package/dist/components/kemet-svgs/types.js.map +0 -1
  384. package/dist/components/kemet-tabs/docs/stories.d.ts +0 -18
  385. package/dist/components/kemet-tabs/docs/stories.js +0 -142
  386. package/dist/components/kemet-tabs/docs/stories.js.map +0 -1
  387. package/dist/components/kemet-tabs/kemet-tab-panel.d.ts +0 -28
  388. package/dist/components/kemet-tabs/kemet-tab-panel.js +0 -55
  389. package/dist/components/kemet-tabs/kemet-tab-panel.js.map +0 -1
  390. package/dist/components/kemet-tabs/kemet-tab.d.ts +0 -38
  391. package/dist/components/kemet-tabs/kemet-tab.js +0 -82
  392. package/dist/components/kemet-tabs/kemet-tab.js.map +0 -1
  393. package/dist/components/kemet-tabs/kemet-tabs.d.ts +0 -100
  394. package/dist/components/kemet-tabs/kemet-tabs.js +0 -487
  395. package/dist/components/kemet-tabs/kemet-tabs.js.map +0 -1
  396. package/dist/components/kemet-tabs/styles.d.ts +0 -3
  397. package/dist/components/kemet-tabs/styles.js.map +0 -1
  398. package/dist/components/kemet-tabs/types.d.ts +0 -27
  399. package/dist/components/kemet-tabs/types.js +0 -2
  400. package/dist/components/kemet-tabs/types.js.map +0 -1
  401. package/dist/components/kemet-textarea/docs/stories.d.ts +0 -12
  402. package/dist/components/kemet-textarea/docs/stories.js +0 -58
  403. package/dist/components/kemet-textarea/docs/stories.js.map +0 -1
  404. package/dist/components/kemet-textarea/kemet-textarea.d.ts +0 -123
  405. package/dist/components/kemet-textarea/kemet-textarea.js +0 -293
  406. package/dist/components/kemet-textarea/kemet-textarea.js.map +0 -1
  407. package/dist/components/kemet-textarea/styles.d.ts +0 -1
  408. package/dist/components/kemet-textarea/styles.js.map +0 -1
  409. package/dist/components/kemet-textarea/types.d.ts +0 -20
  410. package/dist/components/kemet-textarea/types.js +0 -2
  411. package/dist/components/kemet-textarea/types.js.map +0 -1
  412. package/dist/components/kemet-toggle/docs/stories.d.ts +0 -11
  413. package/dist/components/kemet-toggle/docs/stories.js +0 -43
  414. package/dist/components/kemet-toggle/docs/stories.js.map +0 -1
  415. package/dist/components/kemet-toggle/kemet-toggle.d.ts +0 -60
  416. package/dist/components/kemet-toggle/kemet-toggle.js +0 -130
  417. package/dist/components/kemet-toggle/kemet-toggle.js.map +0 -1
  418. package/dist/components/kemet-toggle/styles.d.ts +0 -1
  419. package/dist/components/kemet-toggle/styles.js.map +0 -1
  420. package/dist/components/kemet-toggle/types.d.ts +0 -10
  421. package/dist/components/kemet-toggle/types.js +0 -2
  422. package/dist/components/kemet-toggle/types.js.map +0 -1
  423. package/dist/components/kemet-tooltip/docs/stories.d.ts +0 -14
  424. package/dist/components/kemet-tooltip/docs/stories.js +0 -97
  425. package/dist/components/kemet-tooltip/docs/stories.js.map +0 -1
  426. package/dist/components/kemet-tooltip/kemet-tooltip.d.ts +0 -33
  427. package/dist/components/kemet-tooltip/kemet-tooltip.js +0 -69
  428. package/dist/components/kemet-tooltip/kemet-tooltip.js.map +0 -1
  429. package/dist/components/kemet-tooltip/styles.d.ts +0 -1
  430. package/dist/components/kemet-tooltip/styles.js.map +0 -1
  431. package/dist/components/kemet-tooltip/types.d.ts +0 -3
  432. package/dist/components/kemet-tooltip/types.js +0 -2
  433. package/dist/components/kemet-tooltip/types.js.map +0 -1
  434. package/dist/components/kemet-tracker/docs/stories.d.ts +0 -11
  435. package/dist/components/kemet-tracker/docs/stories.js +0 -42
  436. package/dist/components/kemet-tracker/docs/stories.js.map +0 -1
  437. package/dist/components/kemet-tracker/kemet-tracker-step.d.ts +0 -63
  438. package/dist/components/kemet-tracker/kemet-tracker-step.js +0 -127
  439. package/dist/components/kemet-tracker/kemet-tracker-step.js.map +0 -1
  440. package/dist/components/kemet-tracker/kemet-tracker.d.ts +0 -27
  441. package/dist/components/kemet-tracker/kemet-tracker.js +0 -70
  442. package/dist/components/kemet-tracker/kemet-tracker.js.map +0 -1
  443. package/dist/components/kemet-tracker/styles.d.ts +0 -1
  444. package/dist/components/kemet-tracker/styles.js.map +0 -1
  445. package/dist/components/kemet-tracker/types.d.ts +0 -13
  446. package/dist/components/kemet-tracker/types.js +0 -2
  447. package/dist/components/kemet-tracker/types.js.map +0 -1
  448. package/dist/components/kemet-upload/docs/stories.d.ts +0 -10
  449. package/dist/components/kemet-upload/docs/stories.js +0 -52
  450. package/dist/components/kemet-upload/docs/stories.js.map +0 -1
  451. package/dist/components/kemet-upload/kemet-upload-file.d.ts +0 -46
  452. package/dist/components/kemet-upload/kemet-upload-file.js +0 -109
  453. package/dist/components/kemet-upload/kemet-upload-file.js.map +0 -1
  454. package/dist/components/kemet-upload/kemet-upload.d.ts +0 -58
  455. package/dist/components/kemet-upload/kemet-upload.js +0 -149
  456. package/dist/components/kemet-upload/kemet-upload.js.map +0 -1
  457. package/dist/components/kemet-upload/styles.d.ts +0 -3
  458. package/dist/components/kemet-upload/styles.js.map +0 -1
  459. package/dist/components/kemet-upload/types.d.ts +0 -21
  460. package/dist/components/kemet-upload/types.js +0 -2
  461. package/dist/components/kemet-upload/types.js.map +0 -1
  462. package/dist/kemet-components.bundle.js +0 -99
  463. package/dist/kemet-components.bundle.js.map +0 -1
  464. package/dist/kemet-components.cjs +0 -11691
  465. package/dist/kemet-components.js +0 -11689
  466. package/dist/styles/components/_config.scss +0 -4
  467. package/dist/styles/components/accordion.scss +0 -9
  468. package/dist/styles/components/scrollsnap.scss +0 -11
  469. package/dist/styles/kemet.components.css +0 -23
  470. package/dist/styles/kemet.components.css.map +0 -1
  471. package/dist/styles/kemet.components.scss +0 -2
  472. package/dist/tsconfig.tsbuildinfo +0 -1
  473. package/dist/utilities/controllers/forms.d.ts +0 -11
  474. package/dist/utilities/controllers/forms.js +0 -102
  475. package/dist/utilities/controllers/forms.js.map +0 -1
  476. package/dist/utilities/misc/constants.d.ts +0 -5
  477. package/dist/utilities/misc/constants.js +0 -6
  478. package/dist/utilities/misc/constants.js.map +0 -1
  479. package/dist/utilities/misc/events.d.ts +0 -1
  480. package/dist/utilities/misc/events.js +0 -4
  481. package/dist/utilities/misc/events.js.map +0 -1
  482. package/index.js +0 -1
@@ -1,57 +0,0 @@
1
- import { LitElement } from 'lit';
2
- /**
3
- * @since 1.0.0
4
- * @status stable
5
- *
6
- * @tagname kemet-radio
7
- * @summary An enhanced radio button.
8
- *
9
- * @prop {string} label - The text next to the radio button
10
- * @prop {boolean} checked - Determines whether or not the button is checked
11
- * @prop {string} name - The name of the field
12
- * @prop {string} value - The value of the radio button
13
- * @prop {boolean} disabled - Determines if the button should be disabled
14
- * @prop {boolean} focused - Is true when the button is focused on
15
- * @prop {boolean} filled - Displayed the button as a filled button
16
- *
17
- * @csspart label - The label that contains the radio button.
18
- * @csspart button - The radio button.
19
- * @csspart text - The text next to the radio button.
20
- * @csspart dot - The circle that fills the radio button.
21
- *
22
- * @cssproperty --kemet-radio-size - The size of the radio button.
23
- * @cssproperty --kemet-radio-border - The outer border of the radio button.
24
- * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.
25
- * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.
26
- * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.
27
- * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.
28
- * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.
29
- *
30
- * @event kemet-radio-focused - Fires when the checkbox loses or receives focus
31
- * @event kemet-radio-focused - Fires when the checkbox loses or receives focus
32
- *
33
- */
34
- export default class KemetRadio extends LitElement {
35
- static styles: import("lit").CSSResult[];
36
- label: string;
37
- checked: boolean;
38
- name: string;
39
- value: string;
40
- disabled: boolean;
41
- focused: boolean;
42
- filled: boolean;
43
- input: HTMLInputElement;
44
- firstUpdated(): void;
45
- render(): import("lit-html").TemplateResult<1>;
46
- click(): void;
47
- blur(): void;
48
- focus(): void;
49
- handleBlur(): void;
50
- handleFocus(): void;
51
- makeDot(): import("lit-html").TemplateResult<1>;
52
- }
53
- declare global {
54
- interface HTMLElementTagNameMap {
55
- 'kemet-radio': KemetRadio;
56
- }
57
- }
@@ -1,130 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { html, LitElement } from 'lit';
3
- import { customElement, property, state } from 'lit/decorators.js';
4
- import { ifDefined } from 'lit/directives/if-defined.js';
5
- import { live } from 'lit/directives/live.js';
6
- import { emitEvent } from '../../utilities/misc/events';
7
- import { stylesRadio } from './styles';
8
- /**
9
- * @since 1.0.0
10
- * @status stable
11
- *
12
- * @tagname kemet-radio
13
- * @summary An enhanced radio button.
14
- *
15
- * @prop {string} label - The text next to the radio button
16
- * @prop {boolean} checked - Determines whether or not the button is checked
17
- * @prop {string} name - The name of the field
18
- * @prop {string} value - The value of the radio button
19
- * @prop {boolean} disabled - Determines if the button should be disabled
20
- * @prop {boolean} focused - Is true when the button is focused on
21
- * @prop {boolean} filled - Displayed the button as a filled button
22
- *
23
- * @csspart label - The label that contains the radio button.
24
- * @csspart button - The radio button.
25
- * @csspart text - The text next to the radio button.
26
- * @csspart dot - The circle that fills the radio button.
27
- *
28
- * @cssproperty --kemet-radio-size - The size of the radio button.
29
- * @cssproperty --kemet-radio-border - The outer border of the radio button.
30
- * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.
31
- * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.
32
- * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.
33
- * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.
34
- * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.
35
- *
36
- * @event kemet-radio-focused - Fires when the checkbox loses or receives focus
37
- * @event kemet-radio-focused - Fires when the checkbox loses or receives focus
38
- *
39
- */
40
- let KemetRadio = class KemetRadio extends LitElement {
41
- constructor() {
42
- super(...arguments);
43
- this.label = '';
44
- this.disabled = false;
45
- }
46
- firstUpdated() {
47
- const radiosElement = this.closest('kemet-radios');
48
- this.name = radiosElement.name || 'radio-button';
49
- this.input = this.shadowRoot.querySelector('input');
50
- this.setAttribute('role', 'radio');
51
- if (this.checked) {
52
- this.setAttribute('aria-checked', 'true');
53
- }
54
- else {
55
- this.setAttribute('aria-checked', 'false');
56
- }
57
- }
58
- render() {
59
- return html `
60
- <label part="label">
61
- <input
62
- type="radio"
63
- name=${ifDefined(this.name)}
64
- .value=${this.value}
65
- .checked=${live(this.checked)}
66
- .disabled=${this.disabled}
67
- @blur=${() => this.handleBlur()}
68
- @focus=${() => this.handleFocus()}
69
- />
70
- <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
71
- <span part="text">${this.label}</span>
72
- </label>
73
- `;
74
- }
75
- click() {
76
- this.input.click();
77
- }
78
- blur() {
79
- this.input.blur();
80
- }
81
- focus() {
82
- this.input.focus();
83
- }
84
- handleBlur() {
85
- this.focused = false;
86
- emitEvent(this, 'kemet-radio-focused', false);
87
- }
88
- handleFocus() {
89
- this.focused = true;
90
- emitEvent(this, 'kemet-radio-focused', true);
91
- }
92
- makeDot() {
93
- if (this.checked) {
94
- return html `
95
- <span part="dot"></span>
96
- `;
97
- }
98
- return null;
99
- }
100
- };
101
- KemetRadio.styles = [stylesRadio];
102
- __decorate([
103
- property({ type: String })
104
- ], KemetRadio.prototype, "label", void 0);
105
- __decorate([
106
- property({ type: Boolean, reflect: true })
107
- ], KemetRadio.prototype, "checked", void 0);
108
- __decorate([
109
- property({ type: String })
110
- ], KemetRadio.prototype, "name", void 0);
111
- __decorate([
112
- property({ type: String })
113
- ], KemetRadio.prototype, "value", void 0);
114
- __decorate([
115
- property({ type: Boolean, reflect: true })
116
- ], KemetRadio.prototype, "disabled", void 0);
117
- __decorate([
118
- property({ type: Boolean, reflect: true })
119
- ], KemetRadio.prototype, "focused", void 0);
120
- __decorate([
121
- property({ type: Boolean, reflect: true })
122
- ], KemetRadio.prototype, "filled", void 0);
123
- __decorate([
124
- state()
125
- ], KemetRadio.prototype, "input", void 0);
126
- KemetRadio = __decorate([
127
- customElement('kemet-radio')
128
- ], KemetRadio);
129
- export default KemetRadio;
130
- //# sourceMappingURL=kemet-radio.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"kemet-radio.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadio } from './styles';\nimport { KemetRadioInterface } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radio\n * @summary An enhanced radio button.\n *\n * @prop {string} label - The text next to the radio button\n * @prop {boolean} checked - Determines whether or not the button is checked\n * @prop {string} name - The name of the field\n * @prop {string} value - The value of the radio button\n * @prop {boolean} disabled - Determines if the button should be disabled\n * @prop {boolean} focused - Is true when the button is focused on\n * @prop {boolean} filled - Displayed the button as a filled button\n *\n * @csspart label - The label that contains the radio button.\n * @csspart button - The radio button.\n * @csspart text - The text next to the radio button.\n * @csspart dot - The circle that fills the radio button.\n *\n * @cssproperty --kemet-radio-size - The size of the radio button.\n * @cssproperty --kemet-radio-border - The outer border of the radio button.\n * @cssproperty --kemet-radio-dot-color - The color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-width - The border width of the radio button's dot.\n * @cssproperty --kemet-radio-dot-border-color - The border color of the radio button's dot.\n * @cssproperty --kemet-radio-dot-color-filled - The filled color of the radio button.\n * @cssproperty --kemet-radio-dot-ring-color - The ring color of the radio button's dot.\n *\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n * @event kemet-radio-focused - Fires when the checkbox loses or receives focus\n *\n */\n\n@customElement('kemet-radio')\nexport default class KemetRadio extends LitElement {\n static styles = [stylesRadio];\n\n @property({ type: String })\n label: string = '';\n\n @property({ type: Boolean, reflect: true })\n checked: boolean;\n\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n value: string;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @state()\n input: HTMLInputElement;\n\n firstUpdated() {\n const radiosElement = this.closest('kemet-radios') as KemetRadioInterface;\n\n this.name = radiosElement.name || 'radio-button';\n this.input = this.shadowRoot.querySelector('input');\n this.setAttribute('role', 'radio');\n\n if (this.checked) {\n this.setAttribute('aria-checked', 'true');\n } else {\n this.setAttribute('aria-checked', 'false');\n }\n }\n\n render() {\n return html`\n <label part=\"label\">\n <input\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n @blur=${() => this.handleBlur()}\n @focus=${() => this.handleFocus()}\n />\n <button part=\"button\" aria-label=${this.label}>${this.makeDot()}</button>\n <span part=\"text\">${this.label}</span>\n </label>\n `;\n }\n\n click() {\n this.input.click();\n }\n\n blur() {\n this.input.blur();\n }\n\n focus() {\n this.input.focus();\n }\n\n handleBlur() {\n this.focused = false;\n emitEvent(this, 'kemet-radio-focused', false);\n }\n\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-radio-focused', true);\n }\n\n makeDot() {\n if (this.checked) {\n return html`\n <span part=\"dot\"></span>\n `;\n }\n\n return null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radio': KemetRadio\n }\n}\n"]}
@@ -1,50 +0,0 @@
1
- import { LitElement } from 'lit';
2
- import { FormSubmitController } from '../../utilities/controllers/forms';
3
- import { TypeAxis, TypeStatus } from './types';
4
- import type KemetRadio from './kemet-radio';
5
- /**
6
- * @since 1.0.0
7
- * @status stable
8
- *
9
- * @tagname kemet-radios
10
- * @summary A group of radio buttons.
11
- *
12
- * @prop {string} legend - The legend text for the fieldset
13
- * @prop {string} axis - The direction of the button's layout
14
- * @prop {string} value - The value of the selected radio button
15
- * @prop {string} name - The name of the radio button set
16
- * @prop {string} status - The status of the radio button set
17
- * @prop {string} message - Validation message for the user
18
- * @prop {boolean} required - Determines whether the radio button set is required
19
- *
20
- * @csspart fieldset - The fieldset element.
21
- * @csspart legend - The legend element.
22
- *
23
- * @event kemet-radios-change - Fires when the state of the checkbox changes
24
- *
25
- */
26
- export default class KemetRadios extends LitElement {
27
- formSubmitController: FormSubmitController;
28
- static styles: import("lit").CSSResult[];
29
- legend: string;
30
- axis: TypeAxis;
31
- value: string;
32
- name: string;
33
- status: TypeStatus;
34
- message: string;
35
- required: boolean;
36
- radios: NodeListOf<KemetRadio>;
37
- constructor();
38
- firstUpdated(): void;
39
- render(): import("lit-html").TemplateResult<1>;
40
- handleClick(event: MouseEvent): void;
41
- handleKeyDown(event: KeyboardEvent): void;
42
- handleSlotChange(): void;
43
- makeMessage(): import("lit-html").TemplateResult<1>;
44
- checkValidity(): boolean;
45
- }
46
- declare global {
47
- interface HTMLElementTagNameMap {
48
- 'kemet-radios': KemetRadios;
49
- }
50
- }
@@ -1,149 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { html, LitElement } from 'lit';
3
- import { customElement, property, state } from 'lit/decorators.js';
4
- import { FormSubmitController } from '../../utilities/controllers/forms';
5
- import { emitEvent } from '../../utilities/misc/events';
6
- import { stylesRadios } from './styles';
7
- /**
8
- * @since 1.0.0
9
- * @status stable
10
- *
11
- * @tagname kemet-radios
12
- * @summary A group of radio buttons.
13
- *
14
- * @prop {string} legend - The legend text for the fieldset
15
- * @prop {string} axis - The direction of the button's layout
16
- * @prop {string} value - The value of the selected radio button
17
- * @prop {string} name - The name of the radio button set
18
- * @prop {string} status - The status of the radio button set
19
- * @prop {string} message - Validation message for the user
20
- * @prop {boolean} required - Determines whether the radio button set is required
21
- *
22
- * @csspart fieldset - The fieldset element.
23
- * @csspart legend - The legend element.
24
- *
25
- * @event kemet-radios-change - Fires when the state of the checkbox changes
26
- *
27
- */
28
- let KemetRadios = class KemetRadios extends LitElement {
29
- constructor() {
30
- super();
31
- this.legend = '';
32
- this.axis = 'horizontal';
33
- this.name = 'radios';
34
- this.status = 'standard';
35
- /** @internal */
36
- this.formSubmitController = new FormSubmitController(this);
37
- }
38
- firstUpdated() {
39
- this.radios = this.querySelectorAll('kemet-radio');
40
- this.setAttribute('role', 'radiogroup');
41
- }
42
- render() {
43
- return html `
44
- <fieldset part="fieldset">
45
- ${this.legend !== '' ? html `<legend part="legend">${this.legend}</legend>` : null}
46
- <slot @click=${(event) => this.handleClick(event)} @keydown=${(event) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
47
- </fieldset>
48
- ${this.makeMessage()}
49
- `;
50
- }
51
- handleClick(event) {
52
- const target = event.target;
53
- this.radios.forEach((radio) => {
54
- radio.checked = false;
55
- radio.tabIndex = radio === target ? 0 : -1;
56
- radio.setAttribute('aria-checked', 'false');
57
- });
58
- if (!target.disabled) {
59
- target.checked = true;
60
- target.setAttribute('aria-checked', 'true');
61
- this.value = target.value;
62
- this.status = 'standard';
63
- emitEvent(this, 'kemet-radios-change', target);
64
- }
65
- }
66
- handleKeyDown(event) {
67
- var _a;
68
- const radios = Array.from(this.radios);
69
- const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
70
- const forwardKeys = ['ArrowRight', 'ArrowDown'];
71
- const shift = forwardKeys.includes(event.key) ? 1 : -1;
72
- const checkedIndex = (_a = radios.findIndex((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0];
73
- let index;
74
- if (typeof checkedIndex === 'number') {
75
- index = checkedIndex + shift;
76
- }
77
- else {
78
- index = shift;
79
- }
80
- if (arrowKeys.includes(event.key)) {
81
- if (index < 0) {
82
- index = radios.length - 1;
83
- }
84
- if (index > radios.length - 1) {
85
- index = 0;
86
- }
87
- this.radios.forEach((radio) => {
88
- radio.checked = false;
89
- radio.tabIndex = -1;
90
- });
91
- this.radios[index].focus();
92
- this.radios[index].checked = true;
93
- this.radios[index].tabIndex = 0;
94
- }
95
- }
96
- handleSlotChange() {
97
- const radios = Array.from(this.radios);
98
- const checkedRadio = radios.find((radio) => radio.checked);
99
- this.radios.forEach((radio) => {
100
- radio.tabIndex = -1;
101
- radio.input.tabIndex = -1;
102
- });
103
- if (checkedRadio) {
104
- checkedRadio.tabIndex = 0;
105
- }
106
- }
107
- makeMessage() {
108
- if (this.status === 'error' || this.status === 'warning') {
109
- return html `<span part="message">${this.message}</span>`;
110
- }
111
- return null;
112
- }
113
- checkValidity() {
114
- if (this.required) {
115
- return !!this.value;
116
- }
117
- return true;
118
- }
119
- };
120
- KemetRadios.styles = [stylesRadios];
121
- __decorate([
122
- property({ type: String })
123
- ], KemetRadios.prototype, "legend", void 0);
124
- __decorate([
125
- property({ type: String, reflect: true })
126
- ], KemetRadios.prototype, "axis", void 0);
127
- __decorate([
128
- property({ type: String })
129
- ], KemetRadios.prototype, "value", void 0);
130
- __decorate([
131
- property({ type: String })
132
- ], KemetRadios.prototype, "name", void 0);
133
- __decorate([
134
- property({ type: String, reflect: true })
135
- ], KemetRadios.prototype, "status", void 0);
136
- __decorate([
137
- property({ type: String })
138
- ], KemetRadios.prototype, "message", void 0);
139
- __decorate([
140
- property({ type: Boolean })
141
- ], KemetRadios.prototype, "required", void 0);
142
- __decorate([
143
- state()
144
- ], KemetRadios.prototype, "radios", void 0);
145
- KemetRadios = __decorate([
146
- customElement('kemet-radios')
147
- ], KemetRadios);
148
- export default KemetRadios;
149
- //# sourceMappingURL=kemet-radios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { TypeAxis, TypeStatus } from './types';\n\nimport type KemetRadio from './kemet-radio';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [stylesRadios];\n\n @property({ type: String })\n legend: string = '';\n\n @property({ type: String, reflect: true })\n axis: TypeAxis = 'horizontal';\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n name: string = 'radios';\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: String })\n message: string;\n\n @property({ type: Boolean })\n required: boolean;\n\n @state()\n radios: NodeListOf<KemetRadio>;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n this.radios = this.querySelectorAll('kemet-radio');\n this.setAttribute('role', 'radiogroup');\n }\n\n render() {\n return html`\n <fieldset part=\"fieldset\">\n ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n <slot @click=${(event: MouseEvent) => this.handleClick(event)} @keydown=${(event: KeyboardEvent) => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n </fieldset>\n ${this.makeMessage()}\n `;\n }\n\n handleClick(event: MouseEvent) {\n const target = event.target as KemetRadio;\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = radio === target ? 0 : -1;\n radio.setAttribute('aria-checked', 'false');\n });\n\n if (!target.disabled) {\n target.checked = true;\n target.setAttribute('aria-checked', 'true');\n this.value = target.value;\n this.status = 'standard';\n\n emitEvent(this, 'kemet-radios-change', target);\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const radios = Array.from(this.radios);\n const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n const forwardKeys = ['ArrowRight', 'ArrowDown'];\n const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n const checkedIndex: number | KemetRadio = radios.findIndex((radio: KemetRadio) => radio.checked) ?? radios[0];\n\n let index: number;\n\n if (typeof checkedIndex === 'number') {\n index = checkedIndex + shift;\n } else {\n index = shift;\n }\n\n if (arrowKeys.includes(event.key)) {\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.radios.forEach((radio) => {\n radio.checked = false;\n radio.tabIndex = -1;\n });\n\n this.radios[index].focus();\n this.radios[index].checked = true;\n this.radios[index].tabIndex = 0;\n }\n }\n\n handleSlotChange() {\n const radios = Array.from(this.radios);\n const checkedRadio = radios.find((radio: KemetRadio) => radio.checked) as KemetRadio;\n\n this.radios.forEach((radio: KemetRadio) => {\n radio.tabIndex = -1;\n radio.input.tabIndex = -1;\n });\n\n if (checkedRadio) {\n checkedRadio.tabIndex = 0;\n }\n }\n\n makeMessage() {\n if (this.status === 'error' || this.status === 'warning') {\n return html`<span part=\"message\">${this.message}</span>`;\n }\n\n return null;\n }\n\n checkValidity() {\n if (this.required) {\n return !!this.value;\n }\n\n return true;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-radios': KemetRadios\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- export declare const stylesRadio: import("lit").CSSResult;
2
- export declare const stylesRadios: import("lit").CSSResult;
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE7B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRadio = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n :host {\n --kemet-radio-size: 18px;\n --kemet-radio-border: 1px solid rgb(var(--kemet-color-foreground));\n --kemet-radio-dot-color: rgb(var(--kemet-color-primary));\n --kemet-radio-dot-border: 1px solid rgb(var(--kemet-color-primary));\n --kemet-radio-dot-border-width: 3px;\n --kemet-radio-dot-ring-color: rgb(var(--kemet-color-white));\n --kemet-radio-dot-color-filled: rgb(var(--kemet-color-white));\n --kemet-radio-dot-border-width: 4px;\n --kemet-radio-dot-border-color: rgb(var(--kemet-color-primary));\n\n display: inline-block;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n }\n\n label {\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n margin-right: 0.5rem;\n }\n\n input {\n cursor: pointer;\n margin: 0;\n padding: 0;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n position: absolute;\n opacity: 0;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n padding: 0;\n border-radius: var(--kemet-border-radius-circle);\n background: none;\n border: var(--kemet-radio-border);\n }\n\n [part='dot'] {\n display: inline-flex;\n border-radius: var(--kemet-border-radius-circle);\n width: var(--kemet-radio-size);\n height: var(--kemet-radio-size);\n background: var(--kemet-radio-dot-color);\n border: var(--kemet-radio-dot-border);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-ring-color);\n }\n\n :host([filled]) [part='dot'] {\n background: var(--kemet-radio-dot-color-filled);\n box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width) var(--kemet-radio-dot-border-color);\n }\n`;\n\nexport const stylesRadios = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n :host {\n display: block;\n }\n\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: flex;\n gap: 0.5rem;\n }\n\n legend {\n margin-bottom: 1rem;\n }\n\n :host([axis='vertical']) fieldset {\n flex-direction: column;\n }\n\n [part='message'] {\n display: block;\n margin-top: 0.5rem;\n }\n\n :host([status='error']) [part='message'] {\n color: rgb(var(--kemet-color-error));\n }\n\n :host([status='warning']) [part='message'] {\n color: rgb(var(--kemet-color-error));\n }\n`;\n"]}
@@ -1,20 +0,0 @@
1
- export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
2
- export declare type TypeAxis = 'horizontal' | 'vertical';
3
- export interface KemetRadioInterface extends HTMLElement {
4
- label?: string;
5
- checked?: boolean;
6
- name?: string;
7
- value?: string;
8
- disabled?: boolean;
9
- focused?: boolean;
10
- filled?: boolean;
11
- }
12
- export interface KemetRadiosInterface extends HTMLElement {
13
- legend?: string;
14
- axis?: string;
15
- value?: string;
16
- name?: string;
17
- status?: TypeStatus;
18
- message?: string;
19
- required?: boolean;
20
- }
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-radio/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\nexport type TypeAxis = 'horizontal' | 'vertical';\n\nexport interface KemetRadioInterface extends HTMLElement {\n label?: string,\n checked?: boolean,\n name?: string,\n value?: string,\n disabled?: boolean,\n focused?: boolean,\n filled?: boolean,\n}\n\nexport interface KemetRadiosInterface extends HTMLElement {\n legend?: string,\n axis?: string,\n value?: string,\n name?: string,\n status?: TypeStatus,\n message?: string,\n required?: boolean,\n}\n"]}
@@ -1,10 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/web-components';
2
- import '../kemet-rotator';
3
- import '../../kemet-tabs/kemet-tabs';
4
- import '../../kemet-tabs/kemet-tab';
5
- import '../../kemet-tabs/kemet-tab-panel';
6
- declare const meta: Meta;
7
- export default meta;
8
- declare type Story = StoryObj;
9
- export declare const Standard: Story;
10
- export declare const Flip: Story;
@@ -1,34 +0,0 @@
1
- import { html } from 'lit';
2
- import { ifDefined } from 'lit/directives/if-defined.js';
3
- import '../kemet-rotator';
4
- import '../../kemet-tabs/kemet-tabs';
5
- import '../../kemet-tabs/kemet-tab';
6
- import '../../kemet-tabs/kemet-tab-panel';
7
- const meta = {
8
- title: 'Components / Rotator',
9
- component: 'kemet-rotator',
10
- args: {
11
- rotationSpeed: 3,
12
- messages: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Praesent ornare porta nulla.', 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.']
13
- },
14
- argTypes: {
15
- effect: {
16
- control: { type: 'radio' },
17
- options: ['fade', 'flip'],
18
- },
19
- }
20
- };
21
- export default meta;
22
- const Template = (args) => html `
23
- <kemet-rotator effect="${ifDefined(args.effect)}" .rotation-speed=${args.rotationSpeed} .messages="${args.messages}"></kemet-rotator>
24
- `;
25
- export const Standard = {
26
- render: args => Template(args),
27
- };
28
- export const Flip = {
29
- render: args => Template(args),
30
- args: {
31
- effect: 'flip',
32
- },
33
- };
34
- //# sourceMappingURL=stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,CAAC,0DAA0D,EAAE,8BAA8B,EAAE,yEAAyE,CAAC;KAClL;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC1B;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;2BACJ,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,qBAAqB,IAAI,CAAC,aAAa,eAAe,IAAI,CAAC,QAAQ;CACnH,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-rotator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Rotator',\n component: 'kemet-rotator',\n args: {\n rotationSpeed: 3,\n messages: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Praesent ornare porta nulla.', 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.']\n },\n argTypes: {\n effect: {\n control: { type: 'radio' },\n options: ['fade', 'flip'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n <kemet-rotator effect=\"${ifDefined(args.effect)}\" .rotation-speed=${args.rotationSpeed} .messages=\"${args.messages}\"></kemet-rotator>\n`;\n\nexport const Standard: Story = {\n render: args => Template(args),\n};\n\nexport const Flip: Story = {\n render: args => Template(args),\n args: {\n effect: 'flip',\n },\n};\n"]}
@@ -1,40 +0,0 @@
1
- import { LitElement } from 'lit';
2
- import { TypeEffect } from './types';
3
- /**
4
- * @since 1.0.0
5
- * @status stable
6
- *
7
- * @tagname kemet-rotator
8
- * @summary A component that rotates through an array of text.
9
- *
10
- * @prop {number} activeSlide - The index number for the current slide.
11
- * @prop {string} width - The width of the rotator block.
12
- * @prop {string} height - The height of the rotator block.
13
- * @prop {array} messages - Text in the rotator. Supports HTML.
14
- * @prop {string} effect - The transition effect type.
15
- * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
16
- *
17
- * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.
18
- *
19
- */
20
- export default class KemetRotator extends LitElement {
21
- static styles: import("lit").CSSResult[];
22
- activeSlide: number;
23
- width: string;
24
- height: string;
25
- messages: string[];
26
- effect: TypeEffect;
27
- rotationSpeed: number;
28
- prevSlide: number | null;
29
- firstUpdated(): void;
30
- updated(changed: Map<string, never>): void;
31
- render(): import("lit-html").TemplateResult<1>;
32
- makeMessages(): import("lit-html").TemplateResult<1>[];
33
- setDimensions(): void;
34
- nextSlide(): void;
35
- }
36
- declare global {
37
- interface HTMLElementTagNameMap {
38
- 'kemet-rotator': KemetRotator;
39
- }
40
- }