@tidynav/core 0.1.0

package/dist/tidynav.core.js

@@ -0,0 +1,767 @@
+(function (window, document) {
+  "use strict";
+
+  var api = window.TidyNav || {};
+  var runtime =
+    api.__runtime ||
+    (api.__runtime = {
+      states: [],
+      listenersReady: false,
+      readyMotionKeys: new WeakMap(),
+    });
+
+  var focusSelector =
+    'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  var defaultSelectors = {
+    button: '[data-tidynav-role="menu-btn"]',
+    menu: '[data-tidynav-role="menu"]',
+    backdrop: "[data-tidynav-menu-backdrop]",
+    lineTop: '[data-tidynav-menu-line="top"]',
+    lineMiddle: '[data-tidynav-menu-line="middle"]',
+    lineBottom: '[data-tidynav-menu-line="bottom"]',
+  };
+
+  var defaultBreakpoints = {
+    tiny: "(max-width: 479px)",
+    small: "(min-width: 480px) and (max-width: 767px)",
+    medium: "(min-width: 768px) and (max-width: 991px)",
+    main: "(min-width: 992px) and (max-width: 1279px)",
+    large: "(min-width: 1280px) and (max-width: 1439px)",
+    xl: "(min-width: 1440px) and (max-width: 1919px)",
+    xxl: "(min-width: 1920px)",
+  };
+
+  function init(config) {
+    var options = config || api.config || {};
+    if (config) api.config = config;
+    ensureListeners();
+    initializeConfig(buildConfig(options));
+  }
+
+  function destroy(id) {
+    var i = runtime.states.length;
+    while (i--) {
+      var state = runtime.states[i];
+      if (state.id !== id) continue;
+
+      if (state.open) {
+        setMenuOpen(state, false, { skipMotion: true, returnFocus: false });
+      }
+
+      resetMotionMedia(state);
+
+      if (state._toggleTimeline) {
+        state._toggleTimeline.kill();
+        state._toggleTimeline = null;
+        state._toggleTargets = null;
+      }
+
+      if (window.gsap && window.gsap.killTweensOf) {
+        if (state.button) window.gsap.killTweensOf(state.button);
+        if (state.menu) window.gsap.killTweensOf(state.menu);
+        if (state.backdrop) window.gsap.killTweensOf(state.backdrop);
+      }
+
+      runtime.states.splice(i, 1);
+    }
+
+    if (runtime.states.length === 0) {
+      runtime.listenersReady = false;
+    }
+  }
+
+  function buildConfig(options) {
+    var id = options.id || "";
+    var motion = options.motion || {};
+    var a11y = options.a11y || {};
+
+    return {
+      enabled: options.enabled !== false,
+      id: id,
+      debug: options.debug === true,
+      a11y: {
+        mobileQuery: a11y.mobileQuery || "(max-width: 767px)",
+        selectors: defaultSelectors,
+        labels: merge({ open: "Open menu", close: "Close menu" }, a11y.labels),
+      },
+      motion: {
+        breakpoints: merge(defaultBreakpoints, motion.breakpoints),
+        themes: motion.themes || { base: { animations: [] } },
+      },
+    };
+  }
+
+  function merge(base, overrides) {
+    var output = {};
+    var key;
+    for (key in base) {
+      if (Object.prototype.hasOwnProperty.call(base, key)) output[key] = base[key];
+    }
+    overrides = overrides || {};
+    for (key in overrides) {
+      if (Object.prototype.hasOwnProperty.call(overrides, key)) {
+        output[key] = overrides[key];
+      }
+    }
+    return output;
+  }
+
+  function initializeConfig(config) {
+    if (!config.id) return;
+    var selector = '[data-tidynav-id="' + config.id + '"]';
+    queryAll(document, selector).forEach(function (root, index) {
+      initializeRoot(config, root, index);
+    });
+  }
+
+  function initializeRoot(config, root, index) {
+    if (!config.enabled) return;
+
+    var state = findState(root, config.id);
+    if (!state) {
+      state = { root: root, id: config.id };
+      runtime.states.push(state);
+    }
+
+    state.config = config;
+    initializeMenu(state, index);
+    runReadyMotion(state);
+  }
+
+  function initializeMenu(state, index) {
+    var config = state.config;
+    var selectors = config.a11y.selectors;
+    var button = state.root.querySelector(selectors.button);
+    var menu = state.root.querySelector(selectors.menu);
+    var backdrop = state.root.querySelector(selectors.backdrop);
+
+    if (!button || !menu) {
+      warnMissing(config, state.root, !button ? "button" : "menu");
+      return;
+    }
+
+    state.button = button;
+    state.menu = menu;
+    state.backdrop = backdrop;
+
+    var menuId = makeMenuId(config.id, index);
+    menu.setAttribute("id", menuId);
+    button.setAttribute("aria-controls", menuId);
+    setMenuOpen(state, false, { skipMotion: true });
+  }
+
+  function findState(root, id) {
+    for (var i = 0; i < runtime.states.length; i += 1) {
+      if (runtime.states[i].root === root && runtime.states[i].id === id) {
+        return runtime.states[i];
+      }
+    }
+    return null;
+  }
+
+  function makeMenuId(id, index) {
+    var prefix = id || "tidynav-menu";
+    return prefix.replace(/[^a-zA-Z0-9_-]/g, "-") + "-menu-" + (index + 1);
+  }
+
+  function warnMissing(config, root, name) {
+    if (!window.console || !window.console.warn) return;
+    window.console.warn(
+      "[TidyNav] Missing " +
+        name +
+        " for " +
+        (config.id || "navigation") +
+        ".",
+      root
+    );
+  }
+
+  function ensureListeners() {
+    if (runtime.listenersReady) return;
+    runtime.listenersReady = true;
+
+    document.addEventListener("click", handleClick);
+    document.addEventListener("keydown", handleKeydown);
+
+    window.addEventListener("resize", function () {
+      runtime.states.slice().forEach(function (state) {
+        if (state.button && state.menu) {
+          setMenuOpen(state, false, { skipMotion: true });
+        }
+      });
+    });
+  }
+
+  function handleClick(event) {
+    var target = event.target;
+    if (!target || !target.closest) return;
+
+    var buttonState = getStateForTarget(target, "button");
+    if (buttonState) {
+      event.preventDefault();
+      setMenuOpen(buttonState, !buttonState.open);
+      return;
+    }
+
+    var linkState = getOpenStateForMenuLink(target);
+    if (linkState && isMobileLayout(linkState.config)) {
+      setMenuOpen(linkState, false);
+      return;
+    }
+
+    var backdropState = getStateForTarget(target, "backdrop");
+    if (backdropState && backdropState.open) {
+      setMenuOpen(backdropState, false, { returnFocus: true });
+    }
+  }
+
+  function handleKeydown(event) {
+    var active = document.activeElement;
+    var activeButtonState = active && active.closest ? getStateForTarget(active, "button") : null;
+
+    if (activeButtonState && (event.key === " " || event.key === "Spacebar")) {
+      event.preventDefault();
+      setMenuOpen(activeButtonState, !activeButtonState.open);
+      return;
+    }
+
+    if (event.key === "Escape") {
+      getOpenStates().forEach(function (state) {
+        setMenuOpen(state, false, { returnFocus: true });
+      });
+      return;
+    }
+
+    if (event.key !== "Tab") return;
+
+    var trapState = getOpenStates().filter(function (state) {
+      return (
+        isMobileLayout(state.config) &&
+        (state.menu.contains(active) || active === state.button)
+      );
+    })[0];
+    if (!trapState) return;
+
+    trapFocus(event, trapState);
+  }
+
+  function getStateForTarget(target, role) {
+    for (var i = 0; i < runtime.states.length; i += 1) {
+      var state = runtime.states[i];
+      var selector = state.config.a11y.selectors[role];
+      var match = selector && target.closest(selector);
+      if (match && state.root.contains(match)) return state;
+    }
+    return null;
+  }
+
+  function getOpenStateForMenuLink(target) {
+    var link = target.closest && target.closest("a[href]");
+    if (!link) return null;
+
+    return getOpenStates().filter(function (state) {
+      return state.menu.contains(link);
+    })[0];
+  }
+
+  function getOpenStates() {
+    return runtime.states.filter(function (state) {
+      return state.open === true;
+    });
+  }
+
+  function setMenuOpen(state, open, options) {
+    var config = state.config;
+    var a11y = config.a11y;
+    resetMotionMedia(state);
+    state.open = open;
+
+    state.root.setAttribute("data-tidynav-state", open ? "open" : "closed");
+    state.button.setAttribute("data-tidynav-state", open ? "open" : "closed");
+    state.menu.setAttribute("data-tidynav-state", open ? "open" : "closed");
+    if (state.backdrop) {
+      state.backdrop.setAttribute("data-tidynav-state", open ? "open" : "closed");
+    }
+
+    state.button.setAttribute("aria-expanded", String(open));
+    state.button.setAttribute("aria-label", open ? a11y.labels.close : a11y.labels.open);
+    setMenuAvailable(state.menu, open || !isMobileLayout(config), state.button);
+
+    if (!options || !options.skipMotion) {
+      runMotionTrigger(state, open ? "menuOpen" : "menuClose");
+    } else {
+      runMotionTrigger(state, open ? "menuOpen" : "menuClose", { instant: true });
+    }
+
+    if (!open && options && options.returnFocus && state.button.focus) {
+      state.button.focus();
+    }
+  }
+
+  function setMenuAvailable(menu, available, button) {
+    menu.setAttribute("aria-hidden", String(!available));
+    queryAll(menu, "a[href], button, input, select, textarea").forEach(function (item) {
+      if (item === button) return;
+      if (available) {
+        item.removeAttribute("tabindex");
+      } else {
+        item.setAttribute("tabindex", "-1");
+      }
+    });
+  }
+
+  function trapFocus(event, state) {
+    var focusItems = [state.button].concat(queryAll(state.menu, focusSelector)).filter(Boolean);
+    var first = focusItems[0];
+    var last = focusItems[focusItems.length - 1];
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function runReadyMotion(state) {
+    runMotionTrigger(state, "ready", { once: true });
+  }
+
+  function resetMotionMedia(state) {
+    if (state.motionMedia && state.motionMedia.revert) {
+      state.motionMedia.revert();
+    }
+    state.motionMedia = null;
+  }
+
+  function runMotionTrigger(state, trigger, options) {
+    var motion = state.config.motion;
+    var groups = {};
+    var toggleGroup = null;
+    if (!window.gsap) return;
+
+    if (state.config.debug) console.log('[TidyNav] trigger:', trigger, 'open:', state.open);
+
+    getActiveMotionEntries(state).forEach(function (entry) {
+      entry.theme.animations.forEach(function (animation, index) {
+        var query;
+
+        // menuToggle fires for both menuOpen and menuClose — the runtime
+        // creates a GSAP timeline and plays/reverses it automatically.
+        var matchesTrigger = animation.on === trigger;
+        if (animation.on === 'menuToggle' && (trigger === 'menuOpen' || trigger === 'menuClose')) {
+          matchesTrigger = true;
+        }
+
+        if (!matchesTrigger || !matchesAnimationBreakpoints(state, animation)) {
+          return;
+        }
+
+        if (options && options.once && hasReadyMotionRun(state, entry.id, index)) {
+          return;
+        }
+
+        // menuToggle animations go into a separate timeline group —
+        // they play forward on menuOpen and reverse on menuClose.
+        if (animation.on === 'menuToggle') {
+          toggleGroup = toggleGroup || [];
+          toggleGroup.push({
+            animation: animation,
+            instant: shouldUseInstantMotion(animation, options),
+          });
+        } else {
+          query = getAnimationMediaQuery(state, animation) || "__all__";
+          groups[query] = groups[query] || [];
+          groups[query].push({
+            animation: animation,
+            instant: shouldUseInstantMotion(animation, options),
+          });
+        }
+
+        if (options && options.once) {
+          markReadyMotionRun(state, entry.id, index);
+        }
+      });
+    });
+
+    if (toggleGroup) {
+      runToggleTimeline(state, toggleGroup, trigger, options);
+    }
+    runResponsiveGsapGroups(state, groups);
+  }
+
+  function shouldUseInstantMotion(animation, options) {
+    if (options && options.instant) return true;
+    if (animation.instant === true) return true;
+    return window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+
+  function getActiveMotionEntries(state) {
+    var themes = state.config.motion.themes;
+    var id;
+
+    // Variant themes take priority. Only ONE theme's animations run.
+    // Base (no className) is the fallback — it only fires when no
+    // variant theme's className matches the root element.
+    for (id in themes) {
+      if (!Object.prototype.hasOwnProperty.call(themes, id)) continue;
+      if (state.config.debug) console.log('[TidyNav] getActiveMotionEntries: checking', id, 'className:', themes[id].className);
+      if (!themes[id].className) continue; // skip base — checked last
+      if (isThemeActive(state, themes[id])) {
+        if (state.config.debug) console.log('[TidyNav] active theme:', id, 'className:', themes[id].className);
+        return [{ id: id, theme: themes[id] }];
+      }
+    }
+
+    // No variant matched — fall back to base
+    if (themes.base) {
+      if (state.config.debug) console.log('[TidyNav] active theme: base (no variant matched)');
+      return [{ id: 'base', theme: themes.base }];
+    }
+
+    return [];
+  }
+
+  function isThemeActive(state, theme) {
+    var className = theme.className;
+    if (!className) return true;
+
+    if (state.config.debug) console.log('[TidyNav]   isThemeActive: checking className:', className);
+
+    // Resolve preview variant tokens at runtime. In the preview tool,
+    // {{variantClass:X}} tokens are not replaced before the script runs.
+    // We resolve them against the preview theme data attribute instead.
+    if (className.indexOf('{{variantClass:') === 0) {
+      var previewTheme = resolvePreviewTheme();
+      if (!previewTheme) {
+        if (state.config.debug) console.log('[TidyNav]   isThemeActive: token', className, '→ no preview theme, skipping');
+        return false;
+      }
+      className = 'tidynav-preview-variant-' + previewTheme;
+      if (state.config.debug) console.log('[TidyNav]   isThemeActive: resolved token →', className);
+    }
+
+    if (hasClass(state.root, className)) {
+      if (state.config.debug) console.log('[TidyNav]   isThemeActive:', className, 'found on root');
+      return true;
+    }
+    if (state.menu && hasClass(state.menu, className)) {
+      if (state.config.debug) console.log('[TidyNav]   isThemeActive:', className, 'found on menu');
+      return true;
+    }
+
+    return queryAll(state.root, "." + cssIdentifier(className)).length > 0;
+  }
+
+  function resolvePreviewTheme() {
+    try {
+      var theme = document.documentElement.dataset.previewTheme;
+      if (theme && theme !== 'wireframe') return theme;
+    } catch (_) { /* not in a browser */ }
+    return null;
+  }
+
+  function matchesAnimationBreakpoints(state, animation) {
+    var breakpoints = animation.breakpoints || animation.breakpoint;
+    var queries = state.config.motion.breakpoints;
+
+    if (!breakpoints) return true;
+    if (typeof breakpoints === "string") breakpoints = [breakpoints];
+    if (!Array.isArray(breakpoints) || breakpoints.length === 0) return true;
+
+    return breakpoints.some(function (breakpoint) {
+      var query = queries[breakpoint] || breakpoint;
+      return window.matchMedia(query).matches;
+    });
+  }
+
+  function hasReadyMotionRun(state, variantId, animationIndex) {
+    var keys = runtime.readyMotionKeys.get(state.root);
+    var key = variantId + ":" + animationIndex;
+    return Boolean(keys && keys[key]);
+  }
+
+  function markReadyMotionRun(state, variantId, animationIndex) {
+    var keys = runtime.readyMotionKeys.get(state.root);
+    var key = variantId + ":" + animationIndex;
+
+    if (!keys) {
+      keys = {};
+      runtime.readyMotionKeys.set(state.root, keys);
+    }
+
+    keys[key] = true;
+  }
+
+  function runResponsiveGsapGroups(state, groups) {
+    var query;
+
+    for (query in groups) {
+      if (!Object.prototype.hasOwnProperty.call(groups, query)) continue;
+      runResponsiveGsapGroup(state, query, groups[query]);
+    }
+  }
+
+  function runResponsiveGsapGroup(state, query, animations) {
+    var gsap = window.gsap;
+
+    if (query === "__all__") {
+      runGsapAnimationGroup(state, animations);
+      return;
+    }
+
+    if (!gsap.matchMedia) {
+      runGsapAnimationGroup(state, animations);
+      return;
+    }
+
+    state.motionMedia = state.motionMedia || gsap.matchMedia();
+    state.motionMedia.add(query, function () {
+      runGsapAnimationGroup(state, animations);
+    });
+  }
+
+  function runToggleTimeline(state, animations, trigger, options) {
+    var gsap = window.gsap;
+    var instant = options && options.instant;
+
+    if (state.config.debug) console.log('[TidyNav] toggleTimeline:', trigger, 'entries:', animations.length, 'instant:', !!instant);
+
+    // Build the timeline once on first open and reuse it across toggles.
+    if (!state._toggleTimeline) {
+      var targets = [];
+      var tl = gsap.timeline({ paused: true });
+      animations.forEach(function (entry) {
+        addToTimeline(tl, state, entry.animation, targets);
+      });
+
+      // After reverse completes, clear inline styles so the element
+      // returns to pure CSS. This is the key — no leftover GSAP cruft.
+      tl.eventCallback('onReverseComplete', function () {
+        if (state.config.debug) console.log('[TidyNav] reverse complete, clearing inline styles');
+        clearToggleTargets(gsap, targets);
+        clearButtonMotionState(state);
+      });
+      tl.eventCallback('onComplete', function () {
+        clearButtonMotionState(state);
+      });
+
+      state._toggleTimeline = tl;
+      state._toggleTargets = targets;
+    }
+
+    var tl = state._toggleTimeline;
+    setButtonMotionState(state, trigger === 'menuOpen' ? 'opening' : 'closing');
+
+    if (trigger === 'menuOpen') {
+      if (instant) {
+        tl.progress(1);
+        clearButtonMotionState(state);
+      } else {
+        tl.play();
+      }
+    } else {
+      if (instant) {
+        tl.progress(0);
+        if (state._toggleTargets) clearToggleTargets(gsap, state._toggleTargets);
+        clearButtonMotionState(state);
+      } else {
+        tl.reverse();
+      }
+    }
+  }
+
+  function setButtonMotionState(state, value) {
+    if (!state.button) return;
+    state.button.setAttribute('data-tidynav-motion', value);
+  }
+
+  function clearButtonMotionState(state) {
+    if (!state.button) return;
+    state.button.removeAttribute('data-tidynav-motion');
+  }
+
+  function isToggleTarget(toggleTargets, target) {
+    if (!toggleTargets || !toggleTargets.length) return false;
+    if (Array.isArray(target)) {
+      return target.some(function (t) { return toggleTargets.indexOf(t) !== -1; });
+    }
+    return toggleTargets.indexOf(target) !== -1;
+  }
+
+  function clearToggleTargets(gsap, targets) {
+    targets.forEach(function (target) {
+      gsap.set(target, { clearProps: 'transform,opacity,visibility,pointerEvents,color,backgroundColor,borderColor,right' });
+    });
+  }
+
+  function addToTimeline(tl, state, animation, targets) {
+    var gsap = window.gsap;
+    var target;
+
+    var pos = typeof animation.position === 'number' ? animation.position : 0;
+
+    if (Array.isArray(animation.fromTo)) {
+      target = resolveGsapTargets(state.root, animation.fromTo[0]);
+      if (!target || (Array.isArray(target) && target.length === 0)) return;
+      tl.fromTo(target, animation.fromTo[1], animation.fromTo[2], pos);
+    } else if (Array.isArray(animation.to)) {
+      target = resolveGsapTargets(state.root, animation.to[0]);
+      if (!target || (Array.isArray(target) && target.length === 0)) return;
+      tl.to(target, animation.to[1], pos);
+    } else if (Array.isArray(animation.from)) {
+      target = resolveGsapTargets(state.root, animation.from[0]);
+      if (!target || (Array.isArray(target) && target.length === 0)) return;
+      tl.from(target, animation.from[1], pos);
+    } else {
+      return;
+    }
+
+    // Collect targets for cleanup after reverse completes
+    if (targets) {
+      if (Array.isArray(target)) {
+        targets.push.apply(targets, target);
+      } else {
+        targets.push(target);
+      }
+    }
+  }
+
+  function runGsapAnimationGroup(state, animations) {
+    animations.forEach(function (entry) {
+      runGsapAnimation(state, entry.animation, entry.instant);
+    });
+  }
+
+  function getAnimationMediaQuery(state, animation) {
+    var breakpoints = animation.breakpoints || animation.breakpoint;
+    var queries = state.config.motion.breakpoints;
+
+    if (!breakpoints) return "";
+    if (typeof breakpoints === "string") breakpoints = [breakpoints];
+    if (!Array.isArray(breakpoints) || breakpoints.length === 0) return "";
+
+    return breakpoints.map(function (breakpoint) {
+      return queries[breakpoint] || breakpoint;
+    }).join(", ");
+  }
+
+  function runGsapAnimation(state, animation, instant) {
+    var gsap = window.gsap;
+    var method;
+    var args;
+
+    if (Array.isArray(animation.fromTo)) {
+      method = "fromTo";
+      args = animation.fromTo;
+    } else if (Array.isArray(animation.to)) {
+      method = "to";
+      args = animation.to;
+    } else if (Array.isArray(animation.from)) {
+      method = "from";
+      args = animation.from;
+    } else if (Array.isArray(animation.set)) {
+      method = "set";
+      args = animation.set;
+    } else {
+      return;
+    }
+
+    args = args.slice();
+    args[0] = resolveGsapTargets(state.root, args[0]);
+    if (!args[0] || (Array.isArray(args[0]) && args[0].length === 0)) {
+      if (state.config.debug) console.log('[TidyNav]   skipped (no target):', animation.on, animation[method] && animation[method][0]);
+      return;
+    }
+
+    if (state.config.debug) {
+      var targetCount = Array.isArray(args[0]) ? args[0].length : 1;
+      console.log('[TidyNav]   ' + method, '→', targetCount, 'target(s), on:', animation.on);
+    }
+
+    // Don't kill tweens on targets owned by a toggle timeline —
+    // killTweensOf would destroy the timeline's tweens.
+    var skipKill = state._toggleTimeline && isToggleTarget(state._toggleTargets, args[0]);
+    if (gsap.killTweensOf && !skipKill) gsap.killTweensOf(args[0]);
+    if (instant) {
+      if (state.config.debug) console.log('[TidyNav]   instant ' + method, JSON.stringify(args[1]));
+      runInstantGsapAnimation(gsap, method, args);
+      return;
+    }
+
+    if (state.config.debug) console.log('[TidyNav]   tween ' + method, JSON.stringify(args[1]));
+    gsap[method].apply(gsap, args);
+  }
+
+  function runInstantGsapAnimation(gsap, method, args) {
+    var target = args[0];
+    var finalVars;
+
+    if (method === "fromTo") {
+      finalVars = args[2] || {};
+    } else {
+      finalVars = args[1] || {};
+    }
+
+    gsap.set(target, toImmediateVars(finalVars));
+  }
+
+  function toImmediateVars(vars) {
+    var output = {};
+    var key;
+
+    vars = vars || {};
+    for (key in vars) {
+      if (!Object.prototype.hasOwnProperty.call(vars, key)) continue;
+      if (isGsapTimingKey(key)) continue;
+      output[key] = vars[key];
+    }
+
+    return output;
+  }
+
+  function isGsapTimingKey(key) {
+    return (
+      key === "duration" ||
+      key === "delay" ||
+      key === "stagger" ||
+      key === "ease" ||
+      key === "overwrite" ||
+      key === "onComplete" ||
+      key === "onStart" ||
+      key === "onUpdate"
+    );
+  }
+
+  function resolveGsapTargets(root, target) {
+    if (typeof target === "string") return queryAll(root, target);
+    if (target && target.nodeType) return target;
+    if (Array.isArray(target)) return target;
+    return target;
+  }
+
+  function isMobileLayout(config) {
+    return window.matchMedia(config.a11y.mobileQuery).matches;
+  }
+
+  function queryAll(root, selector) {
+    if (!root || !selector) return [];
+    return Array.prototype.slice.call(root.querySelectorAll(selector));
+  }
+
+  function hasClass(element, className) {
+    return Boolean(element && className && element.classList.contains(className));
+  }
+
+  function cssIdentifier(value) {
+    if (window.CSS && window.CSS.escape) return window.CSS.escape(String(value));
+    return String(value).replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+  }
+
+  api.init = init;
+  api.destroy = destroy;
+  window.TidyNav = api;
+})(window, document);

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@tidynav/core",
+  "version": "0.1.0",
+  "description": "Accessible animated navigation helpers for TidyNav.",
+  "main": "dist/tidynav.core.js",
+  "files": [
+    "dist/tidynav.core.js"
+  ],
+  "keywords": [
+    "tidynav",
+    "webflow",
+    "navigation",
+    "navbar",
+    "accessibility",
+    "gsap"
+  ],
+  "author": "Champion Labs",
+  "license": "MIT",
+  "homepage": "https://tidynav.com"
+}