@marcwiest/midday.js 0.1.0 → 0.2.0

package/README.md

@@ -5,7 +5,7 @@
 [![CI](https://github.com/marcwiest/midday.js/actions/workflows/ci.yml/badge.svg)](https://github.com/marcwiest/midday.js/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-A modern, zero-dependency vanilla JS plugin for fixed headers that change style as you scroll through page sections. The spiritual successor to [midnight.js](https://github.com/Aerolab/midnight.js).
+A modern, zero-dependency vanilla JS plugin for fixed elements that change style as you scroll through page sections. The spiritual successor to [midnight.js](https://github.com/Aerolab/midnight.js).
 
 **~1 kB gzipped** (auto mode) | TypeScript | Framework adapters (React, Vue, Svelte, Solid) included
 
@@ -36,12 +36,12 @@ Or via CDN (UMD):
 
 ## Quick Start
 
-### 1. Write one header, mark your sections
+### 1. Mark your element, add your sections
 
-You write a single header. Each section declares which header style it wants via `data-midday-section`:
+Add `data-midday-element` to your fixed element. Each section declares which variant it wants via `data-midday-section`:
 
 ```html
-<header data-midday>
+<header data-midday-element>
   <nav>
     <a href="/" class="logo">Logo</a>
     <a href="/about">About</a>
@@ -67,15 +67,15 @@ You write a single header. Each section declares which header style it wants via
 ```js
 import { midday } from '@marcwiest/midday.js';
 
-const instance = midday(document.querySelector('[data-midday]'));
+const instance = midday(document.querySelector('[data-midday-element]'));
 ```
 
 ### 3. What happens next
 
-The plugin reads every unique `data-midday-section` value on the page (`"dark"`, `"accent"`) and clones your header once per variant. Each clone is wrapped in a container with a `data-midday-variant` attribute. Your original HTML stays as-is — the clones are created at runtime:
+The plugin reads every unique `data-midday-section` value on the page (`"dark"`, `"accent"`) and clones your element's content once per variant. Each clone is wrapped in a container with a `data-midday-variant` attribute. Your original HTML stays as-is — the clones are created at runtime:
 
 ```
-<header data-midday>                               ← your element (position: fixed)
+<header data-midday-element>                       ← your element (position: fixed)
   <div data-midday-variant="default">              ← default style (original content)
     <nav>Logo, About, Contact</nav>
   </div>
@@ -122,19 +122,19 @@ header {
 }
 ```
 
-That's it. Scroll through your sections and the header transitions smoothly from one section to another.
+That's it. Scroll through your sections and the element transitions smoothly from one variant to another.
 
 ## API
 
-### `midday(header, options?)` — Auto mode
+### `midday(element, options?)` — Auto mode
 
-Clones your header content once per variant and manages everything. Sections are discovered automatically via `data-midday-section` attributes.
+Clones your element's content once per variant and manages everything. Sections are discovered automatically via `data-midday-section` attributes.
 
 ```js
-const instance = midday(document.querySelector('[data-midday]'));
+const instance = midday(document.querySelector('[data-midday-element]'));
 
 // With optional onChange callback:
-const instance = midday(document.querySelector('[data-midday]'), {
+const instance = midday(document.querySelector('[data-midday-element]'), {
   onChange: (variants) => console.log(variants),
 });
 ```
@@ -147,7 +147,7 @@ You provide pre-rendered variant elements. The plugin only manages `clip-path` v
 import { middayHeadless } from '@marcwiest/midday.js';
 
 const instance = middayHeadless({
-  header: document.querySelector('header'),
+  element: document.querySelector('header'),
   variants: {
     default: document.querySelector('.header-default'),
     dark: document.querySelector('.header-dark'),
@@ -162,19 +162,36 @@ const instance = middayHeadless({
 Both modes return the same instance:
 
 ```js
-instance.refresh();  // Re-scan sections and recalculate (call after DOM changes)
+instance.refresh();  // Rebuild variants and re-scan sections
 instance.destroy();  // Full teardown — removes clones, listeners, observers
 ```
 
+**When to call `refresh()`** — in both modes, call it when sections are added, removed, or reordered in the DOM. Beyond that, the two modes differ:
+
+**Auto mode** clones element content at init time. The clones and an internal sizing ghost are frozen snapshots of the element's DOM. CSS-driven size changes (media queries, viewport resize, font loading) are handled automatically — the sizing ghost is a real DOM node in normal flow and reflows with the page. But if the element's HTML content changes (nav items added/removed, conditional elements toggled), call `refresh()` to rebuild the clones and sizing ghost from the current DOM.
+
+Framework adapters initialize once on mount and don't auto-detect content changes. If your element's content is dynamic, call `refresh()` after updates:
+
+```jsx
+// React example
+const instance = useMidday(elementRef);
+
+useEffect(() => {
+  instance.current?.refresh();
+}, [navItems]);
+```
+
+**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
 
 Fires whenever the set of visible variants changes:
 
 ```js
-midday(header, {
+midday(element, {
   onChange: (variants) => {
     // variants: Array<{ name: string, progress: number }>
-    // progress: 0–1, how much of the header this variant covers
+    // progress: 0–1, how much of the element this variant covers
     console.log(variants);
     // e.g. [{ name: 'dark', progress: 0.7 }, { name: 'default', progress: 0.3 }]
   },
@@ -185,7 +202,7 @@ midday(header, {
 
 Each adapter is a separate tree-shakable entry point (~0.2 kB gzipped). Import only the one you need — the others are never bundled.
 
-The adapters wrap **auto mode** — your component renders a single header element, and cloning happens client-side on mount. This means your server-rendered HTML always contains just one header, keeping SEO clean (see [SSR & SEO](#ssr--seo) below).
+The adapters wrap **auto mode** — your component renders a single element, and cloning happens client-side on mount. This means your server-rendered HTML stays clean (see [SSR & SEO](#ssr--seo) below).
 
 ### React
 
@@ -194,11 +211,11 @@ import { useRef } from 'react';
 import { useMidday } from '@marcwiest/midday.js/react';
 
 function Header() {
-  const headerRef = useRef(null);
-  useMidday(headerRef);
+  const elementRef = useRef(null);
+  useMidday(elementRef);
 
   return (
-    <header ref={headerRef} style={{ position: 'fixed', top: 0, left: 0, right: 0 }}>
+    <header ref={elementRef} style={{ position: 'fixed', top: 0, left: 0, right: 0 }}>
       <Nav />
     </header>
   );
@@ -214,12 +231,12 @@ Composable:
 import { ref } from 'vue';
 import { useMidday } from '@marcwiest/midday.js/vue';
 
-const headerRef = ref(null);
-useMidday(headerRef);
+const elementRef = ref(null);
+useMidday(elementRef);
 </script>
 
 <template>
-  <header ref="headerRef">
+  <header ref="elementRef">
     <Nav />
   </header>
 </template>
@@ -259,11 +276,11 @@ Primitive:
 import { createMidday } from '@marcwiest/midday.js/solid';
 
 function Header() {
-  let headerEl;
-  createMidday(() => headerEl);
+  let el;
+  createMidday(() => el);
 
   return (
-    <header ref={headerEl} style={{ position: 'fixed', top: '0', left: '0', right: '0' }}>
+    <header ref={el} style={{ position: 'fixed', top: '0', left: '0', right: '0' }}>
       <Nav />
     </header>
   );
@@ -290,10 +307,10 @@ All adapters accept `onChange`:
 
 ```jsx
 // React
-useMidday(headerRef, { onChange: (v) => console.log(v) });
+useMidday(elementRef, { onChange: (v) => console.log(v) });
 
 // Vue (composable)
-useMidday(headerRef, { onChange: (v) => console.log(v) });
+useMidday(elementRef, { onChange: (v) => console.log(v) });
 
 // Vue (directive)
 <header v-midday="{ onChange: (v) => console.log(v) }"></header>
@@ -302,7 +319,7 @@ useMidday(headerRef, { onChange: (v) => console.log(v) });
 <header use:midday={{ onChange: (v) => console.log(v) }}></header>
 
 // Solid (primitive)
-createMidday(() => headerEl, { onChange: (v) => console.log(v) });
+createMidday(() => el, { onChange: (v) => console.log(v) });
 
 // Solid (directive)
 <header use:midday={{ onChange: (v) => console.log(v) }}></header>
@@ -310,13 +327,13 @@ createMidday(() => headerEl, { onChange: (v) => console.log(v) });
 
 ## Multiple Instances
 
-midday.js supports multiple independent fixed elements on the same page (e.g., a top header and a bottom app-bar). Name each instance via the `data-midday` attribute and use `data-midday-target` on sections to control which instance they affect.
+midday.js supports multiple independent fixed elements on the same page (e.g., a top header and a bottom app-bar). Name each instance via the `data-midday-element` attribute and use `data-midday-target` on sections to control which instance they affect.
 
 ```html
-<header data-midday="top">...</header>
-<nav class="app-bar" data-midday="bottom">...</nav>
+<header data-midday-element="top">...</header>
+<nav class="app-bar" data-midday-element="bottom">...</nav>
 
-<!-- Targets only the top header -->
+<!-- Targets only the top element -->
 <section data-midday-section="accent" data-midday-target="top">...</section>
 
 <!-- Targets both (space-separated) -->
@@ -329,19 +346,19 @@ midday.js supports multiple independent fixed elements on the same page (e.g., a
 ```js
 import { midday } from '@marcwiest/midday.js';
 
-const top = midday(document.querySelector('[data-midday="top"]'));
-const bottom = midday(document.querySelector('[data-midday="bottom"]'));
+const top = midday(document.querySelector('[data-midday-element="top"]'));
+const bottom = midday(document.querySelector('[data-midday-element="bottom"]'));
 ```
 
-Each instance runs its own engine and only reacts to its own sections. The instance name defaults to the element's `data-midday` attribute value, or you can set it explicitly via `options.name`.
+Each instance runs its own engine and only reacts to its own sections. The instance name defaults to the element's `data-midday-element` attribute value, or you can set it explicitly via `options.name`.
 
 ## SSR & SEO
 
 midday.js is designed to be SSR-safe by default.
 
-**Auto mode** (including all framework adapters) clones header content client-side on mount. The server-rendered HTML always contains a single, clean header element — no duplicate navigation links, no hidden clones. Search engine crawlers see exactly one header with one set of nav links.
+**Auto mode** (including all framework adapters) clones element content client-side on mount. The server-rendered HTML always contains a single, clean element — no duplicate navigation links, no hidden clones. Search engine crawlers see exactly one set of content.
 
-After hydration, the plugin creates variant clones in the browser. These clones are marked with `aria-hidden="true"` and `inert`, so they're invisible to screen readers and excluded from keyboard navigation. The original header content remains the accessible version.
+After hydration, the plugin creates variant clones in the browser. These clones are marked with `aria-hidden="true"` and `inert`, so they're invisible to screen readers and excluded from keyboard navigation. The original content remains the accessible version.
 
 **Headless mode** is different — since you provide the variant elements yourself, they exist in your markup. If you're using headless mode with SSR, render non-default variants client-side only to avoid duplicate content in the server HTML:
 
@@ -352,23 +369,23 @@ import { middayHeadless } from '@marcwiest/midday.js';
 
 function Header() {
   const [mounted, setMounted] = useState(false);
-  const headerRef = useRef(null);
+  const elementRef = useRef(null);
   const defaultRef = useRef(null);
   const darkRef = useRef(null);
 
   useEffect(() => setMounted(true), []);
 
   useEffect(() => {
-    if (!mounted || !headerRef.current) return;
+    if (!mounted || !elementRef.current) return;
     const instance = middayHeadless({
-      header: headerRef.current,
+      element: elementRef.current,
       variants: { default: defaultRef.current, dark: darkRef.current },
     });
     return () => instance.destroy();
   }, [mounted]);
 
   return (
-    <header ref={headerRef}>
+    <header ref={elementRef}>
       <div ref={defaultRef} className="header-default"><Nav /></div>
       {mounted && (
         <div ref={darkRef} className="header-dark" aria-hidden="true" inert="">
@@ -384,23 +401,48 @@ For most use cases, the framework adapters (which use auto mode) are simpler and
 
 ## How It Works
 
-midday.js uses `clip-path: inset()` to reveal and hide variant header elements as sections scroll past.
+midday.js uses `clip-path: inset()` to reveal and hide variant elements as sections scroll past.
 
-1. **Auto mode** clones the header content once per unique variant found in `data-midday-section` attributes. Each clone is wrapped in an absolutely-positioned container inside the header element.
+1. **Auto mode** clones the element's content once per unique variant found in `data-midday-section` attributes. Each clone is wrapped in an absolutely-positioned container inside the managed element.
 
-2. On each scroll frame, the plugin calculates which sections overlap the header's viewport position and by how many pixels.
+2. On each scroll frame, the plugin calculates which sections overlap the element's viewport position and by how many pixels.
 
-3. Each variant's container gets a `clip-path: inset(topPx 0 bottomPx 0)` that reveals exactly the portion corresponding to its section's overlap with the header. Every variant — including the default — is clipped to only its own region. Nothing is used as a backdrop, so transparent backgrounds work fine.
+3. Each variant's container gets a `clip-path: inset(topPx 0 bottomPx 0)` that reveals exactly the portion corresponding to its section's overlap with the element. Every variant — including the default — is clipped to only its own region. Nothing is used as a backdrop, so transparent backgrounds work fine.
 
 The result is a pixel-perfect wipe transition at every section boundary.
 
 ## Styling Guide
 
-- The header element should be `position: fixed` or `position: sticky`
+- The managed element should be `position: fixed` or `position: sticky`
 - In auto mode, variant wrappers get `data-midday-variant="<name>"` — target them with `[data-midday-variant="dark"]` or however you prefer
 - Transparent variant backgrounds work — each variant is clipped independently, so page content shows through where intended
-- In headless mode, you're responsible for positioning variant elements absolutely within the header and setting `aria-hidden`/`inert` on non-default variants
-- In headless mode, variant elements can have different heights than the header. The clip-path will track section boundaries exactly, with extra height revealing only when the section extends past the header edge
+- In headless mode, you're responsible for positioning variant elements absolutely within the managed element and setting `aria-hidden`/`inert` on non-default variants
+- In headless mode, variant elements can have different heights than the managed element. The clip-path will track section boundaries exactly, with extra height revealing only when the section extends past the element edge
+- Auto mode uses `cloneNode(true)` to create variant copies. This duplicates DOM structure and attributes but **not** JavaScript event listeners attached via `addEventListener`. If your element contains interactive elements (nav links, dropdowns, etc.), use **event delegation** — attach a single listener to `document` and match with `closest()` — so events work in all variants
+
+## Overflow Content (Dropdowns, Flyouts)
+
+`clip-path: inset(...)` clips **all** descendants, including `position: fixed` elements like dropdown panels. In auto mode, `cloneNode(true)` also duplicates dropdown markup into every variant. There is no library-level fix for this, but the workaround is straightforward:
+
+**Keep triggers inside the element; render panels outside the element's DOM entirely.**
+
+Position the panel as a sibling of the element (or in a portal container) and align it visually with its trigger. Since triggers get cloned into each variant, use **event delegation** to handle clicks:
+
+```js
+document.addEventListener('click', (e) => {
+  const trigger = e.target.closest('.dropdown-trigger');
+  if (!trigger) return;
+  const panel = document.querySelector('#dropdown-panel');
+  const rect = trigger.getBoundingClientRect();
+  panel.style.top = rect.bottom + 'px';
+  panel.style.left = rect.left + 'px';
+  panel.classList.toggle('open');
+});
+```
+
+**CSS Anchor Positioning** offers a progressive enhancement: set `anchor-name` on the trigger and use `position-anchor` + `position: fixed` on the panel. This works across DOM subtrees without JavaScript positioning. Browser support is still limited (Chromium 125+).
+
+**Framework portals** solve this idiomatically: React's `createPortal`, Vue's `<Teleport to="body">`, Solid's `<Portal>`, or a Svelte portal library. Render the dropdown panel into `document.body` so it sits outside the clipped element entirely.
 
 ## Browser Support
 

package/dist/core.d.ts

@@ -1,2 +1,2 @@
 import type { MiddayOptions, MiddayInstance } from './types';
-export declare function createMidday(header: HTMLElement, options?: MiddayOptions): MiddayInstance;
+export declare function createMidday(element: HTMLElement, options?: MiddayOptions): MiddayInstance;

package/dist/core.mjs

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

package/dist/index.d.ts

@@ -1,18 +1,18 @@
 import type { MiddayOptions, MiddayHeadlessOptions, MiddayInstance, ActiveVariant } from './types';
 /**
- * Auto mode — Initialize midday.js on a fixed header element.
- * Automatically clones header content for each variant and manages the DOM.
+ * Auto mode — Initialize midday.js on a fixed element.
+ * Automatically clones element content for each variant and manages the DOM.
  *
- * @param header - The fixed/sticky header element
+ * @param element - The fixed/sticky element marked with data-midday-element
  * @param options - Optional configuration
  * @returns Instance with refresh() and destroy() methods
  *
  * @example
  * ```js
- * const instance = midday(document.querySelector('[data-midday]'));
+ * const instance = midday(document.querySelector('[data-midday-element]'));
  * ```
  */
-export declare function midday(header: HTMLElement, options?: MiddayOptions): MiddayInstance;
+export declare function midday(element: HTMLElement, options?: MiddayOptions): MiddayInstance;
 /**
  * Headless mode — Bring your own variant elements.
  * Manages only clip-paths on pre-rendered elements. No DOM cloning.

package/dist/midday.mjs

@@ -1,45 +1,45 @@
 import { s as i, c as y, a as p } from "./core.mjs";
-function h(a) {
+function v(a) {
   const {
-    header: e,
+    element: e,
     variants: c,
     defaultVariant: o = "default",
-    name: r,
-    onChange: d
+    name: s,
+    onChange: u
   } = a;
   let t = null;
-  function s() {
+  function r() {
     return Object.entries(c).map(([n, m]) => ({
       name: n,
       wrapper: m
     }));
   }
-  function u() {
-    const n = i(r);
+  function d() {
+    const n = i(s);
     t = y({
-      header: e,
-      variants: s(),
+      element: e,
+      variants: r(),
       defaultName: o,
       sections: n,
-      onChange: d
+      onChange: u
     });
   }
   function f() {
-    const n = i(r);
-    t == null || t.update(s(), n);
+    const n = i(s);
+    t == null || t.update(r(), n);
   }
   function l() {
     t == null || t.destroy(), t = null;
   }
-  return u(), { refresh: f, destroy: l };
+  return d(), { refresh: f, destroy: l };
 }
-function M(a, e) {
+function h(a, e) {
   return p(a, e);
 }
 function H(a) {
-  return h(a);
+  return v(a);
 }
 export {
-  M as midday,
+  h as midday,
   H as middayHeadless
 };

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 H(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{header:o,variants:l,sections:s}=t;const{defaultName:u,onChange:m}=t;let n=null,c=!1,B="",r=null;function R(){v()}function h(){V(s),v()}function v(){c||(c=!0,n=requestAnimationFrame(d))}function d(){c=!1,g()}function g(){const P=G(o),a=P.height;if(a<=0)return;const ot=window.scrollY,U=P.top,k=U+a,L=[],Y=new Map;let F=a,_=0,O=0;const q=new Map;for(const e of s){const M=e.top-ot,w=M+e.height,b=Math.max(U,M),p=Math.min(k,w),E=Math.max(0,p-b);if(E>0){O+=E;const A=b-U,S=k-p;F=Math.min(F,A),_=Math.max(_,a-S);const N=Y.get(e.variant);N?(N.topInset=Math.min(N.topInset,A),N.bottomInset=Math.min(N.bottomInset,S)):Y.set(e.variant,{topInset:A,bottomInset:S})}let f=q.get(e.variant);f||(f=[],q.set(e.variant,f)),f.push({viewTop:M,viewBottom:w})}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 w=e.wrapper.getBoundingClientRect(),b=w.height||a;let p=b,E=b;for(const f of M){const A=Math.max(w.top,f.viewTop),S=Math.min(w.bottom,f.viewBottom);S<=A||(p=Math.min(p,A-w.top),E=Math.min(E,w.bottom-S))}if(p+E<b){e.wrapper.style.clipPath=`inset(${p}px 0 ${E}px 0)`;const f=Y.get(e.name),A=f?(a-f.topInset-f.bottomInset)/a:0;L.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)",L.unshift({name:u,progress:1});else{const M=F;if(a-_>=M){const p=e*(_/a);x.style.clipPath=`inset(${p}px 0 0 0)`}else{const p=e*((a-F)/a);x.style.clipPath=`inset(0 0 ${p}px 0)`}const b=a-O;L.unshift({name:u,progress:b/a})}}const z=L.map(e=>`${e.name}:${e.progress.toFixed(3)}`).join("|");z!==B&&(B=z,m==null||m(L))}function y(){r==null||r.disconnect(),r=new ResizeObserver(()=>{V(s),v()});for(const P of s)r.observe(P.el)}function i(){window.addEventListener("scroll",R,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),y(),v()}function j(){V(s),v()}function $(P,a){l=P,s=a,V(s),y(),v()}function T(){n!==null&&cancelAnimationFrame(n),window.removeEventListener("scroll",R),window.removeEventListener("resize",h),r==null||r.disconnect(),r=null}return i(),{recalculate:j,update:$,destroy:T}}const X="data-midday-variant",W="default";function Z(t,o={}){const{onChange:l}=o,s=o.name??(t.getAttribute("data-midday")||void 0),u=t.innerHTML,m=t.style.overflow;let n=null,c=[];function B(){const d=H(s),g=new Set;for(const T of d)g.add(T.variant);t.style.overflow="visible";const y=document.createDocumentFragment();for(;t.firstChild;)y.appendChild(t.firstChild);const i=[];for(const T of g)i.push(r(T,y,!0));const j=r(W,y,!1);t.appendChild(j.wrapper);const $=[j];for(const T of i)t.appendChild(T.wrapper),$.push(T);return $}function r(d,g,y){const i=document.createElement("div");return i.setAttribute(X,d),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(g.cloneNode(!0))):i.appendChild(g),{wrapper:i,name:d}}function R(){const d=H(s);c=B(),n=D({header:t,variants:c,defaultName:W,sections:d,onChange:l})}function h(){for(const g of c)g.wrapper.remove();t.innerHTML=u;const d=H(s);c=B(),n==null||n.update(c,d)}function v(){n==null||n.destroy(),n=null;for(const d of c)d.wrapper.remove();c=[],t.innerHTML=u,t.style.overflow=m}return R(),{refresh:h,destroy:v}}function tt(t){const{header:o,variants:l,defaultVariant:s="default",name:u,onChange:m}=t;let n=null;function c(){return Object.entries(l).map(([h,v])=>({name:h,wrapper:v}))}function B(){const h=H(u);n=D({header:o,variants:c(),defaultName:s,sections:h,onChange:m})}function r(){const h=H(u);n==null||n.update(c(),h)}function R(){n==null||n.destroy(),n=null}return B(),{refresh:r,destroy:R}}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(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"})}));

package/dist/react.d.ts

@@ -4,4 +4,4 @@ import type { MiddayOptions, MiddayInstance } from './types';
  * Initializes on mount, destroys on unmount.
  * Cloning happens client-side — safe for SSR.
  */
-export declare function useMidday(headerRef: React.RefObject<HTMLElement | null>, options?: MiddayOptions): React.RefObject<MiddayInstance | null>;
+export declare function useMidday(elementRef: React.RefObject<HTMLElement | null>, options?: MiddayOptions): React.RefObject<MiddayInstance | null>;

package/dist/solid.d.ts

@@ -4,7 +4,7 @@ import type { MiddayOptions, MiddayInstance } from './types';
  * Initializes on mount, cleans up on disposal.
  * Cloning happens client-side — safe for SSR.
  */
-export declare function createMidday(headerAccessor: () => HTMLElement | null, options?: MiddayOptions): () => MiddayInstance | null;
+export declare function createMidday(elementAccessor: () => HTMLElement | null, options?: MiddayOptions): () => MiddayInstance | null;
 /**
  * Solid directive for midday.js (auto mode).
  * Usage: <header use:midday> or <header use:midday={{ onChange }}>

package/dist/solid.mjs

@@ -1,6 +1,6 @@
 import { onMount as d, onCleanup as e } from "solid-js";
 import { a } from "./core.mjs";
-function c(n, o) {
+function l(n, o) {
   let t = null;
   return d(() => {
     const r = n();
@@ -9,13 +9,13 @@ function c(n, o) {
     t == null || t.destroy(), t = null;
   }), () => t;
 }
-function l(n, o) {
+function c(n, o) {
   const t = a(n, o());
   e(() => {
     t.destroy();
   });
 }
 export {
-  c as createMidday,
-  l as midday
+  l as createMidday,
+  c as midday
 };

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 export interface ActiveVariant {
     /** The variant name (from data-midday-section value) */
     name: string;
-    /** How much of the header this variant covers (0 to 1) */
+    /** How much of the element this variant covers (0 to 1) */
     progress: number;
 }
 export interface MiddayInstance {
@@ -21,14 +21,14 @@ export interface VariantState {
     name: string;
 }
 export interface MiddayOptions {
-    /** Instance name for multi-instance scoping. Sections with a matching data-midday-target will be claimed by this instance. Defaults to the header's data-midday attribute value. */
+    /** Instance name for multi-instance scoping. Sections with a matching data-midday-target will be claimed by this instance. Defaults to the element's data-midday-element attribute value. */
     name?: string;
     /** Called when the set of visible variants changes */
     onChange?: ((variants: ActiveVariant[]) => void) | null;
 }
 export interface MiddayHeadlessOptions {
-    /** The fixed/sticky header element (used for position calculations) */
-    header: HTMLElement;
+    /** The fixed/sticky element (used for position calculations) */
+    element: HTMLElement;
     /** Map of variant name to wrapper element. The plugin manages clip-paths on these. */
     variants: Record<string, HTMLElement>;
     /** Which key in `variants` is the default (shown where no section overlaps). Defaults to 'default'. */
@@ -39,7 +39,7 @@ export interface MiddayHeadlessOptions {
     onChange?: ((variants: ActiveVariant[]) => void) | null;
 }
 export interface EngineConfig {
-    header: HTMLElement;
+    element: HTMLElement;
     variants: VariantState[];
     defaultName: string;
     sections: SectionData[];

package/dist/utils.d.ts

@@ -8,10 +8,10 @@ export declare function getSectionBounds(el: Element): {
     height: number;
 };
 /**
- * Get the header's current viewport-relative bounding rect.
+ * Get the element's current viewport-relative bounding rect.
  * This accounts for CSS transforms, sticky offsets, etc.
  */
-export declare function getHeaderBounds(el: HTMLElement): {
+export declare function getElementBounds(el: HTMLElement): {
     top: number;
     height: number;
 };

package/dist/vue.d.ts

@@ -5,7 +5,7 @@ import type { MiddayOptions, MiddayInstance } from './types';
  * Initializes on mount, destroys on unmount.
  * Cloning happens client-side — safe for SSR.
  */
-export declare function useMidday(headerRef: Ref<HTMLElement | null>, options?: MiddayOptions): Ref<MiddayInstance | null>;
+export declare function useMidday(elementRef: Ref<HTMLElement | null>, options?: MiddayOptions): Ref<MiddayInstance | null>;
 /**
  * Vue custom directive for midday.js (auto mode).
  * Usage: <header v-midday> or <header v-midday="{ onChange }">

package/dist/vue.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marcwiest/midday.js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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"