nodality 1.2.11 → 1.3.1

package/layout/meta-adder.js

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

package/layout/modal-2025.js

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

package/layout/morph.js

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

package/layout/multiswitcher.js

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

package/layout/nav-bar.js

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

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

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

package/layout/new-nav-bar.js

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

package/layout/polygon.js

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

package/layout/prerender-site.js

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

package/layout/prerender.js

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

package/layout/progress.js

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

package/layout/row.js

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

package/layout/scroll-video.js

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

package/layout/side-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.2.11
+ * nodality v1.3.1
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -52,8 +52,16 @@ class SideBar extends Animator{
         btn.style.background = "white";
         btn.style.opacity = 0.80;
         btn.style.border = "none";
-        btn.width = "1.5em";
-        btn.height = "1.5em";
+        // `btn.width = ...` sets a PROPERTY that <button> does not have, so
+        // this element had no size at all: 0x0 in the browser, impossible to
+        // hit and invisible to the checker's tap-target rule until it was
+        // measured. Style, and at least the 24px WCAG 2.2 minimum.
+        btn.style.width = "2rem";
+        btn.style.height = "2rem";
+        btn.style.minWidth = "24px";
+        btn.style.minHeight = "24px";
+        // A control with no text is a control with nothing to announce.
+        if (!btn.getAttribute("aria-label")) btn.setAttribute("aria-label", "Toggle navigation");
         btn.style.borderRadius = "50%";
         btn.style.zIndex = 2;
         

package/layout/side-nav-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.2.11
+ * nodality v1.3.1
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -140,8 +140,16 @@ class SideNav extends Animator {
 
     createToggleButton(color) {
         const button = document.createElement("button");
-        button.innerText = "☰";
+        // textContent, not innerText: jsdom has no innerText setter and the SSG
+        // prerenders through jsdom, so this glyph never reached a
+        // prerendered page — the toggle shipped as an empty button.
+        button.textContent = "☰";
         button.style.padding = "10px 20px";
+        // WCAG 2.2 AA asks for 24x24. These measured 40x20: wide enough,
+        // and two pixels short in the direction that matters on a phone.
+        button.style.minWidth = "24px";
+        button.style.minHeight = "24px";
+        button.style.lineHeight = "1";
         button.style.backgroundColor = "transparent";
         button.style.color = color ?? "#3498db";
         button.style.border = "none";
@@ -158,9 +166,14 @@ class SideNav extends Animator {
 
     createCloseButton(color) {
         const button = document.createElement("button");
-        button.innerText = "×";
+        button.textContent = "×";
         button.style.fontSize = "1.6rem";
         button.style.padding = "10px 20px";
+        // WCAG 2.2 AA asks for 24x24. These measured 40x20: wide enough,
+        // and two pixels short in the direction that matters on a phone.
+        button.style.minWidth = "24px";
+        button.style.minHeight = "24px";
+        button.style.lineHeight = "1";
         button.style.backgroundColor = "transparent";
         button.style.color = color ?? "black";
         button.style.border = "none";

package/layout/simple-bar.js

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

package/layout/slider-2025.js

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

package/layout/spacer.js

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

package/layout/stack.js

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

package/layout/svg.js

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

package/layout/switcher.js

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

package/layout/table.js

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

package/layout/text-field.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.2.11
+ * nodality v1.3.1
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -44,6 +44,21 @@ class TextField extends Animator {
 		this.res.setAttribute("type", obj.type ?? "text");
 		//@ placeholder: Placeholder text shown while the field is empty.
 		obj.placeholder && (this.res.placeholder = obj.placeholder);
+
+		// width:100% plus horizontal padding is 100% PLUS the padding under
+		// the default content-box, so a full-width field pushed the page 20px
+		// wider than the viewport — the overflow measured exactly the padding.
+		this.res.style.boxSizing = "border-box";
+
+		//@ label: Accessible name for the field.
+		// A placeholder is NOT an accessible name: it disappears the moment
+		// anyone types, and assistive technology is not required to announce
+		// it. Take a real label where there is one and fall back to the
+		// placeholder, which is better than nothing at all.
+		if (!this.res.getAttribute("aria-label")) {
+			const name = obj.label ?? obj.title ?? obj.placeholder;
+			name && this.res.setAttribute("aria-label", String(name));
+		}
 		//@ name: Form field name. What a submitted form actually SENDS.
 		//@ id: DOM id on the input.
 		//@ required: Marks the field required for native validation.

package/layout/text.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.2.11
+ * nodality v1.3.1
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -228,6 +228,27 @@ this.res.style.position = "absolute";
 			this.fluid(obj.fluid);
 		}
 
+		//@ tag: Heading level to render, independent of `size`/`fluid`.
+		// Size and semantics used to be the same decision: `size: "S5"`
+		// produced an <h5> and there was no way to have one without the
+		// other. That is fine for a person choosing both at once and wrong
+		// for a generated page, where the document outline is structure and
+		// the type scale is style. A card title wants to LOOK like a card
+		// title and SIT at h3, and before this it could not.
+		//
+		// Additive: absent `tag`, the element is exactly what size chose.
+		if (obj.tag && /^(h[1-6]|p)$/.test(String(obj.tag))) {
+			const want = String(obj.tag).toLowerCase();
+			if (this.res && this.res.tagName.toLowerCase() !== want) {
+				const swapped = document.createElement(want);
+				for (const a of Array.from(this.res.attributes)) {
+					swapped.setAttribute(a.name, a.value);
+				}
+				while (this.res.firstChild) swapped.appendChild(this.res.firstChild);
+				this.res = swapped;
+			}
+		}
+
 		obj.fluidc && (this.elCSS.push(`font-family: ${obj.font}; \n`));
 		obj.align && (this.res.style.textAlign = obj.align);
 		
@@ -348,6 +369,12 @@ addIcon(obj){
 	img.style.marginLeft = "10px";
 	img.style.height = "auto";
 	img.setAttribute("src", obj.url);
+	//@ alt: Description for an icon that carries meaning; omit for decoration.
+	// An <img> with no alt at all is an unlabelled image to a screen reader,
+	// which is what the nav's dropdown chevron was. Empty alt is the correct
+	// answer for decoration: it says "skip this", rather than leaving the
+	// reader to announce a URL.
+	img.setAttribute("alt", obj.alt === undefined ? "" : String(obj.alt));
 	this.res.appendChild(img);
 	return this;
 }

package/layout/ulist.js

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

package/layout/video.js

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

package/layout/wrap.js

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

package/layout/zoom-card.js

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

package/lib/agent-surface.js

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

package/lib/card-getter.js

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