Snyk has created this PR to upgrade @uswds/uswds from 3.7.0 to 3.8.2.
:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 4 versions ahead of your current version.
The recommended version was released on 2 months ago.
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).
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)
0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @ uswds/uswds) 13 moderate, 28 high vulnerabilities in devDependencies (development dependencies).
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)
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).
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).
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)
Snyk has created this PR to upgrade @uswds/uswds from 3.7.0 to 3.8.2.
:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 4 versions ahead of your current version.
The recommended version was released on 2 months ago.
Release notes
Package name: @uswds/uswds
-
3.8.2 - 2024-08-09
Dependency name
Previous version
New version
classlist-polyfill
1.2.0
--
-
3.8.1 - 2024-05-31
Package
A11Y
Breaking
Markup change
Description
—
—
—
Improved styles for nested button groups. Now, nested button groups should match the height of their parents. (#5885)
—
—
—
Restored the
—
—
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)
—
—
—
Updated an outdated reference to the
—
—
—
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)
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)
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)
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)
—
—
—
Updated the code comments on utility Sass partials. These comments now reflect the correct utility class names and values. Thanks @ aduth! (#5859)
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
-
3.8.0 - 2024-03-11
Package
A11y
Breaking
Markup change
Description
-
-
-
Added styles for indeterminate checkboxes. Checkboxes will now display as indeterminate when you set
-
-
-
Added the ability to customize which headings will be pulled into the in-page navigation link list. Use the optional
-
-
-
Added a sticky header variant to the table component. Use the new
Added the ability to customize the table background color at a theme level. Use the
-
-
-
Added
Yes
Yes
Yes
Added
Package
A11y
Breaking
Markup change
Description
-
-
-
Improved the vertical alignment of
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)
-
-
-
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!
Yes
-
-
Added focus styles to the calendar button in high contrast mode. Now, the calendar icon changes to the
-
-
-
Fixed a bug that caused some grid utility classes to be ignored when used inside
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)
Yes
-
Yes
Simplified the structure of the scrollable table component example. This removes some accessibility errors related to incomplete table markup. (#5783)
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
-
3.7.1 - 2023-12-08
Package
A11Y
Breaking
Markup change
Description
—
—
—
Removed the
Package
A11Y
Breaking
Markup change
Description
—
—
—
Removed invalid styles from the banner component. These styles had no effect and were safely removed. Thanks @ aduth! (#5587)
Yes
—
—
Fixed
—
—
—
Fixed the right alignment of footer elements. Footer content should now align with other page elements. Thanks @ danbrady! (#5234)
—
—
—
Fixed the horizontal alignment of header submenu elements. Now,
—
—
—
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)
—
—
—
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)
—
—
—
Fixed a bug that prevented
—
—
—
Fixed a bug that prevented the CSS from generating
Dependency name
Previous version
New version
jsdom
19.0.0
22.1.0
-
3.7.0 - 2023-11-09
Package
A11y
Breaking
Markup change
Description
—
—
—
Updated the banner component so that it initializes without requiring import of the
—
—
—
Optimized the
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)
—
—
—
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)
—
—
—
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)
Package
A11y
Breaking
Markup change
Description
—
—
—
Fixed a bug that prevented
Yes
—
—
Restored underlines to footer links in default states. Now, footer links meet WCAG 2.0 AA requirements. (#5588)
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
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)
Yes
—
Yes
Added optional
—
—
—
Removed the top margin from the site alert component. Thanks @ lpsinger! (#5550)
—
—
—
Fixed a bug that prevented
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
from @uswds/uswds GitHub release notesWhat's new in USWDS 3.8.2
Dependencies and security
Removed the
classlist-polyfilldependency. This update resolves a Denial of Service (DoS) vulnerability related to theclasslist-polyfilldependency 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
classListsupport to IE11. USWDS no longer supports IE11, but if your project does, test if this update negatively affects your users and add additional support forclassListif it does.Thanks @ aduth for the initial work on removing this dependency.
0vulnerabilities in regular dependencies (dependencies for USWDS projects installed withnpm install @ uswds/uswds)5low,11moderate,44high vulnerabilities in devDependencies (development dependencies).Release TGZ SHA-256 hash:
94049e150c2a67dfdb75f140fc664d2e936ef652480a2f88dfdd96922e0a940cWhat's new in USWDS 3.8.1
Bug fixes
usa-button-groupusa-footerusa-layout-griddependency 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-identifierusa-in-page-navigationdata-header-selectorattribute in an in-page navigation JavaScript error message. The error message now correctly references thedata-heading-elementsattribute. (#5856)usa-input-maskusa-tooltipusa-tooltipusa-validationuswds-utilitiesDependencies and security
Thanks @ anselmbradford for the dependency updates!
0vulnerabilities in regular dependencies (dependencies for USWDS projects installed withnpm install @ uswds/uswds)13moderate,28high vulnerabilities in devDependencies (development dependencies).Release TGZ SHA-256 hash:
a86fa133b842ce28d1eed2226216c478debf31bf6c16ffcd96fecf061fdf4583Features
usa-checkbox,uswds-coreinput.indeterminate = truevia JavaScript or add thedata-indeterminateattribute. This is only a style addition and does not affect checkbox functionality. Thanks @ lpsinger! (#5713)usa-in-page-navdata-heading-selectorattribute to designate the heading levels that should be included in the component. By default, the component will pull allH2andH3headers. (#5444)usa-table,uswds-core.usa-table--sticky-headerclass to enable sticky positioning on table headers. Use the new$theme-table-sticky-top-offsetsetting to set the value of the top offset for sticky table headers. (#5420) Thanks @ etanb!usa-table,uswds-core$theme-table-background-colorsetting to set your desired table background color. (#5420)usa-validationtextareasupport to the validation component. (#5233) Thanks @ danbrady!usa-layout-docs,uswds-core$theme-sidenav-reorderfor documentation page sidenav. Use$theme-sidenav-reorderto support old CSS order functionality. This setting can introduce usability issues, so we suggest that teams update their sidenav markup instead. (#5807)Bug fixes
usa-button,uswds-coreusa-iconelements inside ofusa-button. Use the new$theme-button-icon-gapsetting 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-coreusa-button-groupusa-date-pickerhighlighthigh contrast token on focus. (#5701)usa-footerusa-footer. (#5675)usa-layout-docs,uswds-coreusa-tableBreaking 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.
Teams that wish to maintain the old CSS order functionality can temporarily add
$theme-sidenav-reorder: trueto 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
0vulnerabilities in regular dependencies (dependencies for USWDS projects installed withnpm install @ uswds/uswds)15moderate,25high vulnerabilities in devDependencies (development dependencies).Release TGZ SHA-256 hash:
072f0f8333b1aa000183e00676616d9ff5a174e27ca8d35c130ca70ea5d4f66dWhat's new in USWDS 3.7.1
Features
usa-footerusa-layout-griddependency from theusa-footerpackage. 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-gridpackage. You can include it by adding@ forward usa-layout-gridto your Sass entry point.Bug fixes
usa-bannerusa-dark-background,usa-section:visitedlink styling inusa-section--darkelements. Thanks @ aduth! (#5567)usa-footerusa-header,usa-navusa-nav__submenuelements should align with other header elements. Thanks @ lpsinger! (#5649)usa-navusa-navusa-nav$theme-max-header-widthfrom accepting a value of"none". (#5624)uswds-core.left-full,.right-full, and.top-fullutility classes. (#5633)Dependencies and security
Thanks @ deckar01 for contributing this dependency update!
0vulnerabilities in regular dependencies (dependencies for USWDS projects installed withnpm install @ uswds/uswds)24moderate,27high vulnerabilities in devDependencies (development dependencies).Release TGZ SHA-256 hash:
6e1d3032e1a7ac614d05fe76c87cc398725d84e5ba0656a7a17c6ca4c7579526What's new in USWDS 3.7.0
Items we've identified with a
Markup changehave a non-breaking change in their component markup. Teams should update their implementations and templates to reflect this change.Features
usa-bannerusa-accordionpackage. (#5551)usa-bannerus_flag_small.pngicon and added a vectorus_flag.svgicon. Update this asset in your project for improved image quality. Thanks @ aduth! (#5542)usa-data-pickerusa-iconusa-modalBug fixes
usa-card$theme-card-padding-yfrom accepting expected token values. (#5571)usa-footerusa-identifieraria-hidden. To improve the screen reader experience, update your component markup. (#5491)usa-rangeusa-rangedata-text-unitanddata-text-prepositionattributes to range slider. When used alongside themaxattribute, the optionaldata-text-unitattribute adds language for the unit type. For example, adding a value of "stars" enables a readout like "3.5 stars of 5". The optionaldata-text-prepositioncreates the ability to customize the language of the preposition "of" in that string. (#5472)usa-site-alertuswds-core$theme-site-margins-widthfrom accepting expected token values. (#5582)Dependencies and security
Updated the default node version from 16 to 20. (#5560)
0vulnerabilities in regular dependencies (dependencies for USWDS projects installed withnpm install @ uswds/uswds)24 moderate, 27 highvulnerabilities in devDependencies (development dependencies)Release TGZ SHA-256 hash:
3806aed4a1affb5dd66fda8a0ecef3c56240242117d7172647c2f1e04c7f62e0Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information: