nodality 1.3.23 → 1.3.24

package/lib/stacker.js

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

package/lib/suggest.js

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

package/lib/theme.js

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

package/lib/transform-anim.js

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

package/lib/transition.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.3.23
+ * nodality v1.3.24
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -74,7 +74,9 @@ function progressTimeline(pipeline, opts = {}) {
 	let raf = 0;
 	let from = pipeline.progress || 0;
 	let to = from;
-	let startedAt = 0;
+	let startedAt = 0;         // 0 until the journey's first frame
+	let lastAt = 0;
+	let elapsed = 0;           // ms of the journey shown so far
 	let span = 0;              // ms this particular journey should take
 	let running = false;
 	let pending = null;        // resolve of the in-flight to()
@@ -89,9 +91,19 @@ function progressTimeline(pipeline, opts = {}) {
 		if (done) done(pipeline.progress);
 	};
 
+	// The clock starts at the journey's FIRST FRAME, not at to(), and one
+	// late frame advances it by at most a sixth of the journey. It used to
+	// be wall time since to(): building both views and compiling the
+	// shader can take longer than the whole transition on a busy machine,
+	// so the first frame already computed t = 1 — the page arrived without
+	// any motion, which is the thing a morph exists to show. Now a slow
+	// device gets a slower transition rather than none.
 	const frame = () => {
 		if (destroyed) return;
-		const elapsed = now() - startedAt;
+		const t = now();
+		if (!startedAt) { startedAt = t; lastAt = t; }
+		elapsed += Math.min(t - lastAt, Math.max(span / 6, 50));
+		lastAt = t;
 		const x = span <= 0 ? 1 : Math.min(1, elapsed / span);
 		pipeline.setProgress(from + (to - from) * easing(x));
 		if (x >= 1) return settle();
@@ -136,7 +148,8 @@ function progressTimeline(pipeline, opts = {}) {
 			if (dist < 1e-4) { pipeline.setProgress(dest); return Promise.resolve(dest); }
 			// Distance-scaled: a correction from 0.9 to 1 is brief.
 			span = (o.duration != null ? o.duration : duration) * dist;
-			startedAt = now();
+			startedAt = 0;
+			elapsed = 0;
 			running = true;
 			raf = requestAnimationFrame(frame);
 			return new Promise((res) => { pending = res; });

package/lib/validate-nodes.js

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

package/lib/webmcp-adapter.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.3.23",
+  "version": "1.3.24",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/schema.json

@@ -172,6 +172,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -781,6 +786,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -1390,6 +1400,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -1999,6 +2014,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -2608,6 +2628,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -3217,6 +3242,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -3826,6 +3856,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -4420,6 +4455,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -5000,6 +5040,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -5654,6 +5699,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -6561,6 +6611,12 @@
           "via": "mapper",
           "description": "The name at the start of the bar: a string, or an element spec ({type: \"p\", text, keySet, …}) for full control of its type."
         },
+        {
+          "name": "brandLink",
+          "via": "mapper",
+          "unit": "url",
+          "description": "Where the brand leads, e.g. \"/\". Without it the brand is not a link."
+        },
         {
           "name": "breakWord",
           "via": "component",
@@ -6623,6 +6679,11 @@
           "unit": "color",
           "description": "Colour of the links, a string brand and, unless hamburgerColour is given, the menu button."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -8306,6 +8367,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -8980,6 +9046,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -9607,6 +9678,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -10039,6 +10115,12 @@
           "unit": "url",
           "description": "Image shown before the first frame decodes. Give one on any autoplaying clip: it is what holds the layout still and what reduced-motion visitors see instead of the video."
         },
+        {
+          "name": "posterBehind",
+          "via": "component",
+          "unit": "bool",
+          "description": "Also paint the poster behind the frame, sized like it (objectFit). On by default whenever there is a poster; pass false for a clip with transparency, which would show it through."
+        },
         {
           "name": "preload",
           "via": "component",
@@ -10277,6 +10359,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -11283,6 +11370,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -12089,6 +12181,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -12941,6 +13038,10 @@
           "name": "brand",
           "via": "mapper"
         },
+        {
+          "name": "brandLink",
+          "via": "mapper"
+        },
         {
           "name": "breakWord",
           "via": "component",
@@ -13006,6 +13107,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -13914,6 +14020,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -14333,6 +14444,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -14758,6 +14874,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -15177,6 +15298,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",
@@ -15596,6 +15722,11 @@
           "unit": "color",
           "description": "Text colour — any CSS colour."
         },
+        {
+          "name": "colorScheme",
+          "via": "component",
+          "description": "CSS color-scheme, e.g. \"light\": the scheme the browser draws this element's native parts in (form controls, the option list of a select) and its descendants'. A page that declares `<meta name=\"color-scheme\" content=\"light dark\">` to keep Chrome's auto dark mode off still gets dark controls for visitors in dark mode; colorScheme \"light\" on its sections keeps them light."
+        },
         {
           "name": "cols",
           "via": "component",