What's new in USWDS 3.13.0

@mejiaj

What's new in USWDS 3.13.0

Features

Package	A11y	Breaking	Markup change	Description
`usa-banner`	-	-	-	Added a Web Component variant of banner. This release contains the first Web Component in USWDS. The addition of the `usa-banner` tag will make it easier for many teams to get up and running with USWDS, and we plan to add more Web Components in the future. Huge thanks to @mejiaj who did much of the work on this component in the USWDS Elements repository (#6460)
`usa-range`	Yes	-	-	Currently, the range slider has audible cues that aren't available for sighted users. This update adds a value to the slider so the current value is visible. (#6302) Thank you, @aduth!
`uswds-core`	Yes	-	-	Animated transitions now respect the system's reduced motion preference. A new transition utility handles default behavior for easing and disabling inessential animation. (#6268) Thank you, @cathybaptista!

Dependency updates

Dependency name	Previous version	New version
lit	--	3.2.1

Note: While Lit is a new dependency, it's only necessary for the new Web Component banner variant. If you're using the compiled version of that component from dist, Lit's already included.

Dev Dependency updates

Dependency name	Previous version	New version
@rollup/plugin-commonjs	--	28.0.3
@spiriit/vite-plugin-svg-spritemap	--	4.0.0
`eslint-plugin-airbnb-base`	--	0.0.1-security
eslint-plugin-lit	--	2.0.0
lit	--	3.2.1
vite	--	6.3.5
vite-plugin-svg-sprite	--	0.6.2
undici	6.21.1	6.21.3

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
55 vulnerabilities (29 moderate, 26 high) in devDependencies (development dependencies)

Release TGZ SHA-256 hash: 6eac004fb7785490eb640f388c6949c57951501876acb109ecdd4c8ead7518b6

@deebloo

What's new in USWDS 3.12.0

Features

Package	A11y	Breaking	Markup change	Description
`usa-date-picker`, `usa-date-range-picker`	-	-	-	Enabled native JavaScript translation for date picker calendar labels. The calendar now uses the `Date.toLocaleString` API to automatically build translated labels based on the document's `lang` attribute. Thanks @deebloo! (#5679)
`usa-in-page-navigation`	-	-	-	Added the `data-minimum-heading-count` property to the in-page navigation component. This property hides the component when the content region does not contain the minimum number of headings. By default, this attribute hides the in-page navigation component when there are fewer than two headings in the content region. ✏️ Teams should customize the value of this property based on their content needs. (#6205)
`usa-tooltip`	-	-	-	Enabled tooltip functionality on non-button elements. Thanks @anmazz! (#6035)

Bug fixes

Package	A11y	Breaking	Markup change	Description
`usa-checkbox`, `usa-radio`	-	-	-	Updated checkbox and radio styles so that the interactive area now matches the width of the content. Previously, the interactive area extended the full width of its container. (#6192)
`usa-in-page-navigation`	-	-	-	Fixed a bug that prevented in-page navigation from scrolling to nested headings. Now, the component can smooth scroll to headings within components like card and summary box. ✏ Teams that use `data-scroll-offset` should check to make sure this change does not cause regressions in scroll behaviors. Thanks @jhancock532! (#5878)
`uswds-core`	-	-	-	Resolved Sass deprecation warnings related to the color function. This change ensures compatibility with Dart Sass 2.0.0 and eliminates the use of deprecated color functions. (#6270)
`uswds-core`	-	-	-	Replaced `resolve-id-refs` dependency with custom JavaScript. (#6308)

Dependencies and security

Dependency updates

Dependency name	Previous version	New version
resolve-id-refs	0.1.0	--

Dev dependency updates

Dependency name	Previous version	New version
@babel/core	7.26.0	7.26.8
@babel/preset-env	7.26.0	7.26.8
gulp-sass	5.1.0	6.0.0
postcss	8.4.49	8.5.2
sass	1.83.1	1.84.0
sass-embedded	1.83.1	1.83.4
sass-loader	13.3.2	16.0.4
snyk	1.1295.0	1.1295.3
stylelint	16.11.0	16.12.0
typescript	5.7.2	5.7.3
webpack	5.97.1	5.98.0

Additional updates

Important

USWDS now requires a verified signature on all commits to this repository. Learn more about how to set up signature verification in our CONTRIBUTING.md file.

Additional contributions

Thanks to @aduth for making our prettier configuration more explicit. (#6269)
Thanks to @szepeviktor for fixing typos. (#6251)
Thanks to @jcklpe for updating broken links in the USWDS README. (#6239)
Thanks to @aduth for improving the JavaScript examples in our README (#5928)
Thanks to @aduth for improving our automated unit test scans (#6171)

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

Release TGZ SHA-256 hash: 8a562ec0c24d93b7eeaeaa9056f54050054344331dd34ca96d5be161442f09cd

@aduth

What's new in USWDS 3.11.0

Features

Package	A11y	Breaking	Markup change	Description
`usa-elements`	-	-	-	Removed outdated browser normalization styles. This update drops normalize support for Internet Explorer. Thanks @aduth! (#5555)
`usa-form`, `usa-input-prefix-suffix`, `usa-input`, `uswds-core`	-	-	-	Moved `.usa-input--[width]` and `.usa-input-group--[width]` classes out of the `usa-form` package. These classes are now generated in the `usa-input` and `usa-input-prefix-suffix` packages and can be used without the `.usa-form` parent element. Thanks @aduth! (#6232)
`usa-table`	-	-	-	Updated table header styles to be consistent across all table elements. Now, all `thead th`, `tbody th`, and `tfoot th` cells will all have the same visual styles. Thanks @ajanickiv! ✏️ Teams should confirm that their tables display as expected. (#5986)

Bug fixes

Package	A11y	Breaking	Markup change	Description
`usa-button`, `usa-collection`, `usa-file-input`, `usa-icon-list`, `usa-icon`, `usa-input-prefix-suffix`, `usa-modal`, `usa-pagination`	-	-	Yes	Replaced deprecated `xlink:href` references with `href`. ✏ Teams should update their markup to replace `xlink:href` references with `href` and pull in the updated `loader.svg` file. (#6165)
`usa-file-input`	Yes	-	-	Fixed a bug that prevented screen readers from announcing the invalid file type error message. (#6168) ✏ Teams who support additional languages should update the error message string to match the new copy.
`usa-footer`	Yes	-	-	Removed `overflow: hidden` from `usa-footer` to allow the full focus outline to show. This fix also improves horizontal alignment in the slim footer variant. Thanks @6TELOIV! (#6237)

Markup changes

MDN warns that the deprecated xlink:href attribute can stop working at any time. When referencing SVG icon sprites, teams should use href instead of the deprecated xlink:href attribute.

<!-- usa-icon example -->
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
- <use xlink:href="./img/sprite.svg#close"></use>
+ <use href="./img/sprite.svg#close"></use>
</svg>

Dependencies and security

Dependency name	Previous version	New version
@babel/core	7.25.7	7.26.0
@babel/preset-env	7.25.7	7.26.0
axe-core	4.10.0	4.10.2
cross-spawn	7.0.3	7.0.6
html-webpack-plugin	5.6.0	5.6.3
mocha	10.7.3	10.8.2
nwsapi (added via npm overrides)	--	2.2.13
postcss	8.4.47	8.4.49
prettier	3.3.3	3.4.2
sass	1.79.4	1.83.0
sass-embedded	1.79.4	1.83.0
snyk	1.1293.1	1.1294.3
stylelint	16.9.0	16.11.0
typescript	5.6.2	5.7.2
webpack	5.95.0	5.97.1

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

Release TGZ SHA-256 hash: 1c10cd70a3c627fd14d9ee74a4071e67c4e5ba4bf14ca1c50c19c2fe5885e70a

@jeffpw-goog

What's new in USWDS 3.10.0

Features

Package	A11y	Breaking	Markup change	Description
`usa-combo-box`	-	-	-	Updated the order of combo box search results. The component now displays options that start with the query at the top of the list, followed by options that contain the query. This behavior more closely aligns with user expectation. (#6122)

Bug fixes

Package	A11y	Breaking	Markup change	Description
`usa-checkbox`	-	-	-	Removed inline style tags from indeterminate checkbox SVGs. These style tags were unnecessary and caused a conflict with Cypress automated testing. (#6162) ✏️ Teams should update the `checkbox-indeterminate.svg` and `checkbox-indeterminate-alt.svg` files in their projects.
`usa-file-input`	-	-	-	Fixed a bug that caused file input image previews to break when a Content Security Policy is enabled. The component now uses event listeners in place of inline JavaScript to handle error states. Thanks @jeffpw-goog! (#5997)
`usa-model`	-	-	-	Fixed a bug that prevented the modal package from bundling with a custom prefix. The component no longer uses hard-coded class names in its JavaScript. Thanks @sanason! (#6026)
`usa-step-indicator`	Yes	-	Yes	Removed the `aria-label` from the wrapper of the step indicator component. This resolves an automated testing error related to having an invalid attribute on a `div` element. (#6146) ✏️ Teams should remove the the `aria-label` from the `.usa-step-indicator` element in their step indicator markup.
`usa-time-picker`	Yes	-	Yes	Updated the time picker hint text to improve clarity. This update allows the component to meet the success criteria in WCAG 3.3.2. (#6147) ✏️ Teams should replace the words "hh:mm" in the time picker hint text with "Select a time from the dropdown. Type into the input to filter options."

Markup changes

Step indicator

To remove automated testing errors, teams should update the step indicator markup to remove the aria-label on the usa-step-indicator element:

- <div class="usa-step-indicator" aria-label="progress">
+ <div class="usa-step-indicator">

Time picker

If teams are using "hh:mm" in their time picker hint text, they should update the text to "Select a time from the dropdown. Type into the input to filter options.":

- <div class="usa-hint">hh:mm</div>
+ <div class="usa-hint">Select a time from the dropdown. Type into the input to filter options.</div>

Dependencies and security

Dependency updates

Dependency name	Previous version	Updated version
object-assign	4.1.1	--

Dev Dependency updates

Dependency name	Previous version	Updated version
@babel/core	7.25.2	7.25.7
@babel/preset-env	7.25.4	7.25.7
browserify	17.0.0	17.0.1
eslint-plugin-import	2.30.0	2.31.0
eslint-plugin-no-unsanitized	4.1.0	4.1.2
postcss	8.4.45	8.4.47
sass	1.78.0	1.79.4
sass-embedded	1.78.0	1.79.4
snyk	1.1293.0	1.1293.1
twig-html-loader	0.1.9	--
webpack	5.94.0	5.95.0

Thanks @aduth and @anselmbradford for contributing to our dependency updates!

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

Release TGZ SHA-256 hash: fdd1f9fc4cbfeb0fca7feeba1c94b205ba4ee22d03f63bb916c8750982715fb7

@jamigibbs

What's new in USWDS 3.9.0

Features

Package	A11y	Breaking	Markup change	Description
`usa-character-count`	-	-	-	Enhanced the visual cue when `maxlength` is exceeded in the character count component. Now, the component uses standard USWDS error styles to visually enhance the error state. (#5908)
`usa-date-picker`, `usa-date-range-picker`	Yes	-	-	Added `aria-disabled` to the list of expected attributes in the date picker and date range picker components. Now, the component will disable toggle when the `aria-disabled` attribute is present. (#6013)
`uswds-core`, `usa-layout-grid`	-	-	-	Added new `$theme-utility-breakpoints-custom` setting. This setting generates responsive variants of USWDS utilities at custom breakpoints. Values must be set with `px` values inside a Sass map. Thanks @jamigibbs! (#6048)

Bug fixes

Package	A11y	Breaking	Markup change	Description
`usa-alert`, `usa-site-alert`	-	Yes	-	Fixed a bug that caused `$theme-site-margins-width` to unexpectedly adjust the alignment inside the alert and site alert components. Alignment on the alert and site alert components will likely shift from this change. Confirm that your implementation of the component aligns as expected. (#5636) ⚠️ Considered breaking because the alignment and display of the alert may shift.
`usa-button`	-	Yes	-	Updated the width of unstyled buttons at narrow screen widths. Now, unstyled buttons receive a width of `auto` to better match USWDS link styles. Users should confirm that the variant visually displays as expected in their projects. Thanks @aduth! (#5631) ⚠️ Considered breaking because the display of unstyled buttons will change at narrow screen widths. Check your codebase for any instances of `@include button-unstyled` in your custom styles. These items may be affected by this change.
`usa-card`	-	Yes	-	Fixed a bug that caused the component to ignore the `$theme-card-font-family` setting. Confirm that your implementation of the card component displays with the expected font family. (#5974) ⚠️ Considered breaking because fonts in cards may change if you've set `$theme-card-font-family`.
`usa-combo-box`	Yes	-	-	Removed custom screen reader instructions in the combo box component. Combo box now relies on the default instructions provided by screen readers. (#6022)
`usa-date-picker`, `usa-date-range-picker`	Yes	-	-	Fixed a bug that caused `mouseover` events to prevent keyboard navigation. Now when you hover your mouse over the date picker buttons, only the hover state will be triggered. (#5774)
`usa-header`	Yes	Yes	-	Removed the CSS order property from the mobile view in standard variants of the header component. Now, the visual order of the component matches the tab order. If you would like to visually keep the search bar at the top of the menu, you will need to reorder your markup in the mobile view. (#6037) ⚠️ Considered breaking because the position of the search bar will change in the mobile menu.
`usa-footer`, `templates`	Yes	-	Yes	Added the `autocomplete="email"` attribute to the big footer variant and the "Create an account" template. This attribute allows the components to meet the standards outlined in WCAG 1.3.5. (#6002) ✏️ Teams should update their markup if they use an email field in their big footer.
`usa-identifier`	-	-	Yes	Updated the USA.gov link in Spanish versions of the identifier. The link text now reads "Visite USAGov en Español" and the link url is now "https://www.usa.gov/es/". (#5892) ✏️ Teams should update this text if they use the Spanish-language identifier.
`usa-memorable-date`	Yes	-	Yes	Removed numeric representation of months in the memorable date component. Recent usability testing indicated that having both numbers and names to represent months was confusing for screen reader users. (#6028) ✏️ Teams should update their memorable date component to remove the leading numbers.
`usa-pagination`	Yes	-	-	Added text underline styles to pagination links. Pagination links are now visually consistent with other USWDS text links. (#5970)

Dependencies and security

Dependency name	Previous version	Updated version
@18f/identity-stylelint-config	4.0.0	4.1.0
@babel/core	7.24.5	7.25.2
@babel/preset-env	7.24.5	7.25.4
@types/node	20.12.11	20.14.10
autoprefixer	10.4.19	10.4.20
axe-core	4.9.1	4.10.0
babel-loader	9.1.3	--
eslint-plugin-import	2.29.1	2.30.0
eslint-plugin-no-unsanitized	4.0.2	4.1.0
gulp-changed	4.0.3	--
gulp-clean	0.4.0	--
gulp-cli	2.3.0	--
mocha	10.4.0	10.7.3
normalize.css	8.0.1	--
path	0.12.7	--
postcss	8.4.38	8.4.45
postcss-preset-env	9.5.11	9.6.0
prettier	3.2.5	3.3.3
sass	1.77.0	1.78.0
sass-embedded	1.77.0	1.78.0
snyk	1.1291.0	1.1293.0
stylelint	16.5.0	16.9.0
typescript	5.4.5	5.6.2
webpack	5.91.0	5.94.0

Thanks @aduth for contributing to our dependency updates and @skyf0l for fixing a typo in our package.json!

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

Release TGZ SHA-256 hash: 140cb2162e6c60a6a6ecbc71d8d047819d4ec26f9dd6c7056bd4bd8a266af2ab

@aduth

What's new in USWDS 3.8.2

Dependencies and security

Removed the classlist-polyfill dependency. This update resolves a Denial of Service (DoS) vulnerability related to the classlist-polyfill dependency that we do not consider exploitable on the front end of applications. (#6012)

Important

This release may affect some functionality in Internet Explorer 11 (IE11). This update removes the polyfill that added full classList support to IE11. USWDS no longer supports IE11, but if your project does, test if this update negatively affects your users and add additional support for classList if it does.

Dependency name	Previous version	New version
classlist-polyfill	1.2.0	--

Thanks @aduth for the initial work on removing this dependency.

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
5 low, 11 moderate, 44 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 94049e150c2a67dfdb75f140fc664d2e936ef652480a2f88dfdd96922e0a940c

@chrislarrycarl

What's new in USWDS 3.8.1

Bug fixes

Package	A11Y	Breaking	Markup change	Description
`usa-button-group`	—	—	—	Improved styles for nested button groups. Now, nested button groups should match the height of their parents. (#5885)
`usa-footer`	—	—	—	Restored the `usa-layout-grid` dependency in the footer package and removed layout grid styles from the footer stylesheet. This update prevents visual regressions in footer and other components with layout grid utility classes in their markup. (#5930)
`usa-identifier`	—	—	Yes	Fixed a bug that added the English word "An" to Spanish variants of the identifier component. This was accidentally added to our component preview templates because of a data error. (#5857)
`usa-in-page-navigation`	—	—	—	Updated an outdated reference to the `data-header-selector` attribute in an in-page navigation JavaScript error message. The error message now correctly references the `data-heading-elements` attribute. (#5856)
`usa-input-mask`	—	—	—	Fixed a bug that caused input mask to break when it is not a direct child of a form. Nested input masks will now initialize and work properly. Thanks @chrislarrycarl! (#5518)
`usa-tooltip`	Yes	—	—	Updated the behavior of the tooltip component to allow users to hover over tooltip content. This allows the component to meet the "hoverable" standard outlined in WCAG 1.4.13. (#5919)
`usa-tooltip`	Yes	—	—	Updated tooltip component behavior to close active tooltips when the escape key is pressed. This allows the component to meet the "dismissible" standard outlined in WCAG 1.4.13. (#5909)
`usa-validation`	Yes	—	—	Fixed a bug that caused non-interactive checklist items in the validation component to receive focus. Now, only the interactive input will receive focus. (#5835)
`uswds-utilities`	—	—	—	Updated the code comments on utility Sass partials. These comments now reflect the correct utility class names and values. Thanks @aduth! (#5859)

Dependencies and security

Dependency name	Previous version	New version
@18f/identity-stylelint-config	2.0.0	4.0.0
@babel/core	7.23.6	7.24.5
@babel/preset-env	7.23.6	7.24.5
@types/node	20.10.4	20.12.11
autoprefixer	10.4.16	10.4.19
axe-core	4.8.2	4.9.1
eslint	8.55.0	8.56.0
eslint-plugin-import	2.29.0	2.29.1
html-webpack-plugin	5.5.4	5.6.0
mocha	10.2.0	10.4.0
postcss	8.4.32	8.4.38
postcss-discard-comments	6.0.0	6.0.2
postcss-preset-env	9.3.0	9.5.11
prettier	2.8.8	3.2.5
sass	1.69.5	1.77.0
sass-embedded	1.69.5	1.77.0
snyk	1.1262.0	1.1291.0
stylelint	15.11.0	16.5.0
svgo	3.1.0	3.3.2
typescript	5.3.3	5.4.5
webpack	5.89.0	5.91.0

Thanks @anselmbradford for the dependency updates!

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

Release TGZ SHA-256 hash: a86fa133b842ce28d1eed2226216c478debf31bf6c16ffcd96fecf061fdf4583

@lpsinger

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

@danbrady

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

@aduth

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

Releases: uswds/uswds

USWDS 3.13.0

What's new in USWDS 3.13.0

Features

Dependency updates

Dev Dependency updates

Contributors

Uh oh!

USWDS 3.12.0

What's new in USWDS 3.12.0

Features

Bug fixes

Dependencies and security

Dependency updates

Dev dependency updates

Additional updates

Additional contributions

Contributors

Uh oh!

USWDS 3.11.0

What's new in USWDS 3.11.0

Features

Bug fixes

Markup changes

Dependencies and security

Contributors

Uh oh!

USWDS 3.10.0

What's new in USWDS 3.10.0

Features

Bug fixes

Markup changes

Step indicator

Time picker

Dependencies and security

Dependency updates

Dev Dependency updates

Contributors

Uh oh!

USWDS 3.9.0

What's new in USWDS 3.9.0

Features

Bug fixes

Dependencies and security

Contributors

Uh oh!

USWDS 3.8.2

What's new in USWDS 3.8.2

Dependencies and security

Contributors

Uh oh!

USWDS 3.8.1

What's new in USWDS 3.8.1

Bug fixes

Dependencies and security

Contributors

Uh oh!

USWDS 3.8.0

Features

Bug fixes

Breaking changes

Documentation page template

Dependencies and security

Contributors

Uh oh!

USWDS 3.7.1

What's new in USWDS 3.7.1

Features

Bug fixes

Dependencies and security

Contributors

Uh oh!

USWDS 3.7.0

What's new in USWDS 3.7.0

Features

Bug fixes

Dependencies and security

Contributors

Uh oh!