@taprootio/espalier 2.20.0 → 3.0.0

package/dist/shared/theme.js

@@ -1 +1 @@
-import{ACCEPTED_COLOR_FORMS as w,apcaContrast as de,deriveSemantic as he,parseCssColor as M,parseOklch as ye,serializeOklch as be}from"./color-engine.js";import{computeVariants as $e,parseAnchorSource as xe,resolveAnchorColor as ke,resolveMappingSource as Se}from"./variant-engine.js";import{auditDataPalette as Ae,DATA_SERIES_KEYS as I,DEFAULT_DATA_PALETTE as N,DEFAULT_DATA_RAMP_STEPS as je,MAX_DATA_RAMP_STEPS as F,MIN_DATA_RAMP_LIGHTNESS_STEP as X,MIN_DATA_RAMP_STEPS as W}from"./data-colors.js";const A=/^[a-z][a-z0-9-]*$/;function Z(n){return xe(n)}function Re(n,e){return ke(n,e)}function Oe(n,e){const a=Z(n);if(a){const r=Re(e,a);return r&&M(r)?r:null}return M(n)?n:null}const P=["canvas","ink","accent","action","structure"],Q={canvas:{color:[["background","surface"],["layer1","raised1"],["layer2","raised2"],["layer3","raised3"],["layer4","raised4"]]},ink:{color:[["text","text"],["inputSelection","text"]],heading:[["headings","muted"],["headingsHover","ink"]]},accent:{color:[["linkHoverBg","raised2"],["inputSelectionBg","raised2"],["inputCaret","ink"]],text:[["link","accent"],["linkHover","text"]]},action:{color:[["actionBackground","muted"]],ink:[["actionText","surface"]]},structure:{color:[["border","border"],["shadow","shadow"]]}},Ce=new Set(["action.color"]),Me={canvas:"background",ink:"text",accent:"link",action:"actionBackground",structure:"border"},ve={"action.ink":{role:"canvas",slot:"color"}},Ee=.45;function ee(n,e){const a=ne.actionText,r=[...j].sort((m,b)=>n[m]-n[b]||j.indexOf(m)-j.indexOf(b)),i=e?r.filter(m=>e(m)>=a.targetLc):r,o=i.length>0?i:r;let l,p=1/0;for(const m of o){const b=Math.abs(n[m]-Ee);b<p&&(p=b,l=m)}return l??"muted"}function Te(n,e){const a=e[n]>.5;let r=j[0];for(const i of j)(a?e[i]<e[r]:e[i]>e[r])&&(r=i);return r}function H(n,e){if(n===void 0)return;if(typeof n=="string")return e==="color"?n:void 0;const a=n[e];return typeof a=="string"?a:void 0}function te(n,e,a,r={}){const i={},o={};for(const[l,p]of Object.entries(r.explicitMappings??{}))p!==void 0&&(o[l]=p.lightness);for(const l of P){const p=n[l];if(p!==void 0)for(const[m,b]of Object.entries(Q[l])){const h=ve[`${l}.${m}`];let $=H(p,m),R=!1;if($===void 0&&(h&&($=H(n[h.role],h.slot),$??=a[Me[h.role]]?.source,R=$!==void 0),$??=H(p,"color")),$!==void 0)for(const[S,O]of b){let t=O;if(Ce.has(`${l}.${m}`))t=ee(e,r.actionSurfaceContrast?s=>r.actionSurfaceContrast($,s):void 0);else if(R&&h){const s=ne[S],u=(s&&o[s.bg])??ee(e,r.actionSurfaceContrast?c=>r.actionSurfaceContrast(H(p,"color"),c):void 0);t=Te(u,e)}i[S]={source:$,lightness:t}}}}return i}const ne={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},z=["background","layer1","layer2","layer3","layer4","actionBackground","actionText","border","shadow","text","dangerText","headings","headingsHover","link","linkHover","linkHoverBg","inputCaret","inputSelection","inputSelectionBg"],K=["primary","analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],Be=["analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],j=["surface","raised1","raised2","raised3","raised4","accent","muted","text","border","ink","shadow"],_e={surface:.99,raised1:.97,raised2:.9,raised3:.8,raised4:.72,accent:.5,muted:.45,text:.35,border:.3,ink:.25,shadow:.2},we={surface:.15,raised1:.2,raised2:.3,raised3:.4,raised4:.36,accent:.6,muted:.75,text:.85,border:.7,ink:.95,shadow:.6},U={background:{source:"primary",lightness:"surface"},layer1:{source:"primary",lightness:"raised1"},layer2:{source:"primary",lightness:"raised2"},layer3:{source:"primary",lightness:"raised3"},layer4:{source:"primary",lightness:"raised4"},actionBackground:{source:"primary",lightness:"raised3"},actionText:{source:"primary",lightness:"ink"},border:{source:"primary",lightness:"border"},shadow:{source:"primary",lightness:"shadow"},text:{source:"primary",lightness:"text"},dangerText:{source:"danger",lightness:"text"},headings:{source:"primary",lightness:"muted"},headingsHover:{source:"primary",lightness:"text"},link:{source:"complementary",lightness:"accent"},linkHover:{source:"complementary",lightness:"text"},linkHoverBg:{source:"triadic-left",lightness:"raised2"},inputCaret:{source:"triadic-right",lightness:"ink"},inputSelection:{source:"complementary",lightness:"text"},inputSelectionBg:{source:"triadic-left",lightness:"raised2"}},T=.4;function G(){const n={};for(const e of z)n[e]={min:0,max:T};return n}const oe={seedColor:"oklch(0.7 0.125 216)",fontBody:"",fontHeadings:"",fontBrand:"",fontMonospace:"",fontWeightBody:"normal",fontWeightHeadings:"bold",fontWeightBrand:"bold",fontWeightMonospace:"normal",stylesheets:[],rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200,angles:{analogous:30,complementary:180,splitComplementary:30,triadic:120},semanticHues:{danger:27,success:150,warning:90},variantChroma:{},chroma:G(),semanticMappings:{...U},anchors:{},roles:{},contexts:{},dataPalette:{...N},dataRamps:{}},se={...oe,chroma:G(),semanticMappings:{...U},anchors:{},roles:{},contexts:{},dataPalette:{...N},dataRamps:{},lightness:{..._e}},Ie={...oe,chroma:G(),semanticMappings:{...U},anchors:{},roles:{},contexts:{},dataPalette:{...N},dataRamps:{},lightness:{...we}},L=new WeakMap;L.set(se,new Set),L.set(Ie,new Set);const re=new Set(["__proto__","constructor","prototype"]);function g(n){return!re.has(n)}function Pe(n,e){return re.has(n)?void 0:e}function qe(n){return`--esp-color-${n.replace(/([A-Z])/g,"-$1").replace(/(\d)/g,"-$1").toLowerCase()}`}function V(n){try{const e=atob(n),a=JSON.parse(e,Pe);return typeof a!="object"||a===null||Array.isArray(a)?null:a}catch{return null}}function J(n){return btoa(JSON.stringify(n))}function D(n){if(ye(n))return n;const e=M(n);return e?be(e):n}function ae(n,e){const a={};for(const[r,i]of Object.entries(n))g(r)&&(a[r]=i);if(!e)return a;for(const[r,i]of Object.entries(e)){if(i===void 0||!g(r))continue;const o=a[r];if(o!==void 0&&typeof i=="object"&&i!==null){const l={};if(typeof o=="string")l.color=o;else for(const[p,m]of Object.entries(o))g(p)&&(l[p]=m);for(const[p,m]of Object.entries(i))m!==void 0&&g(p)&&(l[p]=m);a[r]=l;continue}a[r]=i}return a}function ie(n){if(typeof n!="object"||n===null||Array.isArray(n))return null;const e=n,a={};for(const r of P){const i=e[r];i!==void 0&&(a[r]=i)}if(typeof e.lightness=="object"&&e.lightness!==null&&!Array.isArray(e.lightness)){const r={};for(const i of j){const o=e.lightness[i];o!==void 0&&(r[i]=o)}a.lightness=r}return a}function He(n,e){const a={};for(const[r,i]of Object.entries(n)){if(!g(r)||!A.test(r))continue;const o=ie(i);o&&(a[r]=o)}if(!e)return a;for(const[r,i]of Object.entries(e)){if(!g(r)||!A.test(r)||i===void 0)continue;const o=ie(i);if(!o)continue;const l=a[r];a[r]={...l??{},...o,...l?.lightness||o.lightness?{lightness:{...l?.lightness,...o.lightness}}:{}}}return a}function v(n){return typeof n=="object"&&n!==null&&!Array.isArray(n)}function E(n){const e={};for(const[a,r]of Object.entries(n))r!==void 0&&g(a)&&(e[a]=r);return e}function ce(n){if(!v(n))return n;const e=E(n);return v(n.lightness)&&(e.lightness=E(n.lightness)),e}function Le(n,e){const a={};for(const[r,i]of Object.entries(n))g(r)&&(a[r]=ce(i));if(!e)return a;for(const[r,i]of Object.entries(e)){if(!g(r)||i===void 0)continue;const o=a[r];if(!v(o)||!v(i)){a[r]=ce(i);continue}const l={...E(o),...E(i)};v(o.lightness)&&v(i.lightness)?l.lightness={...E(o.lightness),...E(i.lightness)}:v(i.lightness)&&(l.lightness=E(i.lightness)),a[r]=l}return a}function De(n){const e={};for(const[a,r]of Object.entries(n)){if(!g(a))continue;if(typeof r=="string"){e[a]=D(r);continue}const i={};for(const[o,l]of Object.entries(r))g(o)&&(i[o]=typeof l=="string"?D(l):l);e[a]=i}return e}function B(n){return typeof n!="string"?"":n.startsWith("anchor:")?n:D(n)}function Ne(n){const e={};for(const a of I)e[a]=B(n[a]);return e}function ue(n,e){const a={};for(const[r,i]of Object.entries(n))g(r)&&A.test(r)&&i&&typeof i=="object"&&!Array.isArray(i)&&(a[r]={...i});if(!e)return a;for(const[r,i]of Object.entries(e)){if(!g(r)||!A.test(r)||!i||typeof i!="object"||Array.isArray(i))continue;const o=a[r],l=o!==void 0&&i.type!==void 0&&i.type!==o.type;a[r]={...l?{}:o??{},...i}}return a}function Fe(n){const e={};for(const[a,r]of Object.entries(n))if(g(a)){if(r.type==="sequential"&&typeof r.source=="string"){e[a]={...r,source:B(r.source)};continue}if(r.type==="diverging"&&typeof r.start=="string"&&typeof r.end=="string"){e[a]={...r,start:B(r.start),end:B(r.end),...typeof r.neutral=="string"?{neutral:B(r.neutral)}:{}};continue}e[a]={...r}}return e}function le(n){const e=M(n.seedColor);if(!e)return;const a=$e(e,n);return(r,i)=>{const o=Se(r,a,n.anchors)??a.primary,l=n.chroma.actionBackground,p=he(o,n.lightness[i],l.min,l.max),m={l:p.l>.5?0:1,c:0,h:0};return Math.abs(de(m,p))}}function We(n){const e=L.get(n);if(e)return new Set(e);const a=new Set,r=te(n.roles,n.lightness,n.semanticMappings,{actionSurfaceContrast:le(n)});for(const[i,o]of Object.entries(r)){const l=n.semanticMappings[i];(l.source!==o.source||l.lightness!==o.lightness)&&a.add(i)}return a}function ze(n,e){const a={...n.roles,...e.roles},r=He(n.contexts,e.contexts),i={...n.lightness,...e.lightness},o=De(ae(n.anchors,e.anchors)),l=typeof e.seedColor=="string"?D(e.seedColor):n.seedColor,p=e.semanticMappings,m={...n.angles,...e.angles},b={...n.semanticHues,...e.semanticHues},h={...n.variantChroma,...e.variantChroma},$=_(n.chroma,e.chroma),R=Ne(_(n.dataPalette,e.dataPalette)),S=Fe(ue(n.dataRamps,e.dataRamps)),O=We(n),t=new Set(O),s={};for(const x of O)s[x]=n.semanticMappings[x];for(const[x,k]of Object.entries(p??{}))k!==void 0&&(t.add(x),s[x]=k);const u=_(n.semanticMappings,p),c=le({angles:m,anchors:o,chroma:$,lightness:i,seedColor:l,semanticHues:b,variantChroma:h}),f=te(a,i,u,{explicitMappings:s,actionSurfaceContrast:c}),d={};for(const[x,k]of Object.entries(f))t.has(x)||(d[x]=k);const C=_(_(n.semanticMappings,d),p),y={...n,seedColor:l,fontBody:e.fontBody??n.fontBody,fontHeadings:e.fontHeadings??n.fontHeadings,fontBrand:e.fontBrand??n.fontBrand,fontMonospace:e.fontMonospace??n.fontMonospace,fontWeightBody:String(e.fontWeightBody??n.fontWeightBody),fontWeightHeadings:String(e.fontWeightHeadings??n.fontWeightHeadings),fontWeightBrand:String(e.fontWeightBrand??n.fontWeightBrand),fontWeightMonospace:String(e.fontWeightMonospace??n.fontWeightMonospace),stylesheets:e.stylesheets??[...n.stylesheets],rootFontSize:e.rootFontSize??n.rootFontSize,typeRatio:e.typeRatio??n.typeRatio,spaceRatio:e.spaceRatio??n.spaceRatio,borderRadius:e.borderRadius??n.borderRadius,viewportMin:e.viewportMin??n.viewportMin,viewportMax:e.viewportMax??n.viewportMax,angles:m,semanticHues:b,variantChroma:h,lightness:i,chroma:$,semanticMappings:C,anchors:o,roles:a,contexts:r,dataPalette:R,dataRamps:S};return e.pageBackgroundImage!==void 0&&(y.pageBackgroundImage=e.pageBackgroundImage),e.pageBackgroundImageOpacity!==void 0&&(y.pageBackgroundImageOpacity=e.pageBackgroundImageOpacity),e.boxBackgroundImage!==void 0&&(y.boxBackgroundImage=e.boxBackgroundImage),e.boxBackgroundImageOpacity!==void 0&&(y.boxBackgroundImageOpacity=e.boxBackgroundImageOpacity),e.vellumOpacity!==void 0&&(y.vellumOpacity=e.vellumOpacity),e.vellumBackgroundImage!==void 0&&(y.vellumBackgroundImage=e.vellumBackgroundImage),e.vellumBackgroundImageOpacity!==void 0&&(y.vellumBackgroundImageOpacity=e.vellumBackgroundImageOpacity),L.set(y,new Set(t)),y}function _(n,e){if(!e)return{...n};const a={...n};for(const r of Object.keys(e)){const i=e[r];i!==void 0&&(a[r]=i)}return a}function fe(n){const e=[],a=[];let r;try{r=atob(n)}catch{return e.push("Failed to decode Base64 string."),{valid:!1,errors:e,warnings:a}}let i;try{i=JSON.parse(r)}catch{return e.push("Decoded string is not valid JSON."),{valid:!1,errors:e,warnings:a}}if(typeof i!="object"||i===null||Array.isArray(i))return e.push("Theme must be a JSON object."),{valid:!1,errors:e,warnings:a};const o=i;"seedColor"in o&&(typeof o.seedColor!="string"?e.push("seedColor must be a string."):M(o.seedColor)||e.push(`seedColor is not a valid CSS color: "${o.seedColor}". Accepted forms: ${w}.`));for(const t of["fontBody","fontHeadings","fontBrand","fontMonospace"])t in o&&typeof o[t]!="string"&&e.push(`${t} must be a string.`);const l=["normal","bold","lighter","bolder"],p=["inherit","initial","unset","revert","revert-layer"];for(const t of["fontWeightBody","fontWeightHeadings","fontWeightBrand","fontWeightMonospace"])if(t in o){const s=o[t];if(typeof s=="number")(s<1||s>1e3)&&e.push(`${t} numeric value must be 1\u20131000 (got ${s}).`);else if(typeof s=="string"){const u=l.includes(s)||p.includes(s);if(/^\d+$/.test(s)){const f=Number(s);(f<1||f>1e3)&&e.push(`${t} numeric value must be 1\u20131000 (got "${s}").`)}else u||a.push(`${t} = "${s}" is not a standard font-weight value.`)}else e.push(`${t} must be a string or number.`)}"stylesheets"in o&&(Array.isArray(o.stylesheets)?o.stylesheets.some(t=>typeof t!="string")&&e.push("Every entry in stylesheets must be a string."):e.push("stylesheets must be an array of strings."));const m=[["rootFontSize",1,100],["borderRadius",0,10],["viewportMin",100,1e4],["viewportMax",200,1e4]];for(const[t,s,u]of m)if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const c=o[t];s!==void 0&&c<s&&e.push(`${t} must be \u2265 ${s} (got ${c}).`),u!==void 0&&c>u&&a.push(`${t} = ${c} is unusually high (max ${u}).`)}for(const t of["typeRatio","spaceRatio"])if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const s=o[t];s<=1&&e.push(`${t} must be > 1 (got ${s}).`);const u=t==="typeRatio"?1.3:2;s>u&&a.push(`${t} = ${s} is very high (max ${u}); scales may be extreme.`)}if("viewportMin"in o&&"viewportMax"in o){const t=o.viewportMin,s=o.viewportMax;typeof t=="number"&&typeof s=="number"&&t>=s&&e.push(`viewportMin (${t}) must be less than viewportMax (${s}).`)}if("angles"in o)if(typeof o.angles!="object"||o.angles===null)e.push("angles must be an object.");else{const t=o.angles;for(const s of["analogous","complementary","splitComplementary","triadic"])if(s in t)if(typeof t[s]!="number"||!isFinite(t[s]))e.push(`angles.${s} must be a finite number.`);else{const u=t[s];(u<0||u>360)&&a.push(`angles.${s} = ${u} is outside 0\u2013360.`)}}if("semanticHues"in o)if(typeof o.semanticHues!="object"||o.semanticHues===null)e.push("semanticHues must be an object.");else{const t=o.semanticHues;for(const s of["danger","success","warning"])if(s in t)if(typeof t[s]!="number"||!isFinite(t[s]))e.push(`semanticHues.${s} must be a finite number.`);else{const u=t[s];(u<0||u>360)&&a.push(`semanticHues.${s} = ${u} is outside 0\u2013360.`)}}if("variantChroma"in o)if(typeof o.variantChroma!="object"||o.variantChroma===null)e.push("variantChroma must be an object.");else{const t=o.variantChroma;for(const s of Be)if(s in t)if(typeof t[s]!="number"||!isFinite(t[s]))e.push(`variantChroma["${s}"] must be a finite number.`);else{const u=t[s];u<0&&e.push(`variantChroma["${s}"] must be \u2265 0 (got ${u}).`),u>T&&a.push(`variantChroma["${s}"] = ${u} exceeds ${T}.`)}}function b(t,s){if(typeof t!="object"||t===null||Array.isArray(t)){e.push(`${s} must be an object.`);return}const u=t;for(const c of j)if(c in u)if(typeof u[c]!="number"||!isFinite(u[c]))e.push(`${s}.${c} must be a finite number.`);else{const f=u[c];(f<0||f>1)&&e.push(`${s}.${c} must be 0\u20131 (got ${f}).`)}}if("lightness"in o&&b(o.lightness,"lightness"),"chroma"in o)if(typeof o.chroma!="object"||o.chroma===null)e.push("chroma must be an object.");else{const t=o.chroma;for(const s of z)if(s in t){const u=t[s];if(typeof u!="object"||u===null){e.push(`chroma.${s} must be { min, max }.`);continue}const c=u;(typeof c.min!="number"||c.min<0)&&e.push(`chroma.${s}.min must be \u2265 0.`),(typeof c.max!="number"||c.max<0||c.max>T)&&e.push(`chroma.${s}.max must be 0\u2013${T}.`),typeof c.min=="number"&&typeof c.max=="number"&&c.min>c.max&&e.push(`chroma.${s}.min (${c.min}) must be \u2264 max (${c.max}).`)}}if("anchors"in o)if(typeof o.anchors!="object"||o.anchors===null||Array.isArray(o.anchors))e.push("anchors must be an object of named colors.");else for(const[t,s]of Object.entries(o.anchors))if(g(t)?A.test(t)||e.push(`anchors: "${t}" is not a valid anchor name; use a lowercase slug (letters, digits, hyphens).`):e.push(`anchors: "${t}" is a reserved JavaScript property name and cannot be an anchor name; rename it.`),K.includes(t)&&e.push(`anchors: "${t}" collides with a reserved color source name.`),typeof s=="string")M(s)||e.push(`anchors.${t} is not a valid CSS color: "${s}". Accepted forms: ${w}.`);else if(typeof s=="object"&&s!==null&&!Array.isArray(s)){const u=s;typeof u.color!="string"&&e.push(`anchors.${t} must declare its base "color".`);for(const[c,f]of Object.entries(u))g(c)?c!=="color"&&!A.test(c)&&e.push(`anchors.${t}: "${c}" is not a valid slot name; use a lowercase slug.`):e.push(`anchors.${t}: "${c}" is a reserved JavaScript property name and cannot be a slot name; rename it.`),typeof f!="string"?e.push(`anchors.${t}.${c} must be a CSS color string.`):M(f)||e.push(`anchors.${t}.${c} is not a valid CSS color: "${f}". Accepted forms: ${w}.`)}else e.push(`anchors.${t} must be a color string or a { color, \u2026slots } object.`);const h=new Map;if("anchors"in o&&typeof o.anchors=="object"&&o.anchors!==null&&!Array.isArray(o.anchors))for(const[t,s]of Object.entries(o.anchors))h.set(t,s);function $(t,s){const u=Z(t);if(!u){e.push(`${s} "${t}" is not valid anchor syntax; use anchor:<name> or anchor:<name>.<slot>.`);return}if(!h.has(u.name)){const c=[...h.keys()];e.push(`${s} references undeclared anchor "${u.name}". Declared anchors: ${c.length>0?c.join(", "):"(none)"}.`);return}if(u.slot!==void 0){const c=h.get(u.name);if(typeof(typeof c=="object"&&c!==null&&!Array.isArray(c)?c[u.slot]:void 0)!="string"){const d=typeof c=="object"&&c!==null?Object.keys(c).filter(C=>C!=="color"):[];e.push(`${s} references unknown slot "${u.slot}" on anchor "${u.name}". Declared slots: ${d.length>0?d.join(", "):"(none)"}.`)}}}function R(t,s){if(t.startsWith("anchor:")){$(t,s);return}K.includes(t)||e.push(`${s} must be one of: ${K.join(", ")}, or a declared anchor as anchor:<name> / anchor:<name>.<slot>.`)}function S(t,s){if(t.startsWith("anchor:")){$(t,s);return}M(t)||e.push(`${s} is not a valid CSS color: "${t}". Accepted forms: ${w}, or a declared anchor as anchor:<name> / anchor:<name>.<slot>.`)}if("dataPalette"in o)if(typeof o.dataPalette!="object"||o.dataPalette===null||Array.isArray(o.dataPalette))e.push("dataPalette must be an object with series1\u2013series8 color values.");else{const t=o.dataPalette;for(const[s,u]of Object.entries(t)){if(!I.includes(s)){e.push(`dataPalette.${s} is not a series slot; expected one of: ${I.join(", ")}.`);continue}typeof u!="string"?e.push(`dataPalette.${s} must be a CSS color or anchor reference string.`):S(u,`dataPalette.${s}`)}}if("dataRamps"in o)if(typeof o.dataRamps!="object"||o.dataRamps===null||Array.isArray(o.dataRamps))e.push("dataRamps must be an object of named ramp declarations.");else for(const[t,s]of Object.entries(o.dataRamps)){if(g(t)?A.test(t)||e.push(`dataRamps: "${t}" is not a valid ramp name; use a lowercase slug (letters, digits, hyphens).`):e.push(`dataRamps: "${t}" is a reserved JavaScript property name and cannot be a ramp name; rename it.`),typeof s!="object"||s===null||Array.isArray(s)){e.push(`dataRamps.${t} must be a sequential or diverging ramp object.`);continue}const u=s,c=u.steps??je;if((typeof c!="number"||!Number.isInteger(c)||c<W||c>F)&&e.push(`dataRamps.${t}.steps must be an integer from ${W} through ${F}.`),u.type==="sequential"){typeof u.source!="string"?e.push(`dataRamps.${t}.source must be a CSS color or anchor reference string.`):S(u.source,`dataRamps.${t}.source`);const f=u.lightnessStart??.95,d=u.lightnessEnd??.25;for(const[C,y]of[["lightnessStart",f],["lightnessEnd",d]])(typeof y!="number"||!Number.isFinite(y)||y<0||y>1)&&e.push(`dataRamps.${t}.${C} must be a finite number from 0 through 1.`);typeof f=="number"&&typeof d=="number"&&f<=d?e.push(`dataRamps.${t}.lightnessStart must be greater than lightnessEnd.`):typeof f=="number"&&Number.isFinite(f)&&typeof d=="number"&&Number.isFinite(d)&&typeof c=="number"&&Number.isInteger(c)&&c>=W&&c<=F&&(f-d)/(c-1)<=X&&e.push(`dataRamps.${t} lightness bounds must leave more than ${X} lightness between serialized stops.`);continue}if(u.type==="diverging"){typeof c=="number"&&Number.isInteger(c)&&c%2===0&&e.push(`dataRamps.${t}.steps must be odd so the neutral is the exact midpoint.`);for(const f of["start","end"])typeof u[f]!="string"?e.push(`dataRamps.${t}.${f} must be a CSS color or anchor reference string.`):S(u[f],`dataRamps.${t}.${f}`);"neutral"in u&&(typeof u.neutral!="string"?e.push(`dataRamps.${t}.neutral must be a CSS color or anchor reference string.`):S(u.neutral,`dataRamps.${t}.neutral`));continue}e.push(`dataRamps.${t}.type must be "sequential" or "diverging".`)}if("dataPalette"in o&&e.length===0){const t=ze(se,o),s={};let u=!0;for(const c of I){const f=Oe(t.dataPalette[c],t.anchors);if(!f){u=!1;break}s[c]=f}if(u)for(const c of Ae(s))a.push(`dataPalette.${c.series[0]} and dataPalette.${c.series[1]} are only ${c.distance.toFixed(4)} apart under ${c.simulation} simulation (minimum ${c.threshold.toFixed(4)}); also distinguish the series with labels, shapes, or patterns.`)}function O(t,s){if(typeof t!="object"||t===null||Array.isArray(t)){e.push(`${s} must be an object.`);return}const u=t;for(const[c,f]of Object.entries(u)){const d=`${s}.${c}`;if(!P.includes(c)){e.push(`${d} is not a role; expected one of: ${P.join(", ")}. (The status family is reserved and is not a role.)`);continue}const C=c,y=Q[C];if(typeof f=="string"){R(f,d);continue}if(typeof f!="object"||f===null||Array.isArray(f)){e.push(`${d} must be a color source or a { color, \u2026slots } object.`);continue}const x=f;typeof x.color!="string"&&e.push(`${d} must declare its base "color".`);for(const[k,q]of Object.entries(x)){if(!Object.prototype.hasOwnProperty.call(y,k)||!g(k)){const Y=Object.keys(y).filter(ge=>ge!=="color");e.push(`${d}.${k} is not a slot of the ${C} role. Declared slots: ${Y.length>0?Y.join(", "):"(none)"}.`);continue}typeof q!="string"?e.push(`${d}.${k} must be a color source string.`):R(q,`${d}.${k}`)}}}if("roles"in o&&O(o.roles,"roles"),"contexts"in o)if(typeof o.contexts!="object"||o.contexts===null||Array.isArray(o.contexts))e.push("contexts must be an object.");else for(const[t,s]of Object.entries(o.contexts)){if(!g(t)||!A.test(t)){e.push(`contexts.${t} must be a lowercase slug matching ${A.source}.`);continue}if(typeof s!="object"||s===null||Array.isArray(s)){O(s,`contexts.${t}`);continue}const u=s,c=Object.fromEntries(Object.entries(u).filter(([f])=>f!=="lightness"));O(c,`contexts.${t}`),"lightness"in u&&b(u.lightness,`contexts.${t}.lightness`)}if("semanticMappings"in o)if(typeof o.semanticMappings!="object"||o.semanticMappings===null)e.push("semanticMappings must be an object.");else{const t=o.semanticMappings;for(const s of z)if(s in t){const u=t[s];if(typeof u!="object"||u===null){e.push(`semanticMappings.${s} must be { source, lightness }.`);continue}const c=u;typeof c.source!="string"?e.push(`semanticMappings.${s}.source must be a string.`):R(c.source,`semanticMappings.${s}.source`),(typeof c.lightness!="string"||!j.includes(c.lightness))&&e.push(`semanticMappings.${s}.lightness must be one of: ${j.join(", ")}.`)}}for(const t of["pageBackgroundImage","boxBackgroundImage","vellumBackgroundImage"])t in o&&typeof o[t]!="string"&&e.push(`${t} must be a string.`);for(const t of["pageBackgroundImageOpacity","boxBackgroundImageOpacity","vellumOpacity","vellumBackgroundImageOpacity"])if(t in o)if(typeof o[t]!="number"||!isFinite(o[t]))e.push(`${t} must be a finite number.`);else{const s=o[t];(s<0||s>1)&&e.push(`${t} must be 0\u20131 (got ${s}).`)}return{valid:e.length===0,errors:e,warnings:a}}function Ye(n,e){const a=fe(n),r=fe(e),i=[...a.errors.map(l=>`light: ${l}`),...r.errors.map(l=>`dark: ${l}`)],o=[...a.warnings.map(l=>`light: ${l}`),...r.warnings.map(l=>`dark: ${l}`)];if(a.valid&&r.valid){const l=new Set(Object.keys(V(n)?.contexts??{})),p=new Set(Object.keys(V(e)?.contexts??{})),m=[...p].filter(h=>!l.has(h)).sort(),b=[...l].filter(h=>!p.has(h)).sort();(m.length>0||b.length>0)&&i.push(`contexts must declare the same names in both schemes. Missing from light: ${m.join(", ")||"(none)"}. Missing from dark: ${b.join(", ")||"(none)"}.`)}return{valid:i.length===0,errors:i,warnings:o}}const Ke=["anchors","angles","contexts","dataPalette","dataRamps","roles","chroma","lightness","semanticHues","semanticMappings","variantChroma"];function Ue(n,e){const a={};for(const[r,i]of Object.entries(n))g(r)&&(a[r]=i);for(const[r,i]of Object.entries(e))i!==void 0&&g(r)&&(a[r]=i);for(const r of Ke){const i=n[r],o=e[r];if(i&&typeof i=="object"&&!Array.isArray(i)&&o&&typeof o=="object"&&!Array.isArray(o)){if(r==="anchors"){a[r]=ae(i,o);continue}if(r==="contexts"){a[r]=Le(i,o);continue}if(r==="dataRamps"){a[r]=ue(i,o);continue}const l={};for(const[p,m]of Object.entries(i))g(p)&&(l[p]=m);for(const[p,m]of Object.entries(o))m!==void 0&&g(p)&&(l[p]=m);a[r]=l}}return a}function Xe(...n){let e={};for(const a of n){if(!a)continue;const r=V(a);r&&(e=Ue(e,r))}return J(e)}function pe(n){return n.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"\\r")}const me={borderRadius:.1,fontBody:'"Noto Sans", sans-serif',fontWeightBody:"normal",fontHeadings:'"Inika", serif',fontWeightHeadings:"normal",fontBrand:'"Inika", serif',fontWeightBrand:"normal",fontMonospace:'"JetBrains Mono", monospace',fontWeightMonospace:"normal",seedColor:"oklch(.07 0.15 216)"};function Ze(n){return J({...me,pageBackgroundImage:`url("${pe(n)}")`,pageBackgroundImageOpacity:.5})}function Qe(n){return J({...me,pageBackgroundImage:`url("${pe(n)}")`,pageBackgroundImageOpacity:.55})}export{A as ANCHOR_SLUG_PATTERN,K as COLOR_SOURCES,we as DEFAULT_DARK_LIGHTNESS,Ie as DEFAULT_DARK_THEME,_e as DEFAULT_LIGHT_LIGHTNESS,se as DEFAULT_LIGHT_THEME,U as DEFAULT_SEMANTIC_MAPPINGS,j as LIGHTNESS_KEYS,Ke as NESTED_THEME_KEYS,P as ROLE_NAMES,ve as ROLE_PAIRED_INK,Q as ROLE_TOKEN_PLAN,z as SEMANTIC_COLOR_NAMES,ne as TOKEN_PAIRINGS,Be as VARIANT_COLOR_SOURCES,Qe as buildTaprootDarkTheme,Ze as buildTaprootLightTheme,te as compileRoles,J as encodeTheme,Xe as layerThemes,Ue as mergePartials,ze as mergeTheme,Z as parseAnchorSource,V as parseTheme,Re as resolveAnchorColor,Oe as resolveDataColorSource,qe as semanticToCSS,fe as validateTheme,Ye as validateThemePair};
+import{ACCEPTED_COLOR_FORMS as I,apcaContrast as pe,deriveSemantic as me,parseCssColor as O,parseOklch as ge,serializeOklch as de}from"./color-engine.js";import{computeVariants as he,parseAnchorSource as ye,resolveAnchorColor as be,resolveMappingSource as $e}from"./variant-engine.js";import{auditDataPalette as xe,DATA_SERIES_KEYS as P,DEFAULT_DATA_PALETTE as F,DEFAULT_DATA_RAMP_STEPS as ke,MAX_DATA_RAMP_STEPS as W,MIN_DATA_RAMP_LIGHTNESS_STEP as Y,MIN_DATA_RAMP_STEPS as j}from"./data-colors.js";const A=/^[a-z][a-z0-9-]*$/;function X(e){return ye(e)}function Se(e,t){return be(e,t)}function Ae(e,t){const r=X(e);if(r){const s=Se(t,r);return s&&O(s)?s:null}return O(e)?e:null}const H=["canvas","ink","accent","action","structure"],Z={canvas:{color:[["background","surface"],["layer1","raised1"],["layer2","raised2"],["layer3","raised3"],["layer4","raised4"]]},ink:{color:[["text","text"],["inputSelection","text"]],heading:[["headings","muted"],["headingsHover","ink"]]},accent:{color:[["linkHoverBg","raised2"],["inputSelectionBg","raised2"],["inputCaret","ink"]],text:[["link","accent"],["linkHover","text"]]},action:{color:[["actionBackground","muted"]],ink:[["actionText","surface"]]},structure:{color:[["border","border"],["shadow","shadow"]]}},Re=new Set(["action.color"]),Oe={canvas:"background",ink:"text",accent:"link",action:"actionBackground",structure:"border"},Ce={"action.ink":{role:"canvas",slot:"color"}},ve=.45;function Q(e,t){const r=te.actionText,s=[...R].sort((p,y)=>e[p]-e[y]||R.indexOf(p)-R.indexOf(y)),a=t?s.filter(p=>t(p)>=r.targetLc):s,u=a.length>0?a:s;let l,m=1/0;for(const p of u){const y=Math.abs(e[p]-ve);y<m&&(m=y,l=p)}return l??"muted"}function Me(e,t){const r=t[e]>.5;let s=R[0];for(const a of R)(r?t[a]<t[s]:t[a]>t[s])&&(s=a);return s}function L(e,t){if(e===void 0)return;if(typeof e=="string")return t==="color"?e:void 0;const r=e[t];return typeof r=="string"?r:void 0}function ee(e,t,r,s={}){const a={},u={};for(const[l,m]of Object.entries(s.explicitMappings??{}))m!==void 0&&(u[l]=m.lightness);for(const l of H){const m=e[l];if(m!==void 0)for(const[p,y]of Object.entries(Z[l])){const b=Ce[`${l}.${p}`];let h=L(m,p),n=!1;if(h===void 0&&(b&&(h=L(e[b.role],b.slot),h??=r[Oe[b.role]]?.source,n=h!==void 0),h??=L(m,"color")),h!==void 0)for(const[o,c]of y){let i=c;if(Re.has(`${l}.${p}`))i=Q(t,s.actionSurfaceContrast?f=>s.actionSurfaceContrast(h,f):void 0);else if(n&&b){const f=te[o],d=(f&&u[f.bg])??Q(t,s.actionSurfaceContrast?k=>s.actionSurfaceContrast(L(m,"color"),k):void 0);i=Me(d,t)}a[o]={source:h,lightness:i}}}}return a}const te={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},z=["background","layer1","layer2","layer3","layer4","actionBackground","actionText","border","shadow","text","dangerText","headings","headingsHover","link","linkHover","linkHoverBg","inputCaret","inputSelection","inputSelectionBg"],K=["primary","analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],Te=["analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right","danger","success","warning"],R=["surface","raised1","raised2","raised3","raised4","accent","muted","text","border","ink","shadow"],Ee={surface:.99,raised1:.97,raised2:.9,raised3:.8,raised4:.72,accent:.5,muted:.45,text:.35,border:.3,ink:.25,shadow:.2},Be={surface:.15,raised1:.2,raised2:.3,raised3:.4,raised4:.36,accent:.6,muted:.75,text:.85,border:.7,ink:.95,shadow:.6},U={background:{source:"primary",lightness:"surface"},layer1:{source:"primary",lightness:"raised1"},layer2:{source:"primary",lightness:"raised2"},layer3:{source:"primary",lightness:"raised3"},layer4:{source:"primary",lightness:"raised4"},actionBackground:{source:"primary",lightness:"raised3"},actionText:{source:"primary",lightness:"ink"},border:{source:"primary",lightness:"border"},shadow:{source:"primary",lightness:"shadow"},text:{source:"primary",lightness:"text"},dangerText:{source:"danger",lightness:"text"},headings:{source:"primary",lightness:"muted"},headingsHover:{source:"primary",lightness:"text"},link:{source:"complementary",lightness:"accent"},linkHover:{source:"complementary",lightness:"text"},linkHoverBg:{source:"triadic-left",lightness:"raised2"},inputCaret:{source:"triadic-right",lightness:"ink"},inputSelection:{source:"complementary",lightness:"text"},inputSelectionBg:{source:"triadic-left",lightness:"raised2"}},B=.4;function G(){const e={};for(const t of z)e[t]={min:0,max:B};return e}const ne={seedColor:"oklch(0.7 0.125 216)",fontBody:"",fontHeadings:"",fontBrand:"",fontMonospace:"",fontWeightBody:"normal",fontWeightHeadings:"bold",fontWeightBrand:"bold",fontWeightMonospace:"normal",stylesheets:[],rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200,angles:{analogous:30,complementary:180,splitComplementary:30,triadic:120},semanticHues:{danger:27,success:150,warning:90},variantChroma:{},chroma:G(),semanticMappings:{...U},anchors:{},roles:{},contexts:{},dataPalette:{...F},dataRamps:{}},oe={...ne,chroma:G(),semanticMappings:{...U},anchors:{},roles:{},contexts:{},dataPalette:{...F},dataRamps:{},lightness:{...Ee}},we={...ne,chroma:G(),semanticMappings:{...U},anchors:{},roles:{},contexts:{},dataPalette:{...F},dataRamps:{},lightness:{...Be}},D=new WeakMap;D.set(oe,new Set),D.set(we,new Set);const se=new Set(["__proto__","constructor","prototype"]);function g(e){return!se.has(e)}function _e(e,t){return se.has(e)?void 0:t}function Ve(e){return`--esp-color-${e.replace(/([A-Z])/g,"-$1").replace(/(\d)/g,"-$1").toLowerCase()}`}function Ie(e){try{const t=atob(e),r=JSON.parse(t,_e);return typeof r!="object"||r===null||Array.isArray(r)?null:r}catch{return null}}function V(e){return btoa(JSON.stringify(e))}function N(e){if(ge(e))return e;const t=O(e);return t?de(t):e}function re(e,t){const r={};for(const[s,a]of Object.entries(e))g(s)&&(r[s]=a);if(!t)return r;for(const[s,a]of Object.entries(t)){if(a===void 0||!g(s))continue;const u=r[s];if(u!==void 0&&typeof a=="object"&&a!==null){const l={};if(typeof u=="string")l.color=u;else for(const[m,p]of Object.entries(u))g(m)&&(l[m]=p);for(const[m,p]of Object.entries(a))p!==void 0&&g(m)&&(l[m]=p);r[s]=l;continue}r[s]=a}return r}function ae(e){if(typeof e!="object"||e===null||Array.isArray(e))return null;const t=e,r={};for(const s of H){const a=t[s];a!==void 0&&(r[s]=a)}if(typeof t.lightness=="object"&&t.lightness!==null&&!Array.isArray(t.lightness)){const s={};for(const a of R){const u=t.lightness[a];u!==void 0&&(s[a]=u)}r.lightness=s}return r}function Pe(e,t){const r={};for(const[s,a]of Object.entries(e)){if(!g(s)||!A.test(s))continue;const u=ae(a);u&&(r[s]=u)}if(!t)return r;for(const[s,a]of Object.entries(t)){if(!g(s)||!A.test(s)||a===void 0)continue;const u=ae(a);if(!u)continue;const l=r[s];r[s]={...l??{},...u,...l?.lightness||u.lightness?{lightness:{...l?.lightness,...u.lightness}}:{}}}return r}function v(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function M(e){const t={};for(const[r,s]of Object.entries(e))s!==void 0&&g(r)&&(t[r]=s);return t}function ie(e){if(!v(e))return e;const t=M(e);return v(e.lightness)&&(t.lightness=M(e.lightness)),t}function He(e,t){const r={};for(const[s,a]of Object.entries(e))g(s)&&(r[s]=ie(a));if(!t)return r;for(const[s,a]of Object.entries(t)){if(!g(s)||a===void 0)continue;const u=r[s];if(!v(u)||!v(a)){r[s]=ie(a);continue}const l={...M(u),...M(a)};v(u.lightness)&&v(a.lightness)?l.lightness={...M(u.lightness),...M(a.lightness)}:v(a.lightness)&&(l.lightness=M(a.lightness)),r[s]=l}return r}function Le(e){const t={};for(const[r,s]of Object.entries(e)){if(!g(r))continue;if(typeof s=="string"){t[r]=N(s);continue}const a={};for(const[u,l]of Object.entries(s))g(u)&&(a[u]=typeof l=="string"?N(l):l);t[r]=a}return t}function w(e){return typeof e!="string"?"":e.startsWith("anchor:")?e:N(e)}function De(e){const t={};for(const r of P)t[r]=w(e[r]);return t}function ce(e,t){const r={};for(const[s,a]of Object.entries(e))g(s)&&A.test(s)&&a&&typeof a=="object"&&!Array.isArray(a)&&(r[s]={...a});if(!t)return r;for(const[s,a]of Object.entries(t)){if(!g(s)||!A.test(s)||!a||typeof a!="object"||Array.isArray(a))continue;const u=r[s],l=u!==void 0&&a.type!==void 0&&a.type!==u.type;r[s]={...l?{}:u??{},...a}}return r}function Ne(e){const t={};for(const[r,s]of Object.entries(e))if(g(r)){if(s.type==="sequential"&&typeof s.source=="string"){t[r]={...s,source:w(s.source)};continue}if(s.type==="diverging"&&typeof s.start=="string"&&typeof s.end=="string"){t[r]={...s,start:w(s.start),end:w(s.end),...typeof s.neutral=="string"?{neutral:w(s.neutral)}:{}};continue}t[r]={...s}}return t}function ue(e){const t=O(e.seedColor);if(!t)return;const r=he(t,e);return(s,a)=>{const u=$e(s,r,e.anchors)??r.primary,l=e.chroma.actionBackground,m=me(u,e.lightness[a],l.min,l.max),p={l:m.l>.5?0:1,c:0,h:0};return Math.abs(pe(p,m))}}function Fe(e){const t=D.get(e);if(t)return new Set(t);const r=new Set,s=ee(e.roles,e.lightness,e.semanticMappings,{actionSurfaceContrast:ue(e)});for(const[a,u]of Object.entries(s)){const l=e.semanticMappings[a];(l.source!==u.source||l.lightness!==u.lightness)&&r.add(a)}return r}function We(e,t){const r={...e.roles,...t.roles},s=Pe(e.contexts,t.contexts),a={...e.lightness,...t.lightness},u=Le(re(e.anchors,t.anchors)),l=typeof t.seedColor=="string"?N(t.seedColor):e.seedColor,m=t.semanticMappings,p={...e.angles,...t.angles},y={...e.semanticHues,...t.semanticHues},b={...e.variantChroma,...t.variantChroma},h=_(e.chroma,t.chroma),n=De(_(e.dataPalette,t.dataPalette)),o=Ne(ce(e.dataRamps,t.dataRamps)),c=Fe(e),i=new Set(c),f={};for(const x of c)f[x]=e.semanticMappings[x];for(const[x,T]of Object.entries(m??{}))T!==void 0&&(i.add(x),f[x]=T);const d=_(e.semanticMappings,m),k=ue({angles:p,anchors:u,chroma:h,lightness:a,seedColor:l,semanticHues:y,variantChroma:b}),S=ee(r,a,d,{explicitMappings:f,actionSurfaceContrast:k}),E={};for(const[x,T]of Object.entries(S))i.has(x)||(E[x]=T);const C=_(_(e.semanticMappings,E),m),$={...e,seedColor:l,fontBody:t.fontBody??e.fontBody,fontHeadings:t.fontHeadings??e.fontHeadings,fontBrand:t.fontBrand??e.fontBrand,fontMonospace:t.fontMonospace??e.fontMonospace,fontWeightBody:String(t.fontWeightBody??e.fontWeightBody),fontWeightHeadings:String(t.fontWeightHeadings??e.fontWeightHeadings),fontWeightBrand:String(t.fontWeightBrand??e.fontWeightBrand),fontWeightMonospace:String(t.fontWeightMonospace??e.fontWeightMonospace),stylesheets:t.stylesheets??[...e.stylesheets],rootFontSize:t.rootFontSize??e.rootFontSize,typeRatio:t.typeRatio??e.typeRatio,spaceRatio:t.spaceRatio??e.spaceRatio,borderRadius:t.borderRadius??e.borderRadius,viewportMin:t.viewportMin??e.viewportMin,viewportMax:t.viewportMax??e.viewportMax,angles:p,semanticHues:y,variantChroma:b,lightness:a,chroma:h,semanticMappings:C,anchors:u,roles:r,contexts:s,dataPalette:n,dataRamps:o};return t.pageBackgroundImage!==void 0&&($.pageBackgroundImage=t.pageBackgroundImage),t.pageBackgroundImageOpacity!==void 0&&($.pageBackgroundImageOpacity=t.pageBackgroundImageOpacity),t.boxBackgroundImage!==void 0&&($.boxBackgroundImage=t.boxBackgroundImage),t.boxBackgroundImageOpacity!==void 0&&($.boxBackgroundImageOpacity=t.boxBackgroundImageOpacity),t.vellumOpacity!==void 0&&($.vellumOpacity=t.vellumOpacity),t.vellumBackgroundImage!==void 0&&($.vellumBackgroundImage=t.vellumBackgroundImage),t.vellumBackgroundImageOpacity!==void 0&&($.vellumBackgroundImageOpacity=t.vellumBackgroundImageOpacity),D.set($,new Set(i)),$}function _(e,t){if(!t)return{...e};const r={...e};for(const s of Object.keys(t)){const a=t[s];a!==void 0&&(r[s]=a)}return r}function J(e){let t;try{t=atob(e)}catch{return{error:"Failed to decode Base64 string."}}let r;try{r=JSON.parse(t)}catch{return{error:"Decoded string is not valid JSON."}}return typeof r!="object"||r===null||Array.isArray(r)?{error:"Theme must be a JSON object."}:{value:r}}function Je(e){const t=J(e);return t.error!==void 0?{valid:!1,errors:[t.error],warnings:[]}:q(t.value)}function q(e){const t=[],r=[];"seedColor"in e&&(typeof e.seedColor!="string"?t.push("seedColor must be a string."):O(e.seedColor)||t.push(`seedColor is not a valid CSS color: "${e.seedColor}". Accepted forms: ${I}.`));for(const n of["fontBody","fontHeadings","fontBrand","fontMonospace"])n in e&&typeof e[n]!="string"&&t.push(`${n} must be a string.`);const s=["normal","bold","lighter","bolder"],a=["inherit","initial","unset","revert","revert-layer"];for(const n of["fontWeightBody","fontWeightHeadings","fontWeightBrand","fontWeightMonospace"])if(n in e){const o=e[n];if(typeof o=="number")(o<1||o>1e3)&&t.push(`${n} numeric value must be 1\u20131000 (got ${o}).`);else if(typeof o=="string"){const c=s.includes(o)||a.includes(o);if(/^\d+$/.test(o)){const f=Number(o);(f<1||f>1e3)&&t.push(`${n} numeric value must be 1\u20131000 (got "${o}").`)}else c||r.push(`${n} = "${o}" is not a standard font-weight value.`)}else t.push(`${n} must be a string or number.`)}"stylesheets"in e&&(Array.isArray(e.stylesheets)?e.stylesheets.some(n=>typeof n!="string")&&t.push("Every entry in stylesheets must be a string."):t.push("stylesheets must be an array of strings."));const u=[["rootFontSize",1,100],["borderRadius",0,10],["viewportMin",100,1e4],["viewportMax",200,1e4]];for(const[n,o,c]of u)if(n in e)if(typeof e[n]!="number"||!isFinite(e[n]))t.push(`${n} must be a finite number.`);else{const i=e[n];o!==void 0&&i<o&&t.push(`${n} must be \u2265 ${o} (got ${i}).`),c!==void 0&&i>c&&r.push(`${n} = ${i} is unusually high (max ${c}).`)}for(const n of["typeRatio","spaceRatio"])if(n in e)if(typeof e[n]!="number"||!isFinite(e[n]))t.push(`${n} must be a finite number.`);else{const o=e[n];o<=1&&t.push(`${n} must be > 1 (got ${o}).`);const c=n==="typeRatio"?1.3:2;o>c&&r.push(`${n} = ${o} is very high (max ${c}); scales may be extreme.`)}if("viewportMin"in e&&"viewportMax"in e){const n=e.viewportMin,o=e.viewportMax;typeof n=="number"&&typeof o=="number"&&n>=o&&t.push(`viewportMin (${n}) must be less than viewportMax (${o}).`)}if("angles"in e)if(typeof e.angles!="object"||e.angles===null)t.push("angles must be an object.");else{const n=e.angles;for(const o of["analogous","complementary","splitComplementary","triadic"])if(o in n)if(typeof n[o]!="number"||!isFinite(n[o]))t.push(`angles.${o} must be a finite number.`);else{const c=n[o];(c<0||c>360)&&r.push(`angles.${o} = ${c} is outside 0\u2013360.`)}}if("semanticHues"in e)if(typeof e.semanticHues!="object"||e.semanticHues===null)t.push("semanticHues must be an object.");else{const n=e.semanticHues;for(const o of["danger","success","warning"])if(o in n)if(typeof n[o]!="number"||!isFinite(n[o]))t.push(`semanticHues.${o} must be a finite number.`);else{const c=n[o];(c<0||c>360)&&r.push(`semanticHues.${o} = ${c} is outside 0\u2013360.`)}}if("variantChroma"in e)if(typeof e.variantChroma!="object"||e.variantChroma===null)t.push("variantChroma must be an object.");else{const n=e.variantChroma;for(const o of Te)if(o in n)if(typeof n[o]!="number"||!isFinite(n[o]))t.push(`variantChroma["${o}"] must be a finite number.`);else{const c=n[o];c<0&&t.push(`variantChroma["${o}"] must be \u2265 0 (got ${c}).`),c>B&&r.push(`variantChroma["${o}"] = ${c} exceeds ${B}.`)}}function l(n,o){if(typeof n!="object"||n===null||Array.isArray(n)){t.push(`${o} must be an object.`);return}const c=n;for(const i of R)if(i in c)if(typeof c[i]!="number"||!isFinite(c[i]))t.push(`${o}.${i} must be a finite number.`);else{const f=c[i];(f<0||f>1)&&t.push(`${o}.${i} must be 0\u20131 (got ${f}).`)}}if("lightness"in e&&l(e.lightness,"lightness"),"chroma"in e)if(typeof e.chroma!="object"||e.chroma===null)t.push("chroma must be an object.");else{const n=e.chroma;for(const o of z)if(o in n){const c=n[o];if(typeof c!="object"||c===null){t.push(`chroma.${o} must be { min, max }.`);continue}const i=c;(typeof i.min!="number"||i.min<0)&&t.push(`chroma.${o}.min must be \u2265 0.`),(typeof i.max!="number"||i.max<0||i.max>B)&&t.push(`chroma.${o}.max must be 0\u2013${B}.`),typeof i.min=="number"&&typeof i.max=="number"&&i.min>i.max&&t.push(`chroma.${o}.min (${i.min}) must be \u2264 max (${i.max}).`)}}if("anchors"in e)if(typeof e.anchors!="object"||e.anchors===null||Array.isArray(e.anchors))t.push("anchors must be an object of named colors.");else for(const[n,o]of Object.entries(e.anchors))if(g(n)?A.test(n)||t.push(`anchors: "${n}" is not a valid anchor name; use a lowercase slug (letters, digits, hyphens).`):t.push(`anchors: "${n}" is a reserved JavaScript property name and cannot be an anchor name; rename it.`),K.includes(n)&&t.push(`anchors: "${n}" collides with a reserved color source name.`),typeof o=="string")O(o)||t.push(`anchors.${n} is not a valid CSS color: "${o}". Accepted forms: ${I}.`);else if(typeof o=="object"&&o!==null&&!Array.isArray(o)){const c=o;typeof c.color!="string"&&t.push(`anchors.${n} must declare its base "color".`);for(const[i,f]of Object.entries(c))g(i)?i!=="color"&&!A.test(i)&&t.push(`anchors.${n}: "${i}" is not a valid slot name; use a lowercase slug.`):t.push(`anchors.${n}: "${i}" is a reserved JavaScript property name and cannot be a slot name; rename it.`),typeof f!="string"?t.push(`anchors.${n}.${i} must be a CSS color string.`):O(f)||t.push(`anchors.${n}.${i} is not a valid CSS color: "${f}". Accepted forms: ${I}.`)}else t.push(`anchors.${n} must be a color string or a { color, \u2026slots } object.`);const m=new Map;if("anchors"in e&&typeof e.anchors=="object"&&e.anchors!==null&&!Array.isArray(e.anchors))for(const[n,o]of Object.entries(e.anchors))m.set(n,o);function p(n,o){const c=X(n);if(!c){t.push(`${o} "${n}" is not valid anchor syntax; use anchor:<name> or anchor:<name>.<slot>.`);return}if(!m.has(c.name)){const i=[...m.keys()];t.push(`${o} references undeclared anchor "${c.name}". Declared anchors: ${i.length>0?i.join(", "):"(none)"}.`);return}if(c.slot!==void 0){const i=m.get(c.name);if(typeof(typeof i=="object"&&i!==null&&!Array.isArray(i)?i[c.slot]:void 0)!="string"){const d=typeof i=="object"&&i!==null?Object.keys(i).filter(k=>k!=="color"):[];t.push(`${o} references unknown slot "${c.slot}" on anchor "${c.name}". Declared slots: ${d.length>0?d.join(", "):"(none)"}.`)}}}function y(n,o){if(n.startsWith("anchor:")){p(n,o);return}K.includes(n)||t.push(`${o} must be one of: ${K.join(", ")}, or a declared anchor as anchor:<name> / anchor:<name>.<slot>.`)}function b(n,o){if(n.startsWith("anchor:")){p(n,o);return}O(n)||t.push(`${o} is not a valid CSS color: "${n}". Accepted forms: ${I}, or a declared anchor as anchor:<name> / anchor:<name>.<slot>.`)}if("dataPalette"in e)if(typeof e.dataPalette!="object"||e.dataPalette===null||Array.isArray(e.dataPalette))t.push("dataPalette must be an object with series1\u2013series8 color values.");else{const n=e.dataPalette;for(const[o,c]of Object.entries(n)){if(!P.includes(o)){t.push(`dataPalette.${o} is not a series slot; expected one of: ${P.join(", ")}.`);continue}typeof c!="string"?t.push(`dataPalette.${o} must be a CSS color or anchor reference string.`):b(c,`dataPalette.${o}`)}}if("dataRamps"in e)if(typeof e.dataRamps!="object"||e.dataRamps===null||Array.isArray(e.dataRamps))t.push("dataRamps must be an object of named ramp declarations.");else for(const[n,o]of Object.entries(e.dataRamps)){if(g(n)?A.test(n)||t.push(`dataRamps: "${n}" is not a valid ramp name; use a lowercase slug (letters, digits, hyphens).`):t.push(`dataRamps: "${n}" is a reserved JavaScript property name and cannot be a ramp name; rename it.`),typeof o!="object"||o===null||Array.isArray(o)){t.push(`dataRamps.${n} must be a sequential or diverging ramp object.`);continue}const c=o,i=c.steps??ke;if((typeof i!="number"||!Number.isInteger(i)||i<j||i>W)&&t.push(`dataRamps.${n}.steps must be an integer from ${j} through ${W}.`),c.type==="sequential"){typeof c.source!="string"?t.push(`dataRamps.${n}.source must be a CSS color or anchor reference string.`):b(c.source,`dataRamps.${n}.source`);const f=c.lightnessStart??.95,d=c.lightnessEnd??.25;for(const[k,S]of[["lightnessStart",f],["lightnessEnd",d]])(typeof S!="number"||!Number.isFinite(S)||S<0||S>1)&&t.push(`dataRamps.${n}.${k} must be a finite number from 0 through 1.`);typeof f=="number"&&typeof d=="number"&&f<=d?t.push(`dataRamps.${n}.lightnessStart must be greater than lightnessEnd.`):typeof f=="number"&&Number.isFinite(f)&&typeof d=="number"&&Number.isFinite(d)&&typeof i=="number"&&Number.isInteger(i)&&i>=j&&i<=W&&(f-d)/(i-1)<=Y&&t.push(`dataRamps.${n} lightness bounds must leave more than ${Y} lightness between serialized stops.`);continue}if(c.type==="diverging"){typeof i=="number"&&Number.isInteger(i)&&i%2===0&&t.push(`dataRamps.${n}.steps must be odd so the neutral is the exact midpoint.`);for(const f of["start","end"])typeof c[f]!="string"?t.push(`dataRamps.${n}.${f} must be a CSS color or anchor reference string.`):b(c[f],`dataRamps.${n}.${f}`);"neutral"in c&&(typeof c.neutral!="string"?t.push(`dataRamps.${n}.neutral must be a CSS color or anchor reference string.`):b(c.neutral,`dataRamps.${n}.neutral`));continue}t.push(`dataRamps.${n}.type must be "sequential" or "diverging".`)}if("dataPalette"in e&&t.length===0){const n=We(oe,e),o={};let c=!0;for(const i of P){const f=Ae(n.dataPalette[i],n.anchors);if(!f){c=!1;break}o[i]=f}if(c)for(const i of xe(o))r.push(`dataPalette.${i.series[0]} and dataPalette.${i.series[1]} are only ${i.distance.toFixed(4)} apart under ${i.simulation} simulation (minimum ${i.threshold.toFixed(4)}); also distinguish the series with labels, shapes, or patterns.`)}function h(n,o){if(typeof n!="object"||n===null||Array.isArray(n)){t.push(`${o} must be an object.`);return}const c=n;for(const[i,f]of Object.entries(c)){const d=`${o}.${i}`;if(!H.includes(i)){t.push(`${d} is not a role; expected one of: ${H.join(", ")}. (The status family is reserved and is not a role.)`);continue}const k=i,S=Z[k];if(typeof f=="string"){y(f,d);continue}if(typeof f!="object"||f===null||Array.isArray(f)){t.push(`${d} must be a color source or a { color, \u2026slots } object.`);continue}const E=f;typeof E.color!="string"&&t.push(`${d} must declare its base "color".`);for(const[C,$]of Object.entries(E)){if(!Object.prototype.hasOwnProperty.call(S,C)||!g(C)){const x=Object.keys(S).filter(T=>T!=="color");t.push(`${d}.${C} is not a slot of the ${k} role. Declared slots: ${x.length>0?x.join(", "):"(none)"}.`);continue}typeof $!="string"?t.push(`${d}.${C} must be a color source string.`):y($,`${d}.${C}`)}}}if("roles"in e&&h(e.roles,"roles"),"contexts"in e)if(typeof e.contexts!="object"||e.contexts===null||Array.isArray(e.contexts))t.push("contexts must be an object.");else for(const[n,o]of Object.entries(e.contexts)){if(!g(n)||!A.test(n)){t.push(`contexts.${n} must be a lowercase slug matching ${A.source}.`);continue}if(typeof o!="object"||o===null||Array.isArray(o)){h(o,`contexts.${n}`);continue}const c=o,i=Object.fromEntries(Object.entries(c).filter(([f])=>f!=="lightness"));h(i,`contexts.${n}`),"lightness"in c&&l(c.lightness,`contexts.${n}.lightness`)}if("semanticMappings"in e)if(typeof e.semanticMappings!="object"||e.semanticMappings===null)t.push("semanticMappings must be an object.");else{const n=e.semanticMappings;for(const o of z)if(o in n){const c=n[o];if(typeof c!="object"||c===null){t.push(`semanticMappings.${o} must be { source, lightness }.`);continue}const i=c;typeof i.source!="string"?t.push(`semanticMappings.${o}.source must be a string.`):y(i.source,`semanticMappings.${o}.source`),(typeof i.lightness!="string"||!R.includes(i.lightness))&&t.push(`semanticMappings.${o}.lightness must be one of: ${R.join(", ")}.`)}}for(const n of["pageBackgroundImage","boxBackgroundImage","vellumBackgroundImage"])n in e&&typeof e[n]!="string"&&t.push(`${n} must be a string.`);for(const n of["pageBackgroundImageOpacity","boxBackgroundImageOpacity","vellumOpacity","vellumBackgroundImageOpacity"])if(n in e)if(typeof e[n]!="number"||!isFinite(e[n]))t.push(`${n} must be a finite number.`);else{const o=e[n];(o<0||o>1)&&t.push(`${n} must be 0\u20131 (got ${o}).`)}return{valid:t.length===0,errors:t,warnings:r}}function qe(e,t){const r=J(e),s=J(t),a=r.error!==void 0?{valid:!1,errors:[r.error],warnings:[]}:q(r.value),u=s.error!==void 0?{valid:!1,errors:[s.error],warnings:[]}:q(s.value),l=[...a.errors.map(p=>`light: ${p}`),...u.errors.map(p=>`dark: ${p}`)],m=[...a.warnings.map(p=>`light: ${p}`),...u.warnings.map(p=>`dark: ${p}`)];if(a.valid&&u.valid){const p=new Set(Object.keys(r.value?.contexts??{})),y=new Set(Object.keys(s.value?.contexts??{})),b=[...y].filter(n=>!p.has(n)).sort(),h=[...p].filter(n=>!y.has(n)).sort();(b.length>0||h.length>0)&&l.push(`contexts must declare the same names in both schemes. Missing from light: ${b.join(", ")||"(none)"}. Missing from dark: ${h.join(", ")||"(none)"}.`)}return{valid:l.length===0,errors:l,warnings:m}}const je=["anchors","angles","contexts","dataPalette","dataRamps","roles","chroma","lightness","semanticHues","semanticMappings","variantChroma"];function ze(e,t){const r={};for(const[s,a]of Object.entries(e))g(s)&&(r[s]=a);for(const[s,a]of Object.entries(t))a!==void 0&&g(s)&&(r[s]=a);for(const s of je){const a=e[s],u=t[s];if(a&&typeof a=="object"&&!Array.isArray(a)&&u&&typeof u=="object"&&!Array.isArray(u)){if(s==="anchors"){r[s]=re(a,u);continue}if(s==="contexts"){r[s]=He(a,u);continue}if(s==="dataRamps"){r[s]=ce(a,u);continue}const l={};for(const[m,p]of Object.entries(a))g(m)&&(l[m]=p);for(const[m,p]of Object.entries(u))p!==void 0&&g(m)&&(l[m]=p);r[s]=l}}return r}function Ye(...e){let t={};for(const r of e){if(!r)continue;const s=Ie(r);s&&(t=ze(t,s))}return V(t)}function le(e){return e.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/g,"\\n").replace(/\r/g,"\\r")}const fe={borderRadius:.1,fontBody:'"Noto Sans", sans-serif',fontWeightBody:"normal",fontHeadings:'"Inika", serif',fontWeightHeadings:"normal",fontBrand:'"Inika", serif',fontWeightBrand:"normal",fontMonospace:'"JetBrains Mono", monospace',fontWeightMonospace:"normal",seedColor:"oklch(.07 0.15 216)"};function Xe(e){return V({...fe,pageBackgroundImage:`url("${le(e)}")`,pageBackgroundImageOpacity:.5})}function Ze(e){return V({...fe,pageBackgroundImage:`url("${le(e)}")`,pageBackgroundImageOpacity:.55})}export{A as ANCHOR_SLUG_PATTERN,K as COLOR_SOURCES,Be as DEFAULT_DARK_LIGHTNESS,we as DEFAULT_DARK_THEME,Ee as DEFAULT_LIGHT_LIGHTNESS,oe as DEFAULT_LIGHT_THEME,U as DEFAULT_SEMANTIC_MAPPINGS,R as LIGHTNESS_KEYS,je as NESTED_THEME_KEYS,H as ROLE_NAMES,Ce as ROLE_PAIRED_INK,Z as ROLE_TOKEN_PLAN,z as SEMANTIC_COLOR_NAMES,te as TOKEN_PAIRINGS,Te as VARIANT_COLOR_SOURCES,Ze as buildTaprootDarkTheme,Xe as buildTaprootLightTheme,ee as compileRoles,V as encodeTheme,Ye as layerThemes,ze as mergePartials,We as mergeTheme,X as parseAnchorSource,Ie as parseTheme,Se as resolveAnchorColor,Ae as resolveDataColorSource,Ve as semanticToCSS,Je as validateTheme,qe as validateThemePair};

package/dist/shared/toast-events.d.ts

@@ -1,4 +1,4 @@
-import type { EspalierVariant } from "./esp-element-base.js";
+import type { EspalierIntentVariant } from "./intent-values.js";
 /**
  * Configuration for a toast notification.
  *
@@ -33,9 +33,10 @@ export type ToastConfig = {
      */
     svgPath?: string | undefined;
     /**
-     * The color variant of the toast.
+     * The intent of the toast — `neutral`, `success`, `warning`, `danger`,
+     * or `info` (the default treatment when omitted).
      */
-    variant?: EspalierVariant;
+    intent?: EspalierIntentVariant;
     /**
      * Callback fired when the toast is closed.
      */
@@ -48,8 +49,8 @@ export type ToastConfig = {
  * ```ts
  * import { showToast } from "@taprootio/espalier";
  *
- * showToast({ message: "Saved!", variant: "success" });
- * showToast({ message: "Error!", variant: "danger", duration: 0 });
+ * showToast({ message: "Saved!", intent: "success" });
+ * showToast({ message: "Error!", intent: "danger", duration: 0 });
  * ```
  *
  * @param config - Toast configuration.

package/dist/status-indicator/esp-status-indicator.d.ts

@@ -1,5 +1,5 @@
 import "../popover/esp-popover.js";
-import { EspalierIntentElementBase } from "../shared/esp-intent-element-base.js";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type EspalierIntentVariant } from "../shared/intent-values.js";
 export type EspalierStatusIndicatorVariant = EspalierIntentVariant;
 export type EspalierStatusIndicatorPlacement = "top" | "bottom" | "left" | "right";
@@ -10,13 +10,13 @@ export type EspalierStatusIndicatorChrome = "pill" | "outline" | "none";
  *
  * ```html
  * <esp-status-indicator
- *   variant="warning"
+ *   intent="warning"
  *   label="Image processing delayed"
  *   placement="right">
  *   The image is still queued. It will retry automatically.
  * </esp-status-indicator>
  *
- * <esp-status-indicator variant="success" label="Published">
+ * <esp-status-indicator intent="success" label="Published">
  *   This page is live and visible to visitors.
  * </esp-status-indicator>
  * ```
@@ -26,22 +26,22 @@ export type EspalierStatusIndicatorChrome = "pill" | "outline" | "none";
  * The `chrome` attribute controls the chip treatment around the icon.
  * `pill` (the default) renders the filled circular background, `outline`
  * keeps only the border, and `none` drops both — leaving just the
- * variant-colored icon and its popover affordance. `chrome="none"` is the
+ * intent-colored icon and its popover affordance. `chrome="none"` is the
  * right choice when the indicator sits inside dense metadata rows where
  * a full pill would feel heavy.
  *
  * ```html
  * <esp-box style="display: flex; gap: var(--esp-size-normal); align-items: center;">
- *   <esp-status-indicator variant="success" label="Pill (default)">
+ *   <esp-status-indicator intent="success" label="Pill (default)">
  *     Pill chrome wraps the icon in a filled circle.
  *   </esp-status-indicator>
  *
- *   <esp-status-indicator chrome="outline" variant="success" label="Outline">
+ *   <esp-status-indicator chrome="outline" intent="success" label="Outline">
  *     Outline chrome keeps the border but drops the fill.
  *   </esp-status-indicator>
  *
- *   <esp-status-indicator chrome="none" variant="success" label="None">
- *     None drops the chrome entirely — just the variant-colored icon.
+ *   <esp-status-indicator chrome="none" intent="success" label="None">
+ *     None drops the chrome entirely — just the intent-colored icon.
  *   </esp-status-indicator>
  * </esp-box>
  * ```
@@ -112,7 +112,7 @@ export type EspalierStatusIndicatorChrome = "pill" | "outline" | "none";
  *
  * <esp-status-indicator
  *   class="responsive-layers-indicator"
- *   variant="success"
+ *   intent="success"
  *   icon="layers-intersect"
  *   label="Responsive layers ready">
  *   <strong>Responsive layers ready</strong>
@@ -130,7 +130,7 @@ export type EspalierStatusIndicatorChrome = "pill" | "outline" | "none";
  * blocks of structured content (lists, key/value pairs) render inside
  * the popover at `--esp-status-indicator-popover-max-width`.
  * @slot icon - Optional custom status icon. When provided, it
- * overrides both the `icon` attribute and built-in variant icon.
+ * overrides both the `icon` attribute and built-in intent icon.
  *
  * @cssprop [--esp-status-indicator-width=var(--esp-size-normal-to-medium)] -
  * Width of the indicator chip. Override on the host to render a
@@ -151,7 +151,8 @@ export type EspalierStatusIndicatorChrome = "pill" | "outline" | "none";
  * @menuLabel Status Indicator
  * @menuIcon info
  */
-export declare class EspalierStatusIndicator extends EspalierIntentElementBase {
+export declare class EspalierStatusIndicator extends EspalierElementBase {
+    protected intentEmitsTokens: boolean;
     /** Optional icon name from the Espalier SVG sprite. */
     icon: string;
     /**
@@ -166,7 +167,7 @@ export declare class EspalierStatusIndicator extends EspalierIntentElementBase {
     /**
      * Visual chrome around the status icon. `pill` renders the filled
      * circular treatment, `outline` keeps only the border, and `none`
-     * renders the variant-colored icon alone.
+     * renders the intent-colored icon alone.
      */
     get chrome(): EspalierStatusIndicatorChrome;
     set chrome(value: EspalierStatusIndicatorChrome | string | null);

package/dist/status-indicator/esp-status-indicator.js

@@ -1,4 +1,4 @@
-var n=function(t,e,r,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,r):a,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,r,a);else for(var h=t.length-1;h>=0;h--)(p=t[h])&&(i=(l<3?p(i):l>3?p(e,r,i):p(e,r))||i);return l>3&&i&&Object.defineProperty(e,r,i),i};import{css as v,html as s,nothing as m}from"lit";import{customElement as f,property as c,state as d}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{createRef as b,ref as u}from"lit/directives/ref.js";import"../popover/esp-popover.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{EspalierIntentElementBase as k,intentSurfaceTokens as w}from"../shared/esp-intent-element-base.js";import{getIconHrefForHost as x}from"../shared/intent-values.js";import{SlottedIconController as $}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as B}from"../shared/svgs/render-sprite-icon.js";function P(t){return t==="bottom"||t==="left"||t==="right"?t:"top"}function S(t){return t==="outline"||t==="none"?t:"pill"}let I=0,o=class extends k{constructor(){super(...arguments),this.popoverRef=b(),this.iconSlot=new $(this),this.placementBacker="top",this.chromeBacker="pill",this.descriptionId=`esp-status-indicator-${++I}`,this.open=!1,this.popoverPinned=!1,this.icon="",this.label="",this.handlePopoverOpened=()=>{this.open=!0},this.handlePopoverClosed=()=>{this.open=!1,this.popoverPinned=!1},this.handleClick=()=>{this.pinPopoverOpen()},this.handleKeydown=e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault(),this.pinPopoverOpen();return}e.key==="Escape"&&(e.preventDefault(),this.popoverRef.value?.closePopover())}}get placement(){return this.placementBacker}set placement(e){const r=this.placementBacker;this.placementBacker=P(e),this.requestUpdate("placement",r),this.syncPlacementAttribute()}get chrome(){return this.chromeBacker}set chrome(e){const r=this.chromeBacker;this.chromeBacker=S(e),this.requestUpdate("chrome",r),this.syncChromeAttribute()}get attach(){switch(this.placement){case"bottom":return"below";case"left":return"left";case"right":return"right";case"top":default:return"above"}}get accessibleLabel(){return this.label||`${this.variant} status`}syncPlacementAttribute(){const e=this.getAttribute("placement");e!==null&&e!==this.placementBacker&&this.setAttribute("placement",this.placementBacker)}syncChromeAttribute(){const e=this.getAttribute("chrome");e!==null&&e!==this.chromeBacker&&this.setAttribute("chrome",this.chromeBacker)}pinPopoverOpen(){this.popoverPinned=!0,this.popoverRef.value?.openPopover()}renderDefaultIcon(){switch(this.variant){case"success":return s`
+var n=function(t,e,o,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,o):a,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,o,a);else for(var h=t.length-1;h>=0;h--)(p=t[h])&&(i=(l<3?p(i):l>3?p(e,o,i):p(e,o))||i);return l>3&&i&&Object.defineProperty(e,o,i),i};import{css as v,html as s,nothing as f}from"lit";import{customElement as g,property as c,state as d}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{createRef as y,ref as u}from"lit/directives/ref.js";import"../popover/esp-popover.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{intentSurfaceTokens as k}from"../shared/style-fragments.js";import{getIconHrefForHost as w}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as $}from"../shared/svgs/render-sprite-icon.js";function P(t){return t==="bottom"||t==="left"||t==="right"?t:"top"}function B(t){return t==="outline"||t==="none"?t:"pill"}let S=0,r=class extends m{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.popoverRef=y(),this.iconSlot=new x(this),this.placementBacker="top",this.chromeBacker="pill",this.descriptionId=`esp-status-indicator-${++S}`,this.open=!1,this.popoverPinned=!1,this.icon="",this.label="",this.handlePopoverOpened=()=>{this.open=!0},this.handlePopoverClosed=()=>{this.open=!1,this.popoverPinned=!1},this.handleClick=()=>{this.pinPopoverOpen()},this.handleKeydown=e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault(),this.pinPopoverOpen();return}e.key==="Escape"&&(e.preventDefault(),this.popoverRef.value?.closePopover())}}get placement(){return this.placementBacker}set placement(e){const o=this.placementBacker;this.placementBacker=P(e),this.requestUpdate("placement",o),this.syncPlacementAttribute()}get chrome(){return this.chromeBacker}set chrome(e){const o=this.chromeBacker;this.chromeBacker=B(e),this.requestUpdate("chrome",o),this.syncChromeAttribute()}get attach(){switch(this.placement){case"bottom":return"below";case"left":return"left";case"right":return"right";case"top":default:return"above"}}get accessibleLabel(){return this.label||`${this.intent} status`}syncPlacementAttribute(){const e=this.getAttribute("placement");e!==null&&e!==this.placementBacker&&this.setAttribute("placement",this.placementBacker)}syncChromeAttribute(){const e=this.getAttribute("chrome");e!==null&&e!==this.chromeBacker&&this.setAttribute("chrome",this.chromeBacker)}pinPopoverOpen(){this.popoverPinned=!0,this.popoverRef.value?.openPopover()}renderDefaultIcon(){switch(this.intent){case"success":return s`
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
             <path d="M5 12l5 5l10 -10"></path>
           </svg>
@@ -26,14 +26,14 @@ var n=function(t,e,r,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnP
             <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
             <path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18z"></path>
           </svg>
-        `}}renderIcon(){const e=x(this.icon,this),r=this.iconSlot.hasSlottedIcon();return s`<span class="indicator-icon" aria-hidden="true">
+        `}}renderIcon(){const e=w(this.icon,this),o=this.iconSlot.hasSlottedIcon();return s`<span class="indicator-icon" aria-hidden="true">
       <slot
         name="icon"
         ${u(this.iconSlot.slotRef)}
         @slotchange=${this.iconSlot.handleSlotChange}
       ></slot>
-      ${r?m:e?B(e,{class:null}):this.renderDefaultIcon()}
-    </span>`}render(){const e={indicator:!0,[`variant-${this.variant}`]:!0,[`chrome-${this.chrome}`]:!0};return s`
+      ${o?f:e?$(e,{class:null}):this.renderDefaultIcon()}
+    </span>`}render(){const e={indicator:!0,[`intent-${this.intent}`]:!0,[`chrome-${this.chrome}`]:!0};return s`
       <esp-popover
         ${u(this.popoverRef)}
         trigger=${this.popoverPinned?"none":"focus-hover"}
@@ -48,7 +48,7 @@ var n=function(t,e,r,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnP
         <button
           slot="target"
           type="button"
-          class=${g(e)}
+          class=${b(e)}
           aria-label=${this.accessibleLabel}
           aria-expanded=${String(this.open)}
           aria-describedby=${this.descriptionId}
@@ -61,7 +61,7 @@ var n=function(t,e,r,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnP
           <slot></slot>
         </div>
       </esp-popover>
-    `}};o.styles=[...y.styles,w,v`
+    `}};r.styles=[...m.styles,k,v`
       :host {
         display: inline-flex;
         vertical-align: middle;
@@ -147,4 +147,4 @@ var n=function(t,e,r,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnP
         font-size: var(--esp-type-small);
         line-height: 1.4;
       }
-    `],n([d()],o.prototype,"open",void 0),n([d()],o.prototype,"popoverPinned",void 0),n([c({type:String})],o.prototype,"icon",void 0),n([c({type:String})],o.prototype,"label",void 0),n([c({type:String,reflect:!0})],o.prototype,"placement",null),n([c({type:String,reflect:!0})],o.prototype,"chrome",null),o=n([f("esp-status-indicator")],o);export{o as EspalierStatusIndicator};
+    `],n([d()],r.prototype,"open",void 0),n([d()],r.prototype,"popoverPinned",void 0),n([c({type:String})],r.prototype,"icon",void 0),n([c({type:String})],r.prototype,"label",void 0),n([c({type:String,reflect:!0})],r.prototype,"placement",null),n([c({type:String,reflect:!0})],r.prototype,"chrome",null),r=n([g("esp-status-indicator")],r);export{r as EspalierStatusIndicator};

package/dist/tabs/esp-tab-group.d.ts

@@ -69,15 +69,17 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </esp-tab-group>
  * ```
  *
- * ### Color variants
+ * ### Zone theming
+ *
+ * Tab groups pick up zone theming from a `context` attribute:
  *
  * ```html
- * <esp-tab-group variant="complementary">
- *   <esp-tab label="Complementary A">
- *     <p>Complementary variant content.</p>
+ * <esp-tab-group context="quiet">
+ *   <esp-tab label="First">
+ *     <p>Zone-correct content.</p>
  *   </esp-tab>
- *   <esp-tab label="Complementary B">
- *     <p>More complementary content.</p>
+ *   <esp-tab label="Second">
+ *     <p>More content.</p>
  *   </esp-tab>
  * </esp-tab-group>
  * ```

package/dist/textarea/esp-textarea.d.ts

@@ -22,12 +22,13 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </script>
  * ```
  *
- * Textarea can have [color variants](/espalier-guides/).
- * Here are some examples:
+ * Textareas pick up zone theming from an ancestor's `context`
+ * attribute — see the [theming guide](/espalier-guides/):
  *
  * ```html
- * <esp-textarea variant="split-complementary-left"></esp-textarea>
- * <esp-textarea variant="analogous-left"></esp-textarea>
+ * <esp-box context="quiet">
+ *   <esp-textarea label="Inside the quiet zone"></esp-textarea>
+ * </esp-box>
  * ```
  *
  * ### Validation with minlength and maxlength

package/dist/toaster/esp-toaster.d.ts

@@ -33,8 +33,8 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * ```ts
  * import { showToast } from "@taprootio/espalier";
  *
- * showToast({ message: "Saved!", variant: "success" });
- * showToast({ message: "Connection lost", variant: "danger", duration: 0 });
+ * showToast({ message: "Saved!", intent: "success" });
+ * showToast({ message: "Connection lost", intent: "danger", duration: 0 });
  * ```
  *
  * Try it out — type a message and click a button to fire a toast:
@@ -51,10 +51,10 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *     </esp-form-item>
  *   </div>
  *   <div style="display: flex; flex-wrap: wrap; gap: var(--esp-size-small); margin-top: var(--esp-size-small);">
- *     <esp-button id="fire-toast" label="Show Toast" variant="primary" collapsed></esp-button>
- *     <esp-button id="fire-persistent" label="Show Persistent Toast" variant="warning" collapsed></esp-button>
- *     <esp-button id="fire-success" label="Success!" variant="success" collapsed></esp-button>
- *     <esp-button id="fire-danger" label="Error!" variant="danger" collapsed></esp-button>
+ *     <esp-button id="fire-toast" label="Show Toast"  collapsed></esp-button>
+ *     <esp-button id="fire-persistent" label="Show Persistent Toast" intent="warning" collapsed></esp-button>
+ *     <esp-button id="fire-success" label="Success!" intent="success" collapsed></esp-button>
+ *     <esp-button id="fire-danger" label="Error!" intent="danger" collapsed></esp-button>
  *   </div>
  * </esp-box>
  * <script>
@@ -72,20 +72,20 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *       message: msgInput.value,
  *       duration: 0,
  *       icon: "bread",
- *       variant: "warning"
+ *       intent: "warning"
  *     });
  *   });
  *   findById("fire-success").addEventListener("clicked", () => {
  *     showToast({
  *       message: "Operation completed successfully!",
- *       variant: "success",
+ *       intent: "success",
  *       icon: "bread"
  *     });
  *   });
  *   findById("fire-danger").addEventListener("clicked", () => {
  *     showToast({
  *       message: "Something went wrong!",
- *       variant: "danger",
+ *       intent: "danger",
  *       duration: 0,
  *       icon: "bread"
  *     });

package/dist/toaster/esp-toaster.js

@@ -1,8 +1,8 @@
-var u=function(o,e,s,n){var c=arguments.length,r=c<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(o,e,s,n);else for(var d=o.length-1;d>=0;d--)(a=o[d])&&(r=(c<3?a(r):c>3?a(e,s,r):a(e,s))||r);return c>3&&r&&Object.defineProperty(e,s,r),r},t;import{css as f,html as l}from"lit";import{customElement as v,state as h}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{getEspBus as b}from"../shared/bus-events.js";import{getIconHrefForHost as m}from"../shared/intent-values.js";import{renderSpriteIcon as y}from"../shared/svgs/render-sprite-icon.js";let i=t=class extends p{constructor(){super(...arguments),this.toasts=[]}connectedCallback(){super.connectedCallback(),t.connected.push(this),t.busSubscribed||(b().subscribe("show-toast",t.boundDeliver),t.busSubscribed=!0),typeof ResizeObserver<"u"&&(this.resizeObserver=new ResizeObserver(()=>t.syncRenderer()),this.resizeObserver.observe(this)),t.syncRenderer()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,t.connected=t.connected.filter(e=>e!==this),t.connected.length===0?(t.busSubscribed&&(b().unsubscribe("show-toast",t.boundDeliver),t.busSubscribed=!1),t.queue=[]):t.syncRenderer()}static deliver(e){t.queue=[...t.queue,e];const s=e.duration??5;s>0&&setTimeout(()=>t.dismiss(e),s*1e3),t.syncRenderer()}static dismiss(e){t.queue.includes(e)&&(t.queue=t.queue.filter(s=>s!==e),e.onClosed?.(),t.syncRenderer())}static syncRenderer(){const e=t.connected.find(s=>s.isVisible())??t.connected[0];for(const s of t.connected){const n=s===e?t.queue:[];s.toasts.length===n.length&&s.toasts.every((c,r)=>c===n[r])||(s.toasts=[...n])}}isVisible(){const e=this;return typeof e.checkVisibility=="function"?e.checkVisibility({visibilityProperty:!0,opacityProperty:!0,checkVisibilityCSS:!0,checkOpacity:!0}):this.offsetParent!==null}removeToast(e){t.dismiss(e)}getToastIconHref(e){return e.svgPath?.trim()||m(e.icon,this)}render(){return l`
+var u=function(o,e,s,n){var c=arguments.length,r=c<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(o,e,s,n);else for(var d=o.length-1;d>=0;d--)(a=o[d])&&(r=(c<3?a(r):c>3?a(e,s,r):a(e,s))||r);return c>3&&r&&Object.defineProperty(e,s,r),r},t;import{css as f,html as l}from"lit";import{customElement as h,state as v}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{getEspBus as b}from"../shared/bus-events.js";import{getIconHrefForHost as m}from"../shared/intent-values.js";import{renderSpriteIcon as y}from"../shared/svgs/render-sprite-icon.js";let i=t=class extends p{constructor(){super(...arguments),this.toasts=[]}connectedCallback(){super.connectedCallback(),t.connected.push(this),t.busSubscribed||(b().subscribe("show-toast",t.boundDeliver),t.busSubscribed=!0),typeof ResizeObserver<"u"&&(this.resizeObserver=new ResizeObserver(()=>t.syncRenderer()),this.resizeObserver.observe(this)),t.syncRenderer()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,t.connected=t.connected.filter(e=>e!==this),t.connected.length===0?(t.busSubscribed&&(b().unsubscribe("show-toast",t.boundDeliver),t.busSubscribed=!1),t.queue=[]):t.syncRenderer()}static deliver(e){t.queue=[...t.queue,e];const s=e.duration??5;s>0&&setTimeout(()=>t.dismiss(e),s*1e3),t.syncRenderer()}static dismiss(e){t.queue.includes(e)&&(t.queue=t.queue.filter(s=>s!==e),e.onClosed?.(),t.syncRenderer())}static syncRenderer(){const e=t.connected.find(s=>s.isVisible())??t.connected[0];for(const s of t.connected){const n=s===e?t.queue:[];s.toasts.length===n.length&&s.toasts.every((c,r)=>c===n[r])||(s.toasts=[...n])}}isVisible(){const e=this;return typeof e.checkVisibility=="function"?e.checkVisibility({visibilityProperty:!0,opacityProperty:!0,checkVisibilityCSS:!0,checkOpacity:!0}):this.offsetParent!==null}removeToast(e){t.dismiss(e)}getToastIconHref(e){return e.svgPath?.trim()||m(e.icon,this)}render(){return l`
       <div id="toaster" role="region" aria-label="Notifications" aria-live="polite">
         ${this.toasts.map(e=>{const s=this.getToastIconHref(e);return l`<esp-info
             .destroyable=${(e.duration??5)===0}
-            .variant=${e.variant??"complementary"}
+            .intent=${e.intent??"info"}
             @destroy=${()=>this.removeToast(e)}
           >
             ${s?y(s,{"aria-hidden":null,class:null,slot:"icon-slot"}):l``}
@@ -25,4 +25,4 @@ var u=function(o,e,s,n){var c=arguments.length,r=c<3?e:n===null?n=Object.getOwnP
         box-shadow: 3px 3px 6px var(--esp-color-shadow);
         pointer-events: all;
       }
-    `],u([h()],i.prototype,"toasts",void 0),i=t=u([v("esp-toaster")],i);export{i as EspalierToaster};
+    `],u([v()],i.prototype,"toasts",void 0),i=t=u([h("esp-toaster")],i);export{i as EspalierToaster};

package/dist/tree/esp-tree.js

@@ -228,7 +228,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
                 <div class="graft-actions">
                   <esp-button
                     collapsed
-                    variant="danger"
+                    intent="danger"
                     label="Cancel"
                     icon="circle-x"
                     ?disabled=${this.disabled}
@@ -236,7 +236,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
                   ></esp-button>
                   <esp-button
                     collapsed
-                    variant="success"
+                    intent="success"
                     label="Add branch"
                     icon="plus"
                     ?disabled=${this.disabled}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.20.0",
+  "version": "3.0.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",

package/dist/shared/esp-intent-element-base.d.ts

@@ -1,10 +0,0 @@
-import { EspalierElementBase } from "./esp-element-base.js";
-import { type EspalierIntentVariant } from "./intent-values.js";
-export declare abstract class EspalierIntentElementBase extends EspalierElementBase {
-    protected intentVariantBacker: EspalierIntentVariant;
-    /** Semantic visual treatment. One of `neutral`, `success`, `warning`, `danger`, `info`. */
-    get variant(): EspalierIntentVariant;
-    set variant(value: EspalierIntentVariant | string | null);
-    protected getVariantColorSource(): "";
-}
-export declare const intentSurfaceTokens: import("lit").CSSResult;

package/dist/shared/esp-intent-element-base.js

@@ -1,31 +0,0 @@
-var l=function(t,r,o,n){var a=arguments.length,e=a<3?r:n===null?n=Object.getOwnPropertyDescriptor(r,o):n,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,r,o,n);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(e=(a<3?s(e):a>3?s(r,o,e):s(r,o))||e);return a>3&&e&&Object.defineProperty(r,o,e),e};import{css as i}from"lit";import{property as p}from"lit/decorators.js";import{EspalierElementBase as v}from"./esp-element-base.js";import{normalizeIntentVariant as h}from"./intent-values.js";class d extends v{constructor(){super(...arguments),this.intentVariantBacker="neutral"}get variant(){return this.intentVariantBacker}set variant(r){const o=this.intentVariantBacker;this.intentVariantBacker=h(r),this.requestUpdate("variant",o),this.applyVariantTokens()}getVariantColorSource(){return""}}l([p({type:String})],d.prototype,"variant",null);const k=i`
-  .variant-neutral {
-    --_esp-intent-background: var(--esp-color-layer-2);
-    --_esp-intent-border-color: var(--esp-color-border);
-    --_esp-intent-color: var(--esp-color-text);
-  }
-
-  .variant-success {
-    --_esp-intent-background: oklch(from var(--esp-color-success) var(--esp-l-raised-2) c h);
-    --_esp-intent-border-color: oklch(from var(--esp-color-success) var(--esp-l-border) c h);
-    --_esp-intent-color: oklch(from var(--esp-color-success) var(--esp-l-text) c h);
-  }
-
-  .variant-warning {
-    --_esp-intent-background: oklch(from var(--esp-color-warning) var(--esp-l-raised-2) c h);
-    --_esp-intent-border-color: oklch(from var(--esp-color-warning) var(--esp-l-border) c h);
-    --_esp-intent-color: oklch(from var(--esp-color-warning) var(--esp-l-text) c h);
-  }
-
-  .variant-danger {
-    --_esp-intent-background: oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h);
-    --_esp-intent-border-color: oklch(from var(--esp-color-danger) var(--esp-l-border) c h);
-    --_esp-intent-color: var(--esp-color-danger-text);
-  }
-
-  .variant-info {
-    --_esp-intent-background: var(--esp-color-link-hover-bg);
-    --_esp-intent-border-color: oklch(from var(--esp-color-link) var(--esp-l-border) c h);
-    --_esp-intent-color: var(--esp-color-link);
-  }
-`;export{d as EspalierIntentElementBase,k as intentSurfaceTokens};