gclass-anims 1.0.0-beta.22 → 1.0.0-beta.22.1

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to `gclass-anims` will be documented in this file.
 
+## [1.0.0-beta.22.1] - 2026-09-06
+- Fixed `.order` stagger grouping bug — `Listeners.js:76` `wrapQAll` now preserves DOM order via `body *` filter + `elementMatchesSel` (was `Set([...spawn-up], [...spawn-down])` grouping by type, now top-to-bottom as `qAll` does). Fixes `doc` `spawn` and landing `order` appearing all over.
+- No API change from `beta.22`.
+
 ## [1.0.0-beta.22] - 2026-09-06
 - Added responsive breakpoints — `Config.js:75` `defaults.breakpoints {xs:475,s:640,m:768,l:1024,xl:1280}` (single-letter `s/m/l` avoids Tailwind `sm/md/lg` collision). Usage `m:spawn-up`, `l:float`, `xs:spawn-up`. Gating is live via `gsap.matchMedia` (`Listeners.js:26,202`).
 - Added breakpoint-aware modifiers — `m:amount-20`, `m:time-2`, `m:ease-bounce`, `m:priority-3`, `m:chars-[...]`, `m:spawn-num-10` etc. Mobile-first largest active wins (`Listeners.js:237` `getActivePrefixedClass`, `Animations.js:13` lazy helpers). Covers `amount-`, `time-`, `priority-`, `edelay-`, `etime-`, `stagger-`, `fill-time-`, `reveal-delay-`, `spawn-num-`, `progress-start-`, etc.
@@ -9,6 +13,7 @@ All notable changes to `gclass-anims` will be documented in this file.
 - Added ESM + CJS dual build — `vite.lib.config.js` (Vite lib) builds `dist/gclass.esm.js` + `dist/gclass.cjs` (`gsap` external); `package.json:4` bumped to `beta.22`, `main/module` point to `dist/`, `exports: {import, require}`, `sideEffects:false`, `prepublishOnly: build`.
 - Fixed CJS `gsap` interop — `Animations.js:2`/`Listeners.js:1`/`AnimToggle.js:3`/`CustomAnims.js:1` now `import {gsap} from 'gsap'` (named import) for correct `require('gsap').gsap` interop.
 - Added `dev-react-strict` test harness — `vitest` + `jsdom` + `src/__tests__/breakpoints.test.jsx` (14 tests: gating, modifiers, Tailwind coexistence, StrictMode) + `BreakpointHarness.jsx` visual; `vite.config.js` test config.
+- Documented breakpoints — `doc/src/app/documentation/responsive-design/page.js` (was duplicate `optimization`).
 
 ## [1.0.0-beta.21] - 2026-9-3
 - Added a `gclassOpts()` function that controls the animation fps and observer throttling

package/Listeners.js

@@ -73,32 +73,17 @@ const qAllBp = (sel, qAll) => {
     })())
 }
 // For generic qAll(sel) calls that should be breakpoint-aware, use this wrapper.
+// Preserves DOM order (critical for .order stagger) and respects root scoping (boot screen).
 const wrapQAll = (qAll) => (sel) => {
-    // if sel is a comma list (orderSelector), split and union
-    if (sel.includes(',')) {
-        const parts = sel.split(',').map(s => s.trim()).filter(Boolean)
-        const set = new Set()
-        parts.forEach(p => wrapQAll(qAll)(p).forEach(e => set.add(e)))
-        return [...set]
-    }
-    // "body *" passthrough
     if (sel === "body *") return qAll(sel)
-    const hasBpInSel = bpNames.some(bp => sel.includes(`${bp}:`))
-    if (hasBpInSel) {
-        // sel already contains bp: variant - filter by active
-        return qAll("body *").filter(el => sel.split(',').some(s => elementMatchesSel(el, s.trim())))
-    }
-    // normal sel - include base + active variants
-    try {
-        const baseEls = qAll(sel)
-        // also scan for active variants that wouldn't be found by qAll(sel)
-        const variantEls = qAll("body *").filter(el => {
-            for (const bp of bpNames) if (el.classList.contains(`${bp}:${sel.slice(1)}`) && isBreakpointActive(bp)) return true
-            return false
-        })
-        const set = new Set([...baseEls, ...variantEls])
-        return [...set]
-    } catch { return qAll(sel) }
+    const parts = sel.split(',').map(s => s.trim()).filter(Boolean)
+    // Filter all candidates in DOM order, matching base or active bp: variant via elementMatchesSel
+    // This keeps .order sequence top-to-bottom instead of grouping by sel type.
+    return qAll("body *").filter(el => parts.some(p => {
+        // p is like ".spawn-up" or ".spawn-text-spawn-up"
+        // elementMatchesSel handles both base and bp:base when active
+        try { return elementMatchesSel(el, p) } catch { return false }
+    }))
 }
 
 // --- Named onComplete handler registry -------------------------------------

package/dist/gclass.cjs

@@ -1325,24 +1325,15 @@ var hasGClass = (el, name) => {
 	return false;
 };
 var wrapQAll = (qAll) => (sel) => {
-	if (sel.includes(",")) {
-		const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
-		const set = /* @__PURE__ */ new Set();
-		parts.forEach((p) => wrapQAll(qAll)(p).forEach((e) => set.add(e)));
-		return [...set];
-	}
 	if (sel === "body *") return qAll(sel);
-	if (bpNames.some((bp) => sel.includes(`${bp}:`))) return qAll("body *").filter((el) => sel.split(",").some((s) => elementMatchesSel(el, s.trim())));
-	try {
-		const baseEls = qAll(sel);
-		const variantEls = qAll("body *").filter((el) => {
-			for (const bp of bpNames) if (el.classList.contains(`${bp}:${sel.slice(1)}`) && isBreakpointActive(bp)) return true;
+	const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
+	return qAll("body *").filter((el) => parts.some((p) => {
+		try {
+			return elementMatchesSel(el, p);
+		} catch {
 			return false;
-		});
-		return [.../* @__PURE__ */ new Set([...baseEls, ...variantEls])];
-	} catch {
-		return qAll(sel);
-	}
+		}
+	}));
 };
 var completeHandlers = /* @__PURE__ */ new Map();
 function registerComplete(name, fn) {

package/dist/gclass.esm.js

@@ -1324,24 +1324,15 @@ var hasGClass = (el, name) => {
 	return false;
 };
 var wrapQAll = (qAll) => (sel) => {
-	if (sel.includes(",")) {
-		const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
-		const set = /* @__PURE__ */ new Set();
-		parts.forEach((p) => wrapQAll(qAll)(p).forEach((e) => set.add(e)));
-		return [...set];
-	}
 	if (sel === "body *") return qAll(sel);
-	if (bpNames.some((bp) => sel.includes(`${bp}:`))) return qAll("body *").filter((el) => sel.split(",").some((s) => elementMatchesSel(el, s.trim())));
-	try {
-		const baseEls = qAll(sel);
-		const variantEls = qAll("body *").filter((el) => {
-			for (const bp of bpNames) if (el.classList.contains(`${bp}:${sel.slice(1)}`) && isBreakpointActive(bp)) return true;
+	const parts = sel.split(",").map((s) => s.trim()).filter(Boolean);
+	return qAll("body *").filter((el) => parts.some((p) => {
+		try {
+			return elementMatchesSel(el, p);
+		} catch {
 			return false;
-		});
-		return [.../* @__PURE__ */ new Set([...baseEls, ...variantEls])];
-	} catch {
-		return qAll(sel);
-	}
+		}
+	}));
 };
 var completeHandlers = /* @__PURE__ */ new Map();
 function registerComplete(name, fn) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gclass-anims",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.22.1",
   "description": "A Tailwind-style utility layer on top of GSAP. Framework-agnostic - works in vanilla JS, React, Vue, Svelte, or any bundler.",
   "type": "module",
   "main": "./dist/gclass.cjs",