├── .nvmrc ├── config ├── .prettierrc ├── vitest.config.js ├── tsconfig.json ├── stylelint.config.mjs └── custom-elements-manifest.config.js ├── examples ├── with-sveltekit │ ├── .npmrc │ ├── static │ │ └── robots.txt │ ├── src │ │ ├── lib │ │ │ └── index.ts │ │ ├── routes │ │ │ ├── +page.svelte │ │ │ └── +layout.svelte │ │ ├── app.d.ts │ │ └── app.html │ ├── README.md │ ├── vite.config.ts │ ├── .gitignore │ ├── svelte.config.js │ ├── tsconfig.json │ └── package.json ├── with-vue │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── src │ │ ├── main.ts │ │ ├── App.vue │ │ └── style.css │ ├── tsconfig.json │ ├── .gitignore │ ├── index.html │ ├── vite.config.ts │ ├── package.json │ ├── tsconfig.app.json │ ├── tsconfig.node.json │ └── public │ │ └── vite.svg ├── with-react │ ├── src │ │ ├── App.css │ │ ├── main.tsx │ │ ├── index.css │ │ └── App.tsx │ ├── README.md │ ├── tsconfig.json │ ├── vite.config.ts │ ├── .gitignore │ ├── index.html │ ├── eslint.config.js │ ├── tsconfig.node.json │ ├── tsconfig.app.json │ ├── package.json │ └── public │ │ └── vite.svg ├── with-solid │ ├── src │ │ ├── App.css │ │ ├── index.tsx │ │ ├── custom-elements.d.ts │ │ ├── index.css │ │ └── App.tsx │ ├── README.md │ ├── tsconfig.json │ ├── vite.config.ts │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── tsconfig.node.json │ ├── tsconfig.app.json │ └── public │ │ └── vite.svg └── with-astro │ ├── README.md │ ├── .vscode │ ├── extensions.json │ └── launch.json │ ├── tsconfig.json │ ├── astro.config.mjs │ ├── package.json │ ├── .gitignore │ ├── public │ └── favicon.svg │ └── src │ └── pages │ └── index.astro ├── src ├── core │ ├── index.css │ └── colors.css ├── shared │ └── icons │ │ ├── remove.svg │ │ ├── arrow_drop_down.svg │ │ ├── arrow_drop_up.svg │ │ ├── add.svg │ │ ├── flag.svg │ │ ├── home.svg │ │ ├── send.svg │ │ ├── drag_handle.svg │ │ ├── fast_forward.svg │ │ ├── file_upload.svg │ │ ├── menu.svg │ │ ├── check.svg │ │ ├── expand_less.svg │ │ ├── expand_more.svg │ │ ├── fast_rewind.svg │ │ ├── file_download.svg │ │ ├── format_quote.svg │ │ ├── format_size.svg │ │ ├── near_me.svg │ │ ├── park.svg │ │ ├── filter_list.svg │ │ ├── navigate_before.svg │ │ ├── navigate_next.svg │ │ ├── priority_high.svg │ │ ├── text_fields.svg │ │ ├── warning.svg │ │ ├── arrow_back.svg │ │ ├── arrow_forward.svg │ │ ├── arrow_upward.svg │ │ ├── bookmark.svg │ │ ├── first_page.svg │ │ ├── last_page.svg │ │ ├── shield.svg │ │ ├── arrow_downward.svg │ │ ├── school.svg │ │ ├── store.svg │ │ ├── account_balance.svg │ │ ├── delete.svg │ │ ├── trending_down.svg │ │ ├── trending_up.svg │ │ ├── list.svg │ │ ├── chevron_left.svg │ │ ├── chevron_right.svg │ │ ├── code.svg │ │ ├── remove_circle.svg │ │ ├── star.svg │ │ ├── error.svg │ │ ├── folder.svg │ │ ├── info.svg │ │ ├── local_parking.svg │ │ ├── navigate_far_before.svg │ │ ├── close.svg │ │ ├── navigate_far_next.svg │ │ ├── add_circle.svg │ │ ├── announcement.svg │ │ ├── check_box_outline_blank.svg │ │ ├── hospital.svg │ │ ├── hotel.svg │ │ ├── login.svg │ │ ├── logout.svg │ │ ├── mail.svg │ │ ├── person.svg │ │ ├── chat.svg │ │ ├── clothes.svg │ │ ├── folder_open.svg │ │ ├── local_pharmacy.svg │ │ ├── calendar_today.svg │ │ ├── flight.svg │ │ ├── image.svg │ │ ├── local_cafe.svg │ │ ├── location_on.svg │ │ ├── save_alt.svg │ │ ├── assessment.svg │ │ ├── check_circle.svg │ │ ├── comment.svg │ │ ├── forum.svg │ │ ├── security.svg │ │ ├── topic.svg │ │ ├── unfold_more.svg │ │ ├── verified_user.svg │ │ ├── backpack.svg │ │ ├── credit_card.svg │ │ ├── launch.svg │ │ ├── local_hospital.svg │ │ ├── mail_outline.svg │ │ ├── sort_arrow.svg │ │ ├── camping.svg │ │ ├── content_copy.svg │ │ ├── event.svg │ │ ├── label.svg │ │ ├── toggle_off.svg │ │ ├── toggle_on.svg │ │ ├── unfold_less.svg │ │ ├── deck.svg │ │ ├── grid_view.svg │ │ ├── radio_button_unchecked.svg │ │ ├── restaurant.svg │ │ ├── undo.svg │ │ ├── edit.svg │ │ ├── filter_alt.svg │ │ ├── print.svg │ │ ├── cloud.svg │ │ ├── hourglass_empty.svg │ │ ├── more_vert.svg │ │ ├── work.svg │ │ ├── more_horiz.svg │ │ ├── push_pin.svg │ │ ├── science.svg │ │ ├── star_half.svg │ │ ├── lightbulb.svg │ │ ├── wifi.svg │ │ ├── accessibility_new.svg │ │ ├── local_police.svg │ │ ├── spellcheck.svg │ │ ├── add_circle_outline.svg │ │ ├── build.svg │ │ ├── notifications.svg │ │ ├── timer.svg │ │ ├── upload_file.svg │ │ ├── cancel.svg │ │ ├── device_thermostat.svg │ │ ├── error_outline.svg │ │ ├── favorite.svg │ │ ├── location_city.svg │ │ ├── report.svg │ │ ├── local_library.svg │ │ ├── map.svg │ │ ├── medical_services.svg │ │ ├── check_circle_outline.svg │ │ ├── rss_feed.svg │ │ ├── photo_camera.svg │ │ ├── tornado.svg │ │ ├── eco.svg │ │ ├── facebook.svg │ │ ├── info_outline.svg │ │ ├── schedule.svg │ │ ├── star_outline.svg │ │ ├── x.svg │ │ ├── directions.svg │ │ ├── history.svg │ │ ├── military_tech.svg │ │ ├── search.svg │ │ ├── contact_page.svg │ │ ├── link.svg │ │ ├── attach_file.svg │ │ ├── loop.svg │ │ ├── severe_weather.svg │ │ ├── visibility.svg │ │ ├── zoom_out.svg │ │ ├── zoom_out_map.svg │ │ ├── directions_walk.svg │ │ ├── notifications_none.svg │ │ ├── rain.svg │ │ ├── lock.svg │ │ ├── autorenew.svg │ │ ├── account_circle.svg │ │ ├── api.svg │ │ ├── identification.svg │ │ ├── lock_open.svg │ │ ├── alarm.svg │ │ ├── highlight_off.svg │ │ ├── phone.svg │ │ ├── checkroom.svg │ │ ├── do_not_disturb.svg │ │ ├── keyboard.svg │ │ ├── emoji_events.svg │ │ ├── help_outline.svg │ │ ├── zoom_in.svg │ │ ├── local_offer.svg │ │ ├── sentiment_neutral.svg │ │ ├── verified.svg │ │ ├── account_box.svg │ │ ├── file_present.svg │ │ ├── help.svg │ │ ├── thumb_down_alt.svg │ │ ├── thumb_up_alt.svg │ │ ├── lock_outline.svg │ │ ├── my_location.svg │ │ ├── shopping_basket.svg │ │ ├── update.svg │ │ ├── closed_caption.svg │ │ ├── people.svg │ │ ├── translate.svg │ │ ├── public.svg │ │ ├── accessible_forward.svg │ │ ├── safety_divider.svg │ │ ├── group_add.svg │ │ ├── lightbulb_outline.svg │ │ ├── local_grocery_store.svg │ │ ├── link_off.svg │ │ ├── social_distance.svg │ │ ├── directions_bus.svg │ │ ├── hurricane.svg │ │ ├── local_gas_station.svg │ │ ├── sentiment_very_dissatisfied.svg │ │ ├── alternate_email.svg │ │ ├── directions_car.svg │ │ ├── electrical_services.svg │ │ ├── fax.svg │ │ ├── local_laundry_service.svg │ │ ├── sanitizer.svg │ │ ├── volume_off.svg │ │ ├── attach_money.svg │ │ ├── campaign.svg │ │ ├── favorite_border.svg │ │ ├── local_taxi.svg │ │ ├── notifications_off.svg │ │ ├── bedding.svg │ │ ├── flickr.svg │ │ ├── sentiment_satisfied.svg │ │ ├── share.svg │ │ ├── bug_report.svg │ │ ├── sentiment_dissatisfied.svg │ │ ├── local_fire_department.svg │ │ ├── notifications_active.svg │ │ ├── bathtub.svg │ │ ├── support_agent.svg │ │ ├── connect_without_contact.svg │ │ ├── construction.svg │ │ ├── sentiment_satisfied_alt.svg │ │ ├── clean_hands.svg │ │ ├── construction_worker.svg │ │ ├── youtube.svg │ │ ├── wash.svg │ │ ├── insights.svg │ │ ├── support.svg │ │ ├── linkedin.svg │ │ ├── github.svg │ │ ├── directions_bike.svg │ │ ├── hearing.svg │ │ ├── groups.svg │ │ ├── pets.svg │ │ ├── visibility_off.svg │ │ ├── snow.svg │ │ ├── twitter.svg │ │ ├── masks.svg │ │ ├── flooding.svg │ │ ├── soap.svg │ │ ├── do_not_touch.svg │ │ ├── settings.svg │ │ ├── reduce_capacity.svg │ │ └── language.svg ├── components │ ├── index.ts │ └── usa-link │ │ └── usa-link.css ├── utils │ ├── index.ts │ └── index.test.ts └── vite-env.d.ts ├── .prettierignore ├── .changeset ├── petite-dodos-call.md ├── short-oranges-rescue.md ├── good-needles-fix.md ├── pre.json ├── twenty-socks-reflect.md ├── config.json └── README.md ├── .husky └── pre-commit ├── .storybook ├── manager.js ├── blocks │ └── SiteNote.jsx ├── UswdsTheme.js ├── test-runner.js ├── preview.js └── main.js ├── storybook └── readme.mdx ├── tokens ├── color │ ├── global.json │ ├── black-transparent.json │ ├── white-transparent.json │ ├── gray-cool.json │ ├── gray-warm.json │ ├── gray.json │ ├── red.json │ ├── blue.json │ ├── cyan.json │ ├── gold.json │ ├── green.json │ ├── mint.json │ ├── indigo.json │ ├── magenta.json │ ├── orange.json │ ├── red-cool.json │ ├── red-warm.json │ ├── violet.json │ ├── yellow.json │ ├── blue-cool.json │ ├── blue-warm.json │ ├── green-cool.json │ ├── green-warm.json │ ├── mint-cool.json │ ├── indigo-cool.json │ ├── indigo-warm.json │ ├── orange-warm.json │ └── violet-warm.json └── dimension │ ├── breakpoints.json │ └── spacing.json ├── e2e ├── components │ └── usa-banner │ │ ├── usa-banner.spec.ts-snapshots │ │ ├── collapsed-components-banner--default-webkit-linux.png │ │ ├── expanded-components-banner--default-firefox-linux.png │ │ ├── expanded-components-banner--default-webkit-linux.png │ │ ├── collapsed-components-banner--default-chromium-linux.png │ │ ├── collapsed-components-banner--default-firefox-linux.png │ │ ├── expanded-components-banner--default-chromium-linux.png │ │ ├── collapsed-components-banner--default-Mobile-Chrome-linux.png │ │ ├── collapsed-components-banner--default-Mobile-Safari-linux.png │ │ ├── collapsed-components-banner--default-Tablet-Chrome-linux.png │ │ ├── collapsed-components-banner--default-Tablet-Safari-linux.png │ │ ├── expanded-components-banner--default-Mobile-Chrome-linux.png │ │ ├── expanded-components-banner--default-Mobile-Safari-linux.png │ │ ├── expanded-components-banner--default-Tablet-Chrome-linux.png │ │ └── expanded-components-banner--default-Tablet-Safari-linux.png │ │ ├── usa-banner.performance.spec.ts │ │ └── usa-banner.spec.ts └── models │ └── storybook-page.ts ├── docker-compose.yml ├── .editorconfig ├── internals ├── scripts │ ├── rmrf.js │ └── serve-storybook.js ├── token-helpers │ └── index.ts └── build-helpers │ └── index.ts ├── .github ├── workflows │ ├── formatting.yml │ ├── ui-test.yml │ └── update-playwright-snapshots.yml └── actions │ └── setup │ └── action.yml ├── .gitignore ├── CHANGELOG.md ├── Dockerfile └── eslint.config.js /.nvmrc: -------------------------------------------------------------------------------- 1 | v22.21.1 2 | -------------------------------------------------------------------------------- /config/.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/with-sveltekit/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /src/core/index.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css" layer; 2 | @import "./fonts.css" layer; 3 | -------------------------------------------------------------------------------- /examples/with-vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | build 3 | dist 4 | .changeset 5 | *.d.ts 6 | CHANGELOG.md 7 | -------------------------------------------------------------------------------- /examples/with-react/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 0 auto; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /examples/with-solid/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | margin: 0 auto; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /examples/with-sveltekit/static/robots.txt: -------------------------------------------------------------------------------- 1 | # allow crawling everything by default 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /.changeset/petite-dodos-call.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@uswds/elements": patch 3 | --- 4 | 5 | Add style tokens to package output 6 | -------------------------------------------------------------------------------- /examples/with-sveltekit/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | // place files you want to import through the `$lib` alias in this folder. 2 | -------------------------------------------------------------------------------- /examples/with-vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue 2 | 3 | This is a bare-bones example to demonstrate how to use USWDS Elements in a Vue project. 4 | -------------------------------------------------------------------------------- /examples/with-astro/README.md: -------------------------------------------------------------------------------- 1 | # Astro 2 | 3 | This is a bare-bones example to demonstrate how to use USWDS Elements in an Astro project. 4 | -------------------------------------------------------------------------------- /examples/with-react/README.md: -------------------------------------------------------------------------------- 1 | # React 2 | 3 | This is a bare-bones example to demonstrate how to use USWDS Elements in a React project. 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | npm run prettier:js:fix 4 | npm run prettier:md:fix 5 | npm run stylelint:fix 6 | npm run test:ci 7 | -------------------------------------------------------------------------------- /examples/with-astro/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /examples/with-solid/README.md: -------------------------------------------------------------------------------- 1 | # SolidJS 2 | 3 | This is a bare-bones example to demonstrate how to use USWDS Elements in a SolidJS project. 4 | -------------------------------------------------------------------------------- /src/shared/icons/remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-sveltekit/README.md: -------------------------------------------------------------------------------- 1 | # SvelteKit 2 | 3 | This is a bare-bones example to demonstrate how to use USWDS Elements in a SvelteKit project. 4 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | import { UsaLink } from "./usa-link"; 2 | import { UsaBanner } from "./usa-banner"; 3 | 4 | export { UsaLink, UsaBanner }; 5 | -------------------------------------------------------------------------------- /src/shared/icons/arrow_drop_down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/arrow_drop_up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-astro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "include": [".astro/types.d.ts", "**/*"], 4 | "exclude": ["dist"] 5 | } 6 | -------------------------------------------------------------------------------- /src/shared/icons/add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/send.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.changeset/short-oranges-rescue.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@uswds/elements": patch 3 | --- 4 | 5 | Adds a prop to the banner component to allow customization of the flag image. 6 | -------------------------------------------------------------------------------- /examples/with-vue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import "./style.css"; 3 | import App from "./App.vue"; 4 | 5 | createApp(App).mount("#app"); 6 | -------------------------------------------------------------------------------- /src/shared/icons/drag_handle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/fast_forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/file_upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "storybook/manager-api"; 2 | import UswdsTheme from "./UswdsTheme"; 3 | 4 | addons.setConfig({ 5 | theme: UswdsTheme, 6 | }); 7 | -------------------------------------------------------------------------------- /examples/with-astro/astro.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { defineConfig } from "astro/config"; 3 | 4 | // https://astro.build/config 5 | export default defineConfig({}); 6 | -------------------------------------------------------------------------------- /examples/with-vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/shared/icons/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/expand_less.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/expand_more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/fast_rewind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/file_download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/format_quote.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/format_size.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/near_me.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/park.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/blocks/SiteNote.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const SiteNote = ({ children }) => { 4 | return
{children}
; 5 | }; 6 | -------------------------------------------------------------------------------- /examples/with-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/with-solid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/shared/icons/filter_list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/navigate_before.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/navigate_next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/priority_high.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/text_fields.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-solid/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import solid from "vite-plugin-solid"; 3 | 4 | export default defineConfig({ 5 | plugins: [solid()], 6 | }); 7 | -------------------------------------------------------------------------------- /src/shared/icons/arrow_back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/arrow_forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/arrow_upward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/first_page.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/last_page.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/shield.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/arrow_downward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/school.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/store.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /storybook/readme.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Markdown } from "@storybook/addon-docs/blocks"; 2 | import Readme from "../README.md?raw"; 3 | 4 | 5 | 6 | {Readme} 7 | -------------------------------------------------------------------------------- /examples/with-sveltekit/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | }); 7 | -------------------------------------------------------------------------------- /src/shared/icons/account_balance.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/trending_down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/trending_up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/chevron_left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/chevron_right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/remove_circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_parking.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/navigate_far_before.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /src/shared/icons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/navigate_far_next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/add_circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/announcement.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/check_box_outline_blank.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/hospital.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/hotel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/login.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/logout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-sveltekit/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 |

Welcome to SvelteKit

8 | -------------------------------------------------------------------------------- /src/shared/icons/chat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/clothes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/folder_open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_pharmacy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tokens/color/global.json: -------------------------------------------------------------------------------- 1 | { 2 | "transparent": { 3 | "$value": "rgba(0,0,0,0)" 4 | }, 5 | "black": { 6 | "$value": "#000" 7 | }, 8 | "white": { 9 | "$value": "#fff" 10 | }, 11 | "$type": "color" 12 | } 13 | -------------------------------------------------------------------------------- /src/shared/icons/calendar_today.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/flight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_cafe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/location_on.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/save_alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 10 | -------------------------------------------------------------------------------- /src/shared/icons/assessment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/check_circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/comment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/forum.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/security.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/topic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/unfold_more.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/verified_user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 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 | }; 9 | -------------------------------------------------------------------------------- /examples/with-solid/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from "solid-js/web"; 3 | import "./index.css"; 4 | import App from "./App.tsx"; 5 | 6 | const root = document.getElementById("root"); 7 | 8 | render(() => , root!); 9 | -------------------------------------------------------------------------------- /src/shared/icons/backpack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/credit_card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/launch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_hospital.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/mail_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sort_arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/camping.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/content_copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/event.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/label.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/toggle_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/toggle_on.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/unfold_less.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/deck.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/grid_view.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/radio_button_unchecked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/restaurant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-webkit-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-webkit-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-firefox-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-firefox-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-webkit-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-webkit-linux.png -------------------------------------------------------------------------------- /src/shared/icons/edit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/filter_alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-chromium-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-chromium-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-firefox-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-firefox-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-chromium-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-chromium-linux.png -------------------------------------------------------------------------------- /src/core/colors.css: -------------------------------------------------------------------------------- 1 | @import url("/build/css/colors.css"); 2 | 3 | :root { 4 | --usa-color-base-lightest: var(--usa-color-gray-5); 5 | 6 | --theme-link-color: var(--usa-color-blue-vivid-60); 7 | --theme-link-hover-color: var(--usa-color-blue-warm-vivid-70); 8 | } 9 | -------------------------------------------------------------------------------- /src/shared/icons/cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/hourglass_empty.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/more_vert.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/work.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/more_horiz.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/push_pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/science.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/star_half.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Mobile-Chrome-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Mobile-Chrome-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Mobile-Safari-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Mobile-Safari-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Tablet-Chrome-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Tablet-Chrome-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Tablet-Safari-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/collapsed-components-banner--default-Tablet-Safari-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Mobile-Chrome-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Mobile-Chrome-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Mobile-Safari-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Mobile-Safari-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Tablet-Chrome-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Tablet-Chrome-linux.png -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Tablet-Safari-linux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uswds/uswds-elements/HEAD/e2e/components/usa-banner/usa-banner.spec.ts-snapshots/expanded-components-banner--default-Tablet-Safari-linux.png -------------------------------------------------------------------------------- /src/shared/icons/lightbulb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/wifi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/accessibility_new.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_police.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/spellcheck.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/add_circle_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/build.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/timer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/upload_file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.changeset/good-needles-fix.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@uswds/elements": patch 3 | --- 4 | 5 | - Add documentaton 6 | - Export types for various front-end frameworks 7 | - Add component registration helper with collision checking for custom elements 8 | - Provide React wrapper for web component implementation 9 | -------------------------------------------------------------------------------- /examples/with-astro/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /examples/with-sveltekit/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | {@render children()} 12 | -------------------------------------------------------------------------------- /src/shared/icons/cancel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/device_thermostat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/error_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/favorite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/location_city.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/report.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_library.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/medical_services.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/check_circle_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.changeset/pre.json: -------------------------------------------------------------------------------- 1 | { 2 | "mode": "pre", 3 | "tag": "alpha", 4 | "initialVersions": { 5 | "@uswds/elements": "1.0.0-alpha.2" 6 | }, 7 | "changesets": [ 8 | "good-needles-fix", 9 | "petite-dodos-call", 10 | "short-oranges-rescue", 11 | "twenty-socks-reflect" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /examples/with-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App.tsx"; 5 | 6 | createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /src/shared/icons/rss_feed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/photo_camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/tornado.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-solid/src/custom-elements.d.ts: -------------------------------------------------------------------------------- 1 | // src/custom-elements.d.ts 2 | import type { CustomElements } from "../node_modules/@uswds/elements/dist/types/custom-element-solidjs"; 3 | 4 | declare module "solid-js" { 5 | namespace JSX { 6 | interface IntrinsicElements extends CustomElements {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/shared/icons/eco.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/info_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/schedule.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/star_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/directions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/military_tech.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/contact_page.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-react/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | min-width: 320px; 10 | min-height: 100vh; 11 | } 12 | 13 | h1 { 14 | font-size: 3.2em; 15 | line-height: 1.1; 16 | } 17 | -------------------------------------------------------------------------------- /examples/with-solid/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | min-width: 320px; 10 | min-height: 100vh; 11 | } 12 | 13 | h1 { 14 | font-size: 3.2em; 15 | line-height: 1.1; 16 | } 17 | -------------------------------------------------------------------------------- /src/shared/icons/attach_file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/loop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/severe_weather.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/visibility.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/zoom_out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/zoom_out_map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/directions_walk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/notifications_none.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/rain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.changeset/twenty-socks-reflect.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@uswds/elements": patch 3 | --- 4 | 5 | Web components: TypeScript conversion and build improvements. 6 | - Resolved vite error [#222](https://github.com/uswds/uswds-elements/issues/222#issue-3623280254) 7 | - Provided types export in package [#221](https://github.com/uswds/uswds-elements/issues/221) 8 | -------------------------------------------------------------------------------- /src/shared/icons/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "develop", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /src/shared/icons/autorenew.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-sveltekit/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # Output 4 | .output 5 | .vercel 6 | .netlify 7 | .wrangler 8 | /.svelte-kit 9 | /build 10 | 11 | # OS 12 | .DS_Store 13 | Thumbs.db 14 | 15 | # Env 16 | .env 17 | .env.* 18 | !.env.example 19 | !.env.test 20 | 21 | # Vite 22 | vite.config.js.timestamp-* 23 | vite.config.ts.timestamp-* 24 | -------------------------------------------------------------------------------- /src/shared/icons/account_circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/api.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/identification.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/lock_open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/alarm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/highlight_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/vitest.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config"; 2 | 3 | export default defineConfig({ 4 | test: { 5 | environment: "jsdom", 6 | include: [ 7 | "src/**/*.spec.{js,ts}", 8 | "src/**/*.test.{js,ts}", 9 | "internals/**/*.spec.{js,ts}", 10 | "internals/**/*.test.{js,ts}", 11 | ], 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /src/shared/icons/checkroom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/do_not_disturb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/keyboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | services: 2 | e2e: 3 | build: . 4 | volumes: 5 | - .:/workspace 6 | - /workspace/node_modules # Keeps node_modules inside container 7 | ports: 8 | - "3000:3000" # Storybook Express server 9 | - "9323:9323" # Playwright report port in the event of test failure 10 | stdin_open: true 11 | tty: true 12 | -------------------------------------------------------------------------------- /examples/with-sveltekit/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /examples/with-sveltekit/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/shared/icons/emoji_events.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/help_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/zoom_in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_offer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sentiment_neutral.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/verified.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/account_box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/file_present.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-astro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-astro", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "build": "astro build", 8 | "preview": "astro preview", 9 | "astro": "astro" 10 | }, 11 | "dependencies": { 12 | "@uswds/elements": "1.0.0-alpha.5", 13 | "astro": "^5.16.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/shared/icons/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/thumb_down_alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/thumb_up_alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/with-react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /examples/with-solid/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/shared/icons/lock_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/my_location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | min-width: 320px; 10 | min-height: 100vh; 11 | } 12 | 13 | h1 { 14 | font-size: 3.2em; 15 | line-height: 1.1; 16 | } 17 | 18 | #app { 19 | margin: 0 auto; 20 | text-align: center; 21 | } 22 | -------------------------------------------------------------------------------- /src/shared/icons/shopping_basket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/update.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-astro/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | -------------------------------------------------------------------------------- /src/shared/icons/closed_caption.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/people.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/translate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/public.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 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 | } 18 | -------------------------------------------------------------------------------- /src/shared/icons/accessible_forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/safety_divider.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/group_add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/lightbulb_outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_grocery_store.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | with-vue 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/icons/link_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # IDE settings for the Midas project. Many IDE's support this as a starting point 2 | # for a project. For more info, see http://EditorConfig.org. 3 | 4 | # top-most EditorConfig file 5 | root = true 6 | 7 | # Unix-style newlines with a newline ending every file 8 | [*] 9 | end_of_line = lf 10 | insert_final_newline = true 11 | charset = utf-8 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.md] 16 | indent_size = 4 -------------------------------------------------------------------------------- /examples/with-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | with-react 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/with-solid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | with-solid 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/shared/icons/social_distance.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/directions_bus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/hurricane.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-solid/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | // @ts-expect-error - USWDS Web Components imports will be flagged as unused elements. This is the element definition. 3 | import { UsaBanner } from "@uswds/elements"; 4 | 5 | function App() { 6 | return ( 7 | <> 8 | 9 |

My Solid App

10 | {/* the rest of the application... */} 11 | 12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /examples/with-vue/vite.config.ts: -------------------------------------------------------------------------------- 1 | // vite.config.ts 2 | import { defineConfig } from "vite"; 3 | import vue from "@vitejs/plugin-vue"; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | vue({ 8 | template: { 9 | compilerOptions: { 10 | // Treat all tags starting with 'usa-' as custom elements 11 | isCustomElement: (tag) => tag.startsWith("usa-"), 12 | }, 13 | }, 14 | }), 15 | ], 16 | }); 17 | -------------------------------------------------------------------------------- /src/shared/icons/local_gas_station.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sentiment_very_dissatisfied.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/UswdsTheme.js: -------------------------------------------------------------------------------- 1 | import { create } from "storybook/theming/create"; 2 | 3 | export default create({ 4 | base: "light", 5 | brandTitle: "USWDS Web components", 6 | fontBase: 7 | '"Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', 8 | colorPrimary: "#0050d8", 9 | colorSecondary: "#1a4480", 10 | textColor: "#1b1b1b", 11 | }); 12 | -------------------------------------------------------------------------------- /internals/scripts/rmrf.js: -------------------------------------------------------------------------------- 1 | import fs from "node:fs"; 2 | 3 | const args = process.argv; 4 | if (args.length === 2) { 5 | console.error("Expected an argument for the directory to be deleted"); 6 | process.exit(1); 7 | } 8 | 9 | const dir = args[2]; 10 | 11 | fs.rm(dir, { recursive: true, force: true }, (err) => { 12 | console.info(`Cleaning up old build files...`); 13 | if (err) { 14 | throw err; 15 | } 16 | console.info(`Done.`); 17 | }); 18 | -------------------------------------------------------------------------------- /src/shared/icons/alternate_email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/directions_car.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/electrical_services.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/fax.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_laundry_service.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sanitizer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/volume_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/attach_money.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/campaign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/favorite_border.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_taxi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/notifications_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/bedding.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/flickr.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sentiment_satisfied.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/bug_report.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sentiment_dissatisfied.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/local_fire_department.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/notifications_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/bathtub.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/support_agent.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/connect_without_contact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/construction.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/sentiment_satisfied_alt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/clean_hands.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/construction_worker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /examples/with-solid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-solid", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@uswds/elements": "1.0.0-alpha.5", 13 | "solid-js": "^1.9.10" 14 | }, 15 | "devDependencies": { 16 | "@types/node": "^24.10.0", 17 | "typescript": "~5.9.3", 18 | "vite": "^7.2.2", 19 | "vite-plugin-solid": "^2.11.10" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/shared/icons/wash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/insights.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/support.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc -b && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@uswds/elements": "1.0.0-alpha.5", 13 | "vue": "^3.5.24" 14 | }, 15 | "devDependencies": { 16 | "@types/node": "^24.10.0", 17 | "@vitejs/plugin-vue": "^6.0.1", 18 | "@vue/tsconfig": "^0.8.1", 19 | "typescript": "~5.9.3", 20 | "vite": "^7.2.2", 21 | "vue-tsc": "^3.1.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/shared/icons/directions_bike.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/hearing.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/groups.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/workflows/formatting.yml: -------------------------------------------------------------------------------- 1 | name: Code formatting 2 | permissions: 3 | contents: read 4 | on: push 5 | 6 | jobs: 7 | test: 8 | timeout-minutes: 60 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout repository 12 | uses: actions/checkout@v4 13 | 14 | - name: Setup project 15 | uses: ./.github/actions/setup 16 | 17 | - name: Run prettier JavaScript 18 | run: "npm run prettier:js" 19 | 20 | - name: Run prettier Markdown 21 | run: "npm run prettier:md" 22 | 23 | - name: Run stylelint 24 | run: "npm run stylelint" 25 | -------------------------------------------------------------------------------- /.github/workflows/ui-test.yml: -------------------------------------------------------------------------------- 1 | name: Storybook and Component Tests 2 | permissions: 3 | contents: read 4 | on: push 5 | jobs: 6 | test: 7 | timeout-minutes: 60 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout repository 11 | uses: actions/checkout@v4 12 | 13 | - name: Setup project 14 | uses: ./.github/actions/setup 15 | 16 | - name: Install playwright 17 | run: npx playwright install 18 | 19 | - name: Run Storybook tests 20 | run: npm run test:storybook:ci 21 | 22 | - name: Run vitest tests 23 | run: npm run test:ci 24 | -------------------------------------------------------------------------------- /src/shared/icons/pets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/visibility_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup node and install dependencies 2 | description: Setup action to be reused in multiple workflows 3 | inputs: 4 | skipInstall: 5 | description: Skip the install step 6 | required: false 7 | default: 'false' 8 | runs: 9 | using: composite 10 | steps: 11 | - name: Install node.js version 12 | uses: actions/setup-node@v4 13 | id: install-node 14 | with: 15 | node-version-file: '.nvmrc' 16 | cache: 'npm' 17 | 18 | - name: Install dependencies 19 | if: ${{ inputs.skipInstall != 'true' }} 20 | shell: bash 21 | run: npm ci -------------------------------------------------------------------------------- /src/components/usa-link/usa-link.css: -------------------------------------------------------------------------------- 1 | :host { 2 | a { 3 | color: var(--theme-link-color, #005ea2); 4 | text-decoration: underline; 5 | } 6 | 7 | a:visited { 8 | color: var(--theme-link-visited-color, #54278f); 9 | } 10 | 11 | a:hover { 12 | color: var(--theme-link-hover-color, #1a4480); 13 | } 14 | 15 | a:active { 16 | color: var(--theme-link-active-color, #162e51); 17 | } 18 | 19 | a:focus { 20 | outline: var(--theme-focus-width, 0.25rem) var(--theme-focus-style, solid) 21 | var(--theme-focus-color, #2491ff); 22 | outline-offset: var(--theme-focus-offset, 0); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/shared/icons/snow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "compilerOptions": { 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 5 | "types": [ 6 | "vite/client", 7 | "./node_modules/@uswds/elements/dist/types/custom-element-vuejs.d.ts" 8 | ], 9 | 10 | /* Linting */ 11 | "strict": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "erasableSyntaxOnly": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "noUncheckedSideEffectImports": true 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] 19 | } 20 | -------------------------------------------------------------------------------- /src/shared/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /internals/scripts/serve-storybook.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import serveStatic from "serve-static"; 3 | import path from "path"; 4 | import { fileURLToPath } from "url"; 5 | 6 | const __filename = fileURLToPath(import.meta.url); 7 | const __dirname = path.dirname(__filename); 8 | 9 | const app = express(); 10 | const PORT = process.env.PORT || 3000; 11 | 12 | // Serve static files from storybook-static directory 13 | app.use( 14 | serveStatic(path.join(__dirname, "..", "..", "storybook-static"), { 15 | index: ["index.html"], 16 | }), 17 | ); 18 | 19 | app.listen(PORT, () => { 20 | console.log(`Storybook server running at http://localhost:${PORT}`); 21 | }); 22 | -------------------------------------------------------------------------------- /.storybook/test-runner.js: -------------------------------------------------------------------------------- 1 | import { injectAxe, checkA11y, configureAxe } from "axe-playwright"; 2 | import { getStoryContext } from "@storybook/test-runner"; 3 | 4 | const config = { 5 | async preVisit(page) { 6 | await injectAxe(page); 7 | }, 8 | async postVisit(page, context) { 9 | const storyContext = await getStoryContext(page, context); 10 | 11 | await configureAxe(page, { 12 | rules: storyContext.parameters?.a11y?.config?.rules, 13 | }); 14 | await checkA11y(page, "#storybook-root", { 15 | detailedReport: true, 16 | detailedReportOptions: { 17 | html: true, 18 | }, 19 | }); 20 | }, 21 | }; 22 | 23 | export default config; 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .claude/* 26 | 27 | *storybook.log 28 | _site 29 | storybook-static 30 | 31 | # Playwright 32 | /test-results/ 33 | /playwright-report/ 34 | /blob-report/ 35 | /playwright/.cache/ 36 | /playwright/.auth/ 37 | 38 | # Docker 39 | /.npm/_update-notifier-last-checked 40 | /.bash_history 41 | 42 | # bundlesize plugin 43 | bundlemeta.json 44 | -------------------------------------------------------------------------------- /src/shared/icons/masks.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-react/src/App.tsx: -------------------------------------------------------------------------------- 1 | // src/App.tsx 2 | 3 | import "./App.css"; 4 | /** 5 | * USWDS Elements provides a React wrapper of each component. 6 | * Import the components you need as shown in the example the below. 7 | * For purposes of demonstration, we are importing the USA Banner component. 8 | */ 9 | import { UsaBanner } from "@uswds/elements/components/frameworks/react/index"; 10 | 11 | function App() { 12 | return ( 13 | <> 14 | {/* With the React wrapper components, you import and use USWDS Elements as you would any other React component */} 15 | 16 |

My React App

17 | {/* the rest of your app... */} 18 | 19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/shared/icons/flooding.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/shared/icons/soap.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-react/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from "@eslint/js"; 2 | import globals from "globals"; 3 | import reactHooks from "eslint-plugin-react-hooks"; 4 | import reactRefresh from "eslint-plugin-react-refresh"; 5 | import tseslint from "typescript-eslint"; 6 | import { defineConfig, globalIgnores } from "eslint/config"; 7 | 8 | export default defineConfig([ 9 | globalIgnores(["dist"]), 10 | { 11 | files: ["**/*.{ts,tsx}"], 12 | extends: [ 13 | js.configs.recommended, 14 | tseslint.configs.recommended, 15 | reactHooks.configs.flat.recommended, 16 | reactRefresh.configs.vite, 17 | ], 18 | languageOptions: { 19 | ecmaVersion: 2020, 20 | globals: globals.browser, 21 | }, 22 | }, 23 | ]); 24 | -------------------------------------------------------------------------------- /src/shared/icons/do_not_touch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.performance.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from "../../fixtures/web-vitals"; 2 | import { StorybookPage } from "../../models/storybook-page"; 3 | 4 | test.describe("usa-banner performance", () => { 5 | test("should have good web vitals", async ({ page, webVitals }) => { 6 | await webVitals.setup(); 7 | 8 | const storybookPage = new StorybookPage(page); 9 | await storybookPage.gotoAndWaitForDomLoaded("components-banner--default"); 10 | 11 | // Page click to record LCP 12 | await page.getByRole("button", { name: "Here’s how you know" }).click(); 13 | 14 | // Page unload to record INP and CLS 15 | await page.close(); 16 | expect(webVitals.failingMetrics).toHaveLength(0); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /tokens/color/black-transparent.json: -------------------------------------------------------------------------------- 1 | { 2 | "black-transparent": { 3 | "5": { 4 | "$value": "rgba(0,0,0,0.01)" 5 | }, 6 | "10": { 7 | "$value": "rgba(0,0,0,0.1)" 8 | }, 9 | "20": { 10 | "$value": "rgba(0,0,0,0.2)" 11 | }, 12 | "30": { 13 | "$value": "rgba(0,0,0,0.3)" 14 | }, 15 | "40": { 16 | "$value": "rgba(0,0,0,0.4)" 17 | }, 18 | "50": { 19 | "$value": "rgba(0,0,0,0.5)" 20 | }, 21 | "60": { 22 | "$value": "rgba(0,0,0,0.6)" 23 | }, 24 | "70": { 25 | "$value": "rgba(0,0,0,0.7)" 26 | }, 27 | "80": { 28 | "$value": "rgba(0,0,0,0.8)" 29 | }, 30 | "90": { 31 | "$value": "rgba(0,0,0,0.9)" 32 | } 33 | }, 34 | "$type": "color" 35 | } 36 | -------------------------------------------------------------------------------- /examples/with-sveltekit/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-auto"; 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://svelte.dev/docs/kit/integrations 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. 12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter. 13 | // See https://svelte.dev/docs/kit/adapters for more information about adapters. 14 | adapter: adapter(), 15 | }, 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /examples/with-react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2023", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "types": ["node"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "verbatimModuleSyntax": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "erasableSyntaxOnly": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["vite.config.ts"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/with-solid/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2023", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "types": ["node"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "verbatimModuleSyntax": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "erasableSyntaxOnly": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["vite.config.ts"] 26 | } 27 | -------------------------------------------------------------------------------- /examples/with-vue/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2023", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "types": ["node"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "verbatimModuleSyntax": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "erasableSyntaxOnly": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["vite.config.ts"] 26 | } 27 | -------------------------------------------------------------------------------- /src/shared/icons/settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-astro/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /tokens/color/white-transparent.json: -------------------------------------------------------------------------------- 1 | { 2 | "white-transparent": { 3 | "5": { 4 | "$value": "rgba(255,255,255,0.01)" 5 | }, 6 | "10": { 7 | "$value": "rgba(255,255,255,0.1)" 8 | }, 9 | "20": { 10 | "$value": "rgba(255,255,255,0.2)" 11 | }, 12 | "30": { 13 | "$value": "rgba(255,255,255,0.3)" 14 | }, 15 | "40": { 16 | "$value": "rgba(255,255,255,0.4)" 17 | }, 18 | "50": { 19 | "$value": "rgba(255,255,255,0.5)" 20 | }, 21 | "60": { 22 | "$value": "rgba(255,255,255,0.6)" 23 | }, 24 | "70": { 25 | "$value": "rgba(255,255,255,0.7)" 26 | }, 27 | "80": { 28 | "$value": "rgba(255,255,255,0.8)" 29 | }, 30 | "90": { 31 | "$value": "rgba(255,255,255,0.9)" 32 | } 33 | }, 34 | "$type": "color" 35 | } 36 | -------------------------------------------------------------------------------- /src/shared/icons/reduce_capacity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tokens/dimension/breakpoints.json: -------------------------------------------------------------------------------- 1 | { 2 | "breakpoint": { 3 | "card": { 4 | "$value": { "value": "10", "unit": "rem" } 5 | }, 6 | "card-lg": { 7 | "$value": { "value": "15", "unit": "rem" } 8 | }, 9 | "mobile": { 10 | "$value": { "value": "20", "unit": "rem" } 11 | }, 12 | "mobile-lg": { 13 | "$value": { "value": "30", "unit": "rem" } 14 | }, 15 | "tablet": { 16 | "$value": { "value": "40", "unit": "rem" } 17 | }, 18 | "tablet-lg": { 19 | "$value": { "value": "55", "unit": "rem" } 20 | }, 21 | "desktop": { 22 | "$value": { "value": "64", "unit": "rem" } 23 | }, 24 | "desktop-lg": { 25 | "$value": { "value": "75", "unit": "rem" } 26 | }, 27 | "widescreen": { 28 | "$value": { "value": "87.5", "unit": "rem" } 29 | } 30 | }, 31 | "$type": "dimension" 32 | } 33 | -------------------------------------------------------------------------------- /examples/with-react/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2022", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2022", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "types": ["vite/client"], 9 | "skipLibCheck": true, 10 | 11 | /* Bundler mode */ 12 | "moduleResolution": "bundler", 13 | "allowImportingTsExtensions": true, 14 | "verbatimModuleSyntax": true, 15 | "moduleDetection": "force", 16 | "noEmit": true, 17 | "jsx": "react-jsx", 18 | 19 | /* Linting */ 20 | "strict": true, 21 | "noUnusedLocals": true, 22 | "noUnusedParameters": true, 23 | "erasableSyntaxOnly": true, 24 | "noFallthroughCasesInSwitch": true, 25 | "noUncheckedSideEffectImports": true 26 | }, 27 | "include": ["src"] 28 | } 29 | -------------------------------------------------------------------------------- /examples/with-sveltekit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowImportingTsExtensions": true, 5 | "allowJs": true, 6 | "checkJs": true, 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "resolveJsonModule": true, 10 | "skipLibCheck": true, 11 | "sourceMap": true, 12 | "strict": true, 13 | "moduleResolution": "bundler", 14 | "types": ["./node_modules/@uswds/elements/dist/types"] 15 | } 16 | // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias 17 | // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files 18 | // 19 | // To make changes to top-level options such as include and exclude, we recommend extending 20 | // the generated config; see https://svelte.dev/docs/kit/configuration#typescript 21 | } 22 | -------------------------------------------------------------------------------- /examples/with-sveltekit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-sveltekit", 3 | "private": true, 4 | "version": "0.0.1", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "prepare": "svelte-kit sync || echo ''", 11 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 12 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 13 | }, 14 | "devDependencies": { 15 | "@sveltejs/adapter-auto": "^7.0.0", 16 | "@sveltejs/kit": "^2.47.1", 17 | "@sveltejs/vite-plugin-svelte": "^6.2.1", 18 | "svelte": "^5.41.0", 19 | "svelte-check": "^4.3.3", 20 | "typescript": "^5.9.3", 21 | "vite": "^7.1.10" 22 | }, 23 | "pnpm": { 24 | "onlyBuiltDependencies": [ 25 | "esbuild" 26 | ] 27 | }, 28 | "dependencies": { 29 | "@uswds/elements": "1.0.0-alpha.4" 30 | } 31 | } -------------------------------------------------------------------------------- /src/shared/icons/language.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tokens/color/gray-cool.json: -------------------------------------------------------------------------------- 1 | { 2 | "gray-cool": { 3 | "1": { 4 | "$value": "#fbfcfd" 5 | }, 6 | "2": { 7 | "$value": "#f7f9fa" 8 | }, 9 | "3": { 10 | "$value": "#f5f6f7" 11 | }, 12 | "4": { 13 | "$value": "#f1f3f6" 14 | }, 15 | "5": { 16 | "$value": "#edeff0" 17 | }, 18 | "10": { 19 | "$value": "#dfe1e2" 20 | }, 21 | "20": { 22 | "$value": "#c6cace" 23 | }, 24 | "30": { 25 | "$value": "#a9aeb1" 26 | }, 27 | "40": { 28 | "$value": "#8d9297" 29 | }, 30 | "50": { 31 | "$value": "#71767a" 32 | }, 33 | "60": { 34 | "$value": "#565c65" 35 | }, 36 | "70": { 37 | "$value": "#3d4551" 38 | }, 39 | "80": { 40 | "$value": "#2d2e2f" 41 | }, 42 | "90": { 43 | "$value": "#1c1d1f" 44 | } 45 | }, 46 | "$type": "color" 47 | } 48 | -------------------------------------------------------------------------------- /tokens/color/gray-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "gray-warm": { 3 | "1": { 4 | "$value": "#fcfcfb" 5 | }, 6 | "2": { 7 | "$value": "#f9f9f7" 8 | }, 9 | "3": { 10 | "$value": "#f6f6f2" 11 | }, 12 | "4": { 13 | "$value": "#f5f5f0" 14 | }, 15 | "5": { 16 | "$value": "#f0f0ec" 17 | }, 18 | "10": { 19 | "$value": "#e6e6e2" 20 | }, 21 | "20": { 22 | "$value": "#cac9c0" 23 | }, 24 | "30": { 25 | "$value": "#afaea2" 26 | }, 27 | "40": { 28 | "$value": "#929285" 29 | }, 30 | "50": { 31 | "$value": "#76766a" 32 | }, 33 | "60": { 34 | "$value": "#5d5d52" 35 | }, 36 | "70": { 37 | "$value": "#454540" 38 | }, 39 | "80": { 40 | "$value": "#2e2e2a" 41 | }, 42 | "90": { 43 | "$value": "#171716" 44 | } 45 | }, 46 | "$type": "color" 47 | } 48 | -------------------------------------------------------------------------------- /examples/with-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uswds-react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@uswds/elements": "1.0.0-alpha.5", 14 | "react": "^19.2.0", 15 | "react-dom": "^19.2.0" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.39.1", 19 | "@types/node": "^24.10.0", 20 | "@types/react": "^19.2.2", 21 | "@types/react-dom": "^19.2.2", 22 | "@vitejs/plugin-react": "^5.1.0", 23 | "eslint": "^9.39.1", 24 | "eslint-plugin-react-hooks": "^7.0.1", 25 | "eslint-plugin-react-refresh": "^0.4.24", 26 | "globals": "^16.5.0", 27 | "typescript": "~5.9.3", 28 | "typescript-eslint": "^8.46.3", 29 | "vite": "^7.2.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /tokens/dimension/spacing.json: -------------------------------------------------------------------------------- 1 | { 2 | "spacing": { 3 | "05": { 4 | "$value": { "value": ".025", "unit": "rem" } 5 | }, 6 | "1": { 7 | "$value": { "value": ".5", "unit": "rem" } 8 | }, 9 | "2": { 10 | "$value": { "value": "1", "unit": "rem" } 11 | }, 12 | "3": { 13 | "$value": { "value": "1.5", "unit": "rem" } 14 | }, 15 | "4": { 16 | "$value": { "value": "2", "unit": "rem" } 17 | }, 18 | "5": { 19 | "$value": { "value": "2.5", "unit": "rem" } 20 | }, 21 | "6": { 22 | "$value": { "value": "3", "unit": "rem" } 23 | } 24 | }, 25 | "site-margins": { 26 | "mobile-width": { 27 | "$value": "{spacing.2}" 28 | }, 29 | "width": { 30 | "$value": "{spacing.4}" 31 | } 32 | }, 33 | "size": { 34 | "touch-target": { 35 | "$value": "{spacing.6}" 36 | } 37 | }, 38 | "$type": "dimension" 39 | } 40 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @uswds/elements 2 | 3 | ## 1.0.0-alpha.6 4 | 5 | ### Patch Changes 6 | 7 | - 21888fc: Adds a prop to the banner component to allow customization of the flag image. 8 | 9 | ## 1.0.0-alpha.5 10 | 11 | ### Patch Changes 12 | 13 | - 395cb36: - Add documentaton 14 | - Export types for various front-end frameworks 15 | - Add component registration helper with collision checking for custom elements 16 | - Provide React wrapper for web component implementation 17 | 18 | ## 1.0.0-alpha.4 19 | 20 | ### Patch Changes 21 | 22 | - 3661a08: Web components: TypeScript conversion and build improvements. 23 | - Resolved vite error [#222](https://github.com/uswds/uswds-elements/issues/222#issue-3623280254) 24 | - Provided types export in package [#221](https://github.com/uswds/uswds-elements/issues/221) 25 | 26 | ## 1.0.0-alpha.3 27 | 28 | ### Patch Changes 29 | 30 | - e93235f: Add style tokens to package output 31 | -------------------------------------------------------------------------------- /config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": ["ES2022", "DOM", "DOM.Iterable"], 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "verbatimModuleSyntax": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "baseUrl": "..", 17 | "paths": { "@uswds/uswds/*": ["node_modules/@uswds/uswds/dist/*"] }, 18 | 19 | /* Linting */ 20 | "strict": true, 21 | "noUnusedLocals": true, 22 | "noUnusedParameters": true, 23 | "erasableSyntaxOnly": true, 24 | "noFallthroughCasesInSwitch": true, 25 | "noUncheckedSideEffectImports": true 26 | }, 27 | "include": ["../src"], 28 | "typeRoots": ["node_modules/@types", "../src"] 29 | } 30 | -------------------------------------------------------------------------------- /examples/with-solid/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2022", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "lib": ["ES2022", "DOM", "DOM.Iterable"], 8 | "types": ["vite/client"], 9 | "skipLibCheck": true, 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "verbatimModuleSyntax": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | "jsxImportSource": "solid-js", 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "erasableSyntaxOnly": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noUncheckedSideEffectImports": true 23 | }, 24 | /* Make sure your config includes the src directory as shown below */ 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /tokens/color/gray.json: -------------------------------------------------------------------------------- 1 | { 2 | "gray": { 3 | "1": { 4 | "$value": "#fcfcfc" 5 | }, 6 | "2": { 7 | "$value": "#f9f9f9" 8 | }, 9 | "3": { 10 | "$value": "#f6f6f6" 11 | }, 12 | "4": { 13 | "$value": "#f3f3f3" 14 | }, 15 | "5": { 16 | "$value": "#f0f0f0" 17 | }, 18 | "10": { 19 | "$value": "#e6e6e6" 20 | }, 21 | "20": { 22 | "$value": "#c9c9c9" 23 | }, 24 | "30": { 25 | "$value": "#adadad" 26 | }, 27 | "40": { 28 | "$value": "#919191" 29 | }, 30 | "50": { 31 | "$value": "#757575" 32 | }, 33 | "60": { 34 | "$value": "#5c5c5c" 35 | }, 36 | "70": { 37 | "$value": "#454545" 38 | }, 39 | "80": { 40 | "$value": "#2e2e2e" 41 | }, 42 | "90": { 43 | "$value": "#1b1b1b" 44 | }, 45 | "100": { 46 | "$value": "#000" 47 | } 48 | }, 49 | "$type": "color" 50 | } 51 | -------------------------------------------------------------------------------- /e2e/components/usa-banner/usa-banner.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from "@playwright/test"; 2 | import { StorybookPage } from "../../models/storybook-page"; 3 | 4 | test.describe("usa-banner visual regression tests", () => { 5 | const storyName = "components-banner--default"; 6 | 7 | test.beforeEach(async ({ page }) => { 8 | const storybookPage = new StorybookPage(page); 9 | await storybookPage.gotoAndWaitForDomLoaded(storyName); 10 | }); 11 | 12 | test("Collapsed state should match visual snapshot", async ({ page }) => { 13 | const bannerElement = page.locator("usa-banner"); 14 | await expect(bannerElement).toHaveScreenshot(`collapsed-${storyName}.png`); 15 | }); 16 | 17 | test("Expanded state should match visual snapshot", async ({ page }) => { 18 | await page.getByRole("button", { name: "Here’s how you know" }).click(); 19 | const bannerElement = page.locator("usa-banner"); 20 | await expect(bannerElement).toHaveScreenshot(`expanded-${storyName}.png`); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Use official Playwright image with all browsers; version should match CI 2 | FROM mcr.microsoft.com/playwright:v1.55.0-noble 3 | 4 | # Install system packages needed for development (if any) 5 | # RUN apt-get update && apt-get install -y 6 | 7 | # Set working directory 8 | WORKDIR /workspace 9 | 10 | # Node will run as root; set HOME for consistency 11 | ENV HOME=/root 12 | 13 | # Copy dependency files first for caching 14 | COPY package.json package-lock.json .nvmrc ./ 15 | 16 | # Install npm dependencies; use --legacy-peer-deps if needed for monorepos, etc. 17 | RUN npm ci 18 | 19 | # Install Playwright browsers and dependencies (again, for local/CI parity) 20 | RUN npx playwright install --with-deps 21 | 22 | # Copy the rest of the project files 23 | COPY . . 24 | 25 | # Expose default Storybook port 26 | EXPOSE 3000 27 | 28 | # Expose port for reports if there are test failures 29 | EXPOSE 9323 30 | 31 | # Default entrypoint; override in docker-compose or docker run 32 | CMD [ "bash" ] 33 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format 2 | import storybook from "eslint-plugin-storybook"; 3 | 4 | import js from "@eslint/js"; 5 | import css from "@eslint/css"; 6 | import eslintConfigPrettierRecommended from "eslint-config-prettier"; 7 | import vitest from "@vitest/eslint-plugin"; 8 | 9 | export default [ 10 | { ignores: ["storybook-static/**"] }, 11 | { 12 | ...js.configs.recommended, 13 | ...eslintConfigPrettierRecommended, 14 | files: ["src/**/*.js"], 15 | rules: {}, 16 | }, 17 | { 18 | files: ["src/**/*.spec.js"], 19 | plugins: { vitest }, 20 | rules: { ...vitest.configs.recommended.rules }, 21 | }, 22 | { 23 | files: ["core/**/*.css", "src/**/*.css"], 24 | plugins: { css }, 25 | language: "css/css", 26 | rules: { 27 | ...css.configs.recommended.rules, 28 | "css/use-baseline": ["warn", { available: "widely" }], 29 | }, 30 | }, 31 | ...storybook.configs["flat/recommended"], 32 | ]; 33 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom elements for component docs generation. 3 | */ 4 | import { setCustomElementsManifest } from "@storybook/web-components-vite"; 5 | import { setStorybookHelpersConfig } from "@wc-toolkit/storybook-helpers"; 6 | import customElements from "../custom-elements.json"; 7 | import UswdsTheme from "./UswdsTheme"; 8 | import "../storybook/index.css"; 9 | import "../src/core/index.css"; 10 | 11 | setCustomElementsManifest(customElements); 12 | setStorybookHelpersConfig({ 13 | hideArgRef: true, 14 | }); 15 | 16 | /** @type { import('@storybook/web-components-vite').Preview } */ 17 | const preview = { 18 | parameters: { 19 | controls: { 20 | matchers: { 21 | color: /(background|color)$/i, 22 | date: /Date$/i, 23 | }, 24 | }, 25 | docs: { 26 | toc: true, // Autogenerate table of contents. 27 | theme: UswdsTheme, 28 | codePanel: true, 29 | canvas: { 30 | sourceState: "shown", 31 | }, 32 | }, 33 | }, 34 | tags: ["autodocs"], 35 | }; 36 | 37 | export default preview; 38 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | /** @type { import('@storybook/web-components-vite').StorybookConfig } */ 2 | const config = { 3 | stories: [ 4 | "../storybook/**/*.mdx", 5 | "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)", 6 | ], 7 | addons: [ 8 | "@storybook/addon-links", 9 | "@storybook/addon-docs", 10 | "@storybook/addon-a11y", 11 | "storybook-addon-tag-badges", 12 | ], 13 | framework: { 14 | name: "@storybook/web-components-vite", 15 | options: {}, 16 | }, 17 | core: { 18 | builder: { 19 | name: "@storybook/builder-vite", 20 | options: { 21 | viteConfigPath: "./config/vite.config.ts", 22 | }, 23 | }, 24 | }, 25 | viteFinal: async (config) => { 26 | /** 27 | * Unload the `vite-plugin-bundlesize` plugin. 28 | * This plugin is only used in the CI pipeline for output size of the 29 | * individual components. 30 | */ 31 | config.plugins = config.plugins.filter( 32 | (plugin) => plugin.name !== "vite-plugin-bundlesize", 33 | ); 34 | 35 | return config; 36 | }, 37 | }; 38 | export default config; 39 | -------------------------------------------------------------------------------- /examples/with-astro/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // pages/index.astro 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | Astro 11 | 17 | 18 | 19 | 20 | 23 | 32 | 33 | 34 |
35 |

My Astro App

36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /.github/workflows/update-playwright-snapshots.yml: -------------------------------------------------------------------------------- 1 | name: Generate New Playwright Screenshots 2 | permissions: 3 | contents: read 4 | 5 | on: 6 | workflow_dispatch: 7 | inputs: 8 | branch: 9 | description: 'The branch to checkout and run tests on' 10 | required: true 11 | type: string 12 | 13 | jobs: 14 | screenshots: 15 | runs-on: ubuntu-latest 16 | container: 17 | image: mcr.microsoft.com/playwright:v1.55.0-noble 18 | env: 19 | HOME: /root 20 | steps: 21 | - name: Checkout code 22 | uses: actions/checkout@v4 23 | with: 24 | ref: ${{ github.event.inputs.branch }} 25 | 26 | - name: Setup project 27 | uses: ./.github/actions/setup 28 | 29 | - name: Install Playwright Browsers 30 | run: npx playwright install --with-deps 31 | 32 | - name: Run Playwright to generate screenshots 33 | run: npx playwright test --config=./config/playwright.config.ts --update-snapshots 34 | 35 | - name: Upload new screenshots 36 | uses: actions/upload-artifact@v4 37 | with: 38 | name: playwright-snapshots 39 | path: e2e/**/*-snapshots/ 40 | retention-days: 30 41 | -------------------------------------------------------------------------------- /internals/token-helpers/index.ts: -------------------------------------------------------------------------------- 1 | import type { TransformedToken, PlatformConfig } from "style-dictionary/types"; 2 | 3 | export const generateTokenName = ( 4 | token: TransformedToken, 5 | options: PlatformConfig, 6 | ) => { 7 | if (token.path[0] === "spacing") { 8 | return `${options.prefix}-spacing-${token.path[1]}`; 9 | } 10 | 11 | if (token.path[0] === "breakpoint") { 12 | return `${options.prefix}-breakpoint-${token.path[1]}`; 13 | } 14 | 15 | const isFromColorDirectory = 16 | token.filePath && token.filePath.includes("tokens/color/"); 17 | 18 | if (isFromColorDirectory) { 19 | if ( 20 | token.path.length === 1 && 21 | ["transparent", "black", "white"].includes(token.path[0]) 22 | ) { 23 | return `${options.prefix}-color-${token.path[0]}`; 24 | } else { 25 | return `${options.prefix}-color-${token.path.join("-")}`; 26 | } 27 | } 28 | 29 | return `${options.prefix}-${token.path.join("-")}`; 30 | }; 31 | 32 | export const getTokenValueWithUnit = (token: TransformedToken) => { 33 | if (token.$type === "dimension" && typeof token.$value === "object") { 34 | return token.$value.value + (token.$value.unit || ""); 35 | } 36 | return token.$value; 37 | }; 38 | -------------------------------------------------------------------------------- /tokens/color/red.json: -------------------------------------------------------------------------------- 1 | { 2 | "red": { 3 | "5": { 4 | "$value": "#f9eeee" 5 | }, 6 | "10": { 7 | "$value": "#f8e1de" 8 | }, 9 | "20": { 10 | "$value": "#f7bbb1" 11 | }, 12 | "30": { 13 | "$value": "#f2938c" 14 | }, 15 | "40": { 16 | "$value": "#e9695f" 17 | }, 18 | "50": { 19 | "$value": "#d83933" 20 | }, 21 | "60": { 22 | "$value": "#a23737" 23 | }, 24 | "70": { 25 | "$value": "#6f3331" 26 | }, 27 | "80": { 28 | "$value": "#3e2927" 29 | }, 30 | "90": { 31 | "$value": "#1b1616" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fff3f2" 36 | }, 37 | "10": { 38 | "$value": "#fde0db" 39 | }, 40 | "20": { 41 | "$value": "#fdb8ae" 42 | }, 43 | "30": { 44 | "$value": "#ff8d7b" 45 | }, 46 | "40": { 47 | "$value": "#fb5a47" 48 | }, 49 | "50": { 50 | "$value": "#e52207" 51 | }, 52 | "60": { 53 | "$value": "#b50909" 54 | }, 55 | "70": { 56 | "$value": "#8b0a03" 57 | }, 58 | "80": { 59 | "$value": "#5c1111" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/blue.json: -------------------------------------------------------------------------------- 1 | { 2 | "blue": { 3 | "5": { 4 | "$value": "#eff6fb" 5 | }, 6 | "10": { 7 | "$value": "#d9e8f6" 8 | }, 9 | "20": { 10 | "$value": "#aacdec" 11 | }, 12 | "30": { 13 | "$value": "#73b3e7" 14 | }, 15 | "40": { 16 | "$value": "#4f97d1" 17 | }, 18 | "50": { 19 | "$value": "#2378c3" 20 | }, 21 | "60": { 22 | "$value": "#2c608a" 23 | }, 24 | "70": { 25 | "$value": "#274863" 26 | }, 27 | "80": { 28 | "$value": "#1f303e" 29 | }, 30 | "90": { 31 | "$value": "#11181d" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#e8f5ff" 36 | }, 37 | "10": { 38 | "$value": "#cfe8ff" 39 | }, 40 | "20": { 41 | "$value": "#a1d3ff" 42 | }, 43 | "30": { 44 | "$value": "#58b4ff" 45 | }, 46 | "40": { 47 | "$value": "#2491ff" 48 | }, 49 | "50": { 50 | "$value": "#0076d6" 51 | }, 52 | "60": { 53 | "$value": "#005ea2" 54 | }, 55 | "70": { 56 | "$value": "#0b4778" 57 | }, 58 | "80": { 59 | "$value": "#112f4e" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/cyan.json: -------------------------------------------------------------------------------- 1 | { 2 | "cyan": { 3 | "5": { 4 | "$value": "#e7f6f8" 5 | }, 6 | "10": { 7 | "$value": "#ccecf2" 8 | }, 9 | "20": { 10 | "$value": "#99deea" 11 | }, 12 | "30": { 13 | "$value": "#5dc0d1" 14 | }, 15 | "40": { 16 | "$value": "#449dac" 17 | }, 18 | "50": { 19 | "$value": "#168092" 20 | }, 21 | "60": { 22 | "$value": "#2a646d" 23 | }, 24 | "70": { 25 | "$value": "#2c4a4e" 26 | }, 27 | "80": { 28 | "$value": "#203133" 29 | }, 30 | "90": { 31 | "$value": "#111819" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#e5faff" 36 | }, 37 | "10": { 38 | "$value": "#a8f2ff" 39 | }, 40 | "20": { 41 | "$value": "#52daf2" 42 | }, 43 | "30": { 44 | "$value": "#00bde3" 45 | }, 46 | "40": { 47 | "$value": "#009ec1" 48 | }, 49 | "50": { 50 | "$value": "#0081a1" 51 | }, 52 | "60": { 53 | "$value": "#00687d" 54 | }, 55 | "70": { 56 | "$value": "#0e4f5c" 57 | }, 58 | "80": { 59 | "$value": "#093b44" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/gold.json: -------------------------------------------------------------------------------- 1 | { 2 | "gold": { 3 | "5": { 4 | "$value": "#f5f0e6" 5 | }, 6 | "10": { 7 | "$value": "#f1e5cd" 8 | }, 9 | "20": { 10 | "$value": "#dec69a" 11 | }, 12 | "30": { 13 | "$value": "#c7a97b" 14 | }, 15 | "40": { 16 | "$value": "#ad8b65" 17 | }, 18 | "50": { 19 | "$value": "#8e704f" 20 | }, 21 | "60": { 22 | "$value": "#6b5947" 23 | }, 24 | "70": { 25 | "$value": "#4d4438" 26 | }, 27 | "80": { 28 | "$value": "#322d26" 29 | }, 30 | "90": { 31 | "$value": "#191714" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fef0c8" 36 | }, 37 | "10": { 38 | "$value": "#ffe396" 39 | }, 40 | "20": { 41 | "$value": "#ffbe2e" 42 | }, 43 | "30": { 44 | "$value": "#e5a000" 45 | }, 46 | "40": { 47 | "$value": "#c2850c" 48 | }, 49 | "50": { 50 | "$value": "#936f38" 51 | }, 52 | "60": { 53 | "$value": "#7a591a" 54 | }, 55 | "70": { 56 | "$value": "#5c410a" 57 | }, 58 | "80": { 59 | "$value": "#3b2b15" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/green.json: -------------------------------------------------------------------------------- 1 | { 2 | "green": { 3 | "5": { 4 | "$value": "#eaf4dd" 5 | }, 6 | "10": { 7 | "$value": "#dfeacd" 8 | }, 9 | "20": { 10 | "$value": "#b8d293" 11 | }, 12 | "30": { 13 | "$value": "#9bb672" 14 | }, 15 | "40": { 16 | "$value": "#7d9b4e" 17 | }, 18 | "50": { 19 | "$value": "#607f35" 20 | }, 21 | "60": { 22 | "$value": "#4c6424" 23 | }, 24 | "70": { 25 | "$value": "#3c4a29" 26 | }, 27 | "80": { 28 | "$value": "#293021" 29 | }, 30 | "90": { 31 | "$value": "#161814" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#ddf9c7" 36 | }, 37 | "10": { 38 | "$value": "#c5ee93" 39 | }, 40 | "20": { 41 | "$value": "#98d035" 42 | }, 43 | "30": { 44 | "$value": "#7fb135" 45 | }, 46 | "40": { 47 | "$value": "#719f2a" 48 | }, 49 | "50": { 50 | "$value": "#538200" 51 | }, 52 | "60": { 53 | "$value": "#466c04" 54 | }, 55 | "70": { 56 | "$value": "#2f4a0b" 57 | }, 58 | "80": { 59 | "$value": "#243413" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/mint.json: -------------------------------------------------------------------------------- 1 | { 2 | "mint": { 3 | "5": { 4 | "$value": "#dbf6ed" 5 | }, 6 | "10": { 7 | "$value": "#c7efe2" 8 | }, 9 | "20": { 10 | "$value": "#92d9bb" 11 | }, 12 | "30": { 13 | "$value": "#5abf95" 14 | }, 15 | "40": { 16 | "$value": "#34a37e" 17 | }, 18 | "50": { 19 | "$value": "#2e8367" 20 | }, 21 | "60": { 22 | "$value": "#286846" 23 | }, 24 | "70": { 25 | "$value": "#204e34" 26 | }, 27 | "80": { 28 | "$value": "#193324" 29 | }, 30 | "90": { 31 | "$value": "#0d1a12" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#c9fbeb" 36 | }, 37 | "10": { 38 | "$value": "#83fcd4" 39 | }, 40 | "20": { 41 | "$value": "#0ceda6" 42 | }, 43 | "30": { 44 | "$value": "#04c585" 45 | }, 46 | "40": { 47 | "$value": "#00a871" 48 | }, 49 | "50": { 50 | "$value": "#008659" 51 | }, 52 | "60": { 53 | "$value": "#146947" 54 | }, 55 | "70": { 56 | "$value": "#0c4e29" 57 | }, 58 | "80": { 59 | "$value": "#0d351e" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/indigo.json: -------------------------------------------------------------------------------- 1 | { 2 | "indigo": { 3 | "5": { 4 | "$value": "#efeff8" 5 | }, 6 | "10": { 7 | "$value": "#e5e4fa" 8 | }, 9 | "20": { 10 | "$value": "#c5c5f3" 11 | }, 12 | "30": { 13 | "$value": "#a5a8eb" 14 | }, 15 | "40": { 16 | "$value": "#8889db" 17 | }, 18 | "50": { 19 | "$value": "#676cc8" 20 | }, 21 | "60": { 22 | "$value": "#4d52af" 23 | }, 24 | "70": { 25 | "$value": "#3d4076" 26 | }, 27 | "80": { 28 | "$value": "#2b2c40" 29 | }, 30 | "90": { 31 | "$value": "#16171f" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#f0f0ff" 36 | }, 37 | "10": { 38 | "$value": "#e0e0ff" 39 | }, 40 | "20": { 41 | "$value": "#ccceff" 42 | }, 43 | "30": { 44 | "$value": "#a3a7fa" 45 | }, 46 | "40": { 47 | "$value": "#8289ff" 48 | }, 49 | "50": { 50 | "$value": "#656bd7" 51 | }, 52 | "60": { 53 | "$value": "#4a50c4" 54 | }, 55 | "70": { 56 | "$value": "#3333a3" 57 | }, 58 | "80": { 59 | "$value": "#212463" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/magenta.json: -------------------------------------------------------------------------------- 1 | { 2 | "magenta": { 3 | "5": { 4 | "$value": "#f9f0f2" 5 | }, 6 | "10": { 7 | "$value": "#f6e1e8" 8 | }, 9 | "20": { 10 | "$value": "#f0bbcc" 11 | }, 12 | "30": { 13 | "$value": "#e895b3" 14 | }, 15 | "40": { 16 | "$value": "#e0699f" 17 | }, 18 | "50": { 19 | "$value": "#c84281" 20 | }, 21 | "60": { 22 | "$value": "#8b4566" 23 | }, 24 | "70": { 25 | "$value": "#66364b" 26 | }, 27 | "80": { 28 | "$value": "#402731" 29 | }, 30 | "90": { 31 | "$value": "#1b1617" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fff2f5" 36 | }, 37 | "10": { 38 | "$value": "#ffddea" 39 | }, 40 | "20": { 41 | "$value": "#ffb4cf" 42 | }, 43 | "30": { 44 | "$value": "#ff87b2" 45 | }, 46 | "40": { 47 | "$value": "#fd4496" 48 | }, 49 | "50": { 50 | "$value": "#d72d79" 51 | }, 52 | "60": { 53 | "$value": "#ab2165" 54 | }, 55 | "70": { 56 | "$value": "#731f44" 57 | }, 58 | "80": { 59 | "$value": "#4f172e" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/orange.json: -------------------------------------------------------------------------------- 1 | { 2 | "orange": { 3 | "5": { 4 | "$value": "#f6efe9" 5 | }, 6 | "10": { 7 | "$value": "#f2e4d4" 8 | }, 9 | "20": { 10 | "$value": "#f3bf90" 11 | }, 12 | "30": { 13 | "$value": "#f09860" 14 | }, 15 | "40": { 16 | "$value": "#dd7533" 17 | }, 18 | "50": { 19 | "$value": "#a86437" 20 | }, 21 | "60": { 22 | "$value": "#775540" 23 | }, 24 | "70": { 25 | "$value": "#524236" 26 | }, 27 | "80": { 28 | "$value": "#332d27" 29 | }, 30 | "90": { 31 | "$value": "#1b1614" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fef2e4" 36 | }, 37 | "10": { 38 | "$value": "#fce2c5" 39 | }, 40 | "20": { 41 | "$value": "#ffbc78" 42 | }, 43 | "30": { 44 | "$value": "#fa9441" 45 | }, 46 | "40": { 47 | "$value": "#e66f0e" 48 | }, 49 | "50": { 50 | "$value": "#c05600" 51 | }, 52 | "60": { 53 | "$value": "#8c471c" 54 | }, 55 | "70": { 56 | "$value": "#5f3617" 57 | }, 58 | "80": { 59 | "$value": "#352313" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/red-cool.json: -------------------------------------------------------------------------------- 1 | { 2 | "red-cool": { 3 | "5": { 4 | "$value": "#f8eff1" 5 | }, 6 | "10": { 7 | "$value": "#f3e1e4" 8 | }, 9 | "20": { 10 | "$value": "#ecbec6" 11 | }, 12 | "30": { 13 | "$value": "#e09aa6" 14 | }, 15 | "40": { 16 | "$value": "#e16b80" 17 | }, 18 | "50": { 19 | "$value": "#cd425b" 20 | }, 21 | "60": { 22 | "$value": "#9e394b" 23 | }, 24 | "70": { 25 | "$value": "#68363f" 26 | }, 27 | "80": { 28 | "$value": "#40282c" 29 | }, 30 | "90": { 31 | "$value": "#1e1517" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fff2f5" 36 | }, 37 | "10": { 38 | "$value": "#f8dfe2" 39 | }, 40 | "20": { 41 | "$value": "#f8b9c5" 42 | }, 43 | "30": { 44 | "$value": "#fd8ba0" 45 | }, 46 | "40": { 47 | "$value": "#f45d79" 48 | }, 49 | "50": { 50 | "$value": "#e41d3d" 51 | }, 52 | "60": { 53 | "$value": "#b21d38" 54 | }, 55 | "70": { 56 | "$value": "#822133" 57 | }, 58 | "80": { 59 | "$value": "#4f1c24" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/red-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "red-warm": { 3 | "5": { 4 | "$value": "#f6efea" 5 | }, 6 | "10": { 7 | "$value": "#f4e3db" 8 | }, 9 | "20": { 10 | "$value": "#ecc0a7" 11 | }, 12 | "30": { 13 | "$value": "#dca081" 14 | }, 15 | "40": { 16 | "$value": "#d27a56" 17 | }, 18 | "50": { 19 | "$value": "#c3512c" 20 | }, 21 | "60": { 22 | "$value": "#805039" 23 | }, 24 | "70": { 25 | "$value": "#524236" 26 | }, 27 | "80": { 28 | "$value": "#332d29" 29 | }, 30 | "90": { 31 | "$value": "#1f1c18" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fff5ee" 36 | }, 37 | "10": { 38 | "$value": "#fce1d4" 39 | }, 40 | "20": { 41 | "$value": "#f6bd9c" 42 | }, 43 | "30": { 44 | "$value": "#f39268" 45 | }, 46 | "40": { 47 | "$value": "#ef5e25" 48 | }, 49 | "50": { 50 | "$value": "#d54309" 51 | }, 52 | "60": { 53 | "$value": "#9c3d10" 54 | }, 55 | "70": { 56 | "$value": "#63340f" 57 | }, 58 | "80": { 59 | "$value": "#3e2a1e" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/violet.json: -------------------------------------------------------------------------------- 1 | { 2 | "violet": { 3 | "5": { 4 | "$value": "#f4f1f9" 5 | }, 6 | "10": { 7 | "$value": "#ebe3f9" 8 | }, 9 | "20": { 10 | "$value": "#d0c3e9" 11 | }, 12 | "30": { 13 | "$value": "#b8a2e3" 14 | }, 15 | "40": { 16 | "$value": "#9d84d2" 17 | }, 18 | "50": { 19 | "$value": "#8168b3" 20 | }, 21 | "60": { 22 | "$value": "#665190" 23 | }, 24 | "70": { 25 | "$value": "#4c3d69" 26 | }, 27 | "80": { 28 | "$value": "#312b3f" 29 | }, 30 | "90": { 31 | "$value": "#18161d" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#f7f2ff" 36 | }, 37 | "10": { 38 | "$value": "#ede3ff" 39 | }, 40 | "20": { 41 | "$value": "#d5bfff" 42 | }, 43 | "30": { 44 | "$value": "#c39deb" 45 | }, 46 | "40": { 47 | "$value": "#ad79e9" 48 | }, 49 | "50": { 50 | "$value": "#9355dc" 51 | }, 52 | "60": { 53 | "$value": "#783cb9" 54 | }, 55 | "70": { 56 | "$value": "#54278f" 57 | }, 58 | "80": { 59 | "$value": "#39215e" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/yellow.json: -------------------------------------------------------------------------------- 1 | { 2 | "yellow": { 3 | "5": { 4 | "$value": "#faf3d1" 5 | }, 6 | "10": { 7 | "$value": "#f5e6af" 8 | }, 9 | "20": { 10 | "$value": "#e6c74c" 11 | }, 12 | "30": { 13 | "$value": "#c9ab48" 14 | }, 15 | "40": { 16 | "$value": "#a88f48" 17 | }, 18 | "50": { 19 | "$value": "#8a7237" 20 | }, 21 | "60": { 22 | "$value": "#6b5a39" 23 | }, 24 | "70": { 25 | "$value": "#504332" 26 | }, 27 | "80": { 28 | "$value": "#332d27" 29 | }, 30 | "90": { 31 | "$value": "#1a1614" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fff5c2" 36 | }, 37 | "10": { 38 | "$value": "#fee685" 39 | }, 40 | "20": { 41 | "$value": "#face00" 42 | }, 43 | "30": { 44 | "$value": "#ddaa01" 45 | }, 46 | "40": { 47 | "$value": "#b38c00" 48 | }, 49 | "50": { 50 | "$value": "#947100" 51 | }, 52 | "60": { 53 | "$value": "#776017" 54 | }, 55 | "70": { 56 | "$value": "#5c4809" 57 | }, 58 | "80": { 59 | "$value": "#422d19" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/blue-cool.json: -------------------------------------------------------------------------------- 1 | { 2 | "blue-cool": { 3 | "5": { 4 | "$value": "#e7f2f5" 5 | }, 6 | "10": { 7 | "$value": "#dae9ee" 8 | }, 9 | "20": { 10 | "$value": "#adcfdc" 11 | }, 12 | "30": { 13 | "$value": "#82b4c9" 14 | }, 15 | "40": { 16 | "$value": "#6499af" 17 | }, 18 | "50": { 19 | "$value": "#3a7d95" 20 | }, 21 | "60": { 22 | "$value": "#2e6276" 23 | }, 24 | "70": { 25 | "$value": "#224a58" 26 | }, 27 | "80": { 28 | "$value": "#14333d" 29 | }, 30 | "90": { 31 | "$value": "#0f191c" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#e1f3f8" 36 | }, 37 | "10": { 38 | "$value": "#c3ebfa" 39 | }, 40 | "20": { 41 | "$value": "#97d4ea" 42 | }, 43 | "30": { 44 | "$value": "#59b9de" 45 | }, 46 | "40": { 47 | "$value": "#28a0cb" 48 | }, 49 | "50": { 50 | "$value": "#0d7ea2" 51 | }, 52 | "60": { 53 | "$value": "#07648d" 54 | }, 55 | "70": { 56 | "$value": "#074b69" 57 | }, 58 | "80": { 59 | "$value": "#002d3f" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/blue-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "blue-warm": { 3 | "5": { 4 | "$value": "#ecf1f7" 5 | }, 6 | "10": { 7 | "$value": "#e1e7f1" 8 | }, 9 | "20": { 10 | "$value": "#bbcae4" 11 | }, 12 | "30": { 13 | "$value": "#98afd2" 14 | }, 15 | "40": { 16 | "$value": "#7292c7" 17 | }, 18 | "50": { 19 | "$value": "#4a77b4" 20 | }, 21 | "60": { 22 | "$value": "#345d96" 23 | }, 24 | "70": { 25 | "$value": "#2f4668" 26 | }, 27 | "80": { 28 | "$value": "#252f3e" 29 | }, 30 | "90": { 31 | "$value": "#13171f" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#edf5ff" 36 | }, 37 | "10": { 38 | "$value": "#d4e5ff" 39 | }, 40 | "20": { 41 | "$value": "#adcdff" 42 | }, 43 | "30": { 44 | "$value": "#81aefc" 45 | }, 46 | "40": { 47 | "$value": "#5994f6" 48 | }, 49 | "50": { 50 | "$value": "#2672de" 51 | }, 52 | "60": { 53 | "$value": "#0050d8" 54 | }, 55 | "70": { 56 | "$value": "#1a4480" 57 | }, 58 | "80": { 59 | "$value": "#162e51" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/green-cool.json: -------------------------------------------------------------------------------- 1 | { 2 | "green-cool": { 3 | "5": { 4 | "$value": "#ecf3ec" 5 | }, 6 | "10": { 7 | "$value": "#dbebde" 8 | }, 9 | "20": { 10 | "$value": "#b4d0b9" 11 | }, 12 | "30": { 13 | "$value": "#86b98e" 14 | }, 15 | "40": { 16 | "$value": "#5e9f69" 17 | }, 18 | "50": { 19 | "$value": "#4d8055" 20 | }, 21 | "60": { 22 | "$value": "#446443" 23 | }, 24 | "70": { 25 | "$value": "#37493b" 26 | }, 27 | "80": { 28 | "$value": "#28312a" 29 | }, 30 | "90": { 31 | "$value": "#1a1f1a" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#e3f5e1" 36 | }, 37 | "10": { 38 | "$value": "#b7f5bd" 39 | }, 40 | "20": { 41 | "$value": "#70e17b" 42 | }, 43 | "30": { 44 | "$value": "#21c834" 45 | }, 46 | "40": { 47 | "$value": "#00a91c" 48 | }, 49 | "50": { 50 | "$value": "#008817" 51 | }, 52 | "60": { 53 | "$value": "#216e1f" 54 | }, 55 | "70": { 56 | "$value": "#154c21" 57 | }, 58 | "80": { 59 | "$value": "#19311e" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/green-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "green-warm": { 3 | "5": { 4 | "$value": "#f1f4d7" 5 | }, 6 | "10": { 7 | "$value": "#e7eab7" 8 | }, 9 | "20": { 10 | "$value": "#cbd17a" 11 | }, 12 | "30": { 13 | "$value": "#a6b557" 14 | }, 15 | "40": { 16 | "$value": "#8a984b" 17 | }, 18 | "50": { 19 | "$value": "#6f7a41" 20 | }, 21 | "60": { 22 | "$value": "#5a5f38" 23 | }, 24 | "70": { 25 | "$value": "#45472f" 26 | }, 27 | "80": { 28 | "$value": "#2d2f21" 29 | }, 30 | "90": { 31 | "$value": "#171712" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#f5fbc1" 36 | }, 37 | "10": { 38 | "$value": "#e7f434" 39 | }, 40 | "20": { 41 | "$value": "#c5d30a" 42 | }, 43 | "30": { 44 | "$value": "#a3b72c" 45 | }, 46 | "40": { 47 | "$value": "#7e9c1d" 48 | }, 49 | "50": { 50 | "$value": "#6a7d00" 51 | }, 52 | "60": { 53 | "$value": "#5a6613" 54 | }, 55 | "70": { 56 | "$value": "#4b4e10" 57 | }, 58 | "80": { 59 | "$value": "#38380b" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/mint-cool.json: -------------------------------------------------------------------------------- 1 | { 2 | "mint-cool": { 3 | "5": { 4 | "$value": "#e0f7f6" 5 | }, 6 | "10": { 7 | "$value": "#c4eeeb" 8 | }, 9 | "20": { 10 | "$value": "#9bd4cf" 11 | }, 12 | "30": { 13 | "$value": "#6fbab3" 14 | }, 15 | "40": { 16 | "$value": "#4f9e99" 17 | }, 18 | "50": { 19 | "$value": "#40807e" 20 | }, 21 | "60": { 22 | "$value": "#376462" 23 | }, 24 | "70": { 25 | "$value": "#2a4b45" 26 | }, 27 | "80": { 28 | "$value": "#203131" 29 | }, 30 | "90": { 31 | "$value": "#111818" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#d5fbf3" 36 | }, 37 | "10": { 38 | "$value": "#7efbe1" 39 | }, 40 | "20": { 41 | "$value": "#29e1cb" 42 | }, 43 | "30": { 44 | "$value": "#1dc2ae" 45 | }, 46 | "40": { 47 | "$value": "#00a398" 48 | }, 49 | "50": { 50 | "$value": "#008480" 51 | }, 52 | "60": { 53 | "$value": "#0f6460" 54 | }, 55 | "70": { 56 | "$value": "#0b4b3f" 57 | }, 58 | "80": { 59 | "$value": "#123131" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/indigo-cool.json: -------------------------------------------------------------------------------- 1 | { 2 | "indigo-cool": { 3 | "5": { 4 | "$value": "#eef0f9" 5 | }, 6 | "10": { 7 | "$value": "#e1e6f9" 8 | }, 9 | "20": { 10 | "$value": "#bbc8f5" 11 | }, 12 | "30": { 13 | "$value": "#96abee" 14 | }, 15 | "40": { 16 | "$value": "#6b8ee8" 17 | }, 18 | "50": { 19 | "$value": "#496fd8" 20 | }, 21 | "60": { 22 | "$value": "#3f57a6" 23 | }, 24 | "70": { 25 | "$value": "#374274" 26 | }, 27 | "80": { 28 | "$value": "#292d42" 29 | }, 30 | "90": { 31 | "$value": "#151622" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#edf0ff" 36 | }, 37 | "10": { 38 | "$value": "#dee5ff" 39 | }, 40 | "20": { 41 | "$value": "#b8c8ff" 42 | }, 43 | "30": { 44 | "$value": "#94adff" 45 | }, 46 | "40": { 47 | "$value": "#628ef4" 48 | }, 49 | "50": { 50 | "$value": "#4866ff" 51 | }, 52 | "60": { 53 | "$value": "#3e4ded" 54 | }, 55 | "70": { 56 | "$value": "#222fbf" 57 | }, 58 | "80": { 59 | "$value": "#1b2b85" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/indigo-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "indigo-warm": { 3 | "5": { 4 | "$value": "#f1eff7" 5 | }, 6 | "10": { 7 | "$value": "#e7e3fa" 8 | }, 9 | "20": { 10 | "$value": "#cbc4f2" 11 | }, 12 | "30": { 13 | "$value": "#afa5e8" 14 | }, 15 | "40": { 16 | "$value": "#9287d8" 17 | }, 18 | "50": { 19 | "$value": "#7665d1" 20 | }, 21 | "60": { 22 | "$value": "#5e519e" 23 | }, 24 | "70": { 25 | "$value": "#453c7b" 26 | }, 27 | "80": { 28 | "$value": "#2e2c40" 29 | }, 30 | "90": { 31 | "$value": "#18161d" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#f5f2ff" 36 | }, 37 | "10": { 38 | "$value": "#e4deff" 39 | }, 40 | "20": { 41 | "$value": "#cfc4fd" 42 | }, 43 | "30": { 44 | "$value": "#b69fff" 45 | }, 46 | "40": { 47 | "$value": "#967efb" 48 | }, 49 | "50": { 50 | "$value": "#745fe9" 51 | }, 52 | "60": { 53 | "$value": "#5942d2" 54 | }, 55 | "70": { 56 | "$value": "#3d2c9d" 57 | }, 58 | "80": { 59 | "$value": "#261f5b" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/orange-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "orange-warm": { 3 | "5": { 4 | "$value": "#faeee5" 5 | }, 6 | "10": { 7 | "$value": "#fbe0d0" 8 | }, 9 | "20": { 10 | "$value": "#f7bca2" 11 | }, 12 | "30": { 13 | "$value": "#f3966d" 14 | }, 15 | "40": { 16 | "$value": "#e17141" 17 | }, 18 | "50": { 19 | "$value": "#bd5727" 20 | }, 21 | "60": { 22 | "$value": "#914734" 23 | }, 24 | "70": { 25 | "$value": "#633a32" 26 | }, 27 | "80": { 28 | "$value": "#3d2925" 29 | }, 30 | "90": { 31 | "$value": "#1c1615" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fff3ea" 36 | }, 37 | "10": { 38 | "$value": "#ffe2d1" 39 | }, 40 | "20": { 41 | "$value": "#fbbaa7" 42 | }, 43 | "30": { 44 | "$value": "#fc906d" 45 | }, 46 | "40": { 47 | "$value": "#ff580a" 48 | }, 49 | "50": { 50 | "$value": "#cf4900" 51 | }, 52 | "60": { 53 | "$value": "#a72f10" 54 | }, 55 | "70": { 56 | "$value": "#782312" 57 | }, 58 | "80": { 59 | "$value": "#3d231d" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /tokens/color/violet-warm.json: -------------------------------------------------------------------------------- 1 | { 2 | "violet-warm": { 3 | "5": { 4 | "$value": "#f8f0f9" 5 | }, 6 | "10": { 7 | "$value": "#f6dff8" 8 | }, 9 | "20": { 10 | "$value": "#e2bee4" 11 | }, 12 | "30": { 13 | "$value": "#d29ad8" 14 | }, 15 | "40": { 16 | "$value": "#bf77c8" 17 | }, 18 | "50": { 19 | "$value": "#b04abd" 20 | }, 21 | "60": { 22 | "$value": "#864381" 23 | }, 24 | "70": { 25 | "$value": "#5c395a" 26 | }, 27 | "80": { 28 | "$value": "#382936" 29 | }, 30 | "90": { 31 | "$value": "#1b151b" 32 | }, 33 | "vivid": { 34 | "5": { 35 | "$value": "#fef2ff" 36 | }, 37 | "10": { 38 | "$value": "#fbdcff" 39 | }, 40 | "20": { 41 | "$value": "#f4b2ff" 42 | }, 43 | "30": { 44 | "$value": "#ee83ff" 45 | }, 46 | "40": { 47 | "$value": "#d85bef" 48 | }, 49 | "50": { 50 | "$value": "#be32d0" 51 | }, 52 | "60": { 53 | "$value": "#93348c" 54 | }, 55 | "70": { 56 | "$value": "#711e6c" 57 | }, 58 | "80": { 59 | "$value": "#481441" 60 | } 61 | } 62 | }, 63 | "$type": "color" 64 | } 65 | -------------------------------------------------------------------------------- /config/stylelint.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import("stylelint").Config} */ 2 | export default { 3 | extends: ["stylelint-config-standard"], 4 | plugins: ["stylelint-order"], 5 | rules: { 6 | "declaration-block-no-redundant-longhand-properties": null, 7 | "no-descending-specificity": null, 8 | "no-duplicate-selectors": null, 9 | "number-max-precision": 5, 10 | "order/order": ["custom-properties", "declarations"], 11 | "order/properties-alphabetical-order": true, 12 | /** 13 | * This selector pattern permits BEM-style patterns with an optional device 14 | * prefix (e.g. `tablet\\:`, `mobile-lg\\:`) and up to 2 optional modifier 15 | * suffixes (e.g. `--hover`) for backwards compatibility with the USWDS core 16 | * styles. It also allows kebab-case selectors that are safer to use within 17 | * the Shadow DOM where style encapsulated is provided by the Shadow DOM's 18 | * scoping mechanism and style collisions are less likely. 19 | */ 20 | "selector-class-pattern": [ 21 | "^([a-z\-]+\\:)?[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$", 22 | { 23 | message: 24 | "Class selectors can be named in BEM format or kebab-case. See: https://en.bem.info/methodology/naming-convention/#two-dashes-style", 25 | }, 26 | ], 27 | "value-keyword-case": null, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /e2e/models/storybook-page.ts: -------------------------------------------------------------------------------- 1 | import { Page } from "@playwright/test"; 2 | 3 | export class StorybookPage { 4 | constructor(private readonly page: Page) {} 5 | 6 | /** 7 | * Navigate to a specific story 8 | * @param storyId - The story ID (e.g., "components-banner--default") 9 | * @param options - Additional options for the story URL 10 | */ 11 | async goto( 12 | storyId: string, 13 | options?: { 14 | globals?: string; 15 | args?: string; 16 | viewMode?: "story" | "docs"; 17 | baseUrl?: string; 18 | }, 19 | ) { 20 | const { 21 | globals = "", 22 | args = "", 23 | viewMode = "story", 24 | baseUrl = "http://localhost:3000", 25 | } = options || {}; 26 | 27 | const storyUrl = `${baseUrl}/iframe.html?globals=${globals}&args=${args}&id=${storyId}&viewMode=${viewMode}`; 28 | await this.page.goto(storyUrl); 29 | } 30 | 31 | /** 32 | * Navigate to a specific story and wait for the DOM to be loaded 33 | * @param storyId - The story ID (e.g., "components-banner--default") 34 | * @param options - Additional options for the story URL 35 | */ 36 | async gotoAndWaitForDomLoaded( 37 | storyId: string, 38 | options?: Parameters[1], 39 | ) { 40 | await this.goto(storyId, options); 41 | await this.page.waitForLoadState("domcontentloaded"); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /internals/build-helpers/index.ts: -------------------------------------------------------------------------------- 1 | import { type Limit } from "vite-plugin-bundlesize"; 2 | 3 | export type Entry = { name: string; path: string; sizeLimit: string }; 4 | 5 | /** 6 | * Converts an `Entry` object into a `Limit` object, mapping and transforming 7 | * the properties to adhere to the `Limit` type structure. 8 | * 9 | * @param {Entry} entry - The input object containing information about the entry. 10 | * @return {Limit} - A transformed object with details about the limit, including 11 | * the updated name, size limit, and compression mode. 12 | */ 13 | export const mapEntryToLimit = (entry: Entry): Limit => { 14 | return { 15 | name: `${entry.name}.js`, 16 | limit: entry.sizeLimit, 17 | mode: "brotli", 18 | }; 19 | }; 20 | 21 | /** 22 | * Maps an array of Entry objects to a key-value pair object, where each entry's name 23 | * is used as the key and its path is used as the value. 24 | * 25 | * @param {Entry[]} entries - The array of Entry objects to be mapped into key-value pairs. 26 | * @return {Record} - An object representing the key-value pairs derived from the entries, 27 | * where the key is the entry's name and the value is the entry's path. 28 | */ 29 | export function mapEntriesToKeyValue(entries: Entry[]): Record { 30 | return Object.fromEntries(entries.map((entry) => [entry.name, entry.path])); 31 | } 32 | -------------------------------------------------------------------------------- /src/utils/index.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect, vi, beforeEach } from "vitest"; 2 | import { defineCustomElement } from "./index"; 3 | 4 | describe("defineCustomElement", () => { 5 | let customElementsDefineSpy: ReturnType; 6 | let customElementsGetSpy: ReturnType; 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 | }); 35 | -------------------------------------------------------------------------------- /config/custom-elements-manifest.config.js: -------------------------------------------------------------------------------- 1 | import { customElementReactWrapperPlugin } from "custom-element-react-wrappers"; 2 | import { customElementSolidJsPlugin } from "custom-element-solidjs-integration"; 3 | import { customElementJsxPlugin } from "custom-element-jsx-integration"; 4 | import { customElementVuejsPlugin } from "custom-element-vuejs-integration"; 5 | import { customElementSveltePlugin } from "custom-element-svelte-integration"; 6 | 7 | const defaultOptions = { 8 | outdir: "./dist/types", 9 | modulePath: (_, tagName) => `../dist/components/${tagName}.js`, 10 | }; 11 | 12 | export default { 13 | plugins: [ 14 | customElementReactWrapperPlugin({ 15 | outdir: "./dist/components/frameworks/react", 16 | modulePath: (_, tagName) => `../../${tagName}.js`, 17 | }), 18 | customElementSolidJsPlugin({ 19 | ...defaultOptions, 20 | fileName: "custom-element-solidjs.d.ts", 21 | }), 22 | customElementJsxPlugin({ 23 | ...defaultOptions, 24 | }), 25 | customElementVuejsPlugin({ 26 | ...defaultOptions, 27 | fileName: "custom-element-vuejs.d.ts", 28 | }), 29 | customElementSveltePlugin({ 30 | ...defaultOptions, 31 | fileName: "custom-element-svelte.d.ts", 32 | }), 33 | ], 34 | globs: ["./src/components/**/*.{js,ts}"], 35 | exclude: [ 36 | "./src/components/**/*.spec.{js,ts}", 37 | "./src/components/**/*.stories.{js,ts}", 38 | ], 39 | litelement: true, 40 | }; 41 | -------------------------------------------------------------------------------- /examples/with-react/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-solid/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/with-vue/public/vite.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------