@taprootio/espalier 4.3.0 → 4.5.0

package/dist/action-menu/esp-action-menu-item.js

@@ -1,9 +1,9 @@
-var s=function(r,i,t,n){var a=arguments.length,e=a<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,i,t,n);else for(var p=r.length-1;p>=0;p--)(c=r[p])&&(e=(a<3?c(e):a>3?c(i,t,e):c(i,t))||e);return a>3&&e&&Object.defineProperty(i,t,e),e};import{css as h,html as m,nothing as u}from"lit";import{customElement as f,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{getIconHrefForHost as b}from"../shared/intent-values.js";import{SlottedIconController as y}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as P}from"../shared/svgs/render-sprite-icon.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new y(this),this.iconPositionExplicit=!1,this.inheritingIconPosition=!1,this._iconPosition="left",this.icon="",this.value="",this.disabled=!1,this.handleClick=i=>{if(this.disabled){i.preventDefault();return}this.activate()}}get iconPosition(){return this._iconPosition}set iconPosition(i){const t=this._iconPosition;this._iconPosition=i,this.inheritingIconPosition||(this.iconPositionExplicit=!0),this.requestUpdate("iconPosition",t)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}updated(i){super.updated(i),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",String(this.disabled))}activate(){this.disabled||this.dispatchEvent(new CustomEvent("esp-internal-action-menu-item-activate",{detail:{item:this},bubbles:!0,composed:!0}))}inheritIconPosition(i){this.iconPositionExplicit||(this.inheritingIconPosition=!0,this.iconPosition=i,this.inheritingIconPosition=!1)}render(){const i=b(this.icon,this),t=this.iconSlot.hasSlottedIcon(),n={item:!0,"has-icon":t||i.length>0,"icon-right":this.iconPosition==="right"};return m`
-      <span part="item" class=${g(n)}>
+var s=function(r,i,t,n){var a=arguments.length,e=a<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,i,t,n);else for(var p=r.length-1;p>=0;p--)(c=r[p])&&(e=(a<3?c(e):a>3?c(i,t,e):c(i,t))||e);return a>3&&e&&Object.defineProperty(i,t,e),e};import{css as h,html as m,nothing as u}from"lit";import{customElement as f,property as l}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{ref as g}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{getIconHrefForHost as b}from"../shared/intent-values.js";import{SlottedIconController as y}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as P}from"../shared/svgs/render-sprite-icon.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new y(this),this.iconPositionExplicit=!1,this.inheritingIconPosition=!1,this._iconPosition="left",this.icon="",this.value="",this.disabled=!1,this.handleClick=i=>{if(this.disabled){i.preventDefault();return}this.activate()}}get iconPosition(){return this._iconPosition}set iconPosition(i){const t=this._iconPosition;this._iconPosition=i,this.inheritingIconPosition||(this.iconPositionExplicit=!0),this.requestUpdate("iconPosition",t)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}updated(i){super.updated(i),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",String(this.disabled))}activate(){this.disabled||this.dispatchEvent(new CustomEvent("esp-internal-action-menu-item-activate",{detail:{item:this},bubbles:!0,composed:!0}))}inheritIconPosition(i){this.iconPositionExplicit||(this.inheritingIconPosition=!0,this.iconPosition=i,this.inheritingIconPosition=!1)}render(){const i=b(this.icon,this),t=this.iconSlot.hasSlottedIcon(),n={item:!0,"has-icon":t||i.length>0,"icon-right":this.iconPosition==="right"};return m`
+      <span part="item" class=${v(n)}>
         <span part="icon" class="icon">
           <slot
             name="icon"
-            ${v(this.iconSlot.slotRef)}
+            ${g(this.iconSlot.slotRef)}
             @slotchange=${this.iconSlot.handleSlotChange}
           ></slot>
           ${!t&&i?P(i):u}
@@ -28,7 +28,10 @@ var s=function(r,i,t,n){var a=arguments.length,e=a<3?i:n===null?n=Object.getOwnP
         grid-template-columns: 1fr;
         align-items: center;
         min-width: max-content;
-        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: bold;
         line-height: 1.3;

package/dist/avatar/esp-avatar.js

@@ -1,4 +1,4 @@
-var l=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,e,r,o);else for(var h=a.length-1;h>=0;h--)(i=a[h])&&(s=(n<3?i(s):n>3?i(e,r,s):i(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s};import{css as b,html as p,nothing as m}from"lit";import{customElement as y,property as c}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{syncNormalizedAttribute as k}from"../shared/attribute-helpers.js";import{normalizeCrossOrigin as z,normalizeLoading as _,normalizePresence as B,normalizeReferrerPolicy as P,normalizeSize as O,nullableStringConverter as $}from"./avatar-values.js";const d=["primary","analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right"];function v(a){const e=Intl.Segmenter;return e?Array.from(new e(void 0,{granularity:"grapheme"}).segment(a),r=>r.segment):Array.from(a)}function u(a){return/[\p{Letter}\p{Number}]/u.test(a)}function w(a){const e=v(a).filter(r=>r.trim().length>0);return e.find(r=>u(r))??e[0]??""}function A(a){const e=a.trim().replace(/^@+/,"");if(!e)return"?";const r=e.split(/[\s._-]+/u).map(i=>i.trim()).filter(Boolean);if(r.length>1)return r.map(w).filter(Boolean).slice(0,2).join("").toLocaleUpperCase();const o=v(r[0]??e).filter(i=>i.trim().length>0),n=o.filter(u);return(n.length>0?n:o).slice(0,2).join("").toLocaleUpperCase()||"?"}function S(a){let e=0;for(const r of a)e=e*31+r.codePointAt(0)>>>0;return e}let t=class extends f{constructor(){super(...arguments),this.sizeBacker="medium",this.presenceBacker="",this.loadingBacker="lazy",this.crossOriginBacker="",this.referrerPolicyBacker="no-referrer",this.imageFailed=!1,this.src="",this.name=""}get size(){return this.sizeBacker}set size(e){const r=this.sizeBacker;this.sizeBacker=O(e),this.requestUpdate("size",r),k(this,"size",this.sizeBacker)}get presence(){return this.presenceBacker}set presence(e){const r=this.presenceBacker;this.presenceBacker=B(e),this.requestUpdate("presence",r),this.syncPresenceAttribute()}get loading(){return this.loadingBacker}set loading(e){const r=this.loadingBacker;this.loadingBacker=_(e),this.requestUpdate("loading",r)}get crossOrigin(){return this.crossOriginBacker}set crossOrigin(e){const r=this.crossOriginBacker;this.crossOriginBacker=z(e),this.requestUpdate("crossOrigin",r)}get referrerPolicy(){return this.referrerPolicyBacker}set referrerPolicy(e){const r=this.referrerPolicyBacker;this.referrerPolicyBacker=P(e),this.requestUpdate("referrerPolicy",r)}willUpdate(e){e.has("src")&&(this.imageFailed=!1)}syncPresenceAttribute(){const e=this.getAttribute("presence");if(this.presenceBacker){e!==null&&e!==this.presenceBacker&&this.setAttribute("presence",this.presenceBacker);return}e!==null&&this.removeAttribute("presence")}get accessibleName(){const e=this.name.trim()||"Avatar";return this.presence?`${e}, ${this.presence}`:e}get fallbackColorClass(){const e=S(this.name.trim().toLocaleLowerCase())%d.length;return`fallback-${d[e]}`}handleImageError(){this.imageFailed||(this.imageFailed=!0,this.requestUpdate())}retryImage(){this.imageFailed&&(this.imageFailed=!1,this.requestUpdate())}render(){const e=this.src.trim().length>0&&!this.imageFailed,r=this.presence;return p`
+var l=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,e,r,o);else for(var h=a.length-1;h>=0;h--)(i=a[h])&&(s=(n<3?i(s):n>3?i(e,r,s):i(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s};import{css as b,html as p,nothing as f}from"lit";import{customElement as y,property as c}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{syncNormalizedAttribute as k}from"../shared/attribute-helpers.js";import{normalizeCrossOrigin as z,normalizeLoading as _,normalizePresence as B,normalizeReferrerPolicy as P,normalizeSize as O,nullableStringConverter as $}from"./avatar-values.js";const d=["primary","analogous-left","analogous-right","complementary","split-complementary-left","split-complementary-right","triadic-left","triadic-right"];function v(a){const e=Intl.Segmenter;return e?Array.from(new e(void 0,{granularity:"grapheme"}).segment(a),r=>r.segment):Array.from(a)}function u(a){return/[\p{Letter}\p{Number}]/u.test(a)}function w(a){const e=v(a).filter(r=>r.trim().length>0);return e.find(r=>u(r))??e[0]??""}function A(a){const e=a.trim().replace(/^@+/,"");if(!e)return"?";const r=e.split(/[\s._-]+/u).map(i=>i.trim()).filter(Boolean);if(r.length>1)return r.map(w).filter(Boolean).slice(0,2).join("").toLocaleUpperCase();const o=v(r[0]??e).filter(i=>i.trim().length>0),n=o.filter(u);return(n.length>0?n:o).slice(0,2).join("").toLocaleUpperCase()||"?"}function S(a){let e=0;for(const r of a)e=e*31+r.codePointAt(0)>>>0;return e}let t=class extends g{constructor(){super(...arguments),this.sizeBacker="medium",this.presenceBacker="",this.loadingBacker="lazy",this.crossOriginBacker="",this.referrerPolicyBacker="no-referrer",this.imageFailed=!1,this.src="",this.name=""}get size(){return this.sizeBacker}set size(e){const r=this.sizeBacker;this.sizeBacker=O(e),this.requestUpdate("size",r),k(this,"size",this.sizeBacker)}get presence(){return this.presenceBacker}set presence(e){const r=this.presenceBacker;this.presenceBacker=B(e),this.requestUpdate("presence",r),this.syncPresenceAttribute()}get loading(){return this.loadingBacker}set loading(e){const r=this.loadingBacker;this.loadingBacker=_(e),this.requestUpdate("loading",r)}get crossOrigin(){return this.crossOriginBacker}set crossOrigin(e){const r=this.crossOriginBacker;this.crossOriginBacker=z(e),this.requestUpdate("crossOrigin",r)}get referrerPolicy(){return this.referrerPolicyBacker}set referrerPolicy(e){const r=this.referrerPolicyBacker;this.referrerPolicyBacker=P(e),this.requestUpdate("referrerPolicy",r)}willUpdate(e){e.has("src")&&(this.imageFailed=!1)}syncPresenceAttribute(){const e=this.getAttribute("presence");if(this.presenceBacker){e!==null&&e!==this.presenceBacker&&this.setAttribute("presence",this.presenceBacker);return}e!==null&&this.removeAttribute("presence")}get accessibleName(){const e=this.name.trim()||"Avatar";return this.presence?`${e}, ${this.presence}`:e}get fallbackColorClass(){const e=S(this.name.trim().toLocaleLowerCase())%d.length;return`fallback-${d[e]}`}handleImageError(){this.imageFailed||(this.imageFailed=!0,this.requestUpdate())}retryImage(){this.imageFailed&&(this.imageFailed=!1,this.requestUpdate())}render(){const e=this.src.trim().length>0&&!this.imageFailed,r=this.presence;return p`
       <span class="avatar" part="avatar">
         <span class="visual" part=${e?"image":"fallback"}>
           ${e?p`
@@ -7,13 +7,13 @@ var l=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnP
                   alt=${this.accessibleName}
                   decoding="async"
                   loading=${this.loading}
-                  referrerpolicy=${this.referrerPolicy||m}
-                  crossorigin=${this.crossOrigin||m}
+                  referrerpolicy=${this.referrerPolicy||f}
+                  crossorigin=${this.crossOrigin||f}
                   @error=${this.handleImageError}
                 />
               `:p`
                 <span
-                  class=${g({fallback:!0,[this.fallbackColorClass]:!0})}
+                  class=${m({fallback:!0,[this.fallbackColorClass]:!0})}
                   role="img"
                   aria-label=${this.accessibleName}
                 >
@@ -22,12 +22,12 @@ var l=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnP
               `}
         </span>
         ${r?p`<span
-              class=${g({presence:!0,[r]:!0})}
+              class=${m({presence:!0,[r]:!0})}
               part="presence"
               aria-hidden="true"
-            ></span>`:m}
+            ></span>`:f}
       </span>
-    `}};t.styles=[...f.styles,b`
+    `}};t.styles=[...g.styles,b`
       :host {
         --_esp-avatar-resolved-size: var(--esp-avatar-size, var(--esp-size-big));
         --_esp-avatar-fallback-base: var(--esp-color-primary);
@@ -80,7 +80,13 @@ var l=function(a,e,r,o){var n=arguments.length,s=n<3?e:o===null?o=Object.getOwnP
         background: oklch(from var(--_esp-avatar-fallback-base) var(--esp-l-raised-3) c h);
         color: var(--esp-color-text);
         color: oklch(from var(--_esp-avatar-fallback-base) var(--esp-l-ink) c h);
-        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-size: calc(var(--_esp-avatar-resolved-size) * 0.38);
         font-weight: var(--esp-font-weight-headings);
         line-height: 1;

package/dist/avatar/esp-profile-chip.js

@@ -29,7 +29,10 @@ var i=function(n,e,t,p){var o=arguments.length,s=o<3?e:p===null?p=Object.getOwnP
         gap: var(--esp-size-tiny-to-small);
         min-width: 0;
         max-width: 100%;
-        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);
       }

package/dist/badge/esp-badge.js

@@ -1,4 +1,4 @@
-var c=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,o);else for(var l=s.length-1;l>=0;l--)(a=s[l])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{css as h,html as m,nothing as f}from"lit";import{customElement as g,property as p}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{ref as b}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{intentSurfaceTokens as z}from"../shared/style-fragments.js";import{syncNormalizedAttribute as v}from"../shared/attribute-helpers.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as w}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as S}from"../shared/svgs/render-sprite-icon.js";function _(s){return s==="medium"?"medium":"small"}let r=class extends d{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.iconSlot=new w(this),this.sizeBacker="small",this.icon=""}get size(){return this.sizeBacker}set size(e){const t=this.sizeBacker;this.sizeBacker=_(e),this.requestUpdate("size",t),v(this,"size",this.sizeBacker)}render(){const e=y(this.icon,this),t=this.iconSlot.hasSlottedIcon(),o=t||e.length>0,n={badge:!0,[`intent-${this.intent}`]:!0,[`size-${this.size}`]:!0,"has-icon":o};return m`
+var c=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,o);else for(var l=s.length-1;l>=0;l--)(a=s[l])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{css as h,html as m,nothing as f}from"lit";import{customElement as g,property as p}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{ref as b}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{intentSurfaceTokens as v}from"../shared/style-fragments.js";import{syncNormalizedAttribute as z}from"../shared/attribute-helpers.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as _}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";function S(s){return s==="medium"?"medium":"small"}let r=class extends d{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.iconSlot=new _(this),this.sizeBacker="small",this.icon=""}get size(){return this.sizeBacker}set size(e){const t=this.sizeBacker;this.sizeBacker=S(e),this.requestUpdate("size",t),z(this,"size",this.sizeBacker)}render(){const e=y(this.icon,this),t=this.iconSlot.hasSlottedIcon(),o=t||e.length>0,n={badge:!0,[`intent-${this.intent}`]:!0,[`size-${this.size}`]:!0,"has-icon":o};return m`
       <span part="badge" class=${u(n)}>
         <span part="icon" class="icon" aria-hidden="true">
           <slot
@@ -6,11 +6,11 @@ var c=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
             ${b(this.iconSlot.slotRef)}
             @slotchange=${this.iconSlot.handleSlotChange}
           ></slot>
-          ${!t&&e?S(e):f}
+          ${!t&&e?w(e):f}
         </span>
         <span part="label" class="label"><slot></slot></span>
       </span>
-    `}};r.styles=[...d.styles,z,h`
+    `}};r.styles=[...d.styles,v,h`
       :host {
         display: inline-flex;
         max-width: 100%;
@@ -30,7 +30,10 @@ var c=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
         border-radius: var(--esp-badge-border-radius, 999px);
         background: var(--_esp-badge-background);
         color: var(--_esp-badge-color);
-        font-family: var(--esp-font-body);
+        font-family: var(
+          --_esp-font-body-effective,
+          var(--esp-font-body, var(--_esp-font-body-fallback))
+        );
         font-weight: var(--esp-font-weight-headings);
         line-height: 1.2;
         white-space: nowrap;

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

@@ -75,7 +75,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *     font-size: var(--esp-size-big-to-large);
  *     padding: var(--esp-size-padding);
  *     line-height: 1.1;
- *     font-family: var(--esp-font-headings);
+ *     font-family: var(--esp-font-headings, var(--esp-font-body, system-ui, sans-serif));
  *   }
  *   esp-box.card-box div {
  *     padding: var(--esp-size-padding);

package/dist/checkbox/esp-checkbox.js

@@ -1,4 +1,4 @@
-var o=function(l,e,s,c){var n=arguments.length,i=n<3?e:c===null?c=Object.getOwnPropertyDescriptor(e,s):c,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,s,c);else for(var h=l.length-1;h>=0;h--)(a=l[h])&&(i=(n<3?a(i):n>3?a(e,s,i):a(e,s))||i);return n>3&&i&&Object.defineProperty(e,s,i),i};import{css as p,html as m}from"lit";import{customElement as f,property as r}from"lit/decorators.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{checkboxChecked as u}from"../shared/svgs/checkbox-checked.js";import{checkboxUnchecked as b}from"../shared/svgs/checkbox-unchecked.js";import{checkboxIndeterminate as k}from"../shared/svgs/checkbox-indeterminate.js";import{FormFieldController as v}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as g}from"../shared/form-field-description-controller.js";import{disabledControl as y,focusRing as x}from"../shared/style-fragments.js";let t=class extends d{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new v({host:this,internals:this.internals,getFormValue:()=>this.checked?this.value||"on":null,getValidity:()=>this.required&&!this.checked?{flags:{valueMissing:!0},message:this.requiredMessage||"Please check this box to continue."}:null,onReset:()=>{this.checked=!1,this.indeterminate=!1},onRestore:e=>{this.checked=e==="on"||e===this.value},onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new g({host:this,getTarget:()=>this.shadowRoot?.querySelector(".checkbox-control")}),this.checked=!1,this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.indeterminate=!1}focus(e){this.focusShadowElementAfterUpdate(".checkbox-control",e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}toggle(){this.disabled||(this.indeterminate=!1,this.checked=!this.checked,this.formCtrl.syncValue(),this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){e.key===" "&&(e.preventDefault(),this.toggle())}getSvg(){return this.indeterminate?k:this.checked?u:b}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}render(){return m`
+var i=function(l,e,s,c){var a=arguments.length,o=a<3?e:c===null?c=Object.getOwnPropertyDescriptor(e,s):c,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,e,s,c);else for(var h=l.length-1;h>=0;h--)(n=l[h])&&(o=(a<3?n(o):a>3?n(e,s,o):n(e,s))||o);return a>3&&o&&Object.defineProperty(e,s,o),o};import{css as p,html as m}from"lit";import{customElement as f,property as r}from"lit/decorators.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{checkboxChecked as u}from"../shared/svgs/checkbox-checked.js";import{checkboxUnchecked as b}from"../shared/svgs/checkbox-unchecked.js";import{checkboxIndeterminate as v}from"../shared/svgs/checkbox-indeterminate.js";import{FormFieldController as k}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as g}from"../shared/form-field-description-controller.js";import{disabledControl as y,focusRing as x}from"../shared/style-fragments.js";let t=class extends d{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new k({host:this,internals:this.internals,getFormValue:()=>this.checked?this.value||"on":null,getValidity:()=>this.required&&!this.checked?{flags:{valueMissing:!0},message:this.requiredMessage||"Please check this box to continue."}:null,onReset:()=>{this.checked=!1,this.indeterminate=!1},onRestore:e=>{this.checked=e==="on"||e===this.value},onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new g({host:this,getTarget:()=>this.shadowRoot?.querySelector(".checkbox-control")}),this.checked=!1,this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.indeterminate=!1}focus(e){this.focusShadowElementAfterUpdate(".checkbox-control",e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}toggle(){this.disabled||(this.indeterminate=!1,this.checked=!this.checked,this.formCtrl.syncValue(),this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){e.key===" "&&(e.preventDefault(),this.toggle())}getSvg(){return this.indeterminate?v:this.checked?u:b}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}render(){return m`
       <div
         class="checkbox-control"
         role="checkbox"
@@ -22,7 +22,10 @@ var o=function(l,e,s,c){var n=arguments.length,i=n<3?e:c===null?c=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 o=function(l,e,s,c){var n=arguments.length,i=n<3?e:c===null?c=Object.getOwnP
           line-height: 1.3;
         }
       }
-    `],o([r({type:Boolean,reflect:!0})],t.prototype,"checked",void 0),o([r({type:String})],t.prototype,"value",void 0),o([r({type:String,reflect:!0})],t.prototype,"name",void 0),o([r({type:Boolean,reflect:!0})],t.prototype,"required",void 0),o([r({attribute:"required-message"})],t.prototype,"requiredMessage",void 0),o([r({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),o([r({type:Boolean,reflect:!0})],t.prototype,"indeterminate",void 0),t=o([f("esp-checkbox")],t);export{t as EspalierCheckbox};
+    `],i([r({type:Boolean,reflect:!0})],t.prototype,"checked",void 0),i([r({type:String})],t.prototype,"value",void 0),i([r({type:String,reflect:!0})],t.prototype,"name",void 0),i([r({type:Boolean,reflect:!0})],t.prototype,"required",void 0),i([r({attribute:"required-message"})],t.prototype,"requiredMessage",void 0),i([r({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),i([r({type:Boolean,reflect:!0})],t.prototype,"indeterminate",void 0),t=i([f("esp-checkbox")],t);export{t as EspalierCheckbox};

package/dist/color-picker/esp-color-picker.js

@@ -91,7 +91,7 @@ var a=function(r,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       font-weight: 400;
       opacity: 0.7;
       font-size: 0.85em;
-      font-family: var(--esp-font-monospace);
+      font-family: var(--_esp-font-monospace-effective, var(--esp-font-monospace, monospace));
     }
 
     #hue-slider {

package/dist/data-cell/esp-data-cell.js

@@ -1,5 +1,5 @@
-var c=function(a,e,s,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(a,e,s,n);else for(var i=a.length-1;i>=0;i--)(l=a[i])&&(t=(r<3?l(t):r>3?l(e,s,t):l(e,s))||t);return r>3&&t&&Object.defineProperty(e,s,t),t};import{css as h,html as m}from"lit";import{customElement as y,property as f,state as u}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{createRef as S,ref as p}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{SlottedIconController as v}from"../shared/slotted-icon-controller.js";import{slotHasContent as w}from"../shared/slot-content.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new v(this),this.secondarySlot=S(),this.hasSecondary=!1,this.truncate=!1,this.handleSecondarySlotChange=()=>{this.hasSecondary=w(this.secondarySlot.value)}}firstUpdated(e){super.firstUpdated(e),this.iconSlot.handleSlotChange(),this.handleSecondarySlotChange()}render(){const e={cell:!0,"has-icon":this.iconSlot.hasAssignedSlotContent,"has-secondary":this.hasSecondary,truncate:this.truncate};return m`
-      <span part="cell" class=${g(e)}>
+var c=function(a,e,s,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(a,e,s,n);else for(var i=a.length-1;i>=0;i--)(l=a[i])&&(t=(r<3?l(t):r>3?l(e,s,t):l(e,s))||t);return r>3&&t&&Object.defineProperty(e,s,t),t};import{css as h,html as m}from"lit";import{customElement as y,property as f,state as u}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{createRef as g,ref as p}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{SlottedIconController as S}from"../shared/slotted-icon-controller.js";import{slotHasContent as w}from"../shared/slot-content.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new S(this),this.secondarySlot=g(),this.hasSecondary=!1,this.truncate=!1,this.handleSecondarySlotChange=()=>{this.hasSecondary=w(this.secondarySlot.value)}}firstUpdated(e){super.firstUpdated(e),this.iconSlot.handleSlotChange(),this.handleSecondarySlotChange()}render(){const e={cell:!0,"has-icon":this.iconSlot.hasAssignedSlotContent,"has-secondary":this.hasSecondary,truncate:this.truncate};return m`
+      <span part="cell" class=${v(e)}>
         <span part="icon" class="icon">
           <slot
             name="icon"
@@ -31,7 +31,10 @@ var c=function(a,e,s,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnP
         min-width: 0;
         gap: var(--esp-size-tiny);
         color: var(--esp-color-text);
-        font-family: var(--esp-font-body);
+        font-family: var(
+          --_esp-font-body-effective,
+          var(--esp-font-body, var(--_esp-font-body-fallback))
+        );
       }
 
       .cell.has-icon {

package/dist/date-picker/helpers/styles.js

@@ -1,8 +1,11 @@
-import{css as e}from"lit";const o=e`
+import{css as e}from"lit";const r=e`
   
 
   .temporal-error {
-    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-type-small);
     color: var(--esp-color-danger-text);
     padding: var(--esp-size-padding);
@@ -45,7 +48,10 @@ import{css as e}from"lit";const o=e`
     background: var(--esp-color-layer-1);
     box-shadow: 0 4px 16px var(--esp-color-shadow);
     color: var(--esp-color-text);
-    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);
     opacity: 0;
     transition: opacity 150ms ease-in;
@@ -256,4 +262,4 @@ import{css as e}from"lit";const o=e`
     color: var(--esp-color-headings);
     padding: 0 2px;
   }
-`;export{o as datePickerStyles};
+`;export{r as datePickerStyles};

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

@@ -87,15 +87,15 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *     <li>Toggle a checkbox, click Apply, and repeat the sort — the viewport should remain stable.</li>
  *   </ol>
  * </esp-info>
- * <div style="height:40vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body);">
+ * <div style="height:40vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body,system-ui,sans-serif);">
  *   &uarr; Spacer &mdash; scroll down to reach the filter panel &uarr;
  * </div>
  * <esp-details summary="Advanced filters">
  *   <div style="display:flex; flex-direction:column; gap:var(--esp-size-small);">
- *     <label style="display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body); color:var(--esp-color-text);">
+ *     <label style="display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body,system-ui,sans-serif); color:var(--esp-color-text);">
  *       <input type="checkbox" value="active" /> Active only
  *     </label>
- *     <label style="display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body); color:var(--esp-color-text);">
+ *     <label style="display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body,system-ui,sans-serif); color:var(--esp-color-text);">
  *       <input type="checkbox" value="flagged" /> Flagged
  *     </label>
  *     <esp-button id="scroll-test-apply" label="Apply filters"></esp-button>
@@ -106,7 +106,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *   <esp-grid-column header="Title" field-name="title" sortable width="200px" grow></esp-grid-column>
  *   <esp-grid-column header="Status" field-name="status" width="120px"></esp-grid-column>
  * </esp-grid>
- * <div style="height:60vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body);">
+ * <div style="height:60vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body,system-ui,sans-serif);">
  *   &darr; Spacer &mdash; extra page length below the grid &darr;
  * </div>
  * <script>

package/dist/details/esp-details.js

@@ -1,4 +1,4 @@
-var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{css as h,html as b}from"lit";import{customElement as f,property as c}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as g}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const p=t.scrollTop;Math.abs(p-r)>1&&(t.scrollTop=r)}else{const p=window.scrollY;Math.abs(p-r)>1&&window.scrollBy(0,l)}})}render(){return b`
+var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{css as h,html as f}from"lit";import{customElement as b,property as c}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as v}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const p=t.scrollTop;Math.abs(p-r)>1&&(t.scrollTop=r)}else{const p=window.scrollY;Math.abs(p-r)>1&&window.scrollBy(0,l)}})}render(){return f`
       <details ?open=${this.open} @toggle=${this.handleToggle}>
         <summary @click=${this.handleSummaryClick}>
           <span class="indicator"></span>
@@ -8,7 +8,7 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
           <slot></slot>
         </div>
       </details>
-    `}};a.styles=[...m.styles,g(":host([disabled]) summary"),h`
+    `}};a.styles=[...m.styles,v(":host([disabled]) summary"),h`
       :host {
         display: block;
         overflow-anchor: none;
@@ -41,7 +41,10 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
         cursor: pointer;
         user-select: none;
         list-style: 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);
         font-weight: 600;
         color: var(--esp-color-headings);
@@ -89,7 +92,10 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
 
       .content {
         padding: var(--esp-details-size-padding, var(--esp-size-padding));
-        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);
         border-top: 1px solid var(--esp-details-color-border, var(--esp-color-border));
@@ -113,4 +119,4 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       :host([in-group]:last-of-type) details {
         border-bottom: none;
       }
-    `],d([c({type:String})],a.prototype,"summary",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([f("esp-details")],a);export{a as EspalierDetails};
+    `],d([c({type:String})],a.prototype,"summary",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([b("esp-details")],a);export{a as EspalierDetails};

package/dist/empty-state/esp-empty-state.js

@@ -1,12 +1,12 @@
-var l=function(o,t,e,n){var a=arguments.length,i=a<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,e):n,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,t,e,n);else for(var c=o.length-1;c>=0;c--)(r=o[c])&&(i=(a<3?r(i):a>3?r(t,e,i):r(t,e))||i);return a>3&&i&&Object.defineProperty(t,e,i),i};import{css as m,html as g,nothing as f}from"lit";import{customElement as y,property as h,state as u}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{getIconHrefForHost as z}from"../shared/intent-values.js";import{syncNormalizedAttribute as S}from"../shared/attribute-helpers.js";import{SlottedIconController as b}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as E}from"../shared/svgs/render-sprite-icon.js";import{createRef as w,ref as d}from"lit/directives/ref.js";function x(o){return o==="large"?"large":"medium"}let s=class extends p{constructor(){super(...arguments),this.iconSlot=new b(this),this.actionSlot=w(),this.sizeBacker="medium",this.hasSlottedAction=!1,this.icon="",this.handleActionSlotChange=()=>{this.hasSlottedAction=(this.actionSlot.value?.assignedElements({flatten:!0}).length??0)>0}}get size(){return this.sizeBacker}set size(t){const e=this.sizeBacker;this.sizeBacker=x(t),this.requestUpdate("size",e),S(this,"size",this.sizeBacker)}render(){const t=z(this.icon,this),e=this.iconSlot.hasSlottedIcon(),n=e||t.length>0,a=this.hasSlottedAction||this.querySelector('[slot="action"]')!==null,i={"empty-state":!0,[`size-${this.size}`]:!0,"has-icon":n,"has-action":a};return g`
-      <section part="empty-state" class=${v(i)}>
+var l=function(s,e,t,n){var a=arguments.length,i=a<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,n);else for(var c=s.length-1;c>=0;c--)(r=s[c])&&(i=(a<3?r(i):a>3?r(e,t,i):r(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};import{css as f,html as m,nothing as g}from"lit";import{customElement as v,property as h,state as y}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{getIconHrefForHost as z}from"../shared/intent-values.js";import{syncNormalizedAttribute as S}from"../shared/attribute-helpers.js";import{SlottedIconController as b}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as E}from"../shared/svgs/render-sprite-icon.js";import{createRef as _,ref as d}from"lit/directives/ref.js";function w(s){return s==="large"?"large":"medium"}let o=class extends p{constructor(){super(...arguments),this.iconSlot=new b(this),this.actionSlot=_(),this.sizeBacker="medium",this.hasSlottedAction=!1,this.icon="",this.handleActionSlotChange=()=>{this.hasSlottedAction=(this.actionSlot.value?.assignedElements({flatten:!0}).length??0)>0}}get size(){return this.sizeBacker}set size(e){const t=this.sizeBacker;this.sizeBacker=w(e),this.requestUpdate("size",t),S(this,"size",this.sizeBacker)}render(){const e=z(this.icon,this),t=this.iconSlot.hasSlottedIcon(),n=t||e.length>0,a=this.hasSlottedAction||this.querySelector('[slot="action"]')!==null,i={"empty-state":!0,[`size-${this.size}`]:!0,"has-icon":n,"has-action":a};return m`
+      <section part="empty-state" class=${u(i)}>
         <span part="icon" class="icon" aria-hidden="true">
           <slot
             name="icon"
             ${d(this.iconSlot.slotRef)}
             @slotchange=${this.iconSlot.handleSlotChange}
           ></slot>
-          ${!e&&t?E(t):f}
+          ${!t&&e?E(e):g}
         </span>
         <div part="heading" class="heading"><slot name="heading"></slot></div>
         <div part="body" class="body"><slot></slot></div>
@@ -18,11 +18,14 @@ var l=function(o,t,e,n){var a=arguments.length,i=a<3?t:n===null?n=Object.getOwnP
           ></slot>
         </div>
       </section>
-    `}};s.styles=[...p.styles,m`
+    `}};o.styles=[...p.styles,f`
       :host {
         display: block;
         color: var(--esp-color-text);
-        font-family: var(--esp-font-body);
+        font-family: var(
+          --_esp-font-body-effective,
+          var(--esp-font-body, var(--_esp-font-body-fallback))
+        );
       }
 
       .empty-state {
@@ -71,7 +74,13 @@ var l=function(o,t,e,n){var a=arguments.length,i=a<3?t:n===null?n=Object.getOwnP
 
       .heading {
         color: var(--esp-color-text);
-        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-size: var(--esp-type-medium);
         font-weight: var(--esp-font-weight-headings);
         line-height: 1.2;
@@ -96,4 +105,4 @@ var l=function(o,t,e,n){var a=arguments.length,i=a<3?t:n===null?n=Object.getOwnP
       .has-action .action {
         display: flex;
       }
-    `],l([u()],s.prototype,"hasSlottedAction",void 0),l([h({type:String})],s.prototype,"icon",void 0),l([h({type:String,reflect:!0})],s.prototype,"size",null),s=l([y("esp-empty-state")],s);export{s as EspalierEmptyState};
+    `],l([y()],o.prototype,"hasSlottedAction",void 0),l([h({type:String})],o.prototype,"icon",void 0),l([h({type:String,reflect:!0})],o.prototype,"size",null),o=l([v("esp-empty-state")],o);export{o as EspalierEmptyState};

package/dist/flyout/esp-flyout.js

@@ -31,7 +31,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
   @starting-style {
     translate: 100% 0;
   }
-`;let a=class extends A{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.pageOverlayRequested=!1,this.fullHeight=!1,this.matchSurface=!1,this.standalone=!1,this.scope="outermost",this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry(),this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorGeometryFrame=new B(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=L(),this.overlay=new H({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||this.pageOverlayRequested||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia($)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.addEventListener(k,this.boundFullHeightRequest),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.removeEventListener(k,this.boundFullHeightRequest),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(y().subscribe("show-flyout",this.boundShowRequest),y().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(y().unsubscribe("show-flyout",this.boundShowRequest),y().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent(f.FLYOUT_OPENED,{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent(f.FLYOUT_CLOSED,{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(M(e),e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.fullHeight=e.fullHeight??!1,this.returnFocusTo=e.returnFocusTo,this.show())}shouldHandleShowRequest(e){const t=v(this,"esp-page"),s=e.anchor??e.returnFocusTo;if(!s){if(!t)return!0;const i=this.getPageChain(t);return this.scope==="outermost"&&i[i.length-1]===t}const o=this.getPageChain(s);if(o.length===0)return t===null;const r=o.find(i=>this.hasNearestScopeFlyout(i)),n=r??o[o.length-1];return t!==n?!1:r?this.scope==="nearest":this.scope==="outermost"}getPageChain(e){const t=[];let s=e;for(;s;){const o=v(s,"esp-page");if(!o||t.includes(o))break;t.push(o),s=this.composedParent(o)}return t}hasNearestScopeFlyout(e){return Array.from(e.querySelectorAll("esp-flyout")).some(t=>!t.standalone&&t.scope==="nearest"&&v(t,"esp-page")===e)}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("fullHeight")||e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor")||e.has("fullHeight")||e.has("pageOverlayRequested"))&&this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=v(this,"esp-page"),t=this.anchor?this.getPageChain(this.anchor):[],s=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!o){this.clearAnchorGeometry();return}const r=this.getVisibleBlockBounds(),n=Math.max(0,r.bottom-r.top);if(this.setGeometryProperty("--_esp-flyout-max-block-size",`${n}px`),this.fullHeight){this.clearAnchorPlacementGeometry();return}if(!this.anchor||!e||!t.includes(e)||!s){this.clearAnchorGeometry();return}const i=this.anchor.getBoundingClientRect(),d=Math.max(0,i.top-s.getBoundingClientRect().top),c=Number.isFinite(i.height)?i.height:0;this.setGeometryProperty("--_esp-flyout-anchor-offset",`${d}px`),this.setGeometryProperty("--_esp-flyout-anchor-block-size",`${c}px`);const m=o.getBoundingClientRect().height||n,T=Math.max(0,i.top+m-r.bottom),C=Math.max(0,m-c),g=Math.min(T,C);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const z=i.top-g,b=8,_=i.top+c/2,P=Math.min(Math.max(b,m-b),Math.max(b,_-z));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${P}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,s=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const r=getComputedStyle(o).overflowY;if(r!=="auto"&&r!=="scroll")continue;const n=o.getBoundingClientRect(),i=o instanceof HTMLElement?o.clientTop:0,d=o instanceof HTMLElement?o.clientHeight:n.height;if(d<=0)continue;const c=n.top+i;t=Math.max(t,c),s=Math.min(s,c+d)}return{top:t,bottom:Math.max(t,s)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.clearAnchorPlacementGeometry(),this.style.removeProperty("--_esp-flyout-max-block-size")}clearAnchorPlacementGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-anchor-block-size"),this.style.removeProperty("--_esp-flyout-anchor-marker-offset")}scheduleAnchorGeometrySync(){this.isConnected&&this.anchorGeometryFrame.schedule()}syncAnchorTracking(){if(!(this.isConnected&&this.open&&(!!this.anchor||this.fullHeight)&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorGeometryFrame.cancel(),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?V:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return w`
+`;let a=class extends A{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.pageOverlayRequested=!1,this.fullHeight=!1,this.matchSurface=!1,this.standalone=!1,this.scope="outermost",this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry(),this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorGeometryFrame=new B(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=L(),this.overlay=new H({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||this.pageOverlayRequested||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia($)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.addEventListener(k,this.boundFullHeightRequest),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.removeEventListener(k,this.boundFullHeightRequest),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(y().subscribe("show-flyout",this.boundShowRequest),y().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(y().unsubscribe("show-flyout",this.boundShowRequest),y().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent(f.FLYOUT_OPENED,{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent(f.FLYOUT_CLOSED,{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(M(e),e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.fullHeight=e.fullHeight??!1,this.returnFocusTo=e.returnFocusTo,this.show())}shouldHandleShowRequest(e){const t=v(this,"esp-page"),s=e.anchor??e.returnFocusTo;if(!s){if(!t)return!0;const i=this.getPageChain(t);return this.scope==="outermost"&&i[i.length-1]===t}const o=this.getPageChain(s);if(o.length===0)return t===null;const r=o.find(i=>this.hasNearestScopeFlyout(i)),n=r??o[o.length-1];return t!==n?!1:r?this.scope==="nearest":this.scope==="outermost"}getPageChain(e){const t=[];let s=e;for(;s;){const o=v(s,"esp-page");if(!o||t.includes(o))break;t.push(o),s=this.composedParent(o)}return t}hasNearestScopeFlyout(e){return Array.from(e.querySelectorAll("esp-flyout")).some(t=>!t.standalone&&t.scope==="nearest"&&v(t,"esp-page")===e)}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("fullHeight")||e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor")||e.has("fullHeight")||e.has("pageOverlayRequested"))&&this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=v(this,"esp-page"),t=this.anchor?this.getPageChain(this.anchor):[],s=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!o){this.clearAnchorGeometry();return}const r=this.getVisibleBlockBounds(),n=Math.max(0,r.bottom-r.top);if(this.setGeometryProperty("--_esp-flyout-max-block-size",`${n}px`),this.fullHeight){this.clearAnchorPlacementGeometry();return}if(!this.anchor||!e||!t.includes(e)||!s){this.clearAnchorGeometry();return}const i=this.anchor.getBoundingClientRect(),d=Math.max(0,i.top-s.getBoundingClientRect().top),c=Number.isFinite(i.height)?i.height:0;this.setGeometryProperty("--_esp-flyout-anchor-offset",`${d}px`),this.setGeometryProperty("--_esp-flyout-anchor-block-size",`${c}px`);const m=o.getBoundingClientRect().height||n,T=Math.max(0,i.top+m-r.bottom),C=Math.max(0,m-c),g=Math.min(T,C);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const _=i.top-g,b=8,z=i.top+c/2,P=Math.min(Math.max(b,m-b),Math.max(b,z-_));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${P}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,s=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const r=getComputedStyle(o).overflowY;if(r!=="auto"&&r!=="scroll")continue;const n=o.getBoundingClientRect(),i=o instanceof HTMLElement?o.clientTop:0,d=o instanceof HTMLElement?o.clientHeight:n.height;if(d<=0)continue;const c=n.top+i;t=Math.max(t,c),s=Math.min(s,c+d)}return{top:t,bottom:Math.max(t,s)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.clearAnchorPlacementGeometry(),this.style.removeProperty("--_esp-flyout-max-block-size")}clearAnchorPlacementGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-anchor-block-size"),this.style.removeProperty("--_esp-flyout-anchor-marker-offset")}scheduleAnchorGeometrySync(){this.isConnected&&this.anchorGeometryFrame.schedule()}syncAnchorTracking(){if(!(this.isConnected&&this.open&&(!!this.anchor||this.fullHeight)&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorGeometryFrame.cancel(),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?V:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return w`
       <div class="vellum" aria-hidden="true" @click=${()=>this.close("vellum")}></div>
       <div
         class=${F({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
@@ -87,7 +87,10 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
         border-start-end-radius: var(--esp-flyout-radius, var(--esp-size-border-radius));
         border-end-end-radius: var(--esp-flyout-radius, var(--esp-size-border-radius));
         box-shadow: var(--esp-flyout-shadow, none);
-        font-family: var(--esp-font-body);
+        font-family: var(
+          --_esp-font-body-effective,
+          var(--esp-font-body, var(--_esp-font-body-fallback))
+        );
         color: var(--esp-color-text);
 
         &.anchored {

package/dist/font-picker/esp-font-picker.d.ts

@@ -38,6 +38,7 @@ export declare const getGoogleFonts: () => Promise<Array<GoogleFont>>;
  * on picker items to match the preview `@font-face` name.
  */
 export declare const previewFontFamily: (family: string) => string;
+export declare const getFontPreviewFamily: (font: FontPickerFont) => string;
 /**
  * Font picker component backed by the Google Fonts catalog by default.
  *

package/dist/font-picker/esp-font-picker.js

@@ -1,9 +1,9 @@
-var u=function(t,e,o,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,o):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(t,e,o,n);else for(var c=t.length-1;c>=0;c--)(l=t[c])&&(s=(i<3?l(s):i>3?l(e,o,s):l(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import"../pickers/esp-pick-one.js";import{customElement as $,property as m,state as G}from"lit/decorators.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{html as A}from"lit";const w=[{family:"Arial / Helvetica",stack:"Arial, Helvetica, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Georgia / Times New Roman",stack:'Georgia, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"Verdana / Geneva",stack:"Verdana, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Tahoma / Geneva",stack:"Tahoma, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Trebuchet MS",stack:'"Trebuchet MS", Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"Courier New",stack:'"Courier New", Courier, monospace',category:"monospace",kind:"web-safe"},{family:"System Sans",stack:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"System Serif",stack:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"System Monospace",stack:'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Courier New", monospace',category:"monospace",kind:"web-safe"}];let f,p=!1;const N=async()=>{if(f)return f;if(p){for(;!f;)await new Promise(n=>setTimeout(n,100));return f}p=!0;const t=document.getElementsByTagName("esp-root")[0];if(!t)throw new Error("<esp-font-picker> requires an <esp-root> ancestor. Wrap your application in <esp-root> to use the font picker.");const e=t.fontDefinitionsUrl||`${t.fontCSSRoot}font-definitions.json`,o=await fetch(e);if(!o.ok)throw p=!1,new Error(`Failed to load font definitions from ${e} (${o.status}). Run 'npm run build-fonts' to generate the font catalog.`);return f=await o.json(),f},k="esp-preview-",V=t=>`${k}${t}`,d=new Map,g=async t=>{if(d.has(t))return!0;try{const e=document.getElementsByTagName("esp-root")[0];if(!e)return!1;const o=t.replaceAll(" ","-"),n=await fetch(`${e.fontCSSRoot}${o}.css`);if(!n.ok)return!1;let i=await n.text();i=i.replace(/font-family:\s*'([^']+)'/g,(l,c)=>`font-family: '${k}${c}'`);const s=document.createElement("style");return s.textContent=i,s.dataset.font=t,document.head.appendChild(s),d.set(t,s),!0}catch(e){return console.warn(`Failed to load CSS for font ${t}:`,e),!1}},F=t=>{const e=d.get(t);e&&(e.remove(),d.delete(t))},v="data-esp-font-picker",I="data-esp-font-picker-root",b=t=>t.closest("esp-root"),C=t=>b(t)?.correlationId??"",R=(t,e)=>`link[${v}="${CSS.escape(t)}"][${I}="${CSS.escape(e)}"]`,S=(t,e)=>{if(!e)return;const o=b(t),n=o?.correlationId??"";if(o?.googleFontLoading==="none"){h(t,e);return}if(document.head.querySelector(R(e,n)))return;const i=encodeURIComponent(e),s=document.createElement("link");s.rel="stylesheet",s.href=`https://fonts.googleapis.com/css2?family=${i}&display=swap`,s.setAttribute(v,e),s.setAttribute(I,n),document.head.appendChild(s)},h=(t,e)=>{if(!e)return;const o=C(t);if(Array.from(document.getElementsByTagName("esp-font-picker")).some(s=>C(s)===o&&s.fontSource==="google"&&s.value===e))return;document.head.querySelector(R(e,o))?.remove()},_=t=>t.kind!=="web-safe",y=t=>_(t)?t.family:t.stack,U=t=>_(t)?`${V(t.family)}, "${t.family}"`:t.stack,E=(t,e)=>t.filter(o=>{switch(e){case"not-display":return o.category!=="display";default:return o.category===e}});let r=class extends L{constructor(){super(...arguments),this.loadedFonts=new Set,this.formItemDescription=null,this.formItemLabel=null,this._rangeGeneration=0,this._initGeneration=0,this._fontsReady=Promise.resolve(),this.fonts=[],this.category=null,this.fontSource="google",this.value="",this.placeholder="Choose a font...",this.handleItemsInViewEvent=e=>{e.stopPropagation(),this.handleItemsInView(e.detail)}}focus(){this.shadowRoot?.querySelector("esp-pick-one")?.focus()}setFormItemDescription(e){this.formItemDescription=e,this.syncFormItemDescription()}setFormItemLabel(e){this.formItemLabel=e,this.syncFormItemDescription()}syncFormItemDescription(){const e=this.shadowRoot?.querySelector("esp-pick-one");e?.setFormItemDescription?.(this.formItemDescription),e?.setFormItemLabel?.(this.formItemLabel)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this._fontsReady,e}firstUpdated(e){super.firstUpdated(e),this._fontsReady=this.initFonts()}updated(e){super.updated(e),this.syncFormItemDescription();const o=e.has("fontSource")&&e.get("fontSource")!==void 0,n=e.has("category")&&e.get("category")!==void 0;if(o||n){if(e.get("fontSource")==="google"&&this.fontSource==="web-safe"){const i=this.value;for(const s of this.loadedFonts)F(s);this.loadedFonts.clear(),this.value="",i&&h(this,i)}this._fontsReady=this.initFonts()}if(e.has("value")&&this.value&&this.fontSource==="google"){const i=e.get("value");i!==this.value&&this.ensureFontLoaded(this.value,i)}}async ensureFontLoaded(e,o){await g(e)&&this.loadedFonts.add(e),this.value===e&&(S(this,e),o&&o!==e&&h(this,o))}async initFonts(){const e=++this._initGeneration;if(this.fontSource==="web-safe"){this.fonts=this.category?E(w,this.category):w;return}const o=await N();if(!(e!==this._initGeneration||this.fontSource!=="google")&&(this.fonts=this.category?E(o,this.category):o,this.value&&this.fonts.some(n=>y(n)===this.value))){const n=this.value;if(await g(n)){if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==n){F(n);return}this.loadedFonts.add(n)}if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==n)return;S(this,n)}}async handleItemsInView(e){if(this.fontSource==="web-safe")return;const o=++this._rangeGeneration,n=3,i=e.items??[],s=new Set,l=Math.max(0,e.first),c=Math.min(e.last+n,i.length);for(let a=l;a<c;a++)s.add(i[a].value);for(const a of s)this.loadedFonts.has(a)||await g(a)&&this.loadedFonts.add(a);if(o!==this._rangeGeneration)return;const T=new Set(Array.from(document.getElementsByTagName("esp-font-picker")).map(a=>a.value).filter(Boolean));for(const a of this.loadedFonts)T.has(a)||s.has(a)||(this.loadedFonts.delete(a),F(a))}render(){return A`<esp-pick-one
+var u=function(t,e,o,s){var n=arguments.length,i=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,o,s);else for(var c=t.length-1;c>=0;c--)(l=t[c])&&(i=(n<3?l(i):n>3?l(e,o,i):l(e,o))||i);return n>3&&i&&Object.defineProperty(e,o,i),i};import"../pickers/esp-pick-one.js";import{customElement as E,property as m,state as G}from"lit/decorators.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{html as N}from"lit";import{getFallbackFont as V,removeRuntimeGoogleFontLink as A,syncRuntimeGoogleFontLink as x}from"../shared/font-helpers.js";import{fontFallbackAliases as D}from"../shared/font-plan.js";const w=[{family:"Arial / Helvetica",stack:"Arial, Helvetica, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Georgia / Times New Roman",stack:'Georgia, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"Verdana / Geneva",stack:"Verdana, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Tahoma / Geneva",stack:"Tahoma, Geneva, sans-serif",category:"sans-serif",kind:"web-safe"},{family:"Trebuchet MS",stack:'"Trebuchet MS", Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"Courier New",stack:'"Courier New", Courier, monospace',category:"monospace",kind:"web-safe"},{family:"System Sans",stack:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',category:"sans-serif",kind:"web-safe"},{family:"System Serif",stack:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',category:"serif",kind:"web-safe"},{family:"System Monospace",stack:'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Courier New", monospace',category:"monospace",kind:"web-safe"}];let f,p=!1;const U=async()=>{if(f)return f;if(p){for(;!f;)await new Promise(s=>setTimeout(s,100));return f}p=!0;const t=document.getElementsByTagName("esp-root")[0];if(!t)throw new Error("<esp-font-picker> requires an <esp-root> ancestor. Wrap your application in <esp-root> to use the font picker.");const e=t.fontDefinitionsUrl||`${t.fontCSSRoot}font-definitions.json`,o=await fetch(e);if(!o.ok)throw p=!1,new Error(`Failed to load font definitions from ${e} (${o.status}). Run 'npm run build-fonts' to generate the font catalog.`);return f=await o.json(),f},k="esp-preview-",B=t=>`${k}${t}`,d=new Map,g=async t=>{if(d.has(t))return!0;try{const e=document.getElementsByTagName("esp-root")[0];if(!e)return!1;const o=t.replaceAll(" ","-"),s=await fetch(`${e.fontCSSRoot}${o}.css`);if(!s.ok)return!1;let n=await s.text();n=n.replace(/font-family:\s*'([^']+)'/g,(l,c)=>`font-family: '${k}${c}'`);const i=document.createElement("style");return i.textContent=n,i.dataset.font=t,document.head.appendChild(i),d.set(t,i),!0}catch(e){return console.warn(`Failed to load CSS for font ${t}:`,e),!1}},F=t=>{const e=d.get(t);e&&(e.remove(),d.delete(t))},v="data-esp-font-picker",b="data-esp-font-picker-root",I=t=>t.closest("esp-root"),R=t=>I(t)?.correlationId??"",M=(t,e)=>`link[${v}="${CSS.escape(t)}"][${b}="${CSS.escape(e)}"]`,C=(t,e)=>`picker:${e}:${t}`,S=(t,e)=>{if(!e)return;const o=I(t),s=o?.correlationId??"";if(o?.googleFontLoading==="none"){h(t,e);return}x({owner:C(e,s),family:e,enabled:!0,attributes:{[v]:e,[b]:s}})},h=(t,e)=>{if(!e)return;const o=R(t);Array.from(document.getElementsByTagName("esp-font-picker")).some(n=>R(n)===o&&n.fontSource==="google"&&n.value===e)||(A(C(e,o)),document.head.querySelector(M(e,o))?.remove())},_=t=>t.kind!=="web-safe",y=t=>_(t)?t.family:t.stack,O=t=>{if(!_(t))return t.stack;const e=D(t.family,400,t.category);return[`"${t.family}"`,...e,`"${B(t.family)}"`,V(t.category)].join(", ")},$=(t,e)=>t.filter(o=>{switch(e){case"not-display":return o.category!=="display";default:return o.category===e}});let r=class extends L{constructor(){super(...arguments),this.loadedFonts=new Set,this.formItemDescription=null,this.formItemLabel=null,this._rangeGeneration=0,this._initGeneration=0,this._fontsReady=Promise.resolve(),this.fonts=[],this.category=null,this.fontSource="google",this.value="",this.placeholder="Choose a font...",this.handleItemsInViewEvent=e=>{e.stopPropagation(),this.handleItemsInView(e.detail)}}focus(){this.shadowRoot?.querySelector("esp-pick-one")?.focus()}setFormItemDescription(e){this.formItemDescription=e,this.syncFormItemDescription()}setFormItemLabel(e){this.formItemLabel=e,this.syncFormItemDescription()}syncFormItemDescription(){const e=this.shadowRoot?.querySelector("esp-pick-one");e?.setFormItemDescription?.(this.formItemDescription),e?.setFormItemLabel?.(this.formItemLabel)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this._fontsReady,e}firstUpdated(e){super.firstUpdated(e),this._fontsReady=this.initFonts()}updated(e){super.updated(e),this.syncFormItemDescription();const o=e.has("fontSource")&&e.get("fontSource")!==void 0,s=e.has("category")&&e.get("category")!==void 0;if(o||s){if(e.get("fontSource")==="google"&&this.fontSource==="web-safe"){const n=this.value;for(const i of this.loadedFonts)F(i);this.loadedFonts.clear(),this.value="",n&&h(this,n)}this._fontsReady=this.initFonts()}if(e.has("value")&&this.value&&this.fontSource==="google"){const n=e.get("value");n!==this.value&&this.ensureFontLoaded(this.value,n)}}async ensureFontLoaded(e,o){await g(e)&&this.loadedFonts.add(e),this.value===e&&(S(this,e),o&&o!==e&&h(this,o))}async initFonts(){const e=++this._initGeneration;if(this.fontSource==="web-safe"){this.fonts=this.category?$(w,this.category):w;return}const o=await U();if(!(e!==this._initGeneration||this.fontSource!=="google")&&(this.fonts=this.category?$(o,this.category):o,this.value&&this.fonts.some(s=>y(s)===this.value))){const s=this.value;if(await g(s)){if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==s){F(s);return}this.loadedFonts.add(s)}if(e!==this._initGeneration||this.fontSource!=="google"||this.value!==s)return;S(this,s)}}async handleItemsInView(e){if(this.fontSource==="web-safe")return;const o=++this._rangeGeneration,s=3,n=e.items??[],i=new Set,l=Math.max(0,e.first),c=Math.min(e.last+s,n.length);for(let a=l;a<c;a++)i.add(n[a].value);for(const a of i)this.loadedFonts.has(a)||await g(a)&&this.loadedFonts.add(a);if(o!==this._rangeGeneration)return;const T=new Set(Array.from(document.getElementsByTagName("esp-font-picker")).map(a=>a.value).filter(Boolean));for(const a of this.loadedFonts)T.has(a)||i.has(a)||(this.loadedFonts.delete(a),F(a))}render(){return N`<esp-pick-one
       typeahead
-      .pickerItems=${this.fonts.map(e=>({text:e.family,value:y(e),selected:this.value===y(e),styles:{fontFamily:U(e)}}))}
+      .pickerItems=${this.fonts.map(e=>({text:e.family,value:y(e),selected:this.value===y(e),styles:{fontFamily:O(e)}}))}
       .value=${this.value}
       .placeholder=${this.placeholder}
       @esp-picker-menu-range-changed=${this.handleItemsInViewEvent}
-      @esp-value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.emitValueChanged(void 0);return}const n=this.fonts.find(i=>y(i)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.emitValueChanged(n)}}
+      @esp-value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.emitValueChanged(void 0);return}const s=this.fonts.find(n=>y(n)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.emitValueChanged(s)}}
     >
-    </esp-pick-one>`}};u([G()],r.prototype,"fonts",void 0),u([m({attribute:"category",type:String})],r.prototype,"category",void 0),u([m({attribute:"font-source",type:String})],r.prototype,"fontSource",void 0),u([m({type:String})],r.prototype,"value",void 0),u([m({type:String})],r.prototype,"placeholder",void 0),r=u([$("esp-font-picker")],r);const q=()=>{f=void 0,p=!1;for(const t of document.head.querySelectorAll("style[data-font]"))t.remove();d.clear();for(const t of document.head.querySelectorAll(`link[${v}]`))t.remove()};export{r as EspalierFontPicker,w as WEB_SAFE_FONTS,N as getGoogleFonts,V as previewFontFamily,q as resetFontCache};
+    </esp-pick-one>`}};u([G()],r.prototype,"fonts",void 0),u([m({attribute:"category",type:String})],r.prototype,"category",void 0),u([m({attribute:"font-source",type:String})],r.prototype,"fontSource",void 0),u([m({type:String})],r.prototype,"value",void 0),u([m({type:String})],r.prototype,"placeholder",void 0),r=u([E("esp-font-picker")],r);const J=()=>{f=void 0,p=!1;for(const t of document.head.querySelectorAll("style[data-font]"))t.remove();d.clear();for(const t of document.head.querySelectorAll(`link[${v}]`))t.remove()};export{r as EspalierFontPicker,w as WEB_SAFE_FONTS,O as getFontPreviewFamily,U as getGoogleFonts,B as previewFontFamily,J as resetFontCache};

package/dist/footer/esp-footer-link-group.js

@@ -1,13 +1,13 @@
-var d=function(t,o,r,n){var s=arguments.length,e=s<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,r):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,o,r,n);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(e=(s<3?l(e):s>3?l(o,r,e):l(o,r))||e);return s>3&&e&&Object.defineProperty(o,r,e),e};import{css as v,html as f,nothing as p}from"lit";import{customElement as g,property as u}from"lit/decorators.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";const h="esp-footer-link-group-heading";let i=class extends c{constructor(){super(...arguments),this.heading=""}render(){return f`
+var f=function(t,o,r,n){var s=arguments.length,e=s<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,r):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,o,r,n);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(e=(s<3?l(e):s>3?l(o,r,e):l(o,r))||e);return s>3&&e&&Object.defineProperty(o,r,e),e};import{css as h,html as d,nothing as p}from"lit";import{customElement as g,property as u}from"lit/decorators.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";const v="esp-footer-link-group-heading";let i=class extends c{constructor(){super(...arguments),this.heading=""}render(){return d`
       <nav
         part="nav"
-        aria-labelledby=${this.heading?h:p}
+        aria-labelledby=${this.heading?v:p}
         aria-label=${this.heading?p:"Footer links"}
       >
-        ${this.heading?f`<h2 part="heading" id=${h}>${this.heading}</h2>`:p}
+        ${this.heading?d`<h2 part="heading" id=${v}>${this.heading}</h2>`:p}
         <div part="links" class="links"><slot></slot></div>
       </nav>
-    `}};i.styles=[...c.styles,v`
+    `}};i.styles=[...c.styles,h`
       :host {
         display: block;
         min-inline-size: 0;
@@ -23,7 +23,13 @@ var d=function(t,o,r,n){var s=arguments.length,e=s<3?o:n===null?n=Object.getOwnP
       h2 {
         margin: 0;
         color: var(--esp-footer-heading-color, var(--esp-color-headings));
-        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-size: var(--esp-type-normal);
         font-weight: var(--esp-font-weight-headings);
         line-height: 1.25;
@@ -54,4 +60,4 @@ var d=function(t,o,r,n){var s=arguments.length,e=s<3?o:n===null?n=Object.getOwnP
         outline: var(--esp-footer-focus-outline, 2px solid var(--esp-color-link));
         outline-offset: 3px;
       }
-    `],d([u({type:String})],i.prototype,"heading",void 0),i=d([g("esp-footer-link-group")],i);export{i as EspalierFooterLinkGroup};
+    `],f([u({type:String})],i.prototype,"heading",void 0),i=f([g("esp-footer-link-group")],i);export{i as EspalierFooterLinkGroup};