USWDS 3.8.0

Features

Package	A11y	Breaking	Markup change	Description
usa-checkbox, uswds-core	-	-	-	Added styles for indeterminate checkboxes. Checkboxes will now display as indeterminate when you set input.indeterminate = true via JavaScript or add the data-indeterminate attribute. This is only a style addition and does not affect checkbox functionality. Thanks @lpsinger! (#5713)
usa-in-page-nav	-	-	-	Added the ability to customize which headings will be pulled into the in-page navigation link list. Use the optional data-heading-selector attribute to designate the heading levels that should be included in the component. By default, the component will pull all H2 and H3 headers. (#5444)
usa-table, uswds-core	-	-	-	Added a sticky header variant to the table component. Use the new .usa-table--sticky-header class to enable sticky positioning on table headers. Use the new $theme-table-sticky-top-offset setting to set the value of the top offset for sticky table headers. (#5420) Thanks @etanb!
usa-table, uswds-core				Added the ability to customize the table background color at a theme level. Use the $theme-table-background-color setting to set your desired table background color. (#5420)
usa-validation	-	-	-	Added textarea support to the validation component. (#5233) Thanks @danbrady!
usa-layout-docs, uswds-core	Yes	Yes	Yes	Added $theme-sidenav-reorder for documentation page sidenav. Use $theme-sidenav-reorder to support old CSS order functionality. This setting can introduce usability issues, so we suggest that teams update their sidenav markup instead. (#5807)

Bug fixes

Package	A11y	Breaking	Markup change	Description
usa-button, uswds-core	-	-	-	Improved the vertical alignment of usa-icon elements inside of usa-button. Use the new $theme-button-icon-gap setting to set the width of the horizontal gap between the button's text and icon. (#5398)
usa-button, usa-checkbox, usa-combo-box, usa-file-input, usa-radio, uswds-core	Yes	-	-	Added automated color contrast checks for disabled tokens. On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback also fails to meet minimum contrast requirements, the system will provide a warning in the terminal. (#5455)
usa-button-group	-	-	-	Improved the appearance of button groups when button text wraps to multiple lines. Now, every button in the group will be the same height. (#5657) Thanks @aduth!
usa-date-picker	Yes	-	-	Added focus styles to the calendar button in high contrast mode. Now, the calendar icon changes to the highlight high contrast token on focus. (#5701)
usa-footer	-	-	-	Fixed a bug that caused some grid utility classes to be ignored when used inside usa-footer. (#5675)
usa-layout-docs, uswds-core	Yes	Yes	Yes	Updated the order of the side navigation markup on the documentation page template. Now, the HTML order of the page matches the visual order at narrow screen widths. (#5794)
usa-table	Yes	-	Yes	Simplified the structure of the scrollable table component example. This removes some accessibility errors related to incomplete table markup. (#5783)

Breaking changes

Documentation page template

We're updating the documentation template to better match the HTML order of the side navigation to the visual order at mobile widths. Before USWDS 3.8.0 we used CSS to re-order the sidenav at mobile widths, placing it below the page's main text content. Starting with USWDS 3.8.0, our default styles no longer use CSS to re-order the side navigation. Now, we suggest including a duplicate sidenav after the main text content, using utility classes to hide/show the sidenavs at the proper widths. The example below shows a before/after.

<div class="grid-container">
  <div class="grid-row grid-gap">
-   <div class="usa-layout-docs__sidenav">
+   <!-- One of two sidenav's only shown in desktop breakpoints. --> 
+   <div class="usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-3">
      {{ SIDENAV_MARKUP }}
    </div>
-   <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+   <main class="desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
      {{ MAIN_CONTENT }}
    </main>
  </div>
+ <!-- New duplicate section only shown on mobile. -->
+  <div class="usa-layout-docs__sidenav desktop:display-none">
+    {{ SIDENAV_MARKUP }}
+  </div>
</div>

Teams that wish to maintain the old CSS order functionality can temporarily add $theme-sidenav-reorder: true to their project settings. This setting reinstates the CSS re-ordering. As we mentioned, this setting can introduce usability issues, so the best long-term solution is to update the sidenav markup instead.

Dependencies and security

Dependency name	Previous version	New version
@babel/core	7.23.2	7.23.6
@babel/preset-env	7.23.2	7.23.6
@types/node	20.8.9	20.10.4
eslint	8.52.0	8.55.0
eslint-config-prettier	9.0.0	9.1.0
gulp-mocha	8.0.0	9.0.0
handlebars-helpers	0.10.0	--
html-webpack-plugin	5.5.3	5.5.4
postcss	8.4.31	8.4.32
postcss-import	--	15.1.0
postcss-preset-env	9.2.0	9.3.0
postcss-sass-loader	1.1.0	--
resolve-url-loader	4.0.0	5.0.0
sass	--	1.69.5
snyk	1.1237.0	1.1262.0
svgo	3.0.2	3.1.0
typescript	5.2.2	5.3.3

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
15 moderate, 25 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 072f0f8333b1aa000183e00676616d9ff5a174e27ca8d35c130ca70ea5d4f66d

USWDS 3.7.1

What's new in USWDS 3.7.1

Features

Package	A11Y	Breaking	Markup change	Description
usa-footer	—	—	—	Removed the usa-layout-grid dependency from the usa-footer package. This update reduces the footer package size. Thanks @danbrady! (#5289) If you notice changes in your layout after making this update, your Sass might be missing the usa-layout-grid package. You can include it by adding @forward usa-layout-grid to your Sass entry point.

Bug fixes

Package	A11Y	Breaking	Markup change	Description
usa-banner	—	—	—	Removed invalid styles from the banner component. These styles had no effect and were safely removed. Thanks @aduth! (#5587)
usa-dark-background, usa-section	Yes	—	—	Fixed :visited link styling in usa-section--dark elements. Thanks @aduth! (#5567)
usa-footer	—	—	—	Fixed the right alignment of footer elements. Footer content should now align with other page elements. Thanks @danbrady! (#5234)
usa-header, usa-nav	—	—	—	Fixed the horizontal alignment of header submenu elements. Now, usa-nav__submenu elements should align with other header elements. Thanks @lpsinger! (#5649)
usa-nav	—	—	—	Fixed the vertical alignment of the expand icon on header navigation items. The icon will now maintain vertical alignment when menu button text breaks to multiple lines. Thanks @aduth! (#5654)
usa-nav	—	—	—	Fixed a bug that caused long button text to overflow into its padding. Now, button text breaks to multiple lines as expected and maintains vertical center alignment. (#5655)
usa-nav	—	—	—	Fixed a bug that prevented $theme-max-header-width from accepting a value of "none". (#5624)
uswds-core	—	—	—	Fixed a bug that prevented the CSS from generating .left-full, .right-full, and .top-full utility classes. (#5633)

Dependencies and security

Dependency name	Previous version	New version
jsdom	19.0.0	22.1.0

Thanks @deckar01 for contributing this dependency update!

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
24 moderate, 27 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 6e1d3032e1a7ac614d05fe76c87cc398725d84e5ba0656a7a17c6ca4c7579526

USWDS 3.7.0

What's new in USWDS 3.7.0

Items we've identified with a Markup change have a non-breaking change in their component markup. Teams should update their implementations and templates to reflect this change.

Features

Package	A11y	Breaking	Markup change	Description
usa-banner	—	—	—	Updated the banner component so that it initializes without requiring import of the usa-accordion package. (#5551)
usa-banner	—	—	—	Optimized the us_flag_small.png icon and added a vector us_flag.svg icon. Update this asset in your project for improved image quality. Thanks @aduth! (#5542)
usa-data-picker	Yes	—	—	Improved keyboard navigation for screen readers in the date picker component. This change enables table navigation controls in the calendar, which creates more consistent and intuitive navigation across browsers and screen readers. (#5374)
usa-icon	—	—	—	Added the X social media icon. We added the X social media icon, but also preserved the legacy Twitter icon to allow teams to make the decision on when to update their social media information. (#5589)
usa-modal	—	—	—	Updated modal JavaScript to include fallbacks and error messages when initialization cannot be completed. This update also prevented errors when trying to initialize modal twice. (#5315)

Bug fixes

Package	A11y	Breaking	Markup change	Description
usa-card	—	—	—	Fixed a bug that prevented $theme-card-padding-y from accepting expected token values. (#5571)
usa-footer	Yes	—	—	Restored underlines to footer links in default states. Now, footer links meet WCAG 2.0 AA requirements. (#5588)
usa-identifier	Yes	—	Yes	Updated the screen reader readout to say "Official" instead of "An official". When read out on a screen reader, the statement "An official website of [Agency name]" can sound like "UNofficial website of [Agency name]". To minimize confusion, we hid the word "An" from screen readers with aria-hidden. To improve the screen reader experience, update your component markup. (#5491)
usa-range	Yes	—	Yes	Removed redundant ARIA attributes on the range component to improve the screen reader experience. To incorporate these changes, update your range component markup. (#5413)
usa-range	Yes	—	Yes	Added optional data-text-unit and data-text-preposition attributes to range slider. When used alongside the max attribute, the optional data-text-unit attribute adds language for the unit type. For example, adding a value of "stars" enables a readout like "3.5 stars of 5". The optional data-text-preposition creates the ability to customize the language of the preposition "of" in that string. (#5472)
usa-site-alert	—	—	—	Removed the top margin from the site alert component. Thanks @lpsinger! (#5550)
uswds-core	—	—	—	Fixed a bug that prevented $theme-site-margins-width from accepting expected token values. (#5582)

Dependencies and security

Updated the default node version from 16 to 20. (#5560)

Dependency name	Previous version	New version
classlist-polyfill	1.0.3	1.2.0
@babel/core	7.16.7	7.23.2
@babel/preset-env	7.16.7	7.23.2
@chanzuckerberg/axe-storybook-testing	6.3.0	6.3.1
@material-design-icons/svg	0.11.1	0.14.13
@storybook/addon-a11y	6.5.12	6.5.16
@storybook/addon-essentials	6.5.12	6.5.16
@storybook/addon-links	6.5.12	6.5.16
@storybook/builder-webpack5	6.5.12	6.5.16
@storybook/html	6.5.12	6.5.16
@storybook/manager-webpack5	6.5.12	6.5.16
@types/node	16.11.19	20.8.9
ansi-colors	4.1.1	4.1.3
autoprefixer	10.4.1	10.4.16
axe-core	4.6.3	4.8.2
babel-loader	8.2.2	9.1.3
css-loader	6.2.0	6.8.1
eslint	8.4.1	8.52.0
eslint-config-prettier	8.3.0	9.0.0
eslint-plugin-import	2.25.4	2.29.0
eslint-plugin-no-unsanitized	4.0.1	4.0.2
fancy-log	1.3.3	2.0.0
gulp-replace	1.1.3	1.1.4
handlebars-helpers	0.9.8	0.10.0
html-webpack-plugin	5.4.0	5.5.3
postcss	8.4.19	8.4.31
postcss-csso	6.0.0	6.0.1
postcss-discard-comments	5.0.1	6.0.0
postcss-loader	6.1.1	7.3.3
postcss-preset-env	7.4.2	9.2.0
prettier	2.4.1	2.8.8
sass-embedded	1.58.3	1.69.5
sass-loader	12.1.0	13.3.2
snyk	1.1064.0	1.1237.0
style-loader	3.3.0	3.3.3
stylelint	15.10.1	15.11.0
svgo	2.8.0	3.0.2
twigjs-loader	1.0.2	1.0.3
typescript	4.4.4	5.2.2
webpack	5.76.0	5.89.0
webpack-cli	4.9.1	5.1.4

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)

24 moderate, 27 high vulnerabilities in devDependencies (development dependencies)

---

Release TGZ SHA-256 hash: 3806aed4a1affb5dd66fda8a0ecef3c56240242117d7172647c2f1e04c7f62e0

USWDS 3.6.1

What's new in USWDS 3.6.1

Bug fixes

Package	A11y	Breaking	Description
usa-banner	No	No	Improved horizontal alignment in the icon-dot-gov.svg icon. (#5370)
usa-breadcrumb	No	No	Fixed a bug that prevented text from wrapping to a new line in the .usa-breadcrumb--wrap variant. (#5497)
usa-card	No	No	Fixed a margin bug on header-first variants that caused exdent card media to overlap headers. (#5423)
usa-checkbox, usa-radio, uswds-core	Yes	No	Updated radio and checkbox tile styling to have lighter borders. The border colors now more closely resemble the border colors in release 3.4.0. (#5494)
usa-header	No	No	Fixed a Safari-only bug that caused the mobile menu to unexpectedly close at a narrow range of window widths. (#5443)
usa-modal	No	No	Updated how the modal JavaScript resets body padding and improved body padding detection. Now the component will rely on the CSS to reset body padding rather than injecting an inline style with JavaScript. (#5493)
usa-table, uswds-core	Yes	No	Fixed a bug that prevented VoiceOver from reading stacked table content while using Safari. ( #5477)
usa-tooltip	No	No	Restored the opacity: 0 style rule to the tooltip body's initial state. This prevents the component from flickering if its position needs to be recalculated. (#5475)

Dependencies and security

No dependency updates.

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)

1 moderate, 29 high vulnerabilities in devDependencies (development dependencies)

---

Release TGZ SHA-256 hash: 01d5885a524db30d826dff9c67cd4ac66e431ffc86f01f3a9672f096da9ac7fa

USWDS 3.6.0

What's new in USWDS 3.6.0

Features

Package	A11y	Breaking	Description
usa-in-page-navigation	No	No	Updated JavaScript to exclude hidden headers from the in-page navigation link list. Any header with a style of display:none or visibility:hidden will now be excluded from the list of links in the component. (#5393)
usa-in-page-navigation	No	No	Added the optional data-main-content-selector attribute to the in-page navigation component. This attribute allows users to designate which element they want the component to pull headers from. If the attribute is not defined, the component will pull headers from the <main> element. (#5387)
usa-select	No	No	Added ellipses to overflow text in the multiple variant of the select component. This provides a clear indication to users that there is text that extends beyond the select width. (#5268)

Bug fixes

Package	A11y	Breaking	Description
usa-button, usa-checkbox, usa-combo-box, usa-file-input, usa-input, uswds-core	Yes	Yes	Updated default disabled color settings values. This change also fixed configuration errors with disabled color settings, added $theme-color-disabled-lighter and $theme-color-disabled-darker settings, and added disabled-lighter and disabled-darker tokens. ⚠️ The names and values of disabled settings and tokens have changed and will need to be updated if they are customized in your project. See the "Breaking changes" section below for more details. (#5402)
usa-pagination	Yes	Potentially	Updated the ellipsis color to meet color contrast requirements. Additionally, this change updated styles to respect the value added to $theme-pagination-background-color. Users should confirm that project pagination colors display as expected. (#5358)
usa-card, uswds-core	No	No	Fixed a bug that prevented $theme-card-border-width from accepting 0 or string tokens. (#5325)
usa-combo-box, usa-input, usa-input-prefix-suffix, usa-range, usa-select, usa-textarea, uswds-core	Yes	No	Fixed a bug that caused standard text input variants to show disabled styles in forced colors mode. Now the disabled border color only shows when the element is disabled. (#5397)
usa-icon-list	No	No	Updated icon list styles to allow $theme-body-font-size to accept 2xs and 3xs size tokens. (#5363)
usa-input-mask	Yes	No	Fixed a bug in input mask that caused the hover state to show disabled styling. This change also improved the legibility of the component in forced colors mode. (#5378)
usa-memorable-date	Yes	No	Updated memorable date styles to allow elements to wrap to multiple lines at narrow browser widths. (#5372)
uswds-utilities	No	No	Fixed a bug that caused font-[family]-[size] utility classes to not generate font-family rules. (#5388)

Breaking changes

Warning

Disabled theme settings. This release updates USWDS disabled color settings and tokens to conform to our standard naming convention. If your project configures disabled color settings or uses disabled color tokens, you probably need to update your code. Here is a table showing how we reassigned disabled color values:

Default value	Previously assigned to:	Now assigned to:
"gray-20"	$theme-color-disabled	$theme-color-disabled-lighter
"gray-40"	$theme-color-disabled-text-reverse	$theme-color-disabled-light
"gray-50"	$theme-color-disabled-text	$theme-color-disabled
"gray-70"	$theme-color-text-on-disabled	$theme-color-disabled-dark

All references to the previous settings have been replaced with references to their corresponding new settings. This means that if you previously customized $theme-color-disabled, you should now instead assign that custom value to $theme-color-disabled-lighter. Additionally, all references to the “disabled” color token in your Sass should now be replaced with “disabled-lighter”.

Please note that all disabled states are now expected to meet minimum color contrast requirements for text (4.5:1). If you have customized any of the disabled color values, please confirm that your disabled elements meet these contrast standards.

Dependencies and security

Dependency name	Previous version	New version
@18f/identity-stylelint-config	1.0.0	2.0.0
postcss	8.4.0	8.4.19
stylelint	14.13.0	15.10.1

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)

4 moderate, 29 high vulnerabilities in devDependencies (development dependencies)

---

Release TGZ SHA-256 hash: a6c303c350063a1f42baa0de8f1c860d91b06fd85f330b947209a8886f0e290a

USWDS 3.5.0

What's new in USWDS 3.5.0

Features

Package	A11y	Breaking	Description
usa-button, usa-dark-background, uswds-core	—	—	Stopped using font smoothing. No longer use font smoothing for dark backgrounds and disabled buttons. (#5250)
usa-button, usa-checkbox, usa-date-picker, usa-pagination, usa-radio, usa-range, usa-search, uswds-core	Yes	—	Improved legibility of buttons in forced colors mode. Added a consistent border in forced colors mode. (#5147)
usa-button, usa-checkbox, usa-combo-box, usa-date-picker, usa-date-range-picker, usa-file-input, usa-input, usa-input-mask, usa-input-prefix-suffix, usa-radio, usa-range, usa-select, usa-textarea, uswds-core	Yes	—	Improved consistency of disabled styles in forced colors mode. (#5295)
usa-button, usa-checkbox, usa-combo-box, usa-date-picker, usa-date-range-picker, usa-file-input, usa-input, usa-input-prefix-suffix, usa-radio, usa-range, usa-select, usa-textarea, usa-time-picker, uswds-core	Yes	—	Improved consistency and visibility of disabled styles. Disabled form inputs now use a consistent gray background. (#5063) ⚠️ We don't consider this a breaking change, but teams should check disabled form elements to assure that the new styles are working in their layouts.
usa-link, uswds-core	Yes	—	Labeled external links for screen readers. Added a label for screen readers that identifies external links and if they open in a new tab. (#5166)
uswds-core	Yes	—	Added settings for announcing external links. Added $theme-external-link-sr-label-tab-same and $theme-external-link-sr-label-tab-new to control how screen readers announce external links. (#5166)
usa-content, usa-paragraph, usa-prose, uswds-core	—	Yes	Removed usa-prose- mixins and placeholders from Sass. Users should instead use typeset- mixins in their place. This is a breaking change only if your project Sass uses usa-prose- mixins and placeholders. It does not affect the look of any usa-prose–styled element.(#5158)
uswds-core	—	—	Added $theme-heading-margin-top and $theme-paragraph-margin-top system variables. (#5158)
uswds-core	—	Yes	Updated individual Sass map settings without affecting defaults. Now adjusting a single Sass map setting will no longer set all other values in the map to false. Users can now update only the map values they wish to change. This is a breaking change only if your project deactivated mapped settings by not declaring them. (#5216)
usa-accordion, usa-banner, usa-nav, uswds-core	—	—	Added two new settings to customize accordion background colors. You can now customize accordion button and content background colors with $theme-accordion-button-background-color and $theme-accordion-background-color. (#5269)

Bug fixes

Package	A11y	Breaking	Description
usa-header	—	—	Removed the id attribute from the usa-logo element. (#5319)
usa-header	—	—	Fixed a bug that caused inaccurate megamenu template markup. The markup in megamenu code examples now accurately includes the usa-megamenu class. (#5311)
usa-table	Yes	—	Fixed a typo in the sortable table JavaScript that caused the aria-label in table headers to have an unnecessary single quote. (#5280)
uswds-core, uswds-utilities	—	—	Removed unused utility builder comments from compiled CSS. This update significantly reduces the compiled file size. (#5209)
usa-tooltip	—	—	Fixed a bug that removed default positioning. If the data-position attribute is not specified, the tooltip position will now default to "top". (#5228)
usa-in-page-navigation	—	—	Fixed a bug that prevented links that start with a number from scrolling when clicked. (#5200)
usa-alert	—	—	Removed redundant and invalid height declaration. (#5187)
usa-button	Yes	—	Fixed a bug that caused button type attribute to render empty. (#5247)
usa-button	Yes	—	Added spacebar trigger to links styled as buttons. Now any item that looks like a button will trigger with the spacebar, even if the element is a link. (#4385)
usa-card	Yes	Yes	Replaced button elements with links styled as buttons. ⚠️ This is marked as a breaking change because it changes the recommended card component markup to include <a href="#" class="usa-button"></a> for the call to action instead of a button element. (#4385)
usa-pagination	Yes	Yes	Improved accessible markup of overflow ellipses. We replaced the role="presentation" with aria-label="ellipsis indicating non-visible pages" for usa-pagination__overflow items to better conform to WCAG 2.0 and 2.1. ⚠️ This is marked as a breaking change because it changes the recommended component markup. In the usa-pagination__overflow element, use aria-label="ellipsis indicating non-visible pages" instead of role="presentation". (#5197)
usa-file-input	—	—	Fixed an issue with large file previews. Now adding large files no longer results in an infinite spinner. Adding large files should now result in an accurate preview. (#5114)
usa-file-input	Yes	—	Improved the file input experience for voice command and screen reader users. Voice command users can now interact with the component by speaking the visible instructions text. Additionally, screen reader users now have access to both the instructions text and the file selection status. (#5213)
usa-combo-box	Yes	—	Improved consistency of keyboard actions. Users can now to use Tab to escape the Combo box selection without making a choice, and Space to select the current highlighted option when within the dropdown menu. (#5160)
usa-accordion, usa-banner, usa-nav	Yes	—	Adjusted forced colors mode styles to ensure visibility and increase consistency. Forced colors mode styles will now override the background color and display the button outline. The open/close icons now dynamically adjust to ButtonText colors. (#5286)
usa-identifier	—	Yes	Updated Accessibility statement link text. Updated the identifier to use the text "Accessibility statement" (EN) / "Declaración de accesibilidad" (ES) for the required link to an accessibility statement. ⚠️ This is a breaking change because it changes the content of the identifier. Earlier versions of the identifier will continue to work as expected. (#5278)
Guidance	Yes	—	Updated guidance to suggest identifying required and optional fields. We added a new section on identifying required fields and now suggest labeling required fields with a red asterisk and optional fields with the word optional. (uswds/uswds-site#1834)

Dependencies and security

Dependency name	Previous version	New version
@chanzuckerberg/axe-storybook-testing	5.0.1	6.3.0
axe-core	4.3.4	4.6.3
extract-loader	5.1.0	—
webpack	5.58.1	5.76.0

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)

1 moderate 29 high vulnerabilities in devDependencies (development dependencies)

---

Release TGZ SHA-256 hash: e0dbab25bffaaf02b3b7317690939d9e0e63bc5c824046e778de8f4c15227a9c

USWDS 2.14.0

Long-term archive of Version 2

As we noted when we released Version 3.0, we will support Version 2 through May 2023. As a part of our long-term archive support for Version 2.x, we're releasing USWDS 2.14.0. This release has no functional changes, but it strips all nonessential development dependencies from the codebase. This will allow both the design system and long-term users of 2.x to treat this and any subsequent 2.x release as a long-term archival release, with a limited security vulnerability footprint.

If you use USWDS 2.13.3 and will not be upgrading to 3.0, consider updating to USWDS 2.14.0.

Details

This release removes all dependencies, except those required to build and release. There were no vulnerabilities in the standard dependencies, but there were critical vulnerabilities in a few development dependencies:

• Component library
  • @frctl/fractal
  • @frctl/mandelbrot
  • @frctl/nunjucks
• Testing
  • mocha
  • gulp-spawn-mocha
• Compiling
  • nswatch: Legacy watch task, wasn't used.
  • gulp-svg-sprite: Added compiled SVG to repo.
  • handlebars and handlebars-helpers: Used in generating formatted tokens
    in SASS

We removed all these dependencies and committed any necessary static assets to the package. We've committed an archival version of the Fractal site in GitHub, but it is not included in the package.

Finally, we added an overrides field to package.json to handle the last remaining vulnerability in gulp.

Security and dependencies

• 37 total dependency changes
• 19 dependencies removed

Dependency name	Previous version	New version
classlist-polyfill	1.0.3	1.2.0
@babel/preset-env	7.15.8	7.20.2
@frctl/fractal	1.5.11	-
@frctl/mandelbrot	1.10.1	-
@frctl/nunjucks	2.0.13	-
@types/node	16.11.6	18.15.5
ansi-colors	4.1.1	4.1.3
autoprefixer	10.3.7	10.4.14
axe-core	4.3.4	-
chrome-launcher	0.15.0	-
chrome-remote-interface	0.31.0	-
eslint	8.4.1	8.36.0
eslint-config-prettier	8.3.0	8.8.0
eslint-plugin-import	2.52.2	2.27.5
eslint-plugin-no-unsanitized	4.0.1	4.0.2
glob-parent ― Note: added via NPM overrides	-	6.0.2 (last updated 2 years ago)
gulp-replace	1.1.1	1.1.4
gulp-spawn-mocha	6.0.0	-
gulp-svg-sprite	1.5.0	-
handlebars	4.7.7	-
handlebars-helpers	0.10.0	-
jsdom	19.0.0	-
jsdom-global	3.0.2	-
mocha	6.2.3	-
node-notifier	10.0.0	10.0.1
nswatch	0.2.0	-
nyc	15.1.0	-
postcss	8.3.11	8.4.21
postcss-csso	6.0.0	6.0.1
prettier	2.4.1	2.8.6
resemblejs	4.0.0	-
sass	1.43.4	1.59.3
sass-true	6.0.1	-
sinon	12.0.1	-
snyk	1.746.0	1.1123.0
stylelint	14.1.0	14.9.1
typescript	4.4.4	5.0.2
yargs	17.2.1	-

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds) from npm audit

Internal only: 0 vulnerabilities in devDependencies (development dependencies) from npm audit

Release ZIP SHA-256 hash: 8fb2fc84bcb73f3e7155fcacd35b2f96ae3be872716a91118b69991c6e0bb44b

USWDS 3.4.1

What's new in USWDS 3.4.1

There were a couple features and bug fixes that we intended to include in USWDS 3.4.0, but inadvertently omitted from that release.

Features and bug fixes

Type	Package	A11y	Breaking	Description
Feature	usa-in-page-navigation	—	—	Update the URL in the address bar when navigating from the In-Page Navigation. Now users can see the proper anchor link in the address bar when navigating. Thanks @aduth! (#5068)
Bug	usa-form	—	—	Fixed invisible link text for links styled as buttons within forms. Now link text does not match the primary button color when nested inside of a form and the usa-button class is present. (#5112)
Bug	usa-header	—	—	Logo text width setting now works as expected. Now the design system respects the value passed to $theme-header-logo-text-width. Thanks @RSD-accessboard! (#5008)

Dependencies and security

No dependency changes

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)

1 moderate 33 high vulnerabilities in devDependencies (development dependencies)

Release TGZ SHA-256 hash: af1cd42c60b73fbbfa9c27b8ee52fb735b1a2234c6b3aa17de5bbf8a9190ca62

USWDS 3.4.0

What’s new in USWDS 3.4.0

Features and bug fixes

Type	Package	A11y	Breaking	Description
Feature	usa-banner	—	—	Remove grid dependency from Banner package. Now you no longer need to use the usa-layout-grid package with usa-banner resulting in a much smaller package size. (#5000)
Feature	uswds-core	—	Maybe	Output only the modern woff2 font format, unless you need compatibility. Now we output only the woff2 webfont format with our default settings. Since we no longer support IE11 and other old browsers, we no longer need to serve the woff and ttf formats. Teams that need this support can activate it with a new setting: $theme-font-browser-compatibility: true. This is only a breaking change if your project needs to support IE11. (#5108)
Feature	usa-header	—	—	Allow full-page width for the header. You can now set a value of "none" for any max-width setting, including $theme-header-max-width. (#5072)
Feature	usa-in-page-navigation	—	—	Update the URL in the address bar when navigating from the In-Page Navigation. Now users can see the proper anchor link in the address bar when navigating. Thanks @aduth! (#5068)
Bug fix	usa-alert uswds-core	—	—	Set padding to any valid spacing token. Now you can use valid values like 1.5 for $theme-alert-padding-y. Thanks @aduth! (#5076)
Bug fix	usa-banner	Yes	—	Improved display of focus outline on mobile. Now the focus outline is visible all around the banner on mobile devices. Thanks @jhancock532! (#5013)
Bug fix	usa-footer	Yes	—	Use any heading level for the primary links header. Now if you use any heading level for .usa-footer__primary-link without it reverting to an h4 when the JavaScript rebuilds the element for mobile. Thanks @paulathevalley! (#5044)
Bug fix	usa-header	Yes	—	Secondary nav is now read properly on screen readers. The separator between nav elements is no longer read on screen readers. (#4963)
Bug fix	usa-link	—	—	External link icons and link text now wrap as expected. Now external links break over wrapped lines as expected in any browser. (#5046)
Bug fix	usa-modal	—	—	Interactive form elements like Date Picker now work properly in a modal window. Now any element in a modal should work as expected. (#5049)
Bug fix	usa-step-indicator	Yes	—	More legible contrast on pending items. Graphical elements related to pending items now meet accessibility standards for contrast ratio. (#5048)
Bug fix	uswds-utilities uswds-core	—	—	Outline utility and mixin now accept the 05 token. Now, the .outline-05 utility class and the u-outline('05') mixin should work as expected. (#5079)
Content	—	—	—	Improved copy in 404 template. We updated the 404 page template copy to follow parallel structure and use active voice. Thanks @ybom for the Spanish translation! (#5045)
Guidance	—	—	—	Expanded and improved our Gender Identity and Sex patterns. We've made updates to our pattern guidance and our pattern previews to help provide more practical use cases and up-to-date guidance for these patterns. For more details, see uswds/uswds-site#1994

Dependencies and security

Dependency	Old version	New version
gulp-dart-scss	1.1.0	Removed
gulp-mocha	—	8.0.0
mocha	6.2.3	10.2.0
sass-embedded	1.53.0	1.58.3
snyk	1.966.0	1.1064.0

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)

1 moderate 33 high vulnerabilities in devDependencies (development dependencies)

Release TGZ SHA-256 hash: 7b0336d95fa6e9f31b27a27424f3a53e84b415e09b5bbff5d9ec8a398fb406d7

USWDS 3.3.0

What’s new in USWDS 3.3.0

New components

We have three new components (and component packages) in this release. Learn more about each of them on our website:

• In-page navigation: In-page navigation allows navigation to specific sections on a lengthy content page. Package name: usa-in-page-navigation
• Input mask: An input mask is a string expression that constrains input to support valid input values. Package name: usa-input-mask
• Language selector: A language selector helps users find and access content in the language of their choice. Package name: usa-language-selector

Updated components

• Memorable date: Based on our usability research, we updated the memorable date component to include a dropdown select for month.

Updated templates

We have four updated components in this release. Learn more about each of them on our website:

• Address template: Based on our usability research, we've made the following changes:
  • Replaced the State, territory, or military post combo box with a dropdown select.
  • Replaced the Unit type combo box and the Unit number input field with a single Street address line 2 input field.
  • Added an optional Urbanization input field for addresses in Puerto Rico.
• Name: Based on our usability research, we've made a number of changes to support a variety of name entry preferences. See the page on our website for more details.

These template and component updates are in support of our new Patterns guidance section. For more information on using our pattern guidance to support inclusive interactions, please see our Inclusive Patterns Report and the pattern guidance itself.

Other updated packages

• uswds-form-controls: Added usa-input-mask.
• uswds-components: Added usa-in-page-navigation, usa-input-mask, and usa-language-selector

Dependencies and security

No package updates.

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)

29 high vulnerabilities in devDependencies (development dependencies)

Release TGZ SHA-256 hash: 01994f2a02cad085a0fabb9bb2a238b94e3e03f587e241348731063b80e4308c