@taprootio/espalier 4.2.0 → 4.4.0

package/dist/slider/esp-slider.js

@@ -1,4 +1,4 @@
-var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(d,t,e,i);else for(var h=d.length-1;h>=0;h--)(l=d[h])&&(r=(a<3?l(r):a>3?l(t,e,r):l(t,e))||r);return a>3&&r&&Object.defineProperty(t,e,r),r},p;import{css as v,html as c}from"lit";import{customElement as y,property as n,state as f}from"lit/decorators.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{classMap as w}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{FormFieldController as S}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as k}from"../shared/form-field-description-controller.js";import{disabledControl as x,focusRing as C}from"../shared/style-fragments.js";import{slotHasContent as $}from"../shared/slot-content.js";let s=p=class extends b{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new S({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>null,onReset:()=>{this.value=String(this._low)},onRestore:t=>{this.value=t},onDisabled:t=>{this.disabled=t}}),this.formItemDescription=new k({host:this,getTarget:()=>this._thumbRef.value}),this.min=0,this.max=100,this.step=1,this.value="0",this.name="",this.disabled=!1,this.label="",this._dragging=!1,this._hasSlotContent=!1,this._trackRef=m(),this._thumbRef=m(),this._slotRef=m(),this._labelId=`esp-slider-label-${p._nextId++}`}get _safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get _safeMin(){return Number.isFinite(this.min)?this.min:0}get _safeMax(){return Number.isFinite(this.max)?this.max:100}get _stepPrecision(){const t=String(this._safeStep),e=/^(\d+\.?(\d*))e-(\d+)$/.exec(t);if(e){const a=e[2].length,r=Number(e[3]);return a+r}const i=t.indexOf(".");return i===-1?0:t.length-i-1}get _low(){return Math.min(this._safeMin,this._safeMax)}get _high(){return Math.max(this._safeMin,this._safeMax)}_snapToStep(t){const e=this._safeStep,i=this._low,a=this._high,r=Math.round((t-i)/e)*e+i,l=Math.max(i,Math.min(a,r)),h=10**this._stepPrecision;return Math.round(l*h)/h}get numericValue(){const t=Number(this.value);return Number.isNaN(t)?this._snapToStep(this._low):this._snapToStep(t)}get percentage(){const t=this._high-this._low;return t<=0?0:(this.numericValue-this._low)/t*100}_normalizeValue(){const t=String(this.numericValue);t!==this.value&&(this.value=t),this.formCtrl.syncValueSilently()}willUpdate(t){super.willUpdate(t),(t.has("value")||t.has("min")||t.has("max")||t.has("step"))&&this._normalizeValue()}firstUpdated(t){super.firstUpdated(t),this._syncSlotContent()}focus(t){this.focusResolvedElementAfterUpdate(()=>this._thumbRef.value,t)}setFormItemDescription(t){this.formItemDescription.setDescription(t)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}_setValueAndNotify(t){const e=String(this._snapToStep(t));e!==this.value&&(this.value=e,this.formCtrl.syncValue(),this.emitValueChanged(e))}_handleKeyDown(t){if(this.disabled)return;const e=this._safeStep;let i=0;switch(t.key){case"ArrowRight":case"ArrowUp":i=e;break;case"ArrowLeft":case"ArrowDown":i=-e;break;case"Home":this._setValueAndNotify(this._low),t.preventDefault();return;case"End":this._setValueAndNotify(this._high),t.preventDefault();return;case"PageUp":i=e*10;break;case"PageDown":i=-e*10;break;default:return}t.preventDefault(),this._setValueAndNotify(this.numericValue+i)}_handlePointerDown(t){if(this.disabled)return;const e=this._thumbRef.value,i=this._trackRef.value;if(!e||!i)return;const a=t.composedPath().includes(e);t.pointerType==="touch"&&!a||(t.preventDefault(),this._dragging=!0,e.setPointerCapture(t.pointerId),e.focus({preventScroll:!0}),this._updateValueFromPointer(t))}_handlePointerMove(t){this._dragging&&this._updateValueFromPointer(t)}_handlePointerUp(){this._endDrag()}_handleLostPointerCapture(){this._endDrag()}_endDrag(){this._dragging&&(this._dragging=!1)}_updateValueFromPointer(t){const e=this._trackRef.value;if(!e)return;const i=e.getBoundingClientRect();if(i.width<=0)return;const a=Math.max(0,Math.min(1,(t.clientX-i.left)/i.width)),r=this._low+a*(this._high-this._low);this._setValueAndNotify(r)}_handleSlotChange(){this._syncSlotContent()}_syncSlotContent(){const t=this._slotRef.value;t&&(this._hasSlotContent=$(t))}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(t){this.formCtrl.handleFormStateRestore(t)}formDisabledCallback(t){this.formCtrl.handleFormDisabled(t)}render(){const t=this.percentage,e=this._hasSlotContent?this._labelId:void 0,i=this._hasSlotContent?void 0:this.label||void 0;return c`
+var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(d,t,e,i);else for(var h=d.length-1;h>=0;h--)(l=d[h])&&(r=(a<3?l(r):a>3?l(t,e,r):l(t,e))||r);return a>3&&r&&Object.defineProperty(t,e,r),r},p;import{css as v,html as c}from"lit";import{customElement as y,property as n,state as f}from"lit/decorators.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{classMap as w}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import{ifDefined as b}from"lit/directives/if-defined.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{FormFieldController as S}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as k}from"../shared/form-field-description-controller.js";import{disabledControl as x,focusRing as C}from"../shared/style-fragments.js";import{slotHasContent as $}from"../shared/slot-content.js";let s=p=class extends g{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new S({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>null,onReset:()=>{this.value=String(this._low)},onRestore:t=>{this.value=t},onDisabled:t=>{this.disabled=t}}),this.formItemDescription=new k({host:this,getTarget:()=>this._thumbRef.value}),this.min=0,this.max=100,this.step=1,this.value="0",this.name="",this.disabled=!1,this.label="",this._dragging=!1,this._hasSlotContent=!1,this._trackRef=m(),this._thumbRef=m(),this._slotRef=m(),this._labelId=`esp-slider-label-${p._nextId++}`}get _safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get _safeMin(){return Number.isFinite(this.min)?this.min:0}get _safeMax(){return Number.isFinite(this.max)?this.max:100}get _stepPrecision(){const t=String(this._safeStep),e=/^(\d+\.?(\d*))e-(\d+)$/.exec(t);if(e){const a=e[2].length,r=Number(e[3]);return a+r}const i=t.indexOf(".");return i===-1?0:t.length-i-1}get _low(){return Math.min(this._safeMin,this._safeMax)}get _high(){return Math.max(this._safeMin,this._safeMax)}_snapToStep(t){const e=this._safeStep,i=this._low,a=this._high,r=Math.round((t-i)/e)*e+i,l=Math.max(i,Math.min(a,r)),h=10**this._stepPrecision;return Math.round(l*h)/h}get numericValue(){const t=Number(this.value);return Number.isNaN(t)?this._snapToStep(this._low):this._snapToStep(t)}get percentage(){const t=this._high-this._low;return t<=0?0:(this.numericValue-this._low)/t*100}_normalizeValue(){const t=String(this.numericValue);t!==this.value&&(this.value=t),this.formCtrl.syncValueSilently()}willUpdate(t){super.willUpdate(t),(t.has("value")||t.has("min")||t.has("max")||t.has("step"))&&this._normalizeValue()}firstUpdated(t){super.firstUpdated(t),this._syncSlotContent()}focus(t){this.focusResolvedElementAfterUpdate(()=>this._thumbRef.value,t)}setFormItemDescription(t){this.formItemDescription.setDescription(t)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}_setValueAndNotify(t){const e=String(this._snapToStep(t));e!==this.value&&(this.value=e,this.formCtrl.syncValue(),this.emitValueChanged(e))}_handleKeyDown(t){if(this.disabled)return;const e=this._safeStep;let i=0;switch(t.key){case"ArrowRight":case"ArrowUp":i=e;break;case"ArrowLeft":case"ArrowDown":i=-e;break;case"Home":this._setValueAndNotify(this._low),t.preventDefault();return;case"End":this._setValueAndNotify(this._high),t.preventDefault();return;case"PageUp":i=e*10;break;case"PageDown":i=-e*10;break;default:return}t.preventDefault(),this._setValueAndNotify(this.numericValue+i)}_handlePointerDown(t){if(this.disabled)return;const e=this._thumbRef.value,i=this._trackRef.value;if(!e||!i)return;const a=t.composedPath().includes(e);t.pointerType==="touch"&&!a||(t.preventDefault(),this._dragging=!0,e.setPointerCapture(t.pointerId),e.focus({preventScroll:!0}),this._updateValueFromPointer(t))}_handlePointerMove(t){this._dragging&&this._updateValueFromPointer(t)}_handlePointerUp(){this._endDrag()}_handleLostPointerCapture(){this._endDrag()}_endDrag(){this._dragging&&(this._dragging=!1)}_updateValueFromPointer(t){const e=this._trackRef.value;if(!e)return;const i=e.getBoundingClientRect();if(i.width<=0)return;const a=Math.max(0,Math.min(1,(t.clientX-i.left)/i.width)),r=this._low+a*(this._high-this._low);this._setValueAndNotify(r)}_handleSlotChange(){this._syncSlotContent()}_syncSlotContent(){const t=this._slotRef.value;t&&(this._hasSlotContent=$(t))}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(t){this.formCtrl.handleFormStateRestore(t)}formDisabledCallback(t){this.formCtrl.handleFormDisabled(t)}render(){const t=this.percentage,e=this._hasSlotContent?this._labelId:void 0,i=this._hasSlotContent?void 0:this.label||void 0;return c`
       <div
         class=${w({"slider-container":!0,dragging:this._dragging})}
         @pointerdown=${this._handlePointerDown}
@@ -19,8 +19,8 @@ var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnP
           aria-valuenow=${this.numericValue}
           aria-valuetext=${String(this.numericValue)}
           aria-orientation="horizontal"
-          aria-labelledby=${g(e)}
-          aria-label=${g(i)}
+          aria-labelledby=${b(e)}
+          aria-label=${b(i)}
           aria-disabled=${String(this.disabled)}
           @keydown=${this._handleKeyDown}
           style=${_({left:`${t}%`})}
@@ -29,7 +29,7 @@ var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnP
       ${this._hasSlotContent?c`<span class="label" id=${this._labelId}>
             <slot ${u(this._slotRef)} @slotchange=${this._handleSlotChange}></slot>
           </span>`:c`<slot ${u(this._slotRef)} @slotchange=${this._handleSlotChange} hidden></slot>`}
-    `}};s.formAssociated=!0,s._nextId=0,s.styles=[...b.styles,C(".thumb:focus-visible","--esp-slider-focus-shadow","0 0 0 3px","var(--esp-slider-thumb-shadow, 0 1px 3px oklch(0 0 0 / 0.2)),"),x(".slider-container"),v`
+    `}};s.formAssociated=!0,s._nextId=0,s.styles=[...g.styles,C(".thumb:focus-visible","--esp-slider-focus-shadow","0 0 0 3px","var(--esp-slider-thumb-shadow, 0 1px 3px oklch(0 0 0 / 0.2)),"),x(".slider-container"),v`
       :host {
         display: block;
       }
@@ -91,7 +91,10 @@ var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnP
 
       .label {
         display: block;
-        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);
         line-height: 1.3;

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

@@ -70,7 +70,7 @@ export type EspalierStatusIndicatorChrome = "pill" | "outline" | "none";
  *
  *   .file-type-indicator svg text {
  *     fill: var(--esp-color-background);
- *     font-family: var(--esp-font-body);
+ *     font-family: var(--esp-font-body, system-ui, sans-serif);
  *     font-size: 14px;
  *     font-weight: 600;
  *     text-anchor: middle;

package/dist/switch/esp-switch.js

@@ -1,4 +1,4 @@
-var i=function(a,e,s,l){var c=arguments.length,o=c<3?e:l===null?l=Object.getOwnPropertyDescriptor(e,s):l,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(a,e,s,l);else for(var h=a.length-1;h>=0;h--)(n=a[h])&&(o=(c<3?n(o):c>3?n(e,s,o):n(e,s))||o);return c>3&&o&&Object.defineProperty(e,s,o),o};import{css as f,html as d}from"lit";import{customElement as v,property as r}from"lit/decorators.js";import{classMap as p}from"lit/directives/class-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{FormFieldController as b}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as g}from"../shared/form-field-description-controller.js";import{disabledControl as w,focusRing as m,srOnly as x}from"../shared/style-fragments.js";let t=class extends u{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new b({host:this,internals:this.internals,getFormValue:()=>this.checked?this.value||"on":null,getValidity:()=>this.required&&!this.checked?{flags:{valueMissing:!0},message:this.requiredMessage||"Please toggle this switch to continue."}:null,onReset:()=>{this.checked=!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(".switch-control")}),this.mode="switch",this.offLabel="",this.onLabel="",this.checked=!1,this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1}focus(e){this.focusShadowElementAfterUpdate(".switch-control",e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}toggle(){this.disabled||(this.checked=!this.checked,this.formCtrl.syncValue(),this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.toggle())}handleLabelSlotChange(){this.requestUpdate()}getCurrentTextModeLabel(){return(this.checked?this.onLabel:this.offLabel).trim()}getTextModeAriaLabel(){const e=this.textContent?.replace(/\s+/g," ").trim()??"",s=this.getCurrentTextModeLabel();return e&&s?`${e}: ${s}`:e||s}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}render(){return this.mode==="text"?d`
+var s=function(a,e,i,l){var c=arguments.length,o=c<3?e:l===null?l=Object.getOwnPropertyDescriptor(e,i):l,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(a,e,i,l);else for(var h=a.length-1;h>=0;h--)(n=a[h])&&(o=(c<3?n(o):c>3?n(e,i,o):n(e,i))||o);return c>3&&o&&Object.defineProperty(e,i,o),o};import{css as m,html as d}from"lit";import{customElement as v,property as r}from"lit/decorators.js";import{classMap as p}from"lit/directives/class-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{FormFieldController as b}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as g}from"../shared/form-field-description-controller.js";import{disabledControl as w,focusRing as f,srOnly as y}from"../shared/style-fragments.js";let t=class extends u{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new b({host:this,internals:this.internals,getFormValue:()=>this.checked?this.value||"on":null,getValidity:()=>this.required&&!this.checked?{flags:{valueMissing:!0},message:this.requiredMessage||"Please toggle this switch to continue."}:null,onReset:()=>{this.checked=!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(".switch-control")}),this.mode="switch",this.offLabel="",this.onLabel="",this.checked=!1,this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1}focus(e){this.focusShadowElementAfterUpdate(".switch-control",e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}toggle(){this.disabled||(this.checked=!this.checked,this.formCtrl.syncValue(),this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.toggle())}handleLabelSlotChange(){this.requestUpdate()}getCurrentTextModeLabel(){return(this.checked?this.onLabel:this.offLabel).trim()}getTextModeAriaLabel(){const e=this.textContent?.replace(/\s+/g," ").trim()??"",i=this.getCurrentTextModeLabel();return e&&i?`${e}: ${i}`:e||i}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}render(){return this.mode==="text"?d`
         <div
           class="switch-control text-control"
           role="switch"
@@ -34,7 +34,7 @@ var i=function(a,e,s,l){var c=arguments.length,o=c<3?e:l===null?l=Object.getOwnP
         </div>
         <span class="label"><slot></slot></span>
       </div>
-    `}};t.formAssociated=!0,t.styles=[...u.styles,x,m(".switch-control:focus-visible","--esp-switch-focus-shadow"),m(".text-control:focus-visible","--esp-switch-focus-shadow"),w(".switch-control"),f`
+    `}};t.formAssociated=!0,t.styles=[...u.styles,y,f(".switch-control:focus-visible","--esp-switch-focus-shadow"),f(".text-control:focus-visible","--esp-switch-focus-shadow"),w(".switch-control"),m`
       :host {
         display: block;
       }
@@ -45,7 +45,10 @@ var i=function(a,e,s,l){var c=arguments.length,o=c<3?e:l===null?l=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;
@@ -110,7 +113,10 @@ var i=function(a,e,s,l){var c=arguments.length,o=c<3?e:l===null?l=Object.getOwnP
         border-radius: calc(var(--esp-size-border-radius) + 2px);
         padding: 2px;
         gap: 0;
-        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-switch-text-font-size, var(--esp-size-font));
         user-select: none;
         cursor: pointer;
@@ -147,4 +153,4 @@ var i=function(a,e,s,l){var c=arguments.length,o=c<3?e:l===null?l=Object.getOwnP
       .text-option.active {
         color: var(--esp-switch-text-active-color, var(--esp-color-action-text));
       }
-    `],i([r({type:String,reflect:!0})],t.prototype,"mode",void 0),i([r({attribute:"off-label"})],t.prototype,"offLabel",void 0),i([r({attribute:"on-label"})],t.prototype,"onLabel",void 0),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),t=i([v("esp-switch")],t);export{t as EspalierSwitch};
+    `],s([r({type:String,reflect:!0})],t.prototype,"mode",void 0),s([r({attribute:"off-label"})],t.prototype,"offLabel",void 0),s([r({attribute:"on-label"})],t.prototype,"onLabel",void 0),s([r({type:Boolean,reflect:!0})],t.prototype,"checked",void 0),s([r({type:String})],t.prototype,"value",void 0),s([r({type:String,reflect:!0})],t.prototype,"name",void 0),s([r({type:Boolean,reflect:!0})],t.prototype,"required",void 0),s([r({attribute:"required-message"})],t.prototype,"requiredMessage",void 0),s([r({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),t=s([v("esp-switch")],t);export{t as EspalierSwitch};

package/dist/tabs/esp-tab-group.js

@@ -1,4 +1,4 @@
-var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,a):e,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(i,t,a,e);else for(var l=i.length-1;l>=0;l--)(r=i[l])&&(o=(s<3?r(o):s>3?r(t,a,o):r(t,a))||o);return s>3&&o&&Object.defineProperty(t,a,o),o};import{css as u,html as d,nothing as f}from"lit";import{customElement as v,property as m,state as g}from"lit/decorators.js";import{createRef as y,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{ESP_EVENTS as T}from"../shared/events.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as k}from"../shared/style-fragments.js";let n=class extends c{constructor(){super(...arguments),this.panelsSlot=y(),this.disabled=!1,this.tabData=[]}getTabs(){const t=this.panelsSlot.value?Array.from(this.panelsSlot.value.assignedElements()).filter(a=>a instanceof p):[];return t.length>0?t:Array.from(this.children).filter(a=>a instanceof p)}syncTabData(){const t=this.getTabs();if(t.length===0){this.tabData=[];return}const a=t.find(e=>e.active&&!e.disabled);if(a)for(const e of t)e!==a&&(e.active=!1);else{const e=t.find(s=>!s.disabled);e?e.active=!0:t[0].active=!0}this.tabData=t.map((e,s)=>{const o=`esp-tab-btn-${this.correlationId}-${s}`,r=`esp-tab-panel-${this.correlationId}-${s}`;return e.panelId=r,e.ariaLabelledBy=o,{label:e.label,active:e.active,disabled:this.disabled||e.disabled,buttonId:o,panelId:r}})}activateTab(t){const a=this.getTabs(),e=a[t];if(!(!e||e.disabled||this.disabled)){for(const s of a)s.active=s===e;this.syncTabData(),this.dispatchEvent(new CustomEvent(T.TAB_GROUP_CHANGED,{detail:{index:t,label:e.label},bubbles:!0,composed:!0}))}}handleTabClick(t){this.activateTab(t),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[t]?.buttonId)?.focus()})}handleKeyDown(t){if(!["ArrowLeft","ArrowRight","Home","End"].includes(t.key))return;t.preventDefault();const e=this.tabData.map((l,h)=>({td:l,i:h})).filter(({td:l})=>!l.disabled).map(({i:l})=>l);if(e.length===0)return;const s=this.tabData.findIndex(l=>l.active),o=e.indexOf(s);let r;switch(t.key){case"ArrowRight":o===-1?r=e[0]:r=e[(o+1)%e.length];break;case"ArrowLeft":o===-1?r=e[e.length-1]:r=e[(o-1+e.length)%e.length];break;case"Home":r=e[0];break;case"End":r=e[e.length-1];break;default:return}this.activateTab(r),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[r]?.buttonId)?.focus()})}handleChildUpdated(){this.syncTabData()}handleSlotChange(){this.syncTabData()}connectedCallback(){super.connectedCallback(),this.syncTabData()}willUpdate(t){super.willUpdate(t),t.has("disabled")&&this.syncTabData()}render(){return d`
+var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,a):e,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(i,t,a,e);else for(var l=i.length-1;l>=0;l--)(r=i[l])&&(o=(s<3?r(o):s>3?r(t,a,o):r(t,a))||o);return s>3&&o&&Object.defineProperty(t,a,o),o};import{css as u,html as d,nothing as f}from"lit";import{customElement as v,property as m,state as g}from"lit/decorators.js";import{createRef as y,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{ESP_EVENTS as k}from"../shared/events.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as T}from"../shared/style-fragments.js";let n=class extends c{constructor(){super(...arguments),this.panelsSlot=y(),this.disabled=!1,this.tabData=[]}getTabs(){const t=this.panelsSlot.value?Array.from(this.panelsSlot.value.assignedElements()).filter(a=>a instanceof p):[];return t.length>0?t:Array.from(this.children).filter(a=>a instanceof p)}syncTabData(){const t=this.getTabs();if(t.length===0){this.tabData=[];return}const a=t.find(e=>e.active&&!e.disabled);if(a)for(const e of t)e!==a&&(e.active=!1);else{const e=t.find(s=>!s.disabled);e?e.active=!0:t[0].active=!0}this.tabData=t.map((e,s)=>{const o=`esp-tab-btn-${this.correlationId}-${s}`,r=`esp-tab-panel-${this.correlationId}-${s}`;return e.panelId=r,e.ariaLabelledBy=o,{label:e.label,active:e.active,disabled:this.disabled||e.disabled,buttonId:o,panelId:r}})}activateTab(t){const a=this.getTabs(),e=a[t];if(!(!e||e.disabled||this.disabled)){for(const s of a)s.active=s===e;this.syncTabData(),this.dispatchEvent(new CustomEvent(k.TAB_GROUP_CHANGED,{detail:{index:t,label:e.label},bubbles:!0,composed:!0}))}}handleTabClick(t){this.activateTab(t),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[t]?.buttonId)?.focus()})}handleKeyDown(t){if(!["ArrowLeft","ArrowRight","Home","End"].includes(t.key))return;t.preventDefault();const e=this.tabData.map((l,h)=>({td:l,i:h})).filter(({td:l})=>!l.disabled).map(({i:l})=>l);if(e.length===0)return;const s=this.tabData.findIndex(l=>l.active),o=e.indexOf(s);let r;switch(t.key){case"ArrowRight":o===-1?r=e[0]:r=e[(o+1)%e.length];break;case"ArrowLeft":o===-1?r=e[e.length-1]:r=e[(o-1+e.length)%e.length];break;case"Home":r=e[0];break;case"End":r=e[e.length-1];break;default:return}this.activateTab(r),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[r]?.buttonId)?.focus()})}handleChildUpdated(){this.syncTabData()}handleSlotChange(){this.syncTabData()}connectedCallback(){super.connectedCallback(),this.syncTabData()}willUpdate(t){super.willUpdate(t),t.has("disabled")&&this.syncTabData()}render(){return d`
       <div class="tab-container">
         <div class="tab-list" role="tablist" part="tab-list" @keydown=${this.handleKeyDown}>
           ${this.tabData.map((t,a)=>d`
@@ -26,7 +26,7 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
           ></slot>
         </div>
       </div>
-    `}};n.styles=[...c.styles,k(".tab-button[disabled]"),u`
+    `}};n.styles=[...c.styles,T(".tab-button[disabled]"),u`
       :host {
         display: block;
         --_esp-tab-resolved-button-hover: var(
@@ -58,7 +58,10 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
       }
 
       .tab-button {
-        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-tab-color-text, var(--esp-color-headings));

package/dist/tabs/esp-tab.js

@@ -1,4 +1,4 @@
-var l=function(s,e,o,r){var p=arguments.length,a=p<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(s,e,o,r);else for(var d=s.length-1;d>=0;d--)(n=s[d])&&(a=(p<3?n(a):p>3?n(e,o,a):n(e,o))||a);return p>3&&a&&Object.defineProperty(e,o,a),a};import{css as f,html as u}from"lit";import{customElement as c,property as i}from"lit/decorators.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";let t=class extends b{constructor(){super(...arguments),this.label="",this.active=!1,this.disabled=!1,this.panelId="",this.ariaLabelledBy=""}updated(e){super.updated(e),(e.has("label")||e.has("active")||e.has("disabled"))&&this.dispatchEvent(new CustomEvent("esp-internal-tab-updated",{bubbles:!0,composed:!0}))}render(){return u`
+var l=function(i,e,o,r){var p=arguments.length,a=p<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(i,e,o,r);else for(var d=i.length-1;d>=0;d--)(n=i[d])&&(a=(p<3?n(a):p>3?n(e,o,a):n(e,o))||a);return p>3&&a&&Object.defineProperty(e,o,a),a};import{css as f,html as c}from"lit";import{customElement as v,property as s}from"lit/decorators.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";let t=class extends b{constructor(){super(...arguments),this.label="",this.active=!1,this.disabled=!1,this.panelId="",this.ariaLabelledBy=""}updated(e){super.updated(e),(e.has("label")||e.has("active")||e.has("disabled"))&&this.dispatchEvent(new CustomEvent("esp-internal-tab-updated",{bubbles:!0,composed:!0}))}render(){return c`
       <div
         part="panel"
         role="tabpanel"
@@ -19,9 +19,12 @@ var l=function(s,e,o,r){var p=arguments.length,a=p<3?e:r===null?r=Object.getOwnP
 
       [part="panel"] {
         padding: var(--esp-tab-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);
         outline: none;
       }
-    `],l([i({type:String})],t.prototype,"label",void 0),l([i({type:Boolean,reflect:!0})],t.prototype,"active",void 0),l([i({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),l([i({attribute:!1})],t.prototype,"panelId",void 0),l([i({attribute:!1})],t.prototype,"ariaLabelledBy",void 0),t=l([c("esp-tab")],t);export{t as EspalierTab};
+    `],l([s({type:String})],t.prototype,"label",void 0),l([s({type:Boolean,reflect:!0})],t.prototype,"active",void 0),l([s({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),l([s({attribute:!1})],t.prototype,"panelId",void 0),l([s({attribute:!1})],t.prototype,"ariaLabelledBy",void 0),t=l([v("esp-tab")],t);export{t as EspalierTab};

package/dist/tree/esp-tree.js

@@ -264,7 +264,10 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       }
 
       .tree {
-        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);
         display: grid;

package/espalier.css-data.json

@@ -543,19 +543,19 @@
     },
     {
       "name": "--esp-font-body",
-      "description": ""
+      "description": "Always-emitted family for body and UI text. Defaults to `system-ui, sans-serif` when `fontBody` is omitted or empty."
     },
     {
       "name": "--esp-font-brand",
-      "description": ""
+      "description": "Consumer-authored brand family. Emitted only when configured; brand recipes otherwise fall back through headings to `--esp-font-body`."
     },
     {
       "name": "--esp-font-headings",
-      "description": ""
+      "description": "Consumer-authored heading family. Emitted only when configured; heading recipes otherwise fall back to `--esp-font-body`."
     },
     {
       "name": "--esp-font-monospace",
-      "description": ""
+      "description": "Family for code and monospace text. Defaults to `monospace`."
     },
     {
       "name": "--esp-font-weight-body",
@@ -807,7 +807,7 @@
     },
     {
       "name": "--esp-header-brand-font-family",
-      "description": "The configured brand font family. Defaults to `var(--esp-font-brand, var(--esp-font-headings))`."
+      "description": "The configured brand font family. Defaults through `--esp-font-brand` and `--esp-font-headings` to `--esp-font-body`."
     },
     {
       "name": "--esp-header-brand-font-size",
@@ -833,6 +833,10 @@
       "name": "--esp-header-brand-hover-decoration",
       "description": "The configured brand hover text decoration. Defaults to `none`."
     },
+    {
+      "name": "--esp-header-brand-hover-transform",
+      "description": "The configured brand hover transform. Defaults to `none`."
+    },
     {
       "name": "--esp-header-brand-inline-placement",
       "description": "The CSS `justify-content` value for the brand container. Defaults to `start`."

package/espalier.token-manifest.json

@@ -737,22 +737,24 @@
     {
       "name": "--esp-font-body",
       "category": "root-theme",
-      "description": ""
+      "description": "Always-emitted family for body and UI text. Defaults to `system-ui, sans-serif` when `fontBody` is omitted or empty.",
+      "default": "system-ui, sans-serif"
     },
     {
       "name": "--esp-font-brand",
       "category": "root-theme",
-      "description": ""
+      "description": "Consumer-authored brand family. Emitted only when configured; brand recipes otherwise fall back through headings to `--esp-font-body`."
     },
     {
       "name": "--esp-font-headings",
       "category": "root-theme",
-      "description": ""
+      "description": "Consumer-authored heading family. Emitted only when configured; heading recipes otherwise fall back to `--esp-font-body`."
     },
     {
       "name": "--esp-font-monospace",
       "category": "root-theme",
-      "description": ""
+      "description": "Family for code and monospace text. Defaults to `monospace`.",
+      "default": "monospace"
     },
     {
       "name": "--esp-font-weight-body",
@@ -1126,7 +1128,7 @@
       "name": "--esp-header-brand-font-family",
       "category": "component",
       "component": "esp-header",
-      "description": "The configured brand font family. Defaults to `var(--esp-font-brand, var(--esp-font-headings))`."
+      "description": "The configured brand font family. Defaults through `--esp-font-brand` and `--esp-font-headings` to `--esp-font-body`."
     },
     {
       "name": "--esp-header-brand-font-size",
@@ -1164,6 +1166,12 @@
       "component": "esp-header",
       "description": "The configured brand hover text decoration. Defaults to `none`."
     },
+    {
+      "name": "--esp-header-brand-hover-transform",
+      "category": "component",
+      "component": "esp-header",
+      "description": "The configured brand hover transform. Defaults to `none`."
+    },
     {
       "name": "--esp-header-brand-inline-placement",
       "category": "component",

package/licenses/ASSET_PROVENANCE.md

@@ -8,7 +8,8 @@ removing, or replacing non-code assets.
 
 | Asset area | Provenance | Notice |
 |------------|------------|--------|
-| `css/fonts/**` | Generated Google Fonts preview CSS with per-family notices generated from upstream Google Fonts metadata links. | `licenses/GOOGLE_FONTS_NOTICES.md` |
+| `css/fonts/*.css`, `css/fonts/font-definitions.json` | Generated Google Fonts preview CSS and catalog with per-family notices generated from upstream Google Fonts metadata links. | `licenses/GOOGLE_FONTS_NOTICES.md` |
+| `css/fonts/font-fallback-profiles.json` | Variant metrics derived from `@capsizecss/metrics` with `@capsizecss/core`, serialized by Taproot's deterministic maintainer generator. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `assets/shell-fonts.css`, `assets/shell-fonts/**` | Docs-only self-hosted Quicksand, Oswald, and Sometype Mono WOFF2 subsets under OFL 1.1, downloaded once from the Google Fonts css2 endpoint and checked in so the documentation shell never calls Google at runtime. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `assets/icons.svg` | Tabler-derived SVG symbols plus Taproot-owned logo symbol. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `*.ts` | Inline Tabler-style SVG templates and Taproot rendering helpers. | `licenses/THIRD_PARTY_NOTICES.md` |

package/licenses/THIRD_PARTY_NOTICES.md

@@ -76,6 +76,41 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+## Capsize Font Metrics
+
+`css/fonts/font-fallback-profiles.json` is generated from the Google and system
+font metrics distributed by `@capsizecss/metrics`, using the calculations in
+`@capsizecss/core`. The packages are maintainer-only dependencies; their
+derived variant metrics are included in the published profile catalog.
+
+- Project: Capsize
+- Upstream: https://github.com/seek-oss/capsize
+- Packages: `@capsizecss/metrics` 4.2.0 and `@capsizecss/core` 4.1.3
+- License: MIT License
+- Copyright: Copyright (c) 2021 SEEK
+
+MIT License
+
+Copyright (c) 2021 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
 ## Documentation Shell Fonts
 
 The Espalier documentation site self-hosts the three faces its theme names, so

package/licenses/asset-provenance.json

@@ -1,11 +1,12 @@
 {
   "schemaVersion": 1,
-  "updatedAt": "2026-08-22",
+  "updatedAt": "2026-08-28",
   "entries": [
     {
       "id": "google-font-preview-assets",
       "paths": [
-        "css/fonts/**"
+        "css/fonts/*.css",
+        "css/fonts/font-definitions.json"
       ],
       "assetType": "generated font preview assets",
       "classification": "third-party-generated",
@@ -25,6 +26,29 @@
       ],
       "reviewStatus": "manifest-gated"
     },
+    {
+      "id": "capsize-font-fallback-profiles",
+      "paths": [
+        "css/fonts/font-fallback-profiles.json"
+      ],
+      "assetType": "generated font metric profile catalog",
+      "classification": "third-party-derived",
+      "owner": "SEEK for Capsize metrics and calculations; Taproot for catalog serialization",
+      "source": "@capsizecss/metrics 4.2.0 and @capsizecss/core 4.1.3",
+      "license": "MIT License",
+      "transformations": [
+        "Join the committed Google Fonts catalog to Capsize family, variant, and system fallback metrics",
+        "Calculate subset-specific size-adjust and vertical metric overrides",
+        "Encode the selected fallback variants and bounded-precision percentages as deterministic JSON"
+      ],
+      "packageInclusion": "included in npm package for host build tooling; never required by the browser runtime",
+      "docsInclusion": "documented as the build-time source for site-specific inline font plans",
+      "noticeRequirement": "required",
+      "noticePaths": [
+        "licenses/THIRD_PARTY_NOTICES.md"
+      ],
+      "reviewStatus": "manifest-gated"
+    },
     {
       "id": "tabler-svg-sprite",
       "paths": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",
@@ -313,6 +313,10 @@
       "types": "./dist/shared/font-helpers.d.ts",
       "import": "./dist/shared/font-helpers.js"
     },
+    "./shared/font-plan": {
+      "types": "./dist/shared/font-plan.d.ts",
+      "import": "./dist/shared/font-plan.js"
+    },
     "./shared/cursor-pagination": {
       "types": "./dist/shared/cursor-pagination.d.ts",
       "import": "./dist/shared/cursor-pagination.js"
@@ -338,6 +342,8 @@
       "import": "./dist/shared/bus-events.js"
     },
     "./espalier.token-manifest.json": "./espalier.token-manifest.json",
+    "./css/fonts/font-definitions.json": "./css/fonts/font-definitions.json",
+    "./css/fonts/font-fallback-profiles.json": "./css/fonts/font-fallback-profiles.json",
     "./textures/banner-textures.css": "./css/textures/banner-textures.css",
     "./textures/espalier-paper.png": "./css/textures/espalier-paper.png",
     "./textures/espalier-grain.png": "./css/textures/espalier-grain.png",
@@ -345,7 +351,6 @@
     "./custom-elements.json": "./custom-elements.json",
     "./espalier.css-data.json": "./espalier.css-data.json",
     "./css/esp-reset.css": "./css/esp-reset.css",
-    "./css/fonts/font-definitions.json": "./css/fonts/font-definitions.json",
     "./css/fonts/*.css": "./css/fonts/*.css"
   },
   "sideEffects": [
@@ -362,6 +367,7 @@
     "css/esp-reset.css",
     "css/fonts/**/*.css",
     "css/fonts/font-definitions.json",
+    "css/fonts/font-fallback-profiles.json",
     "css/textures/banner-textures.css",
     "css/textures/*.png",
     "custom-elements.json",