thisisdano · Mar 11, 2024 · Jul 21, 2023 · Aug 4, 2023 · Aug 4, 2023 · Aug 4, 2023
diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ This documentation site showcases USWDS components by pulling in pre-built HTML
 
 ### Deployment and previews
 
-This site is deployed on [cloud.gov Pages](https://cloud.gov/pages/), which automatically builds the public site whenever commits are pushed to `main`. Federalist also builds public previews for each branch pushed to GitHub.
+This site is deployed on [cloud.gov Pages](https://cloud.gov/pages/), which automatically builds the public site whenever commits are pushed to `main`. Pages also builds public previews for each branch pushed to GitHub.
 
 ⚠️ When generating new sections, sometimes they fail to build on Pages. You can clear the cache by running a simple `bundle update`, which will trigger a fresh build.
 

diff --git a/_components/in-page-navigation/guidance/implementation.md b/_components/in-page-navigation/guidance/implementation.md
@@ -17,7 +17,8 @@ Implementing the in-page navigation component requires a few additions and adjus
   ```
 
 - **Initialization properties.** You can customize how the component builds during initialization by adding any of the following properties to the `usa-in-page-nav` element. These properties must be set _before_ the component is initialized.
-- **Custom main content region.** The main content selector property (`data-main-content-selector`) allows you to define which element the component will look in to pull its list of headers. Set the property's value to the `class` or `id` of your page's main content region (for example, `data-main-content-selector=".main-content"` or `data-main-content-selector="#main-content"`). By default, the component will pull headers from the `<main>` element.
+- **Custom main content region selector.** The main content selector property (`data-main-content-selector`) allows you to define which element the component will look in to pull its list of headings. Set the property's value to the `class` or `id` of your page's main content region (for example, `data-main-content-selector=".main-content"` or `data-main-content-selector="#main-content"`). By default, the component will pull headings from the `<main>` element.
+- **Custom heading selector.** The heading selector property (`data-heading-selector`) allows you to list which heading levels you would like the component to pull into the component link list. By default, the component will include `h2` and `h3` headings.
 - **Root margin.** The root margin  property (`data-root-margin`) is a string that allows you to define the observable area. This set of values grows or shrinks the observable area from each side of the root element's bounding box before computing intersections. It can accept values similar to the CSS margin property, and can be percentages. By default, the in-page navigation component is set to `0px 0px 0px 0px`.
 - **Threshold.** The threshold property (`data-threshold`) determines how much of the observable section must be present in the observed area before the nav's item is set to current. The default is `1`, which means 100% of the observables must be in the observed section. You can set `data-threshold` to any integer between 0 and 1.
 

diff --git a/_components/in-page-navigation/guidance/usability.md b/_components/in-page-navigation/guidance/usability.md
@@ -2,7 +2,7 @@
 
 - **Make it stand out.** Site visitors should be able to quickly and easily distinguish in-page navigation from other landmarks on the page. Include borders and well-defined link active states to clearly convey the utility and purpose of the section. Define a consistent width for the in-page navigation component that is sufficiently wide and does not change based on text length.
 
-- **Use language that matches section headings.** The text of the links displayed within the in-page navigation `aside` should match the heading text of the target sections. Our component scans the page for `h2` and `h3` elements within the `main` element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
+- **Use language that matches section headings.** The text of the links displayed within the in-page navigation `aside` should match the heading text of the target sections. By default, the component scans the page for `h2` and `h3` elements within the `main` element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
 
 - **Don't include the page `h1` in the navigation.** Each page should have a single `h1` to describe its contents. It would be redundant to include this heading level in the in-page navigation.
 

diff --git a/_components/in-page-navigation/guidance/when-to-consider-something-else.md b/_components/in-page-navigation/guidance/when-to-consider-something-else.md
@@ -1,3 +1,3 @@
 - **Short pages.** For pages that require little or no scrolling, in-page navigation is not necessary.
-- **Unstructured content.** Pages that lack hierarchical structures (`h2` and `h3` elements in the `main`) cannot use the in-page navigation component.
+- **Unstructured content.** Pages that lack heading-based hierarchical structures cannot use the in-page navigation component.
 - **Infinite scrolling.** For pages that feature infinite scrolling, in-page navigation is neither a practical nor feasible feature.
diff --git a/_components/in-page-navigation/in-page-navigation.md b/_components/in-page-navigation/in-page-navigation.md
@@ -40,6 +40,9 @@ tags:
   - nav
 implementation:
   initProps:
+    - property: "`data-heading-selector`"
+      description: The list of header levels that should be included in the link list.
+      default: '`h2 h3`'
     - property: "`data-main-content-selector`"
       description: The element the component pulls headers from.
       default: '`<main>`'

diff --git a/_components/table/07-stickyheader-table.md b/_components/table/07-stickyheader-table.md
@@ -0,0 +1,15 @@
+---
+component:
+  status: ready
+  package: usa-table
+  dependencies:
+  variant: stickyheader
+guidancePath: guidance/variants/stickyheader
+layout: styleguide
+lead: Sticky table headers keep tabular data in context by sticking table headers to the top of the page as the user scrolls.
+order: 07
+parent: Table
+sitemap: false
+title: Sticky table headers
+---
+{% include component-preview-and-code.html level="h3" %}
diff --git a/_components/table/table.md b/_components/table/table.md
@@ -23,6 +23,8 @@ subnav:
   href: '#responsive-stacked-table'
 - text: Sortable table rows
   href: '#sortable-table-rows'
+- text: Sticky table headers
+  href: '#sticky-table-headers'
 - text: Guidance
   href: '#table-guidance'
 - text: Package
@@ -41,6 +43,7 @@ tags:
   - borderless
   - scrollable
   - scrolling
+  - sticky
 title: Table
 type: component
 variants:
@@ -51,9 +54,11 @@ variants:
   - variant: "`.usa-table-container--scrollable > .usa-table`"
     description: Add the `usa-table-container--scrollable` class to a container around any `usa-table` to apply a horizontal scrollbar if the columns exceed the available width. Ideal for dense tables with many columns.
   - variant: "`.usa-table--stacked`"
-    description: Stacks the table cells on narrow screens. Ideal for tables that contain more text information than numerical data. If you use this variant, you must ensure there is a data-label attribute on each cell of the table that matches the column header.
+    description: Stacks the table cells on narrow screens. Ideal for tables that contain more text information than numerical data. If you use this variant, you must ensure there is a `data-label` attribute on each cell of the table that matches the column header.
   - variant: "`.usa-table--stacked-header`"
     description: Stacks the table cells on narrow screens and visually promotes the first cell of every row into a “header” for that group. Preferred for directories and other lists where the first cell of every row is a name. If you use this variant, you must ensure there is a data-label attribute on each cell of the table that matches the column header.
+  - variant: "`.usa-table--sticky-header`"
+    description: Allows the table header element to stick to the top of the page as the user scrolls. Preferred for long tables with many rows. This variant is not compatible with the scrollable and stacked table variants.
   - variant: "`.usa-table--striped`"
     description: Applies alternating horizontal striping to help the eye track across table rows. Pairs well with the scrollable variant for tables with many columns.
 changelog:

diff --git a/_components/text-input/guidance/usability.md b/_components/text-input/guidance/usability.md
@@ -2,4 +2,3 @@
 - **Consider the mobile context.** Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.
 - **Wait to validate.** Only show error validation messages or stylings after a user has interacted with a particular field.
 - **Avoid placeholder text.** Avoid using placeholder text that appears within a text field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.)
-.
diff --git a/_data/changelogs/component-button-group.yml b/_data/changelogs/component-button-group.yml
@@ -2,6 +2,21 @@ title: Button group
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Improved the appearance of button groups when text wraps to multiple lines.
+    summaryAdditional:  Now, every button in the group will be the same height. 
+    isBreaking: false
+    affectsAccessibility:
+    affectsAssets:
+    affectsContent:
+    affectsGuidance:
+    affectsJavascript:
+    affectsMarkup: false
+    affectsSettings: false
+    affectsStyles: true
+    githubPr: 5657
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2022-08-05
     summary: Styled aria-disabled to match disabled.
     summaryAdditional: Now disabled styling is applied whether you use `disabled` (disabled and hidden from screen readers) or `aria-disabled` (disabled and visible to screen readers).

diff --git a/_data/changelogs/component-button.yml b/_data/changelogs/component-button.yml
@@ -2,6 +2,21 @@ title: Button
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Added a new setting to adjust the gap between the button's text and icon.
+    summaryAdditional: Gap between elements can be adjusted using the `$theme-button-icon-gap` setting.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5398
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Improved the vertical alignment of `usa-icon` when placed inside of `usa-button`.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5398
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2024-01-17
     summary: Added WCAG compliance tag and accessibility test status section.
     affectsGuidance: true

diff --git a/_data/changelogs/component-date-picker.yml b/_data/changelogs/component-date-picker.yml
@@ -2,6 +2,14 @@ title: Date picker
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Added focus styles to calendar button in high contrast mode. 
+    summaryAdditional: Now, the calendar icon changes to the `highlight` high contrast token on focus.
+    affectsAccessibility: true
+    affectsStyles: true
+    githubPr: 5701
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-11-20
     summary: Added known issues section.
     summaryAdditional:

diff --git a/_data/changelogs/component-footer.yml b/_data/changelogs/component-footer.yml
@@ -2,6 +2,13 @@ title: Footer
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Fixed a bug that caused some grid utility classes to be ignored when used inside `usa-footer`.
+    summaryAdditional:
+    affectsStyles: true
+    githubPr: 5675
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-12-08
     summary: Removed the `usa-layout-grid` dependency.
     summaryAdditional: This update reduces the footer package size. If you notice changes in your layout after making this update, add the `usa-layout-grid` package to your [Sass entry point](https://designsystem.digital.gov/documentation/migration/#using-component-packages).

diff --git a/_data/changelogs/component-form.yml b/_data/changelogs/component-form.yml
@@ -5,6 +5,14 @@ title: Form
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Added color contrast checks for disabled tokens.
+    summaryAdditional:  On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback does not meet minimum requirements, USWDS will provide a warning in the terminal.
+    affectsAccessibility: true
+    affectsStyles: true
+    githubPr: 5455
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-08-23
     summary: Fixed a bug that caused some form inputs to show disabled styles when in forced colors mode.
     summaryAdditional: 

diff --git a/_data/changelogs/component-in-page-navigation.yml b/_data/changelogs/component-in-page-navigation.yml
@@ -2,9 +2,17 @@ title: In-page navigation
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Added the optional `data-heading-selector` attribute.
+    summaryAdditional: This attribute allows users to list the heading levels that should be included in the component link list.
+    affectsJavascript: true
+    affectsStyles: true
+    githubRepo: uswds
+    githubPr: 5444
+    versionUswds: 3.8.0
   - date: 2023-08-23
     summary: Updated JavaScript to exclude headers that have a style of `display:none` or `visibility:hidden` from the component link list.
-    summaryAdditional: 
+    summaryAdditional:
     affectsJavascript: true
     githubRepo: uswds
     githubPr: 5393

diff --git a/_data/changelogs/component-side-navigation.yml b/_data/changelogs/component-side-navigation.yml
@@ -2,6 +2,22 @@ title: Side navigation
 type: component
 changelogURL:
 items:
+# 3.8.0 release
+- date: 2024-03-11
+  summary: Added a new fallback setting for sidenavs in Documentation template.
+  summaryAdditional:  The new setting `$theme-sidenav-reorder` reorders the sidenav with CSS. Users should follow new markup recommendation in Documentation template's code example to avoid accessibility issues.
+  isBreaking: false
+  affectsAccessibility: true
+  affectsAssets:
+  affectsContent:
+  affectsGuidance:
+  affectsJavascript:
+  affectsMarkup:
+  affectsSettings: true
+  affectsStyles: true
+  githubPr: 5809
+  githubRepo: uswds
+  versionUswds: 3.8.0
   # 3.1.0 release
 - date: 2022-08-05
   summary: Added `type="button"` to all non-form buttons to prevent default submit behaviors.

diff --git a/_data/changelogs/component-table.yml b/_data/changelogs/component-table.yml
@@ -4,6 +4,30 @@ type: component
 changelogURL:
 
 items:
+  - date: 2024-03-11
+    summary: Created the `.usa-table--sticky-header` variant to allow sticky positioning on table headers.
+    summaryAdditional: Also added the `$theme-table-sticky-top-offset` setting, which controls the top position of sticky headers.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5420
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Added the `$theme-table-background-color` setting.
+    summaryAdditional: Use this setting to declare the table background color at a theme level.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5420
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Simplified the structure of the scrollable table component example.
+    summaryAdditional:  Empty headers in the complex table example were causing accessibility issues.
+    isBreaking: false
+    affectsContent: true
+    githubPr: 5783
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-09-29
     summary: Fixed a bug that prevented VoiceOver from reading stacked table content while using Safari.
     affectsAccessibility: true

diff --git a/_data/changelogs/component-text-input.yml b/_data/changelogs/component-text-input.yml
@@ -5,6 +5,16 @@ type: component
 changelogURL:
 
 items:
+  - date: 2024-03-11
+    summary: Added `textarea` support to the validation component.
+    summaryAdditional:
+    isBreaking: false
+    affectsJavascript: true
+    affectsMarkup: true
+    affectsStyles:
+    githubPr: 5233
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-11-16
     summary: Updated the listed values for `.usa-input--[width]`.
     affectsGuidance: true

diff --git a/_data/changelogs/component-validation.yml b/_data/changelogs/component-validation.yml
@@ -2,6 +2,15 @@ title: Validation
 type: component
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Added `textarea` support to the validation component.
+    isBreaking: false
+    affectsAccessibility: false
+    affectsJavascript: true
+    affectsMarkup: true
+    githubPr: 5233
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2022-12-21
     summary: Clarified implementation guidance and removed the `#` from the example `data-validation-element` value.
     summaryAdditional:

diff --git a/_data/changelogs/docs-settings.yml b/_data/changelogs/docs-settings.yml
@@ -2,6 +2,45 @@ title: Settings
 type: utility
 changelogURL:
 items:
+  - date: 2024-03-11
+    summary: Added new sidenav setting to temporarily address visual regression in new markup guidance.
+    summaryAdditional:  The new setting `$theme-sidenav-reorder` allows users to temporarily reorder the sidenav with CSS. Users should follow new markup recommendation in code example to avoid accessibility issues.
+    isBreaking: false
+    affectsAccessibility: true
+    affectsAssets:
+    affectsContent:
+    affectsGuidance:
+    affectsJavascript:
+    affectsMarkup:
+    affectsSettings: true
+    affectsStyles: true
+    githubPr: 5809
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Added `$theme-table-background-color` and `$theme-table-sticky-top-offset` settings.
+    summaryAdditional:
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5420
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Added color contrast checks for disabled tokens.
+    summaryAdditional:  On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback does not meet minimum requirements, USWDS will provide a warning in the terminal.
+    affectsAccessibility: true
+    affectsStyles: true
+    githubPr: 5455
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Added button icon gap setting.
+    summaryAdditional: You can now customize the size of the gap between a button's text and icon with `$theme-button-icon-gap`.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5398
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-12-08
     summary: Fixed a bug that prevented `$theme-max-header-width` from accepting a value of "none".
     affectsStyles: true

diff --git a/_data/changelogs/pattern-user-profile-pronouns.yml b/_data/changelogs/pattern-user-profile-pronouns.yml
@@ -2,7 +2,7 @@ title: Pronouns
 type: pattern
 changelogURL:
 items:
-  - date: 2024-03-06
+  - date: 2024-03-11
     summary: Replaced dead hyperlink with archived copy.
     summaryAdditional: Replaced reference to `practicemakesprogress.org` with plain text and a link to the archived page on archive.org.
     githubRepo: uswds-site

diff --git a/_data/changelogs/template-documentation.yml b/_data/changelogs/template-documentation.yml
@@ -0,0 +1,31 @@
+title: Documentation page
+type: template
+items:
+  - date: 2024-03-11
+    summary: Added a fallback theme setting for reordering sidenav in Documentation template.
+    summaryAdditional: A new setting `$theme-sidenav-reorder` allows users to reorder the sidenav to avoid visual regressions. Users should follow new markup recommendation in code example to avoid accessibility issues.
+    isBreaking: false
+    affectsAccessibility: true
+    affectsAssets:
+    affectsContent:
+    affectsGuidance:
+    affectsJavascript:
+    affectsMarkup:
+    affectsSettings: true
+    affectsStyles: true
+    githubPr: 5809
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: 2024-03-11
+    summary: Updated the order of the side navigation markup to match the visual order.
+    summaryAdditional:
+    isBreaking: true
+    affectsAccessibility: true
+    affectsAssets:
+    affectsGuidance:
+    affectsJavascript:
+    affectsMarkup: true
+    affectsStyles: true
+    githubPr: 5794
+    githubRepo: uswds
+    versionUswds: 3.8.0
diff --git a/_data/implementations.yml b/_data/implementations.yml
@@ -179,7 +179,7 @@
   author:
     name: Broadcasting Board of Governors (BBG)
     url: https://github.com/BBGInnovate
-  notes: "This is not a reusable WordPress theme, but an implementation of USWDS for [bbg.gov](https://www.bbg.gov/)."
+  notes: "This is not a reusable WordPress theme, but an implementation of USWDS for bbg.gov)."
 
 - name: Benjamin
   distribution: WordPress

diff --git a/_data/issues/date-picker.yml b/_data/issues/date-picker.yml
@@ -9,10 +9,3 @@ items:
   affectsScreenReaders: true
   githubRepo: uswds
   githubNumber: 5534
-- date: 2023-09-29
-  summary: The focus indicator is not visible around the calendar icon in high contrast mode.
-  summaryAdditional:
-  affectsKeyboard: true
-  affectsHighContrast: true
-  githubRepo: uswds
-  githubNumber: 5535