@port60/template-kit 0.19.0 → 0.20.1

package/src/vendor/validator/behaviors-runtime.js

@@ -1,2 +1,2 @@
 // GENERATED by scripts/build-behaviors-runtime.mjs — do not edit by hand.
-"use strict";var p60Behaviors=(()=>{var x=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var C=(o,l)=>{for(var e in l)x(o,e,{get:l[e],enumerable:!0})},F=(o,l,e,n)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of q(l))!I.call(o,t)&&t!==e&&x(o,t,{get:()=>l[t],enumerable:!(n=P(l,t))||n.enumerable});return o};var O=o=>F(x({},"__esModule",{value:!0}),o);var ee={};C(ee,{initBehaviors:()=>Z});var L=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches;function b(o,l){let e=`data-p60-bound-${l}`;return o.hasAttribute(e)?!0:(o.setAttribute(e,""),!1)}var N=.15;function T(o,l){if(o.length===0)return;if(L()||!("IntersectionObserver"in window)){o.forEach(l);return}let e=new IntersectionObserver(n=>{for(let t of n){if(!t.isIntersecting)continue;(t.boundingClientRect.height>=window.innerHeight||t.intersectionRatio>=N-.001)&&(e.unobserve(t.target),l(t.target))}},{rootMargin:"0px 0px -10% 0px",threshold:[0,N]});o.forEach(n=>e.observe(n))}function R(o){let l=Array.from(o.querySelectorAll("[data-p60-reveal-group]")).filter(n=>!b(n,"reveal-group"));for(let n of l)Array.from(n.children).forEach((t,a)=>{t.style.setProperty("--p60-reveal-index",String(a)),t.classList.add("p60-reveal-child")});T(l,n=>n.classList.add("is-revealed"));let e=Array.from(o.querySelectorAll("[data-p60-reveal]")).filter(n=>!b(n,"reveal"));T(e,n=>n.classList.add("is-revealed"))}var B=/\d[\d,   ]*(?:\.\d+)?/;function _(o){let l=Array.from(o.querySelectorAll("[data-p60-count]")).filter(e=>!b(e,"count"));T(l,e=>{e.classList.add("is-revealed");let n=e.textContent??"",t=B.exec(n);if(!t)return;let a=t[0].replace(/[,   ]+$/,""),c=n.slice(0,t.index),r=n.slice(t.index+a.length),i=/[,   ]/.test(a),d=a.includes(".")?a.length-a.indexOf(".")-1:0,s=Number.parseFloat(a.replace(/[,   ]/g,"")),f=Number.parseFloat(e.getAttribute("data-p60-count")??""),g=Number.isFinite(f)?f:s;if(!Number.isFinite(g)||L())return;let u=Math.min(Number.parseInt(e.getAttribute("data-p60-count-duration")??"1200",10)||1200,4e3),p=new Intl.NumberFormat(document.documentElement.lang||void 0,{useGrouping:i,minimumFractionDigits:d,maximumFractionDigits:d}),m=performance.now(),h=v=>{let y=Math.min((v-m)/u,1),H=1-Math.pow(1-y,3);e.textContent=y<1?c+p.format(g*H)+r:n,y<1&&requestAnimationFrame(h)};requestAnimationFrame(h)})}function D(o){let l=Array.from(o.querySelectorAll("[data-p60-progress]")).filter(e=>!b(e,"progress"));if(!L()){for(let e of l){let n=e.style.width||getComputedStyle(e).width;e.style.transition="none",e.style.width="0px",e.offsetWidth,e.style.transition="width 1.1s cubic-bezier(0.22, 1, 0.36, 1)",e.dataset.p60ProgressTarget=n}T(l,e=>{e.classList.add("is-revealed"),e.style.width=e.dataset.p60ProgressTarget??""})}}function V(o){let l=Array.from(o.querySelectorAll("[data-p60-countdown]")).filter(e=>!b(e,"countdown"));for(let e of l){let n=Date.parse(e.getAttribute("data-p60-until")??"");if(!Number.isFinite(n))continue;let t=e.getAttribute("data-p60-countdown")||"dhm",a=t==="dhms",c=()=>{let i=n-Date.now();if(i<=0){e.classList.add("is-elapsed");let m=e.getAttribute("data-p60-elapsed-text");m&&(e.textContent=m),window.clearInterval(r);return}let d=Math.floor(i/1e3),s=Math.floor(d/86400),f=Math.floor(d%86400/3600),g=Math.floor(d%3600/60),u=d%60,p=[];t.includes("d")&&s>0&&p.push(`${s}d`),p.push(`${f}h`,`${g}m`),a&&p.push(`${u}s`),e.textContent=p.join(" ")},r=window.setInterval(c,a?1e3:15e3);c()}}function $(o){let l=Array.from(o.querySelectorAll("[data-p60-accordion]")).filter(e=>!b(e,"accordion"));for(let e of l){let n=e.getAttribute("data-p60-accordion")!=="multi",t=Array.from(e.querySelectorAll("details"));for(let a of t){a.addEventListener("toggle",()=>{if(a.classList.toggle("is-open",a.open),a.open&&n)for(let i of t)i!==a&&i.open&&(i.open=!1)}),a.open&&a.classList.add("is-open");let r=a.querySelector("summary")?.nextElementSibling;r&&!L()&&a.addEventListener("toggle",()=>{if(!a.open)return;let i=r.scrollHeight;r.style.overflow="hidden",r.animate([{height:"0px",opacity:"0"},{height:`${i}px`,opacity:"1"}],{duration:260,easing:"ease-out"}).addEventListener("finish",()=>{r.style.overflow=""})})}}}function Y(o){let l=Array.from(o.querySelectorAll("[data-p60-carousel]")).filter(e=>!b(e,"carousel"));for(let e of l){let n=Array.from(e.querySelectorAll("[data-p60-slide]"));if(n.length<2)continue;let t=Math.max(0,n.findIndex(m=>m.classList.contains("is-active"))),a=!1,c=[],r=document.createElement("nav");r.className="p60-carousel-dots",r.setAttribute("aria-label","Slides"),n.forEach((m,h)=>{let v=document.createElement("button");v.type="button",v.className="p60-carousel-dot",v.setAttribute("aria-label",`Go to slide ${h+1}`),v.addEventListener("click",()=>i(h,!0)),c.push(v),r.appendChild(v)}),e.appendChild(r),e.setAttribute("aria-roledescription","carousel"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0");let i=(m,h=!1)=>{t=(m+n.length)%n.length,n.forEach((v,y)=>{v.classList.toggle("is-active",y===t),y===t?(v.removeAttribute("aria-hidden"),v.removeAttribute("inert")):(v.setAttribute("aria-hidden","true"),v.setAttribute("inert",""))}),c.forEach((v,y)=>{v.classList.toggle("p60-carousel-dot--active",y===t),v.setAttribute("aria-current",y===t?"true":"false")}),e.style.setProperty("--p60-carousel-index",String(t)),h&&p()};e.querySelectorAll("[data-p60-carousel-prev]").forEach(m=>m.addEventListener("click",()=>i(t-1,!0))),e.querySelectorAll("[data-p60-carousel-next]").forEach(m=>m.addEventListener("click",()=>i(t+1,!0))),e.addEventListener("keydown",m=>{m.key==="ArrowLeft"&&i(t-1,!0),m.key==="ArrowRight"&&i(t+1,!0)});let d=0,s=0;e.addEventListener("pointerdown",m=>{d=m.clientX,s=m.clientY}),e.addEventListener("pointerup",m=>{let h=m.clientX-d,v=m.clientY-s;Math.abs(h)>40&&Math.abs(h)>Math.abs(v)&&i(t+(h<0?1:-1),!0)}),e.addEventListener("mouseenter",()=>{a=!0}),e.addEventListener("mouseleave",()=>{a=!1}),e.addEventListener("focusin",()=>{a=!0}),e.addEventListener("focusout",()=>{a=!1});let f,g=e.getAttribute("data-p60-carousel")==="auto"&&!L(),u=Math.max(Number.parseInt(e.getAttribute("data-p60-interval")??"6000",10)||6e3,3e3),p=()=>{f!==void 0&&window.clearInterval(f),g&&(f=window.setInterval(()=>{!a&&!document.hidden&&i(t+1)},u))};i(t),p()}}function K(o){let l=Array.from(o.querySelectorAll("[data-p60-sticky-header]")).filter(e=>!b(e,"sticky-header"));for(let e of l){let n=e.getAttribute("data-p60-sticky-header")==="auto-hide",t=window.scrollY,a=!1,c=()=>{let r=window.scrollY;e.classList.toggle("is-condensed",r>24),n&&(r>160&&r>t?e.classList.add("is-hidden"):e.classList.remove("is-hidden")),t=r,a=!1};window.addEventListener("scroll",()=>{a||(a=!0,requestAnimationFrame(c))},{passive:!0}),c()}}function X(o){let l=Array.from(o.querySelectorAll("[data-p60-sticky-cta]")).filter(e=>!b(e,"sticky-cta"));for(let e of l){let n=Number.parseInt(e.getAttribute("data-p60-sticky-cta")??"480",10)||480,t=!1,a=()=>{e.classList.toggle("is-stuck",window.scrollY>n),t=!1};window.addEventListener("scroll",()=>{t||(t=!0,requestAnimationFrame(a))},{passive:!0}),a()}}function z(o){let l=Array.from(o.querySelectorAll("[data-p60-lightbox]")).filter(e=>!b(e,"lightbox"));for(let e of l){let n=Array.from(e.querySelectorAll("a[data-p60-lightbox-item]"));if(n.length===0)continue;let t=null,a=0,c=null,r=()=>{t?.remove(),t=null,e.classList.remove("is-open"),document.removeEventListener("keydown",d),c?.focus()},i=f=>{a=(f+n.length)%n.length;let g=n[a];if(!t)return;let u=t.querySelector(".p60-lightbox-img"),p=t.querySelector(".p60-lightbox-caption");u&&(u.src=g.href);let m=g.getAttribute("data-p60-caption")??g.querySelector("img")?.alt??"";p&&(p.textContent=m),u&&(u.alt=m)},d=f=>{if(f.key==="Escape"&&r(),f.key==="ArrowLeft"&&i(a-1),f.key==="ArrowRight"&&i(a+1),f.key==="Tab"&&t){let g=Array.from(t.querySelectorAll("button")),u=g.indexOf(document.activeElement),p=f.shiftKey?u<=0?g.length-1:u-1:u>=g.length-1?0:u+1;g[p]?.focus(),f.preventDefault()}},s=(f,g)=>{c=g,t=document.createElement("div"),t.className="p60-lightbox",t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),L()&&(t.style.transition="none"),t.innerHTML='<figure><img class="p60-lightbox-img" alt=""><figcaption class="p60-lightbox-caption"></figcaption></figure>';let u=(m,h,v)=>{let y=document.createElement("button");return y.type="button",y.className=m,y.setAttribute("aria-label",h),y.addEventListener("click",v),t.appendChild(y),y};n.length>1&&(u("p60-lightbox-prev","Previous image",()=>i(a-1)),u("p60-lightbox-next","Next image",()=>i(a+1)));let p=u("p60-lightbox-close","Close",r);t.addEventListener("click",m=>{m.target===t&&r()}),document.body.appendChild(t),e.classList.add("is-open"),document.addEventListener("keydown",d),i(f),p.focus()};n.forEach((f,g)=>f.addEventListener("click",u=>{u.preventDefault(),s(g,f)}))}}function U(o){let l=Array.from(o.querySelectorAll("[data-p60-tabs]")).filter(e=>!b(e,"tabs"));for(let e of l){let n=Array.from(e.querySelectorAll("[data-p60-tab]")),t=Array.from(e.querySelectorAll("[data-p60-panel]"));if(n.length===0||t.length===0)continue;let a=r=>t.find(i=>i.getAttribute("data-p60-panel")===r.getAttribute("data-p60-tab"));n[0].closest("[data-p60-tabs] > *")?.setAttribute("role","tablist");let c=(r,i=!1)=>{for(let d of n){let s=d===r;d.classList.toggle("is-active",s),d.setAttribute("aria-selected",s?"true":"false"),d.setAttribute("tabindex",s?"0":"-1")}for(let d of t){let s=d===a(r);d.classList.toggle("is-active",s),d.hidden=!s}i&&r.focus()};n.forEach((r,i)=>{r.setAttribute("role","tab"),r.addEventListener("click",d=>{d.preventDefault(),c(r)}),r.addEventListener("keydown",d=>{let s=d.key;s==="ArrowLeft"&&c(n[(i-1+n.length)%n.length],!0),s==="ArrowRight"&&c(n[(i+1)%n.length],!0),s==="Home"&&c(n[0],!0),s==="End"&&c(n[n.length-1],!0)})}),t.forEach(r=>r.setAttribute("role","tabpanel")),c(n.find(r=>r.classList.contains("is-active"))??n[0])}}var W=60,j=280,M=()=>window.matchMedia("(hover: hover)").matches,G='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',A=new Set,k=!1;function S(o){o.openTimer!==null&&(window.clearTimeout(o.openTimer),o.openTimer=null),o.closeTimer!==null&&(window.clearTimeout(o.closeTimer),o.closeTimer=null)}function E(o,l=!1){S(o);for(let e of Array.from(A))e!==o&&o.item.contains(e.item)&&E(e);o.item.classList.remove("is-open"),o.toggle.setAttribute("aria-expanded","false"),o.openedBy=null,A.delete(o),l&&o.toggle.focus()}function w(o,l){S(o);for(let e of Array.from(A))e!==o&&e.nav===o.nav&&!e.item.contains(o.item)&&E(e);o.item.classList.add("is-open"),o.toggle.setAttribute("aria-expanded","true"),o.openedBy=l,A.add(o)}function J(o){for(let e of Array.from(o.querySelectorAll("[data-p60-nav]"))){let n=Array.from(e.querySelectorAll("[data-p60-nav-item]")).filter(t=>t.closest("[data-p60-nav]")===e&&!b(t,"nav-item"));for(let t of n){let a=s=>s.closest("[data-p60-nav-item]")===t,c=Array.from(t.querySelectorAll("[data-p60-nav-toggle]")).find(a)??null,r=Array.from(t.querySelectorAll("[data-p60-nav-menu]")).find(a)??null;if(!c||!r)continue;let i={nav:e,item:t,toggle:c,menu:r,openedBy:null,lastPointer:"",openTimer:null,closeTimer:null},d=()=>A.has(i);c.setAttribute("aria-expanded","false"),r.id&&!c.hasAttribute("aria-controls")&&c.setAttribute("aria-controls",r.id),t.addEventListener("mouseenter",()=>{M()&&(i.closeTimer!==null&&(window.clearTimeout(i.closeTimer),i.closeTimer=null),!d()&&i.openTimer===null&&(i.openTimer=window.setTimeout(()=>{i.openTimer=null,w(i,"hover")},W)))}),t.addEventListener("mouseleave",()=>{M()&&(i.openTimer!==null&&(window.clearTimeout(i.openTimer),i.openTimer=null),d()&&i.openedBy==="hover"&&i.closeTimer===null&&(i.closeTimer=window.setTimeout(()=>{i.closeTimer=null,E(i)},j)))}),c.addEventListener("pointerdown",s=>{i.lastPointer=s.pointerType??""}),c.addEventListener("click",s=>{let f=s.detail===0||i.lastPointer==="touch"||i.lastPointer==="pen"||!M();if(!d()){s.preventDefault(),s.stopPropagation(),w(i,"toggle");return}!f&&i.openedBy==="hover"||(s.preventDefault(),s.stopPropagation(),E(i))}),c.addEventListener("keydown",s=>{s.key==="ArrowDown"&&(s.preventDefault(),d()||w(i,"toggle"),r.querySelector(G)?.focus())}),t.addEventListener("keydown",s=>{s.key==="Escape"&&d()&&(s.stopPropagation(),E(i,!0))}),t.addEventListener("focusin",s=>{s.target instanceof Node&&r.contains(s.target)&&!d()&&w(i,"focus")}),t.addEventListener("focusout",s=>{let f=s.relatedTarget;f instanceof Node&&!t.contains(f)&&d()&&E(i)})}if(!b(e,"nav-fit")){let a=u=>{for(let p=1;p<=3;p++)e.classList.toggle(`is-fit-${p}`,p<=u)},c=u=>{let p=u.getBoundingClientRect();return p.width>0||p.height>0?[u]:Array.from(u.children).flatMap(c)},r=u=>{let p=-1/0;for(let m of u.flatMap(c)){let h=m.getBoundingClientRect();if(p!==-1/0&&h.top>=p-2)return!0;p=Math.max(p,h.bottom)}return!1},i=()=>{if(e.scrollWidth>e.clientWidth+1||r(Array.from(e.children)))return!1;let u=e.parentElement;return!(u&&getComputedStyle(u).flexWrap==="wrap"&&r(Array.from(u.children)))},d=0,s=()=>{if(d=performance.now(),e.offsetParent===null||!getComputedStyle(e).flexDirection.startsWith("row")){a(0);return}a(0);let u=0;for(;!i()&&u<3;)a(++u);d=performance.now()},f=!1,g=()=>{f||(f=!0,requestAnimationFrame(()=>{f=!1,s()}))};window.addEventListener("resize",g,{passive:!0}),document.fonts?.ready.then(g).catch(()=>{}),document.fonts?.addEventListener("loadingdone",g),"ResizeObserver"in window&&new ResizeObserver(()=>{performance.now()-d>120&&g()}).observe(e),s()}}let l=Array.from(o.querySelectorAll("[data-p60-nav-burger]")).filter(e=>!b(e,"nav-burger"));for(let e of l){let n=e.getAttribute("aria-controls")||e.getAttribute("data-p60-nav-burger")||"",t=n?document.getElementById(n):null;if(!t)continue;let a=()=>t.classList.contains("is-open"),c=r=>{if(t.classList.toggle("is-open",r),e.classList.toggle("is-open",r),e.setAttribute("aria-expanded",String(r)),!r)for(let i of Array.from(A))t.contains(i.item)&&E(i)};e.setAttribute("aria-expanded","false"),e.addEventListener("click",r=>{r.stopPropagation(),c(!a())}),t.addEventListener("click",r=>{r.target instanceof Element&&r.target.closest("a")&&c(!1)}),document.addEventListener("keydown",r=>{r.key==="Escape"&&a()&&(c(!1),e.focus())}),document.addEventListener("click",r=>{a()&&r.target instanceof Node&&!t.contains(r.target)&&!e.contains(r.target)&&c(!1)}),window.addEventListener("resize",()=>{a()&&e.offsetParent===null&&c(!1)})}k||(k=!0,document.addEventListener("click",e=>{for(let n of Array.from(A))(!(e.target instanceof Node)||!n.item.contains(e.target))&&E(n)}))}var Q=[["reveal",R],["counter",_],["progress",D],["countdown",V],["accordion",$],["carousel",Y],["stickyHeader",K],["stickyCta",X],["lightbox",z],["tabs",U],["nav",J]];function Z(o=document){document.documentElement.classList.add("p60-js");for(let[l,e]of Q)try{e(o)}catch(n){console.warn(`[p60] behaviour "${l}" failed to initialise; the others still run`,n)}}return O(ee);})();
+"use strict";var p60Behaviors=(()=>{var N=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var F=(i,d)=>{for(var e in d)N(i,e,{get:d[e],enumerable:!0})},O=(i,d,e,n)=>{if(d&&typeof d=="object"||typeof d=="function")for(let t of B(d))!R.call(i,t)&&t!==e&&N(i,t,{get:()=>d[t],enumerable:!(n=C(d,t))||n.enumerable});return i};var _=i=>O(N({},"__esModule",{value:!0}),i);var se={};F(se,{initBehaviors:()=>ie});var M=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches;function v(i,d){let e=`data-p60-bound-${d}`;return i.hasAttribute(e)?!0:(i.setAttribute(e,""),!1)}var q=.15;function H(i,d){if(i.length===0)return;if(M()||!("IntersectionObserver"in window)){i.forEach(d);return}let e=new IntersectionObserver(n=>{for(let t of n){if(!t.isIntersecting)continue;(t.boundingClientRect.height>=window.innerHeight||t.intersectionRatio>=q-.001)&&(e.unobserve(t.target),d(t.target))}},{rootMargin:"0px 0px -10% 0px",threshold:[0,q]});i.forEach(n=>e.observe(n))}function D(i){let d=Array.from(i.querySelectorAll("[data-p60-reveal-group]")).filter(n=>!v(n,"reveal-group"));for(let n of d)Array.from(n.children).forEach((t,r)=>{t.style.setProperty("--p60-reveal-index",String(r)),t.classList.add("p60-reveal-child")});H(d,n=>n.classList.add("is-revealed"));let e=Array.from(i.querySelectorAll("[data-p60-reveal]")).filter(n=>!v(n,"reveal"));H(e,n=>n.classList.add("is-revealed"))}var $=/\d[\d,   ]*(?:\.\d+)?/;function V(i){let d=Array.from(i.querySelectorAll("[data-p60-count]")).filter(e=>!v(e,"count"));H(d,e=>{e.classList.add("is-revealed");let n=e.textContent??"",t=$.exec(n);if(!t)return;let r=t[0].replace(/[,   ]+$/,""),l=n.slice(0,t.index),o=n.slice(t.index+r.length),s=/[,   ]/.test(r),c=r.includes(".")?r.length-r.indexOf(".")-1:0,a=Number.parseFloat(r.replace(/[,   ]/g,"")),u=Number.parseFloat(e.getAttribute("data-p60-count")??""),m=Number.isFinite(u)?u:a;if(!Number.isFinite(m)||M())return;let f=Math.min(Number.parseInt(e.getAttribute("data-p60-count-duration")??"1200",10)||1200,4e3),p=new Intl.NumberFormat(document.documentElement.lang||void 0,{useGrouping:s,minimumFractionDigits:c,maximumFractionDigits:c}),b=performance.now(),E=y=>{let A=Math.min((y-b)/f,1),g=1-Math.pow(1-A,3);e.textContent=A<1?l+p.format(m*g)+o:n,A<1&&requestAnimationFrame(E)};requestAnimationFrame(E)})}function Y(i){let d=Array.from(i.querySelectorAll("[data-p60-progress]")).filter(e=>!v(e,"progress"));if(!M()){for(let e of d){let n=e.style.width||getComputedStyle(e).width;e.style.transition="none",e.style.width="0px",e.offsetWidth,e.style.transition="width 1.1s cubic-bezier(0.22, 1, 0.36, 1)",e.dataset.p60ProgressTarget=n}H(d,e=>{e.classList.add("is-revealed"),e.style.width=e.dataset.p60ProgressTarget??""})}}function z(i){let d=Array.from(i.querySelectorAll("[data-p60-countdown]")).filter(e=>!v(e,"countdown"));for(let e of d){let n=Date.parse(e.getAttribute("data-p60-until")??"");if(!Number.isFinite(n))continue;let t=e.getAttribute("data-p60-countdown")||"dhm",r=t==="dhms",l=()=>{let s=n-Date.now();if(s<=0){e.classList.add("is-elapsed");let b=e.getAttribute("data-p60-elapsed-text");b&&(e.textContent=b),window.clearInterval(o);return}let c=Math.floor(s/1e3),a=Math.floor(c/86400),u=Math.floor(c%86400/3600),m=Math.floor(c%3600/60),f=c%60,p=[];t.includes("d")&&a>0&&p.push(`${a}d`),p.push(`${u}h`,`${m}m`),r&&p.push(`${f}s`),e.textContent=p.join(" ")},o=window.setInterval(l,r?1e3:15e3);l()}}function K(i){let d=Array.from(i.querySelectorAll("[data-p60-accordion]")).filter(e=>!v(e,"accordion"));for(let e of d){let n=e.getAttribute("data-p60-accordion")!=="multi",t=Array.from(e.querySelectorAll("details"));for(let r of t){r.addEventListener("toggle",()=>{if(r.classList.toggle("is-open",r.open),r.open&&n)for(let s of t)s!==r&&s.open&&(s.open=!1)}),r.open&&r.classList.add("is-open");let o=r.querySelector("summary")?.nextElementSibling;o&&!M()&&r.addEventListener("toggle",()=>{if(!r.open)return;let s=o.scrollHeight;o.style.overflow="hidden",o.animate([{height:"0px",opacity:"0"},{height:`${s}px`,opacity:"1"}],{duration:260,easing:"ease-out"}).addEventListener("finish",()=>{o.style.overflow=""})})}}}function U(i){let d=Array.from(i.querySelectorAll("[data-p60-carousel]")).filter(e=>!v(e,"carousel"));for(let e of d){let n=Array.from(e.querySelectorAll("[data-p60-slide]"));if(n.length<2)continue;let t=Math.max(0,n.findIndex(g=>g.classList.contains("is-active"))),r=[],l=document.createElement("nav");l.className="p60-carousel-dots",l.setAttribute("aria-label","Slides"),n.forEach((g,L)=>{let h=document.createElement("button");h.type="button",h.className="p60-carousel-dot",h.setAttribute("aria-label",`Go to slide ${L+1}`),h.addEventListener("click",()=>o(L,!0)),r.push(h),l.appendChild(h)}),e.appendChild(l),e.setAttribute("aria-roledescription","carousel"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0");let o=(g,L=!1)=>{t=(g+n.length)%n.length,n.forEach((h,x)=>{h.classList.toggle("is-active",x===t),x===t?(h.removeAttribute("aria-hidden"),h.removeAttribute("inert")):(h.setAttribute("aria-hidden","true"),h.setAttribute("inert",""))}),r.forEach((h,x)=>{h.classList.toggle("p60-carousel-dot--active",x===t),h.setAttribute("aria-current",x===t?"true":"false")}),e.style.setProperty("--p60-carousel-index",String(t)),L&&E()};e.querySelectorAll("[data-p60-carousel-prev]").forEach(g=>g.addEventListener("click",()=>o(t-1,!0))),e.querySelectorAll("[data-p60-carousel-next]").forEach(g=>g.addEventListener("click",()=>o(t+1,!0))),e.addEventListener("keydown",g=>{g.key==="ArrowLeft"&&o(t-1,!0),g.key==="ArrowRight"&&o(t+1,!0)});let s=0,c=0;e.addEventListener("pointerdown",g=>{s=g.clientX,c=g.clientY}),e.addEventListener("pointerup",g=>{let L=g.clientX-s,h=g.clientY-c;Math.abs(L)>40&&Math.abs(L)>Math.abs(h)&&o(t+(L<0?1:-1),!0)});let a=!1,u=!1,m,f=e.getAttribute("data-p60-carousel")==="auto"&&!M(),p=Math.max(Number.parseInt(e.getAttribute("data-p60-interval")??"6000",10)||6e3,3e3),b=()=>{m!==void 0&&window.clearInterval(m),m=void 0},E=()=>{b(),!(!f||u||M())&&(m=window.setInterval(()=>{!a&&!document.hidden&&o(t+1)},p))},y=null,A=g=>{u=g,e.classList.toggle("is-paused",u),y&&(y.setAttribute("aria-label",u?"Start slide rotation":"Stop slide rotation"),y.classList.toggle("p60-carousel-pause--stopped",u)),E()};f&&(y=document.createElement("button"),y.type="button",y.className="p60-carousel-pause",y.setAttribute("aria-label","Stop slide rotation"),y.addEventListener("click",()=>A(!u)),l.insertBefore(y,l.firstChild)),e.addEventListener("mouseenter",()=>{a=!0}),e.addEventListener("mouseleave",()=>{a=!1}),e.addEventListener("focusin",g=>{g.target!==y&&m!==void 0&&A(!0)}),window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener?.("change",g=>{g.matches&&A(!0)}),o(t),E()}}function X(i){let d=Array.from(i.querySelectorAll("[data-p60-sticky-header]")).filter(e=>!v(e,"sticky-header"));for(let e of d){let n=e.getAttribute("data-p60-sticky-header")==="auto-hide",t=window.scrollY,r=!1,l=()=>{let o=window.scrollY;e.classList.toggle("is-condensed",o>24),n&&(o>160&&o>t?e.classList.add("is-hidden"):e.classList.remove("is-hidden")),t=o,r=!1};window.addEventListener("scroll",()=>{r||(r=!0,requestAnimationFrame(l))},{passive:!0}),l()}}function W(i){let d=Array.from(i.querySelectorAll("[data-p60-sticky-cta]")).filter(e=>!v(e,"sticky-cta"));for(let e of d){let n=Number.parseInt(e.getAttribute("data-p60-sticky-cta")??"480",10)||480,t=!1,r=()=>{e.classList.toggle("is-stuck",window.scrollY>n),t=!1};window.addEventListener("scroll",()=>{t||(t=!0,requestAnimationFrame(r))},{passive:!0}),r()}}function j(i){let d=Array.from(i.querySelectorAll("[data-p60-lightbox]")).filter(e=>!v(e,"lightbox"));for(let e of d){let n=Array.from(e.querySelectorAll("a[data-p60-lightbox-item]"));if(n.length===0)continue;let t=null,r=0,l=null,o=()=>{t?.remove(),t=null,e.classList.remove("is-open"),document.removeEventListener("keydown",c),l?.focus()},s=u=>{r=(u+n.length)%n.length;let m=n[r];if(!t)return;let f=t.querySelector(".p60-lightbox-img"),p=t.querySelector(".p60-lightbox-caption");f&&(f.src=m.href);let b=m.getAttribute("data-p60-caption")??m.querySelector("img")?.alt??"";p&&(p.textContent=b),f&&(f.alt=b)},c=u=>{if(u.key==="Escape"&&o(),u.key==="ArrowLeft"&&s(r-1),u.key==="ArrowRight"&&s(r+1),u.key==="Tab"&&t){let m=Array.from(t.querySelectorAll("button")),f=m.indexOf(document.activeElement),p=u.shiftKey?f<=0?m.length-1:f-1:f>=m.length-1?0:f+1;m[p]?.focus(),u.preventDefault()}},a=(u,m)=>{l=m,t=document.createElement("div"),t.className="p60-lightbox",t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),M()&&(t.style.transition="none"),t.innerHTML='<figure><img class="p60-lightbox-img" alt=""><figcaption class="p60-lightbox-caption"></figcaption></figure>';let f=(b,E,y)=>{let A=document.createElement("button");return A.type="button",A.className=b,A.setAttribute("aria-label",E),A.addEventListener("click",y),t.appendChild(A),A};n.length>1&&(f("p60-lightbox-prev","Previous image",()=>s(r-1)),f("p60-lightbox-next","Next image",()=>s(r+1)));let p=f("p60-lightbox-close","Close",o);t.addEventListener("click",b=>{b.target===t&&o()}),document.body.appendChild(t),e.classList.add("is-open"),document.addEventListener("keydown",c),s(u),p.focus()};n.forEach((u,m)=>u.addEventListener("click",f=>{f.preventDefault(),a(m,u)}))}}function G(i){let d=Array.from(i.querySelectorAll("[data-p60-tabs]")).filter(e=>!v(e,"tabs"));for(let e of d){let n=Array.from(e.querySelectorAll("[data-p60-tab]")),t=Array.from(e.querySelectorAll("[data-p60-panel]"));if(n.length===0||t.length===0)continue;let r=o=>t.find(s=>s.getAttribute("data-p60-panel")===o.getAttribute("data-p60-tab"));n[0].closest("[data-p60-tabs] > *")?.setAttribute("role","tablist");let l=(o,s=!1)=>{for(let c of n){let a=c===o;c.classList.toggle("is-active",a),c.setAttribute("aria-selected",a?"true":"false"),c.setAttribute("tabindex",a?"0":"-1")}for(let c of t){let a=c===r(o);c.classList.toggle("is-active",a),c.hidden=!a}s&&o.focus()};n.forEach((o,s)=>{o.setAttribute("role","tab"),o.addEventListener("click",c=>{c.preventDefault(),l(o)}),o.addEventListener("keydown",c=>{let a=c.key;a==="ArrowLeft"&&l(n[(s-1+n.length)%n.length],!0),a==="ArrowRight"&&l(n[(s+1)%n.length],!0),a==="Home"&&l(n[0],!0),a==="End"&&l(n[n.length-1],!0)})}),t.forEach(o=>o.setAttribute("role","tabpanel")),l(n.find(o=>o.classList.contains("is-active"))??n[0])}}var J=60,Q=280,k=()=>window.matchMedia("(hover: hover)").matches,Z='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',T=new Set,P=!1;function I(i){i.openTimer!==null&&(window.clearTimeout(i.openTimer),i.openTimer=null),i.closeTimer!==null&&(window.clearTimeout(i.closeTimer),i.closeTimer=null)}function w(i,d=!1){I(i);for(let e of Array.from(T))e!==i&&i.item.contains(e.item)&&w(e);i.item.classList.remove("is-open"),i.toggle.setAttribute("aria-expanded","false"),i.openedBy=null,T.delete(i),d&&i.toggle.focus()}function S(i,d){I(i);for(let e of Array.from(T))e!==i&&e.nav===i.nav&&!e.item.contains(i.item)&&w(e);i.item.classList.add("is-open"),i.toggle.setAttribute("aria-expanded","true"),i.openedBy=d,T.add(i)}function ee(i){for(let e of Array.from(i.querySelectorAll("[data-p60-nav]"))){let n=Array.from(e.querySelectorAll("[data-p60-nav-item]")).filter(t=>t.closest("[data-p60-nav]")===e&&!v(t,"nav-item"));for(let t of n){let r=a=>a.closest("[data-p60-nav-item]")===t,l=Array.from(t.querySelectorAll("[data-p60-nav-toggle]")).find(r)??null,o=Array.from(t.querySelectorAll("[data-p60-nav-menu]")).find(r)??null;if(!l||!o)continue;let s={nav:e,item:t,toggle:l,menu:o,openedBy:null,lastPointer:"",openTimer:null,closeTimer:null},c=()=>T.has(s);l.setAttribute("aria-expanded","false"),o.id&&!l.hasAttribute("aria-controls")&&l.setAttribute("aria-controls",o.id),t.addEventListener("mouseenter",()=>{k()&&(s.closeTimer!==null&&(window.clearTimeout(s.closeTimer),s.closeTimer=null),!c()&&s.openTimer===null&&(s.openTimer=window.setTimeout(()=>{s.openTimer=null,S(s,"hover")},J)))}),t.addEventListener("mouseleave",()=>{k()&&(s.openTimer!==null&&(window.clearTimeout(s.openTimer),s.openTimer=null),c()&&s.openedBy==="hover"&&s.closeTimer===null&&(s.closeTimer=window.setTimeout(()=>{s.closeTimer=null,w(s)},Q)))}),l.addEventListener("pointerdown",a=>{s.lastPointer=a.pointerType??""}),l.addEventListener("click",a=>{let u=a.detail===0||s.lastPointer==="touch"||s.lastPointer==="pen"||!k();if(!c()){a.preventDefault(),a.stopPropagation(),S(s,"toggle");return}!u&&s.openedBy==="hover"||(a.preventDefault(),a.stopPropagation(),w(s))}),l.addEventListener("keydown",a=>{a.key==="ArrowDown"&&(a.preventDefault(),c()||S(s,"toggle"),o.querySelector(Z)?.focus())}),t.addEventListener("keydown",a=>{a.key==="Escape"&&c()&&(a.stopPropagation(),w(s,!0))}),t.addEventListener("focusin",a=>{a.target instanceof Node&&o.contains(a.target)&&!c()&&S(s,"focus")}),t.addEventListener("focusout",a=>{let u=a.relatedTarget;u instanceof Node&&!t.contains(u)&&c()&&w(s)})}if(!v(e,"nav-fit")){let r=f=>{for(let p=1;p<=3;p++)e.classList.toggle(`is-fit-${p}`,p<=f)},l=f=>{let p=f.getBoundingClientRect();return p.width>0||p.height>0?[f]:Array.from(f.children).flatMap(l)},o=f=>{let p=-1/0;for(let b of f.flatMap(l)){let E=b.getBoundingClientRect();if(p!==-1/0&&E.top>=p-2)return!0;p=Math.max(p,E.bottom)}return!1},s=()=>{if(e.scrollWidth>e.clientWidth+1||o(Array.from(e.children)))return!1;let f=e.parentElement;return!(f&&getComputedStyle(f).flexWrap==="wrap"&&o(Array.from(f.children)))},c=0,a=()=>{if(c=performance.now(),e.offsetParent===null||!getComputedStyle(e).flexDirection.startsWith("row")){r(0);return}r(0);let f=0;for(;!s()&&f<3;)r(++f);c=performance.now()},u=!1,m=()=>{u||(u=!0,requestAnimationFrame(()=>{u=!1,a()}))};window.addEventListener("resize",m,{passive:!0}),document.fonts?.ready.then(m).catch(()=>{}),document.fonts?.addEventListener("loadingdone",m),"ResizeObserver"in window&&new ResizeObserver(()=>{performance.now()-c>120&&m()}).observe(e),a()}}let d=Array.from(i.querySelectorAll("[data-p60-nav-burger]")).filter(e=>!v(e,"nav-burger"));for(let e of d){let n=e.getAttribute("aria-controls")||e.getAttribute("data-p60-nav-burger")||"",t=n?document.getElementById(n):null;if(!t)continue;let r=()=>t.classList.contains("is-open"),l=o=>{if(t.classList.toggle("is-open",o),e.classList.toggle("is-open",o),e.setAttribute("aria-expanded",String(o)),!o)for(let s of Array.from(T))t.contains(s.item)&&w(s)};e.setAttribute("aria-expanded","false"),e.addEventListener("click",o=>{o.stopPropagation(),l(!r())}),t.addEventListener("click",o=>{o.target instanceof Element&&o.target.closest("a")&&l(!1)}),document.addEventListener("keydown",o=>{o.key==="Escape"&&r()&&(l(!1),e.focus())}),document.addEventListener("click",o=>{r()&&o.target instanceof Node&&!t.contains(o.target)&&!e.contains(o.target)&&l(!1)}),window.addEventListener("resize",()=>{r()&&e.offsetParent===null&&l(!1)})}P||(P=!0,document.addEventListener("click",e=>{for(let n of Array.from(T))(!(e.target instanceof Node)||!n.item.contains(e.target))&&w(n)}))}function te(i){let d=Array.from(i.querySelectorAll("[data-p60-reading-progress]")).filter(e=>!v(e,"reading-progress"));for(let e of d){let n=e.getAttribute("data-p60-reading-target"),t=n?document.getElementById(n):null;if(n&&!t)continue;e.setAttribute("role","progressbar"),e.setAttribute("aria-valuemin","0"),e.setAttribute("aria-valuemax","100"),!e.hasAttribute("aria-label")&&!e.hasAttribute("aria-labelledby")&&e.setAttribute("aria-label","Reading progress");let r=!1,l=()=>{let s=window.innerHeight,c=0,a=Math.max(document.documentElement.scrollHeight-s,0);if(t){let m=t.getBoundingClientRect();c=m.top+window.scrollY,a=Math.max(m.height-s,0)}let u=a===0?window.scrollY>=c?1:0:Math.min(Math.max((window.scrollY-c)/a,0),1);e.style.setProperty("--p60-reading-progress",u.toFixed(4)),e.setAttribute("aria-valuenow",String(Math.round(u*100))),e.classList.toggle("is-started",u>0),e.classList.toggle("is-complete",u>=1),r=!1},o=()=>{r||(r=!0,requestAnimationFrame(l))};window.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),l()}}function ne(i){let d=Array.from(i.querySelectorAll("[data-p60-show-more]")).filter(e=>!v(e,"show-more"));for(let e of d){let n=Math.max(Number.parseInt(e.getAttribute("data-p60-show-more")??"6",10)||6,1),t=Array.from(e.querySelectorAll("[data-p60-show-more-item]")),r=e.querySelector("[data-p60-show-more-toggle]")??(e.id?document.querySelector(`[data-p60-show-more-toggle][aria-controls="${e.id}"]`):null);if(!r)continue;let l=t.slice(n);if(l.length===0){r.hidden=!0;continue}let o=r.textContent??"",s=r.getAttribute("data-p60-show-more-toggle")??"";e.id&&!r.hasAttribute("aria-controls")&&r.setAttribute("aria-controls",e.id);let c=a=>{for(let u of l)u.hidden=!a;e.classList.toggle("is-expanded",a),r.setAttribute("aria-expanded",a?"true":"false"),s&&(r.textContent=a?s:o)};r.addEventListener("click",()=>c(r.getAttribute("aria-expanded")!=="true")),c(e.classList.contains("is-expanded"))}}function oe(i){let d=Array.from(i.querySelectorAll("[data-p60-scrollspy]")).filter(e=>!v(e,"scrollspy"));for(let e of d){let n=Number.parseInt(e.getAttribute("data-p60-scrollspy")??"96",10)||96,t=[];for(let s of Array.from(e.querySelectorAll('a[href^="#"]'))){let c=decodeURIComponent((s.getAttribute("href")??"").slice(1)),a=c?document.getElementById(c):null;a&&t.push({link:s,target:a})}if(t.length===0)continue;let r=!1,l=()=>{let s=null,c=-1/0;for(let{link:a,target:u}of t){let m=u.getBoundingClientRect().top;m<=n&&m>c&&(c=m,s=a)}for(let{link:a}of t){let u=a===s;a.classList.toggle("is-current",u),u?a.setAttribute("aria-current","location"):a.removeAttribute("aria-current")}r=!1},o=()=>{r||(r=!0,requestAnimationFrame(l))};window.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),window.addEventListener("hashchange",o),l()}}var re=[["reveal",D],["counter",V],["progress",Y],["countdown",z],["accordion",K],["carousel",U],["stickyHeader",X],["stickyCta",W],["lightbox",j],["tabs",G],["readingProgress",te],["showMore",ne],["scrollspy",oe],["nav",ee]];function ie(i=document){document.documentElement.classList.add("p60-js");for(let[d,e]of re)try{e(i)}catch(n){console.warn(`[p60] behaviour "${d}" failed to initialise; the others still run`,n)}}return _(se);})();

package/src/vendor/validator/fonts.mjs

@@ -0,0 +1,53 @@
+// Font-slot resolution for the DEV preview, the same rules as the engine's fonts.ts: the template
+// declares font knobs (slot, default family, the weights its type system uses); a chosen family
+// becomes a --p60s-<key> variable with an honest fallback stack and ONE stylesheet URL for every
+// chosen family at the slot's weights, clamped to the family's real weights. Served from the
+// catalogue's provider (Bunny Fonts, the privacy-first mirror of the Google catalogue).
+import catalogue from '../contract/v1/fonts.json' with { type: 'json' };
+
+const byName = new Map(catalogue.families.map((f) => [f.name, f]));
+
+export const FONT_PROVIDER_ORIGIN = new URL(catalogue.provider.cssBase).origin;
+
+/** A catalogue-valid family name, else null. */
+export function knownFamily(name) {
+  return typeof name === 'string' && byName.has(name) ? name : null;
+}
+
+/** The CSS font-family value for a slot: quoted family plus its honest generic fallback. */
+export function fontStackFor(name) {
+  const family = byName.get(name);
+  return family ? `'${family.name}', ${family.stack}` : `'${name}', sans-serif`;
+}
+
+function nearestWeight(target, available) {
+  let best = available[0];
+  for (const w of available) {
+    const d = Math.abs(w - target);
+    const bestD = Math.abs(best - target);
+    if (d < bestD || (d === bestD && w > best)) best = w;
+  }
+  return best;
+}
+
+/** One css2 URL covering every chosen family at its slot's clamped weights, or null. */
+export function fontCssHref(slots) {
+  const weightsByFamily = new Map();
+  for (const slot of slots) {
+    const family = byName.get(slot.family);
+    if (!family) continue;
+    const set = weightsByFamily.get(family.name) ?? new Set();
+    const asked = slot.weights?.length > 0 ? slot.weights : [400, 700];
+    for (const weight of asked) set.add(nearestWeight(weight, family.weights));
+    weightsByFamily.set(family.name, set);
+  }
+  if (weightsByFamily.size === 0) return null;
+  const parts = [...weightsByFamily.entries()].map(([name, weights]) =>
+    `family=${name.replace(/ /g, '+')}:wght@${[...weights].sort((a, b) => a - b).join(';')}`);
+  return `${catalogue.provider.cssBase}?${parts.join('&')}&display=swap`;
+}
+
+/** A template's own Google Fonts URL, rewritten to the mirror (same css2 API). */
+export function toProvider(url) {
+  return String(url).replace('https://fonts.googleapis.com/', `${FONT_PROVIDER_ORIGIN}/`);
+}

package/src/vendor/validator/icons.mjs

@@ -0,0 +1,37 @@
+// Icon resolution for the preview, the same rule as the engine's icons.ts: content carries a
+// Lucide icon NAME ("heart-handshake"), the platform supplies `iconSvg` on items[] entries, and
+// the template renders it through the dialect's `raw` filter. Unknown names resolve to '' so a
+// template's `{% if item.iconSvg %}` branch falls back to the plain name, exactly as it does live.
+import * as lucide from 'lucide-static';
+
+const table = lucide;
+const cache = new Map();
+
+/** "heart-handshake" / "heart_handshake" / "HeartHandshake" -> "HeartHandshake" (the lucide-static key). */
+function pascal(name) {
+  return name.trim().split(/[-_\s]+/).filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
+}
+
+/** Resolve a Lucide icon name to its SVG string, or '' when blank or unknown. */
+export function iconSvg(name) {
+  if (!name || typeof name !== 'string') return '';
+  const key = name.trim();
+  const cached = cache.get(key);
+  if (cached !== undefined) return cached;
+  const svg = table[pascal(key)];
+  const out = typeof svg === 'string' ? svg : '';
+  cache.set(key, out);
+  return out;
+}
+
+/** Add a resolved iconSvg to any items[] entries that carry an icon NAME; unchanged otherwise. */
+export function withResolvedIcons(content) {
+  if (!content || typeof content !== 'object' || !Array.isArray(content.items)) return content;
+  const items = content.items.map((item) => {
+    if (item && typeof item === 'object' && typeof item.icon === 'string' && item.icon) {
+      return { ...item, iconSvg: iconSvg(item.icon) };
+    }
+    return item;
+  });
+  return { ...content, items };
+}

package/src/vendor/validator/platform-base.css

@@ -4709,3 +4709,26 @@ textarea.p60-form-control {
   border-radius: 10px; margin: 0 0 10px; }
 .impact-map-popup-card .impact-map-card-image { width: calc(100% + 32px); margin: -14px -16px 10px;
   border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0; }
+
+/* ---- Public listings (docs/reference/public-listings.md) ----
+   Every list is one page at a time; these are the shared "more" affordances: the SSR pager on
+   the campaigns index, the events filter row's gap, and the volunteer chooser's "Show more" row. */
+.listing-pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.75rem;
+}
+.listing-pager-status {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.event-filters-gap {
+  flex: 1 1 auto;
+}
+.vol-more {
+  justify-content: center;
+  text-align: center;
+}

package/src/vendor/validator/preview.mjs

@@ -16,7 +16,9 @@ import sectionCatalogue from '../contract/v1/sections.json' with { type: 'json'
 import islandRegistry from '../contract/v1/islands.json' with { type: 'json' };
 import contextContract from '../contract/v1/context.json' with { type: 'json' };
 import { resolveFixtureArt } from './fixture-art.mjs';
-import { buildSiteFixture, applyPreviewContent } from './site-context.mjs';
+import { buildSiteFixture, applyPreviewContent, pageComposition, PAGE_KEYS } from './site-context.mjs';
+import { withResolvedIcons } from './icons.mjs';
+import { FONT_PROVIDER_ORIGIN, fontCssHref, fontStackFor, knownFamily, toProvider } from './fonts.mjs';
 import { normaliseFocus, previewActions, withResolvedActions, applyFocus } from './focus.mjs';
 
 // Fixture imagery resolved for the SEALED studio render (p60fixture: refs become inline-SVG data
@@ -351,6 +353,13 @@ function courseListingSkeleton(fx = STUDIO_FX) {
   </div></section>`;
 }
 
+/** The platform's own About body, for a template that does not declare the about page: the
+ *  composition's sections listed as skeletons, the way the platform renders them itself live. */
+function aboutSkeleton(fx, composition = []) {
+  const rows = composition.map((s) => `<article class="event-card"><div class="event-card-body"><h3>${escapeHtml(s.type)}</h3><p class="event-card-when">rendered by the platform</p></div></article>`).join('');
+  return `${surfaceDivider('about')}<section class="section"><div class="container"><h1>About us</h1>${rows}</div></section>`;
+}
+
 // surface → { pageTemplate to prefer when the theme declares it, builtin skeleton }
 const SURFACES = {
   events: { template: 'events', builtin: eventsListingSkeleton },
@@ -366,14 +375,14 @@ const SURFACES = {
 };
 
 /** The routed dev preview's surface names (plus 'home'). */
-export const PREVIEW_SURFACES = ['home', ...Object.keys(SURFACES)];
+export const PREVIEW_SURFACES = ['home', 'about', ...Object.keys(SURFACES)];
 
-function surfaceBar(active, focus = 'donate') {
+function surfaceBar(active, focus = 'donate', looks = [], activeLook = null) {
   const withFocus = (href) => (focus === 'donate' ? href : `${href}${href.includes('?') ? '&' : '?'}focus=${focus}`);
   const link = (name, href) =>
     `<a href="${withFocus(href)}"${name === active ? ' style="font-weight:700;text-decoration:underline"' : ''}>${name}</a>`;
   const links = [
-    link('home', '/'), link('events', '/events'), link('event', '/events?event=fixture'),
+    link('home', '/'), link('about', '/about'), link('events', '/events'), link('event', '/events?event=fixture'),
     link('services', '/services'), link('service', '/services?service=fixture'),
     link('donate', '/donate'), link('articles', '/articles'), link('article', '/articles/fixture'),
     link('campaigns', '/campaigns'), link('campaign', '/campaigns/fixture'), link('course', '/courses'),
@@ -384,11 +393,21 @@ function surfaceBar(active, focus = 'donate') {
   const focusLink = (value, label) =>
     `<a href="${value === 'donate' ? '/' : `/?focus=${value}`}"${value === focus ? ' style="font-weight:700;text-decoration:underline"' : ''}>${label}</a>`;
   const focusLinks = [focusLink('donate', 'giving'), focusLink('volunteer', 'volunteering'), focusLink('none', 'buttons only')];
+  // Looks: the author's one-click bundles, switchable here the way a charity switches them in
+  // Appearance; ?look= on any URL, and ?p60s-<key>=<value> for a single knob.
+  const lookLink = (name, href) =>
+    `<a href="${href}"${name === activeLook ? ' style="font-weight:700;text-decoration:underline"' : ''}>${escapeHtml(name)}</a>`;
+  const lookLinks = looks.length
+    ? [lookLink(null, '/').replace('>null<', '>defaults<'), ...looks.map((l) => lookLink(l.name, `/?look=${encodeURIComponent(l.name)}`))]
+    : [];
   return `<nav class="p60-preview-surfaces" aria-label="Preview surfaces" style="position:sticky;top:0;z-index:99;display:flex;gap:12px;flex-wrap:wrap;padding:8px 14px;font:12px/1.4 system-ui,sans-serif;background:#0b1220;color:#e6e9f2;opacity:.94">
     <strong style="letter-spacing:.06em;text-transform:uppercase;font-size:10px">Surfaces</strong>${links.join('')}
     <span style="flex-basis:100%;height:0"></span>
     <strong style="letter-spacing:.06em;text-transform:uppercase;font-size:10px">Leads with</strong>${focusLinks.join('')}
-    <span style="opacity:.7">the hero widget becomes the donation widget, the volunteer sign-up, or nothing; the buttons follow</span>
+    <span style="opacity:.7">the hero widget becomes the donation widget, the volunteer sign-up, or nothing; the buttons follow</span>${lookLinks.length ? `
+    <span style="flex-basis:100%;height:0"></span>
+    <strong style="letter-spacing:.06em;text-transform:uppercase;font-size:10px">Looks</strong>${lookLinks.join('')}
+    <span style="opacity:.7">?look=name, or ?p60s-key=value for one knob</span>` : ''}
   </nav>`;
 }
 
@@ -402,23 +421,37 @@ function partsToHtml(html, contentHtml, ctx = {}, fx = STUDIO_FX) {
   return out;
 }
 
-/** Knob defaults → the same body attributes / CSS vars TemplateHost stamps, minus network fonts
- *  (the CSP kills font fetches by design; system fallbacks are fine for a structural preview). */
-function knobDefaults(manifest) {
+/**
+ * Knob values → the same body attributes / CSS vars TemplateHost stamps, with the same guards: an
+ * override (a Look, or ?p60s-<key>=) wins over the default; a select value that is not one of the
+ * knob's options falls back to the default; a font must be a catalogue family. Font slots come
+ * back too, so the dev preview can load the one stylesheet production would (the studio stays
+ * sealed and renders the fallback stacks).
+ */
+function knobValues(manifest, overrides = {}) {
   const attrs = [];
   const vars = [];
+  const fontSlots = [];
   for (const knob of manifest?.settings?.schema ?? []) {
-    const value = knob.default;
-    if (value == null || value === '') continue;
+    const raw = overrides[knob.key] ?? knob.default;
+    if (raw == null || raw === '') continue;
+    const value = String(raw);
     if (knob.kind === 'color') {
-      if (/^#[0-9a-fA-F]{3,8}$/.test(String(value))) vars.push(`--p60s-${knob.key}: ${value};`);
+      if (/^#[0-9a-fA-F]{3,8}$/.test(value)) vars.push(`--p60s-${knob.key}: ${value};`);
     } else if (knob.kind === 'font') {
-      vars.push(`--p60s-${knob.key}: '${String(value).replace(/'/g, '')}', system-ui, sans-serif;`);
+      const family = knownFamily(value) ?? knownFamily(knob.default);
+      if (family) {
+        fontSlots.push({ family, weights: knob.weights ?? [] });
+        vars.push(`--p60s-${knob.key}: ${fontStackFor(family)};`);
+      }
     } else {
-      attrs.push(`data-p60s-${knob.key}="${escapeHtml(String(value))}"`);
+      const options = Array.isArray(knob.options) ? knob.options : null;
+      const chosen = options && !options.includes(value) ? knob.default : raw;
+      if (chosen == null || chosen === '') continue;
+      attrs.push(`data-p60s-${knob.key}="${escapeHtml(String(chosen))}"`);
     }
   }
-  return { attrs: attrs.join(' '), vars: vars.join(' ') };
+  return { attrs: attrs.join(' '), vars: vars.join(' '), fontSlots };
 }
 
 /**
@@ -446,8 +479,15 @@ export async function renderStudioPreview(files, options = {}) {
   // The one content tree (content model v1): about composed from this manifest's declared
   // sections, dev preview-content overlaid when the kit passes it (validated there), imagery
   // resolved exactly like the rest of the fixtures.
+  const surface = options.surface ?? 'home';
+  // The section-based pages: home and about compose from supports.pages and the catalogue's page
+  // assignment (or the preview-content `pages` block, the admin-authored composition previewed).
+  // The tree's `about` is the composition of the page being rendered, as it is live.
+  const pageOf = (page) => pageComposition(manifest, page, options.previewContent);
+  const treePage = PAGE_KEYS.includes(surface) ? surface : 'home';
+  const baseSite = buildSiteFixture(manifest, { page: treePage });
   const site = applyFocus(resolveFixtureArt(
-    applyPreviewContent(buildSiteFixture(manifest), options.previewContent ?? null),
+    applyPreviewContent({ ...baseSite, content: { ...baseSite.content, about: pageOf(treePage) } }, options.previewContent ?? null),
     artOptions ?? {}), actions);
   const brand = site.brand ?? fx.brand;
   // With a content override, the TREE is the source of truth for every fixture view: the routed
@@ -481,7 +521,6 @@ export async function renderStudioPreview(files, options = {}) {
     };
   }
 
-  const surface = options.surface ?? 'home';
   let contentHtml;
   if (surface !== 'home' && SURFACES[surface]) {
     // A routed platform surface: the theme's own page template when it ships one, else the
@@ -498,32 +537,54 @@ export async function renderStudioPreview(files, options = {}) {
     } else {
       contentHtml = def.builtin(fx);
     }
+  } else if (surface === 'about' && !(manifest?.supports?.pages ?? []).includes('about')) {
+    // The template declares no about page: live, the platform's own About body renders inside the
+    // template's layout, so the preview shows that as a skeleton rather than the home composition.
+    contentHtml = aboutSkeleton(fx, pageOf('about'));
   } else {
+    // Render one page composition: each section's Liquid over its content (the sample, or the
+    // preview-content override), icons resolved on items like the engine does, an unsupported
+    // type omitted, never an error (the contract).
+    const renderComposition = async (composition) => {
+      const out = [];
+      for (const { type, content } of composition) {
+        const entry = catalogueByType.get(type);
+        const source = files[`sections/${type}.liquid`];
+        if (!entry || source == null) continue;
+        const base = artOptions ? resolveFixtureArt(content ?? {}, artOptions) : resolveFixtureArt(content ?? {});
+        const context = {
+          // The home hero carries the resolved actions exactly as the platform hands them over, so a
+          // developer sees the widget AND the button that pairs with it. The catalogue sample's
+          // givingStyle is dropped here: in the preview the focus decides the style.
+          section: withResolvedIcons(type === 'homeHero' ? withResolvedActions({ ...base, givingStyle: undefined, actionStyle: undefined }, actions) : base),
+          brand,
+          site,
+          ...(fx.sections?.[type] ?? {})
+        };
+        const rendered = await liquid.parseAndRender(source, context);
+        // Island skeletons see the SAME context the section rendered with — that is what lets the
+        // hero carousel skeleton hydrate from the section's own photo fixtures.
+        out.push(partsToHtml(rendered, '', context, fx));
+      }
+      return out;
+    };
     const sectionsHtml = [];
-    for (const type of manifest?.supports?.sections ?? []) {
-      const entry = catalogueByType.get(type);
-      const source = files[`sections/${type}.liquid`];
-      if (!entry || source == null) continue;
-      const sample = artOptions ? resolveFixtureArt(entry.sample ?? {}, artOptions) : resolveFixtureArt(entry.sample ?? {});
-      const context = {
-        // The home hero carries the resolved actions exactly as the platform hands them over, so a
-        // developer sees the widget AND the button that pairs with it. The catalogue sample's
-        // givingStyle is dropped here: in the preview the focus decides the style.
-        section: type === 'homeHero' ? withResolvedActions({ ...sample, givingStyle: undefined, actionStyle: undefined }, actions) : sample,
-        brand,
-        site,
-        ...(fx.sections?.[type] ?? {})
-      };
-      const rendered = await liquid.parseAndRender(source, context);
-      // Island skeletons see the SAME context the section rendered with — that is what lets the
-      // hero carousel skeleton hydrate from the section's own photo fixtures.
-      sectionsHtml.push(partsToHtml(rendered, '', context, fx));
+    if (surface === 'about') {
+      sectionsHtml.push(...(await renderComposition(pageOf('about'))));
+    } else {
+      sectionsHtml.push(...(await renderComposition(pageOf('home'))));
+      // The studio's single document (no surface requested) keeps showing everything the template
+      // ships: the about composition follows the home one under a divider.
+      if (!options.surface && (manifest?.supports?.pages ?? []).includes('about')) {
+        const about = await renderComposition(pageOf('about'));
+        if (about.length) sectionsHtml.push(`<div class="p60-preview-divider" role="note">page: about</div>`, ...about);
+      }
     }
 
     // Declared page templates render too (over their page fixtures) — the loop an author lives in
     // covers every surface they ship, not just home sections. The routed dev preview ALSO serves
     // each at its own path; this keeps the studio's single document complete.
-    for (const page of manifest?.supports?.pageTemplates ?? []) {
+    for (const page of surface === 'about' ? [] : (manifest?.supports?.pageTemplates ?? [])) {
       const source = files[`pages/${page}.liquid`];
       const fixture = fx.pages?.[page];
       if (source == null || fixture == null) continue;
@@ -540,7 +601,7 @@ export async function renderStudioPreview(files, options = {}) {
     const rendered = await liquid.parseAndRender(files['layout.liquid'], {
       brand,
       site,
-      nav: fx.layout.nav,
+      nav: options.previewContent?.nav ? site.nav : fx.layout.nav,
       socials: fx.layout.socials ?? [],
       worship: manifest?.supports?.worship ? (fx.layout.worship ?? null) : null,
       locale: fx.layout.locale
@@ -551,7 +612,16 @@ export async function renderStudioPreview(files, options = {}) {
   }
 
   const themeCss = files['assets/theme.css'] ?? '';
-  const { attrs, vars } = knobDefaults(manifest);
+  const { attrs, vars, fontSlots } = knobValues(manifest, options.knobs ?? {});
+  // Webfonts: the DEV preview loads the same stylesheets production would (the template's own
+  // manifest.fonts through the provider mirror, plus one for the chosen font knobs) so type is
+  // judged for real locally; the studio render stays network-dead and shows the fallback stacks.
+  const webfonts = options.webfonts
+    ? [...(manifest?.fonts ?? []).map(toProvider), ...(fontCssHref(fontSlots) ? [fontCssHref(fontSlots)] : [])]
+    : [];
+  const fontLinks = webfonts.length
+    ? `<link rel="preconnect" href="${FONT_PROVIDER_ORIGIN}" crossorigin>\n${webfonts.map((href) => `<link rel="stylesheet" href="${escapeHtml(href)}">`).join('\n')}`
+    : '';
 
   // The kit's dev server passes the platform's own behaviour runtime (a self-contained bundle) so
   // authors see their carousels, reveals and tabs living locally. The document stays network-dead
@@ -573,10 +643,15 @@ export async function renderStudioPreview(files, options = {}) {
   for (const origin of options.contentImageOrigins ?? []) {
     imgOrigins.add(origin);
   }
+  // The author's own photographs beside the template (a preview/ folder the dev server serves)
+  // are same-origin; the studio never admits them, there is no such folder to serve there.
+  if (options.localImages) imgOrigins.add("'self'");
   const imgSrc = ['data:', ...imgOrigins].join(' ');
+  const styleSrc = webfonts.length ? `'unsafe-inline' ${FONT_PROVIDER_ORIGIN}` : "'unsafe-inline'";
+  const fontSrc = webfonts.length ? ` font-src ${FONT_PROVIDER_ORIGIN};` : '';
   const csp = runtime
-    ? `default-src 'none'; style-src 'unsafe-inline'; img-src ${imgSrc}; script-src 'unsafe-inline';`
-    : `default-src 'none'; style-src 'unsafe-inline'; img-src ${imgSrc};`;
+    ? `default-src 'none'; style-src ${styleSrc}; img-src ${imgSrc};${fontSrc} script-src 'unsafe-inline';`
+    : `default-src 'none'; style-src ${styleSrc}; img-src ${imgSrc};${fontSrc}`;
   const motionApproximation = runtime ? '' : `
 @media (prefers-reduced-motion: no-preference) {
   [data-p60-carousel] > [data-p60-slide], .p60-preview-slide { animation: p60-preview-crossfade 8s infinite; }
@@ -591,6 +666,7 @@ export async function renderStudioPreview(files, options = {}) {
 <!-- Network-dead by design: the template's CSS can style, never fetch. -->
 <meta http-equiv="Content-Security-Policy" content="${csp}">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+${fontLinks}
 <title>${escapeHtml(manifest?.label ?? manifest?.name ?? 'Template preview')} — studio preview</title>
 <style>${vars ? `:root { ${vars} }` : ''}
 .p60-preview-badge { display: inline-flex; align-items: center; width: fit-content; margin: 0 0 8px;
@@ -607,7 +683,7 @@ export async function renderStudioPreview(files, options = {}) {
 <style>${themeCss}</style>
 </head>
 <body ${attrs}>
-${options.surface ? surfaceBar(surface, focus) : ''}
+${options.surface ? surfaceBar(surface, focus, manifest?.looks ?? [], options.look ?? null) : ''}
 ${bodyHtml}
 ${runtime ? `<script>${runtime}\np60Behaviors.initBehaviors();</script>` : ''}
 </body>