cf-elements 1.0.7 → 1.0.8

package/cf-elements.js

@@ -1201,6 +1201,7 @@
       const borderColor = attr(this, "border-color");
       const show = attr(this, "show");
       const brandAsset = attr(this, "brand-asset");
+      const color = attr(this, "color");
 
       // Video background attributes
       const videoBg = attr(this, "video-bg");
@@ -1238,6 +1239,7 @@
         "padding-right": px,
         "box-sizing": "border-box",
       };
+      if (color) styles["color"] = color;
 
       // Only apply bg if not using paint (styleguide handles paint backgrounds)
       if (!paint) {
@@ -1277,6 +1279,7 @@
 
       let dataAttrs = 'data-type="SectionContainer/V1"';
       dataAttrs += ` data-container="${container}"`;
+      if (color) dataAttrs += ` data-color="${color}"`;
       if (show) dataAttrs += ` data-show="${show}"`;
       if (bgStyleClass) dataAttrs += ` data-bg-style="${bgStyleClass}"`;
       if (overlay) dataAttrs += ` data-overlay="${overlay}"`;
@@ -1383,6 +1386,7 @@
       const borderColor = attr(this, "border-color");
       const brandAsset = attr(this, "brand-asset");
       const show = attr(this, "show");
+      const color = attr(this, "color");
 
       // If brand-asset is specified, try to get the asset URL from brand assets manager
       if (brandAsset && brandAssetsManager.hasAsset(brandAsset)) {
@@ -1413,6 +1417,7 @@
         "box-sizing": "border-box",
         "margin-top": mt || "0",
       };
+      if (color) styles["color"] = color;
 
       // Only apply bg if not using paint (styleguide handles paint backgrounds)
       if (!paint) {
@@ -1457,6 +1462,7 @@
 
       let dataAttrs = 'data-type="RowContainer/V1"';
       dataAttrs += ` data-width="${width}"`;
+      if (color) dataAttrs += ` data-color="${color}"`;
       if (show) dataAttrs += ` data-show="${show}"`;
       if (bgStyleClass) dataAttrs += ` data-bg-style="${bgStyleClass}"`;
       if (overlay) dataAttrs += ` data-overlay="${overlay}"`;
@@ -1556,6 +1562,7 @@
       const borderStyle = attr(this, "border-style", "solid");
       const borderColor = attr(this, "border-color");
       const brandAsset = attr(this, "brand-asset");
+      const color = attr(this, "color");
 
       // If brand-asset is specified, try to get the asset URL from brand assets manager
       if (brandAsset && brandAssetsManager.hasAsset(brandAsset)) {
@@ -1609,6 +1616,7 @@
         "text-align": align,
         "box-sizing": "border-box",
       };
+      if (color) innerStyles["color"] = color;
 
       if (pt) innerStyles["padding-top"] = pt;
       if (pb) innerStyles["padding-bottom"] = pb;
@@ -1712,6 +1720,7 @@
       // ID goes on ColContainer so pagetree parser captures it correctly
       const idAttr = elementId ? ` id="${elementId}"` : "";
       const showAttr = show ? ` data-show="${show}"` : "";
+      const colorAttr = color ? ` data-color="${color}"` : "";
 
       // Only render col-inner if there's styling, otherwise just wrap content
       let innerHtml;
@@ -1726,7 +1735,7 @@
       }
 
       this.outerHTML = `
-        <div${idAttr} data-type="ColContainer/V1" data-span="${span}" data-col-direction="${align}"${showAttr} style="${buildStyle(
+        <div${idAttr} data-type="ColContainer/V1" data-span="${span}" data-col-direction="${align}"${showAttr}${colorAttr} style="${buildStyle(
         colStyles
       )}">
           ${innerHtml}
@@ -1903,6 +1912,7 @@
       const width = attr(this, "width");
       const height = attr(this, "height");
       const show = attr(this, "show");
+      const color = attr(this, "color");
 
       // Check if shadow/border/corner are styleguide references
       const isShadowStyleguide =
@@ -2008,12 +2018,14 @@
         styles["border-style"] = borderStyle;
       }
       if (borderColor) styles["border-color"] = borderColor;
+      if (color) styles["color"] = color;
       // Only set width if explicitly provided - let flex shrink to fit content by default
       if (width) styles["width"] = width;
       if (height) styles["height"] = height;
 
       // Data attributes - include all flex properties for pagetree parser
       let dataAttrs = 'data-type="FlexContainer/V1"';
+      if (color) dataAttrs += ` data-color="${color}"`;
       if (show) dataAttrs += ` data-show="${show}"`;
       dataAttrs += ` data-direction="${direction}"`;
       dataAttrs += ` data-justify="${justify}"`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cf-elements",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Zero-dependency markup library that generates ClickFunnels compatible HTML with inline styles",
   "main": "cf-elements.js",
   "browser": "cf-elements.js",
@@ -22,10 +22,10 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/barnumpt/cf-elements.git"
+    "url": "git+https://github.com/PrimeMoverHQ/BarnumPT-Builder.git"
   },
-  "homepage": "https://barnumpt.app/docs/funnelwind",
+  "homepage": "https://github.com/PrimeMoverHQ/BarnumPT-Builder",
   "bugs": {
-    "url": "https://github.com/barnumpt/cf-elements/issues"
+    "url": "https://github.com/PrimeMoverHQ/BarnumPT-Builder/issues"
   }
 }