nodality 1.3.12 → 1.3.14

package/layout/beta-desktop-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -54,6 +54,9 @@ class /*Beta*/DesktopBar extends Animator { // add set method for background col
         if (obj.hamburgerColour) {
             this.hamburgerColour = obj.hamburgerColour;
         }
+        // Last, so a page's values replace the defaults setStyles() wrote.
+        obj.color && (this.res.style.color = obj.color);
+        obj.keySet && this.keySet(obj.keySet);
         return this;
     }
 

package/layout/beta-mobile-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -39,15 +39,18 @@ let repl = this.removeQuotesFromFirstWord(JSON.stringify(this.obj));
 
 // 23:38:35 Yes!!! 23/04/2025
 // Alway construct neste in this way
-let codeObj = `
-background: "${this.obj.background}",
-brand: ${this.obj.brand.toCode()},
-mar: ${JSON.stringify(this.obj.mar)},
-pad: ${JSON.stringify(this.obj.pad)},
-resmar: ${JSON.stringify(this.obj.resmar)},
-respad: ${JSON.stringify(this.obj.respad)},
-radius: ${JSON.stringify(this.obj.radius)},
-`;
+// Des renders by running this code, so an option left out of it never
+// reaches the page — hamburgerColour was read by set() and dropped here.
+// Every option set() reads is emitted; brand only when there is one (it
+// threw on a bar without a brand).
+const SERIALISED = ["background", "color", "mar", "pad", "resmar", "respad", "radius", "maxHeight", "hamburgerColour", "keySet", "menuLabel", "menuId"];
+let codeObj = SERIALISED
+    .filter((k) => this.obj[k] !== undefined)
+    .map((k) => `${k}: ${JSON.stringify(this.obj[k])},`)
+    .join("\n");
+if (this.obj.brand && typeof this.obj.brand.toCode === "function") {
+    codeObj += `\nbrand: ${[].concat(this.obj.brand.toCode()).join("")},`;
+}
 
         return `new MobileBar().set({${codeObj}}).add([
                          ${items.join(",")}
@@ -92,9 +95,12 @@ radius: ${JSON.stringify(this.obj.radius)},
           this.hamburgerColour = obj.hamburgerColour;
       }
 
-   
-
       this.setStyles(obj);
+
+      // After setStyles, so a page's values replace the defaults.
+      obj.color && (this.navbar.style.color = obj.color);
+      obj.pad && this.pad(obj.pad);
+      obj.keySet && this.keySet(obj.keySet);
         return this;
     }
 
@@ -143,7 +149,6 @@ console.log(newTextInstance.render());*/
 //} 
 
 if (obj.brand && typeof newTextInstance.render === "function") {
-    console.log("Appending brand:", newTextInstance.render());
     this.brand.appendChild(newTextInstance.render());
 } else {
 }
@@ -156,9 +161,25 @@ if (obj.brand && typeof newTextInstance.render === "function") {
         this.toggleButton = document.createElement('button');
         this.toggleButton.classList.add('navbar-toggle');
         this.toggleButton.innerHTML = '☰'; // Hamburger icon
+        // A glyph is not a name: without these a screen reader announced the
+        // button as "☰" and could not tell whether the menu was open.
+        this.toggleButton.setAttribute('type', 'button');
+        this.toggleButton.setAttribute('aria-label', obj.menuLabel ?? 'Menu');
+        this.toggleButton.setAttribute('aria-expanded', 'false');
 
         this.navContent = document.createElement('div');
         this.navContent.classList.add('navbar-content');
+        if (obj.menuId) {
+            this.navContent.setAttribute('id', obj.menuId);
+            this.toggleButton.setAttribute('aria-controls', obj.menuId);
+        }
+        // Following a link closes the menu. On a one-page site the links are
+        // anchors, and a menu left open covered the section it had jumped to.
+        this.navContent.addEventListener('click', (e) => {
+            if (this.isMobileNavOpen && e.target && e.target.closest && e.target.closest('a')) {
+                this.toggleMobileNav();
+            }
+        });
 
         this.navbarHeader.appendChild(this.brand);
         this.navbarHeader.appendChild(this.toggleButton);
@@ -213,6 +234,7 @@ if (obj.brand && typeof newTextInstance.render === "function") {
 
     toggleMobileNav() {
         this.isMobileNavOpen = !this.isMobileNavOpen;
+        this.toggleButton.setAttribute('aria-expanded', String(this.isMobileNavOpen));
         this.navContent.style.display = this.isMobileNavOpen ? 'flex' : 'none';
         if (this.isMobileNavOpen) {
             this.navContent.style.flexDirection = 'column';

package/layout/button.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/center.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/checkbox.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/circle.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/code.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/container.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/dropdown-2025.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/flex-card.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/flex-grid.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/flex-row.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/custom.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/data-list.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/floating-input.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/form-all.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/form.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/image-picker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/picker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/radio.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/radiogroup.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/form-components/range.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/free.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/grid-overlay.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/grid-switcher.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/grid.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/horizontal-scroller.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/image.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -272,6 +272,9 @@ let obj = options;
 	options.clipPath && this.clipPath(options.clipPath);
 	options.clipPath && (stra += `clipPath: "${options.clipPath}", \n`);
 
+	//@ img.reveal {object}: Reveal the image through a mask as it scrolls into view: {mask: "square", size: 0.3, duration: "1.2s", easing, zoom: 1.12, offset: 0.2, delay: "0s", once: true}. It starts as a centred square `size` × its shorter side and opens to the full frame once the square rises `offset` of the viewport height above the bottom edge. Owns clip-path and scale while it runs; reduced-motion visitors, and pages with no IntersectionObserver (the prerender), get the image unmasked.
+	options.reveal && this.reveal(options.reveal);
+
 
 // console.log("261");
 // console.warn(obj);
@@ -674,6 +677,94 @@ if (mqa.matches){
 		return this;
 	}
 
+	/**
+	 * Scroll reveal through a mask. The masked state is applied only where it
+	 * can be undone: with no window, no IntersectionObserver (the jsdom
+	 * prerender) or a reduced-motion preference the image stays unmasked,
+	 * because a mask that never opens hides the content for good.
+	 *
+	 * The square is a true square: clip-path's inset() percentages resolve
+	 * per axis, so on a portrait or wide frame a percentage inset draws a
+	 * rectangle. The insets are measured in px instead and re-measured when
+	 * the frame resizes; the percentage form is only the pre-layout guess.
+	 *
+	 * The zoom uses the `scale` property, not `transform`, so it composes with
+	 * any transform the page sets instead of overwriting it.
+	 */
+	reveal(opts) {
+		const el = this.res;
+		const o = opts && typeof opts === "object" ? opts : {};
+		const mask = o.mask ?? "square";
+		if (mask !== "square") {
+			console.warn(`nodality: img.reveal mask "${mask}" is not supported — use "square".`);
+			return this;
+		}
+		if (typeof window === "undefined" || typeof window.IntersectionObserver !== "function") return this;
+		const reduced = typeof window.matchMedia === "function" &&
+			window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		if (reduced) return this;
+
+		const size = Math.min(1, Math.max(0, Number(o.size ?? 0.3)));
+		const duration = o.duration ?? "1.2s";
+		const easing = o.easing ?? "cubic-bezier(0.76, 0, 0.24, 1)";
+		const delay = o.delay ?? "0s";
+		const zoom = Number(o.zoom ?? 1.12);
+		const once = o.once !== false;
+		const transition = ["clip-path", "scale"].map((p) => `${p} ${duration} ${easing} ${delay}`).join(", ");
+
+		let open = false;
+		const closed = () => {
+			const w = el.clientWidth, h = el.clientHeight;
+			if (!w || !h) return `inset(${(1 - size) * 50}% ${(1 - size) * 50}%)`;
+			const s = Math.min(w, h) * size;
+			return `inset(${(h - s) / 2}px ${(w - s) / 2}px)`;
+		};
+		// Re-measuring a closed mask must not animate: the frame's first
+		// layout would otherwise play as a 1.2s morph from the guess.
+		const settle = () => {
+			el.style.transition = "none";
+			el.style.clipPath = closed();
+			void el.offsetWidth;
+			el.style.transition = transition;
+		};
+
+		el.style.clipPath = closed();
+		el.style.scale = String(zoom);
+		el.style.willChange = "clip-path, scale";
+		el.style.transition = transition;
+
+		const ro = typeof window.ResizeObserver === "function"
+			? new window.ResizeObserver(() => { if (!open) settle(); })
+			: null;
+		ro && ro.observe(el);
+
+		// Triggered by a LINE, not an area ratio: the browser clips the target
+		// by its own clip-path when it measures the intersection, so a closed
+		// square never shows more than its own share of the frame (about 8% at
+		// size 0.3) and a `threshold` of 0.35 would never be reached. Instead
+		// the square opens once it rises `offset` of the viewport above the
+		// bottom edge.
+		const offset = Math.min(0.9, Math.max(0, Number(o.offset ?? 0.2)));
+		const io = new window.IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting && !open) {
+					open = true;
+					el.style.clipPath = "inset(0px 0px)";
+					el.style.scale = "1";
+					if (once) { io.disconnect(); ro && ro.disconnect(); }
+				} else if (!entry.isIntersecting && open && !once) {
+					open = false;
+					el.style.clipPath = closed();
+					el.style.scale = String(zoom);
+				}
+			}
+		}, { threshold: 0, rootMargin: `0px 0px ${-offset * 100}% 0px` });
+		io.observe(el);
+
+		el.addEventListener("transitionend", () => { if (open && once) el.style.willChange = "auto"; });
+		return this;
+	}
+
 	clipPath(pathData) {
         // Create a unique ID for the clip path
        

package/layout/index.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/link.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/list.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/meta-adder.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/modal-2025.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/morph.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/multiswitcher.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -117,8 +117,21 @@ str += `{ at: "${this.options.breakpoints[i].at}", view: ${this.options.breakpoi
 
   applyView() {
 
+    // No matchMedia at all (a bare jsdom — the prerenderer installs its own,
+    // other hosts may not): show the widest view rather than an empty box.
+    // The browser re-runs this with real queries when it rebuilds the page.
+    if (typeof window.matchMedia !== "function") {
+      const widest = this.breakpoints.reduce((a, b) => (parseFloat(b.at) > parseFloat(a.at) ? b : a), this.breakpoints[0]);
+      if (widest && this.currentView !== widest.view.render()) {
+        this.internalDiv.innerHTML = "";
+        this.internalDiv.appendChild(widest.view.render());
+        this.currentView = widest.view.render();
+      }
+      return;
+    }
+
 // check if we are in range
-    
+
     const width = window.innerWidth;
 
     let rstart = this.breakpoints.map(el => el.at);

package/layout/nav-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/nav-factor/custom-div.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/new-nav-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/polygon.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/prerender-site.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/prerender.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -263,14 +263,19 @@ export async function prerender({
   window.matchMedia = (query) => {
     let matches = false;
     if (typeof query === "string" && query.includes("width")) {
-      // Parse a single "(min-width: 768px)" or "(max-width: 768px)"
-      // clause. Multi-clause queries (commas, `and`) fall through to
-      // false — Nodality's breakpoint code doesn't emit those.
-      const min = query.match(/min-width:\s*(\d+)\s*px/i);
-      const max = query.match(/max-width:\s*(\d+)\s*px/i);
-      if (min && !max) matches = vw >= Number(min[1]);
-      else if (max && !min) matches = vw <= Number(max[1]);
-      // Both present (range) or other → leave as false.
+      // Every min-width / max-width clause must hold, so a range —
+      // "(min-width: 0px) and (max-width: 1199px)" — resolves too. It
+      // used to fall through to false on the claim that Nodality never
+      // emits one, but the Switcher behind every `nav` does: no range
+      // matched during SSG, and every nav shipped as an empty box.
+      // Comma lists (OR) are still answered false.
+      if (!query.includes(",")) {
+        const min = query.match(/min-width:\s*([\d.]+)\s*px/i);
+        const max = query.match(/max-width:\s*([\d.]+)\s*px/i);
+        if (min || max) {
+          matches = (!min || vw >= Number(min[1])) && (!max || vw <= Number(max[1]));
+        }
+      }
     }
     return {
       matches,

package/layout/progress.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/row.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/scroll-video.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/side-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/side-nav-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/simple-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/slider-2025.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/spacer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */

package/layout/stack.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.12
+ * nodality v1.3.14
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */