@taprootio/espalier 4.2.0 → 4.4.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/cli/theme-check.js

@@ -1,2 +1,2 @@
-import{encodeTheme as h,validateThemePair as p}from"../shared/theme.js";import{themeFitReportSuite as m}from"../shared/theme-fit-report.js";const u="usage: espalier theme check <theme.json> [--json] [--expect <fit.json>] [--update-expect <fit.json>]";function S(t,e){const[n,o,...r]=t;if(n!=="theme"||o!=="check")return e.error(u),2;const i=g(r,e);return i?k(i,e):2}function g(t,e){const n={file:"",json:!1};for(let o=0;o<t.length;o+=1){const r=t[o];if(r==="--json")n.json=!0;else if(r==="--expect"||r==="--update-expect"){const i=t[o+1];if(i===void 0)return e.error(`${r} requires a file path. ${u}`),null;r==="--expect"?n.expect=i:n.updateExpect=i,o+=1}else if(!r.startsWith("--")&&n.file==="")n.file=r;else return e.error(`Unknown argument "${r}". ${u}`),null}return n.file===""?(e.error(u),null):n.expect!==void 0&&n.updateExpect!==void 0?(e.error(`--expect checks the committed fit tables and --update-expect rewrites them \u2014 pick one. ${u}`),null):n}function $(t,e){let n;try{n=e.readFile(t)}catch(i){return e.error(`Cannot read ${t}: ${i instanceof Error?i.message:String(i)}`),null}let o;try{o=JSON.parse(n)}catch(i){return e.error(`${t} is not JSON: ${i instanceof Error?i.message:String(i)}`),null}if(typeof o!="object"||o===null||Array.isArray(o))return e.error(`${t} must contain a theme object.`),null;const r=o;if("light"in r||"dark"in r){for(const i of["light","dark"]){const s=r[i];if(s!==void 0&&(typeof s!="object"||s===null||Array.isArray(s)))return e.error(`${t}: "${i}" must be a theme object.`),null}return{light:r.light??{},dark:r.dark??{}}}return{light:r,dark:r}}function k(t,e){const n=$(t.file,e);if(!n)return 2;const o=p(h(n.light),h(n.dark));for(const s of o.warnings)e.error(`warning: ${s}`);if(!o.valid){for(const s of o.errors)e.error(`error: ${s}`);return e.error(`${t.file}: ${o.errors.length} validation error(s).`),1}const r=m(n.light,n.dark),i=t.json?e.error:e.log;if(t.updateExpect!==void 0){try{e.writeFile(t.updateExpect,`${JSON.stringify(r,null,2)}
-`)}catch(s){return e.error(`Cannot write ${t.updateExpect}: ${s instanceof Error?s.message:String(s)}`),2}return i(`Wrote fit tables to ${t.updateExpect}.`),t.json&&e.log(JSON.stringify(r,null,2)),0}if(t.expect!==void 0){let s;try{s=e.readFile(t.expect)}catch{return e.error(`Expected fit tables not found at ${t.expect} \u2014 create them with --update-expect ${t.expect}.`),2}let f;try{f=JSON.parse(s)}catch{return e.error(`${t.expect} is not JSON.`),2}if(!y(f))return e.error(`${t.expect} is not a fit-table suite \u2014 regenerate it with --update-expect ${t.expect}.`),2;const a=x(f,r);if(a.length>0){for(const l of a)e.error(`drift: ${l}`);return e.error(`Fit tables drifted from ${t.expect} (${a.length} difference(s)). Review, then refresh deliberately with --update-expect.`),1}i(`Fit tables match ${t.expect}.`)}return t.json?(e.log(JSON.stringify(r,null,2)),0):(b(r,e),0)}function y(t){if(typeof t!="object"||t===null||Array.isArray(t))return!1;const e=t;if(!Array.isArray(e.surfaces)||!e.surfaces.every(n=>typeof n=="string"))return!1;for(const n of["light","dark"]){const o=e[n];if(!Array.isArray(o))return!1;for(const r of o){if(typeof r!="object"||r===null||Array.isArray(r))return!1;const i=r;if(typeof i.surface!="string"||!Array.isArray(i.tokens))return!1;for(const s of i.tokens){if(typeof s!="object"||s===null||Array.isArray(s))return!1;const f=s;if(typeof f.token!="string"||typeof f.resolved!="string")return!1}}}return!0}function x(t,e){const n=[];if(JSON.stringify(t)===JSON.stringify(e))return n;for(const o of["light","dark"]){const r=new Map((t[o]??[]).map(s=>[s.surface,s])),i=new Map((e[o]??[]).map(s=>[s.surface,s]));for(const s of new Set([...r.keys(),...i.keys()])){const f=r.get(s),a=i.get(s);if(!f||!a){n.push(`${o}/${s}: surface ${f?"removed":"added"}`);continue}const l=new Map(f.tokens.map(c=>[c.token,c]));for(const c of a.tokens){const d=l.get(c.token);d?d.resolved!==c.resolved&&n.push(`${o}/${s}/${c.token}: ${d.resolved} \u2192 ${c.resolved}`):n.push(`${o}/${s}/${c.token}: token added`),l.delete(c.token)}for(const c of l.keys())n.push(`${o}/${s}/${c}: token removed`)}}return n.length===0&&n.push("fit-table metadata changed (lints or provenance marks)"),n}function b(t,e){for(const o of["light","dark"])for(const r of t[o]){e.log(j(o,r));for(const i of r.lints)e.log(`  lint(${i.id}): ${i.message}`)}const n=[...t.light,...t.dark].reduce((o,r)=>o+r.lints.length,0);e.log(`Checked ${t.surfaces.length} surface(s) \xD7 2 schemes \u2014 `+(n===0?"no lints.":`${n} lint(s), listed above.`))}function j(t,e){const n=e.adjustedTokens.length===0?"contrast enforcement moved nothing":`contrast enforcement moved ${e.adjustedTokens.join(", ")}`,o=e.tokens.filter(i=>i.explicit==="inherited").length,r=o===0?"":`; ${o} inherited explicit pin(s) \u2014 see the fit tables`;return`${t}/${e.surface}: ${e.tokens.length} tokens, ${n}${r}.`}export{S as runEspalierCli};
+import{encodeTheme as D,isObjectRecord as p,isSemanticColorName as P,validateThemePair as G}from"../shared/theme.js";import{THEME_FIT_ANCHOR_FIELDS as C,THEME_FIT_APCA_FIELDS as N,THEME_FIT_DATA_PALETTE_LINT_FIELDS as M,THEME_FIT_DATA_PALETTE_LINT_IDS as X,THEME_FIT_EXPLICIT_VALUES as Y,THEME_FIT_LINT_FIELDS as R,THEME_FIT_LINT_IDS as B,THEME_FIT_LINT_SEVERITIES as Q,THEME_FIT_REPORT_FIELDS as _,THEME_FIT_SUITE_FIELDS as k,THEME_FIT_TOKEN_FIELDS as x,themeFitReportSuite as Z}from"../shared/theme-fit-report.js";import{COLOR_VISION_SIMULATIONS as v,DATA_SERIES_KEYS as w,isPaletteCollisionDescription as ee}from"../shared/data-colors.js";import{isSafeKey as te}from"../shared/unsafe-keys.js";const A="usage: espalier theme check <theme.json> [--json] [--expect <fit.json>] [--update-expect <fit.json>]";function Me(e,t){const[r,i,...n]=e;if(r!=="theme"||i!=="check")return t.error(A),2;const s=re(n,t);return s?ie(s,t):2}function re(e,t){const r={file:"",json:!1};for(let i=0;i<e.length;i+=1){const n=e[i];if(n==="--json")r.json=!0;else if(n==="--expect"||n==="--update-expect"){const s=e[i+1];if(s===void 0)return t.error(`${n} requires a file path. ${A}`),null;n==="--expect"?r.expect=s:r.updateExpect=s,i+=1}else if(!n.startsWith("--")&&r.file==="")r.file=n;else return t.error(`Unknown argument "${n}". ${A}`),null}return r.file===""?(t.error(A),null):r.expect!==void 0&&r.updateExpect!==void 0?(t.error(`--expect checks the committed fit tables and --update-expect rewrites them \u2014 pick one. ${A}`),null):r}function ne(e,t){let r;try{r=t.readFile(e)}catch(s){return t.error(`Cannot read ${e}: ${s instanceof Error?s.message:String(s)}`),null}let i;try{i=JSON.parse(r)}catch(s){return t.error(`${e} is not JSON: ${s instanceof Error?s.message:String(s)}`),null}if(typeof i!="object"||i===null||Array.isArray(i))return t.error(`${e} must contain a theme object.`),null;const n=i;if("light"in n||"dark"in n){for(const s of["light","dark"]){const o=n[s];if(o!==void 0&&(typeof o!="object"||o===null||Array.isArray(o)))return t.error(`${e}: "${s}" must be a theme object.`),null}return{light:n.light??{},dark:n.dark??{}}}return{light:n,dark:n}}function ie(e,t){const r=ne(e.file,t);if(!r)return 2;const i=G(D(r.light),D(r.dark));if(!i.valid){for(const c of i.warnings)t.error(`warning: ${c}`);for(const c of i.errors)t.error(`error: ${c}`);return t.error(`${e.file}: ${i.errors.length} validation error(s).`),1}const n=Z(r.light,r.dark);for(const c of i.warnings)Ie(c,n)||t.error(`warning: ${c}`);const s=Ae(n),o=e.json?t.error:t.log;if(e.updateExpect!==void 0){try{t.writeFile(e.updateExpect,`${JSON.stringify(n,null,2)}
+`)}catch(c){return t.error(`Cannot write ${e.updateExpect}: ${c instanceof Error?c.message:String(c)}`),2}o(`Wrote fit tables to ${e.updateExpect}.`)}if(e.expect!==void 0){let c;try{c=t.readFile(e.expect)}catch{return t.error(`Expected fit tables not found at ${e.expect} \u2014 create them with --update-expect ${e.expect}.`),2}let a;try{a=JSON.parse(c)}catch{return t.error(`${e.expect} is not JSON.`),2}if(se(a))return t.error(`${e.expect} was written by espalier \u22644.2.0 \u2014 regenerate it with --update-expect ${e.expect}.`),2;if(!oe(a))return t.error(`${e.expect} is not a fit-table suite \u2014 regenerate it with --update-expect ${e.expect}.`),2;const f=le(a,n);if(f.length>0){s>0&&we(n,s,t);for(const u of f)t.error(`drift: ${u}`);return t.error(`Fit tables drifted from ${e.expect} (${f.length} difference(s)). Review, then refresh deliberately with --update-expect.`),1}o(`Fit tables match ${e.expect}.`)}return e.json?(t.log(JSON.stringify(n,null,2)),s>0?1:0):(xe(n,s,t),s>0?1:0)}function oe(e){if(!p(e)||!k.every(({field:r,kind:i})=>T(e[String(r)],i)))return!1;const t=e;if(!I(t.surfaces))return!1;for(const r of["light","dark"]){const n=t.paletteLints[r].map(g);if(!I(n))return!1;const s=t[r],o=new Set;for(const c of s){if(!pe(c,r)||!t.surfaces.includes(c.surface)||o.has(c.surface))return!1;o.add(c.surface)}}return!0}function se(e){return p(e)&&H(e.surfaces)&&Array.isArray(e.light)&&Array.isArray(e.dark)&&!("dataPalette"in e)&&!("paletteLints"in e)}function ce(e){return typeof e=="number"&&Number.isFinite(e)}function H(e){return Array.isArray(e)&&e.every(t=>typeof t=="string")}function I(e){return new Set(e).size===e.length}function ae(e){return p(e)&&M.every(({field:t,kind:r})=>T(e[String(t)],r))}function fe(e){return p(e)&&R.every(({field:t,kind:r})=>T(e[String(t)],r))}function ue(e){return p(e)&&x.every(({field:t,kind:r})=>T(e[String(t)],r))}function T(e,t){switch(t){case"anchor":return e===void 0||V(e,C);case"anchor-record":return p(e)&&Object.keys(e).every(te)&&Object.values(e).every(r=>typeof r=="string");case"apca":return e===void 0||V(e,N);case"boolean":return typeof e=="boolean";case"data-palette-record":return p(e)?["light","dark"].every(r=>{const i=e[r];return p(i)&&w.every(n=>typeof i[n]=="string")}):!1;case"explicit":return e===void 0||Y.includes(e);case"fit-lint-id":return B.includes(e);case"lint-array":return Array.isArray(e)&&e.every(fe);case"message":case"string":return typeof e=="string";case"number":return ce(e);case"palette-lint-id":return X.includes(e);case"palette-lint-record":return p(e)&&["light","dark"].every(r=>Array.isArray(e[r])&&e[r].every(ae));case"report-array":return Array.isArray(e);case"scheme":return e==="light"||e==="dark";case"semantic":return P(e);case"semantic-array":return Array.isArray(e)&&e.every(P);case"series-pair":return de(e);case"simulation":return v.includes(e);case"string-array":return H(e);case"token-array":return Array.isArray(e)&&e.every(ue);case"warning":return Q.includes(e);default:{const r=t;return!1}}}function V(e,t){return p(e)&&t.every(({field:r,kind:i})=>T(e[String(r)],i))}function de(e){if(!Array.isArray(e)||e.length!==2)return!1;const t=w.indexOf(e[0]),r=w.indexOf(e[1]);return t>=0&&r>t}function pe(e,t){if(!p(e)||!_.every(({field:i,kind:n})=>T(e[String(i)],n)))return!1;const r=e;return r.scheme!==t?!1:I(r.tokens.map(i=>i.token))&&I(r.adjustedTokens)&&I(r.lints.map(i=>i.id))}function le(e,t){const r=[];for(const n of k)n.compared&&me(r,n,e,t);return(h(z(e))!==h(z(t))||r.length===0&&h(e)!==h(t))&&r.push("fit tables differ outside compared fields"),r}function me(e,t,r,i){const{field:n,kind:s}=t;if(s==="string-array"){const o=r[n],c=i[n];U(e,String(n),o,c),E(e,String(n),o,c);return}if(s==="data-palette-record"){const o=r[n],c=i[n];for(const a of["light","dark"])for(const f of w)K(e,`${a}/${String(n)}/${f}`,o[a][f],c[a][f]);return}if(s==="palette-lint-record"){const o=r[n],c=i[n];for(const a of["light","dark"])ke(e,a,String(n),o[a],c[a]),E(e,`${a}/${String(n)}`,o[a].map(g),c[a].map(g));return}if(s==="report-array"&&(n==="light"||n==="dark")){he(e,n,r[n],i[n]);return}F(e,"fit tables",String(n),r[n],i[n],s)}function he(e,t,r,i){const n=new Map(r.map(o=>[o.surface,o])),s=new Map(i.map(o=>[o.surface,o]));E(e,`${t}/reports`,r.map(o=>o.surface),i.map(o=>o.surface));for(const o of L(n.keys(),s.keys())){const c=n.get(o),a=s.get(o),f=`${t}/${o}`;if(!c||!a){e.push(`${f}: surface ${c?"removed":"added"}`);continue}ge(e,f,c,a)}}function ge(e,t,r,i){for(const n of _){const{compared:s,field:o,kind:c}=n;if(!(!s||o==="scheme"||o==="surface")){if(c==="anchor-record"){Te(e,`${t}/${String(o)}`,r[o],i[o]);continue}if(c==="semantic-array"){const a=r[o],f=i[o];U(e,`${t}/${String(o)}`,a,f),E(e,`${t}/${String(o)}`,a,f);continue}if(c==="lint-array"){const a=r[o],f=i[o];Se(e,t,String(o),a,f),E(e,`${t}/${String(o)}`,a.map(u=>u.id),f.map(u=>u.id));continue}if(c==="token-array"){$e(e,t,String(o),r[o],i[o]);continue}F(e,t,String(o),r[o],i[o],c)}}}function $e(e,t,r,i,n){const s=new Map(i.map(a=>[a.token,a])),o=new Map(n.map(a=>[a.token,a]));E(e,`${t}/${r}`,i.map(a=>a.token),n.map(a=>a.token));const c=r==="tokens"?t:`${t}/${r}`;for(const a of L(s.keys(),o.keys())){const f=s.get(a),u=o.get(a),S=`${c}/${a}`;if(!f||!u){e.push(`${S}: token ${f?"removed":"added"}`);continue}ye(e,S,f,u)}}function ye(e,t,r,i){for(const{compared:n,field:s,kind:o}of x)if(!(!n||s==="token")){if(o==="anchor"){J(e,t,"anchor",r.anchor,i.anchor,C);continue}if(o==="apca"){J(e,t,"apca",r.apca,i.apca,N);continue}F(e,t,String(s),r[s],i[s],o)}}function J(e,t,r,i,n,s){const o=i,c=n;for(const{compared:a,field:f,kind:u}of s)a&&F(e,t,`${r}.${String(f)}`,o?.[f],c?.[f],u)}function Se(e,t,r,i,n){const s=new Map(i.map(c=>[c.id,c])),o=new Map(n.map(c=>[c.id,c]));for(const c of L(s.keys(),o.keys())){const a=s.get(c),f=o.get(c),u=`${t}/${r}/${c}`;if(!a||!f){e.push(`${u}: lint ${a?"removed":"added"}`);continue}for(const{compared:S,field:d,kind:b}of R)if(!(!S||d==="id")){if(b==="semantic-array"){Ee(e,u,String(d),a[d],f[d]);continue}F(e,u,String(d),a[d],f[d],b)}}}function ke(e,t,r,i,n){const s=new Map(i.map(c=>[g(c),c])),o=new Map(n.map(c=>[g(c),c]));for(const c of L(s.keys(),o.keys())){const a=s.get(c),f=o.get(c),u=`${t}/${r}/${c}`;if(!a||!f){e.push(`${u}: lint ${a?"removed":"added"}`);continue}for(const{compared:S,field:d,kind:b}of M)!S||d==="id"||d==="series"||d==="simulation"||F(e,u,String(d),a[d],f[d],b)}}function g(e){return`${e.id}/${e.series[0]}+${e.series[1]}/${e.simulation}`}function Te(e,t,r,i){for(const n of L(Object.keys(r),Object.keys(i)))K(e,`${t}/${n}`,r[n],i[n])}function U(e,t,r,i){const n=new Set(r),s=new Set(i);for(const o of L(n,s))n.has(o)!==s.has(o)&&e.push(`${t}/${o}: ${n.has(o)?"removed":"added"}`)}function E(e,t,r,i){const n=new Set(r),s=new Set(i),o=r.filter(a=>s.has(a)),c=i.filter(a=>n.has(a));o.some((a,f)=>a!==c[f])&&e.push(`${t}: order changed`)}function Ee(e,t,r,i,n){const s=Math.max(i.length,n.length);for(let o=0;o<s;o+=1)W(e,t,`${r}[${o}]`,i[o],n[o])}function K(e,t,r,i){r!==i&&e.push(`${t}: ${j(r)} \u2192 ${j(i)}`)}function W(e,t,r,i,n,s){if(!Object.is(i,n)){if(s==="message"){e.push(`${t}: message changed`);return}e.push(`${t}: ${r} ${j(i)} \u2192 ${j(n)}`)}}function Fe(e,t,r,i,n){h(i)!==h(n)&&e.push(`${t}: ${r} changed`)}function F(e,t,r,i,n,s){if(_e(s)){W(e,t,r,i,n,s);return}Fe(e,t,r,i,n)}const Le={anchor:!1,"anchor-record":!1,apca:!1,boolean:!0,"data-palette-record":!1,explicit:!0,"fit-lint-id":!0,"lint-array":!1,message:!0,number:!0,"palette-lint-id":!0,"palette-lint-record":!1,"report-array":!1,scheme:!0,semantic:!0,"semantic-array":!1,"series-pair":!1,simulation:!0,string:!0,"string-array":!1,"token-array":!1,warning:!0};function _e(e){return Le[e]===!0}function j(e){return e===void 0?"(absent)":e===""?'""':String(e)}function L(e,t){return[...new Set([...e,...t])].sort()}function h(e){return Array.isArray(e)?`[${e.map(h).join(",")}]`:p(e)?`{${Object.keys(e).sort().map(t=>`${JSON.stringify(t)}:${h(e[t])}`).join(",")}}`:JSON.stringify(e)??"undefined"}function z(e){const t=m(e,$(k)),r=["light","dark"];if(y(k,"dataPalette")){const i=m(e.dataPalette,r);for(const n of r)l(i,n,m(e.dataPalette[n],w));l(t,"dataPalette",i)}if(y(k,"paletteLints")){const i=m(e.paletteLints,r);for(const n of r)l(i,n,q(e.paletteLints[n],g,$(M)));l(t,"paletteLints",i)}for(const i of r){if(!y(k,i))continue;const n=O();for(const s of e[i]){const o=m(s,$(_));if(y(_,"tokens")){const c=O();for(const a of s.tokens){const f=m(a,$(x));a.anchor&&y(x,"anchor")&&l(f,"anchor",m(a.anchor,$(C))),a.apca&&y(x,"apca")&&l(f,"apca",m(a.apca,$(N))),l(c,a.token,f)}l(o,"tokens",c)}y(_,"lints")&&l(o,"lints",q(s.lints,c=>c.id,$(R))),l(n,s.surface,o)}l(t,i,n)}return t}function q(e,t,r){const i=O();for(const n of e)l(i,t(n),m(n,r));return i}function $(e){return e.filter(({compared:t})=>t).map(({field:t})=>t)}function y(e,t){return e.some(r=>r.field===t&&r.compared)}function m(e,t){const r=new Set(t.map(String)),i=O();for(const[n,s]of Object.entries(e))r.has(n)||(i[n]=s);return i}function O(){return Object.create(null)}function l(e,t,r){Object.keys(r).length>0&&(e[t]=r)}function xe(e,t,r){for(const i of["light","dark"]){for(const n of e.paletteLints[i])r.log(`  ${i} lint(${n.id}): ${n.message}`);for(const n of e[i]){r.log(be(i,n));for(const s of n.lints)r.log(`  lint(${s.id}): ${s.message}`)}}r.log(`Checked ${e.surfaces.length} surface(s) \xD7 2 schemes \u2014 `+(t===0?"no lints.":`${t} lint(s), listed above.`))}function we(e,t,r){r.error(`${t} theme lint(s) are standing while fit-table drift is present:`);for(const i of["light","dark"]){for(const n of e.paletteLints[i])r.error(`lint: ${i}/paletteLints/${g(n)}: ${n.message}`);for(const n of e[i])for(const s of n.lints)r.error(`lint: ${i}/${n.surface}/lints/${s.id}: ${s.message}`)}}function Ae(e){return[...e.light,...e.dark].reduce((r,i)=>r+i.lints.length,0)+e.paletteLints.light.length+e.paletteLints.dark.length}function Ie(e,t){return["light","dark"].some(r=>{const i=`${r}: `;if(!e.startsWith(i))return!1;const n=e.slice(i.length);return t.paletteLints[r].some(s=>ee(n,s))})}function be(e,t){const r=t.adjustedTokens.length===0?"contrast enforcement moved nothing":`contrast enforcement moved ${t.adjustedTokens.join(", ")}`,i=t.tokens.filter(s=>s.explicit==="inherited").length,n=i===0?"":`; ${i} inherited explicit pin(s) \u2014 see the fit tables`;return`${e}/${t.surface}: ${t.tokens.length} tokens, ${r}${n}.`}export{Me as runEspalierCli};

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.
  *