cf-elements 1.0.5 → 1.0.7

package/cf-elements.js

@@ -1054,7 +1054,8 @@
    *   bg-style    - Background image style: cover, cover-center (default), parallax, w100, w100h100, no-repeat, repeat, repeat-x, repeat-y
    *   gradient    - CSS gradient
    *   overlay     - Overlay color (rgba)
-   *   text-color  - Default text color (inherited by child elements)
+   *   color       - Default text color (inherited by child elements)
+   *   text-color  - Alias for color
    *   link-color  - Default link color
    *   font        - Default font family (e.g., "Roboto") - inherited by child elements
    *   font-family - Alias for font
@@ -1070,7 +1071,8 @@
       const bgStyle = attr(this, "bg-style");
       const gradient = attr(this, "gradient");
       const overlay = attr(this, "overlay");
-      const textColor = attr(this, "text-color", "#334155");
+      // Support both "color" (simple) and "text-color" (explicit) for page text color
+      const textColor = attr(this, "color") || attr(this, "text-color", "#334155");
       const linkColor = attr(this, "link-color", "#3b82f6");
       // Support both "font" (simple) and "font-family" (explicit) attributes
       const font = attr(this, "font") || attr(this, "font-family");
@@ -1707,24 +1709,24 @@
       }
 
       // Build ID attribute for scroll-to and custom CSS targeting
-      // ID goes on col-inner so custom CSS targets the styled element, not the structural wrapper
+      // ID goes on ColContainer so pagetree parser captures it correctly
       const idAttr = elementId ? ` id="${elementId}"` : "";
       const showAttr = show ? ` data-show="${show}"` : "";
 
       // Only render col-inner if there's styling, otherwise just wrap content
       let innerHtml;
       if (hasColInnerStyling) {
-        innerHtml = `<div${idAttr} ${dataAttrs} style="${buildStyle(
+        innerHtml = `<div ${dataAttrs} style="${buildStyle(
           innerStyles
         )}">${overlayHtml}${contentHtml}</div>`;
       } else {
-        innerHtml = `<div${idAttr} class="col-inner" style="${buildStyle(
+        innerHtml = `<div class="col-inner" style="${buildStyle(
           innerStyles
         )}">${contentHtml}</div>`;
       }
 
       this.outerHTML = `
-        <div 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} style="${buildStyle(
         colStyles
       )}">
           ${innerHtml}
@@ -2179,7 +2181,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");
@@ -2275,7 +2277,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");
@@ -2369,7 +2371,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");
@@ -2528,7 +2530,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");
@@ -3551,7 +3553,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.5",
+  "version": "1.0.7",
   "description": "Zero-dependency markup library that generates ClickFunnels compatible HTML with inline styles",
   "main": "cf-elements.js",
   "browser": "cf-elements.js",