@taprootio/espalier 2.3.1 → 2.5.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 x}from"../shared/form-field-description-controller.js";import{disabledControl as k,focusRing as C}from"../shared/style-fragments.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 x({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;if(!t)return;const e=t.assignedNodes({flatten:!0});this._hasSlotContent=e.some(i=>i.nodeType===Node.ELEMENT_NODE||i.textContent?.trim())}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 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`
       <div
         class=${w({"slider-container":!0,dragging:this._dragging})}
         @pointerdown=${this._handlePointerDown}
@@ -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)),"),k(".slider-container"),v`
+    `}};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`
       :host {
         display: block;
       }

package/espalier.token-manifest.json

@@ -536,6 +536,150 @@
       "category": "root-theme",
       "description": ""
     },
+    {
+      "name": "--esp-footer-background",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Base footer color. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-footer-background-blend-mode",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer blend mode. Defaults to `normal`."
+    },
+    {
+      "name": "--esp-footer-background-image",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative image or gradient layer. Defaults to `none`."
+    },
+    {
+      "name": "--esp-footer-background-image-opacity",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer opacity. Defaults to `1`."
+    },
+    {
+      "name": "--esp-footer-background-position",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer position. Defaults to `0 0`."
+    },
+    {
+      "name": "--esp-footer-background-repeat",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer repeat behavior. Defaults to `repeat`."
+    },
+    {
+      "name": "--esp-footer-background-size",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer size. Defaults to `auto`."
+    },
+    {
+      "name": "--esp-footer-border",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Block-start footer border. Defaults to `1px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-footer-brand-logo-max-width",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Configured logo maximum inline size. Defaults to `12rem`."
+    },
+    {
+      "name": "--esp-footer-brand-logo-size",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Configured logo block size. Defaults to `3rem`."
+    },
+    {
+      "name": "--esp-footer-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Body text color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-footer-column-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Gap between link-group columns and major primary regions. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-content-lead",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Fraction of surplus placed before content (`0`, `0.5`, or `1`). Defaults to `0`."
+    },
+    {
+      "name": "--esp-footer-content-max-width",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Surface-alignment cap published by `esp-page`. Defaults to `100%`."
+    },
+    {
+      "name": "--esp-footer-focus-outline",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Focus-visible outline. Defaults to `2px solid var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-footer-heading-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Heading and configured-brand color. Defaults to `var(--esp-color-headings)`."
+    },
+    {
+      "name": "--esp-footer-link-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Link color. Defaults to `var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-footer-link-group-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Space between a link-group heading and its links. Defaults to `var(--esp-size-small)`."
+    },
+    {
+      "name": "--esp-footer-link-group-min-width",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Intrinsic minimum link-group column width. Defaults to `10rem`."
+    },
+    {
+      "name": "--esp-footer-link-hover-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Hovered link color. Defaults to `var(--esp-color-link-hover)`."
+    },
+    {
+      "name": "--esp-footer-padding-block",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Content block padding. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-padding-inline",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Content inline padding. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-row-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Compact-layout row gap. Defaults to `var(--esp-size-big)`."
+    },
+    {
+      "name": "--esp-footer-section-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Gap between media, primary, and bottom regions. Defaults to `var(--esp-size-big)`."
+    },
     {
       "name": "--esp-form-item-error-background",
       "category": "component",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.3.1",
+  "version": "2.5.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",
@@ -98,6 +98,14 @@
       "types": "./dist/font-picker/esp-font-picker.d.ts",
       "import": "./dist/font-picker/esp-font-picker.js"
     },
+    "./footer": {
+      "types": "./dist/footer/index.d.ts",
+      "import": "./dist/footer/index.js"
+    },
+    "./footer/link-group": {
+      "types": "./dist/footer/esp-footer-link-group.d.ts",
+      "import": "./dist/footer/esp-footer-link-group.js"
+    },
     "./form": {
       "types": "./dist/form/esp-form.d.ts",
       "import": "./dist/form/esp-form.js"
@@ -272,6 +280,7 @@
   "sideEffects": [
     "dist/index.js",
     "dist/*/esp-*.js",
+    "dist/footer/index.js",
     "dist/header/index.js",
     "dist/menu/index.js",
     "dist/shared/virtualizer/lit-virtualizer.js"