@marcwiest/midday.js 0.2.0 → 0.2.2

package/README.md

@@ -181,6 +181,8 @@ useEffect(() => {
 }, [navItems]);
 ```
 
+**Section changes are not auto-detected.** The library uses `ResizeObserver` to track section and element *sizes*, but it does not watch for new or removed `[data-midday-section]` elements. In SPAs or pages with dynamic sections, call `refresh()` after route changes or any DOM mutation that adds, removes, or reorders sections.
+
 **Headless mode** doesn't manage element DOM — you own the variant elements. The engine reads element and variant sizes live on every scroll frame via `getBoundingClientRect()`, so size changes to your variant elements are picked up automatically. You only need `refresh()` when sections change, since section bounds are cached.
 
 ### `onChange` callback

package/dist/core.mjs

@@ -1,196 +1,204 @@
-function k(t) {
-  const i = t.getBoundingClientRect();
+function z(t) {
+  const o = t.getBoundingClientRect();
   return {
-    top: i.top + window.scrollY,
-    height: i.height
+    top: o.top + window.scrollY,
+    height: o.height
   };
 }
-function z(t) {
-  const i = t.getBoundingClientRect();
+function G(t) {
+  const o = t.getBoundingClientRect();
   return {
-    top: i.top,
-    height: i.height
+    top: o.top,
+    height: o.height
   };
 }
-function P(t) {
-  for (const i of t) {
-    const p = k(i.el);
-    i.top = p.top, i.height = p.height;
+function S(t) {
+  for (const o of t) {
+    const p = z(o.el);
+    o.top = p.top, o.height = p.height;
   }
 }
-const G = "[data-midday-section]", K = "data-midday-section", J = "data-midday-target";
-function Y(t) {
-  const i = document.querySelectorAll(G), p = [];
-  for (const s of i) {
-    const h = s.getAttribute(K);
-    if (!h) continue;
+const K = "[data-midday-section]", J = "data-midday-section", Q = "data-midday-target";
+function U(t) {
+  const o = document.querySelectorAll(K), p = [];
+  for (const s of o) {
     const w = s.getAttribute(J);
-    w && (!t || !w.split(" ").includes(t)) || p.push({ el: s, variant: h, top: 0, height: 0 });
+    if (!w) continue;
+    const a = s.getAttribute(Q);
+    a && (!t || !a.split(" ").includes(t)) || p.push({ el: s, variant: w, top: 0, height: 0 });
   }
-  return P(p), p;
+  return S(p), p;
 }
-function Q(t) {
-  let { element: i, variants: p, sections: s } = t;
-  const { defaultName: h, onChange: w } = t;
-  let c = null, d = !1, x = "", r = null;
-  function L() {
-    y();
+function X(t) {
+  let { element: o, variants: p, sections: s } = t;
+  const { defaultName: w, onChange: a } = t;
+  let h = null, B = !1, x = "", l = null;
+  function R() {
+    g();
   }
-  function S() {
-    P(s), y();
+  function V() {
+    S(s), g();
   }
-  function y() {
-    d || (d = !0, c = requestAnimationFrame(l));
+  function g() {
+    B || (B = !0, h = requestAnimationFrame(c));
   }
-  function l() {
-    d = !1, v();
+  function c() {
+    B = !1, v();
   }
   function v() {
-    const a = z(i), o = a.height;
-    if (o <= 0) return;
-    const W = window.scrollY, F = a.top, q = F + o, R = [], _ = /* @__PURE__ */ new Map();
-    let H = o, $ = 0, j = 0;
-    const U = /* @__PURE__ */ new Map();
+    const r = G(o), i = r.height;
+    if (i <= 0) return;
+    const k = window.scrollY, _ = r.top, D = _ + i, I = [], q = /* @__PURE__ */ new Map();
+    let L = i, j = 0, F = 0;
+    const H = /* @__PURE__ */ new Map();
     for (const e of s) {
-      const T = e.top - W, g = T + e.height, M = Math.max(F, T), u = Math.min(q, g), B = Math.max(0, u - M);
-      if (B > 0) {
-        j += B;
-        const b = M - F, E = q - u;
-        H = Math.min(H, b), $ = Math.max($, o - E);
-        const I = _.get(e.variant);
-        I ? (I.topInset = Math.min(I.topInset, b), I.bottomInset = Math.min(I.bottomInset, E)) : _.set(e.variant, { topInset: b, bottomInset: E });
+      const y = e.top - k, m = y + e.height, C = Math.max(_, y), u = Math.min(D, m), M = Math.max(0, u - C);
+      if (M > 0) {
+        F += M;
+        const b = C - _, E = D - u;
+        L = Math.min(L, b), j = Math.max(j, i - E);
+        const P = q.get(e.variant);
+        P ? (P.topInset = Math.min(P.topInset, b), P.bottomInset = Math.min(P.bottomInset, E)) : q.set(e.variant, { topInset: b, bottomInset: E });
       }
-      let f = U.get(e.variant);
-      f || (f = [], U.set(e.variant, f)), f.push({ viewTop: T, viewBottom: g });
+      let f = H.get(e.variant);
+      f || (f = [], H.set(e.variant, f)), f.push({ viewTop: y, viewBottom: m });
     }
-    let C = null;
+    let T = null;
     for (const e of p) {
-      if (e.name === h) {
-        C = e.wrapper;
+      if (e.name === w) {
+        T = e.wrapper;
         continue;
       }
-      const T = U.get(e.name);
-      if (!T) {
+      const y = H.get(e.name);
+      if (!y) {
         e.wrapper.style.clipPath = "inset(0 0 100% 0)";
         continue;
       }
-      const g = e.wrapper.getBoundingClientRect(), M = g.height || o;
-      let u = M, B = M;
-      for (const f of T) {
-        const b = Math.max(g.top, f.viewTop), E = Math.min(g.bottom, f.viewBottom);
-        E <= b || (u = Math.min(u, b - g.top), B = Math.min(B, g.bottom - E));
+      const m = e.wrapper.getBoundingClientRect(), C = m.height || i;
+      let u = C, M = C;
+      for (const f of y) {
+        const b = Math.max(m.top, f.viewTop), E = Math.min(m.bottom, f.viewBottom);
+        E <= b || (u = Math.min(u, b - m.top), M = Math.min(M, m.bottom - E));
       }
-      if (u + B < M) {
-        e.wrapper.style.clipPath = `inset(${u}px 0 ${B}px 0)`;
-        const f = _.get(e.name), b = f ? (o - f.topInset - f.bottomInset) / o : 0;
-        R.push({ name: e.name, progress: b });
+      if (u + M < C) {
+        e.wrapper.style.clipPath = `inset(${u}px 0 ${M}px 0)`;
+        const f = q.get(e.name), b = f ? (i - f.topInset - f.bottomInset) / i : 0;
+        I.push({ name: e.name, progress: b });
       } else
         e.wrapper.style.clipPath = "inset(0 0 100% 0)";
     }
-    if (C) {
-      const e = C.getBoundingClientRect().height || o;
-      if (j >= o)
-        C.style.clipPath = "inset(0 0 100% 0)";
-      else if (j <= 0)
-        C.style.clipPath = "inset(0)", R.unshift({
-          name: h,
+    if (T) {
+      const e = T.getBoundingClientRect().height || i;
+      if (F >= i)
+        T.style.clipPath = "inset(0 0 100% 0)";
+      else if (F <= 0)
+        T.style.clipPath = "inset(0)", I.unshift({
+          name: w,
           progress: 1
         });
       else {
-        const T = H;
-        if (o - $ >= T) {
-          const u = e * ($ / o);
-          C.style.clipPath = `inset(${u}px 0 0 0)`;
+        const y = L;
+        if (i - j >= y) {
+          const u = e * (j / i);
+          T.style.clipPath = `inset(${u}px 0 0 0)`;
         } else {
-          const u = e * ((o - H) / o);
-          C.style.clipPath = `inset(0 0 ${u}px 0)`;
+          const u = e * ((i - L) / i);
+          T.style.clipPath = `inset(0 0 ${u}px 0)`;
         }
-        const M = o - j;
-        R.unshift({
-          name: h,
-          progress: M / o
+        const C = i - F;
+        I.unshift({
+          name: w,
+          progress: C / i
         });
       }
     }
-    const D = R.map((e) => `${e.name}:${e.progress.toFixed(3)}`).join("|");
-    D !== x && (x = D, w == null || w(R));
+    const O = I.map((e) => `${e.name}:${e.progress.toFixed(3)}`).join("|");
+    O !== x && (x = O, a == null || a(I));
   }
-  function m() {
-    r == null || r.disconnect(), r = new ResizeObserver(() => {
-      P(s), y();
+  function d() {
+    l == null || l.disconnect(), l = new ResizeObserver(() => {
+      S(s), g();
     });
-    for (const a of s)
-      r.observe(a.el);
+    for (const r of s)
+      l.observe(r.el);
+    l.observe(o);
   }
   function n() {
-    window.addEventListener("scroll", L, { passive: !0 }), window.addEventListener("resize", S, { passive: !0 }), m(), y();
+    window.addEventListener("scroll", R, { passive: !0 }), window.addEventListener("resize", V, { passive: !0 }), d(), g();
   }
   function A() {
-    P(s), y();
+    S(s), g();
   }
-  function V(a, o) {
-    p = a, s = o, P(s), m(), y();
+  function N(r, i) {
+    p = r, s = i, S(s), d(), g();
   }
-  function N() {
-    c !== null && cancelAnimationFrame(c), window.removeEventListener("scroll", L), window.removeEventListener("resize", S), r == null || r.disconnect(), r = null;
+  function $() {
+    h !== null && cancelAnimationFrame(h), window.removeEventListener("scroll", R), window.removeEventListener("resize", V), l == null || l.disconnect(), l = null;
   }
-  return n(), { recalculate: A, update: V, destroy: N };
+  return n(), { recalculate: A, update: N, destroy: $ };
 }
-const X = "data-midday-variant", O = "default";
-function Z(t, i = {}) {
-  const { onChange: p } = i, s = i.name ?? (t.getAttribute("data-midday-element") || void 0), h = t.innerHTML, w = t.style.overflow;
-  let c = null, d = [];
-  function x() {
-    const l = Y(s), v = /* @__PURE__ */ new Set();
-    for (const a of l)
-      v.add(a.variant);
+const W = "data-midday-variant", Y = "default";
+function Z(t, o = {}) {
+  const { onChange: p } = o, s = o.name ?? (t.getAttribute("data-midday-element") || void 0), w = t.style.overflow;
+  let a = null, h = [];
+  function B() {
+    const c = U(s), v = /* @__PURE__ */ new Set();
+    for (const r of c)
+      v.add(r.variant);
     t.style.overflow = "visible";
-    const m = document.createDocumentFragment();
+    const d = document.createDocumentFragment();
     for (; t.firstChild; )
-      m.appendChild(t.firstChild);
+      d.appendChild(t.firstChild);
     const n = [];
-    for (const a of v)
-      n.push(r(a, m, !0));
+    for (const r of v)
+      n.push(x(r, d, !0));
     const A = document.createElement("div");
-    A.style.visibility = "hidden", A.style.pointerEvents = "none", A.setAttribute("aria-hidden", "true"), A.appendChild(m.cloneNode(!0)), t.appendChild(A);
-    const V = r(O, m, !1);
-    t.appendChild(V.wrapper);
-    const N = [V];
-    for (const a of n)
-      t.appendChild(a.wrapper), N.push(a);
-    return N;
-  }
-  function r(l, v, m) {
+    A.style.visibility = "hidden", A.style.pointerEvents = "none", A.setAttribute("aria-hidden", "true"), A.appendChild(d.cloneNode(!0)), t.appendChild(A);
+    const N = x(Y, d, !1);
+    t.appendChild(N.wrapper);
+    const $ = [N];
+    for (const r of n)
+      t.appendChild(r.wrapper), $.push(r);
+    return $;
+  }
+  function x(c, v, d) {
     const n = document.createElement("div");
-    return n.setAttribute(X, l), n.style.position = "absolute", n.style.top = "0", n.style.left = "0", n.style.right = "0", n.style.bottom = "0", n.style.willChange = "clip-path", n.style.clipPath = "inset(0 0 100% 0)", m ? (n.setAttribute("aria-hidden", "true"), n.setAttribute("inert", ""), n.style.pointerEvents = "none", n.appendChild(v.cloneNode(!0))) : n.appendChild(v), { wrapper: n, name: l };
+    return n.setAttribute(W, c), n.style.position = "absolute", n.style.top = "0", n.style.left = "0", n.style.right = "0", n.style.bottom = "0", n.style.willChange = "clip-path", n.style.clipPath = "inset(0 0 100% 0)", d ? (n.setAttribute("aria-hidden", "true"), n.setAttribute("inert", ""), n.style.pointerEvents = "none", n.appendChild(v.cloneNode(!0))) : n.appendChild(v), { wrapper: n, name: c };
   }
-  function L() {
-    const l = Y(s);
-    d = x(), c = Q({
+  function l() {
+    const c = U(s);
+    h = B(), a = X({
       element: t,
-      variants: d,
-      defaultName: O,
-      sections: l,
+      variants: h,
+      defaultName: Y,
+      sections: c,
       onChange: p
     });
   }
-  function S() {
-    for (const v of d)
-      v.wrapper.remove();
-    t.innerHTML = h;
-    const l = Y(s);
-    d = x(), c == null || c.update(d, l);
+  function R() {
+    const c = t.querySelector(
+      `[${W}="${Y}"]`
+    ), v = t.querySelectorAll(`[${W}]`);
+    for (const d of v)
+      d.remove();
+    for (; t.firstChild; )
+      t.removeChild(t.firstChild);
+    if (c)
+      for (; c.firstChild; )
+        t.appendChild(c.firstChild);
+  }
+  function V() {
+    R();
+    const c = U(s);
+    h = B(), a == null || a.update(h, c);
   }
-  function y() {
-    c == null || c.destroy(), c = null;
-    for (const l of d)
-      l.wrapper.remove();
-    d = [], t.innerHTML = h, t.style.overflow = w;
+  function g() {
+    a == null || a.destroy(), a = null, R(), h = [], t.style.overflow = w;
   }
-  return L(), { refresh: S, destroy: y };
+  return l(), { refresh: V, destroy: g };
 }
 export {
   Z as a,
-  Q as c,
-  Y as s
+  X as c,
+  U as s
 };

package/dist/midday.umd.js

@@ -1 +1 @@
-(function(C,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(C=typeof globalThis<"u"?globalThis:C||self,I(C.midday={}))})(this,(function(C){"use strict";function I(t){const o=t.getBoundingClientRect();return{top:o.top+window.scrollY,height:o.height}}function G(t){const o=t.getBoundingClientRect();return{top:o.top,height:o.height}}function V(t){for(const o of t){const l=I(o.el);o.top=l.top,o.height=l.height}}const K="[data-midday-section]",J="data-midday-section",Q="data-midday-target";function N(t){const o=document.querySelectorAll(K),l=[];for(const s of o){const u=s.getAttribute(J);if(!u)continue;const m=s.getAttribute(Q);m&&(!t||!m.split(" ").includes(t))||l.push({el:s,variant:u,top:0,height:0})}return V(l),l}function D(t){let{element:o,variants:l,sections:s}=t;const{defaultName:u,onChange:m}=t;let n=null,c=!1,B="",r=null;function P(){g()}function v(){V(s),g()}function g(){c||(c=!0,n=requestAnimationFrame(p))}function p(){c=!1,w()}function w(){const d=G(o),a=d.height;if(a<=0)return;const ot=window.scrollY,U=d.top,k=U+a,H=[],Y=new Map;let F=a,_=0,O=0;const q=new Map;for(const e of s){const M=e.top-ot,T=M+e.height,b=Math.max(U,M),f=Math.min(k,T),R=Math.max(0,f-b);if(R>0){O+=R;const A=b-U,S=k-f;F=Math.min(F,A),_=Math.max(_,a-S);const L=Y.get(e.variant);L?(L.topInset=Math.min(L.topInset,A),L.bottomInset=Math.min(L.bottomInset,S)):Y.set(e.variant,{topInset:A,bottomInset:S})}let h=q.get(e.variant);h||(h=[],q.set(e.variant,h)),h.push({viewTop:M,viewBottom:T})}let x=null;for(const e of l){if(e.name===u){x=e.wrapper;continue}const M=q.get(e.name);if(!M){e.wrapper.style.clipPath="inset(0 0 100% 0)";continue}const T=e.wrapper.getBoundingClientRect(),b=T.height||a;let f=b,R=b;for(const h of M){const A=Math.max(T.top,h.viewTop),S=Math.min(T.bottom,h.viewBottom);S<=A||(f=Math.min(f,A-T.top),R=Math.min(R,T.bottom-S))}if(f+R<b){e.wrapper.style.clipPath=`inset(${f}px 0 ${R}px 0)`;const h=Y.get(e.name),A=h?(a-h.topInset-h.bottomInset)/a:0;H.push({name:e.name,progress:A})}else e.wrapper.style.clipPath="inset(0 0 100% 0)"}if(x){const e=x.getBoundingClientRect().height||a;if(O>=a)x.style.clipPath="inset(0 0 100% 0)";else if(O<=0)x.style.clipPath="inset(0)",H.unshift({name:u,progress:1});else{const M=F;if(a-_>=M){const f=e*(_/a);x.style.clipPath=`inset(${f}px 0 0 0)`}else{const f=e*((a-F)/a);x.style.clipPath=`inset(0 0 ${f}px 0)`}const b=a-O;H.unshift({name:u,progress:b/a})}}const z=H.map(e=>`${e.name}:${e.progress.toFixed(3)}`).join("|");z!==B&&(B=z,m==null||m(H))}function y(){r==null||r.disconnect(),r=new ResizeObserver(()=>{V(s),g()});for(const d of s)r.observe(d.el)}function i(){window.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),y(),g()}function E(){V(s),g()}function j(d,a){l=d,s=a,V(s),y(),g()}function $(){n!==null&&cancelAnimationFrame(n),window.removeEventListener("scroll",P),window.removeEventListener("resize",v),r==null||r.disconnect(),r=null}return i(),{recalculate:E,update:j,destroy:$}}const X="data-midday-variant",W="default";function Z(t,o={}){const{onChange:l}=o,s=o.name??(t.getAttribute("data-midday-element")||void 0),u=t.innerHTML,m=t.style.overflow;let n=null,c=[];function B(){const p=N(s),w=new Set;for(const d of p)w.add(d.variant);t.style.overflow="visible";const y=document.createDocumentFragment();for(;t.firstChild;)y.appendChild(t.firstChild);const i=[];for(const d of w)i.push(r(d,y,!0));const E=document.createElement("div");E.style.visibility="hidden",E.style.pointerEvents="none",E.setAttribute("aria-hidden","true"),E.appendChild(y.cloneNode(!0)),t.appendChild(E);const j=r(W,y,!1);t.appendChild(j.wrapper);const $=[j];for(const d of i)t.appendChild(d.wrapper),$.push(d);return $}function r(p,w,y){const i=document.createElement("div");return i.setAttribute(X,p),i.style.position="absolute",i.style.top="0",i.style.left="0",i.style.right="0",i.style.bottom="0",i.style.willChange="clip-path",i.style.clipPath="inset(0 0 100% 0)",y?(i.setAttribute("aria-hidden","true"),i.setAttribute("inert",""),i.style.pointerEvents="none",i.appendChild(w.cloneNode(!0))):i.appendChild(w),{wrapper:i,name:p}}function P(){const p=N(s);c=B(),n=D({element:t,variants:c,defaultName:W,sections:p,onChange:l})}function v(){for(const w of c)w.wrapper.remove();t.innerHTML=u;const p=N(s);c=B(),n==null||n.update(c,p)}function g(){n==null||n.destroy(),n=null;for(const p of c)p.wrapper.remove();c=[],t.innerHTML=u,t.style.overflow=m}return P(),{refresh:v,destroy:g}}function tt(t){const{element:o,variants:l,defaultVariant:s="default",name:u,onChange:m}=t;let n=null;function c(){return Object.entries(l).map(([v,g])=>({name:v,wrapper:g}))}function B(){const v=N(u);n=D({element:o,variants:c(),defaultName:s,sections:v,onChange:m})}function r(){const v=N(u);n==null||n.update(c(),v)}function P(){n==null||n.destroy(),n=null}return B(),{refresh:r,destroy:P}}function et(t,o){return Z(t,o)}function nt(t){return tt(t)}C.midday=et,C.middayHeadless=nt,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
+(function(M,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(M=typeof globalThis<"u"?globalThis:M||self,I(M.midday={}))})(this,(function(M){"use strict";function I(t){const n=t.getBoundingClientRect();return{top:n.top+window.scrollY,height:n.height}}function K(t){const n=t.getBoundingClientRect();return{top:n.top,height:n.height}}function V(t){for(const n of t){const d=I(n.el);n.top=d.top,n.height=d.height}}const J="[data-midday-section]",Q="data-midday-section",X="data-midday-target";function N(t){const n=document.querySelectorAll(J),d=[];for(const s of n){const p=s.getAttribute(Q);if(!p)continue;const a=s.getAttribute(X);a&&(!t||!a.split(" ").includes(t))||d.push({el:s,variant:p,top:0,height:0})}return V(d),d}function k(t){let{element:n,variants:d,sections:s}=t;const{defaultName:p,onChange:a}=t;let i=null,y=!1,B="",r=null;function E(){w()}function v(){V(s),w()}function w(){y||(y=!0,i=requestAnimationFrame(l))}function l(){y=!1,g()}function g(){const u=K(n),c=u.height;if(c<=0)return;const ot=window.scrollY,W=u.top,z=W+c,$=[],Y=new Map;let F=c,_=0,q=0;const D=new Map;for(const e of s){const b=e.top-ot,C=b+e.height,T=Math.max(W,b),h=Math.min(z,C),R=Math.max(0,h-T);if(R>0){q+=R;const A=T-W,P=z-h;F=Math.min(F,A),_=Math.max(_,c-P);const j=Y.get(e.variant);j?(j.topInset=Math.min(j.topInset,A),j.bottomInset=Math.min(j.bottomInset,P)):Y.set(e.variant,{topInset:A,bottomInset:P})}let m=D.get(e.variant);m||(m=[],D.set(e.variant,m)),m.push({viewTop:b,viewBottom:C})}let S=null;for(const e of d){if(e.name===p){S=e.wrapper;continue}const b=D.get(e.name);if(!b){e.wrapper.style.clipPath="inset(0 0 100% 0)";continue}const C=e.wrapper.getBoundingClientRect(),T=C.height||c;let h=T,R=T;for(const m of b){const A=Math.max(C.top,m.viewTop),P=Math.min(C.bottom,m.viewBottom);P<=A||(h=Math.min(h,A-C.top),R=Math.min(R,C.bottom-P))}if(h+R<T){e.wrapper.style.clipPath=`inset(${h}px 0 ${R}px 0)`;const m=Y.get(e.name),A=m?(c-m.topInset-m.bottomInset)/c:0;$.push({name:e.name,progress:A})}else e.wrapper.style.clipPath="inset(0 0 100% 0)"}if(S){const e=S.getBoundingClientRect().height||c;if(q>=c)S.style.clipPath="inset(0 0 100% 0)";else if(q<=0)S.style.clipPath="inset(0)",$.unshift({name:p,progress:1});else{const b=F;if(c-_>=b){const h=e*(_/c);S.style.clipPath=`inset(${h}px 0 0 0)`}else{const h=e*((c-F)/c);S.style.clipPath=`inset(0 0 ${h}px 0)`}const T=c-q;$.unshift({name:p,progress:T/c})}}const G=$.map(e=>`${e.name}:${e.progress.toFixed(3)}`).join("|");G!==B&&(B=G,a==null||a($))}function f(){r==null||r.disconnect(),r=new ResizeObserver(()=>{V(s),w()});for(const u of s)r.observe(u.el);r.observe(n)}function o(){window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),f(),w()}function x(){V(s),w()}function L(u,c){d=u,s=c,V(s),f(),w()}function H(){i!==null&&cancelAnimationFrame(i),window.removeEventListener("scroll",E),window.removeEventListener("resize",v),r==null||r.disconnect(),r=null}return o(),{recalculate:x,update:L,destroy:H}}const O="data-midday-variant",U="default";function Z(t,n={}){const{onChange:d}=n,s=n.name??(t.getAttribute("data-midday-element")||void 0),p=t.style.overflow;let a=null,i=[];function y(){const l=N(s),g=new Set;for(const u of l)g.add(u.variant);t.style.overflow="visible";const f=document.createDocumentFragment();for(;t.firstChild;)f.appendChild(t.firstChild);const o=[];for(const u of g)o.push(B(u,f,!0));const x=document.createElement("div");x.style.visibility="hidden",x.style.pointerEvents="none",x.setAttribute("aria-hidden","true"),x.appendChild(f.cloneNode(!0)),t.appendChild(x);const L=B(U,f,!1);t.appendChild(L.wrapper);const H=[L];for(const u of o)t.appendChild(u.wrapper),H.push(u);return H}function B(l,g,f){const o=document.createElement("div");return o.setAttribute(O,l),o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.right="0",o.style.bottom="0",o.style.willChange="clip-path",o.style.clipPath="inset(0 0 100% 0)",f?(o.setAttribute("aria-hidden","true"),o.setAttribute("inert",""),o.style.pointerEvents="none",o.appendChild(g.cloneNode(!0))):o.appendChild(g),{wrapper:o,name:l}}function r(){const l=N(s);i=y(),a=k({element:t,variants:i,defaultName:U,sections:l,onChange:d})}function E(){const l=t.querySelector(`[${O}="${U}"]`),g=t.querySelectorAll(`[${O}]`);for(const f of g)f.remove();for(;t.firstChild;)t.removeChild(t.firstChild);if(l)for(;l.firstChild;)t.appendChild(l.firstChild)}function v(){E();const l=N(s);i=y(),a==null||a.update(i,l)}function w(){a==null||a.destroy(),a=null,E(),i=[],t.style.overflow=p}return r(),{refresh:v,destroy:w}}function tt(t){const{element:n,variants:d,defaultVariant:s="default",name:p,onChange:a}=t;let i=null;function y(){return Object.entries(d).map(([v,w])=>({name:v,wrapper:w}))}function B(){const v=N(p);i=k({element:n,variants:y(),defaultName:s,sections:v,onChange:a})}function r(){const v=N(p);i==null||i.update(y(),v)}function E(){i==null||i.destroy(),i=null}return B(),{refresh:r,destroy:E}}function et(t,n){return Z(t,n)}function nt(t){return tt(t)}M.midday=et,M.middayHeadless=nt,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})}));

package/dist/svelte.mjs

@@ -1,9 +1,9 @@
-import { a as t } from "./core.mjs";
-function u(d, o) {
-  let r = t(d, o);
+import { a as o } from "./core.mjs";
+function l(d, y) {
+  let r = o(d, y);
   return {
     update(e) {
-      r == null || r.destroy(), r = t(d, e);
+      e !== void 0 ? (r == null || r.destroy(), r = o(d, e)) : r == null || r.refresh();
     },
     destroy() {
       r == null || r.destroy(), r = null;
@@ -11,5 +11,5 @@ function u(d, o) {
   };
 }
 export {
-  u as midday
+  l as midday
 };

package/dist/vue.mjs

@@ -1,22 +1,26 @@
 import { shallowRef as o, onMounted as u, onUnmounted as s } from "vue";
-import { a as d } from "./core.mjs";
-function c(n, a) {
-  const e = o(null);
+import { a as t } from "./core.mjs";
+function c(n, e) {
+  const a = o(null);
   return u(() => {
-    n.value && (e.value = d(n.value, a));
+    n.value && (a.value = t(n.value, e));
   }), s(() => {
-    var t;
-    (t = e.value) == null || t.destroy(), e.value = null;
-  }), e;
+    var d;
+    (d = a.value) == null || d.destroy(), a.value = null;
+  }), a;
 }
 const l = {
-  mounted(n, a) {
-    const e = d(n, a.value);
-    n.__middayInstance = e;
+  mounted(n, e) {
+    const a = t(n, e.value);
+    n.__middayInstance = a;
+  },
+  updated(n) {
+    var e;
+    (e = n.__middayInstance) == null || e.refresh();
   },
   unmounted(n) {
-    var a;
-    (a = n.__middayInstance) == null || a.destroy(), delete n.__middayInstance;
+    var e;
+    (e = n.__middayInstance) == null || e.destroy(), delete n.__middayInstance;
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marcwiest/midday.js",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A modern vanilla JS plugin for fixed headers that change style as you scroll through sections. Zero dependencies. The spiritual successor to midnight.js.",
   "publishConfig": {
     "access": "public"