efficient-web-builder 18.1.0 → 18.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 18.2.0 - 2026-10-17
+
+**A block inside a Box or a row takes its padding and its Border ON ITS OWN ROOT, never in a wrapper** (GG 2026-10-16/17; agreed with the US-websites window). A minor: no stored key changes, and every stored page draws what it drew.
+
+### Fixed
+
+- **A Box nested in a row kept its place.** The padding pass wrapped a block in `div.sf-section-pad`, and the Border pass in a `display: contents` carrier; either one became the row's child in place of the Box, so the row's share classes (`[&>*]:…`) stopped reaching it. On the Hartes homepages the name Box with `sectionPaddingLeft: 20` and a Border dropped the paragraph beside it out of the row (measured live 2026-10-17). Now the Box draws both on its own root.
+- **A padded Text or Heading inside a Gap-only Box no longer gets its py back** (`.sf-box-gap-only > *` reaches the block itself, not a wrapper).
+
+### Changed for hosts
+
+- `PAD_ON_ROOT` (`lib/puck/passes/section-padding`): Box (`Flex`), Text and Heading are never wrapped by the padding or the Border pass. `SiteGutterFrame` takes `pad` and `border`: where it FILLS its parent it draws them on its root — top/bottom as stored + its frame py (Box and Heading 24, Text 16: today's total, phone values too), the Border with the class `sf-section-border-self` and the `--sf-border-*` properties; where it draws the site gutter (a child of the page) it keeps the padding wrapper and the Border carrier outside it, exactly as before.
+- New helpers in `lib/content/section-padding`: `padValuesOf`, `wrapperPadAttrs`, `rootPadAttrs`. New `SECTION_BORDER_SELF_CLASS` in `lib/content/borders`. **The host's stylesheet must draw `.sf-section-border-self` with the same rule as `.sf-section-border > *`** (efficient-storefront-blocks, next to its 0.34.0 rule).
+
+### Guards
+
+- New `scripts/test-pad-on-root.tsx` (16): no wrapper for a nested Box / Text / Heading; the Box root's left 20, top 20 → 44, phone 8 → 32; Text +16, Heading +24; nothing set = the root unchanged; a top-level block keeps the wrapper; a nested Box's Border on its root, the carrier only at the top. Failed before the change.
+- `test-section-side-padding`, `test-block-side-padding` and `test-section-border` render the real blocks (or a section the pass still wraps) for their wrapper checks.
+
 ## 18.1.0 - 2026-10-17
 
 The first 18 release on npm: 18.0.0 was never published, so this version carries its changes too (the section below). Hosts move from 17.x straight to 18.1.0.

package/dist/components/BlockFrame.d.ts

@@ -1,8 +1,13 @@
 import type { CSSProperties, ReactNode } from "react";
+import type { PadValues } from "../lib/content/section-padding.js";
 interface BlockFrameProps {
     contained: boolean;
     className?: string;
     style?: CSSProperties;
+    pad?: {
+        values: PadValues;
+        frame: number;
+    };
     children: ReactNode;
 }
 export declare const FRAME_BASE = "mx-auto w-full max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)]";
@@ -11,5 +16,5 @@ export declare const FRAME = "mx-auto w-full max-w-[var(--sf-site-width,1600px)]
 export declare const PRE_FRAME_BASE = "mx-auto w-full max-w-[1280px] px-[60px]";
 export declare const PRE_FRAME_GUTTER = "max-[960px]:px-6";
 export declare const PRE_FRAME = "mx-auto w-full max-w-[1280px] px-[60px] max-[960px]:px-6";
-export default function BlockFrame({ contained, className, style, children }: BlockFrameProps): import("react").JSX.Element;
+export default function BlockFrame({ contained, className, style, pad, children }: BlockFrameProps): import("react").JSX.Element;
 export {};

package/dist/components/BlockFrame.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import p from"./SiteGutterFrame.js";const s="mx-auto w-full max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)]",a="max-[960px]:px-[min(24px,var(--sf-site-gutter,40px))]",l=`${s} ${a}`,m="mx-auto w-full max-w-[1280px] px-[60px]",n="max-[960px]:px-6",u=`${m} ${n}`;function E({contained:x,className:t="",style:r,children:o}){return e(p,{contained:x,framedClass:`${l} ${t}`,fillClass:`w-full ${t}`,style:r,children:o})}export{l as FRAME,s as FRAME_BASE,a as FRAME_GUTTER,u as PRE_FRAME,m as PRE_FRAME_BASE,n as PRE_FRAME_GUTTER,E as default};
+import{jsx as e}from"react/jsx-runtime";import s from"./SiteGutterFrame.js";const a="mx-auto w-full max-w-[var(--sf-site-width,1600px)] px-[var(--sf-site-gutter,40px)]",l="max-[960px]:px-[min(24px,var(--sf-site-gutter,40px))]",m=`${a} ${l}`,n="mx-auto w-full max-w-[1280px] px-[60px]",E="max-[960px]:px-6",R=`${n} ${E}`;function f({contained:x,className:t="",style:r,pad:o,children:p}){return e(s,{contained:x,framedClass:`${m} ${t}`,fillClass:`w-full ${t}`,style:r,pad:o,children:p})}export{m as FRAME,a as FRAME_BASE,l as FRAME_GUTTER,R as PRE_FRAME,n as PRE_FRAME_BASE,E as PRE_FRAME_GUTTER,f as default};

package/dist/components/Flex.d.ts

@@ -3,6 +3,8 @@ type Direction = "row" | "column" | "tabs";
 type Justify = "start" | "center" | "between" | "end";
 type AlignItems = "start" | "center" | "stretch";
 interface FlexProps {
+    border?: unknown;
+    borderPhone?: unknown;
     direction: Direction;
     label?: string;
     gap?: number | string;
@@ -28,5 +30,5 @@ interface FlexProps {
     fillHeight?: boolean;
     content: SlotComponent;
 }
-export default function Flex({ direction, label, gap, justify, align, wrap, share, phoneRow, blockSpacing, bgImage, darken, darkenStyle, placement, padTop, padBottom, padTopPhone, padBottomPhone, padLeft, padRight, padLeftPhone, padRightPhone, contained, fillHeight, content: Content, }: FlexProps): import("react").JSX.Element;
+export default function Flex({ direction, label, gap, justify, align, wrap, share, phoneRow, blockSpacing, bgImage, darken, darkenStyle, placement, border, borderPhone, padTop, padBottom, padTopPhone, padBottomPhone, padLeft, padRight, padLeftPhone, padRightPhone, contained, fillHeight, content: Content, }: FlexProps): import("react").JSX.Element;
 export {};

package/dist/components/Flex.js

@@ -1 +1 @@
-import{jsx as s,jsxs as T,Fragment as X}from"react/jsx-runtime";import K from"./BoxTabs.js";import U from"./SiteGutterFrame.js";import{BoxSurfaceProvider as Y}from"./BoxSurfaceContext.js";import{useInSiteHeader as q}from"./PhoneMenuTools.js";import{FRAME_BASE as J,FRAME_GUTTER as Q}from"./BlockFrame.js";import{containerGapProps as V}from"../lib/content/container-gap.js";import{boxLayoutClasses as Z,boxBlockSpacingClass as ee,boxPhoneRowClasses as se,boxShareClasses as oe,boxWrapClass as re}from"../lib/content/box-layout.js";import{BOX_CARD_PAD as e,BOX_OWNS_SIDES_CLASS as te,boxDarkenStyle as ae,boxPlacementClasses as ne,CARD_SHADOW_CLASS as le,isBackgroundBox as ie}from"../lib/content/box-background.js";import{sectionPadAttrs as me}from"../lib/content/section-padding.js";import{ON_MEDIA_INK_STYLE as ce}from"../lib/content/ink.js";import{sizedBackground as fe}from"../lib/sized-image.js";function de({direction:r,label:k,gap:g,justify:E,align:v,wrap:B,share:P,phoneRow:w,blockSpacing:D,bgImage:i,darken:F,darkenStyle:j,placement:O,padTop:m,padBottom:c,padTopPhone:f,padBottomPhone:d,padLeft:u,padRight:b,padLeftPhone:p,padRightPhone:y,contained:z=!0,fillHeight:H=!1,content:I}){const t=ie(i),x=q(),S=[oe(P),ee(D)].filter(Boolean).join(" "),L=S?` ${S}`:"",$=["flex",r==="row"?`flex-row ${se(w)}`:"flex-col",re(B),t?ne(O??"center",r):Z(E,v)].join(" ")+L,o=H||t?" h-full":"",C=t||x?"":" py-6",R=`${J}${C} ${Q}${o}`,G=x?o.trim():`w-full${C}${o}`,a=V("Flex",g,r==="row"?"inline":"block"),_=s(I,{className:`${$}${a.className}${o}`,style:a.style,minEmptyHeight:120}),h=r==="tabs"?s(K,{className:`${$}${a.className}${o}`,style:a.style,children:_}):_,M=k?.trim()||void 0,A=W=>s(U,{contained:z,framedClass:R,fillClass:G,tabLabel:M,children:W});if(!t)return A(h);const n=ae(F,j),l=me(typeof m=="number"?m:e.desktop,typeof c=="number"?c:e.desktop,typeof f=="number"?f:e.phone,typeof d=="number"?d:e.phone,typeof u=="number"?u:e.side,typeof b=="number"?b:e.side,typeof p=="number"?p:e.sidePhone,typeof y=="number"?y:e.sidePhone),N=s("div",{className:`relative z-[1] ${te} ${l?.className??""}`.trimEnd(),style:n?{...l?.style,...ce}:l?.style,children:h});return A(s(X,{children:T("div",{className:`relative isolate overflow-hidden ${le}${o}`,style:{backgroundImage:fe(i??""),backgroundSize:"cover",backgroundPosition:"center"},children:[n&&s("div",{className:"absolute inset-0 z-0",style:n,"aria-hidden":!0}),n?s(Y,{children:N}):N]})}))}export{de as default};
+import{jsx as s,jsxs as Y,Fragment as q}from"react/jsx-runtime";import J from"./BoxTabs.js";import Q from"./SiteGutterFrame.js";import{BoxSurfaceProvider as T}from"./BoxSurfaceContext.js";import{useInSiteHeader as V}from"./PhoneMenuTools.js";import{FRAME_BASE as Z,FRAME_GUTTER as ee}from"./BlockFrame.js";import{containerGapProps as se}from"../lib/content/container-gap.js";import{boxLayoutClasses as re,boxBlockSpacingClass as oe,boxPhoneRowClasses as te,boxShareClasses as ne,boxWrapClass as le}from"../lib/content/box-layout.js";import{BOX_CARD_PAD as e,BOX_OWNS_SIDES_CLASS as ae,boxDarkenStyle as ie,boxPlacementClasses as me,CARD_SHADOW_CLASS as ce,isBackgroundBox as fe}from"../lib/content/box-background.js";import{sectionBorderStyle as ue}from"../lib/content/borders.js";import{sectionPadAttrs as de}from"../lib/content/section-padding.js";import{ON_MEDIA_INK_STYLE as be}from"../lib/content/ink.js";import{sizedBackground as ye}from"../lib/sized-image.js";function xe({direction:t,label:g,gap:k,justify:v,align:E,wrap:P,share:w,phoneRow:B,blockSpacing:D,bgImage:S,darken:F,darkenStyle:j,placement:O,border:z,borderPhone:H,padTop:a,padBottom:i,padTopPhone:m,padBottomPhone:c,padLeft:f,padRight:u,padLeftPhone:d,padRightPhone:b,contained:I=!0,fillHeight:G=!1,content:M}){const o=fe(S),p=V(),$=[ne(w),oe(D)].filter(Boolean).join(" "),W=$?` ${$}`:"",C=["flex",t==="row"?`flex-row ${te(B)}`:"flex-col",le(P),o?me(O??"center",t):re(v,E)].join(" ")+W,r=G||o?" h-full":"",y=o||p?"":" py-6",L=`${Z}${y} ${ee}${r}`,R=p?r.trim():`w-full${y}${r}`,n=se("Flex",k,t==="row"?"inline":"block"),_=s(M,{className:`${C}${n.className}${r}`,style:n.style,minEmptyHeight:120}),h=t==="tabs"?s(J,{className:`${C}${n.className}${r}`,style:n.style,children:_}):_,X=g?.trim()||void 0,K={values:{top:a,bottom:i,topPhone:m,bottomPhone:c,left:f,right:u,leftPhone:d,rightPhone:b},frame:y?24:0},A=U=>s(Q,{contained:I,framedClass:L,fillClass:R,tabLabel:X,pad:o?void 0:K,border:ue(z,H),children:U});if(!o)return A(h);const l=ie(F,j),x=de(typeof a=="number"?a:e.desktop,typeof i=="number"?i:e.desktop,typeof m=="number"?m:e.phone,typeof c=="number"?c:e.phone,typeof f=="number"?f:e.side,typeof u=="number"?u:e.side,typeof d=="number"?d:e.sidePhone,typeof b=="number"?b:e.sidePhone),N=s("div",{className:`relative z-[1] ${ae} ${x?.className??""}`.trimEnd(),style:l?{...x?.style,...be}:x?.style,children:h});return A(s(q,{children:Y("div",{className:`relative isolate overflow-hidden ${ce}${r}`,style:{backgroundImage:ye(S??""),backgroundSize:"cover",backgroundPosition:"center"},children:[l&&s("div",{className:"absolute inset-0 z-0",style:l,"aria-hidden":!0}),l?s(T,{children:N}):N]})}))}export{xe as default};

package/dist/components/Heading.d.ts

@@ -1,11 +1,13 @@
+import type { PadValues } from "../lib/content/section-padding.js";
 type Level = "1" | "2" | "3" | "4" | "5" | "6";
 type Align = "left" | "center" | "right";
 interface HeadingProps {
+    pad?: PadValues;
     level: Level;
     text: string;
     align: Align;
     contained: boolean;
     hero?: boolean;
 }
-export default function Heading({ level, text, align, contained, hero }: HeadingProps): import("react").JSX.Element;
+export default function Heading({ level, text, align, contained, hero, pad }: HeadingProps): import("react").JSX.Element;
 export {};

package/dist/components/Heading.js

@@ -1 +1 @@
-import{jsx as n}from"react/jsx-runtime";import{resolveTypeSize as s}from"../lib/content/section-type-size.js";import f from"./BlockFrame.js";import{renderHeadline as d}from"./goldPhrases.js";const c={1:{size:"clamp(48px,7vw,96px)",role:"heading",step:"headingLarge",leading:"leading-[0.95]"},2:{size:"56px",sizeMobile:"36px",role:"heading",step:"headingMedium",rank:2,leading:"leading-none"},3:{size:"40px",sizeMobile:"28px",role:"heading",step:"headingSmall",rank:3,leading:"leading-[1.05]"},4:{size:"28px",role:"heading",step:"headingSmall",rank:3,leading:"leading-[1.1]"},5:{size:"22px",role:"body",step:"body",leading:"leading-[1.2]"},6:{size:"18px",role:"body",step:"body",leading:"leading-[1.3]"}},z="font-display font-medium leading-[0.92] tracking-[-0.04em] text-[length:min(var(--size-headingLarge,clamp(64px,9vw,144px)),var(--sf-heading-max,9999px))] max-[800px]:text-[length:min(var(--size-headingMedium,clamp(48px,12vw,76px)),var(--sf-heading-max,9999px))] max-[800px]:leading-[0.95]",v={left:"text-left",center:"text-center",right:"text-right"};function w({level:a,text:t,align:l,contained:g,hero:r=!1}){if(r)return n("h1",{className:z,children:d(t,!1)});const o=`h${a}`,e=c[a],h=s(void 0,e.size,e.role,e.step),i=e.sizeMobile?s(void 0,e.sizeMobile,e.role,e.step):void 0,p={"--heading-size":h,...i?{"--heading-size-m":i}:{}},x=e.rank===2?"[font-weight:var(--sf-heading-2-weight,var(--sf-heading-weight,500))]":e.rank===3?"[font-weight:var(--sf-heading-3-weight,var(--sf-heading-weight,500))]":"[font-weight:var(--sf-heading-weight,500)]",m=["text-[length:var(--heading-size)]",e.leading,i?"max-[800px]:text-[length:var(--heading-size-m)]":""].filter(Boolean).join(" ");return n(f,{contained:g,className:"py-6",children:n(o,{className:`font-display ${x} tracking-[-0.03em] text-fg ${m} ${v[l]}`,style:p,children:d(t,!1)})})}export{w as default};
+import{jsx as n}from"react/jsx-runtime";import{resolveTypeSize as d}from"../lib/content/section-type-size.js";import c from"./BlockFrame.js";import{renderHeadline as l}from"./goldPhrases.js";const z={1:{size:"clamp(48px,7vw,96px)",role:"heading",step:"headingLarge",leading:"leading-[0.95]"},2:{size:"56px",sizeMobile:"36px",role:"heading",step:"headingMedium",rank:2,leading:"leading-none"},3:{size:"40px",sizeMobile:"28px",role:"heading",step:"headingSmall",rank:3,leading:"leading-[1.05]"},4:{size:"28px",role:"heading",step:"headingSmall",rank:3,leading:"leading-[1.1]"},5:{size:"22px",role:"body",step:"body",leading:"leading-[1.2]"},6:{size:"18px",role:"body",step:"body",leading:"leading-[1.3]"}},v="font-display font-medium leading-[0.92] tracking-[-0.04em] text-[length:min(var(--size-headingLarge,clamp(64px,9vw,144px)),var(--sf-heading-max,9999px))] max-[800px]:text-[length:min(var(--size-headingMedium,clamp(48px,12vw,76px)),var(--sf-heading-max,9999px))] max-[800px]:leading-[0.95]",u={left:"text-left",center:"text-center",right:"text-right"};function w({level:a,text:t,align:g,contained:r,hero:o=!1,pad:s}){if(o)return n("h1",{className:v,children:l(t,!1)});const h=`h${a}`,e=z[a],p=d(void 0,e.size,e.role,e.step),i=e.sizeMobile?d(void 0,e.sizeMobile,e.role,e.step):void 0,m={"--heading-size":p,...i?{"--heading-size-m":i}:{}},x=e.rank===2?"[font-weight:var(--sf-heading-2-weight,var(--sf-heading-weight,500))]":e.rank===3?"[font-weight:var(--sf-heading-3-weight,var(--sf-heading-weight,500))]":"[font-weight:var(--sf-heading-weight,500)]",f=["text-[length:var(--heading-size)]",e.leading,i?"max-[800px]:text-[length:var(--heading-size-m)]":""].filter(Boolean).join(" ");return n(c,{contained:r,className:"py-6",pad:s?{values:s,frame:24}:void 0,children:n(h,{className:`font-display ${x} tracking-[-0.03em] text-fg ${f} ${u[g]}`,style:m,children:l(t,!1)})})}export{w as default};

package/dist/components/SiteGutterFrame.d.ts

@@ -1,9 +1,15 @@
 import { type CSSProperties, type ReactNode } from "react";
-export default function SiteGutterFrame({ contained, framedClass, fillClass, style, tabLabel, children, }: {
+import { type PadValues } from "../lib/content/section-padding.js";
+export default function SiteGutterFrame({ contained, framedClass, fillClass, style, tabLabel, pad, border, children, }: {
     contained: boolean;
     framedClass: string;
     fillClass: string;
     style?: CSSProperties;
     tabLabel?: string;
+    pad?: {
+        values: PadValues;
+        frame: number;
+    };
+    border?: CSSProperties;
     children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/SiteGutterFrame.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import{createContext as l,useContext as c}from"react";import{drawsSiteGutter as m}from"../lib/content/site-gutter.js";const s=l(!1);function f({contained:a,framedClass:i,fillClass:o,style:n,tabLabel:u,children:t}){const d=c(s),e=m(a,d);return r("div",{className:e?i:o,style:n,"data-tab-label":u,children:e?r(s.Provider,{value:!0,children:t}):t})}export{f as default};
+"use client";import{jsx as o}from"react/jsx-runtime";import{createContext as y,useContext as R}from"react";import{rootPadAttrs as _,wrapperPadAttrs as x}from"../lib/content/section-padding.js";import{SECTION_BORDER_CLASS as E,SECTION_BORDER_SELF_CLASS as O}from"../lib/content/borders.js";import{drawsSiteGutter as A}from"../lib/content/site-gutter.js";const u=y(!1);function h({contained:d,framedClass:f,fillClass:S,style:a,tabLabel:v,pad:e,border:s,children:i}){const C=R(u),t=A(d,C),l=e&&!t?_(e.values,e.frame):null,n=s&&!t?s:null,N=[t?f:S,l?.className,n?O:null].filter(Boolean).join(" "),p=l||n?{...a,...l?.style,...n}:a,c=o("div",{className:N,style:p,"data-tab-label":v,children:t?o(u.Provider,{value:!0,children:i}):i}),r=e&&t?x(e.values):null,m=r?o("div",{className:r.className,style:r.style,children:c}):c;return s&&t?o("div",{className:E,style:{display:"contents",...s},children:m}):m}export{h as default};

package/dist/components/Text.d.ts

@@ -1,11 +1,13 @@
+import type { PadValues } from "../lib/content/section-padding.js";
 type Align = "left" | "center" | "right";
 type Tone = "default" | "dim";
 interface TextProps {
+    pad?: PadValues;
     text: string;
     align: Align;
     tone: Tone;
     contained: boolean;
     hero?: boolean;
 }
-export default function Text({ text, align, tone, contained, hero }: TextProps): import("react").JSX.Element;
+export default function Text({ text, align, tone, contained, hero, pad }: TextProps): import("react").JSX.Element;
 export {};

package/dist/components/Text.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import p from"./BlockFrame.js";import{renderGold as a,splitParagraphs as m}from"./goldPhrases.js";const c={left:"text-left",center:"text-center mx-auto",right:"text-right ml-auto"},d="max-w-[380px] text-[length:var(--size-body,15px)] leading-[1.5] opacity-80 max-[800px]:text-[length:var(--size-body,14px)]",f={default:"text-fg",dim:"text-fg-dim"};function g({text:e,align:r,tone:i,contained:l,hero:n=!1}){if(n)return t("p",{className:d,children:a(e)});const s=`max-w-[680px] whitespace-pre-line text-[length:var(--size-body,17px)] leading-[1.7] ${c[r]} ${f[i]}`;return t(p,{contained:l,className:"py-4",children:m(e).map((o,x)=>t("p",{className:s,children:a(o)},x))})}export{g as default};
+import{jsx as e}from"react/jsx-runtime";import m from"./BlockFrame.js";import{renderGold as r,splitParagraphs as c}from"./goldPhrases.js";const d={left:"text-left",center:"text-center mx-auto",right:"text-right ml-auto"},f="max-w-[380px] text-[length:var(--size-body,15px)] leading-[1.5] opacity-80 max-[800px]:text-[length:var(--size-body,14px)]",g={default:"text-fg",dim:"text-fg-dim"};function h({text:t,align:n,tone:i,contained:l,hero:s=!1,pad:a}){if(s)return e("p",{className:f,children:r(t)});const o=`max-w-[680px] whitespace-pre-line text-[length:var(--size-body,17px)] leading-[1.7] ${d[n]} ${g[i]}`;return e(m,{contained:l,className:"py-4",pad:a?{values:a,frame:16}:void 0,children:c(t).map((x,p)=>e("p",{className:o,children:r(x)},p))})}export{h as default};

package/dist/lib/content/borders.d.ts

@@ -14,6 +14,7 @@ export type BorderValue = {
     color?: string | null;
 };
 export declare const SECTION_BORDER_CLASS = "sf-section-border";
+export declare const SECTION_BORDER_SELF_CLASS = "sf-section-border-self";
 export declare function hasOwnBorder(value: BorderValue | null | undefined): boolean;
 export declare function borderVars(value: BorderValue | null | undefined, { phone }?: {
     phone?: boolean;

package/dist/lib/content/borders.js

@@ -1 +1 @@
-const h=20,i=["solid","dashed","dotted"],c=["top","right","bottom","left"],b="sf-section-border",p=/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,f=t=>typeof t=="number"&&Number.isFinite(t)?`${Math.min(20,Math.max(0,Math.round(t)))}px`:void 0;function u(t){return r(t)!==void 0}function r(t,{phone:n=!1}={}){if(!t||typeof t!="object")return;const e=n?"-phone":"",o={};for(const s of c){const d=f(t[s])??f(t.width);d!==void 0&&(o[`--sf-border-${s}-width${e}`]=d)}return typeof t.style=="string"&&i.includes(t.style)&&(o[`--sf-border-style${e}`]=t.style),typeof t.color=="string"&&p.test(t.color)&&(o[`--sf-border-color${e}`]=t.color.toLowerCase()),Object.keys(o).length?o:void 0}function x(t,n){const e=r(t),o=r(n,{phone:!0});return e||o?{...e,...o}:void 0}export{h as BORDER_MAX,c as BORDER_SIDES,i as BORDER_STYLES,b as SECTION_BORDER_CLASS,r as borderVars,u as hasOwnBorder,x as sectionBorderStyle};
+const E=20,i=["solid","dashed","dotted"],c=["top","right","bottom","left"],R="sf-section-border",S="sf-section-border-self",p=/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,f=t=>typeof t=="number"&&Number.isFinite(t)?`${Math.min(20,Math.max(0,Math.round(t)))}px`:void 0;function b(t){return r(t)!==void 0}function r(t,{phone:n=!1}={}){if(!t||typeof t!="object")return;const e=n?"-phone":"",o={};for(const s of c){const d=f(t[s])??f(t.width);d!==void 0&&(o[`--sf-border-${s}-width${e}`]=d)}return typeof t.style=="string"&&i.includes(t.style)&&(o[`--sf-border-style${e}`]=t.style),typeof t.color=="string"&&p.test(t.color)&&(o[`--sf-border-color${e}`]=t.color.toLowerCase()),Object.keys(o).length?o:void 0}function h(t,n){const e=r(t),o=r(n,{phone:!0});return e||o?{...e,...o}:void 0}export{E as BORDER_MAX,c as BORDER_SIDES,i as BORDER_STYLES,R as SECTION_BORDER_CLASS,S as SECTION_BORDER_SELF_CLASS,r as borderVars,b as hasOwnBorder,h as sectionBorderStyle};

package/dist/lib/content/section-padding.d.ts

@@ -31,3 +31,22 @@ export declare function resolveSectionPadding(props: SectionPaddingProps, fallba
     top?: number;
     bottom?: number;
 };
+export type PadValues = {
+    top?: unknown;
+    bottom?: unknown;
+    topPhone?: unknown;
+    bottomPhone?: unknown;
+    left?: unknown;
+    right?: unknown;
+    leftPhone?: unknown;
+    rightPhone?: unknown;
+};
+export declare function padValuesOf(props: Record<string, unknown>): PadValues;
+export declare function wrapperPadAttrs(v: PadValues): {
+    className: string;
+    style: CSSProperties;
+} | null;
+export declare function rootPadAttrs(v: PadValues, frame: number): {
+    className: string;
+    style: CSSProperties;
+} | null;

package/dist/lib/content/section-padding.js

@@ -1 +1 @@
-const N={min:10,max:200,step:10};function c(e,t){const o=typeof e=="number"?e:void 0,n=typeof t=="number"?t:void 0;if(!(o===void 0&&n===void 0))return{paddingTop:o,paddingBottom:n}}const m="sf-pad-top-phone",A="sf-pad-bottom-phone",x="--sf-pad-t-phone",O="--sf-pad-b-phone",T="sf-pad-left-phone",y="sf-pad-right-phone",b="--sf-pad-l-phone",h="--sf-pad-r-phone";function g(e,t,o,n,s,i,r,u){const P=c(e,t)??{},p={},d=["sf-section-pad"];typeof o=="number"&&(d.push(m),p[x]=`${o}px`),typeof n=="number"&&(d.push(A),p[O]=`${n}px`);const f={};return typeof s=="number"&&(f.paddingLeft=s),typeof i=="number"&&(f.paddingRight=i),typeof r=="number"&&(d.push(T),p[b]=`${r}px`),typeof u=="number"&&(d.push(y),p[h]=`${u}px`),d.length===1&&c(e,t)===void 0&&!Object.keys(f).length?null:{className:d.join(" "),style:{...P,...f,...p}}}const a=e=>typeof e=="number"?e:void 0;function _(e,t,o){const n=a(e)??o,s=a(t);return n===void 0?s:s===void 0?n:n+s}function E(e,t={}){return{top:_(e.padTop,e.sectionPaddingTop,t.top),bottom:_(e.padBottom,e.sectionPaddingBottom,t.bottom)}}export{A as PAD_BOTTOM_PHONE_CLASS,O as PAD_BOTTOM_PHONE_VAR,T as PAD_LEFT_PHONE_CLASS,b as PAD_LEFT_PHONE_VAR,y as PAD_RIGHT_PHONE_CLASS,h as PAD_RIGHT_PHONE_VAR,m as PAD_TOP_PHONE_CLASS,x as PAD_TOP_PHONE_VAR,N as SECTION_PADDING,E as resolveSectionPadding,g as sectionPadAttrs,c as sectionPadStyle};
+const y={min:10,max:200,step:10};function p(t,e){const n=typeof t=="number"?t:void 0,o=typeof e=="number"?e:void 0;if(!(n===void 0&&o===void 0))return{paddingTop:n,paddingBottom:o}}const g="sf-pad-top-phone",_="sf-pad-bottom-phone",x="--sf-pad-t-phone",A="--sf-pad-b-phone",b="sf-pad-left-phone",O="sf-pad-right-phone",l="--sf-pad-l-phone",T="--sf-pad-r-phone";function c(t,e,n,o,d,r,P,u){const m=p(t,e)??{},f={},i=["sf-section-pad"];typeof n=="number"&&(i.push(g),f[x]=`${n}px`),typeof o=="number"&&(i.push(_),f[A]=`${o}px`);const s={};return typeof d=="number"&&(s.paddingLeft=d),typeof r=="number"&&(s.paddingRight=r),typeof P=="number"&&(i.push(b),f[l]=`${P}px`),typeof u=="number"&&(i.push(O),f[T]=`${u}px`),i.length===1&&p(t,e)===void 0&&!Object.keys(s).length?null:{className:i.join(" "),style:{...m,...s,...f}}}const a=t=>typeof t=="number"?t:void 0;function h(t,e,n){const o=a(t)??n,d=a(e);return o===void 0?d:d===void 0?o:o+d}function N(t,e={}){return{top:h(t.padTop,t.sectionPaddingTop,e.top),bottom:h(t.padBottom,t.sectionPaddingBottom,e.bottom)}}function E(t){return{top:t.sectionPaddingTop,bottom:t.sectionPaddingBottom,topPhone:t.sectionPaddingTopPhone,bottomPhone:t.sectionPaddingBottomPhone,left:t.sectionPaddingLeft,right:t.sectionPaddingRight,leftPhone:t.sectionPaddingLeftPhone,rightPhone:t.sectionPaddingRightPhone}}function S(t){return c(t.top,t.bottom,t.topPhone,t.bottomPhone,t.left,t.right,t.leftPhone,t.rightPhone)}function D(t,e){const n=o=>typeof o=="number"?o+e:void 0;return c(n(t.top),n(t.bottom),n(t.topPhone),n(t.bottomPhone),t.left,t.right,t.leftPhone,t.rightPhone)}export{_ as PAD_BOTTOM_PHONE_CLASS,A as PAD_BOTTOM_PHONE_VAR,b as PAD_LEFT_PHONE_CLASS,l as PAD_LEFT_PHONE_VAR,O as PAD_RIGHT_PHONE_CLASS,T as PAD_RIGHT_PHONE_VAR,g as PAD_TOP_PHONE_CLASS,x as PAD_TOP_PHONE_VAR,y as SECTION_PADDING,E as padValuesOf,N as resolveSectionPadding,D as rootPadAttrs,c as sectionPadAttrs,p as sectionPadStyle,S as wrapperPadAttrs};

package/dist/lib/puck/blocks/general/Flex/render.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import n from"../../../../../components/Flex.js";import{sectionFillsHeight as a}from"../../../../content/section-min-height.js";const i={content:{type:"slot"}},l={label:"Box",fields:i,defaultProps:{direction:"row",justify:"start",align:"stretch",wrap:!0,content:[],share:"equal",blockSpacing:"gap"},render:e=>t(n,{direction:e.direction,label:e.label,gap:e.gap,justify:e.justify,align:e.align,wrap:e.wrap,share:e.share,phoneRow:e.phoneRow,blockSpacing:e.blockSpacing,bgImage:e.bgImage,darken:e.darken,darkenStyle:e.darkenStyle,placement:e.placement,padTop:e.sectionPaddingTop,padBottom:e.sectionPaddingBottom,padTopPhone:e.sectionPaddingTopPhone,padBottomPhone:e.sectionPaddingBottomPhone,padLeft:e.sectionPaddingLeft,padRight:e.sectionPaddingRight,padLeftPhone:e.sectionPaddingLeftPhone,padRightPhone:e.sectionPaddingRightPhone,contained:e.contained,fillHeight:a(e),content:e.content})};export{l as FlexRender,i as FlexSlots};
+import{jsx as t}from"react/jsx-runtime";import n from"../../../../../components/Flex.js";import{sectionFillsHeight as a}from"../../../../content/section-min-height.js";const i={content:{type:"slot"}},l={label:"Box",fields:i,defaultProps:{direction:"row",justify:"start",align:"stretch",wrap:!0,content:[],share:"equal",blockSpacing:"gap"},render:e=>t(n,{direction:e.direction,label:e.label,gap:e.gap,justify:e.justify,align:e.align,wrap:e.wrap,share:e.share,phoneRow:e.phoneRow,blockSpacing:e.blockSpacing,bgImage:e.bgImage,darken:e.darken,darkenStyle:e.darkenStyle,placement:e.placement,border:e.sectionBorder,borderPhone:e.sectionBorderPhone,padTop:e.sectionPaddingTop,padBottom:e.sectionPaddingBottom,padTopPhone:e.sectionPaddingTopPhone,padBottomPhone:e.sectionPaddingBottomPhone,padLeft:e.sectionPaddingLeft,padRight:e.sectionPaddingRight,padLeftPhone:e.sectionPaddingLeftPhone,padRightPhone:e.sectionPaddingRightPhone,contained:e.contained,fillHeight:a(e),content:e.content})};export{l as FlexRender,i as FlexSlots};

package/dist/lib/puck/blocks/general/Heading/render.js

@@ -1 +1 @@
-import{Fragment as o,jsx as r}from"react/jsx-runtime";import d from"../../../../../components/Heading.js";import{hidableText as l,readHidable as m}from"../../../hidable.js";import{PH as f}from"../../placeholders.js";import{phPrev as g}from"../../scaffold.js";const u={label:"Heading",defaultProps:{text:"",level:"2",align:"left",contained:!0},render:({text:e,level:t,align:n,contained:a,puck:i})=>m(e).hidden?r(o,{}):r(d,{text:g(l(e),f.heading,i)??"",level:t,align:n,contained:a})};export{u as HeadingRender};
+import{Fragment as d,jsx as r}from"react/jsx-runtime";import{padValuesOf as l}from"../../../../content/section-padding.js";import m from"../../../../../components/Heading.js";import{hidableText as f,readHidable as p}from"../../../hidable.js";import{PH as g}from"../../placeholders.js";import{phPrev as s}from"../../scaffold.js";const b={label:"Heading",defaultProps:{text:"",level:"2",align:"left",contained:!0},render:e=>{const{text:t,level:a,align:n,contained:i,puck:o}=e;return p(t).hidden?r(d,{}):r(m,{text:s(f(t),g.heading,o)??"",level:a,align:n,contained:i,pad:l(e)})}};export{b as HeadingRender};

package/dist/lib/puck/blocks/general/Text/render.js

@@ -1 +1 @@
-import{Fragment as i,jsx as t}from"react/jsx-runtime";import d from"../../../../../components/Text.js";import{hidableText as m,readHidable as f}from"../../../hidable.js";import{PH as l}from"../../placeholders.js";import{phPrev as p}from"../../scaffold.js";const T={label:"Text",defaultProps:{text:"",align:"left",tone:"default",contained:!0},render:({text:e,align:r,tone:o,contained:n,puck:a})=>f(e).hidden?t(i,{}):t(d,{text:p(m(e),l.body,a)??"",align:r,tone:o,contained:n})};export{T as TextRender};
+import{Fragment as d,jsx as r}from"react/jsx-runtime";import{padValuesOf as m}from"../../../../content/section-padding.js";import f from"../../../../../components/Text.js";import{hidableText as l,readHidable as p}from"../../../hidable.js";import{PH as x}from"../../placeholders.js";import{phPrev as s}from"../../scaffold.js";const P={label:"Text",defaultProps:{text:"",align:"left",tone:"default",contained:!0},render:e=>{const{text:t,align:o,tone:n,contained:a,puck:i}=e;return p(t).hidden?r(d,{}):r(f,{text:s(l(t),x.body,i)??"",align:o,tone:n,contained:a,pad:m(e)})}};export{P as TextRender};

package/dist/lib/puck/passes/borders.js

@@ -1 +1 @@
-import{jsx as s}from"react/jsx-runtime";import{SECTION_BORDER_CLASS as i,sectionBorderStyle as d}from"../../content/borders.js";const l={name:"sectionBorder",applies:(r,n,e)=>n.isSection(r)&&!!e&&typeof e.render=="function",draw(r){const n=r.render;r.render=e=>{const o=d(e.sectionBorder,e.sectionBorderPhone),t=n(e);return o?s("div",{className:i,style:{display:"contents",...o},children:t}):t}}};export{l as sectionBorder};
+import{jsx as i}from"react/jsx-runtime";import{SECTION_BORDER_CLASS as d,sectionBorderStyle as c}from"../../content/borders.js";import{PAD_ON_ROOT as a}from"./section-padding.js";const m={name:"sectionBorder",applies:(e,n,r)=>n.isSection(e)&&!!r&&typeof r.render=="function",draw(e,n){if(a.has(n))return;const r=e.render;e.render=o=>{const t=c(o.sectionBorder,o.sectionBorderPhone),s=r(o);return t?i("div",{className:d,style:{display:"contents",...t},children:s}):s}}};export{m as sectionBorder};

package/dist/lib/puck/passes/section-padding.d.ts

@@ -4,5 +4,6 @@ export declare const SECTION_PAD_INNER_DEFAULTS: Record<string, {
     bottom: number;
 }>;
 export declare const SECTION_PAD_INNER: Set<string>;
+export declare const PAD_ON_ROOT: ReadonlySet<string>;
 export declare const sectionPadding: BlockPass;
 export declare const blockPadding: BlockPass;

package/dist/lib/puck/passes/section-padding.js

@@ -1 +1 @@
-import{jsx as g}from"react/jsx-runtime";import{isBackgroundBox as f}from"../../content/box-background.js";import{resolveSectionPadding as m,sectionPadAttrs as r}from"../../content/section-padding.js";const c={ParagraphsA:{top:60,bottom:80},StatsParagraph:{top:120,bottom:120},Timeline:{top:120,bottom:120},Footprint:{top:120,bottom:120},TimelineTrack:{top:120,bottom:120},TitleWithButtons:{top:140,bottom:140},ProcessSteps:{top:120,bottom:120},DetailRows:{top:100,bottom:100}},P=new Set(Object.keys(c)),h=new Set(["Hero","HeroSingle","IntroBleed","CategoryBar","DocTabs"]),l=new Set(["ProductGrid"]);function a(t,o,n=!1){const d=t.render;t.render=e=>{if(o?.(e))return d(e);const i=n?r(e.sectionPaddingTop,e.sectionPaddingBottom,e.sectionPaddingTopPhone,e.sectionPaddingBottomPhone,e.sectionPaddingLeft,e.sectionPaddingRight,e.sectionPaddingLeftPhone,e.sectionPaddingRightPhone):r(e.sectionPaddingTop,e.sectionPaddingBottom,e.sectionPaddingTopPhone,e.sectionPaddingBottomPhone),s=d(e);return i?g("div",{className:i.className,style:i.style,children:s}):s}}const b={name:"sectionPadding",applies:(t,o,n)=>o.isSection(t)&&!h.has(t)&&!!n&&typeof n.render=="function",panel(t,o,n){P.has(o)||l.has(o)||(t.fields={...t.fields,...n.sidesPaddingFields()})},draw(t,o){if(P.has(o)){const n=t.render,d=c[o];t.render=e=>{const i=m(e,d);return n({...e,padTop:i.top,padBottom:i.bottom})};return}if(l.has(o)){a(t);return}a(t,o==="Flex"?n=>f(n.bgImage):void 0,!0)}},u=["Heading","Text"],B={name:"blockPadding",applies:(t,o,n)=>u.includes(t)&&!!n&&typeof n.render=="function",panel(t,o,n){t.fields={...t.fields,...n.sidesPaddingFields()}},draw(t){a(t,void 0,!0)}};export{P as SECTION_PAD_INNER,c as SECTION_PAD_INNER_DEFAULTS,B as blockPadding,b as sectionPadding};
+import{jsx as f}from"react/jsx-runtime";import{isBackgroundBox as h}from"../../content/box-background.js";import{resolveSectionPadding as u,sectionPadAttrs as r}from"../../content/section-padding.js";const c={ParagraphsA:{top:60,bottom:80},StatsParagraph:{top:120,bottom:120},Timeline:{top:120,bottom:120},Footprint:{top:120,bottom:120},TimelineTrack:{top:120,bottom:120},TitleWithButtons:{top:140,bottom:140},ProcessSteps:{top:120,bottom:120},DetailRows:{top:100,bottom:100}},P=new Set(Object.keys(c)),l=new Set(["Flex","Text","Heading"]),m=new Set(["Hero","HeroSingle","IntroBleed","CategoryBar","DocTabs"]),g=new Set(["ProductGrid"]);function a(t,n,o=!1){const d=t.render;t.render=e=>{if(n?.(e))return d(e);const i=o?r(e.sectionPaddingTop,e.sectionPaddingBottom,e.sectionPaddingTopPhone,e.sectionPaddingBottomPhone,e.sectionPaddingLeft,e.sectionPaddingRight,e.sectionPaddingLeftPhone,e.sectionPaddingRightPhone):r(e.sectionPaddingTop,e.sectionPaddingBottom,e.sectionPaddingTopPhone,e.sectionPaddingBottomPhone),s=d(e);return i?f("div",{className:i.className,style:i.style,children:s}):s}}const x={name:"sectionPadding",applies:(t,n,o)=>n.isSection(t)&&!m.has(t)&&!!o&&typeof o.render=="function",panel(t,n,o){P.has(n)||g.has(n)||(t.fields={...t.fields,...o.sidesPaddingFields()})},draw(t,n){if(P.has(n)){const o=t.render,d=c[n];t.render=e=>{const i=u(e,d);return o({...e,padTop:i.top,padBottom:i.bottom})};return}if(g.has(n)){a(t);return}l.has(n)||a(t,n==="Flex"?o=>h(o.bgImage):void 0,!0)}},T=["Heading","Text"],B={name:"blockPadding",applies:(t,n,o)=>T.includes(t)&&!!o&&typeof o.render=="function",panel(t,n,o){t.fields={...t.fields,...o.sidesPaddingFields()}},draw(t,n){l.has(n)||a(t,void 0,!0)}};export{l as PAD_ON_ROOT,P as SECTION_PAD_INNER,c as SECTION_PAD_INNER_DEFAULTS,B as blockPadding,x as sectionPadding};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-web-builder",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "The EFFICIENT website builder: the website editor, the general sections and the renderer that draws them, compiled. Hostable by any EFFICIENT product; nothing here imports a host.",
   "license": "UNLICENSED",
   "author": "Efficient Pty Ltd",