feat(ui): own responsive marketing layout APIs

packages/ui/components/Scrollspy.wrn

@@ -24,6 +24,10 @@ component Scrollspy {
     active: string = ""
     label: string = "On this page"
     heading: string = ""
+    sticky: boolean = false
+    topOffset: string = "6rem"
+    sectionOffset: string = "7rem"
+    collapseAt: string = "800px"
     class: string = ""
   }
 
@@ -44,6 +48,7 @@ component Scrollspy {
       class='wrn-scrollspy {class}'
       data-color='{color}'
       data-size='{size}'
+      data-sticky='{sticky ? "true" : "false"}' data-collapse-at='{collapseAt}' style='--wrn-scrollspy-top: {topOffset}; --wrn-scrollspy-section-offset: {sectionOffset};'
       data-wrn-scrollspy="true"
       role="navigation"
       aria-label='{label}'
@@ -74,6 +79,8 @@ component Scrollspy {
       --scrollspy-accent: var(--wrn-color-primary);
       max-width: 100%;
     }
+    .wrn-scrollspy[data-sticky="true"] { position: sticky; top: var(--wrn-scrollspy-top); height: max-content; }
+    .wrn-scrollspy__link { scroll-margin-top: var(--wrn-scrollspy-section-offset); }
 
     .wrn-scrollspy:not(:has(.wrn-scrollspy__item)):not(:has(slot > *)) {
       display: none;
@@ -152,6 +159,7 @@ component Scrollspy {
      * line rather than a screenful.
      */
     @media (max-width: 767px) {
+      .wrn-scrollspy[data-collapse-at="800px"] { position: static; }
       .wrn-scrollspy__list {
         grid-auto-flow: column;
         grid-auto-columns: max-content;