feat: in-page navigation component (#5755)

* feat: setup base macro and examples for in page navigation

* feat: duplicate side-navigation styles and create an in-page demo

* feat: Style layout and sizing

* feat: Add dropdown and scroll behaviour

* feat: Add manual and full-page mode to macro

* feat: update 'p-tooltip' to only applying style to first found 'p-tooltip__message'

* feat: add JS to auto-build the navigation & for user interactions

* feat: allow passing a list of 'excludes' to no include in the navigation when in 'full-page' mode

* refactor: fix tooltip interactions

* feat: Add examples

* feat: Add documentation

* chore: bum version & update release notes

* refactor: apostrophe fixes

* refactor: update documentation as per design comments

* feat: add smooth scrolling

* refactor: adjust intersection oberserver to focus the center of the screen

* feat: align mobile/tablet view to screen edge

* feat: focus headings when clicking navigation links

* fix: background color mismatch

* fix: spacing issue on horizontal navigation

* feat: address design suggestions

* refactor: address documentation suggestions

* chore: update 'in page' to 'in-page'

* feat: adjust IntersectionObserver focus point dependent on screen size

* refactor: run formatter

* feat: add custom positioning for tooltip in no overflow container

* refactor: correct typos in docs

* refactor: apply design suggestions

* refactor: consolidate styles based on screen sizes

* fix: linkchecker

* chore: address comments from code review

* chore: address code review comments

* fix: run prettier

* chore: bump parker.js stylesheet threshold to 532480

Author: petesfrench

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.44.0",
+  "version": "4.45.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.45.0
+  features:
+    - component: In-page navigation
+      url: /docs/patterns/in-page-navigation
+      status: New
+      notes: We've introduced a new in-page navigation pattern.
 - version: 4.44.0
   features:
     - component: Hero section

scss/_base_placeholders.scss

@@ -97,6 +97,18 @@
     }
   }
 
+  %vf-pseudo-border--left {
+    position: relative;
+
+    &::before {
+      @extend %vf-pseudo-border;
+      bottom: 0;
+      height: auto;
+      top: 0;
+      width: 1px;
+    }
+  }
+
   %hr {
     background: $colors--theme--border-default;
     border: 0;