@brytdesigns/web-component-gnav-header 1.0.0

package/dist/esm/index.js

@@ -0,0 +1,241 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
+import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
+import { debounce } from '@solid-primitives/scheduled';
+import { createSignal, onCleanup, createEffect, on } from 'solid-js';
+import { animate } from 'motion';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/gnav-header.ts
+var gnav_header_exports = {};
+__export(gnav_header_exports, {
+  Component: () => Component,
+  Name: () => Name
+});
+
+// src/utils.ts
+var groupBy = (list, getKey) => list.reduce(
+  (previous, currentItem, index) => {
+    const group = getKey(currentItem, index);
+    if (!previous[group]) previous[group] = [];
+    previous[group].push(currentItem);
+    return previous;
+  },
+  {}
+);
+var CSSVars = {
+  headerHeight: "--header-height",
+  collapsedHeaderHeight: "--collapsed-header-height",
+  stickyHeaderHeight: "--sticky-header-height",
+  stickyHeaderTop: "--sticky-header-top"
+};
+function updateCssVar(host, varName, amount) {
+  host.style.setProperty(CSSVars[varName], `${amount}px`);
+}
+function getCssVarValue(host, varName) {
+  const raw = getComputedStyle(host).getPropertyValue(CSSVars[varName]);
+  return parseFloat(raw) || 0;
+}
+
+// src/components/gnav-header.ts
+var Name = `gnav-header`;
+var SECTION_TAG = "gnav-header-section";
+function awaitInFlightSectionAnimations(sections) {
+  return Promise.allSettled(
+    sections.flatMap(
+      (section) => section.getAnimations().map((animation) => animation.finished)
+    )
+  );
+}
+function nodesContainSection(nodes) {
+  return Array.from(nodes).some(
+    (node) => node instanceof Element && (node.tagName.toLowerCase() === SECTION_TAG || node.querySelector(SECTION_TAG) !== null)
+  );
+}
+var Component = (props, { element }) => {
+  const [sections, setSections] = createSignal([]);
+  let runId = 0;
+  function setupSection(section, position) {
+    section.setAttribute("position", String(position));
+    if (!section.style.position) section.style.position = "relative";
+    if (section.hasAttribute("hide-on-trigger")) section.style.zIndex = "99";
+    else section.style.zIndex = "100";
+  }
+  function refreshSections() {
+    const found = Array.from(
+      document.querySelectorAll(SECTION_TAG)
+    );
+    found.forEach((section, i) => setupSection(section, i + 1));
+    setSections(found);
+  }
+  refreshSections();
+  if (!sections().length) {
+    console.warn("No gnav-header-section found!");
+  }
+  updateCssVar(element, "headerHeight", element.offsetHeight);
+  updateCssVar(element, "collapsedHeaderHeight", getCollapsedHeaderHeight());
+  const observer = new MutationObserver((mutations) => {
+    const relevant = mutations.some(
+      (m) => nodesContainSection(m.addedNodes) || nodesContainSection(m.removedNodes)
+    );
+    if (relevant) refreshSections();
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  onCleanup(() => observer.disconnect());
+  createEffect(
+    on(
+      () => props.scrollThreshold,
+      (scrollThreshold) => {
+        const controller = new AbortController();
+        let previousScroll = window.scrollY;
+        function handleScroll() {
+          const delta = window.scrollY - previousScroll;
+          if (Math.abs(delta) < scrollThreshold) return;
+          element.setAttribute("collapsed", String(delta > 0));
+          previousScroll = Math.max(0, window.scrollY);
+        }
+        const handleResize = debounce(function() {
+          updateCssVar(element, "headerHeight", element.offsetHeight);
+          updateCssVar(
+            element,
+            "collapsedHeaderHeight",
+            getCollapsedHeaderHeight()
+          );
+          if (props.collapsed) handleScrollDownAnimation();
+          else handleScrollUpAnimation();
+        }, 200);
+        window.addEventListener("scroll", handleScroll, {
+          capture: true,
+          signal: controller.signal
+        });
+        window.addEventListener("resize", handleResize, {
+          capture: true,
+          signal: controller.signal
+        });
+        onCleanup(() => {
+          controller.abort();
+          handleResize.clear();
+        });
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => props.collapsed,
+      (collapsed) => {
+        if (collapsed) {
+          return handleScrollDownAnimation();
+        }
+        return handleScrollUpAnimation();
+      }
+    )
+  );
+  function shouldHideSectionOnTrigger(section) {
+    return section.hasAttribute("hide-on-trigger");
+  }
+  function getCollapsedHeaderHeight() {
+    return sections().reduce((total, section) => {
+      if (shouldHideSectionOnTrigger(section)) return total;
+      return total + section.getBoundingClientRect().height;
+    }, 0);
+  }
+  function getGroupedSections() {
+    return groupBy(
+      sections(),
+      (section) => shouldHideSectionOnTrigger(section) ? "hidden" : "visible"
+    );
+  }
+  async function handleScrollDownAnimation() {
+    const id = ++runId;
+    const currentSections = sections();
+    if (!currentSections.length) return;
+    await awaitInFlightSectionAnimations(currentSections);
+    if (id !== runId) return;
+    const animations = [];
+    const groupedSections = getGroupedSections();
+    if (!groupedSections.hidden) groupedSections.hidden = [];
+    if (!groupedSections.visible) groupedSections.visible = [];
+    let offset = groupedSections.hidden.reduce((total, el) => {
+      return total + el.getBoundingClientRect().height;
+    }, 0);
+    groupedSections.hidden.forEach((section) => {
+      const bounding = section.getBoundingClientRect();
+      const animation = animate(section, {
+        y: `${(section.offsetTop + offset) * -1}px`
+      });
+      offset -= bounding.height;
+      animations.push(animation);
+    });
+    offset = 0;
+    groupedSections.visible.forEach((section) => {
+      const bounding = section.getBoundingClientRect();
+      const animation = animate(section, {
+        y: `${offset - section.offsetTop}px`
+      });
+      offset += bounding.height;
+      animations.push(animation);
+    });
+    updateCssVar(element, "stickyHeaderHeight", offset);
+    updateCssVar(element, "collapsedHeaderHeight", offset);
+    animations.push(animateStickyHeaderTop());
+    return awaitAllAnimations(animations);
+  }
+  async function handleScrollUpAnimation() {
+    const id = ++runId;
+    const currentSections = sections();
+    if (!currentSections.length) return;
+    await awaitInFlightSectionAnimations(currentSections);
+    if (id !== runId) return;
+    updateCssVar(
+      element,
+      "stickyHeaderHeight",
+      element.getBoundingClientRect().height
+    );
+    return awaitAllAnimations([
+      animate(currentSections, {
+        y: "0px"
+      }),
+      animateStickyHeaderTop(false)
+    ]);
+  }
+  function animateStickyHeaderTop(isScrollingDown = true) {
+    let from = getCssVarValue(element, "stickyHeaderTop");
+    if (!from)
+      from = isScrollingDown ? element.offsetHeight : getCollapsedHeaderHeight();
+    const to = isScrollingDown ? getCollapsedHeaderHeight() : element.getBoundingClientRect().height;
+    return animate(from, to, {
+      onUpdate: (latest) => updateCssVar(element, "stickyHeaderTop", latest)
+    });
+  }
+};
+
+// src/components/gnav-header-section.ts
+var gnav_header_section_exports = {};
+__export(gnav_header_section_exports, {
+  Component: () => Component2,
+  Name: () => Name2
+});
+var Name2 = "gnav-header-section";
+var Component2 = () => {
+};
+
+// src/index.ts
+customShadowlessElement(
+  gnav_header_exports.Name,
+  {
+    scrollThreshold: 20,
+    collapsed: false
+  },
+  correctElementType(gnav_header_exports.Component)
+);
+customShadowlessElement(gnav_header_section_exports.Name, {
+  hideOnTrigger: false,
+  position: 0,
+  shouldTrigger: false
+}, correctElementType(gnav_header_section_exports.Component));
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/gnav-header.ts","../../src/utils.ts","../../src/components/gnav-header-section.ts","../../src/index.ts"],"names":["Component","Name"],"mappings":";;;;;;;;;;;;;AAAA,IAAA,mBAAA,GAAA,EAAA;AAAA,QAAA,CAAA,mBAAA,EAAA;AAAA,EAAA,SAAA,EAAA,MAAA,SAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA;;;ACAO,IAAM,OAAU,GAAA,CACrB,IACA,EAAA,MAAA,KAEA,IAAK,CAAA,MAAA;AAAA,EACH,CAAC,QAAU,EAAA,WAAA,EAAa,KAAU,KAAA;AAChC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,EAAa,KAAK,CAAA;AACvC,IAAA,IAAI,CAAC,QAAS,CAAA,KAAK,GAAY,QAAA,CAAA,KAAK,IAAI,EAAC;AACzC,IAAS,QAAA,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,WAAW,CAAA;AAChC,IAAO,OAAA,QAAA;AAAA,GACT;AAAA,EACA;AACF,CAAA;AAEK,IAAM,OAAU,GAAA;AAAA,EACrB,YAAc,EAAA,iBAAA;AAAA,EACd,qBAAuB,EAAA,2BAAA;AAAA,EACvB,kBAAoB,EAAA,wBAAA;AAAA,EACpB,eAAiB,EAAA;AACnB,CAAA;AAEO,SAAS,YAAA,CACd,IACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,IAAA,CAAK,MAAM,WAAY,CAAA,OAAA,CAAQ,OAAO,CAAG,EAAA,CAAA,EAAG,MAAM,CAAI,EAAA,CAAA,CAAA;AACxD;AAEO,SAAS,cAAA,CACd,MACA,OACQ,EAAA;AACR,EAAA,MAAM,MAAM,gBAAiB,CAAA,IAAI,EAAE,gBAAiB,CAAA,OAAA,CAAQ,OAAO,CAAC,CAAA;AACpE,EAAO,OAAA,UAAA,CAAW,GAAG,CAAK,IAAA,CAAA;AAC5B;;;ADtBO,IAAM,IAAO,GAAA,CAAA,WAAA,CAAA;AAEpB,IAAM,WAAc,GAAA,qBAAA;AAEpB,SAAS,+BAA+B,QAAyB,EAAA;AAC/D,EAAA,OAAO,OAAQ,CAAA,UAAA;AAAA,IACb,QAAS,CAAA,OAAA;AAAA,MAAQ,CAAC,YAChB,OAAQ,CAAA,aAAA,GAAgB,GAAI,CAAA,CAAC,SAAc,KAAA,SAAA,CAAU,QAAQ;AAAA;AAC/D,GACF;AACF;AAEA,SAAS,oBAAoB,KAA0B,EAAA;AACrD,EAAO,OAAA,KAAA,CAAM,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA;AAAA,IACvB,CAAC,IAAA,KACC,IAAgB,YAAA,OAAA,KACf,IAAK,CAAA,OAAA,CAAQ,WAAY,EAAA,KAAM,WAC9B,IAAA,IAAA,CAAK,aAAc,CAAA,WAAW,CAAM,KAAA,IAAA;AAAA,GAC1C;AACF;AAEO,IAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,YAAA,CAA4B,EAAE,CAAA;AAC9D,EAAA,IAAI,KAAQ,GAAA,CAAA;AAEZ,EAAS,SAAA,YAAA,CAAa,SAAsB,QAAkB,EAAA;AAC5D,IAAA,OAAA,CAAQ,YAAa,CAAA,UAAA,EAAY,MAAO,CAAA,QAAQ,CAAC,CAAA;AACjD,IAAA,IAAI,CAAC,OAAQ,CAAA,KAAA,CAAM,QAAU,EAAA,OAAA,CAAQ,MAAM,QAAW,GAAA,UAAA;AACtD,IAAA,IAAI,QAAQ,YAAa,CAAA,iBAAiB,CAAG,EAAA,OAAA,CAAQ,MAAM,MAAS,GAAA,IAAA;AAAA,SAC/D,OAAA,CAAQ,MAAM,MAAS,GAAA,KAAA;AAAA;AAG9B,EAAA,SAAS,eAAkB,GAAA;AACzB,IAAA,MAAM,QAAQ,KAAM,CAAA,IAAA;AAAA,MAClB,QAAA,CAAS,iBAA8B,WAAW;AAAA,KACpD;AACA,IAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,OAAS,EAAA,CAAA,KAAM,aAAa,OAAS,EAAA,CAAA,GAAI,CAAC,CAAC,CAAA;AAC1D,IAAA,WAAA,CAAY,KAAK,CAAA;AAAA;AAGnB,EAAgB,eAAA,EAAA;AAEhB,EAAI,IAAA,CAAC,QAAS,EAAA,CAAE,MAAQ,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,+BAA+B,CAAA;AAAA;AAG9C,EAAa,YAAA,CAAA,OAAA,EAAS,cAAgB,EAAA,OAAA,CAAQ,YAAY,CAAA;AAC1D,EAAa,YAAA,CAAA,OAAA,EAAS,uBAAyB,EAAA,wBAAA,EAA0B,CAAA;AAEzE,EAAA,MAAM,QAAW,GAAA,IAAI,gBAAiB,CAAA,CAAC,SAAc,KAAA;AACnD,IAAA,MAAM,WAAW,SAAU,CAAA,IAAA;AAAA,MACzB,CAAC,MACC,mBAAoB,CAAA,CAAA,CAAE,UAAU,CAChC,IAAA,mBAAA,CAAoB,EAAE,YAAY;AAAA,KACtC;AACA,IAAA,IAAI,UAA0B,eAAA,EAAA;AAAA,GAC/B,CAAA;AACD,EAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAM,EAAA,EAAE,WAAW,IAAM,EAAA,OAAA,EAAS,MAAM,CAAA;AAClE,EAAU,SAAA,CAAA,MAAM,QAAS,CAAA,UAAA,EAAY,CAAA;AAErC,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,eAAA;AAAA,MACZ,CAAC,eAAoB,KAAA;AACnB,QAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AACvC,QAAA,IAAI,iBAAiB,MAAO,CAAA,OAAA;AAE5B,QAAA,SAAS,YAAe,GAAA;AACtB,UAAM,MAAA,KAAA,GAAQ,OAAO,OAAU,GAAA,cAAA;AAC/B,UAAA,IAAI,IAAK,CAAA,GAAA,CAAI,KAAK,CAAA,GAAI,eAAiB,EAAA;AACvC,UAAA,OAAA,CAAQ,YAAa,CAAA,WAAA,EAAa,MAAO,CAAA,KAAA,GAAQ,CAAC,CAAC,CAAA;AACnD,UAAA,cAAA,GAAiB,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,MAAA,CAAO,OAAO,CAAA;AAAA;AAG7C,QAAM,MAAA,YAAA,GAAe,SAAS,WAAY;AACxC,UAAa,YAAA,CAAA,OAAA,EAAS,cAAgB,EAAA,OAAA,CAAQ,YAAY,CAAA;AAC1D,UAAA,YAAA;AAAA,YACE,OAAA;AAAA,YACA,uBAAA;AAAA,YACA,wBAAyB;AAAA,WAC3B;AACA,UAAI,IAAA,KAAA,CAAM,WAAqC,yBAAA,EAAA;AAAA,eAClB,uBAAA,EAAA;AAAA,WAC5B,GAAG,CAAA;AAEN,QAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,YAAc,EAAA;AAAA,UAC9C,OAAS,EAAA,IAAA;AAAA,UACT,QAAQ,UAAW,CAAA;AAAA,SACpB,CAAA;AACD,QAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,YAAc,EAAA;AAAA,UAC9C,OAAS,EAAA,IAAA;AAAA,UACT,QAAQ,UAAW,CAAA;AAAA,SACpB,CAAA;AAED,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,UAAA,CAAW,KAAM,EAAA;AACjB,UAAA,YAAA,CAAa,KAAM,EAAA;AAAA,SACpB,CAAA;AAAA;AACH;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,SAAA;AAAA,MACZ,CAAC,SAAc,KAAA;AACb,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,OAAO,yBAA0B,EAAA;AAAA;AAEnC,QAAA,OAAO,uBAAwB,EAAA;AAAA;AACjC;AACF,GACF;AAEA,EAAA,SAAS,2BAA2B,OAAsB,EAAA;AACxD,IAAO,OAAA,OAAA,CAAQ,aAAa,iBAAiB,CAAA;AAAA;AAG/C,EAAA,SAAS,wBAA2B,GAAA;AAClC,IAAA,OAAO,QAAS,EAAA,CAAE,MAAO,CAAA,CAAC,OAAO,OAAY,KAAA;AAC3C,MAAI,IAAA,0BAAA,CAA2B,OAAO,CAAA,EAAU,OAAA,KAAA;AAChD,MAAO,OAAA,KAAA,GAAQ,OAAQ,CAAA,qBAAA,EAAwB,CAAA,MAAA;AAAA,OAC9C,CAAC,CAAA;AAAA;AAGN,EAAA,SAAS,kBAAqB,GAAA;AAC5B,IAAO,OAAA,OAAA;AAAA,MAAQ,QAAS,EAAA;AAAA,MAAG,CAAC,OAAA,KAC1B,0BAA2B,CAAA,OAAO,IAAI,QAAW,GAAA;AAAA,KACnD;AAAA;AAGF,EAAA,eAAe,yBAA4B,GAAA;AACzC,IAAA,MAAM,KAAK,EAAE,KAAA;AACb,IAAA,MAAM,kBAAkB,QAAS,EAAA;AACjC,IAAI,IAAA,CAAC,gBAAgB,MAAQ,EAAA;AAE7B,IAAA,MAAM,+BAA+B,eAAe,CAAA;AACpD,IAAA,IAAI,OAAO,KAAO,EAAA;AAElB,IAAA,MAAM,aAAa,EAAC;AACpB,IAAA,MAAM,kBAAkB,kBAAmB,EAAA;AAE3C,IAAA,IAAI,CAAC,eAAA,CAAgB,MAAQ,EAAA,eAAA,CAAgB,SAAS,EAAC;AACvD,IAAA,IAAI,CAAC,eAAA,CAAgB,OAAS,EAAA,eAAA,CAAgB,UAAU,EAAC;AAEzD,IAAA,IAAI,SAAS,eAAgB,CAAA,MAAA,CAAO,MAAO,CAAA,CAAC,OAAO,EAAO,KAAA;AACxD,MAAO,OAAA,KAAA,GAAQ,EAAG,CAAA,qBAAA,EAAwB,CAAA,MAAA;AAAA,OACzC,CAAC,CAAA;AAEJ,IAAgB,eAAA,CAAA,MAAA,CAAO,OAAQ,CAAA,CAAC,OAAY,KAAA;AAC1C,MAAM,MAAA,QAAA,GAAW,QAAQ,qBAAsB,EAAA;AAC/C,MAAM,MAAA,SAAA,GAAY,QAAQ,OAAS,EAAA;AAAA,QACjC,CAAG,EAAA,CAAA,EAAA,CAAI,OAAQ,CAAA,SAAA,GAAY,UAAU,EAAE,CAAA,EAAA;AAAA,OACxC,CAAA;AACD,MAAA,MAAA,IAAU,QAAS,CAAA,MAAA;AACnB,MAAA,UAAA,CAAW,KAAK,SAAS,CAAA;AAAA,KAC1B,CAAA;AAED,IAAS,MAAA,GAAA,CAAA;AAET,IAAgB,eAAA,CAAA,OAAA,CAAQ,OAAQ,CAAA,CAAC,OAAY,KAAA;AAC3C,MAAM,MAAA,QAAA,GAAW,QAAQ,qBAAsB,EAAA;AAC/C,MAAM,MAAA,SAAA,GAAY,QAAQ,OAAS,EAAA;AAAA,QACjC,CAAG,EAAA,CAAA,EAAG,MAAS,GAAA,OAAA,CAAQ,SAAS,CAAA,EAAA;AAAA,OACjC,CAAA;AACD,MAAA,MAAA,IAAU,QAAS,CAAA,MAAA;AACnB,MAAA,UAAA,CAAW,KAAK,SAAS,CAAA;AAAA,KAC1B,CAAA;AAED,IAAa,YAAA,CAAA,OAAA,EAAS,sBAAsB,MAAM,CAAA;AAClD,IAAa,YAAA,CAAA,OAAA,EAAS,yBAAyB,MAAM,CAAA;AAErD,IAAW,UAAA,CAAA,IAAA,CAAK,wBAAwB,CAAA;AAExC,IAAA,OAAO,mBAAmB,UAAU,CAAA;AAAA;AAGtC,EAAA,eAAe,uBAA0B,GAAA;AACvC,IAAA,MAAM,KAAK,EAAE,KAAA;AACb,IAAA,MAAM,kBAAkB,QAAS,EAAA;AACjC,IAAI,IAAA,CAAC,gBAAgB,MAAQ,EAAA;AAE7B,IAAA,MAAM,+BAA+B,eAAe,CAAA;AACpD,IAAA,IAAI,OAAO,KAAO,EAAA;AAElB,IAAA,YAAA;AAAA,MACE,OAAA;AAAA,MACA,oBAAA;AAAA,MACA,OAAA,CAAQ,uBAAwB,CAAA;AAAA,KAClC;AACA,IAAA,OAAO,kBAAmB,CAAA;AAAA,MACxB,QAAQ,eAAiB,EAAA;AAAA,QACvB,CAAG,EAAA;AAAA,OACJ,CAAA;AAAA,MACD,uBAAuB,KAAK;AAAA,KAC7B,CAAA;AAAA;AAGH,EAAS,SAAA,sBAAA,CAAuB,kBAAkB,IAAM,EAAA;AACtD,IAAI,IAAA,IAAA,GAAO,cAAe,CAAA,OAAA,EAAS,iBAAiB,CAAA;AAEpD,IAAA,IAAI,CAAC,IAAA;AACH,MAAO,IAAA,GAAA,eAAA,GAAkB,OAAQ,CAAA,YAAA,GAAe,wBAAyB,EAAA;AAE3E,IAAA,MAAM,KAAK,eACP,GAAA,wBAAA,EACA,GAAA,OAAA,CAAQ,uBAAwB,CAAA,MAAA;AAEpC,IAAO,OAAA,OAAA,CAAQ,MAAM,EAAI,EAAA;AAAA,MACvB,UAAU,CAAC,MAAA,KAAW,YAAa,CAAA,OAAA,EAAS,mBAAmB,MAAM;AAAA,KACtE,CAAA;AAAA;AAEL,CAAA;;;AEjOA,IAAA,2BAAA,GAAA,EAAA;AAAA,QAAA,CAAA,2BAAA,EAAA;AAAA,EAAAA,SAAAA,EAAAA,MAAAA,UAAAA;AAAA,EAAA,IAAAC,EAAAA,MAAAA;AAAA,CAAA,CAAA;AAQO,IAAMA,KAAO,GAAA,qBAAA;AAEb,IAAMD,aAAyC,MAAM;AAAC,CAAA;;;ACA7D,uBAAA;AAAA,EACC,mBAAW,CAAA,IAAA;AAAA,EACX;AAAA,IACC,eAAiB,EAAA,EAAA;AAAA,IACjB,SAAW,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,oBAAW,SAAS;AACxC,CAAA;AAEA,uBAAA,CAAwB,4BAAkB,IAAM,EAAA;AAAA,EAC/C,aAAe,EAAA,KAAA;AAAA,EACf,QAAU,EAAA,CAAA;AAAA,EACV,aAAe,EAAA;AAChB,CAAG,EAAA,kBAAA,CAAmB,2BAAkB,CAAA,SAAS,CAAC,CAAA","file":"index.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { debounce } from \"@solid-primitives/scheduled\";\nimport { onCleanup, createEffect, createSignal, on } from \"solid-js\";\nimport { animate } from \"motion\";\n\nimport { groupBy, updateCssVar, getCssVarValue } from \"../utils.js\";\n\nexport type Props = {\n  scrollThreshold: number;\n  collapsed: boolean;\n};\n\nexport const Name = `gnav-header`;\n\nconst SECTION_TAG = \"gnav-header-section\";\n\nfunction awaitInFlightSectionAnimations(sections: HTMLElement[]) {\n  return Promise.allSettled(\n    sections.flatMap((section) =>\n      section.getAnimations().map((animation) => animation.finished),\n    ),\n  );\n}\n\nfunction nodesContainSection(nodes: NodeList): boolean {\n  return Array.from(nodes).some(\n    (node) =>\n      node instanceof Element &&\n      (node.tagName.toLowerCase() === SECTION_TAG ||\n        node.querySelector(SECTION_TAG) !== null),\n  );\n}\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  const [sections, setSections] = createSignal<HTMLElement[]>([]);\n  let runId = 0;\n\n  function setupSection(section: HTMLElement, position: number) {\n    section.setAttribute(\"position\", String(position));\n    if (!section.style.position) section.style.position = \"relative\";\n    if (section.hasAttribute(\"hide-on-trigger\")) section.style.zIndex = \"99\";\n    else section.style.zIndex = \"100\";\n  }\n\n  function refreshSections() {\n    const found = Array.from(\n      document.querySelectorAll<HTMLElement>(SECTION_TAG),\n    );\n    found.forEach((section, i) => setupSection(section, i + 1));\n    setSections(found);\n  }\n\n  refreshSections();\n\n  if (!sections().length) {\n    console.warn(\"No gnav-header-section found!\");\n  }\n\n  updateCssVar(element, \"headerHeight\", element.offsetHeight);\n  updateCssVar(element, \"collapsedHeaderHeight\", getCollapsedHeaderHeight());\n\n  const observer = new MutationObserver((mutations) => {\n    const relevant = mutations.some(\n      (m) =>\n        nodesContainSection(m.addedNodes) ||\n        nodesContainSection(m.removedNodes),\n    );\n    if (relevant) refreshSections();\n  });\n  observer.observe(document.body, { childList: true, subtree: true });\n  onCleanup(() => observer.disconnect());\n\n  createEffect(\n    on(\n      () => props.scrollThreshold,\n      (scrollThreshold) => {\n        const controller = new AbortController();\n        let previousScroll = window.scrollY;\n\n        function handleScroll() {\n          const delta = window.scrollY - previousScroll;\n          if (Math.abs(delta) < scrollThreshold) return;\n          element.setAttribute(\"collapsed\", String(delta > 0));\n          previousScroll = Math.max(0, window.scrollY);\n        }\n\n        const handleResize = debounce(function () {\n          updateCssVar(element, \"headerHeight\", element.offsetHeight);\n          updateCssVar(\n            element,\n            \"collapsedHeaderHeight\",\n            getCollapsedHeaderHeight(),\n          );\n          if (props.collapsed) handleScrollDownAnimation();\n          else handleScrollUpAnimation();\n        }, 200);\n\n        window.addEventListener(\"scroll\", handleScroll, {\n          capture: true,\n          signal: controller.signal,\n        });\n        window.addEventListener(\"resize\", handleResize, {\n          capture: true,\n          signal: controller.signal,\n        });\n\n        onCleanup(() => {\n          controller.abort();\n          handleResize.clear();\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => props.collapsed,\n      (collapsed) => {\n        if (collapsed) {\n          return handleScrollDownAnimation();\n        }\n        return handleScrollUpAnimation();\n      },\n    ),\n  );\n\n  function shouldHideSectionOnTrigger(section: HTMLElement) {\n    return section.hasAttribute(\"hide-on-trigger\");\n  }\n\n  function getCollapsedHeaderHeight() {\n    return sections().reduce((total, section) => {\n      if (shouldHideSectionOnTrigger(section)) return total;\n      return total + section.getBoundingClientRect().height;\n    }, 0);\n  }\n\n  function getGroupedSections() {\n    return groupBy(sections(), (section) =>\n      shouldHideSectionOnTrigger(section) ? \"hidden\" : \"visible\",\n    );\n  }\n\n  async function handleScrollDownAnimation() {\n    const id = ++runId;\n    const currentSections = sections();\n    if (!currentSections.length) return;\n\n    await awaitInFlightSectionAnimations(currentSections);\n    if (id !== runId) return;\n\n    const animations = [];\n    const groupedSections = getGroupedSections();\n\n    if (!groupedSections.hidden) groupedSections.hidden = [];\n    if (!groupedSections.visible) groupedSections.visible = [];\n\n    let offset = groupedSections.hidden.reduce((total, el) => {\n      return total + el.getBoundingClientRect().height;\n    }, 0);\n\n    groupedSections.hidden.forEach((section) => {\n      const bounding = section.getBoundingClientRect();\n      const animation = animate(section, {\n        y: `${(section.offsetTop + offset) * -1}px`,\n      });\n      offset -= bounding.height;\n      animations.push(animation);\n    });\n\n    offset = 0;\n\n    groupedSections.visible.forEach((section) => {\n      const bounding = section.getBoundingClientRect();\n      const animation = animate(section, {\n        y: `${offset - section.offsetTop}px`,\n      });\n      offset += bounding.height;\n      animations.push(animation);\n    });\n\n    updateCssVar(element, \"stickyHeaderHeight\", offset);\n    updateCssVar(element, \"collapsedHeaderHeight\", offset);\n\n    animations.push(animateStickyHeaderTop());\n\n    return awaitAllAnimations(animations);\n  }\n\n  async function handleScrollUpAnimation() {\n    const id = ++runId;\n    const currentSections = sections();\n    if (!currentSections.length) return;\n\n    await awaitInFlightSectionAnimations(currentSections);\n    if (id !== runId) return;\n\n    updateCssVar(\n      element,\n      \"stickyHeaderHeight\",\n      element.getBoundingClientRect().height,\n    );\n    return awaitAllAnimations([\n      animate(currentSections, {\n        y: \"0px\",\n      }),\n      animateStickyHeaderTop(false),\n    ]);\n  }\n\n  function animateStickyHeaderTop(isScrollingDown = true) {\n    let from = getCssVarValue(element, \"stickyHeaderTop\");\n\n    if (!from)\n      from = isScrollingDown ? element.offsetHeight : getCollapsedHeaderHeight();\n\n    const to = isScrollingDown\n      ? getCollapsedHeaderHeight()\n      : element.getBoundingClientRect().height;\n\n    return animate(from, to, {\n      onUpdate: (latest) => updateCssVar(element, \"stickyHeaderTop\", latest),\n    });\n  }\n};\n","export const groupBy = <T, K extends PropertyKey>(\n  list: T[],\n  getKey: (item: T, index: number) => K\n) =>\n  list.reduce(\n    (previous, currentItem, index) => {\n      const group = getKey(currentItem, index);\n      if (!previous[group]) previous[group] = [];\n      previous[group].push(currentItem);\n      return previous;\n    },\n    {} as Record<K, T[]>\n  );\n\nexport const CSSVars = {\n  headerHeight: \"--header-height\",\n  collapsedHeaderHeight: \"--collapsed-header-height\",\n  stickyHeaderHeight: \"--sticky-header-height\",\n  stickyHeaderTop: \"--sticky-header-top\",\n} as const;\n\nexport function updateCssVar(\n  host: HTMLElement,\n  varName: keyof typeof CSSVars,\n  amount: number\n) {\n  host.style.setProperty(CSSVars[varName], `${amount}px`);\n}\n\nexport function getCssVarValue(\n  host: HTMLElement,\n  varName: keyof typeof CSSVars\n): number {\n  const raw = getComputedStyle(host).getPropertyValue(CSSVars[varName]);\n  return parseFloat(raw) || 0;\n}\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nexport type Props = {\n  shouldTrigger: boolean;\n  position: number;\n  hideOnTrigger: boolean;\n};\n\nexport const Name = \"gnav-header-section\";\n\nexport const Component: CorrectComponentType<Props> = () => {};\n","import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { GnavHeader, GnavHeaderSection } from \"./components/index.js\";\n\nexport type GnavHeaderProps = GnavHeader.Props;\nexport type GnavHeaderSectionProps = GnavHeaderSection.Props;\n\ncustomShadowlessElement(\n\tGnavHeader.Name,\n\t{\n\t\tscrollThreshold: 20,\n\t\tcollapsed: false\n\t},\n\tcorrectElementType(GnavHeader.Component),\n);\n\ncustomShadowlessElement(GnavHeaderSection.Name, {\n\thideOnTrigger: false,\n\tposition: 0,\n\tshouldTrigger: false\n}, correctElementType(GnavHeaderSection.Component))"]}

package/dist/main/components/gnav-header-section.js

@@ -0,0 +1,7 @@
+const Name = "gnav-header-section";
+const Component = () => {
+};
+
+export { Component, Name };
+//# sourceMappingURL=gnav-header-section.js.map
+//# sourceMappingURL=gnav-header-section.js.map

package/dist/main/components/gnav-header-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/gnav-header-section.ts"],"names":[],"mappings":"AAQO,MAAM,IAAO,GAAA;AAEb,MAAM,YAAyC,MAAM;AAAC","file":"gnav-header-section.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nexport type Props = {\n  shouldTrigger: boolean;\n  position: number;\n  hideOnTrigger: boolean;\n};\n\nexport const Name = \"gnav-header-section\";\n\nexport const Component: CorrectComponentType<Props> = () => {};\n"]}

package/dist/main/components/gnav-header.js

@@ -0,0 +1,181 @@
+import '@brytdesigns/web-component-core/utils';
+import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
+import { debounce } from '@solid-primitives/scheduled';
+import { createSignal, onCleanup, createEffect, on } from 'solid-js';
+import { animate } from 'motion';
+import { updateCssVar, getCssVarValue, groupBy } from '../utils.js';
+
+const Name = `gnav-header`;
+const SECTION_TAG = "gnav-header-section";
+function awaitInFlightSectionAnimations(sections) {
+  return Promise.allSettled(
+    sections.flatMap(
+      (section) => section.getAnimations().map((animation) => animation.finished)
+    )
+  );
+}
+function nodesContainSection(nodes) {
+  return Array.from(nodes).some(
+    (node) => node instanceof Element && (node.tagName.toLowerCase() === SECTION_TAG || node.querySelector(SECTION_TAG) !== null)
+  );
+}
+const Component = (props, { element }) => {
+  const [sections, setSections] = createSignal([]);
+  let runId = 0;
+  function setupSection(section, position) {
+    section.setAttribute("position", String(position));
+    if (!section.style.position) section.style.position = "relative";
+    if (section.hasAttribute("hide-on-trigger")) section.style.zIndex = "99";
+    else section.style.zIndex = "100";
+  }
+  function refreshSections() {
+    const found = Array.from(
+      document.querySelectorAll(SECTION_TAG)
+    );
+    found.forEach((section, i) => setupSection(section, i + 1));
+    setSections(found);
+  }
+  refreshSections();
+  if (!sections().length) {
+    console.warn("No gnav-header-section found!");
+  }
+  updateCssVar(element, "headerHeight", element.offsetHeight);
+  updateCssVar(element, "collapsedHeaderHeight", getCollapsedHeaderHeight());
+  const observer = new MutationObserver((mutations) => {
+    const relevant = mutations.some(
+      (m) => nodesContainSection(m.addedNodes) || nodesContainSection(m.removedNodes)
+    );
+    if (relevant) refreshSections();
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  onCleanup(() => observer.disconnect());
+  createEffect(
+    on(
+      () => props.scrollThreshold,
+      (scrollThreshold) => {
+        const controller = new AbortController();
+        let previousScroll = window.scrollY;
+        function handleScroll() {
+          const delta = window.scrollY - previousScroll;
+          if (Math.abs(delta) < scrollThreshold) return;
+          element.setAttribute("collapsed", String(delta > 0));
+          previousScroll = Math.max(0, window.scrollY);
+        }
+        const handleResize = debounce(function() {
+          updateCssVar(element, "headerHeight", element.offsetHeight);
+          updateCssVar(
+            element,
+            "collapsedHeaderHeight",
+            getCollapsedHeaderHeight()
+          );
+          if (props.collapsed) handleScrollDownAnimation();
+          else handleScrollUpAnimation();
+        }, 200);
+        window.addEventListener("scroll", handleScroll, {
+          capture: true,
+          signal: controller.signal
+        });
+        window.addEventListener("resize", handleResize, {
+          capture: true,
+          signal: controller.signal
+        });
+        onCleanup(() => {
+          controller.abort();
+          handleResize.clear();
+        });
+      }
+    )
+  );
+  createEffect(
+    on(
+      () => props.collapsed,
+      (collapsed) => {
+        if (collapsed) {
+          return handleScrollDownAnimation();
+        }
+        return handleScrollUpAnimation();
+      }
+    )
+  );
+  function shouldHideSectionOnTrigger(section) {
+    return section.hasAttribute("hide-on-trigger");
+  }
+  function getCollapsedHeaderHeight() {
+    return sections().reduce((total, section) => {
+      if (shouldHideSectionOnTrigger(section)) return total;
+      return total + section.getBoundingClientRect().height;
+    }, 0);
+  }
+  function getGroupedSections() {
+    return groupBy(
+      sections(),
+      (section) => shouldHideSectionOnTrigger(section) ? "hidden" : "visible"
+    );
+  }
+  async function handleScrollDownAnimation() {
+    const id = ++runId;
+    const currentSections = sections();
+    if (!currentSections.length) return;
+    await awaitInFlightSectionAnimations(currentSections);
+    if (id !== runId) return;
+    const animations = [];
+    const groupedSections = getGroupedSections();
+    if (!groupedSections.hidden) groupedSections.hidden = [];
+    if (!groupedSections.visible) groupedSections.visible = [];
+    let offset = groupedSections.hidden.reduce((total, el) => {
+      return total + el.getBoundingClientRect().height;
+    }, 0);
+    groupedSections.hidden.forEach((section) => {
+      const bounding = section.getBoundingClientRect();
+      const animation = animate(section, {
+        y: `${(section.offsetTop + offset) * -1}px`
+      });
+      offset -= bounding.height;
+      animations.push(animation);
+    });
+    offset = 0;
+    groupedSections.visible.forEach((section) => {
+      const bounding = section.getBoundingClientRect();
+      const animation = animate(section, {
+        y: `${offset - section.offsetTop}px`
+      });
+      offset += bounding.height;
+      animations.push(animation);
+    });
+    updateCssVar(element, "stickyHeaderHeight", offset);
+    updateCssVar(element, "collapsedHeaderHeight", offset);
+    animations.push(animateStickyHeaderTop());
+    return awaitAllAnimations(animations);
+  }
+  async function handleScrollUpAnimation() {
+    const id = ++runId;
+    const currentSections = sections();
+    if (!currentSections.length) return;
+    await awaitInFlightSectionAnimations(currentSections);
+    if (id !== runId) return;
+    updateCssVar(
+      element,
+      "stickyHeaderHeight",
+      element.getBoundingClientRect().height
+    );
+    return awaitAllAnimations([
+      animate(currentSections, {
+        y: "0px"
+      }),
+      animateStickyHeaderTop(false)
+    ]);
+  }
+  function animateStickyHeaderTop(isScrollingDown = true) {
+    let from = getCssVarValue(element, "stickyHeaderTop");
+    if (!from)
+      from = isScrollingDown ? element.offsetHeight : getCollapsedHeaderHeight();
+    const to = isScrollingDown ? getCollapsedHeaderHeight() : element.getBoundingClientRect().height;
+    return animate(from, to, {
+      onUpdate: (latest) => updateCssVar(element, "stickyHeaderTop", latest)
+    });
+  }
+};
+
+export { Component, Name };
+//# sourceMappingURL=gnav-header.js.map
+//# sourceMappingURL=gnav-header.js.map

package/dist/main/components/gnav-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/gnav-header.ts"],"names":[],"mappings":"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","file":"gnav-header.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { debounce } from \"@solid-primitives/scheduled\";\nimport { onCleanup, createEffect, createSignal, on } from \"solid-js\";\nimport { animate } from \"motion\";\n\nimport { groupBy, updateCssVar, getCssVarValue } from \"../utils.js\";\n\nexport type Props = {\n  scrollThreshold: number;\n  collapsed: boolean;\n};\n\nexport const Name = `gnav-header`;\n\nconst SECTION_TAG = \"gnav-header-section\";\n\nfunction awaitInFlightSectionAnimations(sections: HTMLElement[]) {\n  return Promise.allSettled(\n    sections.flatMap((section) =>\n      section.getAnimations().map((animation) => animation.finished),\n    ),\n  );\n}\n\nfunction nodesContainSection(nodes: NodeList): boolean {\n  return Array.from(nodes).some(\n    (node) =>\n      node instanceof Element &&\n      (node.tagName.toLowerCase() === SECTION_TAG ||\n        node.querySelector(SECTION_TAG) !== null),\n  );\n}\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  const [sections, setSections] = createSignal<HTMLElement[]>([]);\n  let runId = 0;\n\n  function setupSection(section: HTMLElement, position: number) {\n    section.setAttribute(\"position\", String(position));\n    if (!section.style.position) section.style.position = \"relative\";\n    if (section.hasAttribute(\"hide-on-trigger\")) section.style.zIndex = \"99\";\n    else section.style.zIndex = \"100\";\n  }\n\n  function refreshSections() {\n    const found = Array.from(\n      document.querySelectorAll<HTMLElement>(SECTION_TAG),\n    );\n    found.forEach((section, i) => setupSection(section, i + 1));\n    setSections(found);\n  }\n\n  refreshSections();\n\n  if (!sections().length) {\n    console.warn(\"No gnav-header-section found!\");\n  }\n\n  updateCssVar(element, \"headerHeight\", element.offsetHeight);\n  updateCssVar(element, \"collapsedHeaderHeight\", getCollapsedHeaderHeight());\n\n  const observer = new MutationObserver((mutations) => {\n    const relevant = mutations.some(\n      (m) =>\n        nodesContainSection(m.addedNodes) ||\n        nodesContainSection(m.removedNodes),\n    );\n    if (relevant) refreshSections();\n  });\n  observer.observe(document.body, { childList: true, subtree: true });\n  onCleanup(() => observer.disconnect());\n\n  createEffect(\n    on(\n      () => props.scrollThreshold,\n      (scrollThreshold) => {\n        const controller = new AbortController();\n        let previousScroll = window.scrollY;\n\n        function handleScroll() {\n          const delta = window.scrollY - previousScroll;\n          if (Math.abs(delta) < scrollThreshold) return;\n          element.setAttribute(\"collapsed\", String(delta > 0));\n          previousScroll = Math.max(0, window.scrollY);\n        }\n\n        const handleResize = debounce(function () {\n          updateCssVar(element, \"headerHeight\", element.offsetHeight);\n          updateCssVar(\n            element,\n            \"collapsedHeaderHeight\",\n            getCollapsedHeaderHeight(),\n          );\n          if (props.collapsed) handleScrollDownAnimation();\n          else handleScrollUpAnimation();\n        }, 200);\n\n        window.addEventListener(\"scroll\", handleScroll, {\n          capture: true,\n          signal: controller.signal,\n        });\n        window.addEventListener(\"resize\", handleResize, {\n          capture: true,\n          signal: controller.signal,\n        });\n\n        onCleanup(() => {\n          controller.abort();\n          handleResize.clear();\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => props.collapsed,\n      (collapsed) => {\n        if (collapsed) {\n          return handleScrollDownAnimation();\n        }\n        return handleScrollUpAnimation();\n      },\n    ),\n  );\n\n  function shouldHideSectionOnTrigger(section: HTMLElement) {\n    return section.hasAttribute(\"hide-on-trigger\");\n  }\n\n  function getCollapsedHeaderHeight() {\n    return sections().reduce((total, section) => {\n      if (shouldHideSectionOnTrigger(section)) return total;\n      return total + section.getBoundingClientRect().height;\n    }, 0);\n  }\n\n  function getGroupedSections() {\n    return groupBy(sections(), (section) =>\n      shouldHideSectionOnTrigger(section) ? \"hidden\" : \"visible\",\n    );\n  }\n\n  async function handleScrollDownAnimation() {\n    const id = ++runId;\n    const currentSections = sections();\n    if (!currentSections.length) return;\n\n    await awaitInFlightSectionAnimations(currentSections);\n    if (id !== runId) return;\n\n    const animations = [];\n    const groupedSections = getGroupedSections();\n\n    if (!groupedSections.hidden) groupedSections.hidden = [];\n    if (!groupedSections.visible) groupedSections.visible = [];\n\n    let offset = groupedSections.hidden.reduce((total, el) => {\n      return total + el.getBoundingClientRect().height;\n    }, 0);\n\n    groupedSections.hidden.forEach((section) => {\n      const bounding = section.getBoundingClientRect();\n      const animation = animate(section, {\n        y: `${(section.offsetTop + offset) * -1}px`,\n      });\n      offset -= bounding.height;\n      animations.push(animation);\n    });\n\n    offset = 0;\n\n    groupedSections.visible.forEach((section) => {\n      const bounding = section.getBoundingClientRect();\n      const animation = animate(section, {\n        y: `${offset - section.offsetTop}px`,\n      });\n      offset += bounding.height;\n      animations.push(animation);\n    });\n\n    updateCssVar(element, \"stickyHeaderHeight\", offset);\n    updateCssVar(element, \"collapsedHeaderHeight\", offset);\n\n    animations.push(animateStickyHeaderTop());\n\n    return awaitAllAnimations(animations);\n  }\n\n  async function handleScrollUpAnimation() {\n    const id = ++runId;\n    const currentSections = sections();\n    if (!currentSections.length) return;\n\n    await awaitInFlightSectionAnimations(currentSections);\n    if (id !== runId) return;\n\n    updateCssVar(\n      element,\n      \"stickyHeaderHeight\",\n      element.getBoundingClientRect().height,\n    );\n    return awaitAllAnimations([\n      animate(currentSections, {\n        y: \"0px\",\n      }),\n      animateStickyHeaderTop(false),\n    ]);\n  }\n\n  function animateStickyHeaderTop(isScrollingDown = true) {\n    let from = getCssVarValue(element, \"stickyHeaderTop\");\n\n    if (!from)\n      from = isScrollingDown ? element.offsetHeight : getCollapsedHeaderHeight();\n\n    const to = isScrollingDown\n      ? getCollapsedHeaderHeight()\n      : element.getBoundingClientRect().height;\n\n    return animate(from, to, {\n      onUpdate: (latest) => updateCssVar(element, \"stickyHeaderTop\", latest),\n    });\n  }\n};\n"]}

package/dist/main/components/index.js

@@ -0,0 +1,6 @@
+import * as gnavHeader_js from './gnav-header.js';
+export { gnavHeader_js as GnavHeader };
+import * as gnavHeaderSection_js from './gnav-header-section.js';
+export { gnavHeaderSection_js as GnavHeaderSection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/index.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/main/index.d.ts

@@ -0,0 +1,29 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { ICustomElement } from 'component-register';
+
+export type CorrectComponentOptions = {
+	element: HTMLElement & ICustomElement;
+};
+export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
+export type Props = {
+	scrollThreshold: number;
+	collapsed: boolean;
+};
+declare const Name = "gnav-header";
+declare const Component: CorrectComponentType<Props>;
+type Props$1 = {
+	shouldTrigger: boolean;
+	position: number;
+	hideOnTrigger: boolean;
+};
+declare const Name$1 = "gnav-header-section";
+declare const Component$1: CorrectComponentType<Props$1>;
+export type GnavHeaderProps = Props;
+export type GnavHeaderSectionProps = GnavHeaderSection.Props;
+
+declare namespace GnavHeaderSection {
+	export { Component$1 as Component, Name$1 as Name, Props$1 as Props };
+}
+
+export {};

package/dist/main/index.js

@@ -0,0 +1,18 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
+import { GnavHeader, GnavHeaderSection } from './components/index.js';
+
+customShadowlessElement(
+  GnavHeader.Name,
+  {
+    scrollThreshold: 20,
+    collapsed: false
+  },
+  correctElementType(GnavHeader.Component)
+);
+customShadowlessElement(GnavHeaderSection.Name, {
+  hideOnTrigger: false,
+  position: 0,
+  shouldTrigger: false
+}, correctElementType(GnavHeaderSection.Component));
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAUA,uBAAA;AAAA,EACC,UAAW,CAAA,IAAA;AAAA,EACX;AAAA,IACC,eAAiB,EAAA,EAAA;AAAA,IACjB,SAAW,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,WAAW,SAAS;AACxC,CAAA;AAEA,uBAAA,CAAwB,kBAAkB,IAAM,EAAA;AAAA,EAC/C,aAAe,EAAA,KAAA;AAAA,EACf,QAAU,EAAA,CAAA;AAAA,EACV,aAAe,EAAA;AAChB,CAAG,EAAA,kBAAA,CAAmB,iBAAkB,CAAA,SAAS,CAAC,CAAA","file":"index.js","sourcesContent":["import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { GnavHeader, GnavHeaderSection } from \"./components/index.js\";\n\nexport type GnavHeaderProps = GnavHeader.Props;\nexport type GnavHeaderSectionProps = GnavHeaderSection.Props;\n\ncustomShadowlessElement(\n\tGnavHeader.Name,\n\t{\n\t\tscrollThreshold: 20,\n\t\tcollapsed: false\n\t},\n\tcorrectElementType(GnavHeader.Component),\n);\n\ncustomShadowlessElement(GnavHeaderSection.Name, {\n\thideOnTrigger: false,\n\tposition: 0,\n\tshouldTrigger: false\n}, correctElementType(GnavHeaderSection.Component))"]}

package/dist/main/utils.js

@@ -0,0 +1,26 @@
+const groupBy = (list, getKey) => list.reduce(
+  (previous, currentItem, index) => {
+    const group = getKey(currentItem, index);
+    if (!previous[group]) previous[group] = [];
+    previous[group].push(currentItem);
+    return previous;
+  },
+  {}
+);
+const CSSVars = {
+  headerHeight: "--header-height",
+  collapsedHeaderHeight: "--collapsed-header-height",
+  stickyHeaderHeight: "--sticky-header-height",
+  stickyHeaderTop: "--sticky-header-top"
+};
+function updateCssVar(host, varName, amount) {
+  host.style.setProperty(CSSVars[varName], `${amount}px`);
+}
+function getCssVarValue(host, varName) {
+  const raw = getComputedStyle(host).getPropertyValue(CSSVars[varName]);
+  return parseFloat(raw) || 0;
+}
+
+export { CSSVars, getCssVarValue, groupBy, updateCssVar };
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAAO,MAAM,OAAU,GAAA,CACrB,IACA,EAAA,MAAA,KAEA,IAAK,CAAA,MAAA;AAAA,EACH,CAAC,QAAU,EAAA,WAAA,EAAa,KAAU,KAAA;AAChC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,WAAA,EAAa,KAAK,CAAA;AACvC,IAAA,IAAI,CAAC,QAAS,CAAA,KAAK,GAAY,QAAA,CAAA,KAAK,IAAI,EAAC;AACzC,IAAS,QAAA,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,WAAW,CAAA;AAChC,IAAO,OAAA,QAAA;AAAA,GACT;AAAA,EACA;AACF;AAEK,MAAM,OAAU,GAAA;AAAA,EACrB,YAAc,EAAA,iBAAA;AAAA,EACd,qBAAuB,EAAA,2BAAA;AAAA,EACvB,kBAAoB,EAAA,wBAAA;AAAA,EACpB,eAAiB,EAAA;AACnB;AAEO,SAAS,YAAA,CACd,IACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,IAAA,CAAK,MAAM,WAAY,CAAA,OAAA,CAAQ,OAAO,CAAG,EAAA,CAAA,EAAG,MAAM,CAAI,EAAA,CAAA,CAAA;AACxD;AAEO,SAAS,cAAA,CACd,MACA,OACQ,EAAA;AACR,EAAA,MAAM,MAAM,gBAAiB,CAAA,IAAI,EAAE,gBAAiB,CAAA,OAAA,CAAQ,OAAO,CAAC,CAAA;AACpE,EAAO,OAAA,UAAA,CAAW,GAAG,CAAK,IAAA,CAAA;AAC5B","file":"utils.js","sourcesContent":["export const groupBy = <T, K extends PropertyKey>(\n  list: T[],\n  getKey: (item: T, index: number) => K\n) =>\n  list.reduce(\n    (previous, currentItem, index) => {\n      const group = getKey(currentItem, index);\n      if (!previous[group]) previous[group] = [];\n      previous[group].push(currentItem);\n      return previous;\n    },\n    {} as Record<K, T[]>\n  );\n\nexport const CSSVars = {\n  headerHeight: \"--header-height\",\n  collapsedHeaderHeight: \"--collapsed-header-height\",\n  stickyHeaderHeight: \"--sticky-header-height\",\n  stickyHeaderTop: \"--sticky-header-top\",\n} as const;\n\nexport function updateCssVar(\n  host: HTMLElement,\n  varName: keyof typeof CSSVars,\n  amount: number\n) {\n  host.style.setProperty(CSSVars[varName], `${amount}px`);\n}\n\nexport function getCssVarValue(\n  host: HTMLElement,\n  varName: keyof typeof CSSVars\n): number {\n  const raw = getComputedStyle(host).getPropertyValue(CSSVars[varName]);\n  return parseFloat(raw) || 0;\n}\n"]}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@brytdesigns/web-component-gnav-header",
+  "version": "1.0.0",
+  "description": "Web component wrapper for the gnav-header navigation element",
+  "main": "./dist/main/index.js",
+  "module": "./dist/main/index.js",
+  "types": "./dist/main/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/main/index.d.ts",
+      "module": "./dist/main/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "Bryt Designs",
+  "license": "ISC",
+  "dependencies": {
+    "@solid-primitives/scheduled": "^1.5.3",
+    "component-register": "0.8.7",
+    "motion": "^12.40.0",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.9",
+    "@brytdesigns/web-component-core": "1.1.7"
+  },
+  "devDependencies": {
+    "dts-bundle-generator": "^9.5.1",
+    "tsup": "^8.4.0"
+  },
+  "scripts": {
+    "build": "tsup --clean",
+    "typecheck": "tsc --noEmit"
+  }
+}