@taprootio/espalier 4.5.0 → 4.6.0

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

@@ -1,4 +1,4 @@
-var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(m,e,t,i);else for(var h=m.length-1;h>=0;h--)(a=m[h])&&(s=(r<3?a(s):r>3?a(e,t,s):a(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s},_;import{html as c,nothing as P}from"lit";import{customElement as R,property as p,state as d}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{createRef as g,ref as v}from"lit/directives/ref.js";import{repeat as M}from"lit/directives/repeat.js";import{EspalierElementBase as D}from"../shared/esp-element-base.js";import{PopoverController as A}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as E,spaceAroundRect as x,viewportSize as w}from"../shared/viewport.js";import{FormFieldController as G}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as F}from"../shared/form-field-description-controller.js";import{leftArrow as O}from"../shared/svgs/left-arrow.js";import{rightArrow as V}from"../shared/svgs/right-arrow.js";import{checkSVG as b}from"../shared/svgs/check.js";import{cancelSVG as S}from"../shared/svgs/cancel.js";import"../button/esp-button.js";import"../pickers/esp-pick-one.js";import"../pickers/esp-picker-item.js";import{GRID_COLS as k,GRID_ROWS as q,GRID_SIZE as L,HOURS_12 as I,MINUTES_60 as B,MONTH_NAMES as T,WEEKDAY_LABELS as X}from"./helpers/constants.js";import{displayValue as Y,formatDate as $,parseValue as U}from"./helpers/parsing.js";import{generateCalendarGrid as W,getEffectiveRange as z,getSelectedDate as H,isDateDisabled as N,parseDateBound as y}from"./helpers/calendar-grid.js";import{calendarIcon as K}from"../shared/svgs/calendar-icon.js";import{datePickerStyles as j}from"./helpers/styles.js";let o=_=class extends D{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new G({host:this,internals:this.internals,getFormValue:()=>this._value||null,getValidity:()=>this._getValidityResult(),getValidationAnchor:()=>this.inputRef.value??this,onReset:()=>{this._rangeAnchor=null,this._rangePreview=null,this._value="",this.requestUpdate("value",""),this._syncFromValue()},onRestore:e=>{this.value=e},onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new F({host:this,getTarget:()=>this.inputRef.value}),this.popoverCtrl=new A({host:this,closeStrategy:"source-identity",isOpen:()=>this.open,onShouldClose:()=>this._closePopover(),onPositionUpdate:()=>this._positionPopover(),shouldContinueTracking:()=>{const e=this.getBoundingClientRect(),{height:t}=w();return!(e.bottom<0||e.top>t)},getInsideElements:()=>[this.popoverRef.value??null],onOutsideClick:()=>this._closePopover()}),this.inputRef=g(),this.popoverRef=g(),this.calBodyRef=g(),this.timePickerRef=g(),this.temporalSupported=!0,this.mode="date",this._value="",this.placeholder="Select...",this.min="",this.max="",this.disabled=!1,this.name="",this.required=!1,this.requiredMessage="",this.open=!1,this.parsed={kind:"none"},this._parsedMinDate=null,this._parsedMaxDate=null,this._hour=12,this._minute=0,this._period="AM",this._rangeAnchor=null,this._rangePreview=null,this._cachedGridKey="",this._cachedGrid=[],this._valueOnOpen="",this._touchStartX=0,this._touchStartY=0,this._touchGesture="none",this._swipeAnimating=!1,this._longPressTimer=0,this._edgeScrollTimer=0}get value(){return this._value}set value(e){const t=this._value;this._value=e,this.requestUpdate("value",t),this._syncFromValue(),this.formCtrl.syncValue()}get _rangePhase(){return this._rangeAnchor?this.parsed.kind==="range"?"complete":"start":"empty"}_getGrid(){const e=[this.viewDate?.toString(),this._value,this._rangeAnchor?.toString()??"",this._rangePreview?.toString()??""].join("|");if(e!==this._cachedGridKey){this._cachedGridKey=e;const t=H(this.parsed),{start:i,end:r}=z(this.mode,this.parsed,this._rangeAnchor,this._rangePreview);this._cachedGrid=W(this.viewDate,t,i,r,this._minDate,this._maxDate)}return this._cachedGrid}_dateAtPoint(e,t){const i=this.shadowRoot?.elementsFromPoint(e,t);if(!i)return null;for(const r of i){const s=r.dataset?.date;if(s)try{return Temporal.PlainDate.from(s)}catch{return null}}return null}_edgeSide(e){const t=this.shadowRoot?.querySelector(".calendar");if(!t)return null;const i=t.getBoundingClientRect(),r=this.shadowRoot?.querySelector(".day-cell"),s=r?r.getBoundingClientRect().width:32;return e<=i.left+s?"left":e>=i.right-s?"right":null}_onCalendarTouchStart(e){if(e.touches.length!==1||this._swipeAnimating)return;const t=e.touches[0];if(this._touchStartX=t.clientX,this._touchStartY=t.clientY,this._touchGesture="pending",this._clearLongPressTimer(),this.mode==="range"&&this._rangePhase!=="empty"){const i=this.shadowRoot?.querySelector(".calendar");i&&(i.style.touchAction="none"),this._longPressTimer=window.setTimeout(()=>{if(this._longPressTimer=0,this._touchGesture!=="pending")return;this._touchGesture="drag";const r=this._dateAtPoint(this._touchStartX,this._touchStartY);r&&!this._isDateDisabled(r)&&(this._rangePhase==="complete"&&(this._rangeAnchor=r,this._value="",this.parsed={kind:"none"},this.formCtrl.syncValue()),this._rangePreview=r,this.requestUpdate())},_.LONG_PRESS_MS)}}_onCalendarTouchMove(e){if(e.touches.length!==1||this._swipeAnimating||this._touchGesture==="none")return;const t=e.touches[0],i=t.clientX-this._touchStartX,r=t.clientY-this._touchStartY;if(this._touchGesture==="drag"){e.cancelable&&e.preventDefault();const s=this._dateAtPoint(t.clientX,t.clientY);s&&!this._isDateDisabled(s)&&(this._rangePreview=s),this._handleEdgeScroll(t.clientX);return}if(this._touchGesture==="pending"){if(Math.abs(i)<10&&Math.abs(r)<10)return;if(this._clearLongPressTimer(),Math.abs(r)>Math.abs(i)){this._touchGesture="none",this._resetTouchAction();return}this._touchGesture="swipe"}if(this._touchGesture==="swipe"){e.cancelable&&e.preventDefault();const s=this.calBodyRef.value;s&&(s.style.transition="none",s.style.transform=`translateX(${i}px)`)}}_onCalendarTouchEnd(e){this._clearLongPressTimer(),this._clearEdgeScrollTimer(),this._resetTouchAction();const t=this._touchGesture;if(this._touchGesture="none",t==="drag"){if(e.changedTouches.length===1){const r=e.changedTouches[0];let s=this._dateAtPoint(r.clientX,r.clientY);if(s||(s=this._rangePreview),s&&!this._isDateDisabled(s)&&this._rangeAnchor){const a=this._rangeAnchor;let h,l;Temporal.PlainDate.compare(s,a)<0?(h=s,l=a):(h=a,l=s),this._rangePreview=null,this.value=`${h.toString()}/${l.toString()}`,this._dispatchValueChanged()}}return}if(t==="swipe"){this._finishSwipe(e);return}const i=this.calBodyRef.value;i&&(i.style.transition="",i.style.transform="")}_finishSwipe(e){const t=this.calBodyRef.value;if(!t||e.changedTouches.length!==1){t&&(t.style.transition="",t.style.transform="");return}const r=e.changedTouches[0].clientX-this._touchStartX,s=t.offsetWidth;if(Math.abs(r)>=30){const a=r<0?1:-1,h=a===1?-s:s;this._swipeAnimating=!0,t.style.transition="transform 150ms ease-in",t.style.transform=`translateX(${h}px)`,t.addEventListener("transitionend",()=>{this._navigateMonth(a),this.updateComplete.then(()=>{const l=this.calBodyRef.value;if(!l){this._swipeAnimating=!1;return}l.style.transition="none",l.style.transform=`translateX(${-h}px)`,l.getBoundingClientRect(),l.style.transition="transform 150ms ease-out",l.style.transform="",l.addEventListener("transitionend",()=>{l.style.transition="",this._swipeAnimating=!1},{once:!0})})},{once:!0})}else t.style.transition="transform 150ms ease-out",t.style.transform="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}_clearLongPressTimer(){this._longPressTimer&&(clearTimeout(this._longPressTimer),this._longPressTimer=0)}_handleEdgeScroll(e){const t=this._edgeSide(e);if(!t){this._clearEdgeScrollTimer();return}if(this._edgeScrollTimer)return;const i=t==="right"?1:-1;this._edgeScrollTimer=window.setTimeout(async()=>{this._edgeScrollTimer=0,this._touchGesture==="drag"&&(this._navigateMonth(i),await this.updateComplete)},_.EDGE_SCROLL_MS)}_clearEdgeScrollTimer(){this._edgeScrollTimer&&(clearTimeout(this._edgeScrollTimer),this._edgeScrollTimer=0)}_resetTouchAction(){const e=this.shadowRoot?.querySelector(".calendar");e&&e.style.removeProperty("touch-action")}connectedCallback(){if(super.connectedCallback(),typeof window.Temporal>"u"){this.temporalSupported=!1;return}this.viewDate||(this.viewDate=Temporal.Now.plainDateISO().toPlainYearMonth()),this.focusedDate||(this.focusedDate=Temporal.Now.plainDateISO()),this._parsedMinDate=y(this.min),this._parsedMaxDate=y(this.max),this._syncFromValue(),this.formCtrl.validate()}disconnectedCallback(){super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),e.has("min")&&(this._parsedMinDate=y(this.min)),e.has("max")&&(this._parsedMaxDate=y(this.max))}updated(e){super.updated(e),e.has("disabled")&&(this.internals.ariaDisabled=this.disabled?"true":"false"),e.has("required")&&(this.internals.ariaRequired=this.required?"true":"false",this.formCtrl.validate()),(e.has("min")||e.has("max"))&&this.formCtrl.validate()}focus(e){this.focusResolvedElementAfterUpdate(()=>this.inputRef.value,e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}_syncFromValue(){if(this.temporalSupported)switch(this.parsed=U(this._value,this.mode),this.parsed.kind){case"date":this.viewDate=this.parsed.date.toPlainYearMonth(),this.focusedDate=this.parsed.date;break;case"datetime":{this.viewDate=this.parsed.datetime.toPlainDate().toPlainYearMonth(),this.focusedDate=this.parsed.datetime.toPlainDate();const e=this.parsed.datetime.toPlainTime(),t=e.hour;this._period=t>=12?"PM":"AM",this._hour=t===0?12:t>12?t-12:t,this._minute=e.minute;break}case"time":{const e=this.parsed.time,t=e.hour;this._period=t>=12?"PM":"AM",this._hour=t===0?12:t>12?t-12:t,this._minute=e.minute;break}case"range":this.viewDate=this.parsed.start.toPlainYearMonth(),this.focusedDate=this.parsed.start,this._rangeAnchor=this.parsed.start,this._rangePreview=null;break;case"none":break}}_getValidityResult(){if(!this.temporalSupported)return null;if(this.required&&!this._value)return{flags:{valueMissing:!0},message:this.requiredMessage||"Please select a date."};if(this._value&&this.parsed.kind==="none")return{flags:{typeMismatch:!0},message:"The value is not a valid date."};const e=this._getValidationDates();if(e.length>0){const t=this._minDate,i=this._maxDate;if(t){for(const r of e)if(Temporal.PlainDate.compare(r,t)<0)return{flags:{rangeUnderflow:!0},message:`Date must not be before ${$(t)}.`}}if(i){for(const r of e)if(Temporal.PlainDate.compare(r,i)>0)return{flags:{rangeOverflow:!0},message:`Date must not be after ${$(i)}.`}}}return null}_getValidationDates(){switch(this.parsed.kind){case"date":return[this.parsed.date];case"datetime":return[this.parsed.datetime.toPlainDate()];case"range":return[this.parsed.start,this.parsed.end];default:return[]}}get _minDate(){return this._parsedMinDate}get _maxDate(){return this._parsedMaxDate}_isDateDisabled(e){return N(e,this._minDate,this._maxDate)}_navigateMonth(e){this.viewDate=this.viewDate.add({months:e}),this.focusedDate=this.viewDate.toPlainDate({day:Math.min(this.focusedDate.day,this.viewDate.daysInMonth)})}_moveFocus(e){const t=this.focusedDate.add({days:e});if(this._isDateDisabled(t)){const r=e>0?1:-1;let s=t;for(let a=0;a<L&&this._isDateDisabled(s);a++)s=s.add({days:r});this.focusedDate=s}else this.focusedDate=t;const i=this.focusedDate.toPlainYearMonth();Temporal.PlainYearMonth.compare(i,this.viewDate)!==0&&(this.viewDate=i),this.mode==="range"&&this._rangePhase==="start"&&(this._rangePreview=this.focusedDate)}_selectDate(e){if(!this._isDateDisabled(e)){switch(this.mode){case"date":this.value=e.toString(),this._closePopover(),this.inputRef.value?.focus();break;case"datetime":{const t=this.parsed.kind==="datetime"?this.parsed.datetime.toPlainTime():new Temporal.PlainTime;this.value=e.toPlainDateTime(t).toString();break}case"range":this._selectRangeEndpoint(e);break}this._dispatchValueChanged()}}_selectRangeEndpoint(e){switch(this._rangePhase){case"empty":case"complete":this._rangeAnchor=e,this._rangePreview=null,this._value="",this.parsed={kind:"none"},this.formCtrl.syncValue(),this.requestUpdate();break;case"start":{const i=this._rangeAnchor;let r,s;Temporal.PlainDate.compare(e,i)<0?(r=e,s=i):(r=i,s=e),this._rangePreview=null,this.value=`${r.toString()}/${s.toString()}`;break}}}_dispatchValueChanged(){this.emitValueChanged(this._value)}get _showTimePicker(){return this.mode==="time"||this.mode==="datetime"}get _showCalendar(){return this.mode!=="time"}_commitTime(){let e=this._hour%12;this._period==="PM"&&(e+=12);const t=new Temporal.PlainTime(e,this._minute);if(this.mode==="time")this.value=t.toString();else if(this.mode==="datetime"){const i=this.parsed.kind==="datetime"?this.parsed.datetime.toPlainDate():this.parsed.kind==="date"?this.parsed.date:Temporal.Now.plainDateISO();this.value=i.toPlainDateTime(t).toString()}this._dispatchValueChanged()}async _openPopover(){if(this.disabled)return;this.popoverCtrl.publishCloseOthers(),this._valueOnOpen=this._value,this.open=!0,this._positionPopover(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick(),await this.updateComplete,this._shrinkTimePickerToFit(),this._scrollToContainPopover();const t=this.shadowRoot?.querySelector('[role="grid"]')?.querySelector('[tabindex="0"]');requestAnimationFrame(()=>t?.focus())}_closePopover(){this.open=!1;const e=this.popoverRef.value;if(e){e.classList.remove("visible");try{e.hidePopover()}catch{}}this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.mode==="range"&&this._rangePhase==="start"&&(this._rangeAnchor=null,this._rangePreview=null)}_togglePopover(){this.open?this._closePopover():this._openPopover()}_positionPopover(){const e=this.popoverRef.value;if(!e)return;const t=this.getBoundingClientRect(),{width:i,height:r}=w(),{spaceAbove:s,spaceBelow:a}=x(t,r);e.matches(":popover-open")||e.showPopover(),e.style.removeProperty("top"),e.style.removeProperty("bottom"),e.style.removeProperty("font-size"),e.style.setProperty("width","min-content"),this._shrinkToFitViewport(e,i);let h=t.left;const l=e.offsetWidth;h+l>i&&(h=Math.max(0,i-l)),e.style.setProperty("left",`${h}px`);const f=e.offsetHeight;if(s>a){let u=r-t.top;f>s&&(u=r-f),e.style.setProperty("bottom",`${u}px`)}else{let u=t.bottom;f>a&&(u=r-f),e.style.setProperty("top",`${Math.max(0,u)}px`)}requestAnimationFrame(()=>e.classList.add("visible"))}_shrinkToFitViewport(e,t){if(e.offsetWidth<=t)return;const i=getComputedStyle(e);let r=parseFloat(i.fontSize);const s=8;for(;e.offsetWidth>t&&r>s;)r-=.5,e.style.setProperty("font-size",`${r}px`)}_shrinkTimePickerToFit(){const e=this.timePickerRef.value,t=this.popoverRef.value;if(!e||!t)return;e.style.removeProperty("font-size");const i=t.clientWidth;if(e.scrollWidth<=i)return;const r=getComputedStyle(e);let s=parseFloat(r.fontSize);const a=8;for(;e.scrollWidth>i&&s>a;)s-=.5,e.style.setProperty("font-size",`${s}px`)}_scrollToContainPopover(){const e=this.popoverRef.value;e&&E(this,e,()=>this._positionPopover())}async _handleGridKeyDown(e){let t=!0;switch(e.key){case"ArrowLeft":this._moveFocus(-1);break;case"ArrowRight":this._moveFocus(1);break;case"ArrowUp":this._moveFocus(-7);break;case"ArrowDown":this._moveFocus(7);break;case"Home":{const i=this.focusedDate.dayOfWeek;i>1&&this._moveFocus(-(i-1));break}case"End":{const i=this.focusedDate.dayOfWeek;i<7&&this._moveFocus(7-i);break}case"PageUp":this._navigateMonth(e.shiftKey?-12:-1);break;case"PageDown":this._navigateMonth(e.shiftKey?12:1);break;case"Enter":case" ":this._selectDate(this.focusedDate);break;case"Escape":this._closePopover(),this.inputRef.value?.focus();break;default:t=!1}t&&(e.preventDefault(),e.stopPropagation(),await this.updateComplete,this.shadowRoot?.querySelector('[role="grid"]')?.querySelector('[tabindex="0"]')?.focus())}_onDayCellHover(e){this.mode==="range"&&this._rangePhase==="start"&&(this._rangePreview=e)}render(){return this.temporalSupported?c`
+var n=function(f,e,t,i){var o=arguments.length,s=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,i);else for(var l=f.length-1;l>=0;l--)(a=f[l])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s},_;import{html as d,nothing as w}from"lit";import{customElement as $,property as u,state as p}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{createRef as g,ref as v}from"lit/directives/ref.js";import{repeat as A}from"lit/directives/repeat.js";import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{PopoverController as M}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as F,spaceAroundRect as E,viewportSize as D}from"../shared/viewport.js";import{FormFieldController as G}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as x}from"../shared/form-field-description-controller.js";import{leftArrow as O}from"../shared/svgs/left-arrow.js";import{rightArrow as V}from"../shared/svgs/right-arrow.js";import{checkSVG as b}from"../shared/svgs/check.js";import{cancelSVG as S}from"../shared/svgs/cancel.js";import"../button/esp-button.js";import"../pickers/esp-pick-one.js";import"../pickers/esp-picker-item.js";import{GRID_COLS as k,GRID_ROWS as q,GRID_SIZE as L,HOURS_12 as I,MINUTES_60 as B,MONTH_NAMES as R,WEEKDAY_LABELS as X}from"./helpers/constants.js";import{displayValue as Y,formatDate as T,parseValue as U}from"./helpers/parsing.js";import{generateCalendarGrid as W,getEffectiveRange as z,getSelectedDate as H,isDateDisabled as N,parseDateBound as y}from"./helpers/calendar-grid.js";import{calendarIcon as K}from"../shared/svgs/calendar-icon.js";import{datePickerStyles as j}from"./helpers/styles.js";let r=_=class extends P{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new G({host:this,internals:this.internals,getFormValue:()=>this._value||null,getValidity:()=>this._getValidityResult(),getValidationAnchor:()=>this.inputRef.value??this,onReset:()=>{this._rangeAnchor=null,this._rangePreview=null,this._value="",this.requestUpdate("value",""),this._syncFromValue()},onRestore:e=>{this.value=e},onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new x({host:this,getTarget:()=>this.inputRef.value}),this.popoverCtrl=new M({host:this,closeStrategy:"source-identity",isOpen:()=>this.open,onShouldClose:()=>this._closePopover(),onPositionUpdate:()=>this._positionPopover(),shouldContinueTracking:()=>{const e=this.getBoundingClientRect(),{height:t}=D();return!(e.bottom<0||e.top>t)},getInsideElements:()=>[this.popoverRef.value??null],onOutsideClick:()=>this._closePopover()}),this.inputRef=g(),this.popoverRef=g(),this.calBodyRef=g(),this.timePickerRef=g(),this._containRepositionFrame=null,this.temporalSupported=!0,this.mode="date",this._value="",this.placeholder="Select...",this.min="",this.max="",this.disabled=!1,this.name="",this.required=!1,this.requiredMessage="",this.open=!1,this.parsed={kind:"none"},this._parsedMinDate=null,this._parsedMaxDate=null,this._hour=12,this._minute=0,this._period="AM",this._rangeAnchor=null,this._rangePreview=null,this._cachedGridKey="",this._cachedGrid=[],this._valueOnOpen="",this._touchStartX=0,this._touchStartY=0,this._touchGesture="none",this._swipeAnimating=!1,this._swipeAnimationGeneration=0,this._longPressTimer=0,this._edgeScrollTimer=0}get value(){return this._value}set value(e){const t=this._value;this._value=e,this.requestUpdate("value",t),this._syncFromValue(),this.formCtrl.syncValue()}get _rangePhase(){return this._rangeAnchor?this.parsed.kind==="range"?"complete":"start":"empty"}_getGrid(){const e=[this.viewDate?.toString(),this._value,this._rangeAnchor?.toString()??"",this._rangePreview?.toString()??""].join("|");if(e!==this._cachedGridKey){this._cachedGridKey=e;const t=H(this.parsed),{start:i,end:o}=z(this.mode,this.parsed,this._rangeAnchor,this._rangePreview);this._cachedGrid=W(this.viewDate,t,i,o,this._minDate,this._maxDate)}return this._cachedGrid}_dateAtPoint(e,t){const i=this.shadowRoot?.elementsFromPoint(e,t);if(!i)return null;for(const o of i){const s=o.dataset?.date;if(s)try{return Temporal.PlainDate.from(s)}catch{return null}}return null}_edgeSide(e){const t=this.shadowRoot?.querySelector(".calendar");if(!t)return null;const i=t.getBoundingClientRect(),o=this.shadowRoot?.querySelector(".day-cell"),s=o?o.getBoundingClientRect().width:32;return e<=i.left+s?"left":e>=i.right-s?"right":null}_onCalendarTouchStart(e){if(e.touches.length!==1||this._swipeAnimating)return;const t=e.touches[0];if(this._touchStartX=t.clientX,this._touchStartY=t.clientY,this._touchGesture="pending",this._clearLongPressTimer(),this.mode==="range"&&this._rangePhase!=="empty"){const i=this.shadowRoot?.querySelector(".calendar");i&&(i.style.touchAction="none"),this._longPressTimer=window.setTimeout(()=>{if(this._longPressTimer=0,this._touchGesture!=="pending")return;this._touchGesture="drag";const o=this._dateAtPoint(this._touchStartX,this._touchStartY);o&&!this._isDateDisabled(o)&&(this._rangePhase==="complete"&&(this._rangeAnchor=o,this._value="",this.parsed={kind:"none"},this.formCtrl.syncValue()),this._rangePreview=o,this.requestUpdate())},_.LONG_PRESS_MS)}}_onCalendarTouchMove(e){if(e.touches.length!==1||this._swipeAnimating||this._touchGesture==="none")return;const t=e.touches[0],i=t.clientX-this._touchStartX,o=t.clientY-this._touchStartY;if(this._touchGesture==="drag"){e.cancelable&&e.preventDefault();const s=this._dateAtPoint(t.clientX,t.clientY);s&&!this._isDateDisabled(s)&&(this._rangePreview=s),this._handleEdgeScroll(t.clientX);return}if(this._touchGesture==="pending"){if(Math.abs(i)<10&&Math.abs(o)<10)return;if(this._clearLongPressTimer(),Math.abs(o)>Math.abs(i)){this._touchGesture="none",this._resetTouchAction();return}this._touchGesture="swipe"}if(this._touchGesture==="swipe"){e.cancelable&&e.preventDefault();const s=this.calBodyRef.value;s&&(s.style.transition="none",s.style.transform=`translateX(${i}px)`)}}_onCalendarTouchEnd(e){this._clearLongPressTimer(),this._clearEdgeScrollTimer(),this._resetTouchAction();const t=this._touchGesture;if(this._touchGesture="none",t==="drag"){if(e.changedTouches.length===1){const o=e.changedTouches[0];let s=this._dateAtPoint(o.clientX,o.clientY);if(s||(s=this._rangePreview),s&&!this._isDateDisabled(s)&&this._rangeAnchor){const a=this._rangeAnchor;let l,c;Temporal.PlainDate.compare(s,a)<0?(l=s,c=a):(l=a,c=s),this._rangePreview=null,this.value=`${l.toString()}/${c.toString()}`,this._dispatchValueChanged()}}return}if(t==="swipe"){this._finishSwipe(e);return}const i=this.calBodyRef.value;i&&(i.style.transition="",i.style.transform="")}_finishSwipe(e){const t=this.calBodyRef.value;if(!t||e.changedTouches.length!==1){t&&(t.style.transition="",t.style.transform="");return}const o=e.changedTouches[0].clientX-this._touchStartX,s=t.offsetWidth;if(Math.abs(o)>=30){const a=o<0?1:-1,l=a===1?-s:s,c=++this._swipeAnimationGeneration;this._swipeAnimating=!0,t.style.transition="transform 150ms ease-in",t.style.transform=`translateX(${l}px)`,t.addEventListener("transitionend",()=>{c!==this._swipeAnimationGeneration||!this.open||!this.isConnected||(this._navigateMonth(a),this.updateComplete.then(()=>{if(c!==this._swipeAnimationGeneration||!this.open||!this.isConnected)return;const h=this.calBodyRef.value;if(!h){this._swipeAnimating=!1;return}h.style.transition="none",h.style.transform=`translateX(${-l}px)`,h.getBoundingClientRect(),h.style.transition="transform 150ms ease-out",h.style.transform="",h.addEventListener("transitionend",()=>{c===this._swipeAnimationGeneration&&(h.style.transition="",this._swipeAnimating=!1)},{once:!0})}))},{once:!0})}else t.style.transition="transform 150ms ease-out",t.style.transform="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}_resetSwipeAnimation(){this._swipeAnimationGeneration+=1,this._swipeAnimating=!1;const e=this.calBodyRef.value;e&&(e.style.transition="",e.style.transform="")}_clearLongPressTimer(){this._longPressTimer&&(clearTimeout(this._longPressTimer),this._longPressTimer=0)}_handleEdgeScroll(e){const t=this._edgeSide(e);if(!t){this._clearEdgeScrollTimer();return}if(this._edgeScrollTimer)return;const i=t==="right"?1:-1;this._edgeScrollTimer=window.setTimeout(async()=>{this._edgeScrollTimer=0,this._touchGesture==="drag"&&(this._navigateMonth(i),await this.updateComplete)},_.EDGE_SCROLL_MS)}_clearEdgeScrollTimer(){this._edgeScrollTimer&&(clearTimeout(this._edgeScrollTimer),this._edgeScrollTimer=0)}_resetTouchAction(){const e=this.shadowRoot?.querySelector(".calendar");e&&e.style.removeProperty("touch-action")}connectedCallback(){if(super.connectedCallback(),typeof window.Temporal>"u"){this.temporalSupported=!1;return}this.viewDate||(this.viewDate=Temporal.Now.plainDateISO().toPlainYearMonth()),this.focusedDate||(this.focusedDate=Temporal.Now.plainDateISO()),this._parsedMinDate=y(this.min),this._parsedMaxDate=y(this.max),this._syncFromValue(),this.formCtrl.validate()}disconnectedCallback(){this._resetSwipeAnimation(),this._containRepositionFrame!==null&&(cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=null),super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),e.has("min")&&(this._parsedMinDate=y(this.min)),e.has("max")&&(this._parsedMaxDate=y(this.max))}updated(e){super.updated(e),e.has("disabled")&&(this.internals.ariaDisabled=this.disabled?"true":"false"),e.has("required")&&(this.internals.ariaRequired=this.required?"true":"false",this.formCtrl.validate()),(e.has("min")||e.has("max"))&&this.formCtrl.validate()}focus(e){this.focusResolvedElementAfterUpdate(()=>this.inputRef.value,e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}_syncFromValue(){if(this.temporalSupported)switch(this.parsed=U(this._value,this.mode),this.parsed.kind){case"date":this.viewDate=this.parsed.date.toPlainYearMonth(),this.focusedDate=this.parsed.date;break;case"datetime":{this.viewDate=this.parsed.datetime.toPlainDate().toPlainYearMonth(),this.focusedDate=this.parsed.datetime.toPlainDate();const e=this.parsed.datetime.toPlainTime(),t=e.hour;this._period=t>=12?"PM":"AM",this._hour=t===0?12:t>12?t-12:t,this._minute=e.minute;break}case"time":{const e=this.parsed.time,t=e.hour;this._period=t>=12?"PM":"AM",this._hour=t===0?12:t>12?t-12:t,this._minute=e.minute;break}case"range":this.viewDate=this.parsed.start.toPlainYearMonth(),this.focusedDate=this.parsed.start,this._rangeAnchor=this.parsed.start,this._rangePreview=null;break;case"none":break}}_getValidityResult(){if(!this.temporalSupported)return null;if(this.required&&!this._value)return{flags:{valueMissing:!0},message:this.requiredMessage||"Please select a date."};if(this._value&&this.parsed.kind==="none")return{flags:{typeMismatch:!0},message:"The value is not a valid date."};const e=this._getValidationDates();if(e.length>0){const t=this._minDate,i=this._maxDate;if(t){for(const o of e)if(Temporal.PlainDate.compare(o,t)<0)return{flags:{rangeUnderflow:!0},message:`Date must not be before ${T(t)}.`}}if(i){for(const o of e)if(Temporal.PlainDate.compare(o,i)>0)return{flags:{rangeOverflow:!0},message:`Date must not be after ${T(i)}.`}}}return null}_getValidationDates(){switch(this.parsed.kind){case"date":return[this.parsed.date];case"datetime":return[this.parsed.datetime.toPlainDate()];case"range":return[this.parsed.start,this.parsed.end];default:return[]}}get _minDate(){return this._parsedMinDate}get _maxDate(){return this._parsedMaxDate}_isDateDisabled(e){return N(e,this._minDate,this._maxDate)}_navigateMonth(e){this.viewDate=this.viewDate.add({months:e}),this.focusedDate=this.viewDate.toPlainDate({day:Math.min(this.focusedDate.day,this.viewDate.daysInMonth)})}_moveFocus(e){const t=this.focusedDate.add({days:e});if(this._isDateDisabled(t)){const o=e>0?1:-1;let s=t;for(let a=0;a<L&&this._isDateDisabled(s);a++)s=s.add({days:o});this.focusedDate=s}else this.focusedDate=t;const i=this.focusedDate.toPlainYearMonth();Temporal.PlainYearMonth.compare(i,this.viewDate)!==0&&(this.viewDate=i),this.mode==="range"&&this._rangePhase==="start"&&(this._rangePreview=this.focusedDate)}_selectDate(e){if(!this._isDateDisabled(e)){switch(this.mode){case"date":this.value=e.toString(),this._closePopover(),this.inputRef.value?.focus();break;case"datetime":{const t=this.parsed.kind==="datetime"?this.parsed.datetime.toPlainTime():new Temporal.PlainTime;this.value=e.toPlainDateTime(t).toString();break}case"range":this._selectRangeEndpoint(e);break}this._dispatchValueChanged()}}_selectRangeEndpoint(e){switch(this._rangePhase){case"empty":case"complete":this._rangeAnchor=e,this._rangePreview=null,this._value="",this.parsed={kind:"none"},this.formCtrl.syncValue(),this.requestUpdate();break;case"start":{const i=this._rangeAnchor;let o,s;Temporal.PlainDate.compare(e,i)<0?(o=e,s=i):(o=i,s=e),this._rangePreview=null,this.value=`${o.toString()}/${s.toString()}`;break}}}_dispatchValueChanged(){this.emitValueChanged(this._value)}get _showTimePicker(){return this.mode==="time"||this.mode==="datetime"}get _showCalendar(){return this.mode!=="time"}_commitTime(){let e=this._hour%12;this._period==="PM"&&(e+=12);const t=new Temporal.PlainTime(e,this._minute);if(this.mode==="time")this.value=t.toString();else if(this.mode==="datetime"){const i=this.parsed.kind==="datetime"?this.parsed.datetime.toPlainDate():this.parsed.kind==="date"?this.parsed.date:Temporal.Now.plainDateISO();this.value=i.toPlainDateTime(t).toString()}this._dispatchValueChanged()}async _openPopover(){if(this.disabled||(this.popoverCtrl.publishCloseOthers(),this._valueOnOpen=this._value,this.open=!0,this._positionPopover(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick(),await this.updateComplete,!this.open||!this.isConnected))return;this._shrinkTimePickerToFit(),this._scrollToContainPopover();const t=this.shadowRoot?.querySelector('[role="grid"]')?.querySelector('[tabindex="0"]');requestAnimationFrame(()=>{this.open&&this.isConnected&&t?.focus()})}_closePopover(){this.open=!1,this._resetSwipeAnimation(),this._containRepositionFrame!==null&&(cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=null);const e=this.popoverRef.value;if(e){e.classList.remove("visible");try{e.hidePopover()}catch{}}this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.mode==="range"&&this._rangePhase==="start"&&(this._rangeAnchor=null,this._rangePreview=null)}_togglePopover(){this.open?this._closePopover():this._openPopover()}_positionPopover(){if(!this.open)return;const e=this.popoverRef.value;if(!e)return;const t=this.getBoundingClientRect(),{width:i,height:o}=D(),{spaceAbove:s,spaceBelow:a}=E(t,o);e.matches(":popover-open")||e.showPopover(),e.style.removeProperty("top"),e.style.removeProperty("bottom"),e.style.removeProperty("font-size"),e.style.setProperty("width","min-content"),this._shrinkToFitViewport(e,i);let l=t.left;const c=e.offsetWidth;l+c>i&&(l=Math.max(0,i-c)),e.style.setProperty("left",`${l}px`);const h=e.offsetHeight;if(s>a){let m=o-t.top;h>s&&(m=o-h),e.style.setProperty("bottom",`${m}px`)}else{let m=t.bottom;h>a&&(m=o-h),e.style.setProperty("top",`${Math.max(0,m)}px`)}requestAnimationFrame(()=>e.classList.add("visible"))}_shrinkToFitViewport(e,t){if(e.offsetWidth<=t)return;const i=getComputedStyle(e);let o=parseFloat(i.fontSize);const s=8;for(;e.offsetWidth>t&&o>s;)o-=.5,e.style.setProperty("font-size",`${o}px`)}_shrinkTimePickerToFit(){const e=this.timePickerRef.value,t=this.popoverRef.value;if(!e||!t)return;e.style.removeProperty("font-size");const i=t.clientWidth;if(e.scrollWidth<=i)return;const o=getComputedStyle(e);let s=parseFloat(o.fontSize);const a=8;for(;e.scrollWidth>i&&s>a;)s-=.5,e.style.setProperty("font-size",`${s}px`)}_scrollToContainPopover(){const e=this.popoverRef.value;e&&(this._containRepositionFrame!==null&&cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=F(this,e,()=>{this._containRepositionFrame=null,this.open&&this._positionPopover()}))}async _handleGridKeyDown(e){let t=!0;switch(e.key){case"ArrowLeft":this._moveFocus(-1);break;case"ArrowRight":this._moveFocus(1);break;case"ArrowUp":this._moveFocus(-7);break;case"ArrowDown":this._moveFocus(7);break;case"Home":{const i=this.focusedDate.dayOfWeek;i>1&&this._moveFocus(-(i-1));break}case"End":{const i=this.focusedDate.dayOfWeek;i<7&&this._moveFocus(7-i);break}case"PageUp":this._navigateMonth(e.shiftKey?-12:-1);break;case"PageDown":this._navigateMonth(e.shiftKey?12:1);break;case"Enter":case" ":this._selectDate(this.focusedDate);break;case"Escape":this._closePopover(),this.inputRef.value?.focus();break;default:t=!1}t&&(e.preventDefault(),e.stopPropagation(),await this.updateComplete,this.shadowRoot?.querySelector('[role="grid"]')?.querySelector('[tabindex="0"]')?.focus())}_onDayCellHover(e){this.mode==="range"&&this._rangePhase==="start"&&(this._rangePreview=e)}render(){return this.temporalSupported?d`
       
       <div class="esp-field" @click=${()=>this._togglePopover()}>
         <input
@@ -22,14 +22,14 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
         popover="manual"
         @keydown=${e=>{e.key==="Tab"&&(e.preventDefault(),this._closePopover(),this.inputRef.value?.focus())}}
       >
-        ${this._showCalendar?this._renderCalendar():P}
-        ${this._showTimePicker?this._renderTimePicker():P}
-        ${!this._showTimePicker&&this.mode!=="date"?this._renderActions():P}
+        ${this._showCalendar?this._renderCalendar():w}
+        ${this._showTimePicker?this._renderTimePicker():w}
+        ${!this._showTimePicker&&this.mode!=="date"?this._renderActions():w}
       </div>
-    `:c`<p class="temporal-error">
+    `:d`<p class="temporal-error">
         <code>Temporal</code> API not found. Load the polyfill in <code>&lt;head&gt;</code> before
         using <code>&lt;esp-date-picker&gt;</code>.
-      </p>`}_renderCalendar(){const e=this._getGrid(),t=`${T[this.viewDate.month-1]} ${this.viewDate.year}`;return c`
+      </p>`}_renderCalendar(){const e=this._getGrid(),t=`${R[this.viewDate.month-1]} ${this.viewDate.year}`;return d`
       <div
         class="calendar"
         @keydown=${i=>this._handleGridKeyDown(i)}
@@ -60,7 +60,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
         
         <div ${v(this.calBodyRef)} class="cal-body">
           <div class="weekday-row" role="row">
-            ${X.map(i=>c`<abbr class="weekday-label" title=${i}>${i}</abbr>`)}
+            ${X.map(i=>d`<abbr class="weekday-label" title=${i}>${i}</abbr>`)}
           </div>
 
           <div class="day-grid" role="grid" aria-label=${t}>
@@ -68,11 +68,11 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           </div>
         </div>
       </div>
-    `}_renderGridRows(e){const t=[];for(let i=0;i<q;i++){const r=e.slice(i*k,(i+1)*k);t.push(c`
+    `}_renderGridRows(e){const t=[];for(let i=0;i<q;i++){const o=e.slice(i*k,(i+1)*k);t.push(d`
         <div class="day-row" role="row">
-          ${M(r,s=>s.date.toString(),s=>this._renderDayCell(s))}
+          ${A(o,s=>s.date.toString(),s=>this._renderDayCell(s))}
         </div>
-      `)}return t}_renderDayCell(e){const t=this.focusedDate&&Temporal.PlainDate.compare(e.date,this.focusedDate)===0,i={"day-cell":!0,"outside-month":e.isOutsideMonth,today:e.isToday,selected:e.isSelected||e.isRangeStart||e.isRangeEnd,"range-start":e.isRangeStart,"range-end":e.isRangeEnd,"in-range":e.isInRange,disabled:e.isDisabled,focused:t};return c`
+      `)}return t}_renderDayCell(e){const t=this.focusedDate&&Temporal.PlainDate.compare(e.date,this.focusedDate)===0,i={"day-cell":!0,"outside-month":e.isOutsideMonth,today:e.isToday,selected:e.isSelected||e.isRangeStart||e.isRangeEnd,"range-start":e.isRangeStart,"range-end":e.isRangeEnd,"in-range":e.isInRange,disabled:e.isDisabled,focused:t};return d`
       <button
         role="gridcell"
         class=${C(i)}
@@ -81,14 +81,14 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
         aria-selected=${e.isSelected||e.isRangeStart||e.isRangeEnd?"true":"false"}
         aria-disabled=${e.isDisabled?"true":"false"}
         ?disabled=${e.isDisabled}
-        aria-label=${`${T[e.date.month-1]} ${e.date.day}, ${e.date.year}`}
+        aria-label=${`${R[e.date.month-1]} ${e.date.day}, ${e.date.year}`}
         aria-current=${e.isToday?"date":"false"}
-        @click=${async r=>{r.stopPropagation(),this.focusedDate=e.date,this._selectDate(e.date),this.open&&(await this.updateComplete,this.shadowRoot?.querySelector('[role="grid"]')?.querySelector('[tabindex="0"]')?.focus())}}
+        @click=${async o=>{o.stopPropagation(),this.focusedDate=e.date,this._selectDate(e.date),this.open&&(await this.updateComplete,this.shadowRoot?.querySelector('[role="grid"]')?.querySelector('[tabindex="0"]')?.focus())}}
         @pointerenter=${()=>this._onDayCellHover(e.date)}
       >
         ${e.date.day}
       </button>
-    `}_renderTimePicker(){return c`
+    `}_renderTimePicker(){return d`
       <div ${v(this.timePickerRef)} class="time-picker" aria-label="Time picker">
         <esp-pick-one
           class="time-pick"
@@ -97,7 +97,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           .value=${String(this._hour)}
           @esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._hour=Number(e.detail.value),this._commitTime())}}
         >
-          ${I.map(e=>c`
+          ${I.map(e=>d`
               <esp-picker-item
                 text=${String(e)}
                 value=${String(e)}
@@ -115,7 +115,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           .value=${String(this._minute)}
           @esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._minute=Number(e.detail.value),this._commitTime())}}
         >
-          ${B.map(e=>c`
+          ${B.map(e=>d`
               <esp-picker-item
                 text=${String(e).padStart(2,"0")}
                 value=${String(e)}
@@ -157,7 +157,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           ${S}
         </esp-button>
       </div>
-    `}_renderActions(){return c`
+    `}_renderActions(){return d`
       <div class="popover-actions">
         <esp-button
           icon-only
@@ -173,4 +173,4 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           ${S}
         </esp-button>
       </div>
-    `}};o.formAssociated=!0,o.LONG_PRESS_MS=400,o.EDGE_SCROLL_MS=1e3,o.styles=[...D.styles,j],n([d()],o.prototype,"temporalSupported",void 0),n([p({type:String,reflect:!0})],o.prototype,"mode",void 0),n([p({type:String})],o.prototype,"value",null),n([p({type:String})],o.prototype,"placeholder",void 0),n([p({type:String})],o.prototype,"min",void 0),n([p({type:String})],o.prototype,"max",void 0),n([p({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),n([p({type:String,reflect:!0})],o.prototype,"name",void 0),n([p({type:Boolean,reflect:!0})],o.prototype,"required",void 0),n([p({attribute:"required-message"})],o.prototype,"requiredMessage",void 0),n([d()],o.prototype,"viewDate",void 0),n([d()],o.prototype,"focusedDate",void 0),n([d()],o.prototype,"open",void 0),n([d()],o.prototype,"parsed",void 0),n([d()],o.prototype,"_hour",void 0),n([d()],o.prototype,"_minute",void 0),n([d()],o.prototype,"_period",void 0),n([d()],o.prototype,"_rangeAnchor",void 0),n([d()],o.prototype,"_rangePreview",void 0),o=_=n([R("esp-date-picker")],o);export{o as EspalierDatePicker};
+    `}};r.formAssociated=!0,r.LONG_PRESS_MS=400,r.EDGE_SCROLL_MS=1e3,r.styles=[...P.styles,j],n([p()],r.prototype,"temporalSupported",void 0),n([u({type:String,reflect:!0})],r.prototype,"mode",void 0),n([u({type:String})],r.prototype,"value",null),n([u({type:String})],r.prototype,"placeholder",void 0),n([u({type:String})],r.prototype,"min",void 0),n([u({type:String})],r.prototype,"max",void 0),n([u({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),n([u({type:String,reflect:!0})],r.prototype,"name",void 0),n([u({type:Boolean,reflect:!0})],r.prototype,"required",void 0),n([u({attribute:"required-message"})],r.prototype,"requiredMessage",void 0),n([p()],r.prototype,"viewDate",void 0),n([p()],r.prototype,"focusedDate",void 0),n([p()],r.prototype,"open",void 0),n([p()],r.prototype,"parsed",void 0),n([p()],r.prototype,"_hour",void 0),n([p()],r.prototype,"_minute",void 0),n([p()],r.prototype,"_period",void 0),n([p()],r.prototype,"_rangeAnchor",void 0),n([p()],r.prototype,"_rangePreview",void 0),r=_=n([$("esp-date-picker")],r);export{r as EspalierDatePicker};

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

@@ -21,8 +21,8 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  *    for width with the main well; content narrows but is never
  *    covered.
  * 4. **Overlay drawer** — when the complete sidebar + main + help
- *    minimums do not fit, or below the mobile threshold (`50em`, the
- *    same one the `esp-menu` drawer uses), the panel becomes a fixed
+ *    minimums do not fit, or below `COMPACT_VIEWPORT_MEDIA_QUERY` (the
+ *    same breakpoint the `esp-menu` drawer uses), the panel becomes a fixed
  *    drawer over a vellum backdrop. Set `mode="overlay"` to get this
  *    presentation at every width.
  *
@@ -136,7 +136,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  * </script>
  * ```
  *
- * Below the `50em` viewport threshold every flyout becomes a fixed
+ * Below `COMPACT_VIEWPORT_MEDIA_QUERY` every flyout becomes a fixed
  * overlay drawer over a vellum — there is no room for a side-by-side
  * split on a phone. `mode="overlay"` forces that presentation at any
  * width (try it here; `Escape` or the vellum closes it):
@@ -326,7 +326,7 @@ export declare class EspalierFlyout extends EspalierElementBase {
      *
      * - `"auto"` (default) — the page's placement ladder: gutter,
      *   docked sidebar, then overlay drawer when the complete in-grid
-     *   minimums do not fit or below the `50em` viewport threshold.
+     *   minimums do not fit or below `COMPACT_VIEWPORT_MEDIA_QUERY`.
      * - `"overlay"` — always the fixed overlay drawer, at any width.
      *   The page never reserves a grid track for an overlay-mode
      *   flyout.

package/dist/flyout/esp-flyout.js

@@ -1,4 +1,4 @@
-var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(u,e,t,s);else for(var i=u.length-1;i>=0;i--)(n=u[i])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as p,html as w,nothing as O}from"lit";import{customElement as S,property as h}from"lit/decorators.js";import{classMap as F}from"lit/directives/class-map.js";import{createRef as L,ref as G}from"lit/directives/ref.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as y}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as k,markFlyoutRequestServiced as M}from"../shared/flyout-events.js";import{OverlayController as H}from"../shared/overlay-controller.js";import{cancelSVG as q}from"../shared/svgs/cancel.js";import{traverseToClosest as v}from"../shared/utilities.js";import{RafThrottle as B}from"../shared/raf-throttle.js";const $="(max-width: 50em)",V="Flyout",R=p`
+var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(u,e,t,s);else for(var i=u.length-1;i>=0;i--)(n=u[i])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as p,html as w,nothing as S,unsafeCSS as F}from"lit";import{customElement as L,property as h}from"lit/decorators.js";import{classMap as G}from"lit/directives/class-map.js";import{createRef as M,ref as q}from"lit/directives/ref.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as v}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as k,markFlyoutRequestServiced as H}from"../shared/flyout-events.js";import{OverlayController as B}from"../shared/overlay-controller.js";import{cancelSVG as V}from"../shared/svgs/cancel.js";import{traverseToClosest as y}from"../shared/utilities.js";import{RafThrottle as $}from"../shared/raf-throttle.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as R}from"../shared/responsive.js";import{focusRing as I,quietCloseButton as Y}from"../shared/style-fragments.js";const D=R,U="Flyout",E=p`
   position: fixed;
   inset: 0;
   margin-block-start: 0;
@@ -13,7 +13,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
   inset: 0;
   background-color: var(--esp-vellum-background, var(--esp-color-layer-3));
   opacity: var(--esp-vellum-opacity, 0.85);
-`,E=p`
+`,C=p`
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
@@ -31,26 +31,26 @@ 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 _=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`
+`;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 $(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=M(),this.overlay=new B({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(D)),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||(v().subscribe("show-flyout",this.boundShowRequest),v().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(v().unsubscribe("show-flyout",this.boundShowRequest),v().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)&&(H(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=y(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=y(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"&&y(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=y(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,_=Math.max(0,i.top+m-r.bottom),T=Math.max(0,m-c),g=Math.min(_,T);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const P=i.top-g,b=8,O=i.top+c/2,z=Math.min(Math.max(b,m-b),Math.max(b,O-P));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${z}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?U:"");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})}
+        class=${G({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
         part="panel"
-        ${G(this.panelRef)}
+        ${q(this.panelRef)}
       >
         <span class="anchor-terminus" aria-hidden="true"></span>
         <header part="header">
-          ${this.heading?w`<h2>${this.heading}</h2>`:O}
+          ${this.heading?w`<h2>${this.heading}</h2>`:S}
           
           <button class="close" aria-label="Close" @click=${()=>this.close("button")}>
-            ${q}
+            ${V}
           </button>
         </header>
         <div class="content" part="content">
           <slot @slotchange=${this.boundAnchorViewportChange}></slot>
         </div>
       </div>
-    `}};a.styles=[...A.styles,p`
+    `}};a.styles=[...A.styles,...Y(".panel > header > .close","1.25em"),I(".panel > header > .close:focus-visible","--esp-color-link","0 0 0 3px","inset"),p`
       :host {
         display: none;
       }
@@ -177,19 +177,6 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
 
           > .close {
             margin-inline-start: auto;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border: none;
-            background: transparent;
-            color: var(--esp-color-text);
-            cursor: pointer;
-            padding: var(--esp-size-tiny);
-
-            svg {
-              width: 1.25em;
-              height: 1.25em;
-            }
           }
         }
 
@@ -206,7 +193,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
       
       :host([open][mode="overlay"]),
       :host([open][data-page-overlay]) {
-        ${R}
+        ${E}
       }
 
       :host([open][mode="overlay"]) .vellum,
@@ -216,7 +203,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
 
       :host([open][mode="overlay"]) .panel,
       :host([open][data-page-overlay]) .panel {
-        ${E}
+        ${C}
       }
 
       :host([open][mode="overlay"]) .panel.anchored::before,
@@ -229,9 +216,9 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
       }
 
       
-      @media (max-width: 50em) {
+      @media ${F(R)} {
         :host([open]) {
-          ${R}
+          ${E}
         }
 
         .vellum {
@@ -239,7 +226,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
         }
 
         .panel {
-          ${E}
+          ${C}
         }
 
         .panel.anchored::before,
@@ -254,4 +241,4 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
           transition: none;
         }
       }
-    `],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([S("esp-flyout")],a);export{a as EspalierFlyout};
+    `],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([L("esp-flyout")],a);export{a as EspalierFlyout};

package/dist/form-item/esp-form-item.d.ts

@@ -11,6 +11,17 @@ export type EspalierFormField = {
  * information about forms, read our
  * [guide for working with forms](/espalier-guides/#forms).
  *
+ * Exactly one element belongs in the default slot. That control may be
+ * replaced or moved to another `esp-form-item` after render: the old binding
+ * is removed before the new one is applied, including form-item-owned name,
+ * description, accessible-label, validation-listener, and help-target state.
+ * Consumer-authored name and description values are preserved. An empty or
+ * multi-control default slot is reported asynchronously from the queued
+ * slotchange reconciliation, after synchronous DOM moves have settled; the
+ * error cannot be caught around the mutation itself. The same invalid initial
+ * assignment is reported synchronously from `firstUpdated` and rejects the
+ * component's first `updateComplete` promise.
+ *
  * ```html
  * <style>
  * esp-box.demo-form::part(box) {

package/dist/form-item/esp-form-item.js

@@ -1,16 +1,16 @@
-var o=function(h,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,e,t,r);else for(var c=h.length-1;c>=0;c--)(a=h[c])&&(i=(s<3?a(i):s>3?a(e,t,i):a(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as f,css as u,html as p,nothing as d}from"lit";import{customElement as g,property as l}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{createRef as b,ref as y}from"lit/directives/ref.js";import{VALIDITY_CHANGED_EVENT as w}from"../shared/validation.js";import"../help/esp-help-button.js";import{resolveHelpTarget as E}from"../help/help-document.js";let m=0,n=class extends f{constructor(){super(...arguments),this.fieldSlot=b(),this.theField={focus:()=>{}},this._errorSource="manual",this.label="",this.autofocus=!1,this.hint="",this.hintPlacement="below",this.hintId=`esp-form-item-hint-${++m}`,this.managedHintEl=null,this.appliedHintTokens=[],this.hintContentObserver=new MutationObserver(()=>{this.syncFieldDescribedBy()}),this._error="",this._warning="",this.fieldName="",this.helpUrl="",this.helpTitleSource="field",this._errorPool=[],this.handleHintSlotChange=()=>{this.syncManagedHint(),this.observeConsumerHintContent(),this.requestUpdate(),this.syncFieldDescribedBy()}}get hasHint(){return!!this.hint||this.consumerHintElements().length>0}consumerHintElements(){return[...this.children].filter(e=>e.slot==="hint"&&!e.hasAttribute("data-esp-managed-hint"))}get error(){return this._error}set error(e){this._setError(e,"manual")}_setError(e,t){const r=this._error;this._error=e,this._errorSource=t,this.requestUpdate("error",r)}get warning(){return this._warning}set warning(e){const t=this._warning;this._warning=e,this.requestUpdate("warning",t)}get errorPool(){return this._errorPool}set errorPool(e){const t=this._errorPool;this._errorPool=e,this.requestUpdate("errorPool",t);const r=e.filter(s=>s.fieldName===this.fieldName);if(r.length===0){this._errorSource==="pool"&&this._setError("","pool");return}this._setError(r[0].errorMessage,"pool")}firstUpdated(){if(this.fieldSlot.value?.assignedElements().length!=1)throw new Error("esp-form-item requires exactly one slotted element.");const e=this.fieldSlot.value?.assignedElements()[0];this.fieldElement=e instanceof HTMLElement?e:void 0,this.theField=e,this.fieldName&&this.theField.setAttribute("name",this.fieldName),this.syncFieldDescribedBy(),this.syncFieldLabel();const t=e instanceof Element?e.localName:"";t.includes("-")&&!window.customElements.get(t)&&window.customElements.whenDefined(t).then(()=>{this.fieldSlot.value?.assignedElements()[0]===e&&(this.syncFieldDescribedBy(),this.syncFieldLabel())}),this.autofocus&&this.focus();const r=this.shadowRoot?.querySelector("esp-help-button");r&&(r.placementTarget=this.fieldElement),this.addEventListener(w,i=>{const a=i.detail;this._errorSource==="pool"&&this._error.length>0||(a.valid?this._errorSource==="native"&&this._setError("","manual"):this._setError(a.message,"native"))});const s=this.theField;s.addEventListener("invalid",i=>{i.preventDefault(),!(this._errorSource==="pool"&&this._error.length>0)&&"validationMessage"in s&&this._setError(s.validationMessage,"native")})}updated(e){if(super.updated(e),(e.has("hint")||e.has("hintPlacement"))&&(this.syncManagedHint(),this.syncFieldDescribedBy()),e.has("label")&&this.syncFieldLabel(),!e.has("fieldName"))return;const t=this.theField;t instanceof Element&&(this.fieldName?t.setAttribute("name",this.fieldName):t.removeAttribute("name"))}connectedCallback(){super.connectedCallback(),this.observeConsumerHintContent()}disconnectedCallback(){this.hintContentObserver.disconnect(),super.disconnectedCallback()}observeConsumerHintContent(){this.hintContentObserver.disconnect();for(const e of this.consumerHintElements())this.hintContentObserver.observe(e,{attributes:!0,attributeFilter:["id"],characterData:!0,childList:!0,subtree:!0})}syncManagedHint(){if(!(!!this.hint&&this.consumerHintElements().length===0)){this.managedHintEl?.remove(),this.managedHintEl=null;return}if(!this.managedHintEl){const t=document.createElement("span");t.slot="hint",t.id=this.hintId,t.toggleAttribute("data-esp-managed-hint",!0),this.managedHintEl=t,this.appendChild(t)}this.managedHintEl.textContent=this.hint}hintDescriptionIds(){return this.managedHintEl?[this.managedHintEl.id]:this.consumerHintElements().map(e=>(e.id||(e.id=`esp-form-item-hint-${++m}`),e.id))}hintDescriptionText(){if(!this.hasHint)return null;if(this.managedHintEl)return this.managedHintEl.textContent??"";const e=this.consumerHintElements();return e.length===0?this.hint:e.map(t=>t.textContent?.trim()??"").filter(Boolean).join(" ")}syncFieldDescribedBy(){const e=this.fieldSlot.value?.assignedElements()[0];if(!e)return;const t=this.hasHint?this.hintDescriptionIds():[],r=(e.getAttribute("aria-describedby")??"").split(/\s+/).filter(i=>i&&!this.appliedHintTokens.includes(i)&&!t.includes(i));this.appliedHintTokens=t;const s=[...r,...t];s.length>0?e.setAttribute("aria-describedby",s.join(" ")):e.removeAttribute("aria-describedby"),e.setFormItemDescription?.(this.hintDescriptionText())}syncFieldLabel(){this.fieldSlot.value?.assignedElements()[0]?.setFormItemLabel?.(this.label.trim()||null)}focus(e){(this.fieldSlot.value?.assignedElements()[0]??this.theField).focus(e)}renderHint(){return p`
-      <div class="hint" aria-hidden=${this.hintPlacement==="above"?"true":d}>
+var l=function(c,e,t,i){var n=arguments.length,r=n<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(c,e,t,i);else for(var d=c.length-1;d>=0;d--)(h=c[d])&&(r=(n<3?h(r):n>3?h(e,t,r):h(e,t))||r);return n>3&&r&&Object.defineProperty(e,t,r),r};import{LitElement as H,css as w,html as p,nothing as m}from"lit";import{customElement as k,property as o}from"lit/decorators.js";import{classMap as N}from"lit/directives/class-map.js";import{createRef as F,ref as _}from"lit/directives/ref.js";import{VALIDITY_CHANGED_EVENT as g}from"../shared/validation.js";import"../help/esp-help-button.js";import{resolveHelpTarget as T}from"../help/help-document.js";import{describedByTokens as v,setDescribedByTokens as b}from"../shared/aria-describedby.js";let y=0;const a=new WeakMap,E=new WeakMap;let s=class extends H{constructor(){super(...arguments),this.fieldSlot=F(),this.fieldReconcileQueued=!1,this.pendingNativeError=null,this.pendingNativeErrorTimer=null,this.handleValidityChanged=e=>{const t=this.fieldElement;if(!t||!e.composedPath().includes(t))return;const i=e.detail;E.set(t,{valid:i.valid}),!(this._errorSource==="pool"&&this._error.length>0)&&(i.valid?this._errorSource==="native"&&this._setError("","manual"):this._setError(i.message,"native"))},this.handleFieldInvalid=e=>{if(e.preventDefault(),this._errorSource==="pool"&&this._error.length>0)return;const t=e.currentTarget;t===this.fieldElement&&"validationMessage"in t&&this._setError(t.validationMessage,"native")},this._errorSource="manual",this.label="",this.autofocus=!1,this.hint="",this.hintPlacement="below",this.hintId=`esp-form-item-hint-${++y}`,this.managedHintEl=null,this.managedHintMutationInProgress=!1,this.managedHintRecoveryQueued=!1,this.appliedHintTokens=[],this.hintContentObserver=new MutationObserver(()=>{this.syncFieldDescribedBy()}),this._error="",this._warning="",this.fieldName="",this.helpUrl="",this.helpTitleSource="field",this._errorPool=[],this.handleFieldSlotChange=()=>{this.fieldReconcileQueued||(this.fieldReconcileQueued=!0,queueMicrotask(()=>{this.fieldReconcileQueued=!1,this.isConnected&&this.reconcileFieldSlot()}))},this.handleHintSlotChange=()=>{if(!this.managedHintMutationInProgress){if(this.hint&&this.consumerHintElements().length===0&&this.managedHintEl&&this.managedHintEl.parentElement!==this){this.managedHintRecoveryQueued||(this.managedHintRecoveryQueued=!0,queueMicrotask(()=>{this.managedHintRecoveryQueued=!1,this.syncManagedHint(),this.observeConsumerHintContent(),this.requestUpdate(),this.syncFieldDescribedBy()}));return}this.syncManagedHint(),this.observeConsumerHintContent(),this.requestUpdate(),this.syncFieldDescribedBy()}}}get hasHint(){return!!this.hint||this.consumerHintElements().length>0}consumerHintElements(){return[...this.children].filter(e=>e.slot==="hint"&&!e.hasAttribute("data-esp-managed-hint"))}get error(){return this._error}set error(e){this._setError(e,"manual")}_setError(e,t){t!=="native"&&this.clearPendingNativeError();const i=this._error;this._error=e,this._errorSource=t,this.requestUpdate("error",i)}get warning(){return this._warning}set warning(e){const t=this._warning;this._warning=e,this.requestUpdate("warning",t)}get errorPool(){return this._errorPool}set errorPool(e){const t=this._errorPool;this._errorPool=e,this.requestUpdate("errorPool",t);const i=e.filter(n=>n.fieldName===this.fieldName);if(i.length===0){this._errorSource==="pool"&&this._setError("","pool");return}this._setError(i[0].errorMessage,"pool")}firstUpdated(){this.reconcileFieldSlot(),this.autofocus&&this.focus()}updated(e){super.updated(e),(e.has("hint")||e.has("hintPlacement"))&&(this.syncManagedHint(),this.syncFieldDescribedBy()),e.has("label")&&this.syncFieldLabel(),e.has("fieldName")&&this.syncFieldName()}reconcileFieldSlot(){const e=this.fieldSlot.value?.assignedElements()??[];if(e.length!==1||!(e[0]instanceof HTMLElement))throw(!this.fieldElement||!e.includes(this.fieldElement))&&this.unbindField(),new Error("esp-form-item requires exactly one slotted element.");this.bindField(e[0])}bindField(e){if(this.syncManagedHint(),this.fieldElement!==e||a.get(e)?.owner!==this){const i=a.get(e)?.owner;i&&i!==this&&i.unbindField(e),this.unbindField(),this.fieldElement=e,a.set(e,{owner:this,originalName:e.getAttribute("name"),appliedName:null});const n=this.pendingNativeError;if(this.clearPendingNativeError(),n?.field===e){const r=e;r.validate?.();const h=typeof r.checkValidity=="function",d=r.checkValidity?.(),u=e.validity?.valid,f=E.get(e);(h?d===!1:u!==void 0?u===!1:f===void 0||f.valid===!1)&&this._errorSource!=="native"&&this._setError(n.message,"native")}e.addEventListener("invalid",this.handleFieldInvalid)}this.syncFieldName(),this.syncFieldDescribedBy(),this.syncFieldLabel(),this.syncHelpPlacementTarget();const t=e.localName;t.includes("-")&&!window.customElements.get(t)&&window.customElements.whenDefined(t).then(()=>{this.fieldElement!==e||a.get(e)?.owner!==this||this.fieldSlot.value?.assignedElements()[0]!==e||(this.syncFieldDescribedBy(),this.syncFieldLabel())})}unbindField(e=this.fieldElement){if(!e)return;e.removeEventListener("invalid",this.handleFieldInvalid);const t=a.get(e);if(t?.owner===this&&(this.removeFieldDescription(e),e.setFormItemLabel?.(null),this.restoreFieldName(e,t),a.delete(e)),this.fieldElement===e){if(this._errorSource==="native"){const i={field:e,message:this._error};this._setError("","manual"),this.pendingNativeError=i,this.pendingNativeErrorTimer=setTimeout(()=>{this.pendingNativeError===i&&this.clearPendingNativeError()})}this.fieldElement=void 0,this.appliedHintTokens=[],this.syncHelpPlacementTarget()}}clearPendingNativeError(){this.pendingNativeErrorTimer!==null&&(clearTimeout(this.pendingNativeErrorTimer),this.pendingNativeErrorTimer=null),this.pendingNativeError=null}restoreFieldName(e,t){if(t.appliedName!==null){if(e.getAttribute("name")!==t.appliedName){t.appliedName=null;return}t.originalName===null?e.removeAttribute("name"):e.setAttribute("name",t.originalName),t.appliedName=null}}syncFieldName(){const e=this.fieldElement;if(!e)return;const t=a.get(e);if(t?.owner===this){if(!this.fieldName){this.restoreFieldName(e,t);return}t.appliedName!==null&&e.getAttribute("name")!==t.appliedName&&(t.appliedName=null),t.appliedName===null&&(t.originalName=e.getAttribute("name")),e.setAttribute("name",this.fieldName),t.appliedName=this.fieldName}}syncHelpPlacementTarget(){const e=this.shadowRoot?.querySelector("esp-help-button");e&&(e.placementTarget=this.fieldElement)}connectedCallback(){super.connectedCallback(),this.addEventListener(g,this.handleValidityChanged),this.observeConsumerHintContent(),this.hasUpdated&&this.handleFieldSlotChange()}disconnectedCallback(){this.removeEventListener(g,this.handleValidityChanged),this.unbindField(),this.hintContentObserver.disconnect(),super.disconnectedCallback()}observeConsumerHintContent(){this.hintContentObserver.disconnect();for(const e of this.consumerHintElements())this.hintContentObserver.observe(e,{attributes:!0,attributeFilter:["id"],characterData:!0,childList:!0,subtree:!0})}syncManagedHint(){if(!(!!this.hint&&this.consumerHintElements().length===0)){this.managedHintMutationInProgress=!0;try{this.managedHintEl?.remove()}finally{this.managedHintMutationInProgress=!1}this.managedHintEl=null;return}if(!this.managedHintEl){const t=document.createElement("span");t.slot="hint",t.id=this.hintId,t.toggleAttribute("data-esp-managed-hint",!0),this.managedHintEl=t}if(this.managedHintEl.parentElement!==this){this.managedHintMutationInProgress=!0;try{this.appendChild(this.managedHintEl)}finally{this.managedHintMutationInProgress=!1}}this.managedHintEl.textContent=this.hint}hintDescriptionIds(){return this.managedHintEl?[this.managedHintEl.id]:this.consumerHintElements().map(e=>(e.id||(e.id=`esp-form-item-hint-${++y}`),e.id))}hintDescriptionText(){if(!this.hasHint)return null;if(this.managedHintEl)return this.managedHintEl.textContent??"";const e=this.consumerHintElements();return e.length===0?this.hint:e.map(t=>t.textContent?.trim()??"").filter(Boolean).join(" ")}syncFieldDescribedBy(){const e=this.fieldElement;if(!e)return;const t=this.hasHint?this.hintDescriptionIds():[],n=v(e).filter(r=>!this.appliedHintTokens.includes(r));this.appliedHintTokens=t.filter(r=>!n.includes(r)),b(e,[...n,...t],{deduplicate:!0}),e.setFormItemDescription?.(this.hintDescriptionText())}removeFieldDescription(e){const t=v(e).filter(i=>!this.appliedHintTokens.includes(i));b(e,t,{deduplicate:!0}),this.appliedHintTokens=[],e.setFormItemDescription?.(null)}syncFieldLabel(){this.fieldElement?.setFormItemLabel?.(this.label.trim()||null)}focus(e){const t=this.fieldSlot.value?.assignedElements()??[];(t.length===1&&t[0]instanceof HTMLElement?t[0]:this.fieldElement)?.focus(e)}renderHint(){return p`
+      <div class="hint" aria-hidden=${this.hintPlacement==="above"?"true":m}>
         <slot name="hint" @slotchange=${this.handleHintSlotChange}></slot>
       </div>
-    `}render(){const e=E(this,{helpUrl:this.helpUrl,fallbackAnchor:this.fieldName}),t=!!e?.anchor,r={"form-item":!0,"has-hint":this.hasHint,"has-help":t,"hint-above":this.hasHint&&this.hintPlacement==="above","has-error":this.error.length>0,"has-warning":this.warning.length>0&&this.error.length===0};return p`
-      <div class=${v(r)}>
+    `}render(){const e=T(this,{helpUrl:this.helpUrl,fallbackAnchor:this.fieldName}),t=!!e?.anchor,i={"form-item":!0,"has-hint":this.hasHint,"has-help":t,"hint-above":this.hasHint&&this.hintPlacement==="above","has-error":this.error.length>0,"has-warning":this.warning.length>0&&this.error.length===0};return p`
+      <div class=${N(i)}>
         <div class="field-shell">
           <label
-            @click=${s=>{this.focus(),s.stopPropagation()}}
+            @click=${n=>{this.focus(),n.stopPropagation()}}
           >
             <span class="field-label">${this.label}</span>
-            ${this.hintPlacement==="above"?this.renderHint():d}
-            <slot ${y(this.fieldSlot)}></slot>
+            ${this.hintPlacement==="above"?this.renderHint():m}
+            <slot ${_(this.fieldSlot)} @slotchange=${this.handleFieldSlotChange}></slot>
           </label>
           ${e?.anchor?p`
                 <esp-help-button
@@ -20,9 +20,9 @@ var o=function(h,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnP
                   .helpTitle=${this.helpTitleSource==="document"?"":this.label.trim()}
                   .placementTarget=${this.fieldElement}
                 ></esp-help-button>
-              `:d}
+              `:m}
         </div>
-        ${this.hintPlacement!=="above"?this.renderHint():d}
+        ${this.hintPlacement!=="above"?this.renderHint():m}
         <div class="error-message">
           <span>${this.error}</span>
         </div>
@@ -30,7 +30,7 @@ var o=function(h,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnP
           <span>${this.warning}</span>
         </div>
       </div>
-    `}};n.styles=u`
+    `}};s.styles=w`
     .form-item {
       font-family: var(
         --esp-form-item-font,
@@ -197,4 +197,4 @@ var o=function(h,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnP
         }
       }
     }
-  `,o([l({type:String})],n.prototype,"label",void 0),o([l({type:Boolean,reflect:!0})],n.prototype,"autofocus",void 0),o([l({type:String})],n.prototype,"hint",void 0),o([l({attribute:"hint-placement",type:String})],n.prototype,"hintPlacement",void 0),o([l({type:String})],n.prototype,"error",null),o([l({type:String})],n.prototype,"warning",null),o([l({attribute:"field-name",type:String})],n.prototype,"fieldName",void 0),o([l({attribute:"help-url",type:String})],n.prototype,"helpUrl",void 0),o([l({attribute:"help-title-source",type:String})],n.prototype,"helpTitleSource",void 0),o([l({attribute:"error-pool",type:Array})],n.prototype,"errorPool",null),n=o([g("esp-form-item")],n);export{n as EspalierFormItem};
+  `,l([o({type:String})],s.prototype,"label",void 0),l([o({type:Boolean,reflect:!0})],s.prototype,"autofocus",void 0),l([o({type:String})],s.prototype,"hint",void 0),l([o({attribute:"hint-placement",type:String})],s.prototype,"hintPlacement",void 0),l([o({type:String})],s.prototype,"error",null),l([o({type:String})],s.prototype,"warning",null),l([o({attribute:"field-name",type:String})],s.prototype,"fieldName",void 0),l([o({attribute:"help-url",type:String})],s.prototype,"helpUrl",void 0),l([o({attribute:"help-title-source",type:String})],s.prototype,"helpTitleSource",void 0),l([o({attribute:"error-pool",type:Array})],s.prototype,"errorPool",null),s=l([k("esp-form-item")],s);export{s as EspalierFormItem};

package/dist/menu/esp-menu.js

@@ -1,4 +1,4 @@
-var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as D,html as w,nothing as g}from"lit";import{customElement as x,property as l,state as v}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as b}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as S}from"../shared/bus-events.js";import{normalizePath as A,pathStartsWithSegment as C,pathsMatch as T}from"../shared/path-matching.js";import{SwipeRevealController as O}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const R="(max-width: 50em)";let a=class extends y{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=S(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new O(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(R),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled()}disconnectedCallback(){this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof E?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?f.MENU_DRAWER_OPENED:f.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return C(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?C(location.pathname,A(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof E){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
+var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as D,html as w,nothing as g}from"lit";import{customElement as x,property as l,state as v}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as b}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as S}from"../shared/bus-events.js";import{normalizePath as O,pathStartsWithSegment as C,pathsMatch as T}from"../shared/path-matching.js";import{SwipeRevealController as A}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as M}from"../shared/responsive.js";let a=class extends y{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=S(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new A(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(M),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled()}disconnectedCallback(){this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof E?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?f.MENU_DRAWER_OPENED:f.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return C(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?C(location.pathname,O(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof E){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}