nodality 1.0.215 → 1.0.216

package/dist/zoom-card.esm.js.LICENSE.txt

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

package/layout/animator.js

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

package/layout/audio.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -28,10 +28,6 @@ import {Animator} from "./animator.js";
 		return this;
 	}
 	
-	padding(value){
-		this.res.style.padding = `${value}px`;
-		return this;
-	}
 	
 	size(w, h){
 		this.w = w;

package/layout/audionew.js

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

package/layout/base-2.js

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

package/layout/base.js

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

package/layout/beta-desktop-bar.js

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

package/layout/beta-mobile-bar.js

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

package/layout/button.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -123,11 +123,13 @@ this.options = obj;
 		}
 
 		if (obj.padding){
-			this.padding(obj.padding);
+			this.deprecatedOption("padding", "pad");
+			this.pad([{a: obj.padding}]);
 		}
 
 		if (obj.margin){
-			 this.margin(obj.margin);
+			 this.deprecatedOption("margin", "mar");
+			 this.mar([{a: obj.margin}]);
 		}
 
 		// Plain `mar` / `pad` are handled implicitly by the
@@ -203,8 +205,8 @@ this.options = obj;
 		// Before S25 Ultra redesign!
 
 		/*.background("#1abc9c")
-        .padding("10px")
-        .margin("10px")
+        .pad([{a: "10px"}])
+        .mar([{a: "10px"}])
         .border("none")
         .borderRadius("7px")*/
 
@@ -327,32 +329,7 @@ this.options = obj;
         return this;
     }
 	
-	padding(L, T, R, B){
-		if (L && T && R && B){
-		this.res.style.paddingLeft = L;
-		this.res.style.paddingTop = T;
-		this.res.style.paddingRight = R;
-		this.res.style.paddingBottom = B;
-		} else {
-			this.res.style.padding = L;
-		}
-		
-		return this;
-	}
 	
-	margin(L, T, R, B){
-		
-		if (L && T && R && B){
-		this.res.style.marginLeft = L;
-		this.res.style.marginTop = T;
-		this.res.style.marginRight = R;
-		this.res.style.marginBottom = B;
-		} else {
-			this.res.style.margin = L;
-		}
-		
-		return this;
-	}
 	
      auto() {
 		const adj = () => {

package/layout/cards.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -29,7 +29,11 @@ class Card {
 	}
 	
 	background(color){
-		this.el.style.backgroundColor = color;
+				// The shorthand, not backgroundColor: it also resets background-image,
+		// so setting a flat colour after a gradient clears the gradient. The
+		// longhand left it in place, so the same call behaved differently
+		// depending on which component you happened to hold.
+		this.el.style.background = color;
 		return this;
 	}
 	

package/layout/center.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -85,20 +85,6 @@ return this;
 	}
 	
 		
-	margin(L, T, R, B) {
-		if (L || T || R || B){ // CAUGHT MYSELF
-		this.res.style.marginLeft = L;
-		this.res.style.marginTop = T;
-		this.res.style.marginRight = R;
-		this.res.style.marginBottom = B;
-		} 
-		
-		if (!T && !R && !B){
-					this.res.style.margin = L;	
-		}
-		
-		return this;
-	}
 	
     
     itemWidth(w){
@@ -111,20 +97,6 @@ return this;
 	}
 	
 		
-	margin(L, T, R, B) {
-		if (L || T || R || B){ // CAUGHT MYSELF
-		this.res.style.marginLeft = L;
-		this.res.style.marginTop = T;
-		this.res.style.marginRight = R;
-		this.res.style.marginBottom = B;
-		} 
-		
-		if (!T && !R && !B){
-					this.res.style.margin = L;	
-		}
-		
-		return this;
-	}
 	
 	/*arrayPadding(arr, value) {
 		if (arr.includes("left")){

package/layout/checkbox.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -170,10 +170,6 @@ obj.resmar && this.resmar(obj.resmar);
     return [`new Checkbox().set({\n    ${entries}\n})`];
     }
 
-    margin(amount) {
-        this.el.style.margin = amount;
-        return this;
-    }
 
     render(div) {
         if (div) {

package/layout/circle.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -51,7 +51,11 @@ class Circle extends Animator {
   // --- Circle-specific API ---
   diameter(px) { this.res.style.width = this.res.style.height = typeof px === "number" ? px + "px" : px; this.res.style.borderRadius = "50%"; return this; }
   size(w, h = w) { this.res.style.width = typeof w === "number" ? w + "px" : w; this.res.style.height = typeof h === "number" ? h + "px" : h; this.res.style.borderRadius = "50%"; return this; }
-  color(c) { this.res.style.backgroundColor = c; return this; }
+  // `color` is the text colour on every component (it is a styleMap key on
+  // Animator). It used to set backgroundColor here, which made `color:` and
+  // `background:` do the same thing and left no way to set text colour.
+  color(c) { this.res.style.color = c; return this; }
+  background(c) { this.res.style.background = c; return this; }
   border(spec) { this.res.style.border = typeof spec === "string" ? spec : `${spec?.width || 1}px solid ${spec?.color || "black"}`; return this; }
   radius(r) { this.res.style.borderRadius = typeof r === "number" ? r + "px" : r; return this; }
 

package/layout/code.js

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

package/layout/container.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -771,8 +771,14 @@ code = `${pad}new Wrapper()`;
 		this.res.style.height = `${h}`;
 		return this;
 	}
+	/**
+	 * Width and height. Renamed from size(), which collided with the `size`
+	 * OPTION — on any component that calls commonMethods, `size:` is the
+	 * fluid type scale (S1…S6), so `.size()` meaning width read as the same
+	 * word doing two unrelated jobs in one call chain.
+	 */
 	
-	size(w, h){
+	dimensions(w, h) {
 		this.w = w;
 		this.h = h;
 		
@@ -792,6 +798,13 @@ code = `${pad}new Wrapper()`;
 		return this;
 	}
 
+	//@deprecated size: on this component `size()` set width and height, which collided with the `size` option (fluid type scale). Use `dimensions(w, h)`.
+	size(w, h) {
+		this.deprecatedOption("size() on this component", "dimensions(w, h)");
+		return this.dimensions(w, h);
+	}
+
+
 	background(color) {
 		this.res.style.background = color;
 		return this;
@@ -803,21 +816,7 @@ code = `${pad}new Wrapper()`;
 		return this;
 	}
 	
-	padding(L, T, R, B){
-		this.res.style.paddingLeft = L;
-		this.res.style.paddingTop = T;
-		this.res.style.paddingRight = R;
-		this.res.style.paddingBottom = B;
-		return this;
-	}
 	
-	margin(L, T, R, B){
-		this.res.style.marginLeft = L;
-		this.res.style.marginTop = T;
-		this.res.style.marginRight = R;
-		this.res.style.marginBottom = B;
-		return this;
-	}
     
     itemWidth(w){
 		for (var i = 0; i < this.res.childNodes.length; i++){

package/layout/dropdown-2025.js

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

package/layout/external-stylesheet.js

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

package/layout/flex-card.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -159,7 +159,11 @@ this.options = obj;
     }
 	
 	background(color){
-		this.res.style.backgroundColor = color;
+				// The shorthand, not backgroundColor: it also resets background-image,
+		// so setting a flat colour after a gradient clears the gradient. The
+		// longhand left it in place, so the same call behaved differently
+		// depending on which component you happened to hold.
+		this.res.style.background = color;
 		return this;
 	}
 	
@@ -168,10 +172,6 @@ this.options = obj;
 		return this;
 	}
 	
-	padding(pad){
-		this.res.style.padding = `${pad}px`;
-		return this;
-	}
 	
 	items(els){
 		for (var i = 0; i < els.length; i++){
@@ -185,11 +185,21 @@ this.options = obj;
 	this.res.style.boxShadow = "1px 1px 20px rgba(0, 0, 0, 0.60)";
 	return this;
 	}
-	
-	round(value){
-	this.res.style.borderRadius = `${value}px`;
-	return this;
+	/**
+	 * Corner radius. A number is pixels; a string is passed through, so
+	 * `radius("50%")` and `radius(12)` both work.
+	 */
+	radius(v) {
+		this.res.style.borderRadius = typeof v === "number" ? `${v}px` : v;
+		return this;
+	}
+
+	//@deprecated round: superseded by `radius()`, which is the same thing under the name the option already uses.
+	round(v) {
+		this.deprecatedOption("round()", "radius()");
+		return this.radius(v);
 	}
+
 	
 	render(div){
 		if (div){

package/layout/flex-grid.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -204,10 +204,6 @@ class FlexGrid extends Animator {
 	}
 	
 	
-	padding(value){
-		this.res.style.padding = `${value}px`;
-		return this;
-	}
 	
 	
 	

package/layout/flex-row.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -65,7 +65,7 @@ class FlexRow extends Animator {
 
 		//this.code.push(`\n .set({`);
 		if (options.padding){
-			this.padding(options.padding);
+			this.pad([{a: options.padding}]);
 		}
 
 	//alert(options.opacity);
@@ -621,10 +621,6 @@ let stringified = JSON.stringify(options.borderObj);
 
 
 
-	padding(vals){
-		this.res.style.padding = vals;
-		return this;
-	}
 	
     
     toColumn(){

package/layout/footer.js

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

package/layout/form-components/custom.js

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

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

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

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

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

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

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

package/layout/form-components/form.js

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

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

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

package/layout/form-components/picker.js

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

package/layout/form-components/radio.js

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

package/layout/form-components/radiogroup.js

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

package/layout/form-components/range.js

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

package/layout/free.js

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

package/layout/grid-switcher.js

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

package/layout/grid.js

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

package/layout/group.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -69,14 +69,14 @@ class Group extends Animator {
 	}
 
 	background(value){
-		this.res.style.backgroundColor = value;
+				// The shorthand, not backgroundColor: it also resets background-image,
+		// so setting a flat colour after a gradient clears the gradient. The
+		// longhand left it in place, so the same call behaved differently
+		// depending on which component you happened to hold.
+		this.res.style.background = value;
 		return this;
 	}	
 	
-	padding(value){
-		this.res.style.padding = `${value}px`;
-		return this;
-	}
 	
 
 

package/layout/horizontal-scroller.js

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

package/layout/image.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.215
+ * nodality v1.0.216
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -840,34 +840,16 @@ if (mqa.matches){
 		return this;
 	}
 	
-	margin(L, T, R, B) {
-		if (L || T || R || B){ // CAUGHT MYSELF
-		this.res.style.marginLeft = L;
-		this.res.style.marginTop = T;
-		this.res.style.marginRight = R;
-		this.res.style.marginBottom = B;
-		} 
-		
-		if (!T && !R && !B){
-			
-			if (T !== 0 || R !== 0 || B !== 0){
-				//	alert("j")
-		this.res.style.margin = L;	
-			}
-		
-			
-		}
-		
-		return this;
-	}
 	
 	
-	padding(el){
-		this.res.style.padding = el;
-		return this;
-	}
+	/**
+	 * Width and height. Renamed from size(), which collided with the `size`
+	 * OPTION — on any component that calls commonMethods, `size:` is the
+	 * fluid type scale (S1…S6), so `.size()` meaning width read as the same
+	 * word doing two unrelated jobs in one call chain.
+	 */
 	
-	size(w, h) {
+	dimensions(w, h) {
 		if (w && h) {
 			this.res.style.width = w;
 			this.res.style.height = h;
@@ -879,6 +861,13 @@ if (mqa.matches){
 		return this;
 	}
 
+	//@deprecated size: on this component `size()` set width and height, which collided with the `size` option (fluid type scale). Use `dimensions(w, h)`.
+	size(w, h) {
+		this.deprecatedOption("size() on this component", "dimensions(w, h)");
+		return this.dimensions(w, h);
+	}
+
+
     
     
     frame(obj) {

package/layout/index.js

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

package/layout/label.js

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