@kywi-software/js 0.6.7 → 0.7.0

package/dist/index.d.ts

@@ -22,4 +22,5 @@ export declare const Kywi: {
 export { bootAudienceEngine } from './audience/index.js';
 export { openTransparencyPanel, renderTransparencyPanel, type TransparencyState, type TransparencyAudience, } from './audience/transparency.js';
 export { bootExperiments, type ExperimentRuntime, type ConversionSignal } from './experiments/index.js';
+export { initNavMenus, enhanceNav, NAV_BREAKPOINT } from './nav/menu.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AASnE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,KAAK,IAAI,CAAA;AAIlD,eAAO,MAAM,IAAI;;aAEa,WAAW;YACzB,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC;gBACtC,eAAe,GAAG,IAAI;;2BAIb,oBAAoB,GAAG,oBAAoB;;;;oBAM9C,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;4BAC7C,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,IAAI;;;eAK5C,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG;aACvB,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG;gBAClB,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI;YAC7C,IAAI;CAeb,CAAA;AAWD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,GAC1B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAUnE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,KAAK,IAAI,CAAA;AAIlD,eAAO,MAAM,IAAI;;aAEa,WAAW;YACzB,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC;gBACtC,eAAe,GAAG,IAAI;;2BAIb,oBAAoB,GAAG,oBAAoB;;;;oBAM9C,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC;4BAC7C,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,IAAI;;;eAK5C,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG;aACvB,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG;gBAClB,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI;YAC7C,IAAI;CAkBb,CAAA;AAWD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,GAC1B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACvG,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA"}

package/dist/kywi.esm.js

@@ -289,6 +289,188 @@ function initFormHooks() {
   }
 }
 
+// src/nav/menu.ts
+var NAV_BREAKPOINT = 860;
+var CLOSE_DELAY_MS = 120;
+var ITEM_CLASS = "kywi-nav-item--has-children";
+var OPEN_CLASS = "kywi-nav-item--open";
+var TOGGLE_CLASS = "kywi-nav-toggle";
+var PANEL_CLASS = "kywi-nav-panel";
+var FLIP_CLASS = "kywi-nav-panel--flip";
+var READY_ATTRIBUTE = "data-kywi-nav-ready";
+function directChild(parent, className) {
+  for (const child of Array.from(parent.children)) {
+    if (child instanceof HTMLElement && child.classList.contains(className)) return child;
+  }
+  return null;
+}
+function isDesktop() {
+  if (typeof window === "undefined") return false;
+  if (typeof window.matchMedia !== "function") return true;
+  return window.matchMedia(`(min-width: ${NAV_BREAKPOINT}px)`).matches;
+}
+function panelLinks(panel) {
+  return Array.from(panel.querySelectorAll("a[href], button:not([disabled])"));
+}
+function enhanceNav(nav) {
+  const cleanups = [];
+  const entries = [];
+  for (const item of Array.from(nav.querySelectorAll(`.${ITEM_CLASS}`))) {
+    const toggle = directChild(item, TOGGLE_CLASS);
+    const panel = directChild(item, PANEL_CLASS);
+    if (toggle && panel) entries.push({ item, toggle, panel });
+  }
+  if (entries.length === 0) return () => {
+  };
+  let closeTimer;
+  const cancelClose = () => {
+    if (closeTimer !== void 0) {
+      clearTimeout(closeTimer);
+      closeTimer = void 0;
+    }
+  };
+  function isOpen(entry) {
+    return entry.item.classList.contains(OPEN_CLASS);
+  }
+  function close(entry) {
+    entry.item.classList.remove(OPEN_CLASS);
+    entry.toggle.setAttribute("aria-expanded", "false");
+    entry.panel.classList.remove(FLIP_CLASS);
+  }
+  function closeAll(except) {
+    for (const entry of entries) {
+      if (except && (entry === except || entry.item.contains(except.item))) continue;
+      close(entry);
+    }
+  }
+  function applyEdgeFlip(entry) {
+    if (typeof entry.panel.getBoundingClientRect !== "function") return;
+    entry.panel.classList.remove(FLIP_CLASS);
+    const rect = entry.panel.getBoundingClientRect();
+    const viewport = window.innerWidth || document.documentElement.clientWidth || 0;
+    if (viewport > 0 && rect.width > 0 && rect.right > viewport - 4) {
+      entry.panel.classList.add(FLIP_CLASS);
+    }
+  }
+  function open(entry) {
+    cancelClose();
+    closeAll(entry);
+    entry.item.classList.add(OPEN_CLASS);
+    entry.toggle.setAttribute("aria-expanded", "true");
+    applyEdgeFlip(entry);
+  }
+  function on(target, type, handler, options) {
+    target.addEventListener(type, handler, options);
+    cleanups.push(() => target.removeEventListener(type, handler, options));
+  }
+  for (const entry of entries) {
+    on(entry.toggle, "click", (event) => {
+      event.preventDefault();
+      if (isOpen(entry)) {
+        close(entry);
+      } else {
+        open(entry);
+      }
+    });
+    on(entry.item, "mouseenter", () => {
+      if (!isDesktop()) return;
+      open(entry);
+    });
+    on(entry.item, "mouseleave", () => {
+      if (!isDesktop()) return;
+      cancelClose();
+      closeTimer = setTimeout(() => {
+        close(entry);
+        closeTimer = void 0;
+      }, CLOSE_DELAY_MS);
+    });
+  }
+  on(nav, "focusin", (event) => {
+    const target = event.target;
+    if (!target) return;
+    for (const entry of entries) {
+      if (entry.panel.contains(target)) {
+        open(entry);
+        return;
+      }
+    }
+    for (const entry of entries) {
+      if (!entry.item.contains(target)) close(entry);
+    }
+  });
+  on(nav, "keydown", (event) => {
+    const target = event.target;
+    if (!target) return;
+    const entry = entries.find((e) => e.item.contains(target));
+    if (!entry) return;
+    if (event.key === "Escape") {
+      const openEntry = entries.filter((e) => e.item.contains(target) && isOpen(e)).pop();
+      if (!openEntry) return;
+      event.preventDefault();
+      close(openEntry);
+      openEntry.toggle.focus();
+      return;
+    }
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    if (target === entry.toggle) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        if (!isOpen(entry)) open(entry);
+        panelLinks(entry.panel)[0]?.focus();
+      } else if (isOpen(entry)) {
+        event.preventDefault();
+        close(entry);
+      }
+      return;
+    }
+    const owner = entries.find((e) => e.panel.contains(target));
+    if (!owner) return;
+    const links = panelLinks(owner.panel);
+    const index = links.indexOf(target);
+    if (index === -1) return;
+    event.preventDefault();
+    const next = event.key === "ArrowDown" ? links[(index + 1) % links.length] : links[(index - 1 + links.length) % links.length];
+    next?.focus();
+  });
+  on(document, "click", (event) => {
+    const target = event.target;
+    if (target && nav.contains(target)) return;
+    cancelClose();
+    closeAll();
+  });
+  if (typeof window.matchMedia === "function") {
+    const query = window.matchMedia(`(min-width: ${NAV_BREAKPOINT}px)`);
+    const onChange = () => {
+      cancelClose();
+      closeAll();
+    };
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", onChange);
+      cleanups.push(() => query.removeEventListener("change", onChange));
+    }
+  }
+  nav.setAttribute(READY_ATTRIBUTE, "");
+  return () => {
+    cancelClose();
+    for (const undo of cleanups) undo();
+    cleanups.length = 0;
+    closeAll();
+    nav.removeAttribute(READY_ATTRIBUTE);
+  };
+}
+function initNavMenus(root = document) {
+  if (typeof document === "undefined") return () => {
+  };
+  const teardowns = [];
+  for (const nav of Array.from(root.querySelectorAll("[data-kywi-nav]"))) {
+    if (nav.hasAttribute(READY_ATTRIBUTE)) continue;
+    teardowns.push(enhanceNav(nav));
+  }
+  return () => {
+    for (const undo of teardowns) undo();
+  };
+}
+
 // src/experiments/index.ts
 function apiBaseFrom(ctx) {
   return ctx.basePath && ctx.basePath !== "/" ? `${ctx.basePath}/api/v1` : "/api/v1";
@@ -1496,6 +1678,7 @@ var Kywi = {
     Kywi.renderFeed = renderFeed;
     initModules();
     initFormHooks();
+    initNavMenus();
     bootExperiments({ context: Kywi.context });
     booted = true;
   }
@@ -1512,8 +1695,11 @@ if (typeof document !== "undefined") {
 }
 export {
   Kywi,
+  NAV_BREAKPOINT,
   bootAudienceEngine,
   bootExperiments,
+  enhanceNav,
+  initNavMenus,
   openTransparencyPanel,
   renderTransparencyPanel
 };