cf-elements 1.0.6 → 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}"`;
@@ -2181,7 +2193,7 @@
   class CFHeadline extends CFElement {
     render() {
       const elementId = attr(this, "element-id");
-      const size = attr(this, "size", "48px");
+      const size = attr(this, "font-size") || attr(this, "size", "48px");
       const weight = attr(this, "weight", "bold");
       const font = attr(this, "font");
       const color = attr(this, "color");
@@ -2277,7 +2289,7 @@
   class CFSubheadline extends CFElement {
     render() {
       const elementId = attr(this, "element-id");
-      const size = attr(this, "size", "24px");
+      const size = attr(this, "font-size") || attr(this, "size", "24px");
       const weight = attr(this, "weight", "normal");
       const font = attr(this, "font");
       const color = attr(this, "color");
@@ -2371,7 +2383,7 @@
   class CFParagraph extends CFElement {
     render() {
       const elementId = attr(this, "element-id");
-      const size = attr(this, "size", "16px");
+      const size = attr(this, "font-size") || attr(this, "size", "16px");
       const weight = attr(this, "weight", "normal");
       const font = attr(this, "font");
       const color = attr(this, "color");
@@ -2530,7 +2542,7 @@
       // Always read attribute values - we need them for data attributes even if using styleguide
       const bg = attr(this, "bg", "#3b82f6");
       const color = attr(this, "color", "#ffffff");
-      const size = attr(this, "size", "20px");
+      const size = attr(this, "font-size") || attr(this, "size", "20px");
       const weight = attr(this, "weight", "bold");
       const px = attr(this, "px", "32px");
       const py = attr(this, "py", "16px");
@@ -3553,7 +3565,7 @@
       const textColor = attr(this, "text-color"); // No default - allows paint inheritance
       const hasExplicitTextColor = this.hasAttribute("text-color");
       const iconSize = attr(this, "icon-size", "16px");
-      const size = attr(this, "size", "m"); // Size preset (s, m, l, xl) - uses paragraph scale
+      const size = attr(this, "font-size") || attr(this, "size", "16px"); // Direct px value or preset fallback
       const gap = attr(this, "gap", "12px");
       const itemGap = attr(this, "item-gap", "8px");
       const align = attr(this, "align", "left");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cf-elements",
-  "version": "1.0.6",
+  "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"
   }
 }