Merge pull request #2190 from uswds/al-changelog-5387

USWDS-Site - Changelog: Update documentation and add entry for in-page nav custom content [USWDS#5387]

_components/in-page-navigation/guidance/implementation.md

@@ -16,12 +16,14 @@ Implementing the in-page navigation component requires a few additions and adjus
   </div>
   ```
 
-{:.usa-content-list }
-- **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`.
+- **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.
+- **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.
-- **Initialization properties.** The following properties update the component during initialization. These properties must be set before the component is initialized in order to have an effect.
+
+#### In-page navigation initialization properties
 {% include settings-table-flex.html
   content=page.implementation.initProps
-  cols="flex-2, flex-1, flex-2, flex-1"
+  cols="flex-2, flex-3, flex-1"
   section="initialization properties"
 %}

_components/in-page-navigation/in-page-navigation.md

@@ -40,24 +40,22 @@ tags:
   - nav
 implementation:
   initProps:
+    - property: "`data-main-content-selector`"
+      description: The element the component pulls headers from.
+      default: '`<main>`'
     - property: "`data-title-heading-level`"
-      element: usa-in-page-nav
       description: The heading level of the navigation title header.
-      default: "h4"
+      default: '`h4`'
     - property: "`data-title-text`"
-      element: usa-in-page-nav
       description: The text of the navigation title header.
-      default: "On this page"
+      default: '"On this page"'
     - property: "`data-scroll-offset`"
-      element: usa-in-page-nav
       description: Number of pixels scroll should offset from the top of the parent element.
       default: "0"
-    - property: "`data-root-margin`"
-      element: usa-in-page-nav
+    - property: '`data-root-margin`'
       description: Observable margin around the observed root used for calculating the current active section. Use values similar to CSS margin.
-      default: "0px 0px 0px 0px"
+      default: '`0px 0px 0px 0px`'
     - property: "`data-threshold`"
-      element: usa-in-page-nav
       description: Percentage of the scrolling section that must be in the observed area before the current section is triggered. Use a value between 0 and 1.
       default: "1"
 title: In-page navigation

_data/changelogs/component-in-page-navigation.yml

@@ -2,6 +2,12 @@ title: In-page navigation
 type: component
 changelogURL:
 items:
+  - date: NNNN-NN-NN
+    summary: Added the optional `data-main-content-selector` attribute.
+    affectsJavascript: true
+    githubRepo: uswds
+    githubPr: 5387
+    versionUswds: N.N.N
   - date: 2023-06-09
     summary: Fixed a bug that prevented links that start with a number from scrolling when clicked.
     summaryAdditional: