@taprootio/espalier 4.2.0 → 4.4.0

package/dist/pickers/esp-picker-menu.js

@@ -1,4 +1,4 @@
-var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(p,t,e,i);else for(var o=p.length-1;o>=0;o--)(r=p[o])&&(s=(l<3?r(s):l>3?r(t,e,s):r(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as I,css as b,html as d}from"lit";import{customElement as x,property as u,state as v}from"lit/decorators.js";import{createRef as P,ref as S}from"lit/directives/ref.js";import{styleMap as C}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as y,viewportSize as m}from"../shared/viewport.js";import{ESP_EVENTS as g}from"../shared/events.js";const c="highlighted";let n=class extends I{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=P(),this.internalPoolClone=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const i={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
+var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,s);else for(var n=u.length-1;n>=0;n--)(r=u[n])&&(i=(l<3?r(i):l>3?r(t,e,i):r(t,e))||i);return l>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as I,css as P,html as d}from"lit";import{customElement as b,property as g,state as v}from"lit/decorators.js";import{createRef as x,ref as S}from"lit/directives/ref.js";import{styleMap as w}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as y,viewportSize as f}from"../shared/viewport.js";import{ESP_EVENTS as m}from"../shared/events.js";const p="highlighted";let h=class extends I{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=x(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const s={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
       class="picker-item"
       data-picker-index=${e}
       .text=${t.text}
@@ -6,17 +6,17 @@ var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnP
       .selected=${t.selected}
       .icon=${t.icon??""}
       .highlightRanges=${t.highlightRanges}
-      style=${C(i)}
+      style=${w(s)}
     >
       ${t.slotNodes?.map(l=>l.cloneNode(!0))}
-    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let i=!1;if(e){const l=this.virtualizedItemsPool===this.internalPoolClone;this.internalPoolClone=null;const s=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`);i=!l&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((r,o)=>r!==s[o])),this.lastPoolFingerprint=s}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=i,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(s=>s.selected).map(s=>s.value);this.virtualizedItemsPool=t;const i=t.filter(s=>s.selected),l=i.map(s=>s.value);(e.length!==l.length||e.some((s,r)=>s!==l[r]))&&this.dispatchEvent(new CustomEvent(g.PICKER_MENU_SELECTION_CHANGED,{detail:i,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;i&&i.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,i=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;if(s){if(await this.stableLayout(s),i())return;const r=s.scrollTop;for(let o=0;o<3;o+=1)try{s.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(s),i()||s.scrollTop!==r)return}if(await this.stableLayout(s),i())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(c))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${c}`))e.classList.remove(c)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(c);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const i of e)if(this.virtualizedItemsPool.findIndex(s=>s.value===i.value&&s.text===i.text)===this.highlightIndex)return i;return null}pickItem(t){for(const l of this.pickerItems)l===t?l.selected=!l.selected:this.multiSelect||(l.selected=!1);const e=this.virtualizedItemsPool.indexOf(t);if(e!==-1){this.highlightIndex=e;const l=this.getHighlightedElement();l&&(this.clearHighlight(),l.classList.add(c))}const i=[...this.pickerItems];this.internalPoolClone=i,this.pickerItems=i,this.dispatchEvent(new CustomEvent(g.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(g.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const i=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!i)return null;for(const l of i){const s=l.getBoundingClientRect();if(t>=s.left&&t<=s.right&&e>=s.top&&e<=s.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:i}=m(),{spaceAbove:l,spaceBelow:s}=y(e,i),r=Math.max(Math.max(l,s)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=i,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>s?this.style.setProperty("bottom",`${i-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const o=this.pickerItems.find(f=>f.selected);this.highlightIndex=o?this.pickerItems.indexOf(o):0,this.openSessionGeneration+=1;const h=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{h!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const i=t.layoutComplete;if(!i)return;const l=await Promise.race([i.then(()=>"settled",()=>"superseded"),new Promise(s=>setTimeout(()=>s("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===i)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const i=this.virtualizerRef.value;if(!i){requestAnimationFrame(()=>{if(!this.isConnected)return;const r=this.shadowRoot?.querySelector(".status-message");if(r){const o=Math.min(r.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${o}px`)}});continue}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0;if(i.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l>0&&!this.pendingItemsChanged&&!this.retargetingSequence&&i.scrollTop<l){if(i.scrollTop=l,await this.stableLayout(i),t())return;if(this.menuDirty)continue}const s=this.virtualizedItemsPool;if(s.length!==0){if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const r=s.findIndex(o=>o.selected);r>=0?this.highlightIndex=r:this.highlightIndex>=s.length?this.highlightIndex=s.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{i.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3),this.preRenderScrollTop=null,this.retargetingSequence=!1}}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const i=getComputedStyle(this),l=(parseFloat(i.borderTopWidth)||0)+(parseFloat(i.borderBottomWidth)||0),s=this.virtualizedItemsPool.length;if(e.length<s)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const o=t.getBoundingClientRect(),h=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),h.bottom-o.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const i=e.querySelectorAll("esp-picker-item");let l=t.width;for(const s of i)l=Math.max(l,s.scrollWidth);if(l+=2,l>t.width){const{width:s}=m(),r=Math.min(l,s-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:i}=m();if(i!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:o}=y(e,i),h=Math.max(Math.max(r,o)-75,0);this.maxAvailableHeight=h,this.lastViewportHeight=i,(parseFloat(this.style.getPropertyValue("height"))||0)>h&&this.style.setProperty("height",`${h}px`),this.sizeToContent(h)}this.style.setProperty("left",`${e.left}px`);const l=e.top,s=i-e.bottom;l>s?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${i-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
+    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let s=!1;if(e){const l=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===l.length&&this.internalPoolFingerprint.every((r,n)=>r===l[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),s=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==l.length||this.lastPoolFingerprint.some((r,n)=>r!==l[n])),this.lastPoolFingerprint=l}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=s,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=t;const s=t.filter(i=>i.selected),l=s.map(i=>i.value);(e.length!==l.length||e.some((i,r)=>i!==l[r]))&&this.dispatchEvent(new CustomEvent(m.PICKER_MENU_SELECTION_CHANGED,{detail:s,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;s&&s.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,s=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),s())return;const r=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),s()||i.scrollTop!==r)return}if(await this.stableLayout(i),s())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(p))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${p}`))e.classList.remove(p)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(p);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const s of e)if(this.virtualizedItemsPool.findIndex(i=>i.value===s.value&&i.text===s.text)===this.highlightIndex)return s;return null}pickItem(t){const e=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&e>0&&(this.preRenderScrollTop=e),e>0&&(this.internalPickScrollTop=e);for(const i of this.pickerItems)i===t?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const s=this.virtualizedItemsPool.indexOf(t);if(s!==-1){this.highlightIndex=s;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(p))}const l=[...this.pickerItems];this.internalPoolClone=l,this.internalPoolFingerprint=l.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=l,this.dispatchEvent(new CustomEvent(m.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(m.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const s=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!s)return null;for(const l of s){const i=l.getBoundingClientRect();if(t>=i.left&&t<=i.right&&e>=i.top&&e<=i.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:s}=f(),{spaceAbove:l,spaceBelow:i}=y(e,s),r=Math.max(Math.max(l,i)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=s,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>i?this.style.setProperty("bottom",`${s-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const n=this.pickerItems.find(c=>c.selected);this.highlightIndex=n?this.pickerItems.indexOf(n):0,this.openSessionGeneration+=1;const o=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{o!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const s=t.layoutComplete;if(!s)return;const l=await Promise.race([s.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===s)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(!this.isConnected)return;const o=this.shadowRoot?.querySelector(".status-message");if(o){const c=Math.min(o.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${c}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0,i=l>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),i&&s.scrollTop<l){if(s.scrollTop=l,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const r=this.virtualizedItemsPool;if(r.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const o=r.findIndex(c=>c.selected);o>=0?this.highlightIndex=o:this.highlightIndex>=r.length?this.highlightIndex=r.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const n=Math.max(i?l:0,this.internalPickScrollTop??0);if(n>0){if(s.scrollTop<n&&(s.scrollTop=n),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(o=>requestAnimationFrame(()=>o())),t())return;if(this.menuDirty)continue;s.scrollTop<n&&(s.scrollTop=n)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const s=getComputedStyle(this),l=(parseFloat(s.borderTopWidth)||0)+(parseFloat(s.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(e.length<i)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const n=t.getBoundingClientRect(),o=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),o.bottom-n.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const s=e.querySelectorAll("esp-picker-item");let l=t.width;for(const i of s)l=Math.max(l,i.scrollWidth);if(l+=2,l>t.width){const{width:i}=f(),r=Math.min(l,i-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:s}=f();if(s!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:n}=y(e,s),o=Math.max(Math.max(r,n)-75,0);this.maxAvailableHeight=o,this.lastViewportHeight=s,(parseFloat(this.style.getPropertyValue("height"))||0)>o&&this.style.setProperty("height",`${o}px`),this.sizeToContent(o)}this.style.setProperty("left",`${e.left}px`);const l=e.top,i=s-e.bottom;l>i?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${s-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
       ${S(this.virtualizerRef)}
       scroller
       .items=${this.virtualizedItemsPool}
       .renderItem=${this.renderPickerItem}
       @pointerdown=${this.handleItemPointerDown}
-      @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(g.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
-    ></lit-virtualizer>`}};n.styles=b`
+      @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(m.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
+    ></lit-virtualizer>`}};h.styles=P`
     :host {
       position: fixed;
       inset: unset;
@@ -54,4 +54,4 @@ var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnP
       font-style: italic;
       background: var(--esp-color-layer-2);
     }
-  `,a([u({type:String})],n.prototype,"label",void 0),a([v()],n.prototype,"virtualizedItemsPool",void 0),a([v()],n.prototype,"highlightIndex",void 0),a([u({attribute:"multi-select",type:Boolean})],n.prototype,"multiSelect",void 0),a([u({type:Boolean})],n.prototype,"loading",void 0),a([u({type:String,attribute:"empty-message"})],n.prototype,"emptyMessage",void 0),n=a([x("esp-picker-menu")],n);export{n as EspalierPickerMenu};
+  `,a([g({type:String})],h.prototype,"label",void 0),a([v()],h.prototype,"virtualizedItemsPool",void 0),a([v()],h.prototype,"highlightIndex",void 0),a([g({attribute:"multi-select",type:Boolean})],h.prototype,"multiSelect",void 0),a([g({type:Boolean})],h.prototype,"loading",void 0),a([g({type:String,attribute:"empty-message"})],h.prototype,"emptyMessage",void 0),h=a([b("esp-picker-menu")],h);export{h as EspalierPickerMenu};

package/dist/progress/esp-progress.js

@@ -1,4 +1,4 @@
-var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as f}from"lit";import{customElement as y,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{styleMap as b}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
+var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as f}from"lit";import{customElement as b,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{styleMap as y}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
       <div
         class=${g(s)}
         role="progressbar"
@@ -7,7 +7,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
         aria-valuemax=${this.max}
         aria-valuenow=${e?p:this.clampedValue}
       >
-        <div class="fill" style=${b(t)}></div>
+        <div class="fill" style=${y(t)}></div>
       </div>
       ${o?m`<div class="value-text">${Math.round(this.percentage)}%</div>`:p}
     `}renderCircle(){const e=this.isIndeterminate,s=e?d*.75:d-this.percentage/100*d,t=this.showValue&&!e;return m`
@@ -92,7 +92,10 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
       }
 
       .value-text {
-        font-family: var(--esp-font-monospace);
+        font-family: var(
+          --_esp-font-monospace-effective,
+          var(--esp-font-monospace, var(--_esp-font-monospace-fallback))
+        );
         font-size: var(--esp-progress-font-size, var(--esp-type-small));
         color: var(--esp-progress-text-color, var(--esp-color-text));
         text-align: center;
@@ -146,7 +149,10 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
 
       .circle-text {
         fill: var(--esp-progress-text-color, var(--esp-color-text));
-        font-family: var(--esp-font-monospace);
+        font-family: var(
+          --_esp-font-monospace-effective,
+          var(--esp-font-monospace, var(--_esp-font-monospace-fallback))
+        );
         font-size: 8px;
         font-weight: 600;
       }
@@ -180,4 +186,4 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
           opacity: 0.5;
         }
       }
-    `],a([l({type:Number})],r.prototype,"value",void 0),a([l({type:Number})],r.prototype,"max",void 0),a([l({type:String})],r.prototype,"label",void 0),a([l({attribute:"show-value",type:Boolean})],r.prototype,"showValue",void 0),a([l({type:String,reflect:!0})],r.prototype,"size",void 0),a([l({type:String,reflect:!0})],r.prototype,"mode",void 0),r=a([y("esp-progress")],r);export{r as EspalierProgress};
+    `],a([l({type:Number})],r.prototype,"value",void 0),a([l({type:Number})],r.prototype,"max",void 0),a([l({type:String})],r.prototype,"label",void 0),a([l({attribute:"show-value",type:Boolean})],r.prototype,"showValue",void 0),a([l({type:String,reflect:!0})],r.prototype,"size",void 0),a([l({type:String,reflect:!0})],r.prototype,"mode",void 0),r=a([b("esp-progress")],r);export{r as EspalierProgress};

package/dist/radio-button/esp-radio-button.js

@@ -1,4 +1,4 @@
-var l=function(r,e,i,s){var n=arguments.length,t=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(r,e,i,s);else for(var c=r.length-1;c>=0;c--)(a=r[c])&&(t=(n<3?a(t):n>3?a(e,i,t):a(e,i))||t);return n>3&&t&&Object.defineProperty(e,i,t),t};import{css as h,html as u}from"lit";import{customElement as m,property as d}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{FormFieldDescriptionController as f}from"../shared/form-field-description-controller.js";import{radioSelected as v}from"../shared/svgs/radio-selected.js";import{radioUnselected as b}from"../shared/svgs/radio-unselected.js";import{disabledControl as y,focusRing as g}from"../shared/style-fragments.js";let o=class extends p{constructor(){super(...arguments),this.formItemDescription=new f({host:this,getTarget:()=>this.shadowRoot?.querySelector(".radio-control")}),this.checked=!1,this.value="",this.disabled=!1}focus(e){this.focusShadowElementAfterUpdate(".radio-control",e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}select(){this.disabled||this.checked||(this.checked=!0,this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){e.key===" "&&(e.preventDefault(),this.select())}render(){return u`
+var l=function(r,e,i,s){var a=arguments.length,t=a<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(r,e,i,s);else for(var c=r.length-1;c>=0;c--)(n=r[c])&&(t=(a<3?n(t):a>3?n(e,i,t):n(e,i))||t);return a>3&&t&&Object.defineProperty(e,i,t),t};import{css as h,html as f}from"lit";import{customElement as u,property as d}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{FormFieldDescriptionController as m}from"../shared/form-field-description-controller.js";import{radioSelected as v}from"../shared/svgs/radio-selected.js";import{radioUnselected as b}from"../shared/svgs/radio-unselected.js";import{disabledControl as y,focusRing as g}from"../shared/style-fragments.js";let o=class extends p{constructor(){super(...arguments),this.formItemDescription=new m({host:this,getTarget:()=>this.shadowRoot?.querySelector(".radio-control")}),this.checked=!1,this.value="",this.disabled=!1}focus(e){this.focusShadowElementAfterUpdate(".radio-control",e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}select(){this.disabled||this.checked||(this.checked=!0,this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){e.key===" "&&(e.preventDefault(),this.select())}render(){return f`
       <div
         class="radio-control"
         role="radio"
@@ -22,7 +22,10 @@ var l=function(r,e,i,s){var n=arguments.length,t=n<3?e:s===null?s=Object.getOwnP
         align-items: center;
         gap: var(--esp-size-tiny);
         cursor: pointer;
-        font-family: var(--esp-font-body);
+        font-family: var(
+          --_esp-font-body-effective,
+          var(--esp-font-body, var(--_esp-font-body-fallback))
+        );
         font-size: var(--esp-size-font);
         color: var(--esp-color-text);
         outline: none;
@@ -44,4 +47,4 @@ var l=function(r,e,i,s){var n=arguments.length,t=n<3?e:s===null?s=Object.getOwnP
           line-height: 1.3;
         }
       }
-    `],l([d({type:Boolean,reflect:!0})],o.prototype,"checked",void 0),l([d({type:String})],o.prototype,"value",void 0),l([d({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),o=l([m("esp-radio-button")],o);export{o as EspalierRadioButton};
+    `],l([d({type:Boolean,reflect:!0})],o.prototype,"checked",void 0),l([d({type:String})],o.prototype,"value",void 0),l([d({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),o=l([u("esp-radio-button")],o);export{o as EspalierRadioButton};

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

@@ -63,6 +63,10 @@ export type { SchemeEvents } from "../shared/bus-events.js";
  *
  * @customElement esp-root
  * @slot - Place Espalier components and content here.
+ * @cssprop --esp-font-body - Always-emitted family for body and UI text. Defaults to `system-ui, sans-serif` when `fontBody` is omitted or empty.
+ * @cssprop --esp-font-headings - Consumer-authored heading family. Emitted only when configured; heading recipes otherwise fall back to `--esp-font-body`.
+ * @cssprop --esp-font-brand - Consumer-authored brand family. Emitted only when configured; brand recipes otherwise fall back through headings to `--esp-font-body`.
+ * @cssprop --esp-font-monospace - Family for code and monospace text. Defaults to `monospace`.
  * @cssprop --esp-color-series-1 - First categorical data-series color.
  * @cssprop --esp-color-series-2 - Second categorical data-series color.
  * @cssprop --esp-color-series-3 - Third categorical data-series color.
@@ -243,6 +247,10 @@ export declare class EspalierRoot extends LitElement implements SeedColorRoot {
      * `fonts.googleapis.com`.  `none` prevents those runtime Google
      * Fonts links, leaving local preview CSS and web-safe font stacks
      * available for locked-down, offline, or strict-CSP environments.
+     * Static generators should compile the resolved light/dark themes with
+     * `compileFontPlan()`, embed its CSS in the page head, and set this policy
+     * to `none`; the predeclared target and metric-matched fallback faces then
+     * participate in first layout without any runtime catalog request.
      *
      * @type {"auto" | "none"}
      * @default "auto"

package/dist/root/esp-root.js

@@ -1,7 +1,7 @@
-var h=function(c,e,t,i){var l=arguments.length,s=l<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(c,e,t,i);else for(var n=c.length-1;n>=0;n--)(r=c[n])&&(s=(l<3?r(s):l>3?r(e,t,s):r(e,t))||s);return l>3&&s&&Object.defineProperty(e,t,s),s},a;import{css as b,html as w,LitElement as E}from"lit";import{customElement as C,property as m,state as R}from"lit/decorators.js";import{getEspBus as p}from"../shared/bus-events.js";import{subscribeToRootEvent as x}from"../shared/root-event-subscription.js";import{DEFAULT_LIGHT_THEME as f,DEFAULT_DARK_THEME as y,encodeTheme as S,parseTheme as g,mergeTheme as v}from"../shared/theme.js";import{computeThemeProperties as D}from"./helpers/compute-theme-properties.js";import{registerImageTexture as A,registeredImageTextures as L}from"../shared/image-texture-registry.js";import{registerImageTexture as O,registeredImageTextures as j,BUILT_IN_IMAGE_TEXTURES as H}from"../shared/image-texture-registry.js";const T=1e3;let o=a=class extends E{constructor(){super(...arguments),this.schemeBacker="",this.schemeExplicitlySet=!1,this.resolvingDefaultScheme=!1,this.themeEventsReady=!1,this.systemSchemeQuery=null,this.lastSeedColor="",this.resolvedLightTheme={...f},this.resolvedDarkTheme={...y},this.appliedDataRampProperties=new Set,this.documentClickRegistrationActive=!1,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.lightThemeAttr="",this.darkThemeAttr="",this.fontCSSRoot="/css/fonts/",this.fontDefinitionsUrl="",this.googleFontLoading="auto",this.iconSpriteUrl="/assets/icons.svg",this.themePending=!1,this.themeReadyState=!1,this.themeSettleWaiters=[],this.warnedThemeSettleTimeout=!1,this.defaultScheme="light",this.resizeObserver=new ResizeObserver(()=>{p().publish("window-resized",{emWidth:window.innerWidth/parseFloat(getComputedStyle(document.documentElement).fontSize),emHeight:window.innerHeight/parseFloat(getComputedStyle(document.documentElement).fontSize),pxWidth:window.innerWidth,pxHeight:window.innerHeight})}),this.handleSystemSchemeChange=e=>{this.schemeExplicitlySet||this.defaultScheme!=="system"||(this.resolvingDefaultScheme=!0,this.scheme=e.matches?"dark":"light",this.resolvingDefaultScheme=!1)}}static registerTexture(e,t){A(e,t)}static registeredTextures(){return L()}subscribeScoped(e,t){return x(this,e,t)}get lightTheme(){return this.lightThemeAttr?g(this.lightThemeAttr):null}set lightTheme(e){this.lightThemeAttr=e?S(e):""}get darkTheme(){return this.darkThemeAttr?g(this.darkThemeAttr):null}set darkTheme(e){this.darkThemeAttr=e?S(e):""}get themeSettled(){return this.themeReadyState}whenThemeSettled(){return this.themeReadyState?Promise.resolve():new Promise(e=>{this.themeSettleWaiters.push(e)})}get hasAuthorTheme(){return!!(this.scheme==="dark"?this.darkThemeAttr:this.lightThemeAttr)}settleTheme(){if(this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.themeReadyState)return;this.themeReadyState=!0;const e=this.themeSettleWaiters;this.themeSettleWaiters=[];for(const t of e)t()}get scheme(){return this.schemeBacker}set scheme(e){const t=e==="dark"?"dark":e==="light"?"light":"",i=this.schemeBacker,l=this.schemeExplicitlySet;this.resolvingDefaultScheme||(this.schemeExplicitlySet=t.length>0);const s=t||this.resolveDefaultScheme();l!==this.schemeExplicitlySet&&this.isConnected&&this.syncSystemSchemeListener(),s!==i&&(this.schemeBacker=s,this.requestUpdate("scheme",i),this.themeEventsReady&&p().publish("scheme-changed",{scheme:s,correlationId:this.correlationId}))}get seedColor(){return this.activeTheme.seedColor}static extractFamily(e){if(!e)return"";const t=e.match(/^"([^"]+)"|^'([^']+)'/);return t&&(t[1]||t[2])||""}injectGoogleFontLink(e,t,i){const l="data-esp-font",s=`${this.correlationId}-${e}`,r=document.head.querySelector(`link[${l}="${s}"]`);if(this.googleFontLoading==="none"){r?.remove();return}if(r&&t&&r.dataset.espFamily===t&&r.dataset.espWeight===(i??"")||(r?.remove(),!t))return;const n=encodeURIComponent(t),u=i==="bold"?"700":i==="normal"?"400":i,k=u&&u!=="400"?`:wght@${u}`:"",d=document.createElement("link");d.rel="stylesheet",d.href=`https://fonts.googleapis.com/css2?family=${n}${k}&display=swap`,d.setAttribute(l,s),d.dataset.espFamily=t,d.dataset.espWeight=i??"",document.head.appendChild(d)}syncGoogleFontLinks(){this.googleFontLoading==="none"&&this.removeRuntimeGoogleFontLinks();const e=this.activeTheme;this.injectGoogleFontLink("body",a.extractFamily(e.fontBody),e.fontWeightBody),this.injectGoogleFontLink("headings",a.extractFamily(e.fontHeadings),e.fontWeightHeadings),this.injectGoogleFontLink("brand",a.extractFamily(e.fontBrand),e.fontWeightBrand),this.injectGoogleFontLink("monospace",a.extractFamily(e.fontMonospace),e.fontWeightMonospace)}removeRuntimeGoogleFontLinks(){for(const e of document.head.querySelectorAll(`link[data-esp-font^="${this.correlationId}-"]`))e.remove();for(const e of document.head.querySelectorAll(`link[data-esp-font-picker-root="${CSS.escape(this.correlationId)}"]`))e.remove()}get activeTheme(){return this.scheme==="dark"?this.resolvedDarkTheme:this.resolvedLightTheme}resolveThemes(){const e=this.lightThemeAttr?g(this.lightThemeAttr):null;this.resolvedLightTheme=e?v(f,e):{...f};const t=this.darkThemeAttr?g(this.darkThemeAttr):null;this.resolvedDarkTheme=t?v(y,t):{...y}}connectedCallback(){super.connectedCallback(),this.registerDocumentClickBridge(),this.resizeObserver.observe(this),this.hasUpdated&&(this.applyDefaultScheme(),this.syncGoogleFontLinks(),this.hasAuthorTheme||this.startThemeSettleTimer())}willUpdate(e){const t=["lightThemeAttr","darkThemeAttr"];(!this.lastSeedColor||t.some(n=>e.has(n)))&&(this.resolveThemes(),this.themeEventsReady&&p().publish("theme-changed",{correlationId:this.correlationId})),this.hasAuthorTheme&&this.settleTheme();const l=D(this.activeTheme,this.scheme==="dark"?"dark":"light"),s=new Set(Object.keys(l).filter(n=>n.startsWith("--esp-color-ramp-")));for(const n of this.appliedDataRampProperties)s.has(n)||this.style.removeProperty(n);for(const[n,u]of Object.entries(l))this.style.setProperty(n,u);this.appliedDataRampProperties=s;const r=this.activeTheme.seedColor;this.themeEventsReady&&this.lastSeedColor&&this.lastSeedColor!==r&&p().publish("seed-color-changed",{seedColor:r,correlationId:this.correlationId}),this.lastSeedColor=r,this.themeEventsReady&&e.has("iconSpriteUrl")&&p().publish("icon-sprite-url-changed",{iconSpriteUrl:this.iconSpriteUrl,correlationId:this.correlationId}),this.syncGoogleFontLinks()}firstUpdated(){const e=this.activeTheme.stylesheets;if(e.length)for(const t of e){const i=document.createElement("link");i.rel="stylesheet",i.href=t,document.head.appendChild(i)}if(!document.getElementById("esp-root-base-styles")){const t=document.createElement("style");t.id="esp-root-base-styles",t.textContent=a.lightDomStyles,document.head.appendChild(t)}this.applyDefaultScheme(),this.lastSeedColor=this.activeTheme.seedColor,this.themeEventsReady=!0,this.startThemeSettleTimer()}startThemeSettleTimer(){if(this.themeReadyState||this.themeSettleTimer!==void 0)return;this.themeSettleDeadline??=performance.now()+T;const e=Math.max(0,this.themeSettleDeadline-performance.now());if(e===0){this.closeThemeWindow();return}this.themeSettleTimer=setTimeout(()=>this.closeThemeWindow(),e)}closeThemeWindow(){this.themeSettleTimer=void 0,this.themePending&&!this.warnedThemeSettleTimeout&&(this.warnedThemeSettleTimeout=!0,console.warn(`Espalier root: theme-pending was declared but no ${this.scheme} theme arrived within ${T}ms, so the default palette is rendering. Assign ${this.scheme==="dark"?"darkTheme":"lightTheme"} (or remove theme-pending).`)),this.settleTheme()}updated(e){this.toggleAttribute("data-theme-ready",this.themeReadyState),(e.has("defaultScheme")||e.has("scheme"))&&!this.schemeExplicitlySet&&this.applyDefaultScheme()}disconnectedCallback(){this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.unregisterDocumentClickBridge(),this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null,this.resizeObserver.disconnect(),this.removeRuntimeGoogleFontLinks(),super.disconnectedCallback()}registerDocumentClickBridge(){this.documentClickRegistrationActive||(this.documentClickRegistrationActive=!0,a.connectedRootCount+=1,a.connectedRootCount===1&&document.addEventListener("click",a.handleDocumentClick))}unregisterDocumentClickBridge(){this.documentClickRegistrationActive&&(this.documentClickRegistrationActive=!1,a.connectedRootCount=Math.max(0,a.connectedRootCount-1),a.connectedRootCount===0&&document.removeEventListener("click",a.handleDocumentClick))}applyDefaultScheme(){this.schemeExplicitlySet||(this.resolvingDefaultScheme=!0,this.scheme=this.resolveDefaultScheme(),this.resolvingDefaultScheme=!1,this.syncSystemSchemeListener())}resolveDefaultScheme(){return this.defaultScheme==="dark"||this.defaultScheme==="system"&&window.matchMedia?.("(prefers-color-scheme: dark)").matches?"dark":"light"}syncSystemSchemeListener(){if(this.schemeExplicitlySet||this.defaultScheme!=="system"||!window.matchMedia){this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null;return}this.systemSchemeQuery||(this.systemSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.systemSchemeQuery.addEventListener("change",this.handleSystemSchemeChange))}render(){return w`<slot></slot>`}};o.connectedRootCount=0,o.handleDocumentClick=c=>{const e=c.composedPath().filter(t=>t instanceof HTMLElement&&t.tagName==="ESP-POPOVER");p().publish("close-popovers",{source:c.target??void 0,skipPopovers:e})},o.lightDomStyles=`
+var r=function(c,e,t,s){var n=arguments.length,i=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,m;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(c,e,t,s);else for(var h=c.length-1;h>=0;h--)(m=c[h])&&(i=(n<3?m(i):n>3?m(e,t,i):m(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},l;import{css as b,html as w,LitElement as E}from"lit";import{customElement as R,property as a,state as C}from"lit/decorators.js";import{getEspBus as d}from"../shared/bus-events.js";import{subscribeToRootEvent as x}from"../shared/root-event-subscription.js";import{DEFAULT_LIGHT_THEME as f,DEFAULT_DARK_THEME as g,encodeTheme as y,parseTheme as p,mergeTheme as v}from"../shared/theme.js";import{extractFamily as u,isLocalFontFamily as D,removeRuntimeGoogleFontLinks as S,syncRuntimeGoogleFontLink as L}from"../shared/font-helpers.js";import{computeThemeProperties as A}from"./helpers/compute-theme-properties.js";import{registerImageTexture as I,registeredImageTextures as F}from"../shared/image-texture-registry.js";import{registerImageTexture as $,registeredImageTextures as Q,BUILT_IN_IMAGE_TEXTURES as q}from"../shared/image-texture-registry.js";const T=1e3;let o=l=class extends E{constructor(){super(...arguments),this.schemeBacker="",this.schemeExplicitlySet=!1,this.resolvingDefaultScheme=!1,this.themeEventsReady=!1,this.systemSchemeQuery=null,this.lastSeedColor="",this.resolvedLightTheme={...f},this.resolvedDarkTheme={...g},this.appliedDataRampProperties=new Set,this.documentClickRegistrationActive=!1,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.lightThemeAttr="",this.darkThemeAttr="",this.fontCSSRoot="/css/fonts/",this.fontDefinitionsUrl="",this.googleFontLoading="auto",this.iconSpriteUrl="/assets/icons.svg",this.themePending=!1,this.themeReadyState=!1,this.themeSettleWaiters=[],this.warnedThemeSettleTimeout=!1,this.defaultScheme="light",this.resizeObserver=new ResizeObserver(()=>{d().publish("window-resized",{emWidth:window.innerWidth/parseFloat(getComputedStyle(document.documentElement).fontSize),emHeight:window.innerHeight/parseFloat(getComputedStyle(document.documentElement).fontSize),pxWidth:window.innerWidth,pxHeight:window.innerHeight})}),this.handleSystemSchemeChange=e=>{this.schemeExplicitlySet||this.defaultScheme!=="system"||(this.resolvingDefaultScheme=!0,this.scheme=e.matches?"dark":"light",this.resolvingDefaultScheme=!1)}}static registerTexture(e,t){I(e,t)}static registeredTextures(){return F()}subscribeScoped(e,t){return x(this,e,t)}get lightTheme(){return this.lightThemeAttr?p(this.lightThemeAttr):null}set lightTheme(e){this.lightThemeAttr=e?y(e):""}get darkTheme(){return this.darkThemeAttr?p(this.darkThemeAttr):null}set darkTheme(e){this.darkThemeAttr=e?y(e):""}get themeSettled(){return this.themeReadyState}whenThemeSettled(){return this.themeReadyState?Promise.resolve():new Promise(e=>{this.themeSettleWaiters.push(e)})}get hasAuthorTheme(){return!!(this.scheme==="dark"?this.darkThemeAttr:this.lightThemeAttr)}settleTheme(){if(this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.themeReadyState)return;this.themeReadyState=!0;const e=this.themeSettleWaiters;this.themeSettleWaiters=[];for(const t of e)t()}get scheme(){return this.schemeBacker}set scheme(e){const t=e==="dark"?"dark":e==="light"?"light":"",s=this.schemeBacker,n=this.schemeExplicitlySet;this.resolvingDefaultScheme||(this.schemeExplicitlySet=t.length>0);const i=t||this.resolveDefaultScheme();n!==this.schemeExplicitlySet&&this.isConnected&&this.syncSystemSchemeListener(),i!==s&&(this.schemeBacker=i,this.requestUpdate("scheme",s),this.themeEventsReady&&d().publish("scheme-changed",{scheme:i,correlationId:this.correlationId}))}get seedColor(){return this.activeTheme.seedColor}injectGoogleFontLink(e,t,s){const n=`${this.correlationId}-${e}`,i=D(t)?"":t;L({owner:`root:${n}`,family:i,weight:s,enabled:this.googleFontLoading!=="none",attributes:{"data-esp-font":n}})}syncGoogleFontLinks(){this.googleFontLoading==="none"&&this.removeRuntimeGoogleFontLinks();const e=this.activeTheme;this.injectGoogleFontLink("body",u(e.fontBody),e.fontWeightBody),this.injectGoogleFontLink("headings",u(e.fontHeadings),e.fontWeightHeadings),this.injectGoogleFontLink("brand",u(e.fontBrand),e.fontWeightBrand),this.injectGoogleFontLink("monospace",u(e.fontMonospace),e.fontWeightMonospace)}removeRuntimeGoogleFontLinks(){S(`root:${this.correlationId}-`),S(`picker:${this.correlationId}:`);for(const e of document.head.querySelectorAll(`link[data-esp-font^="${this.correlationId}-"]`))e.remove();for(const e of document.head.querySelectorAll(`link[data-esp-font-picker-root="${CSS.escape(this.correlationId)}"]`))e.remove()}get activeTheme(){return this.scheme==="dark"?this.resolvedDarkTheme:this.resolvedLightTheme}resolveThemes(){const e=this.lightThemeAttr?p(this.lightThemeAttr):null;this.resolvedLightTheme=e?v(f,e):{...f};const t=this.darkThemeAttr?p(this.darkThemeAttr):null;this.resolvedDarkTheme=t?v(g,t):{...g}}connectedCallback(){super.connectedCallback(),this.registerDocumentClickBridge(),this.resizeObserver.observe(this),this.hasUpdated&&(this.applyDefaultScheme(),this.syncGoogleFontLinks(),this.hasAuthorTheme||this.startThemeSettleTimer())}willUpdate(e){const t=["lightThemeAttr","darkThemeAttr"];(!this.lastSeedColor||t.some(h=>e.has(h)))&&(this.resolveThemes(),this.themeEventsReady&&d().publish("theme-changed",{correlationId:this.correlationId})),this.hasAuthorTheme&&this.settleTheme();const n=A(this.activeTheme,this.scheme==="dark"?"dark":"light"),i=new Set(Object.keys(n).filter(h=>h.startsWith("--esp-color-ramp-")));for(const h of this.appliedDataRampProperties)i.has(h)||this.style.removeProperty(h);for(const[h,k]of Object.entries(n))this.style.setProperty(h,k);this.appliedDataRampProperties=i;const m=this.activeTheme.seedColor;this.themeEventsReady&&this.lastSeedColor&&this.lastSeedColor!==m&&d().publish("seed-color-changed",{seedColor:m,correlationId:this.correlationId}),this.lastSeedColor=m,this.themeEventsReady&&e.has("iconSpriteUrl")&&d().publish("icon-sprite-url-changed",{iconSpriteUrl:this.iconSpriteUrl,correlationId:this.correlationId}),this.syncGoogleFontLinks()}firstUpdated(){const e=this.activeTheme.stylesheets;if(e.length)for(const t of e){const s=document.createElement("link");s.rel="stylesheet",s.href=t,document.head.appendChild(s)}if(!document.getElementById("esp-root-base-styles")){const t=document.createElement("style");t.id="esp-root-base-styles",t.textContent=l.lightDomStyles,document.head.appendChild(t)}this.applyDefaultScheme(),this.lastSeedColor=this.activeTheme.seedColor,this.themeEventsReady=!0,this.startThemeSettleTimer()}startThemeSettleTimer(){if(this.themeReadyState||this.themeSettleTimer!==void 0)return;this.themeSettleDeadline??=performance.now()+T;const e=Math.max(0,this.themeSettleDeadline-performance.now());if(e===0){this.closeThemeWindow();return}this.themeSettleTimer=setTimeout(()=>this.closeThemeWindow(),e)}closeThemeWindow(){this.themeSettleTimer=void 0,this.themePending&&!this.warnedThemeSettleTimeout&&(this.warnedThemeSettleTimeout=!0,console.warn(`Espalier root: theme-pending was declared but no ${this.scheme} theme arrived within ${T}ms, so the default palette is rendering. Assign ${this.scheme==="dark"?"darkTheme":"lightTheme"} (or remove theme-pending).`)),this.settleTheme()}updated(e){this.toggleAttribute("data-theme-ready",this.themeReadyState),(e.has("defaultScheme")||e.has("scheme"))&&!this.schemeExplicitlySet&&this.applyDefaultScheme()}disconnectedCallback(){this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.unregisterDocumentClickBridge(),this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null,this.resizeObserver.disconnect(),this.removeRuntimeGoogleFontLinks(),super.disconnectedCallback()}registerDocumentClickBridge(){this.documentClickRegistrationActive||(this.documentClickRegistrationActive=!0,l.connectedRootCount+=1,l.connectedRootCount===1&&document.addEventListener("click",l.handleDocumentClick))}unregisterDocumentClickBridge(){this.documentClickRegistrationActive&&(this.documentClickRegistrationActive=!1,l.connectedRootCount=Math.max(0,l.connectedRootCount-1),l.connectedRootCount===0&&document.removeEventListener("click",l.handleDocumentClick))}applyDefaultScheme(){this.schemeExplicitlySet||(this.resolvingDefaultScheme=!0,this.scheme=this.resolveDefaultScheme(),this.resolvingDefaultScheme=!1,this.syncSystemSchemeListener())}resolveDefaultScheme(){return this.defaultScheme==="dark"||this.defaultScheme==="system"&&window.matchMedia?.("(prefers-color-scheme: dark)").matches?"dark":"light"}syncSystemSchemeListener(){if(this.schemeExplicitlySet||this.defaultScheme!=="system"||!window.matchMedia){this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null;return}this.systemSchemeQuery||(this.systemSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.systemSchemeQuery.addEventListener("change",this.handleSystemSchemeChange))}render(){return w`<slot></slot>`}};o.connectedRootCount=0,o.handleDocumentClick=c=>{const e=c.composedPath().filter(t=>t instanceof HTMLElement&&t.tagName==="ESP-POPOVER");d().publish("close-popovers",{source:c.target??void 0,skipPopovers:e})},o.lightDomStyles=`
     
     esp-root {
-      font-family: var(--esp-font-body);
+      font-family: var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif));
       font-weight: var(--esp-font-weight-body);
       line-height: 1.5;
       font-size: var(--esp-type-normal);
@@ -23,7 +23,7 @@ var h=function(c,e,t,i){var l=arguments.length,s=l<3?e:i===null?i=Object.getOwnP
     esp-root input,
     esp-root select,
     esp-root button {
-      font-family: var(--esp-font-body);
+      font-family: var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif));
     }
 
     
@@ -53,7 +53,7 @@ var h=function(c,e,t,i){var l=arguments.length,s=l<3?e:i===null?i=Object.getOwnP
     esp-root p,
     esp-root ul,
     esp-root li {
-      font-family: var(--esp-font-body);
+      font-family: var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif));
       color: var(--esp-color-text);
       font-size: inherit;
     }
@@ -68,7 +68,13 @@ var h=function(c,e,t,i){var l=arguments.length,s=l<3?e:i===null?i=Object.getOwnP
     esp-root h3,
     esp-root h4,
     esp-root h5 {
-      font-family: var(--esp-font-headings);
+      font-family: var(
+        --_esp-font-headings-effective,
+        var(
+          --esp-font-headings,
+          var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif))
+        )
+      );
       font-weight: var(--esp-font-weight-headings);
       color: var(--esp-color-headings);
       margin: var(--esp-size-small-to-normal) 0 var(--esp-size-tiny-to-small);
@@ -83,7 +89,7 @@ var h=function(c,e,t,i){var l=arguments.length,s=l<3?e:i===null?i=Object.getOwnP
     
     esp-root pre,
     esp-root code {
-      font-family: var(--esp-font-monospace);
+      font-family: var(--_esp-font-monospace-effective, var(--esp-font-monospace, monospace));
       font-weight: var(--esp-font-weight-monospace);
     }
 
@@ -130,4 +136,4 @@ var h=function(c,e,t,i){var l=arguments.length,s=l<3?e:i===null?i=Object.getOwnP
     :host([theme-pending]:not([data-theme-ready])) {
       visibility: hidden;
     }
-  `,h([m({attribute:!1})],o.prototype,"correlationId",void 0),h([m({attribute:"light-theme"})],o.prototype,"lightThemeAttr",void 0),h([m({attribute:"dark-theme"})],o.prototype,"darkThemeAttr",void 0),h([m({attribute:!1})],o.prototype,"lightTheme",null),h([m({attribute:!1})],o.prototype,"darkTheme",null),h([m({attribute:"font-css-root",type:String})],o.prototype,"fontCSSRoot",void 0),h([m({attribute:"font-definitions-url",type:String})],o.prototype,"fontDefinitionsUrl",void 0),h([m({attribute:"google-font-loading",type:String})],o.prototype,"googleFontLoading",void 0),h([m({attribute:"icon-sprite-url",type:String})],o.prototype,"iconSpriteUrl",void 0),h([m({attribute:"theme-pending",reflect:!0,type:Boolean})],o.prototype,"themePending",void 0),h([R()],o.prototype,"themeReadyState",void 0),h([m({attribute:"default-scheme",type:String,reflect:!0})],o.prototype,"defaultScheme",void 0),h([m({attribute:"scheme",type:String,reflect:!0})],o.prototype,"scheme",null),o=a=h([C("esp-root")],o);export{H as BUILT_IN_IMAGE_TEXTURES,o as EspalierRoot,O as registerImageTexture,j as registeredImageTextures};
+  `,r([a({attribute:!1})],o.prototype,"correlationId",void 0),r([a({attribute:"light-theme"})],o.prototype,"lightThemeAttr",void 0),r([a({attribute:"dark-theme"})],o.prototype,"darkThemeAttr",void 0),r([a({attribute:!1})],o.prototype,"lightTheme",null),r([a({attribute:!1})],o.prototype,"darkTheme",null),r([a({attribute:"font-css-root",type:String})],o.prototype,"fontCSSRoot",void 0),r([a({attribute:"font-definitions-url",type:String})],o.prototype,"fontDefinitionsUrl",void 0),r([a({attribute:"google-font-loading",type:String})],o.prototype,"googleFontLoading",void 0),r([a({attribute:"icon-sprite-url",type:String})],o.prototype,"iconSpriteUrl",void 0),r([a({attribute:"theme-pending",reflect:!0,type:Boolean})],o.prototype,"themePending",void 0),r([C()],o.prototype,"themeReadyState",void 0),r([a({attribute:"default-scheme",type:String,reflect:!0})],o.prototype,"defaultScheme",void 0),r([a({attribute:"scheme",type:String,reflect:!0})],o.prototype,"scheme",null),o=l=r([R("esp-root")],o);export{q as BUILT_IN_IMAGE_TEXTURES,o as EspalierRoot,$ as registerImageTexture,Q as registeredImageTextures};

package/dist/root/helpers/compute-theme-properties.js

@@ -1 +1 @@
-import{parseCssColor as f,serializeOklch as u,gamutMapToSRGB as m}from"../../shared/color-engine.js";import{generateScaleProperties as y}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as b,DEFAULT_DATA_PALETTE as k,generateDivergingRamp as v,generateSequentialRamp as B}from"../../shared/data-colors.js";import{resolveDataColorSource as R}from"../../shared/theme.js";import{dataCompanionProperties as O}from"./data-companion-properties.js";import{lightnessRampProperties as w}from"./lightness-ramp-properties.js";import{computeVariants as $}from"./compute-variants.js";import{computeSemanticProperties as E}from"./compute-semantic-properties.js";function I(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function x(o,d,g){const i={},a=o.dataPalette??k;for(let r=0;r<b.length;r+=1){const c=b[r],t=f(g(a[c],`dataPalette.${c}`))??d;i[`--esp-color-series-${r+1}`]=u(m(t))}return i}function _(o,d,g){const i=f(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=d,a["--esp-seed-color"]=o.seedColor;const r=$(i,o);for(const[e,n]of Object.entries(r))a[`--esp-color-${e}`]=u(m(n));const c=new Set,t=(e,n)=>{const s=typeof e=="string"?R(e,o.anchors):null;if(s)return s;const p=typeof e=="string"?e:String(e);return c.has(p)||(c.add(p),console.warn(`Espalier theme: ${n} color source "${p}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor};Object.assign(a,x(o,i,t));for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?B(t(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):v(t(n.start,`dataRamps.${e}.start`),t(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:t(n.neutral,`dataRamps.${e}.neutral`)})).forEach((p,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=p})}catch(s){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}Object.assign(a,w(o));const l=new Set;return Object.assign(a,E(o,r,{trace:g,onUnresolvedSource:e=>{l.has(e)||(l.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,O(a)),Object.assign(a,y(I(o))),o.fontBody&&(a["--esp-font-body"]=o.fontBody),o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),o.fontMonospace&&(a["--esp-font-monospace"]=o.fontMonospace),a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{_ as computeThemeProperties,x as dataSeriesProperties};
+import{parseCssColor as f,serializeOklch as u,gamutMapToSRGB as m}from"../../shared/color-engine.js";import{generateScaleProperties as y}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as b,DEFAULT_DATA_PALETTE as k,generateDivergingRamp as v,generateSequentialRamp as O}from"../../shared/data-colors.js";import{DEFAULT_BODY_FONT_FAMILY as B,DEFAULT_MONOSPACE_FONT_FAMILY as R,resolveDataColorSource as E}from"../../shared/theme.js";import{dataCompanionProperties as w}from"./data-companion-properties.js";import{lightnessRampProperties as I}from"./lightness-ramp-properties.js";import{computeVariants as $}from"./compute-variants.js";import{computeSemanticProperties as T}from"./compute-semantic-properties.js";function x(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function A(o,d,g){const i={},a=o.dataPalette??k;for(let r=0;r<b.length;r+=1){const c=b[r],t=f(g(a[c],`dataPalette.${c}`))??d;i[`--esp-color-series-${r+1}`]=u(m(t))}return i}function U(o,d,g){const i=f(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=d,a["--esp-seed-color"]=o.seedColor;const r=$(i,o);for(const[e,n]of Object.entries(r))a[`--esp-color-${e}`]=u(m(n));const c=new Set,t=(e,n)=>{const s=typeof e=="string"?E(e,o.anchors):null;if(s)return s;const p=typeof e=="string"?e:String(e);return c.has(p)||(c.add(p),console.warn(`Espalier theme: ${n} color source "${p}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor};Object.assign(a,A(o,i,t));for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?O(t(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):v(t(n.start,`dataRamps.${e}.start`),t(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:t(n.neutral,`dataRamps.${e}.neutral`)})).forEach((p,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=p})}catch(s){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}Object.assign(a,I(o));const l=new Set;return Object.assign(a,T(o,r,{trace:g,onUnresolvedSource:e=>{l.has(e)||(l.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,w(a)),Object.assign(a,y(x(o))),a["--esp-font-body"]=o.fontBody||B,o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),a["--esp-font-monospace"]=o.fontMonospace||R,a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{U as computeThemeProperties,A as dataSeriesProperties};

package/dist/search/esp-search.js

@@ -1,7 +1,7 @@
-var o=function(a,e,t,c){var h=arguments.length,r=h<3?e:c===null?c=Object.getOwnPropertyDescriptor(e,t):c,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(a,e,t,c);else for(var d=a.length-1;d>=0;d--)(p=a[d])&&(r=(h<3?p(r):h>3?p(e,t,r):p(e,t))||r);return h>3&&r&&Object.defineProperty(e,t,r),r};import{css as y,html as l,nothing as i}from"lit";import{customElement as k,property as w,state as n}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{createRef as u,ref as v}from"lit/directives/ref.js";import{unsafeHTML as E}from"lit/directives/unsafe-html.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{OverlayController as I}from"../shared/overlay-controller.js";import{ESP_EVENTS as m}from"../shared/events.js";import{srOnly as R}from"../shared/style-fragments.js";const g="%%ESP_MARK_OPEN%%",x="%%ESP_MARK_CLOSE%%";function $(a){return a.replace(/<mark>/gi,g).replace(/<\/mark>/gi,x).replace(/<[^>]*>/g,"").replaceAll(g,"<mark>").replaceAll(x,"</mark>")}let s=class extends b{constructor(){super(...arguments),this.placeholder="Search\u2026",this.isOpen=!1,this.results=[],this.loading=!1,this.query="",this.activeIndex=-1,this.vellumRef=u(),this.inputRef=u(),this.resultsRef=u(),this.idPrefix=`esp-search-${this.correlationId}`,this._overlay=new I({host:this,getFocusTrapContainer:()=>this.vellumRef.value??null,getFocusFallback:()=>this.inputRef.value??null})}show(){this.isOpen||(this.isOpen=!0,this._overlay.open(),this.updateComplete.then(()=>{this.inputRef.value?.focus()}))}hide(){this.isOpen&&(this.isOpen=!1,this.query="",this.results=[],this.activeIndex=-1,this.loading=!1,this._overlay.close(),this.dispatchEvent(new CustomEvent(m.SEARCH_CLOSED,{detail:{},bubbles:!0,composed:!0})))}setResults(e){this.results=e,this.activeIndex=e.length>0?0:-1}setLoading(e){this.loading=e}handleInput(e){const t=e.target.value;this.query=t,this.activeIndex=-1,this.dispatchEvent(new CustomEvent(m.SEARCH_REQUESTED,{detail:{query:t},bubbles:!0,composed:!0})),t.trim()||(this.results=[])}selectResult(e){this.dispatchEvent(new CustomEvent(m.SEARCH_RESULT_SELECTED,{detail:{url:e.url},bubbles:!0,composed:!0})),this.hide()}handleKeyDown(e){if(this.isOpen)switch(e.key){case"Escape":e.preventDefault(),this.hide();break;case"ArrowDown":e.preventDefault(),this.results.length>0&&(this.activeIndex=Math.min(this.activeIndex+1,this.results.length-1),this.scrollActiveIntoView());break;case"ArrowUp":e.preventDefault(),this.results.length>0&&(this.activeIndex=Math.max(this.activeIndex-1,0),this.scrollActiveIntoView());break;case"Enter":e.preventDefault(),this.activeIndex>=0&&this.activeIndex<this.results.length&&this.selectResult(this.results[this.activeIndex]);break;case"Tab":this._overlay.trapFocus(e);break}}handleBackdropClick(e){e.target===this.vellumRef.value&&this.hide()}scrollActiveIntoView(){this.updateComplete.then(()=>{const e=this.resultsRef.value?.querySelectorAll(".result");e&&this.activeIndex>=0&&e[this.activeIndex]&&e[this.activeIndex].scrollIntoView({block:"nearest"})})}get hasListbox(){return this.results.length>0}get listboxId(){return`${this.idPrefix}-listbox`}optionId(e){return`${this.idPrefix}-option-${e}`}render(){return l`
+var o=function(a,e,t,c){var h=arguments.length,r=h<3?e:c===null?c=Object.getOwnPropertyDescriptor(e,t):c,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(a,e,t,c);else for(var d=a.length-1;d>=0;d--)(p=a[d])&&(r=(h<3?p(r):h>3?p(e,t,r):p(e,t))||r);return h>3&&r&&Object.defineProperty(e,t,r),r};import{css as y,html as l,nothing as i}from"lit";import{customElement as k,property as w,state as n}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{createRef as u,ref as v}from"lit/directives/ref.js";import{unsafeHTML as E}from"lit/directives/unsafe-html.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{OverlayController as I}from"../shared/overlay-controller.js";import{ESP_EVENTS as f}from"../shared/events.js";import{srOnly as R}from"../shared/style-fragments.js";const g="%%ESP_MARK_OPEN%%",x="%%ESP_MARK_CLOSE%%";function $(a){return a.replace(/<mark>/gi,g).replace(/<\/mark>/gi,x).replace(/<[^>]*>/g,"").replaceAll(g,"<mark>").replaceAll(x,"</mark>")}let s=class extends b{constructor(){super(...arguments),this.placeholder="Search\u2026",this.isOpen=!1,this.results=[],this.loading=!1,this.query="",this.activeIndex=-1,this.vellumRef=u(),this.inputRef=u(),this.resultsRef=u(),this.idPrefix=`esp-search-${this.correlationId}`,this._overlay=new I({host:this,getFocusTrapContainer:()=>this.vellumRef.value??null,getFocusFallback:()=>this.inputRef.value??null})}show(){this.isOpen||(this.isOpen=!0,this._overlay.open(),this.updateComplete.then(()=>{this.inputRef.value?.focus()}))}hide(){this.isOpen&&(this.isOpen=!1,this.query="",this.results=[],this.activeIndex=-1,this.loading=!1,this._overlay.close(),this.dispatchEvent(new CustomEvent(f.SEARCH_CLOSED,{detail:{},bubbles:!0,composed:!0})))}setResults(e){this.results=e,this.activeIndex=e.length>0?0:-1}setLoading(e){this.loading=e}handleInput(e){const t=e.target.value;this.query=t,this.activeIndex=-1,this.dispatchEvent(new CustomEvent(f.SEARCH_REQUESTED,{detail:{query:t},bubbles:!0,composed:!0})),t.trim()||(this.results=[])}selectResult(e){this.dispatchEvent(new CustomEvent(f.SEARCH_RESULT_SELECTED,{detail:{url:e.url},bubbles:!0,composed:!0})),this.hide()}handleKeyDown(e){if(this.isOpen)switch(e.key){case"Escape":e.preventDefault(),this.hide();break;case"ArrowDown":e.preventDefault(),this.results.length>0&&(this.activeIndex=Math.min(this.activeIndex+1,this.results.length-1),this.scrollActiveIntoView());break;case"ArrowUp":e.preventDefault(),this.results.length>0&&(this.activeIndex=Math.max(this.activeIndex-1,0),this.scrollActiveIntoView());break;case"Enter":e.preventDefault(),this.activeIndex>=0&&this.activeIndex<this.results.length&&this.selectResult(this.results[this.activeIndex]);break;case"Tab":this._overlay.trapFocus(e);break}}handleBackdropClick(e){e.target===this.vellumRef.value&&this.hide()}scrollActiveIntoView(){this.updateComplete.then(()=>{const e=this.resultsRef.value?.querySelectorAll(".result");e&&this.activeIndex>=0&&e[this.activeIndex]&&e[this.activeIndex].scrollIntoView({block:"nearest"})})}get hasListbox(){return this.results.length>0}get listboxId(){return`${this.idPrefix}-listbox`}optionId(e){return`${this.idPrefix}-option-${e}`}render(){return l`
       <div
         ${v(this.vellumRef)}
-        class=${f({vellum:!0,"is-open":this.isOpen})}
+        class=${m({vellum:!0,"is-open":this.isOpen})}
         role=${this.isOpen?"dialog":i}
         aria-modal=${this.isOpen?"true":i}
         aria-label="Search"
@@ -42,7 +42,7 @@ var o=function(a,e,t,c){var h=arguments.length,r=h<3?e:c===null?c=Object.getOwnP
         ${this.results.map((e,t)=>l`
             <li
               id=${this.optionId(t)}
-              class=${f({result:!0,active:t===this.activeIndex})}
+              class=${m({result:!0,active:t===this.activeIndex})}
               role="option"
               aria-selected=${t===this.activeIndex}
               @click=${()=>this.selectResult(e)}
@@ -182,7 +182,13 @@ var o=function(a,e,t,c){var h=arguments.length,r=h<3?e:c===null?c=Object.getOwnP
       .result-title {
         display: block;
         font-weight: 600;
-        font-family: var(--esp-font-headings, inherit);
+        font-family: var(
+          --_esp-font-headings-effective,
+          var(
+            --esp-font-headings,
+            var(--_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)))
+          )
+        );
         color: var(--esp-search-title-color, var(--esp-color-headings));
       }
 

package/dist/shared/data-colors.d.ts

@@ -44,6 +44,20 @@ export interface DataPaletteIssue {
     /** The threshold the pair was checked against. */
     threshold: number;
 }
+/**
+ * Describe one categorical-palette collision in the shared validation
+ * vocabulary. Runtime validation and fit-table lints both use this formatter;
+ * the co-located matcher below deliberately ignores numeric measurements while
+ * preserving the pair and simulation identity.
+ */
+export declare function describePaletteCollision(issue: DataPaletteIssue): string;
+/**
+ * Match a formatted collision by its stable pair and simulation, deliberately
+ * ignoring the displayed measurement. Validation audits authored colors while
+ * fit tables audit emitted gamut-mapped colors, so their rounded distances can
+ * differ without representing two findings.
+ */
+export declare function isPaletteCollisionDescription(description: string, issue: Pick<DataPaletteIssue, "series" | "simulation">): boolean;
 /**
  * Audit every categorical pair after full CVD simulation.
  *

package/dist/shared/data-colors.js

@@ -1 +1 @@
-import{clampChannel as x,gamutMapToSRGB as m,linearRgbToOklab as S,oklabToOklch as k,oklchToOklab as b,oklchToSRGB as P,parseCssColor as F,serializeOklch as E,srgbToLinearRGB as q}from"./color-engine.js";const p=["series1","series2","series3","series4","series5","series6","series7","series8"],G={series1:"#000000",series2:"#E69F00",series3:"#56B4E9",series4:"#009E73",series5:"#F0E442",series6:"#0072B2",series7:"#D55E00",series8:"#CC79A7"},A=["deuteranopia","protanopia","tritanopia"],T=.07,_={protanopia:[[.152286,1.052583,-.204868],[.114503,.786281,.099216],[-.003882,-.048116,1.051998]],deuteranopia:[[.367322,.860646,-.227968],[.280085,.672501,.047413],[-.01182,.04294,.968881]],tritanopia:[[1.255528,-.076749,-.178779],[-.078411,.930809,.147602],[.004733,.691367,.3039]]};function d(e,t){const s=P(m(e)),a=q(s),n=o=>x(o[0]*a.r+o[1]*a.g+o[2]*a.b);return{r:n(t[0]),g:n(t[1]),b:n(t[2])}}function R(e,t){return Math.hypot(e.L-t.L,e.a-t.a,e.b-t.b)}function g(e,t){const s=F(e);if(!s)throw new TypeError(`${t} is not a valid opaque CSS color: "${e}".`);return s}function U(e,t=T){if(!Number.isFinite(t)||t<0)throw new RangeError("Data-palette distance threshold must be a finite number \u2265 0.");const s=new Map;for(const n of p)s.set(n,g(e[n],`dataPalette.${n}`));const a=[];for(const n of A){const o=new Map;for(const r of p)o.set(r,S(d(s.get(r),_[n])));for(let r=0;r<p.length;r+=1)for(let i=r+1;i<p.length;i+=1){const l=p[r],c=p[i],u=R(o.get(l),o.get(c));u<t&&a.push({series:[l,c],simulation:n,distance:u,threshold:t})}}return a}const v=[[1,0,0],[0,1,0],[0,0,1]];function B(e,t=T,s=["normal",...A]){if(!Number.isFinite(t)||t<0)throw new RangeError("Color distance threshold must be a finite number \u2265 0.");const a=e.map(([r,i])=>[r,g(i,r)]),n=[],o=s.map(r=>[r,r==="normal"?v:_[r]]);for(const[r,i]of o){const l=a.map(([,c])=>S(d(c,i)));for(let c=0;c<e.length;c+=1)for(let u=c+1;u<e.length;u+=1){const f=R(l[c],l[u]);f<t&&n.push({pair:[e[c][0],e[u][0]],simulation:r,distance:f,threshold:t})}}return n}const D=3,I=11,L=7,C=1e-6,$="oklch(0.96 0 0)";function M(e,t){if(!Number.isInteger(e)||e<D||e>I)throw new RangeError(`Data-ramp steps must be an integer from ${D} through ${I}.`);if(t&&e%2===0)throw new RangeError("Diverging data-ramp steps must be odd so the neutral is the midpoint.")}function w(e,t){if(!Number.isFinite(e)||e<0||e>1)throw new RangeError(`${t} must be a finite number from 0 through 1.`)}function V(e,t={}){const s=g(e,"Sequential ramp source"),a=t.steps??L,n=t.lightnessStart??.95,o=t.lightnessEnd??.25;if(M(a,!1),w(n,"Sequential ramp lightnessStart"),w(o,"Sequential ramp lightnessEnd"),n<=o)throw new RangeError("Sequential ramp lightnessStart must be greater than lightnessEnd.");if((n-o)/(a-1)<=C)throw new RangeError(`Sequential ramp lightness bounds must leave more than ${C} lightness between serialized stops.`);return Array.from({length:a},(r,i)=>{const l=i/(a-1),c=n+(o-n)*l;return E(m({l:c,c:s.c,h:s.h}))})}function N(e,t,s){return{L:e.L+(t.L-e.L)*s,a:e.a+(t.a-e.a)*s,b:e.b+(t.b-e.b)*s}}function z(e,t,s={}){const a=g(e,"Diverging ramp start"),n=g(t,"Diverging ramp end"),o=g(s.neutral??$,"Diverging ramp neutral"),r=s.steps??L;M(r,!0);const i=(r-1)/2,l=b(a),c=b(o),u=b(n);return Array.from({length:r},(f,h)=>{if(h===i)return E(m(o));const O=h<i?N(l,c,h/i):N(c,u,(h-i)/i);return E(m(k(O)))})}export{A as COLOR_VISION_SIMULATIONS,p as DATA_SERIES_KEYS,G as DEFAULT_DATA_PALETTE,L as DEFAULT_DATA_RAMP_STEPS,$ as DEFAULT_DIVERGING_NEUTRAL,I as MAX_DATA_RAMP_STEPS,T as MIN_DATA_COLOR_DISTANCE,C as MIN_DATA_RAMP_LIGHTNESS_STEP,D as MIN_DATA_RAMP_STEPS,B as auditColorDistances,U as auditDataPalette,z as generateDivergingRamp,V as generateSequentialRamp};
+import{clampChannel as N,gamutMapToSRGB as m,linearRgbToOklab as E,oklabToOklch as $,oklchToOklab as f,oklchToSRGB as O,parseCssColor as k,serializeOklch as b,srgbToLinearRGB as F}from"./color-engine.js";const p=["series1","series2","series3","series4","series5","series6","series7","series8"],G={series1:"#000000",series2:"#E69F00",series3:"#56B4E9",series4:"#009E73",series5:"#F0E442",series6:"#0072B2",series7:"#D55E00",series8:"#CC79A7"},S=["deuteranopia","protanopia","tritanopia"],A=.07;function U(t){return`dataPalette.${t.series[0]} and dataPalette.${t.series[1]} are only ${t.distance.toFixed(4)} apart under ${t.simulation} simulation (minimum ${t.threshold.toFixed(4)}); also distinguish the series with labels, shapes, or patterns.`}function B(t,e){return t.startsWith(`dataPalette.${e.series[0]} and dataPalette.${e.series[1]} are only `)&&t.includes(` apart under ${e.simulation} simulation `)}const T={protanopia:[[.152286,1.052583,-.204868],[.114503,.786281,.099216],[-.003882,-.048116,1.051998]],deuteranopia:[[.367322,.860646,-.227968],[.280085,.672501,.047413],[-.01182,.04294,.968881]],tritanopia:[[1.255528,-.076749,-.178779],[-.078411,.930809,.147602],[.004733,.691367,.3039]]};function _(t,e){const s=O(m(t)),o=F(s),n=a=>N(a[0]*o.r+a[1]*o.g+a[2]*o.b);return{r:n(e[0]),g:n(e[1]),b:n(e[2])}}function R(t,e){return Math.hypot(t.L-e.L,t.a-e.a,t.b-e.b)}function g(t,e){const s=k(t);if(!s)throw new TypeError(`${e} is not a valid opaque CSS color: "${t}".`);return s}function V(t,e=A){if(!Number.isFinite(e)||e<0)throw new RangeError("Data-palette distance threshold must be a finite number \u2265 0.");const s=new Map;for(const n of p)s.set(n,g(t[n],`dataPalette.${n}`));const o=[];for(const n of S){const a=new Map;for(const r of p)a.set(r,E(_(s.get(r),T[n])));for(let r=0;r<p.length;r+=1)for(let i=r+1;i<p.length;i+=1){const c=p[r],l=p[i],u=R(a.get(c),a.get(l));u<e&&o.push({series:[c,l],simulation:n,distance:u,threshold:e})}}return o}const y=[[1,0,0],[0,1,0],[0,0,1]];function z(t,e=A,s=["normal",...S]){if(!Number.isFinite(e)||e<0)throw new RangeError("Color distance threshold must be a finite number \u2265 0.");const o=t.map(([r,i])=>[r,g(i,r)]),n=[],a=s.map(r=>[r,r==="normal"?y:T[r]]);for(const[r,i]of a){const c=o.map(([,l])=>E(_(l,i)));for(let l=0;l<t.length;l+=1)for(let u=l+1;u<t.length;u+=1){const d=R(c[l],c[u]);d<e&&n.push({pair:[t[l][0],t[u][0]],simulation:r,distance:d,threshold:e})}}return n}const D=3,I=11,L=7,C=1e-6,q="oklch(0.96 0 0)";function w(t,e){if(!Number.isInteger(t)||t<D||t>I)throw new RangeError(`Data-ramp steps must be an integer from ${D} through ${I}.`);if(e&&t%2===0)throw new RangeError("Diverging data-ramp steps must be odd so the neutral is the midpoint.")}function M(t,e){if(!Number.isFinite(t)||t<0||t>1)throw new RangeError(`${e} must be a finite number from 0 through 1.`)}function X(t,e={}){const s=g(t,"Sequential ramp source"),o=e.steps??L,n=e.lightnessStart??.95,a=e.lightnessEnd??.25;if(w(o,!1),M(n,"Sequential ramp lightnessStart"),M(a,"Sequential ramp lightnessEnd"),n<=a)throw new RangeError("Sequential ramp lightnessStart must be greater than lightnessEnd.");if((n-a)/(o-1)<=C)throw new RangeError(`Sequential ramp lightness bounds must leave more than ${C} lightness between serialized stops.`);return Array.from({length:o},(r,i)=>{const c=i/(o-1),l=n+(a-n)*c;return b(m({l,c:s.c,h:s.h}))})}function x(t,e,s){return{L:t.L+(e.L-t.L)*s,a:t.a+(e.a-t.a)*s,b:t.b+(e.b-t.b)*s}}function H(t,e,s={}){const o=g(t,"Diverging ramp start"),n=g(e,"Diverging ramp end"),a=g(s.neutral??q,"Diverging ramp neutral"),r=s.steps??L;w(r,!0);const i=(r-1)/2,c=f(o),l=f(a),u=f(n);return Array.from({length:r},(d,h)=>{if(h===i)return b(m(a));const P=h<i?x(c,l,h/i):x(l,u,(h-i)/i);return b(m($(P)))})}export{S as COLOR_VISION_SIMULATIONS,p as DATA_SERIES_KEYS,G as DEFAULT_DATA_PALETTE,L as DEFAULT_DATA_RAMP_STEPS,q as DEFAULT_DIVERGING_NEUTRAL,I as MAX_DATA_RAMP_STEPS,A as MIN_DATA_COLOR_DISTANCE,C as MIN_DATA_RAMP_LIGHTNESS_STEP,D as MIN_DATA_RAMP_STEPS,z as auditColorDistances,V as auditDataPalette,U as describePaletteCollision,H as generateDivergingRamp,X as generateSequentialRamp,B as isPaletteCollisionDescription};

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

@@ -1,6 +1,10 @@
-var c=function(u,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(u,e,t,r);else for(var i=u.length-1;i>=0;i--)(a=u[i])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as R,LitElement as C}from"lit";import{property as d,state as S}from"lit/decorators.js";import{subscribeToRootEvent as p}from"./root-event-subscription.js";import{traverseToClosest as m}from"./utilities.js";import{parseCssColor as w,serializeOklch as P,gamutMapToSRGB as x}from"./color-engine.js";import{computeVariants as b}from"../root/helpers/compute-variants.js";import{computeSemanticProperties as v}from"../root/helpers/compute-semantic-properties.js";import{DocumentSpriteController as E}from"./document-sprite.js";import{dataCompanionProperties as V}from"../root/helpers/data-companion-properties.js";import{dataSeriesProperties as U}from"../root/helpers/compute-theme-properties.js";import{lightnessRampProperties as I}from"../root/helpers/lightness-ramp-properties.js";import{ELEVATION_PROPERTIES as O,TYPE_ROLE_COLOR_PROPERTIES as A}from"./scale-engine.js";import{resolveContextTheme as y,resolveDataColorSource as D,semanticToCSS as z}from"./theme.js";import{alignAttributeTextInheritance as N,focusRing as F}from"./style-fragments.js";import{syncNormalizedAttribute as _}from"./attribute-helpers.js";import{INTENT_VARIANTS as k,normalizeIntentVariant as j}from"./intent-values.js";import{ESP_EVENTS as B}from"./events.js";class n extends C{get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent(B.VALUE_CHANGED,{detail:e,bubbles:!0,composed:!0}))}get intent(){return this.intentBacker}set intent(e){const t=typeof e=="string"?e.trim():"";t!==""&&!k.includes(t)&&!this.warnedUnknownIntents.has(t)&&(this.warnedUnknownIntents.add(t),console.warn(`Espalier intent: "${t}" is not an intent; expected one of ${k.join(", ")}. Treating it as "neutral".`));const r=this.intentBacker,o=j(e);_(this,"intent",o),o!==r&&(this.intentBacker=o,this.requestUpdate("intent",r),this.applyTokensWhenRootReady())}get context(){return this.contextBacker}set context(e){const t=e??"";t!==this.contextBacker&&(this.contextBacker=t,this.applyTokensWhenRootReady(),this.refreshDescendantIntentDerivations())}refreshDescendantIntentDerivations(){const e=new Set,t=o=>{for(const s of Array.from(o.children))r(s)},r=o=>{if(!e.has(o)){if(e.add(o),o instanceof n&&o.applyTokensWhenRootReady(),o.shadowRoot&&t(o.shadowRoot),o instanceof HTMLSlotElement)for(const s of o.assignedElements({flatten:!0}))r(s);t(o)}};t(this),this.shadowRoot&&t(this.shadowRoot)}static flattenedParent(e){return e instanceof Element&&e.assignedSlot?e.assignedSlot:e instanceof ShadowRoot?e.host:e.parentNode}resolveAncestorZoneTheme(e){let t=n.flattenedParent(this);for(;t;){if(t instanceof Element&&t.localName==="esp-root")return null;if(t instanceof n){const r=t.contextBacker.trim();if(r){const o=this.resolveNamedContextTheme(e,r);if(o)return o}}t=n.flattenedParent(t)}return null}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents(),this.clearScopedTokens(),this.espRoot=null}firstUpdated(e){this.syncRootFromDom(!0),this.applyTokensWhenRootReady()}syncRootFromDom(e){const t=m(this,"esp-root");if(!t){if(this.espRoot&&this.clearScopedTokens(),this.unsubscribeFromRootEvents(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,i=this.seedColor!==t.seedColor;return this.espRoot=t,r&&this.isConnected&&this.subscribeToRootEvents(t),(r||a||i)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyTokensWhenRootReady()),r&&this.requestUpdate(),t}applyTokensWhenRootReady(){const e=this.espRoot;if(e&&(!e.hasUpdated||e.isUpdatePending)){this.applyTokensAfterInitialRootUpdate(e);return}this.applyScopedColorTokens()}applyTokensAfterInitialRootUpdate(e){if(this.pendingInitialThemeRoot===e)return;this.pendingInitialThemeRoot=e;const t=e.updateComplete;if(!t){this.pendingInitialThemeRoot=null,this.applyScopedColorTokens();return}t.then(()=>{this.pendingInitialThemeRoot===e&&(this.pendingInitialThemeRoot=null),!(!this.isConnected||this.espRoot!==e)&&(this.scheme=e.scheme==="dark"?"dark":"light",this.seedColor=e.seedColor,this.applyScopedColorTokens())})}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[p(e,"seed-color-changed",this.handleSeedColorChanged),p(e,"scheme-changed",this.handleSchemeChanged),p(e,"theme-changed",this.handleThemeChanged),p(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}constructor(){super(),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.contextBacker="",this.scopedTokenOriginalValues=new Map,this.warnedUnknownContexts=new Set,this.pendingInitialThemeRoot=null,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.intentBacker="neutral",this.intentEmitsTokens=!0,this.warnedUnknownIntents=new Set,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyScopedColorTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyScopedColorTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyScopedColorTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()},new E(this,{reactToSpriteChanges:!1})}traverseToClosest(e){return m(this,e)}applyScopedColorTokens(){if(!this.espRoot)return;const e=this.intentEmitsTokens?n.intentColorSources[this.intentBacker]:"";if(!e&&!this.context.trim()){this.clearScopedTokens();return}const t=this.espRoot.activeTheme;if(!t){this.clearScopedTokens();return}const r=this.resolveContextTheme(t),o=r.theme,s=w(o.seedColor);if(!s)return;const a=b(s,o),i={};if(r.applied&&(Object.assign(i,v(o,a)),Object.assign(i,I(o)),Object.assign(i,O),Object.assign(i,A),Object.assign(i,V(i,U(o,s,l=>(typeof l=="string"?D(l,o.anchors):null)??o.seedColor)))),e){let l=o;r.applied||(l=this.resolveAncestorZoneTheme(t)??o);const g=l===o?a:b(s,l),T=v(l,g,{effectiveSource:(f,h)=>n.semanticActionTokens.has(f)?e:h});i["--esp-color-primary"]=P(x(g[e]));for(const f of n.semanticActionTokens){const h=z(f);i[h]=T[h]}}this.applyScopedTokenProperties(i)}resolveContextTheme(e){const t=this.context.trim();if(!t)return{applied:!1,theme:e};const r=this.resolveNamedContextTheme(e,t);return r?{applied:!0,theme:r}:(this.warnUnknownContextWhenSettled(t),{applied:!1,theme:e})}warnUnknownContextWhenSettled(e){if(this.warnedUnknownContexts.has(e))return;const t=this.espRoot;if(t&&!t.themeSettled){t.whenThemeSettled().then(()=>{if(!this.isConnected||this.espRoot!==t||this.context.trim()!==e)return;const r=t.activeTheme;r&&y(r,e)||this.warnUnknownContextWhenSettled(e)});return}this.warnedUnknownContexts.add(e),console.warn(`Espalier context: "${e}" is not defined by the active theme; inheriting root tokens.`)}resolveNamedContextTheme(e,t){return y(e,t)}applyScopedTokenProperties(e){for(const t of this.scopedTokenOriginalValues.keys())t in e||this.restoreScopedTokenProperty(t);for(const[t,r]of Object.entries(e))this.setScopedTokenProperty(t,r)}setScopedTokenProperty(e,t){const r=this.scopedTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.scopedTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}restoreScopedTokenProperty(e){const t=this.scopedTokenOriginalValues.get(e);if(!t)return;const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority),this.scopedTokenOriginalValues.delete(e)}clearScopedTokens(){for(const e of[...this.scopedTokenOriginalValues.keys()])this.restoreScopedTokenProperty(e)}}n.intentColorSources={danger:"danger",info:"info",neutral:"",success:"success",warning:"warning"},n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[F(".esp-field:focus-within","--esp-field-focus-shadow"),N,R`
+var c=function(f,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,r);else for(var i=f.length-1;i>=0;i--)(a=f[i])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as R,LitElement as C}from"lit";import{property as d,state as S}from"lit/decorators.js";import{subscribeToRootEvent as p}from"./root-event-subscription.js";import{traverseToClosest as g}from"./utilities.js";import{parseCssColor as w,serializeOklch as P,gamutMapToSRGB as x}from"./color-engine.js";import{computeVariants as v}from"../root/helpers/compute-variants.js";import{computeSemanticProperties as m}from"../root/helpers/compute-semantic-properties.js";import{DocumentSpriteController as E}from"./document-sprite.js";import{dataCompanionProperties as V}from"../root/helpers/data-companion-properties.js";import{dataSeriesProperties as U}from"../root/helpers/compute-theme-properties.js";import{lightnessRampProperties as I}from"../root/helpers/lightness-ramp-properties.js";import{ELEVATION_PROPERTIES as O,TYPE_ROLE_COLOR_PROPERTIES as A}from"./scale-engine.js";import{resolveContextTheme as y,resolveDataColorSource as _,semanticToCSS as D}from"./theme.js";import{alignAttributeTextInheritance as z,focusRing as N}from"./style-fragments.js";import{syncNormalizedAttribute as F}from"./attribute-helpers.js";import{INTENT_VARIANTS as k,normalizeIntentVariant as j}from"./intent-values.js";import{ESP_EVENTS as B}from"./events.js";class n extends C{get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent(B.VALUE_CHANGED,{detail:e,bubbles:!0,composed:!0}))}get intent(){return this.intentBacker}set intent(e){const t=typeof e=="string"?e.trim():"";t!==""&&!k.includes(t)&&!this.warnedUnknownIntents.has(t)&&(this.warnedUnknownIntents.add(t),console.warn(`Espalier intent: "${t}" is not an intent; expected one of ${k.join(", ")}. Treating it as "neutral".`));const r=this.intentBacker,o=j(e);F(this,"intent",o),o!==r&&(this.intentBacker=o,this.requestUpdate("intent",r),this.applyTokensWhenRootReady())}get context(){return this.contextBacker}set context(e){const t=e??"";t!==this.contextBacker&&(this.contextBacker=t,this.applyTokensWhenRootReady(),this.refreshDescendantIntentDerivations())}refreshDescendantIntentDerivations(){const e=new Set,t=o=>{for(const s of Array.from(o.children))r(s)},r=o=>{if(!e.has(o)){if(e.add(o),o instanceof n&&o.applyTokensWhenRootReady(),o.shadowRoot&&t(o.shadowRoot),o instanceof HTMLSlotElement)for(const s of o.assignedElements({flatten:!0}))r(s);t(o)}};t(this),this.shadowRoot&&t(this.shadowRoot)}static flattenedParent(e){return e instanceof Element&&e.assignedSlot?e.assignedSlot:e instanceof ShadowRoot?e.host:e.parentNode}resolveAncestorZoneTheme(e){let t=n.flattenedParent(this);for(;t;){if(t instanceof Element&&t.localName==="esp-root")return null;if(t instanceof n){const r=t.contextBacker.trim();if(r){const o=this.resolveNamedContextTheme(e,r);if(o)return o}}t=n.flattenedParent(t)}return null}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents(),this.clearScopedTokens(),this.espRoot=null}firstUpdated(e){this.syncRootFromDom(!0),this.applyTokensWhenRootReady()}syncRootFromDom(e){const t=g(this,"esp-root");if(!t){if(this.espRoot&&this.clearScopedTokens(),this.unsubscribeFromRootEvents(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,i=this.seedColor!==t.seedColor;return this.espRoot=t,r&&this.isConnected&&this.subscribeToRootEvents(t),(r||a||i)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyTokensWhenRootReady()),r&&this.requestUpdate(),t}applyTokensWhenRootReady(){const e=this.espRoot;if(e&&(!e.hasUpdated||e.isUpdatePending)){this.applyTokensAfterInitialRootUpdate(e);return}this.applyScopedColorTokens()}applyTokensAfterInitialRootUpdate(e){if(this.pendingInitialThemeRoot===e)return;this.pendingInitialThemeRoot=e;const t=e.updateComplete;if(!t){this.pendingInitialThemeRoot=null,this.applyScopedColorTokens();return}t.then(()=>{this.pendingInitialThemeRoot===e&&(this.pendingInitialThemeRoot=null),!(!this.isConnected||this.espRoot!==e)&&(this.scheme=e.scheme==="dark"?"dark":"light",this.seedColor=e.seedColor,this.applyScopedColorTokens())})}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[p(e,"seed-color-changed",this.handleSeedColorChanged),p(e,"scheme-changed",this.handleSchemeChanged),p(e,"theme-changed",this.handleThemeChanged),p(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}constructor(){super(),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.contextBacker="",this.scopedTokenOriginalValues=new Map,this.warnedUnknownContexts=new Set,this.pendingInitialThemeRoot=null,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.intentBacker="neutral",this.intentEmitsTokens=!0,this.warnedUnknownIntents=new Set,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyScopedColorTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyScopedColorTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyScopedColorTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()},new E(this,{reactToSpriteChanges:!1})}traverseToClosest(e){return g(this,e)}applyScopedColorTokens(){if(!this.espRoot)return;const e=this.intentEmitsTokens?n.intentColorSources[this.intentBacker]:"";if(!e&&!this.context.trim()){this.clearScopedTokens();return}const t=this.espRoot.activeTheme;if(!t){this.clearScopedTokens();return}const r=this.resolveContextTheme(t),o=r.theme,s=w(o.seedColor);if(!s)return;const a=v(s,o),i={};if(r.applied&&(Object.assign(i,m(o,a)),Object.assign(i,I(o)),Object.assign(i,O),Object.assign(i,A),Object.assign(i,V(i,U(o,s,l=>(typeof l=="string"?_(l,o.anchors):null)??o.seedColor)))),e){let l=o;r.applied||(l=this.resolveAncestorZoneTheme(t)??o);const b=l===o?a:v(s,l),T=m(l,b,{effectiveSource:(u,h)=>n.semanticActionTokens.has(u)?e:h});i["--esp-color-primary"]=P(x(b[e]));for(const u of n.semanticActionTokens){const h=D(u);i[h]=T[h]}}this.applyScopedTokenProperties(i)}resolveContextTheme(e){const t=this.context.trim();if(!t)return{applied:!1,theme:e};const r=this.resolveNamedContextTheme(e,t);return r?{applied:!0,theme:r}:(this.warnUnknownContextWhenSettled(t),{applied:!1,theme:e})}warnUnknownContextWhenSettled(e){if(this.warnedUnknownContexts.has(e))return;const t=this.espRoot;if(t&&!t.themeSettled){t.whenThemeSettled().then(()=>{if(!this.isConnected||this.espRoot!==t||this.context.trim()!==e)return;const r=t.activeTheme;r&&y(r,e)||this.warnUnknownContextWhenSettled(e)});return}this.warnedUnknownContexts.add(e),console.warn(`Espalier context: "${e}" is not defined by the active theme; inheriting root tokens.`)}resolveNamedContextTheme(e,t){return y(e,t)}applyScopedTokenProperties(e){for(const t of this.scopedTokenOriginalValues.keys())t in e||this.restoreScopedTokenProperty(t);for(const[t,r]of Object.entries(e))this.setScopedTokenProperty(t,r)}setScopedTokenProperty(e,t){const r=this.scopedTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.scopedTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}restoreScopedTokenProperty(e){const t=this.scopedTokenOriginalValues.get(e);if(!t)return;const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority),this.scopedTokenOriginalValues.delete(e)}clearScopedTokens(){for(const e of[...this.scopedTokenOriginalValues.keys()])this.restoreScopedTokenProperty(e)}}n.intentColorSources={danger:"danger",info:"info",neutral:"",success:"success",warning:"warning"},n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[N(".esp-field:focus-within","--esp-field-focus-shadow"),z,R`
       :host {
         
+        --_esp-font-body-fallback: system-ui, sans-serif;
+        --_esp-font-monospace-fallback: monospace;
+
+        
         --_esp-field-resolved-hover-bg: var(
           --esp-field-hover-bg,
           oklch(from var(--esp-field-background, var(--esp-color-layer-2)) calc(l * 0.88) c h)
@@ -42,7 +46,13 @@ var c=function(u,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnP
       h4,
       h5,
       h6 {
-        font-family: var(--esp-font-headings);
+        font-family: var(
+          --_esp-font-headings-effective,
+          var(
+            --esp-font-headings,
+            var(--_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)))
+          )
+        );
         font-weight: var(--esp-font-weight-headings);
         color: var(--esp-color-headings);
       }
@@ -58,7 +68,10 @@ var c=function(u,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnP
       }
 
       .esp-field {
-        font-family: var(--esp-font-body);
+        font-family: var(
+          --_esp-font-body-effective,
+          var(--esp-font-body, var(--_esp-font-body-fallback))
+        );
         font-size: var(--esp-size-font);
         font-weight: var(--esp-font-weight-body);
         background-color: var(--esp-field-background, var(--esp-color-layer-2));
@@ -89,7 +102,10 @@ var c=function(u,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnP
         > button,
         > a {
           text-decoration: none;
-          font-family: var(--esp-font-body);
+          font-family: var(
+            --_esp-font-body-effective,
+            var(--esp-font-body, var(--_esp-font-body-fallback))
+          );
           font-size: var(--esp-size-font);
           width: 100%;
           color: inherit;

package/dist/shared/font-helpers.d.ts

@@ -45,6 +45,8 @@ export declare function extractWeights(font: GoogleFont | null): string[];
  * @param defaultWeight Fallback when `weight` is falsy.
  */
 export declare function normalizeWeight(weight: string | undefined, defaultWeight: string): string;
+/** Normalize a face weight to the numeric range accepted by Google Fonts and font plans. */
+export declare function normalizeFontFaceWeight(weight: string | number | undefined, defaultWeight?: string | number): number | null;
 /**
  * Find the closest available weight to a desired one.
  *
@@ -73,6 +75,8 @@ export declare function bestAvailableWeight(desired: string, available: string[]
  * ```
  */
 export declare function extractFamily(cssFamily: string): string;
+/** Whether a first-family name is a generic, platform, or conventional web-safe local face. */
+export declare function isLocalFontFamily(family: string): boolean;
 /**
  * Return the generic CSS fallback for a Google Font category.
  *
@@ -83,3 +87,25 @@ export declare function extractFamily(cssFamily: string): string;
  *   `"sans-serif"`
  */
 export declare function getFallbackFont(category: string): string;
+export declare const RUNTIME_GOOGLE_FONT_OWNER_ATTR = "data-esp-google-font-owner";
+export type RuntimeGoogleFontLinkOptions = {
+    /** Stable owner key, for example `root:<id>:body` or `picker:<id>:Roboto`. */
+    owner: string;
+    family: string;
+    weight?: string;
+    enabled?: boolean;
+    /** Compatibility/debug attributes retained on the generated link. */
+    attributes?: Readonly<Record<string, string>>;
+};
+/** Build the canonical Google Fonts CSS2 URL used by roots and pickers. */
+export declare function googleFontStylesheetUrl(family: string, weight?: string): string;
+/**
+ * Create, update, or remove one document-global Google Fonts stylesheet link.
+ * The caller owns only its stable key, so unrelated roots and picker instances
+ * cannot replace or clean up one another's links.
+ */
+export declare function syncRuntimeGoogleFontLink(options: RuntimeGoogleFontLinkOptions): HTMLLinkElement | null;
+/** Remove one shared runtime font link by its exact owner key. */
+export declare function removeRuntimeGoogleFontLink(owner: string): void;
+/** Remove all shared runtime font links whose owner begins with `ownerPrefix`. */
+export declare function removeRuntimeGoogleFontLinks(ownerPrefix: string): void;

package/dist/shared/font-helpers.js

@@ -1 +1 @@
-const u={100:"100 Thin",200:"200 Extra Light",300:"300 Light",400:"400 Regular",500:"500 Medium",600:"600 Semi Bold",700:"700 Bold",800:"800 Extra Bold",900:"900 Black"};function c(t){if(!t)return["400"];const r=new Set;for(const e of t.variants)e.includes("italic")||r.add(e==="regular"?"400":e);const n=[...r].sort((e,o)=>Number(e)-Number(o));return n.length>0?n:["400"]}function a(t,r){return t?t==="bold"?"700":t==="normal"?"400":t:r}function f(t,r){if(r.length===0)return"400";if(r.includes(t))return t;const n=Number(t);let e=r[0],o=Math.abs(Number(e)-n);for(const i of r){const s=Math.abs(Number(i)-n);s<o&&(e=i,o=s)}return e}function l(t){return t.split(",")[0].replace(/["']/g,"").trim()}function m(t){switch(t){case"serif":return"serif";case"monospace":return"monospace";case"handwriting":return"cursive";default:return"sans-serif"}}export{u as WEIGHT_LABELS,f as bestAvailableWeight,l as extractFamily,c as extractWeights,m as getFallbackFont,a as normalizeWeight};
+const m={100:"100 Thin",200:"200 Extra Light",300:"300 Light",400:"400 Regular",500:"500 Medium",600:"600 Semi Bold",700:"700 Bold",800:"800 Extra Bold",900:"900 Black"};function d(e){if(!e)return["400"];const t=new Set;for(const r of e.variants)r.includes("italic")||t.add(r==="regular"?"400":r);const n=[...t].sort((r,o)=>Number(r)-Number(o));return n.length>0?n:["400"]}function h(e,t){return e?e==="bold"?"700":e==="normal"?"400":e:t}function u(e,t){const n=e===void 0||e===""?t:e;if(n===void 0)return null;if(typeof n=="number")return Number.isInteger(n)&&n>=1&&n<=1e3?n:null;const r=n.trim().toLowerCase();if(r==="normal")return 400;if(r==="bold")return 700;if(!/^\d{1,4}$/.test(r))return null;const o=Number(r);return Number.isInteger(o)&&o>=1&&o<=1e3?o:null}function g(e,t){if(t.length===0)return"400";if(t.includes(e))return e;const n=Number(e);let r=t[0],o=Math.abs(Number(r)-n);for(const s of t){const i=Math.abs(Number(s)-n);i<o&&(r=s,o=i)}return r}function p(e){let t="",n="",r=!1,o=0;for(const i of e.trim()){if(r){t+=i,r=!1;continue}if(i==="\\"){t+=i,r=!0;continue}if(n){t+=i,i===n&&(n="");continue}if(i==='"'||i==="'"){t+=i,n=i;continue}if(i==="("&&(o+=1),i===")"&&(o=Math.max(0,o-1)),i===","&&o===0)break;t+=i}const s=t.trim();return s.length>=2&&(s.startsWith('"')&&s.endsWith('"')||s.startsWith("'")&&s.endsWith("'"))?s.slice(1,-1).replace(/\\([\\"'])/g,"$1"):s}const l=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","math","fangsong","-apple-system","blinkmacsystemfont","arial","helvetica","helvetica neue","liberation sans","verdana","tahoma","trebuchet ms","georgia","times new roman","courier new","segoe ui"].map(e=>e.toLowerCase()));function b(e){return l.has(e.trim().toLowerCase())}function x(e){switch(e){case"serif":return"serif";case"monospace":return"monospace";case"handwriting":return"cursive";default:return"sans-serif"}}const a="data-esp-google-font-owner";function f(e,t){const n=u(t,400)??400,r=n!==400?`:wght@${n}`:"";return`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}${r}&display=swap`}function c(e){return document.head.querySelector(`link[${a}="${CSS.escape(e)}"]`)}function y(e){const t=c(e.owner),n=e.family.trim(),r=String(u(e.weight,400)??400);if(e.enabled===!1||!n)return t?.remove(),null;if(t?.dataset.espFamily===n&&t.dataset.espWeight===r)return t;t?.remove();const o=document.createElement("link");o.rel="stylesheet",o.href=f(n,r),o.setAttribute(a,e.owner),o.dataset.espFamily=n,o.dataset.espWeight=r;for(const[s,i]of Object.entries(e.attributes??{}))o.setAttribute(s,i);return document.head.appendChild(o),o}function F(e){c(e)?.remove()}function L(e){for(const t of document.head.querySelectorAll(`link[${a}]`))t.getAttribute(a)?.startsWith(e)&&t.remove()}export{a as RUNTIME_GOOGLE_FONT_OWNER_ATTR,m as WEIGHT_LABELS,g as bestAvailableWeight,p as extractFamily,d as extractWeights,x as getFallbackFont,f as googleFontStylesheetUrl,b as isLocalFontFamily,u as normalizeFontFaceWeight,h as normalizeWeight,F as removeRuntimeGoogleFontLink,L as removeRuntimeGoogleFontLinks,y as syncRuntimeGoogleFontLink};