@ogds/elements 1.0.0-alpha.6

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 (330) hide show
  1. package/.storybook/UswdsTheme.js +11 -0
  2. package/.storybook/blocks/SiteNote.jsx +5 -0
  3. package/.storybook/main.js +38 -0
  4. package/.storybook/manager.js +6 -0
  5. package/.storybook/preview.js +37 -0
  6. package/.storybook/test-runner.js +23 -0
  7. package/README.md +201 -0
  8. package/build/css/breakpoints.css +15 -0
  9. package/build/css/colors.css +490 -0
  10. package/build/css/spacing.css +16 -0
  11. package/build/scss/_breakpoints.scss +12 -0
  12. package/build/scss/_colors.scss +487 -0
  13. package/build/scss/_spacing.scss +13 -0
  14. package/dist/components/frameworks/react/OgdsAccordion.d.ts +69 -0
  15. package/dist/components/frameworks/react/OgdsAccordion.js +22 -0
  16. package/dist/components/frameworks/react/OgdsAccordionToggle.d.ts +60 -0
  17. package/dist/components/frameworks/react/OgdsAccordionToggle.js +23 -0
  18. package/dist/components/frameworks/react/UsaBanner.d.ts +82 -0
  19. package/dist/components/frameworks/react/UsaBanner.js +25 -0
  20. package/dist/components/frameworks/react/UsaLink.d.ts +60 -0
  21. package/dist/components/frameworks/react/UsaLink.js +21 -0
  22. package/dist/components/frameworks/react/index.d.ts +4 -0
  23. package/dist/components/frameworks/react/index.js +4 -0
  24. package/dist/components/frameworks/react/react-utils.js +34 -0
  25. package/dist/components/index.cjs +1 -0
  26. package/dist/components/index.cjs.map +1 -0
  27. package/dist/components/index.d.ts +3 -0
  28. package/dist/components/index.js +6 -0
  29. package/dist/components/index.js.map +1 -0
  30. package/dist/components/usa-banner/index.d.ts +82 -0
  31. package/dist/components/usa-banner/usa-banner.spec.d.ts +0 -0
  32. package/dist/components/usa-banner/usa-banner.stories.d.ts +95 -0
  33. package/dist/components/usa-banner.cjs +95 -0
  34. package/dist/components/usa-banner.cjs.map +1 -0
  35. package/dist/components/usa-banner.js +189 -0
  36. package/dist/components/usa-banner.js.map +1 -0
  37. package/dist/components/usa-header/index.d.ts +6 -0
  38. package/dist/components/usa-link/index.d.ts +30 -0
  39. package/dist/components/usa-link/usa-link.spec.d.ts +0 -0
  40. package/dist/components/usa-link.cjs +5 -0
  41. package/dist/components/usa-link.cjs.map +1 -0
  42. package/dist/components/usa-link.js +32 -0
  43. package/dist/components/usa-link.js.map +1 -0
  44. package/dist/core/OgdsElement.d.ts +3 -0
  45. package/dist/index-7kIMQwBw.cjs +1 -0
  46. package/dist/index-7kIMQwBw.cjs.map +1 -0
  47. package/dist/index-BrHk1-6T.js +10 -0
  48. package/dist/index-BrHk1-6T.js.map +1 -0
  49. package/dist/types/custom-element-jsx.d.ts +175 -0
  50. package/dist/types/custom-element-solidjs.d.ts +185 -0
  51. package/dist/types/custom-element-svelte.d.ts +157 -0
  52. package/dist/types/custom-element-vuejs.d.ts +127 -0
  53. package/dist/utils/index.d.ts +1 -0
  54. package/dist/utils/index.test.d.ts +1 -0
  55. package/package.json +119 -0
  56. package/src/components/index.ts +5 -0
  57. package/src/components/ogds-accordion/.claude/settings.local.json +7 -0
  58. package/src/components/ogds-accordion/docs.mdx +90 -0
  59. package/src/components/ogds-accordion/index.ts +132 -0
  60. package/src/components/ogds-accordion/ogds-accordion.css +99 -0
  61. package/src/components/ogds-accordion/ogds-accordion.spec.ts +175 -0
  62. package/src/components/ogds-accordion/ogds-accordion.stories.ts +77 -0
  63. package/src/components/ogds-accordion-toggle/index.ts +80 -0
  64. package/src/components/usa-banner/docs.mdx +108 -0
  65. package/src/components/usa-banner/index.ts +290 -0
  66. package/src/components/usa-banner/usa-banner.css +511 -0
  67. package/src/components/usa-banner/usa-banner.spec.ts +76 -0
  68. package/src/components/usa-banner/usa-banner.stories.ts +136 -0
  69. package/src/components/usa-header/index.ts +50 -0
  70. package/src/components/usa-header/usa-header.css +1 -0
  71. package/src/components/usa-link/index.ts +66 -0
  72. package/src/components/usa-link/usa-link.css +24 -0
  73. package/src/components/usa-link/usa-link.spec.ts +50 -0
  74. package/src/core/colors.css +8 -0
  75. package/src/core/fonts.css +213 -0
  76. package/src/core/index.css +2 -0
  77. package/src/core/token-styles.ts +26 -0
  78. package/src/declaration.d.ts +75 -0
  79. package/src/shared/icons/accessibility_new.svg +1 -0
  80. package/src/shared/icons/accessible_forward.svg +1 -0
  81. package/src/shared/icons/account_balance.svg +1 -0
  82. package/src/shared/icons/account_box.svg +1 -0
  83. package/src/shared/icons/account_circle.svg +1 -0
  84. package/src/shared/icons/add.svg +1 -0
  85. package/src/shared/icons/add_circle.svg +1 -0
  86. package/src/shared/icons/add_circle_outline.svg +1 -0
  87. package/src/shared/icons/alarm.svg +1 -0
  88. package/src/shared/icons/alternate_email.svg +1 -0
  89. package/src/shared/icons/announcement.svg +1 -0
  90. package/src/shared/icons/api.svg +1 -0
  91. package/src/shared/icons/arrow_back.svg +1 -0
  92. package/src/shared/icons/arrow_downward.svg +1 -0
  93. package/src/shared/icons/arrow_drop_down.svg +1 -0
  94. package/src/shared/icons/arrow_drop_up.svg +1 -0
  95. package/src/shared/icons/arrow_forward.svg +1 -0
  96. package/src/shared/icons/arrow_upward.svg +1 -0
  97. package/src/shared/icons/assessment.svg +1 -0
  98. package/src/shared/icons/attach_file.svg +1 -0
  99. package/src/shared/icons/attach_money.svg +1 -0
  100. package/src/shared/icons/autorenew.svg +1 -0
  101. package/src/shared/icons/backpack.svg +1 -0
  102. package/src/shared/icons/bathtub.svg +1 -0
  103. package/src/shared/icons/bedding.svg +1 -0
  104. package/src/shared/icons/bookmark.svg +1 -0
  105. package/src/shared/icons/bug_report.svg +1 -0
  106. package/src/shared/icons/build.svg +1 -0
  107. package/src/shared/icons/calendar_today.svg +1 -0
  108. package/src/shared/icons/campaign.svg +1 -0
  109. package/src/shared/icons/camping.svg +1 -0
  110. package/src/shared/icons/cancel.svg +1 -0
  111. package/src/shared/icons/chat.svg +1 -0
  112. package/src/shared/icons/check.svg +1 -0
  113. package/src/shared/icons/check_box_outline_blank.svg +1 -0
  114. package/src/shared/icons/check_circle.svg +1 -0
  115. package/src/shared/icons/check_circle_outline.svg +1 -0
  116. package/src/shared/icons/checkroom.svg +1 -0
  117. package/src/shared/icons/chevron_left.svg +1 -0
  118. package/src/shared/icons/chevron_right.svg +1 -0
  119. package/src/shared/icons/clean_hands.svg +1 -0
  120. package/src/shared/icons/close.svg +1 -0
  121. package/src/shared/icons/closed_caption.svg +1 -0
  122. package/src/shared/icons/clothes.svg +1 -0
  123. package/src/shared/icons/cloud.svg +1 -0
  124. package/src/shared/icons/code.svg +1 -0
  125. package/src/shared/icons/comment.svg +1 -0
  126. package/src/shared/icons/connect_without_contact.svg +1 -0
  127. package/src/shared/icons/construction.svg +1 -0
  128. package/src/shared/icons/construction_worker.svg +1 -0
  129. package/src/shared/icons/contact_page.svg +1 -0
  130. package/src/shared/icons/content_copy.svg +1 -0
  131. package/src/shared/icons/coronavirus.svg +1 -0
  132. package/src/shared/icons/credit_card.svg +1 -0
  133. package/src/shared/icons/deck.svg +1 -0
  134. package/src/shared/icons/delete.svg +1 -0
  135. package/src/shared/icons/device_thermostat.svg +1 -0
  136. package/src/shared/icons/directions.svg +1 -0
  137. package/src/shared/icons/directions_bike.svg +1 -0
  138. package/src/shared/icons/directions_bus.svg +1 -0
  139. package/src/shared/icons/directions_car.svg +1 -0
  140. package/src/shared/icons/directions_walk.svg +1 -0
  141. package/src/shared/icons/do_not_disturb.svg +1 -0
  142. package/src/shared/icons/do_not_touch.svg +1 -0
  143. package/src/shared/icons/drag_handle.svg +1 -0
  144. package/src/shared/icons/eco.svg +1 -0
  145. package/src/shared/icons/edit.svg +1 -0
  146. package/src/shared/icons/electrical_services.svg +1 -0
  147. package/src/shared/icons/emoji_events.svg +1 -0
  148. package/src/shared/icons/error.svg +1 -0
  149. package/src/shared/icons/error_outline.svg +1 -0
  150. package/src/shared/icons/event.svg +1 -0
  151. package/src/shared/icons/expand_less.svg +1 -0
  152. package/src/shared/icons/expand_more.svg +1 -0
  153. package/src/shared/icons/facebook.svg +1 -0
  154. package/src/shared/icons/fast_forward.svg +1 -0
  155. package/src/shared/icons/fast_rewind.svg +1 -0
  156. package/src/shared/icons/favorite.svg +1 -0
  157. package/src/shared/icons/favorite_border.svg +1 -0
  158. package/src/shared/icons/fax.svg +1 -0
  159. package/src/shared/icons/file_download.svg +1 -0
  160. package/src/shared/icons/file_present.svg +1 -0
  161. package/src/shared/icons/file_upload.svg +1 -0
  162. package/src/shared/icons/filter_alt.svg +1 -0
  163. package/src/shared/icons/filter_list.svg +1 -0
  164. package/src/shared/icons/fingerprint.svg +1 -0
  165. package/src/shared/icons/first_page.svg +1 -0
  166. package/src/shared/icons/flag.svg +1 -0
  167. package/src/shared/icons/flickr.svg +1 -0
  168. package/src/shared/icons/flight.svg +1 -0
  169. package/src/shared/icons/flooding.svg +1 -0
  170. package/src/shared/icons/folder.svg +1 -0
  171. package/src/shared/icons/folder_open.svg +1 -0
  172. package/src/shared/icons/format_quote.svg +1 -0
  173. package/src/shared/icons/format_size.svg +1 -0
  174. package/src/shared/icons/forum.svg +1 -0
  175. package/src/shared/icons/github.svg +1 -0
  176. package/src/shared/icons/grid_view.svg +1 -0
  177. package/src/shared/icons/group_add.svg +1 -0
  178. package/src/shared/icons/groups.svg +1 -0
  179. package/src/shared/icons/hearing.svg +1 -0
  180. package/src/shared/icons/help.svg +1 -0
  181. package/src/shared/icons/help_outline.svg +1 -0
  182. package/src/shared/icons/highlight_off.svg +1 -0
  183. package/src/shared/icons/history.svg +1 -0
  184. package/src/shared/icons/home.svg +1 -0
  185. package/src/shared/icons/hospital.svg +1 -0
  186. package/src/shared/icons/hotel.svg +1 -0
  187. package/src/shared/icons/hourglass_empty.svg +1 -0
  188. package/src/shared/icons/hurricane.svg +1 -0
  189. package/src/shared/icons/identification.svg +1 -0
  190. package/src/shared/icons/image.svg +1 -0
  191. package/src/shared/icons/info.svg +1 -0
  192. package/src/shared/icons/info_outline.svg +1 -0
  193. package/src/shared/icons/insights.svg +1 -0
  194. package/src/shared/icons/instagram.svg +1 -0
  195. package/src/shared/icons/keyboard.svg +1 -0
  196. package/src/shared/icons/label.svg +1 -0
  197. package/src/shared/icons/language.svg +1 -0
  198. package/src/shared/icons/last_page.svg +1 -0
  199. package/src/shared/icons/launch.svg +1 -0
  200. package/src/shared/icons/lightbulb.svg +1 -0
  201. package/src/shared/icons/lightbulb_outline.svg +1 -0
  202. package/src/shared/icons/link.svg +1 -0
  203. package/src/shared/icons/link_off.svg +1 -0
  204. package/src/shared/icons/linkedin.svg +1 -0
  205. package/src/shared/icons/list.svg +1 -0
  206. package/src/shared/icons/local_cafe.svg +1 -0
  207. package/src/shared/icons/local_fire_department.svg +1 -0
  208. package/src/shared/icons/local_gas_station.svg +1 -0
  209. package/src/shared/icons/local_grocery_store.svg +1 -0
  210. package/src/shared/icons/local_hospital.svg +1 -0
  211. package/src/shared/icons/local_laundry_service.svg +1 -0
  212. package/src/shared/icons/local_library.svg +1 -0
  213. package/src/shared/icons/local_offer.svg +1 -0
  214. package/src/shared/icons/local_parking.svg +1 -0
  215. package/src/shared/icons/local_pharmacy.svg +1 -0
  216. package/src/shared/icons/local_police.svg +1 -0
  217. package/src/shared/icons/local_taxi.svg +1 -0
  218. package/src/shared/icons/location_city.svg +1 -0
  219. package/src/shared/icons/location_on.svg +1 -0
  220. package/src/shared/icons/lock.svg +1 -0
  221. package/src/shared/icons/lock_open.svg +1 -0
  222. package/src/shared/icons/lock_outline.svg +1 -0
  223. package/src/shared/icons/login.svg +1 -0
  224. package/src/shared/icons/logout.svg +1 -0
  225. package/src/shared/icons/loop.svg +1 -0
  226. package/src/shared/icons/mail.svg +1 -0
  227. package/src/shared/icons/mail_outline.svg +1 -0
  228. package/src/shared/icons/map.svg +1 -0
  229. package/src/shared/icons/masks.svg +1 -0
  230. package/src/shared/icons/medical_services.svg +1 -0
  231. package/src/shared/icons/menu.svg +1 -0
  232. package/src/shared/icons/military_tech.svg +1 -0
  233. package/src/shared/icons/more_horiz.svg +1 -0
  234. package/src/shared/icons/more_vert.svg +1 -0
  235. package/src/shared/icons/my_location.svg +1 -0
  236. package/src/shared/icons/navigate_before.svg +1 -0
  237. package/src/shared/icons/navigate_far_before.svg +1 -0
  238. package/src/shared/icons/navigate_far_next.svg +1 -0
  239. package/src/shared/icons/navigate_next.svg +1 -0
  240. package/src/shared/icons/near_me.svg +1 -0
  241. package/src/shared/icons/notifications.svg +1 -0
  242. package/src/shared/icons/notifications_active.svg +1 -0
  243. package/src/shared/icons/notifications_none.svg +1 -0
  244. package/src/shared/icons/notifications_off.svg +1 -0
  245. package/src/shared/icons/park.svg +1 -0
  246. package/src/shared/icons/people.svg +1 -0
  247. package/src/shared/icons/person.svg +1 -0
  248. package/src/shared/icons/pets.svg +1 -0
  249. package/src/shared/icons/phone.svg +1 -0
  250. package/src/shared/icons/photo_camera.svg +1 -0
  251. package/src/shared/icons/print.svg +1 -0
  252. package/src/shared/icons/priority_high.svg +1 -0
  253. package/src/shared/icons/public.svg +1 -0
  254. package/src/shared/icons/push_pin.svg +1 -0
  255. package/src/shared/icons/radio_button_unchecked.svg +1 -0
  256. package/src/shared/icons/rain.svg +1 -0
  257. package/src/shared/icons/reduce_capacity.svg +1 -0
  258. package/src/shared/icons/remove.svg +1 -0
  259. package/src/shared/icons/remove_circle.svg +1 -0
  260. package/src/shared/icons/report.svg +1 -0
  261. package/src/shared/icons/restaurant.svg +1 -0
  262. package/src/shared/icons/rss_feed.svg +1 -0
  263. package/src/shared/icons/safety_divider.svg +1 -0
  264. package/src/shared/icons/sanitizer.svg +1 -0
  265. package/src/shared/icons/save_alt.svg +1 -0
  266. package/src/shared/icons/schedule.svg +1 -0
  267. package/src/shared/icons/school.svg +1 -0
  268. package/src/shared/icons/science.svg +1 -0
  269. package/src/shared/icons/search.svg +1 -0
  270. package/src/shared/icons/security.svg +1 -0
  271. package/src/shared/icons/send.svg +1 -0
  272. package/src/shared/icons/sentiment_dissatisfied.svg +1 -0
  273. package/src/shared/icons/sentiment_neutral.svg +1 -0
  274. package/src/shared/icons/sentiment_satisfied.svg +1 -0
  275. package/src/shared/icons/sentiment_satisfied_alt.svg +1 -0
  276. package/src/shared/icons/sentiment_very_dissatisfied.svg +1 -0
  277. package/src/shared/icons/settings.svg +1 -0
  278. package/src/shared/icons/severe_weather.svg +1 -0
  279. package/src/shared/icons/share.svg +1 -0
  280. package/src/shared/icons/shield.svg +1 -0
  281. package/src/shared/icons/shopping_basket.svg +1 -0
  282. package/src/shared/icons/snow.svg +1 -0
  283. package/src/shared/icons/soap.svg +1 -0
  284. package/src/shared/icons/social_distance.svg +1 -0
  285. package/src/shared/icons/sort_arrow.svg +1 -0
  286. package/src/shared/icons/spellcheck.svg +1 -0
  287. package/src/shared/icons/star.svg +1 -0
  288. package/src/shared/icons/star_half.svg +1 -0
  289. package/src/shared/icons/star_outline.svg +1 -0
  290. package/src/shared/icons/store.svg +1 -0
  291. package/src/shared/icons/support.svg +1 -0
  292. package/src/shared/icons/support_agent.svg +1 -0
  293. package/src/shared/icons/text_fields.svg +1 -0
  294. package/src/shared/icons/thumb_down_alt.svg +1 -0
  295. package/src/shared/icons/thumb_up_alt.svg +1 -0
  296. package/src/shared/icons/timer.svg +1 -0
  297. package/src/shared/icons/toggle_off.svg +1 -0
  298. package/src/shared/icons/toggle_on.svg +1 -0
  299. package/src/shared/icons/topic.svg +1 -0
  300. package/src/shared/icons/tornado.svg +1 -0
  301. package/src/shared/icons/translate.svg +1 -0
  302. package/src/shared/icons/trending_down.svg +1 -0
  303. package/src/shared/icons/trending_up.svg +1 -0
  304. package/src/shared/icons/twitter.svg +1 -0
  305. package/src/shared/icons/undo.svg +1 -0
  306. package/src/shared/icons/unfold_less.svg +1 -0
  307. package/src/shared/icons/unfold_more.svg +1 -0
  308. package/src/shared/icons/update.svg +1 -0
  309. package/src/shared/icons/upload_file.svg +1 -0
  310. package/src/shared/icons/verified.svg +1 -0
  311. package/src/shared/icons/verified_user.svg +1 -0
  312. package/src/shared/icons/visibility.svg +1 -0
  313. package/src/shared/icons/visibility_off.svg +1 -0
  314. package/src/shared/icons/volume_off.svg +1 -0
  315. package/src/shared/icons/warning.svg +1 -0
  316. package/src/shared/icons/wash.svg +1 -0
  317. package/src/shared/icons/wifi.svg +1 -0
  318. package/src/shared/icons/work.svg +1 -0
  319. package/src/shared/icons/x.svg +1 -0
  320. package/src/shared/icons/youtube.svg +1 -0
  321. package/src/shared/icons/zoom_in.svg +1 -0
  322. package/src/shared/icons/zoom_out.svg +1 -0
  323. package/src/shared/icons/zoom_out_map.svg +1 -0
  324. package/src/utils/index.test.ts +34 -0
  325. package/src/utils/index.ts +8 -0
  326. package/src/vite-env.d.ts +17 -0
  327. package/storybook/contributing.mdx +115 -0
  328. package/storybook/framework-guidance.mdx +96 -0
  329. package/storybook/index.css +70 -0
  330. package/storybook/readme.mdx +6 -0
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="19" r="2"/><path d="M10 3h4v12h-4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M17.51 7A5.62 5.62 0 0 0 7 5.51a4.5 4.5 0 0 0 .49 9h9.75A3.74 3.74 0 0 0 17.51 7ZM4.076 20.774 6.08 15.77l1.857.743-2.003 5.004zm4.998-.002 2.003-5.004 1.856.743-2.002 5.004zm4.998.008 2.002-5.004 1.857.743-2.002 5.004z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm4.78 3.58A6.95 6.95 0 0 0 18 7c-.67 0-1.31.1-1.92.28.58.55.92 1.32.92 2.15V10h5v-.57c0-.81-.48-1.53-1.22-1.85zM6 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.92 1.28C7.31 7.1 6.67 7 6 7c-.99 0-1.93.21-2.78.58A2.01 2.01 0 0 0 2 9.43V10h5v-.57c0-.83.34-1.6.92-2.15zM10 4c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm6 6H8v-.57c0-.81.48-1.53 1.22-1.85a6.95 6.95 0 0 1 5.56 0A2.01 2.01 0 0 1 16 9.43V10zm-1 6c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm6 6h-8v-.57c0-.81.48-1.53 1.22-1.85a6.95 6.95 0 0 1 5.56 0A2.01 2.01 0 0 1 21 21.43V22zM5 16c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm6 6H3v-.57c0-.81.48-1.53 1.22-1.85a6.95 6.95 0 0 1 5.56 0A2.01 2.01 0 0 1 11 21.43V22zm1.75-9v-2h-1.5v2H9l3 3 3-3h-2.25z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 5h2v14h-2V5zm-6 7c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2.78 1.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 1 15.43V16h8v-.57c0-.81-.48-1.53-1.22-1.85zM19 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2.78 1.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 15 15.43V16h8v-.57c0-.81-.48-1.53-1.22-1.85z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 6.5C15.5 5.66 17 4 17 4s1.5 1.66 1.5 2.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5zm4 8.5a2.5 2.5 0 0 0 2.5-2.5c0-1.67-2.5-4.5-2.5-4.5S17 10.83 17 12.5a2.5 2.5 0 0 0 2.5 2.5zM13 14h-2v-2H9v2H7v2h2v2h2v-2h2v-2zm3-2v10H4V12c0-2.97 2.16-5.43 5-5.91V4H7V2h6c1.13 0 2.15.39 2.99 1.01l-1.43 1.43C14.1 4.17 13.57 4 13 4h-2v2.09c2.84.48 5 2.94 5 5.91z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67 2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3 1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.8 18.4 14 10.67V6.5l1.35-1.69c.26-.33.03-.81-.39-.81H9.04c-.42 0-.65.48-.39.81L10 6.5v4.17L4.2 18.4c-.49.66-.02 1.6.8 1.6h14c.82 0 1.29-.94.8-1.6z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-3.5c.73 0 1.39.19 1.97.53.12-.14.86-.98 1.01-1.14A5.39 5.39 0 0 0 12 15c-1.11 0-2.13.33-2.99.88.97 1.09.01.02 1.01 1.14.59-.33 1.25-.52 1.98-.52z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 15.5h6v1H9v-1z"/><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-4c-.73 0-1.38-.18-1.96-.52-.12.14-.86.98-1.01 1.15a5.49 5.49 0 0 0 5.95-.01c-.97-1.09-.01-.02-1.01-1.15-.59.35-1.24.53-1.97.53z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-2.5c2.33 0 4.32-1.45 5.12-3.5h-1.67c-.69 1.19-1.97 2-3.45 2s-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15.5" cy="9.5" r="1.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><g data-name="Severe Weather"><path d="M4.05 17.73 12 4l8 13.85A5 5 0 0 0 19.2 8a7.49 7.49 0 0 0-14-2 6 6 0 0 0-1.15 11.73Z"/><path d="M12 7 3.34 22h17.32Zm0 13.4a1 1 0 1 1 1-1 1 1 0 0 1-1 1ZM11 17v-4.6h2V17Z"/></g></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m17.21 9-4.38-6.56a.993.993 0 0 0-.83-.42c-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="m20.76 14.07-.66-1.34-2.88 1.42L13.5 12l3.72-2.15 2.88 1.42.66-1.34-1.97-.98 2.25-1.3-.75-1.3-2.25 1.3.14-2.2-1.5-.1-.21 3.2-3.72 2.15V6.4l2.67-1.78-.84-1.24-1.83 1.22V2h-1.5v2.6L9.42 3.38l-.84 1.24 2.67 1.78v4.3L7.53 8.55l-.21-3.2-1.5.1.14 2.2-2.25-1.3-.75 1.3 2.25 1.3-1.97.98.66 1.34 2.88-1.42L10.5 12l-3.72 2.15-2.88-1.42-.66 1.34 1.97.98-2.25 1.3.75 1.3 2.25-1.3-.14 2.2 1.5.1.21-3.2 3.72-2.15v4.3l-2.67 1.78.84 1.24 1.83-1.22V22h1.5v-2.6l1.83 1.22.84-1.24-2.67-1.78v-4.3l3.72 2.15.21 3.2 1.5-.1-.14-2.2 2.25 1.3.75-1.3-2.25-1.3 1.97-.98z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m9.12 5-7.18 6.79c-.6.56-.94 1.35-.94 2.18V20c0 1.66 1.34 3 3 3h13.75a1.25 1.25 0 0 0 0-2.5H12v-1h7.75a1.25 1.25 0 0 0 0-2.5H12v-1h8.75a1.25 1.25 0 0 0 0-2.5H12v-1h6.75a1.25 1.25 0 0 0 0-2.5H8.86c.64-1.11 1.48-2.58 1.49-2.61a1.065 1.065 0 0 0-.12-1.23C10.22 6.12 9.12 5 9.12 5zM14 6.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75m0-1.5c-1.24 0-2.25 1.01-2.25 2.25S12.76 9.25 14 9.25 16.25 8.24 16.25 7 15.24 4.75 14 4.75zm5.75.75c.28 0 .5.22.5.5s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5m0-1.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM16.5 1c-.83 0-1.5.67-1.5 1.5S15.67 4 16.5 4 18 3.33 18 2.5 17.33 1 16.5 1z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm4.78 3.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 2 10.43V11h8v-.57c0-.81-.48-1.53-1.22-1.85zM18 7c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2.78 1.58a6.95 6.95 0 0 0-5.56 0A2.01 2.01 0 0 0 14 10.43V11h8v-.57c0-.81-.48-1.53-1.22-1.85zM22 17l-4-4v3H6v-3l-4 4 4 4v-3h12v3l4-4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.17 15 13 17.17V6.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 11 6.83v10.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.45 16h2.09L9.43 3H7.57L2.46 16h2.09l1.12-3h5.64l1.14 3zm-6.02-5L8.5 5.48 10.57 11H6.43zm15.16.59-8.09 8.09L9.83 16l-1.41 1.41 5.09 5.09L23 13l-1.41-1.41z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm7.46 7.12-2.78 1.15a4.982 4.982 0 0 0-2.95-2.94l1.15-2.78c2.1.8 3.77 2.47 4.58 4.57zM12 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zM9.13 4.54l1.17 2.78a5 5 0 0 0-2.98 2.97L4.54 9.13a7.984 7.984 0 0 1 4.59-4.59zM4.54 14.87l2.78-1.15a4.968 4.968 0 0 0 2.97 2.96l-1.17 2.78a7.996 7.996 0 0 1-4.58-4.59zm10.34 4.59-1.15-2.78a4.978 4.978 0 0 0 2.95-2.97l2.78 1.17a8.007 8.007 0 0 1-4.58 4.58z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62z"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/><path d="M18 11.03A6.04 6.04 0 0 0 12.05 6c-3.03 0-6.29 2.51-6.03 6.45a8.075 8.075 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 4h-2c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h2V4zM2.17 11.12c-.11.25-.17.52-.17.8V13c0 1.1.9 2 2 2h5.5l-.92 4.65c-.05.22-.02.46.08.66.23.45.52.86.88 1.22L10 22l6.41-6.41c.38-.38.59-.89.59-1.42V6.34C17 5.05 15.95 4 14.66 4h-8.1c-.71 0-1.36.37-1.72.97l-2.67 6.15z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 20h2c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1H2v11zm19.83-7.12c.11-.25.17-.52.17-.8V11c0-1.1-.9-2-2-2h-5.5l.92-4.65c.05-.22.02-.46-.08-.66a4.8 4.8 0 0 0-.88-1.22L14 2 7.59 8.41C7.21 8.79 7 9.3 7 9.83v7.84A2.34 2.34 0 0 0 9.34 20h8.11c.7 0 1.36-.37 1.72-.97l2.66-6.15z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4a9 9 0 0 0-9 9c0 4.97 4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM13 14h-2V8h2v6z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 10H6v-2h8v2zm4-4H6v-2h12v2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M13 16v-2h2.77c.08-.32.16-.65.23-1 1.19-5.95 4-6 4-10H4a10.35 10.35 0 0 0 .48 3H8v2H5.26c.32.69.68 1.36 1 2H10v2H7.51A13.86 13.86 0 0 1 9 15a6.24 6.24 0 0 1-1 6l1 1c2.82-1.54 4.85-3.09 6.1-6Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m16 18 2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m16 6 2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.912 7.925v.527A11.562 11.562 0 0 1 8.265 20.098 11.443 11.443 0 0 1 2 18.265c.328.017.657.017.985 0a8.132 8.132 0 0 0 5.093-1.698 4.092 4.092 0 0 1-3.786-2.852c.255.062.518.091.781.085.36-.002.72-.047 1.07-.136a4.109 4.109 0 0 1-3.21-4.024c.566.32 1.202.494 1.851.51a4.126 4.126 0 0 1-1.34-5.518 11.613 11.613 0 0 0 8.488 4.295 4.397 4.397 0 0 1-.119-.934 4.092 4.092 0 0 1 4.092-4.092 4.04 4.04 0 0 1 3.005 1.29 7.929 7.929 0 0 0 2.53-1c-.3.953-.94 1.763-1.8 2.274A7.725 7.725 0 0 0 22 5.803a8.489 8.489 0 0 1-2.088 2.122Z" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.5 8A2.5 2.5 0 0 0 21 5.5C21 3.83 18.5 1 18.5 1S16 3.83 16 5.5A2.5 2.5 0 0 0 18.5 8zm-5 1c.83 0 1.5-.67 1.5-1.5 0-.84-1.5-2.5-1.5-2.5S12 6.66 12 7.5c0 .83.67 1.5 1.5 1.5zM9.12 5l-7.18 6.79c-.6.56-.94 1.35-.94 2.18V20c0 1.66 1.34 3 3 3h13.75a1.25 1.25 0 0 0 0-2.5H12v-1h7.75a1.25 1.25 0 0 0 0-2.5H12v-1h8.75a1.25 1.25 0 0 0 0-2.5H12v-1h6.75a1.25 1.25 0 0 0 0-2.5H8.86c.64-1.11 1.48-2.58 1.49-2.61a1.065 1.065 0 0 0-.12-1.23C10.22 6.12 9.12 5 9.12 5z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m1 9 2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8 3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4 2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.522 10.775 19.48 4h-1.412l-5.172 5.883L8.765 4H4l6.247 8.895L4 20h1.412l5.461-6.212L15.236 20H20l-6.478-9.225Zm-1.933 2.199-.633-.886L5.92 5.04h2.168l4.064 5.688.633.886 5.283 7.394H15.9l-4.311-6.034Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.816 5.389a2.469 2.469 0 0 1 1.766 1.746c.291 1.598.43 3.22.417 4.843a25.867 25.867 0 0 1-.417 4.794 2.468 2.468 0 0 1-1.766 1.795c-2.593.318-5.204.46-7.816.429a58.411 58.411 0 0 1-7.816-.429 2.469 2.469 0 0 1-1.766-1.746 25.879 25.879 0 0 1-.417-4.843 25.85 25.85 0 0 1 .417-4.793 2.468 2.468 0 0 1 1.766-1.796c2.594-.3 5.205-.427 7.816-.379a58.413 58.413 0 0 1 7.816.379ZM9.95 9.046v5.864l5.233-2.932L9.95 9.046Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m15 3 2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3v6zm6 12-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6h6zm12-6-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z"/></svg>
@@ -0,0 +1,34 @@
1
+ import { describe, it, expect, vi, beforeEach } from "vitest";
2
+ import { defineCustomElement } from "./index";
3
+
4
+ describe("defineCustomElement", () => {
5
+ let customElementsDefineSpy: ReturnType<typeof vi.spyOn>;
6
+ let customElementsGetSpy: ReturnType<typeof vi.spyOn>;
7
+ let Component: CustomElementConstructor;
8
+ let tagName: string;
9
+
10
+ beforeEach(() => {
11
+ Component = class extends HTMLElement {};
12
+ tagName = "usa-test-element";
13
+
14
+ customElementsDefineSpy = vi.spyOn(customElements, "define");
15
+ customElementsGetSpy = vi.spyOn(customElements, "get");
16
+ });
17
+
18
+ it("should define a custom element if it does not already exist", () => {
19
+ defineCustomElement(tagName, Component);
20
+
21
+ expect(customElementsGetSpy).toHaveBeenCalledWith(tagName);
22
+ expect(customElementsDefineSpy).toHaveBeenCalledTimes(1);
23
+ expect(customElementsDefineSpy).toHaveBeenCalledWith(tagName, Component);
24
+ });
25
+
26
+ it("should not define a custom element if it already exists", () => {
27
+ defineCustomElement(tagName, Component);
28
+ defineCustomElement(tagName, Component);
29
+
30
+ expect(customElementsGetSpy).toHaveBeenCalledWith(tagName);
31
+ // we still expect this to be called once because of the conditional check in our function
32
+ expect(customElementsDefineSpy).toHaveBeenCalledTimes(1);
33
+ });
34
+ });
@@ -0,0 +1,8 @@
1
+ export const defineCustomElement = (
2
+ tag: string,
3
+ className: CustomElementConstructor,
4
+ ) => {
5
+ if (!customElements || customElements.get(tag)) return;
6
+
7
+ customElements.define(tag, className);
8
+ };
@@ -0,0 +1,17 @@
1
+ /// <reference types="vite/client" />
2
+
3
+ declare module "*.css?raw" {
4
+ const content: string;
5
+ export default content;
6
+ }
7
+
8
+ declare module "*.css?inline" {
9
+ const content: string;
10
+ export default content;
11
+ }
12
+
13
+ declare module '*.css' {
14
+ import { CSSResult } from 'lit';
15
+ const styles: CSSResult;
16
+ export default styles;
17
+ }
@@ -0,0 +1,115 @@
1
+ import { Meta, Markdown } from "@storybook/addon-docs/blocks";
2
+ import Contributing from "../CONTRIBUTING.md?raw";
3
+
4
+ <Meta title="Documentation/Contributing" />
5
+
6
+ <Markdown>{Contributing}</Markdown>
7
+
8
+ ## Overview
9
+
10
+ This information is for USWDS Core team members contribute to the USWDS Elements project.
11
+
12
+ ## Project setup
13
+
14
+ It is helpful to have [nvm installed](https://github.com/nvm-sh/nvm) and use the correct version of Node.js. From the project root, run the following command:
15
+
16
+ ```bash
17
+ npm install
18
+ ```
19
+
20
+ ### Installing Playwright (for E2E testing)
21
+
22
+ If you plan to run or write end-to-end tests, please see the [Playwright documentation](https://playwright.dev/docs/intro) for installation instructions and the [README.md file in the `e2e` directory](https://github.com/uswds/uswds-elements/tree/develop/e2e).
23
+
24
+ ## Development Workflow
25
+
26
+ The development workflow uses [Storybook](https://storybook.js.org/) and [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) to generate a custom elements manifest and watch for changes to the custom elements manifest. Storybook handles documentation of component usage, styling, and properties.
27
+
28
+ ### Running StorybookJS
29
+
30
+ Start the development server with Storybook and custom elements manifest watch process:
31
+
32
+ ```bash
33
+ npm run start
34
+ ```
35
+
36
+ This runs Storybook on port 8008 at `http://localhost:8008`.
37
+
38
+ ---
39
+
40
+ ### Creating stories
41
+
42
+ Stories should document the following component features:
43
+
44
+ - Variants (e.g. default, primary, secondary, etc.)
45
+ - Properties
46
+ - CSS Custom Properties
47
+
48
+ ### Story File Structure
49
+
50
+ Stories and functional tests should be created alongside components:
51
+
52
+ ```
53
+ src/components/usa-example/
54
+ ├── docs.mdx
55
+ ├── index.ts
56
+ ├── usa-example.css
57
+ ├── usa-example.spec.ts
58
+ └── usa-example.stories.ts
59
+ ```
60
+
61
+ ## Project Structure
62
+
63
+ - **`src/components/`** - Web Component implementations
64
+ - **`src/core/`** - Core utilities and base classes
65
+ - **`src/shared/`** - Static asset files like fonts and icons
66
+ - **`e2e/`** - Playwright end-to-end tests
67
+ - **`storybook/`** - Storybook documentation files
68
+ - **`.storybook/`** - Storybook configuration
69
+ - **`tokens/`** - Design token definitions (Style Dictionary)
70
+ - **`internals/`** - Internal build scripts and utilities
71
+ - **`config/`** - Config files for project tooling and testing
72
+
73
+ ## Component Development Checklist
74
+
75
+ When creating a new component:
76
+
77
+ - Create component files in `src/components/[component-name]/`
78
+ - Add JSDoc comments to component files documenting the component's API
79
+ - Write component implementation (TypeScript + Lit)
80
+ - Create component styles in an external CSS file and import it into the component
81
+ - Export component from `index.ts`
82
+ - Add component to for package exports `src/components/index.js`
83
+ - Create Storybook stories documenting all variants and props
84
+ - Write unit tests with Vitest
85
+ - Write E2E tests with Playwright (including visual regression tests)
86
+ - Build the custom elements manifest to keep it synced with JSDoc comments
87
+ - Test accessibility with Storybook's a11y addon
88
+
89
+ ---
90
+
91
+ ## Pre-commit Hooks
92
+
93
+ This project uses [Husky](https://typicode.github.io/husky/) for Git hooks. Hooks are automatically set up when you run `npm install` via the `prepare` script.
94
+
95
+ ## Publishing and Releases
96
+
97
+ The package is published as `@uswds/elements` on npm. The current version can be found in `package.json`
98
+
99
+ Component maturity levels:
100
+
101
+ - **Pre-alpha**: Experimental, API may change significantly
102
+ - **Alpha**: Core functionality stable, refinements expected
103
+ - **Beta**: Feature complete, undergoing final testing
104
+ - **Stable**: Production ready
105
+
106
+ Check the README for current component status.
107
+
108
+ ## Additional Resources
109
+
110
+ - [USWDS Design System](https://designsystem.digital.gov)
111
+ - [Web Components MDN Guide](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
112
+ - [Lit Documentation](https://lit.dev)
113
+ - [Storybook Documentation](https://storybook.js.org)
114
+ - [Playwright Documentation](https://playwright.dev)
115
+ - [E2E Testing Guide](https://github.com/uswds/uswds-elements/tree/develop/e2e) (detailed testing documentation)
@@ -0,0 +1,96 @@
1
+ import { Meta, Markdown, Source } from "@storybook/addon-docs/blocks";
2
+ import AstroExample from "../examples/with-astro/src/pages/index.astro?raw";
3
+ import ReactExample from "../examples/with-react/src/App.tsx?raw";
4
+ import SolidExample from "../examples/with-solid/src/App.tsx?raw";
5
+ import SolidTsconfigExample from "../examples/with-solid/tsconfig.app.json?raw";
6
+ import SolidDTsExample from "../examples/with-solid/src/custom-elements.d.ts?raw";
7
+ import SvelteKitExample from "../examples/with-sveltekit/src/routes/+page.svelte?raw";
8
+ import VueExample from "../examples/with-vue/src/App.vue?raw";
9
+
10
+ <Meta title="Documentation/Framework Specific Guidance" />
11
+
12
+ # Framework-specific Guidance
13
+
14
+ We've made every effort to make using USWDS Elements in your project as easy as possible. Since many projects use modern front-end libraries and frameworks, we've included an [examples directory](https://github.com/uswds/uswds-elements/tree/develop/examples) in this repository that shows how to import and use USWDS Elements with a variety of popular front-end technologies. The goal is to provide an experience that involves minimal configuration to get up and running with your framework or library of choice.
15
+
16
+ In all cases, install the project from the npm package registry.
17
+
18
+ ```bash
19
+ $ npm install @uswds/elements
20
+ ```
21
+
22
+ ## Examples
23
+
24
+ ### HTML
25
+
26
+ To use a specific element directly in an HTML page, use the code snippet below. This example also applies if you're using USWDS Elements in a CMS that has its own templating engine (e.g. Drupal, WordPress, etc.).
27
+
28
+ ```html
29
+ <!-- importing directly into an HTML page -->
30
+ <script type="module">
31
+ import { UsaBanner } from "@uswds/elements";
32
+ </script>
33
+ <usa-banner></usa-banner>
34
+ ```
35
+
36
+ ### Astro
37
+
38
+ This is a minimal example of implementation in [Astro](https://astro.build/). The process is similar to the HTML example above
39
+
40
+ <Source code={AstroExample} language="astro" />
41
+
42
+ ### React
43
+
44
+ This is a minimal example of implementation in [React](https://react.dev/). Do note that USWDS Elements includes a wrapper for React components, and the `import` path is different from the other frameworks in this document.
45
+
46
+ <Source code={ReactExample} language="jsx" />
47
+
48
+ ### SolidJS
49
+
50
+ This is a minimal example of implementation in [SolidJS](https://www.solidjs.com/).
51
+
52
+ <Source code={SolidExample} language="jsx" />
53
+
54
+ #### TypeScript support
55
+
56
+ If you're using TypeScript for your SolidJS project, add a `custom-elements.d.ts` file to `src/` directory.
57
+
58
+ <Source code={SolidDTsExample} language="ts" />
59
+
60
+ Once you do that, ensure that your `tsconfig.json` file contains`"include": ["src"]` like the example below:
61
+
62
+ <Source code={SolidTsconfigExample} language="ts" />
63
+
64
+ ### SvelteKit
65
+
66
+ This is a minimal example of implementation in [SvelteKit](https://svelte.dev/docs/kit/introduction).
67
+
68
+ <Source code={SvelteKitExample} language="svelte" />
69
+
70
+ ### Vue
71
+
72
+ This is a minimal example of implementation in [Vue](https://vuejs.org/).
73
+
74
+ <Source code={VueExample} language="vue" />
75
+
76
+ Additionally, your build tool needs to know about the custom elements so they aren't parsed at build time. This is how you do it in Vite:
77
+
78
+ ```
79
+ // vite.config.ts
80
+ import { defineConfig } from "vite";
81
+ import vue from "@vitejs/plugin-vue";
82
+
83
+ export default defineConfig({
84
+ plugins: [
85
+ vue({
86
+ template: {
87
+ compilerOptions: {
88
+ // Treat all tags starting with 'usa-' as custom elements
89
+ isCustomElement: (tag) => tag.startsWith("usa-"),
90
+ },
91
+ },
92
+ }),
93
+ ],
94
+ });
95
+
96
+ ```