@taprootio/espalier 4.5.0 → 4.6.0

package/dist/pickers/esp-picker-menu.js

@@ -1,22 +1,24 @@
-var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,s);else for(var n=u.length-1;n>=0;n--)(r=u[n])&&(i=(l<3?r(i):l>3?r(t,e,i):r(t,e))||i);return l>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as I,css as P,html as d}from"lit";import{customElement as b,property as g,state as v}from"lit/decorators.js";import{createRef as x,ref as S}from"lit/directives/ref.js";import{styleMap as w}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as y,viewportSize as f}from"../shared/viewport.js";import{ESP_EVENTS as m}from"../shared/events.js";const p="highlighted";let h=class extends I{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=x(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const s={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
+var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,t,r);else for(var n=a.length-1;n>=0;n--)(l=a[n])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as S,css as k,html as g,unsafeCSS as C}from"lit";import{customElement as T,property as P,state as w}from"lit/decorators.js";import{createRef as E,ref as H}from"lit/directives/ref.js";import{styleMap as A}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as I,viewportSize as m}from"../shared/viewport.js";import{ESP_EVENTS as f}from"../shared/events.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as R,compactViewportMatches as z}from"../shared/responsive.js";import{findContainingPopovers as M}from"../shared/popover-controller.js";const y="highlighted",F=44;function x(a){if(!a)return null;const e=a;return typeof e.enterPickerMenuFullscreen=="function"&&typeof e.exitPickerMenuFullscreen=="function"&&typeof e.pickerMenuIsOpen=="function"?a:null}function $(a){if(M(a).some(t=>[...t.shadowRoot?.querySelectorAll("[popover]")??[]].some(r=>r.matches(":popover-open"))))return!0;let e=a;for(;e;){const t=e.getRootNode();if(e=e.assignedSlot??e.parentElement??(t instanceof ShadowRoot?t.host:null),!e)return!1;if(e.matches(":popover-open")||e.matches("dialog[open], esp-dialog[is-open], esp-flyout[open]"))return!0}return!1}let p=class extends S{get fullscreenPresentation(){return this.hasAttribute("data-fullscreen")}constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=E(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.positionTarget=null,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=e=>{this.selectItemFromPointerEvent(e)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(e,t)=>{const r={display:"block",cursor:"pointer",width:"100%",...e.styles};return g`<esp-picker-item
       class="picker-item"
-      data-picker-index=${e}
-      .text=${t.text}
-      .value=${t.value}
-      .selected=${t.selected}
-      .icon=${t.icon??""}
-      .highlightRanges=${t.highlightRanges}
-      style=${w(s)}
+      data-picker-index=${t}
+      .text=${e.text}
+      .value=${e.value}
+      .selected=${e.selected}
+      .icon=${e.icon??""}
+      .highlightRanges=${e.highlightRanges}
+      style=${A(r)}
     >
-      ${t.slotNodes?.map(l=>l.cloneNode(!0))}
-    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let s=!1;if(e){const l=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===l.length&&this.internalPoolFingerprint.every((r,n)=>r===l[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),s=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==l.length||this.lastPoolFingerprint.some((r,n)=>r!==l[n])),this.lastPoolFingerprint=l}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=s,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=t;const s=t.filter(i=>i.selected),l=s.map(i=>i.value);(e.length!==l.length||e.some((i,r)=>i!==l[r]))&&this.dispatchEvent(new CustomEvent(m.PICKER_MENU_SELECTION_CHANGED,{detail:s,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;s&&s.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,s=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),s())return;const r=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),s()||i.scrollTop!==r)return}if(await this.stableLayout(i),s())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(p))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${p}`))e.classList.remove(p)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(p);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const s of e)if(this.virtualizedItemsPool.findIndex(i=>i.value===s.value&&i.text===s.text)===this.highlightIndex)return s;return null}pickItem(t){const e=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&e>0&&(this.preRenderScrollTop=e),e>0&&(this.internalPickScrollTop=e);for(const i of this.pickerItems)i===t?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const s=this.virtualizedItemsPool.indexOf(t);if(s!==-1){this.highlightIndex=s;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(p))}const l=[...this.pickerItems];this.internalPoolClone=l,this.internalPoolFingerprint=l.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=l,this.dispatchEvent(new CustomEvent(m.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(m.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const s=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!s)return null;for(const l of s){const i=l.getBoundingClientRect();if(t>=i.left&&t<=i.right&&e>=i.top&&e<=i.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:s}=f(),{spaceAbove:l,spaceBelow:i}=y(e,s),r=Math.max(Math.max(l,i)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=s,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>i?this.style.setProperty("bottom",`${s-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const n=this.pickerItems.find(c=>c.selected);this.highlightIndex=n?this.pickerItems.indexOf(n):0,this.openSessionGeneration+=1;const o=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{o!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const s=t.layoutComplete;if(!s)return;const l=await Promise.race([s.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===s)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(!this.isConnected)return;const o=this.shadowRoot?.querySelector(".status-message");if(o){const c=Math.min(o.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${c}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0,i=l>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),i&&s.scrollTop<l){if(s.scrollTop=l,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const r=this.virtualizedItemsPool;if(r.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const o=r.findIndex(c=>c.selected);o>=0?this.highlightIndex=o:this.highlightIndex>=r.length?this.highlightIndex=r.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const n=Math.max(i?l:0,this.internalPickScrollTop??0);if(n>0){if(s.scrollTop<n&&(s.scrollTop=n),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(o=>requestAnimationFrame(()=>o())),t())return;if(this.menuDirty)continue;s.scrollTop<n&&(s.scrollTop=n)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const s=getComputedStyle(this),l=(parseFloat(s.borderTopWidth)||0)+(parseFloat(s.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(e.length<i)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const n=t.getBoundingClientRect(),o=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),o.bottom-n.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const s=e.querySelectorAll("esp-picker-item");let l=t.width;for(const i of s)l=Math.max(l,i.scrollWidth);if(l+=2,l>t.width){const{width:i}=f(),r=Math.min(l,i-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:s}=f();if(s!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:n}=y(e,s),o=Math.max(Math.max(r,n)-75,0);this.maxAvailableHeight=o,this.lastViewportHeight=s,(parseFloat(this.style.getPropertyValue("height"))||0)>o&&this.style.setProperty("height",`${o}px`),this.sizeToContent(o)}this.style.setProperty("left",`${e.left}px`);const l=e.top,i=s-e.bottom;l>i?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${s-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
-      ${S(this.virtualizerRef)}
-      scroller
-      .items=${this.virtualizedItemsPool}
-      .renderItem=${this.renderPickerItem}
-      @pointerdown=${this.handleItemPointerDown}
-      @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(m.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
-    ></lit-virtualizer>`}};h.styles=P`
+      ${e.slotNodes?.map(s=>s.cloneNode(!0))}
+    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(e){if(super.willUpdate(e),e.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const t=this.virtualizerRef.value?.scrollTop??0;t>0&&(this.preRenderScrollTop=t)}}updated(e){super.updated(e),e.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),e.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const t=e.has("virtualizedItemsPool");let r=!1;if(t){const s=this.virtualizedItemsPool.map(l=>`${l.value}\0${l.text}\0${l.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===s.length&&this.internalPoolFingerprint.every((l,n)=>l===s[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),r=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((l,n)=>l!==s[n])),this.lastPoolFingerprint=s}(t||e.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=r,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(e){const t=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=e;const r=e.filter(i=>i.selected),s=r.map(i=>i.value);(t.length!==s.length||t.some((i,l)=>i!==s[l]))&&this.dispatchEvent(new CustomEvent(f.PICKER_MENU_SELECTION_CHANGED,{detail:r,bubbles:!0,composed:!0}))}setHighlight(e){const t=this.virtualizedItemsPool;if(t.length===0)return;(this.highlightIndex<0||this.highlightIndex>t.length-1)&&(this.highlightIndex=e);const r=this.virtualizerRef.value;r&&r.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(e){const t=this.openSessionGeneration,r=()=>t!==this.openSessionGeneration||!this.isConnected,s=this.virtualizedItemsPool;if(s.length===0)return;(this.highlightIndex<0||this.highlightIndex>s.length-1)&&(this.highlightIndex=e);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),r())return;const l=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),r()||i.scrollTop!==l)return}if(await this.stableLayout(i),r())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const e=this.getHighlightedElement();e&&(this.clearHighlight(),e.classList.add(y))}clearHighlight(){const e=this.virtualizerRef.value;if(e)for(const t of e.querySelectorAll(`esp-picker-item.${y}`))t.classList.remove(y)}resetHighlight(){this.clearHighlight();const e=this.virtualizedItemsPool.find(t=>t.selected);this.highlightIndex=e?this.virtualizedItemsPool.indexOf(e):-1}applyHighlightWithRetry(e){if(!this.isConnected||!this.matches(":popover-open"))return;const t=this.getHighlightedElement();if(t){this.clearHighlight(),t.classList.add(y);return}e>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(e-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const e=this.virtualizerRef.value;if(!e)return null;const t=e.querySelectorAll("esp-picker-item");for(const r of t)if(this.virtualizedItemsPool.findIndex(i=>i.value===r.value&&i.text===r.text)===this.highlightIndex)return r;return null}pickItem(e){const t=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&t>0&&(this.preRenderScrollTop=t),t>0&&(this.internalPickScrollTop=t);for(const i of this.pickerItems)i===e?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const r=this.virtualizedItemsPool.indexOf(e);if(r!==-1){this.highlightIndex=r;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(y))}const s=[...this.pickerItems];this.internalPoolClone=s,this.internalPoolFingerprint=s.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=s,this.dispatchEvent(new CustomEvent(f.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(f.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(e){const t=Number.isInteger(e)?this.virtualizedItemsPool[e]:void 0;return t?(this.pickItem(t),!0):!1}getPickerItemElementAtPoint(e,t){const r=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!r)return null;for(const s of r){const i=s.getBoundingClientRect();if(e>=i.left&&e<=i.right&&t>=i.top&&t<=i.bottom)return s}return null}selectPickerItemElement(e){return e?this.selectItemByIndex(Number(e.dataset.pickerIndex)):!1}selectItemAtPoint(e,t){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(e,t))}selectItemFromPointerEvent(e){const t=e.composedPath().find(s=>s instanceof HTMLElement&&s.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(t??this.getPickerItemElementAtPoint(e.clientX,e.clientY))?(e.preventDefault(),e.stopPropagation(),!0):!1}requestDismiss(){this.dispatchEvent(new CustomEvent(f.PICKER_MENU_DISMISS_REQUESTED,{bubbles:!0,composed:!0,cancelable:!0}))&&this.hideMenu()}clearFullscreenTarget(e=this.positionTarget){x(e)?.exitPickerMenuFullscreen()}syncPresentation(e){const t=this.positionTarget;t&&t!==e&&this.clearFullscreenTarget(t),this.positionTarget=e;const r=x(e),s=z()&&r!==null&&!$(e);if(!s)return this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:s,rect:e.getBoundingClientRect()};const i=r.enterPickerMenuFullscreen();return i?(this.toggleAttribute("data-fullscreen",!0),{fullscreen:s,rect:i}):(this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:!1,rect:e.getBoundingClientRect()})}applyFullscreenGeometry(e){const{height:t,width:r}=m(),s=Math.min(Math.max(e.bottom,F),t);this.maxAvailableHeight=Math.max(t-s,0),this.lastViewportHeight=t;const i={viewportWidth:r,viewportHeight:t,inputBottom:s};this.lastFullscreenGeometry?.viewportWidth===i.viewportWidth&&this.lastFullscreenGeometry.viewportHeight===i.viewportHeight&&this.lastFullscreenGeometry.inputBottom===i.inputBottom||(this.lastFullscreenGeometry=i,this.style.setProperty("height",`${t}px`),this.style.setProperty("width",`${r}px`),this.style.setProperty("min-width",`${r}px`),this.style.setProperty("left","0px"),this.style.setProperty("top","0px"),this.style.removeProperty("bottom"),this.style.setProperty("--_esp-picker-menu-input-bottom",`${s}px`))}clearFullscreenGeometry(){this.lastFullscreenGeometry=void 0,this.style.removeProperty("height"),this.style.removeProperty("width"),this.style.removeProperty("min-width"),this.style.removeProperty("left"),this.style.removeProperty("top"),this.style.removeProperty("bottom"),this.style.removeProperty("--_esp-picker-menu-input-bottom")}positionSelf(e){this.resetSettleState();const{fullscreen:t,rect:r}=this.syncPresentation(e),{height:s}=m();let i;if(t)this.applyFullscreenGeometry(r),i=this.maxAvailableHeight;else{this.clearFullscreenGeometry();const{spaceAbove:o,spaceBelow:h}=I(r,s);i=Math.max(Math.max(o,h)-75,0),this.maxAvailableHeight=i,this.lastViewportHeight=s,this.style.setProperty("height",`${i}px`),this.style.setProperty("min-width",`${r.width}px`),this.style.setProperty("left",`${r.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),o>h?this.style.setProperty("bottom",`${s-r.top}px`):this.style.setProperty("top",`${r.bottom}px`)}this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const l=this.pickerItems.find(o=>o.selected);this.highlightIndex=l?this.pickerItems.indexOf(l):0,this.openSessionGeneration+=1;const n=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{n!==this.openSessionGeneration||!this.isConnected||(this.fullscreenPresentation||(this.shrinkToFit(i),this.widenToFitContent(r)),this.classList.add("visible"))})})}async stableLayout(e){for(let t=0;t<20;t+=1){const r=e.layoutComplete;if(!r)return;const s=await Promise.race([r.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(s==="settled"||s==="deadline"||e.layoutComplete===r)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const e=this.openSessionGeneration,t=()=>e!==this.openSessionGeneration?!0:!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let r=0;r<10&&this.menuDirty;r+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(t()||this.fullscreenPresentation)return;const h=this.shadowRoot?.querySelector(".status-message");if(h){const c=Math.min(h.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${c}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const i=this.preRenderScrollTop??0,l=i>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l&&s.scrollTop<i){if(s.scrollTop=i,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const n=this.virtualizedItemsPool;if(n.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const h=n.findIndex(c=>c.selected);h>=0?this.highlightIndex=h:this.highlightIndex>=n.length?this.highlightIndex=n.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const o=Math.max(l?i:0,this.internalPickScrollTop??0);if(o>0){if(s.scrollTop<o&&(s.scrollTop=o),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(h=>requestAnimationFrame(()=>h())),t())return;if(this.menuDirty)continue;s.scrollTop<o&&(s.scrollTop=o)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>0&&this.style.setProperty("height",`${Math.min(t,e)}px`)}shrinkToFit(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>2&&t<e&&this.style.setProperty("height",`${t}px`)}measureContentHeight(){const e=this.virtualizerRef.value;if(!e)return 0;const t=e.querySelectorAll("esp-picker-item");if(t.length===0)return 0;const r=getComputedStyle(this),s=(parseFloat(r.borderTopWidth)||0)+(parseFloat(r.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(t.length<i)return e.scrollHeight+s;const l=e.scrollTop;e.scrollTop=0;const n=e.getBoundingClientRect(),o=t[t.length-1].getBoundingClientRect();return l>0&&(e.scrollTop=l),o.bottom-n.top+s}widenToFitContent(e){if(this.fullscreenPresentation)return;const t=this.virtualizerRef.value;if(!t)return;const r=t.querySelectorAll("esp-picker-item");let s=e.width;for(const i of r)s=Math.max(s,i.scrollWidth);if(s+=2,s>e.width){const{width:i}=m(),l=Math.min(s,i-e.left);this.style.setProperty("width",`${l}px`)}}updatePosition(e){const t=x(e);if(t&&!t.pickerMenuIsOpen())return;const r=this.fullscreenPresentation,{fullscreen:s,rect:i}=this.syncPresentation(e),l=r!==s;if(l){const c=this.virtualizerRef.value?.scrollTop??0;c>0&&this.preRenderScrollTop===null&&!this.pendingItemsChanged&&!this.retargetingSequence&&(this.preRenderScrollTop=c),this.openSessionGeneration+=1,this.menuDirty=!0}if(!this.matches(":popover-open")){if(!t?.pickerMenuIsOpen())return;try{this.showPopover()}catch{this.menuDirty=!1,this.clearFullscreenTarget(e),this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry(),this.requestDismiss();return}this.classList.add("visible")}if(l&&this.settleMenuAfterUpdate(),s){this.applyFullscreenGeometry(i),l&&this.classList.add("visible");return}if(r){this.clearFullscreenGeometry(),this.style.setProperty("min-width",`${i.width}px`);const{height:c}=m(),{spaceAbove:b,spaceBelow:d}=I(i,c),v=Math.max(Math.max(b,d)-75,0);this.maxAvailableHeight=v,this.lastViewportHeight=c,this.style.setProperty("height",`${v}px`),this.sizeToContent(v)}const{height:n}=m();if(n!==this.lastViewportHeight){const{spaceAbove:c,spaceBelow:b}=I(i,n),d=Math.max(Math.max(c,b)-75,0);this.maxAvailableHeight=d,this.lastViewportHeight=n,(parseFloat(this.style.getPropertyValue("height"))||0)>d&&this.style.setProperty("height",`${d}px`),this.sizeToContent(d)}this.style.setProperty("left",`${i.left}px`);const o=i.top,h=n-i.bottom;o>h?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${n-i.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${i.bottom}px`)),l&&this.classList.add("visible")}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.resetSettleState(),this.clearFullscreenTarget(),this.positionTarget=null,this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry();try{this.hidePopover()}catch{}}resetSettleState(){this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1}disconnectedCallback(){this.hideMenu(),super.disconnectedCallback()}doKeyboardNav(e){const t=this.virtualizedItemsPool;if(t.length!==0)switch(e){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(t.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=t.length-1,this.setHighlight(t.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(t[this.highlightIndex]);break}}render(){let e;return this.loading?e=g`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?e=g`<div class="status-message">${this.emptyMessage}</div>`:e=g`<lit-virtualizer
+        ${H(this.virtualizerRef)}
+        scroller
+        .items=${this.virtualizedItemsPool}
+        .renderItem=${this.renderPickerItem}
+        @pointerdown=${this.handleItemPointerDown}
+        @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(f.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
+      ></lit-virtualizer>`,g`<div class="menu-content" @click=${t=>t.stopPropagation()}>
+      ${e}
+    </div>`}};p.styles=k`
     :host {
       position: fixed;
       inset: unset;
@@ -35,6 +37,12 @@ var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnP
       opacity: 1;
     }
 
+    .menu-content {
+      height: 100%;
+      overflow: hidden;
+      width: 100%;
+    }
+
     lit-virtualizer {
       
       height: 100%;
@@ -54,4 +62,31 @@ var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnP
       font-style: italic;
       background: var(--esp-color-layer-2);
     }
-  `,a([g({type:String})],h.prototype,"label",void 0),a([v()],h.prototype,"virtualizedItemsPool",void 0),a([v()],h.prototype,"highlightIndex",void 0),a([g({attribute:"multi-select",type:Boolean})],h.prototype,"multiSelect",void 0),a([g({type:Boolean})],h.prototype,"loading",void 0),a([g({type:String,attribute:"empty-message"})],h.prototype,"emptyMessage",void 0),h=a([b("esp-picker-menu")],h);export{h as EspalierPickerMenu};
+
+    @media ${C(R)} {
+      :host([data-fullscreen]) {
+        display: grid;
+        grid-template-rows: var(--_esp-picker-menu-input-bottom, 2.75rem) minmax(0, 1fr);
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        background: transparent;
+        pointer-events: none;
+      }
+
+      :host([data-fullscreen]) .menu-content {
+        grid-row: 2;
+        box-sizing: border-box;
+        min-height: 0;
+        height: auto;
+        border-block-start: 1px solid var(--esp-color-border);
+        background: var(--esp-color-layer-2);
+        overscroll-behavior: contain;
+        pointer-events: auto;
+      }
+
+      :host([data-fullscreen]) lit-virtualizer {
+        overscroll-behavior: contain;
+      }
+    }
+  `,u([P({type:String})],p.prototype,"label",void 0),u([w()],p.prototype,"virtualizedItemsPool",void 0),u([w()],p.prototype,"highlightIndex",void 0),u([P({attribute:"multi-select",type:Boolean})],p.prototype,"multiSelect",void 0),u([P({type:Boolean})],p.prototype,"loading",void 0),u([P({type:String,attribute:"empty-message"})],p.prototype,"emptyMessage",void 0),p=u([T("esp-picker-menu")],p);export{p as EspalierPickerMenu};

package/dist/shared/aria-describedby.js

@@ -0,0 +1 @@
+function d(e){return(e.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean)}function c(e,i,s={}){const t=[...i].filter(Boolean),r=s.deduplicate?[...new Set(t)]:t;r.length>0?e.setAttribute("aria-describedby",r.join(" ")):e.removeAttribute("aria-describedby")}function a(e,i){const s=new Set(i.remove??[]),t=[...i.add??[]],r=new Set(t),n=d(e).filter(o=>!s.has(o)||r.has(o));for(const o of t)n.includes(o)||n.push(o);c(e,n)}export{d as describedByTokens,c as setDescribedByTokens,a as syncDescribedByTokens};

package/dist/shared/events.d.ts

@@ -101,6 +101,7 @@ export declare const ESP_EVENTS: {
     readonly PAGE_WORKSPACE_RESIZE: "esp-page-workspace-resize";
     readonly PICKER_MENU_SELECTION_CHANGED: "esp-picker-menu-selection-changed";
     readonly PICKER_MENU_CLOSE_REQUESTED: "esp-picker-menu-close-requested";
+    readonly PICKER_MENU_DISMISS_REQUESTED: "esp-picker-menu-dismiss-requested";
     readonly PICKER_MENU_RANGE_CHANGED: "esp-picker-menu-range-changed";
     readonly POPOVER_OPENED: "esp-popover-opened";
     readonly POPOVER_CLOSED: "esp-popover-closed";
@@ -414,6 +415,7 @@ export interface EspalierBurgerEventMap {
 export interface EspalierPickerMenuEventMap {
     [ESP_EVENTS.PICKER_MENU_SELECTION_CHANGED]: CustomEvent<PickerItem[]>;
     [ESP_EVENTS.PICKER_MENU_CLOSE_REQUESTED]: CustomEvent<PickerItem[]>;
+    [ESP_EVENTS.PICKER_MENU_DISMISS_REQUESTED]: CustomEvent<void>;
     [ESP_EVENTS.PICKER_MENU_RANGE_CHANGED]: CustomEvent<{
         first: number;
         last: number;

package/dist/shared/events.js

@@ -1 +1 @@
-import{VALIDITY_CHANGED_EVENT as r}from"./validation.js";import{VALIDITY_CHANGED_EVENT as e}from"./validation.js";const _={VALUE_CHANGED:"esp-value-changed",VALIDITY_CHANGED:e,CLICKED:"esp-clicked",ACTION_MENU_SELECT:"esp-action-menu-select",BURGER_OPENED:"esp-burger-opened",BURGER_CLOSED:"esp-burger-closed",DETAILS_TOGGLE:"esp-details-toggle",DETAILS_GROUP_CHANGE:"esp-details-group-change",DIALOG_OPENED:"esp-dialog-opened",DIALOG_CLOSING:"esp-dialog-closing",DIALOG_CLOSED:"esp-dialog-closed",FILE_UPLOAD_FILES_SELECTED:"esp-file-upload-files-selected",FLYOUT_OPENED:"esp-flyout-opened",FLYOUT_CLOSED:"esp-flyout-closed",FLYOUT_STATE_CHANGED:"esp-flyout-state-changed",FOCUS_PICKER_CHANGED:"esp-focus-picker-changed",FORM_DIALOG_CLOSE_REQUESTED:"esp-form-dialog-close-requested",FORM_SUBMIT:"esp-form-submit",FORM_SUBMIT_RESPONSE:"esp-form-submit-response",FORM_SUBMIT_ERROR:"esp-form-submit-error",GRID_EVENT:"esp-grid-event",GRID_LOAD_START:"esp-grid-load-start",GRID_LOAD_SUCCESS:"esp-grid-load-success",GRID_LOAD_ERROR:"esp-grid-load-error",GRID_ITEMS_CHANGED:"esp-grid-items-changed",HEADER_THEME_TOGGLE:"esp-header-theme-toggle",IMAGE_UPLOAD_FILE_SELECTED:"esp-image-upload-file-selected",IMAGE_UPLOAD_FILE_REMOVED:"esp-image-upload-file-removed",IMAGE_UPLOAD_FILES_REJECTED:"esp-image-upload-files-rejected",IMAGE_UPLOAD_RETRY:"esp-image-upload-retry",IMAGE_UPLOAD_IMAGES_REORDERED:"esp-image-upload-images-reordered",INFO_DESTROY:"esp-info-destroy",INPUT_ICON_CLICKED:"esp-input-icon-clicked",LIGHTBOX_CHANGED:"esp-lightbox-changed",MENU_GROUP_TOGGLE:"esp-menu-group-toggle",MENU_DRAWER_OPENED:"esp-menu-drawer-opened",MENU_DRAWER_CLOSED:"esp-menu-drawer-closed",PAGE_WORKSPACE_RESIZE:"esp-page-workspace-resize",PICKER_MENU_SELECTION_CHANGED:"esp-picker-menu-selection-changed",PICKER_MENU_CLOSE_REQUESTED:"esp-picker-menu-close-requested",PICKER_MENU_RANGE_CHANGED:"esp-picker-menu-range-changed",POPOVER_OPENED:"esp-popover-opened",POPOVER_CLOSED:"esp-popover-closed",SEARCH_REQUESTED:"esp-search-requested",SEARCH_RESULT_SELECTED:"esp-search-result-selected",SEARCH_CLOSED:"esp-search-closed",TAB_GROUP_CHANGED:"esp-tab-group-changed",TREE_SELECT:"esp-tree-select",TREE_TOGGLE:"esp-tree-toggle",TREE_GRAFT_REQUEST:"esp-tree-graft-request",TREE_GRAFT:"esp-tree-graft",TREE_EDIT:"esp-tree-edit",TREE_DELETE:"esp-tree-delete",TREE_MOVE_UP:"esp-tree-move-up",TREE_MOVE_DOWN:"esp-tree-move-down",TREE_CUT:"esp-tree-cut",TREE_PASTE_CHILD:"esp-tree-paste-child",TREE_GRAFT_INPUT:"esp-tree-graft-input"};export{_ as ESP_EVENTS,r as VALIDITY_CHANGED_EVENT};
+import{VALIDITY_CHANGED_EVENT as r}from"./validation.js";import{VALIDITY_CHANGED_EVENT as e}from"./validation.js";const s={VALUE_CHANGED:"esp-value-changed",VALIDITY_CHANGED:e,CLICKED:"esp-clicked",ACTION_MENU_SELECT:"esp-action-menu-select",BURGER_OPENED:"esp-burger-opened",BURGER_CLOSED:"esp-burger-closed",DETAILS_TOGGLE:"esp-details-toggle",DETAILS_GROUP_CHANGE:"esp-details-group-change",DIALOG_OPENED:"esp-dialog-opened",DIALOG_CLOSING:"esp-dialog-closing",DIALOG_CLOSED:"esp-dialog-closed",FILE_UPLOAD_FILES_SELECTED:"esp-file-upload-files-selected",FLYOUT_OPENED:"esp-flyout-opened",FLYOUT_CLOSED:"esp-flyout-closed",FLYOUT_STATE_CHANGED:"esp-flyout-state-changed",FOCUS_PICKER_CHANGED:"esp-focus-picker-changed",FORM_DIALOG_CLOSE_REQUESTED:"esp-form-dialog-close-requested",FORM_SUBMIT:"esp-form-submit",FORM_SUBMIT_RESPONSE:"esp-form-submit-response",FORM_SUBMIT_ERROR:"esp-form-submit-error",GRID_EVENT:"esp-grid-event",GRID_LOAD_START:"esp-grid-load-start",GRID_LOAD_SUCCESS:"esp-grid-load-success",GRID_LOAD_ERROR:"esp-grid-load-error",GRID_ITEMS_CHANGED:"esp-grid-items-changed",HEADER_THEME_TOGGLE:"esp-header-theme-toggle",IMAGE_UPLOAD_FILE_SELECTED:"esp-image-upload-file-selected",IMAGE_UPLOAD_FILE_REMOVED:"esp-image-upload-file-removed",IMAGE_UPLOAD_FILES_REJECTED:"esp-image-upload-files-rejected",IMAGE_UPLOAD_RETRY:"esp-image-upload-retry",IMAGE_UPLOAD_IMAGES_REORDERED:"esp-image-upload-images-reordered",INFO_DESTROY:"esp-info-destroy",INPUT_ICON_CLICKED:"esp-input-icon-clicked",LIGHTBOX_CHANGED:"esp-lightbox-changed",MENU_GROUP_TOGGLE:"esp-menu-group-toggle",MENU_DRAWER_OPENED:"esp-menu-drawer-opened",MENU_DRAWER_CLOSED:"esp-menu-drawer-closed",PAGE_WORKSPACE_RESIZE:"esp-page-workspace-resize",PICKER_MENU_SELECTION_CHANGED:"esp-picker-menu-selection-changed",PICKER_MENU_CLOSE_REQUESTED:"esp-picker-menu-close-requested",PICKER_MENU_DISMISS_REQUESTED:"esp-picker-menu-dismiss-requested",PICKER_MENU_RANGE_CHANGED:"esp-picker-menu-range-changed",POPOVER_OPENED:"esp-popover-opened",POPOVER_CLOSED:"esp-popover-closed",SEARCH_REQUESTED:"esp-search-requested",SEARCH_RESULT_SELECTED:"esp-search-result-selected",SEARCH_CLOSED:"esp-search-closed",TAB_GROUP_CHANGED:"esp-tab-group-changed",TREE_SELECT:"esp-tree-select",TREE_TOGGLE:"esp-tree-toggle",TREE_GRAFT_REQUEST:"esp-tree-graft-request",TREE_GRAFT:"esp-tree-graft",TREE_EDIT:"esp-tree-edit",TREE_DELETE:"esp-tree-delete",TREE_MOVE_UP:"esp-tree-move-up",TREE_MOVE_DOWN:"esp-tree-move-down",TREE_CUT:"esp-tree-cut",TREE_PASTE_CHILD:"esp-tree-paste-child",TREE_GRAFT_INPUT:"esp-tree-graft-input"};export{s as ESP_EVENTS,r as VALIDITY_CHANGED_EVENT};

package/dist/shared/form-field-description-controller.js

@@ -1 +1 @@
-let s=0;class n{constructor(t){this.options=t,this.descriptionId=`esp-form-field-description-${++s}`,this.description=null,this.descriptionElement=null,this.formItemLabel=null,this.appliedLabel=null,this.target=null,t.host.addController(this)}hostConnected(){this.sync()}hostUpdated(){this.sync()}hostDisconnected(){this.removeDescriptionToken(this.target),this.removeAppliedLabel(this.target),this.descriptionElement?.remove(),this.descriptionElement=null,this.target=null}setDescription(t){this.description=t,this.sync()}setLabel(t){const e=t?.trim()??"";this.formItemLabel=e.length>0?e:null,this.sync()}sync(){const t=this.options.getTarget()??null;this.target&&this.target!==t&&(this.removeDescriptionToken(this.target),this.removeAppliedLabel(this.target)),this.target=t,this.syncDescription(),this.syncLabel()}syncDescription(){if(!this.target||this.description===null){this.removeDescriptionToken(this.target),this.descriptionElement?.remove(),this.descriptionElement=null;return}const t=this.target.getRootNode();if(t instanceof ShadowRoot){if(!this.descriptionElement||this.descriptionElement.getRootNode()!==t){this.descriptionElement?.remove();const e=document.createElement("span");e.id=this.descriptionId,e.hidden=!0,e.toggleAttribute("data-esp-form-item-description",!0),t.appendChild(e),this.descriptionElement=e}this.descriptionElement.textContent=this.description,this.addDescriptionToken(this.target)}}syncLabel(){if(!this.target){this.appliedLabel=null;return}if(this.formItemLabel===null){this.removeAppliedLabel(this.target);return}const t=this.target.getAttribute("aria-label");t!==null&&t!==this.appliedLabel||(t!==this.formItemLabel&&this.target.setAttribute("aria-label",this.formItemLabel),this.appliedLabel=this.formItemLabel)}removeAppliedLabel(t){t&&this.appliedLabel!==null&&t.getAttribute("aria-label")===this.appliedLabel&&t.removeAttribute("aria-label"),this.appliedLabel=null}addDescriptionToken(t){const e=this.descriptionTokens(t);e.includes(this.descriptionId)||e.push(this.descriptionId),t.setAttribute("aria-describedby",e.join(" "))}removeDescriptionToken(t){if(!t)return;const e=this.descriptionTokens(t).filter(i=>i!==this.descriptionId);e.length>0?t.setAttribute("aria-describedby",e.join(" ")):t.removeAttribute("aria-describedby")}descriptionTokens(t){return(t.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean)}}export{n as FormFieldDescriptionController};
+import{syncDescribedByTokens as i}from"./aria-describedby.js";let s=0;class o{constructor(t){this.options=t,this.descriptionId=`esp-form-field-description-${++s}`,this.description=null,this.descriptionElement=null,this.formItemLabel=null,this.appliedLabel=null,this.target=null,t.host.addController(this)}hostConnected(){this.sync()}hostUpdated(){this.sync()}hostDisconnected(){this.removeDescriptionToken(this.target),this.removeAppliedLabel(this.target),this.descriptionElement?.remove(),this.descriptionElement=null,this.target=null}setDescription(t){this.description=t,this.sync()}setLabel(t){const e=t?.trim()??"";this.formItemLabel=e.length>0?e:null,this.sync()}sync(){const t=this.options.getTarget()??null;this.target&&this.target!==t&&(this.removeDescriptionToken(this.target),this.removeAppliedLabel(this.target)),this.target=t,this.syncDescription(),this.syncLabel()}syncDescription(){if(!this.target||this.description===null){this.removeDescriptionToken(this.target),this.descriptionElement?.remove(),this.descriptionElement=null;return}const t=this.target.getRootNode();if(t instanceof ShadowRoot){if(!this.descriptionElement||this.descriptionElement.getRootNode()!==t){this.descriptionElement?.remove();const e=document.createElement("span");e.id=this.descriptionId,e.hidden=!0,e.toggleAttribute("data-esp-form-item-description",!0),t.appendChild(e),this.descriptionElement=e}this.descriptionElement.textContent=this.description,this.addDescriptionToken(this.target)}}syncLabel(){if(!this.target){this.appliedLabel=null;return}if(this.formItemLabel===null){this.removeAppliedLabel(this.target);return}const t=this.target.getAttribute("aria-label");t!==null&&t!==this.appliedLabel||(t!==this.formItemLabel&&this.target.setAttribute("aria-label",this.formItemLabel),this.appliedLabel=this.formItemLabel)}removeAppliedLabel(t){t&&this.appliedLabel!==null&&t.getAttribute("aria-label")===this.appliedLabel&&t.removeAttribute("aria-label"),this.appliedLabel=null}addDescriptionToken(t){i(t,{add:[this.descriptionId]})}removeDescriptionToken(t){t&&i(t,{remove:[this.descriptionId]})}}export{o as FormFieldDescriptionController};

package/dist/shared/overlay-controller.js

@@ -1 +1 @@
-const c=['a[href]:not([disabled]):not([tabindex="-1"])','button:not([disabled]):not([tabindex="-1"])','input:not([disabled]):not([tabindex="-1"])','select:not([disabled]):not([tabindex="-1"])','textarea:not([disabled]):not([tabindex="-1"])','[tabindex]:not([tabindex="-1"]):not([disabled])'].join(", "),l="[autofocus]:not([disabled])";class o{static lock(){o._count===0&&(o._savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden"),o._count++}static unlock(){o._count<=0||(o._count--,o._count===0&&(document.body.style.overflow=o._savedOverflow??"",o._savedOverflow=null))}static _reset(){o._count=0,o._savedOverflow=null}}o._count=0,o._savedOverflow=null;function f(){o._reset()}class r{static lock(t){const e=r._counts.get(t);return e!==void 0?(r._counts.set(t,e+1),!0):t.inert?!1:(r._counts.set(t,1),t.inert=!0,!0)}static unlock(t){const e=r._counts.get(t)??0;if(e<=0)return;const s=e-1;s===0?(t.inert=!1,r._counts.delete(t)):r._counts.set(t,s)}static _reset(){r._counts.clear()}}r._counts=new Map;function d(){r._reset()}class _{get isPromoting(){return this._promoting}constructor(t){this._isOpen=!1,this._previouslyFocused=null,this._inertElements=[],this._promoted=!1,this._pendingReactivation=!1,this._dropZone=null,this._promoting=!1,this._host=t.host,this._opts=t,t.host.addController(this)}get isOpen(){return this._isOpen}open(){this._isOpen||(this._pendingReactivation?this._pendingReactivation=!1:this._previouslyFocused=document.activeElement??null,this._isOpen=!0,o.lock(),this._opts.promote!==!1&&this._promoteToDropZone(),this._setInert(!0))}close(){if(this._pendingReactivation=!1,!this._isOpen){this._previouslyFocused?.focus(),this._previouslyFocused=null;return}this._isOpen=!1,o.unlock(),this._setInert(!1),this._previouslyFocused?.focus(),this._previouslyFocused=null}trapFocus(t){const e=this.getFocusableElements();if(e.length===0)return;const s=e[0],n=e[e.length-1],i=this._getDeepActiveElement();t.shiftKey?(i===s||this._isOrContains(s,i))&&(t.preventDefault(),n.focus()):(i===n||this._isOrContains(n,i))&&(t.preventDefault(),s.focus())}moveFocusInto(){const t=this._getAutofocusElement();if(t&&(t.focus(),this._autofocusLanded(t)))return;const e=this.getFocusableElements();if(e.length>0){e[0].focus();return}const s=this._opts.getFocusFallback?.();if(s){s.focus();return}this._opts.getFocusTrapContainer()?.focus()}_getAutofocusElement(){return this._getMatchingElements(l)[0]??null}getFocusableElements(){return this._getMatchingElements(c)}_getMatchingElements(t){const e=this._opts.getFocusTrapContainer();if(!e)return[];const s=[];for(const n of Array.from(e.querySelectorAll("*")))if(n instanceof HTMLElement){if(n.matches(t)&&s.push(n),n.shadowRoot){const i=n.shadowRoot.querySelectorAll(t);s.push(...Array.from(i))}if(n instanceof HTMLSlotElement)for(const i of n.assignedElements({flatten:!0})){if(!(i instanceof HTMLElement))continue;i.matches(t)&&s.push(i);const u=i.querySelectorAll(t);if(s.push(...Array.from(u)),i.shadowRoot){const a=i.shadowRoot.querySelectorAll(t);s.push(...Array.from(a))}}}for(const n of Array.from(this._host.children)){if(!(n instanceof HTMLElement))continue;n.matches(t)&&(s.includes(n)||s.push(n));const i=n.querySelectorAll(t);for(const u of Array.from(i))s.includes(u)||s.push(u);if(n.shadowRoot){const u=n.shadowRoot.querySelectorAll(t);for(const a of Array.from(u))s.includes(a)||s.push(a)}}return s}hostConnected(){}hostDisconnected(){this._promoting||this._isOpen&&(this._setInert(!1),o.unlock(),this._isOpen=!1,this._pendingReactivation=!0)}_setInert(t){if(t){this._inertElements=[];const e=this._resolveInertAnchor(),s=e.parentElement??document.body;for(const n of s.children)n instanceof HTMLElement&&n!==e&&r.lock(n)&&this._inertElements.push(n)}else{for(const e of this._inertElements)r.unlock(e);this._inertElements=[]}}_resolveInertAnchor(){if(this._dropZone)return this._dropZone;let t=this._host;for(;!t.parentElement;){const e=t.getRootNode();if(e instanceof ShadowRoot&&e.host instanceof HTMLElement)t=e.host;else break}return t}_getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}_isOrContains(t,e){return e?t===e?!0:t.contains(e):!1}_autofocusLanded(t){const e=this._getActiveElementChain(),s=e[0];return e.some(n=>this._isOrContains(t,n)?!0:n!==s&&n instanceof HTMLElement&&this._isOrContains(n,t))}_getActiveElementChain(){const t=[];let e=document.activeElement;for(;e;){t.push(e);const s=e.shadowRoot?.activeElement??null;if(!s||s===e)break;e=s}return t}_promoteToDropZone(){if(this._promoted&&this._dropZone){this._promoting=!0;try{this._dropZone.appendChild(this._host)}finally{this._promoting=!1}return}const t=this._host,e=t.closest("esp-page");if(e){if(customElements.get("esp-page")){this._tryPromote(e);return}customElements.whenDefined("esp-page").then(()=>{if(!this._isOpen||!t.isConnected)return;const s=t.closest("esp-page");this._tryPromote(s)&&(this._setInert(!1),this._setInert(!0))})}}_tryPromote(t){if(!t||this._promoted)return!1;const e=t.AddDialog;if(typeof e=="function"){this._promoting=!0;try{e.call(t,this._host)}finally{this._promoting=!1}return this._promoted=!0,this._dropZone=this._host.parentElement,!0}return!1}}export{c as FOCUSABLE_SELECTOR,_ as OverlayController,d as _resetInertLock,f as _resetScrollLock};
+const l=['a[href]:not([disabled]):not([tabindex="-1"])','button:not([disabled]):not([tabindex="-1"])','input:not([disabled]):not([tabindex="-1"])','select:not([disabled]):not([tabindex="-1"])','textarea:not([disabled]):not([tabindex="-1"])','[tabindex]:not([tabindex="-1"]):not([disabled])'].join(", "),h="[autofocus]:not([disabled])";class o{static lock(t,e={}){const s=e.preserveScrollPosition===!0,n=o.owners.get(t);n===!0||n===s||(o.owners.size===0&&(o.snapshot={x:window.scrollX,y:window.scrollY,html:o.capture(document.documentElement,["overflow","overflow-x","overflow-y","overscroll-behavior","overscroll-behavior-x","overscroll-behavior-y"]),body:o.capture(document.body,["overflow","overflow-x","overflow-y","overscroll-behavior","overscroll-behavior-x","overscroll-behavior-y","position","top","left","width"])}),o.owners.set(t,s),o.applyCurrentTreatment())}static unlock(t){if(!(!o.owners.delete(t)||!o.snapshot)){if(o.owners.size===0){o.restoreSnapshot(),o.snapshot=null;return}o.applyCurrentTreatment()}}static capture(t,e){return e.map(s=>({name:s,value:t.style.getPropertyValue(s),priority:t.style.getPropertyPriority(s)}))}static restore(t,e){for(const{name:s}of e)t.style.removeProperty(s);for(const{name:s,value:n,priority:i}of e)n&&t.style.setProperty(s,n,i)}static applyCurrentTreatment(){const t=o.snapshot;if(!t)return;const e=[...o.owners.values()].some(Boolean);!e&&o.positionFrozen&&(o.restore(document.documentElement,t.html),o.restore(document.body,t.body),o.restoreViewport(t),o.positionFrozen=!1),document.body.style.overflow="hidden",e&&(o.positionFrozen||(t.x=window.scrollX,t.y=window.scrollY),document.documentElement.style.overflow="hidden",document.documentElement.style.overscrollBehavior="contain",document.body.style.overscrollBehavior="contain",document.body.style.position="fixed",document.body.style.top=`${-t.y}px`,document.body.style.left=`${-t.x}px`,document.body.style.width="100%",o.positionFrozen=!0)}static restoreSnapshot(){const t=o.snapshot;t&&(o.restore(document.documentElement,t.html),o.restore(document.body,t.body),o.positionFrozen&&o.restoreViewport(t),o.positionFrozen=!1)}static restoreViewport(t){window.scrollTo?.({top:t.y,left:t.x,behavior:"instant"})}static _reset(){o.restoreSnapshot(),o.owners.clear(),o.snapshot=null,o.positionFrozen=!1}}o.owners=new Map,o.snapshot=null,o.positionFrozen=!1;function f(){o._reset()}class r{static lock(t){const e=r._counts.get(t);return e!==void 0?(r._counts.set(t,e+1),!0):t.inert?!1:(r._counts.set(t,1),t.inert=!0,!0)}static unlock(t){const e=r._counts.get(t)??0;if(e<=0)return;const s=e-1;s===0?(t.inert=!1,r._counts.delete(t)):r._counts.set(t,s)}static _reset(){r._counts.clear()}}r._counts=new Map;function d(){r._reset()}class p{get isPromoting(){return this._promoting}constructor(t){this._isOpen=!1,this._previouslyFocused=null,this._inertElements=[],this._promoted=!1,this._pendingReactivation=!1,this._dropZone=null,this._promoting=!1,this._host=t.host,this._opts=t,t.host.addController(this)}get isOpen(){return this._isOpen}open(){this._isOpen||(this._pendingReactivation?this._pendingReactivation=!1:this._previouslyFocused=document.activeElement??null,this._isOpen=!0,o.lock(this),this._opts.promote!==!1&&this._promoteToDropZone(),this._setInert(!0))}close(){if(this._pendingReactivation=!1,!this._isOpen){this._previouslyFocused?.focus(),this._previouslyFocused=null;return}this._isOpen=!1,o.unlock(this),this._setInert(!1),this._previouslyFocused?.focus(),this._previouslyFocused=null}trapFocus(t){const e=this.getFocusableElements();if(e.length===0)return;const s=e[0],n=e[e.length-1],i=this._getDeepActiveElement();t.shiftKey?(i===s||this._isOrContains(s,i))&&(t.preventDefault(),n.focus()):(i===n||this._isOrContains(n,i))&&(t.preventDefault(),s.focus())}moveFocusInto(){const t=this._getAutofocusElement();if(t&&(t.focus(),this._autofocusLanded(t)))return;const e=this.getFocusableElements();if(e.length>0){e[0].focus();return}const s=this._opts.getFocusFallback?.();if(s){s.focus();return}this._opts.getFocusTrapContainer()?.focus()}_getAutofocusElement(){return this._getMatchingElements(h)[0]??null}getFocusableElements(){return this._getMatchingElements(l)}_getMatchingElements(t){const e=this._opts.getFocusTrapContainer();if(!e)return[];const s=[];for(const n of Array.from(e.querySelectorAll("*")))if(n instanceof HTMLElement){if(n.matches(t)&&s.push(n),n.shadowRoot){const i=n.shadowRoot.querySelectorAll(t);s.push(...Array.from(i))}if(n instanceof HTMLSlotElement)for(const i of n.assignedElements({flatten:!0})){if(!(i instanceof HTMLElement))continue;i.matches(t)&&s.push(i);const a=i.querySelectorAll(t);if(s.push(...Array.from(a)),i.shadowRoot){const u=i.shadowRoot.querySelectorAll(t);s.push(...Array.from(u))}}}for(const n of Array.from(this._host.children)){if(!(n instanceof HTMLElement))continue;n.matches(t)&&(s.includes(n)||s.push(n));const i=n.querySelectorAll(t);for(const a of Array.from(i))s.includes(a)||s.push(a);if(n.shadowRoot){const a=n.shadowRoot.querySelectorAll(t);for(const u of Array.from(a))s.includes(u)||s.push(u)}}return s}hostConnected(){}hostDisconnected(){this._promoting||this._isOpen&&(this._setInert(!1),o.unlock(this),this._isOpen=!1,this._pendingReactivation=!0)}_setInert(t){if(t){this._inertElements=[];const e=this._resolveInertAnchor(),s=e.parentElement??document.body;for(const n of s.children)n instanceof HTMLElement&&n!==e&&r.lock(n)&&this._inertElements.push(n)}else{for(const e of this._inertElements)r.unlock(e);this._inertElements=[]}}_resolveInertAnchor(){if(this._dropZone)return this._dropZone;let t=this._host;for(;!t.parentElement;){const e=t.getRootNode();if(e instanceof ShadowRoot&&e.host instanceof HTMLElement)t=e.host;else break}return t}_getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}_isOrContains(t,e){return e?t===e?!0:t.contains(e):!1}_autofocusLanded(t){const e=this._getActiveElementChain(),s=e[0];return e.some(n=>this._isOrContains(t,n)?!0:n!==s&&n instanceof HTMLElement&&this._isOrContains(n,t))}_getActiveElementChain(){const t=[];let e=document.activeElement;for(;e;){t.push(e);const s=e.shadowRoot?.activeElement??null;if(!s||s===e)break;e=s}return t}_promoteToDropZone(){if(this._promoted&&this._dropZone){this._promoting=!0;try{this._dropZone.appendChild(this._host)}finally{this._promoting=!1}return}const t=this._host,e=t.closest("esp-page");if(e){if(customElements.get("esp-page")){this._tryPromote(e);return}customElements.whenDefined("esp-page").then(()=>{if(!this._isOpen||!t.isConnected)return;const s=t.closest("esp-page");this._tryPromote(s)&&(this._setInert(!1),this._setInert(!0))})}}_tryPromote(t){if(!t||this._promoted)return!1;const e=t.AddDialog;if(typeof e=="function"){this._promoting=!0;try{e.call(t,this._host)}finally{this._promoting=!1}return this._promoted=!0,this._dropZone=this._host.parentElement,!0}return!1}}export{l as FOCUSABLE_SELECTOR,p as OverlayController,o as ScrollLock,d as _resetInertLock,f as _resetScrollLock};

package/dist/shared/popover-controller.js

@@ -1 +1 @@
-import{getEspBus as c}from"./bus-events.js";import{RafThrottle as h}from"./raf-throttle.js";function p(r){const t=[],s=new Set;let e=r;for(;e&&!s.has(e);){s.add(e);const i=e["linked-popover"];if(i){e=i;continue}const o=e.closest("esp-popover");if(o){t.includes(o)||t.push(o),e=o.parentElement||o.getRootNode()?.host;continue}const n=e.getRootNode();e=n instanceof ShadowRoot?n.host:void 0}return t}class d{constructor(t){this.bus=c(),this.positionFrame=new h(()=>this.runPositionUpdate()),this.positionResizeObserver=null,this.handleClosePopovers=s=>{if(!this.opts.isOpen())return;const e=this.opts.host;if(this.opts.closeStrategy==="source-identity"){if(!s.source||s.source===e||s.source instanceof Node&&(e.contains(s.source)||e.shadowRoot?.contains(s.source)))return}else if(s.skipPopovers?.includes(e))return;this.opts.onShouldClose()},this.onScrollOrResize=()=>this.positionFrame.schedule(),this.onDocumentClick=s=>{const e=this.opts.host,i=s.composedPath();if(i.includes(e))return;const o=this.opts.getInsideElements?.()??[];for(const n of o)if(n&&i.includes(n))return;this.opts.isOpen()&&this.opts.onOutsideClick?.()},this.opts=t,t.host.addController(this)}hostConnected(){this.bus.subscribe("close-popovers",this.handleClosePopovers)}hostDisconnected(){this.bus.unsubscribe("close-popovers",this.handleClosePopovers),this.stopTracking(),this.stopOutsideClick()}runPositionUpdate(){if(this.opts.isOpen()){if(this.opts.shouldContinueTracking&&!this.opts.shouldContinueTracking()){this.opts.onShouldClose();return}this.opts.onPositionUpdate?.()}}startTracking(){if(this.opts.onPositionUpdate&&(window.addEventListener("scroll",this.onScrollOrResize,{capture:!0,passive:!0}),window.addEventListener("resize",this.onScrollOrResize,{passive:!0}),this.opts.getPositionElements&&typeof ResizeObserver<"u")){this.positionResizeObserver?.disconnect(),this.positionResizeObserver=new ResizeObserver(this.onScrollOrResize);const t=new Set(this.opts.getPositionElements().filter(Boolean));for(const s of t)this.positionResizeObserver.observe(s)}}stopTracking(){window.removeEventListener("scroll",this.onScrollOrResize,{capture:!0}),window.removeEventListener("resize",this.onScrollOrResize),this.positionResizeObserver?.disconnect(),this.positionResizeObserver=null,this.positionFrame.cancel()}startOutsideClick(){this.opts.onOutsideClick&&document.addEventListener("click",this.onDocumentClick,!0)}stopOutsideClick(){document.removeEventListener("click",this.onDocumentClick,!0)}publishCloseOthers(t=[]){this.bus.publish("close-popovers",{source:this.opts.host,...t.length>0?{skipPopovers:t}:{}})}}export{d as PopoverController,p as findContainingPopovers};
+import{getEspBus as c}from"./bus-events.js";import{RafThrottle as h}from"./raf-throttle.js";function p(r){const t=[],s=new Set;let e=r;for(;e&&!s.has(e);){s.add(e);const i=e["linked-popover"];if(i){e=i;continue}const o=e.closest("esp-popover");if(o){t.includes(o)||t.push(o),e=o.parentElement||o.getRootNode()?.host;continue}const n=e.getRootNode();e=n instanceof ShadowRoot?n.host:void 0}return t}class d{constructor(t){this.bus=c(),this.positionFrame=new h(()=>this.runPositionUpdate()),this.positionResizeObserver=null,this.trackingPosition=!1,this.handleClosePopovers=s=>{if(!this.opts.isOpen())return;const e=this.opts.host;if(this.opts.closeStrategy==="source-identity"){if(!s.source||s.source===e||s.source instanceof Node&&(e.contains(s.source)||e.shadowRoot?.contains(s.source)))return}else if(s.skipPopovers?.includes(e))return;this.opts.onShouldClose()},this.onScrollOrResize=()=>this.positionFrame.schedule(),this.onDocumentClick=s=>{const e=this.opts.host,i=s.composedPath();if(i.includes(e))return;const o=this.opts.getInsideElements?.()??[];for(const n of o)if(n&&i.includes(n))return;this.opts.isOpen()&&this.opts.onOutsideClick?.()},this.opts=t,t.host.addController(this)}hostConnected(){this.bus.subscribe("close-popovers",this.handleClosePopovers)}hostDisconnected(){this.bus.unsubscribe("close-popovers",this.handleClosePopovers),this.stopTracking(),this.stopOutsideClick()}runPositionUpdate(){if(this.opts.isOpen()){if(this.opts.shouldContinueTracking&&!this.opts.shouldContinueTracking()){this.opts.onShouldClose();return}this.opts.onPositionUpdate?.()}}startTracking(){this.opts.onPositionUpdate&&(this.trackingPosition=!0,window.addEventListener("scroll",this.onScrollOrResize,{capture:!0,passive:!0}),window.addEventListener("resize",this.onScrollOrResize,{passive:!0}),this.refreshPositionElements())}refreshPositionElements(){if(this.positionResizeObserver?.disconnect(),this.positionResizeObserver=null,!this.trackingPosition||!this.opts.getPositionElements||typeof ResizeObserver>"u")return;const t=new Set(this.opts.getPositionElements().filter(Boolean));if(t.size!==0){this.positionResizeObserver=new ResizeObserver(this.onScrollOrResize);for(const s of t)this.positionResizeObserver.observe(s)}}stopTracking(){this.trackingPosition=!1,window.removeEventListener("scroll",this.onScrollOrResize,{capture:!0}),window.removeEventListener("resize",this.onScrollOrResize),this.positionResizeObserver?.disconnect(),this.positionResizeObserver=null,this.positionFrame.cancel()}startOutsideClick(){this.opts.onOutsideClick&&document.addEventListener("click",this.onDocumentClick,!0)}stopOutsideClick(){document.removeEventListener("click",this.onDocumentClick,!0)}publishCloseOthers(t=[]){this.bus.publish("close-popovers",{source:this.opts.host,...t.length>0?{skipPopovers:t}:{}})}}export{d as PopoverController,p as findContainingPopovers};

package/dist/shared/responsive.js

@@ -0,0 +1 @@
+const e="(max-width: 50em)";function t(){return typeof window>"u"||!window.matchMedia?!1:window.matchMedia(e).matches}export{e as COMPACT_VIEWPORT_MEDIA_QUERY,t as compactViewportMatches};

package/dist/shared/style-fragments.js

@@ -1,8 +1,8 @@
-import{css as o,unsafeCSS as e}from"lit";const a=o`
+import{css as n,unsafeCSS as e}from"lit";const i=n`
   :host([align]) {
     text-align: inherit;
   }
-`,l=o`
+`,a=n`
   .sr-only {
     position: absolute;
     width: 1px;
@@ -14,17 +14,33 @@ import{css as o,unsafeCSS as e}from"lit";const a=o`
     white-space: nowrap;
     border: 0;
   }
-`;function i(r){const n=r.includes(":host")||r.includes("[disabled]")?r:`:host([disabled]) ${r}`;return o`
-    ${e(n)} {
+`;function l(r){const o=r.includes(":host")||r.includes("[disabled]")?r:`:host([disabled]) ${r}`;return n`
+    ${e(o)} {
       opacity: 0.5;
       cursor: not-allowed;
     }
-  `}function p(r,n,t="0 0 3px",s=""){return o`
+  `}function p(r,o,t="0 0 3px",s=""){return n`
     ${e(r)} {
       box-shadow: ${e(s)} ${e(t)}
-        var(${e(n)}, var(--esp-color-shadow));
+        var(${e(o)}, var(--esp-color-shadow));
     }
-  `}const d=o`
+  `}function d(r,o="var(--esp-size-normal-to-medium)"){return[n`
+      ${e(r)} {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background: transparent;
+        color: var(--esp-color-text);
+        cursor: pointer;
+        padding: var(--esp-size-tiny);
+
+        svg {
+          inline-size: ${e(o)};
+          block-size: ${e(o)};
+        }
+      }
+    `]}const h=n`
   .intent-neutral {
     --_esp-intent-background: var(--esp-color-layer-2);
     --_esp-intent-border-color: var(--esp-color-border);
@@ -54,4 +70,4 @@ import{css as o,unsafeCSS as e}from"lit";const a=o`
     --_esp-intent-border-color: oklch(from var(--esp-color-info) var(--esp-l-border) c h);
     --_esp-intent-color: oklch(from var(--esp-color-info) var(--esp-l-text) c h);
   }
-`;export{a as alignAttributeTextInheritance,i as disabledControl,p as focusRing,d as intentSurfaceTokens,l as srOnly};
+`;export{i as alignAttributeTextInheritance,l as disabledControl,p as focusRing,h as intentSurfaceTokens,d as quietCloseButton,a as srOnly};

package/dist/shared/viewport.d.ts

@@ -85,5 +85,6 @@ export declare const ANCHORED_SURFACE_SCROLL_MARGIN = 8;
  * @param anchor - The trigger element
  * @param surface - The open surface anchored to it
  * @param onReposition - Re-placement callback, invoked only when a scroll happened
+ * @returns The scheduled animation-frame handle, or `null` when no scroll occurred
  */
-export declare function scrollToContainAnchoredSurface(anchor: HTMLElement, surface: HTMLElement, onReposition: () => void): void;
+export declare function scrollToContainAnchoredSurface(anchor: HTMLElement, surface: HTMLElement, onReposition: () => void): number | null;

package/dist/shared/viewport.js

@@ -1 +1 @@
-function d(){return{width:window.innerWidth||document.documentElement.clientWidth,height:window.innerHeight||document.documentElement.clientHeight}}function l(t,e=d().height){return{spaceAbove:t.top,spaceBelow:e-t.bottom}}function m(t){return l(t.getBoundingClientRect())}function h(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function p(){return h()?"auto":"smooth"}const s=8;function w(t,e,a){const o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),{height:i}=d(),c=Math.min(o.top,n.top),r=Math.max(o.bottom,n.bottom),u=p();if(r>i)window.scrollBy({top:r-i+s,behavior:u});else if(c<0)window.scrollBy({top:c-s,behavior:u});else return;requestAnimationFrame(a)}export{s as ANCHORED_SURFACE_SCROLL_MARGIN,m as getSpaceAboveBelow,h as prefersReducedMotion,p as scrollBehavior,w as scrollToContainAnchoredSurface,l as spaceAroundRect,d as viewportSize};
+function l(){return{width:window.innerWidth||document.documentElement.clientWidth,height:window.innerHeight||document.documentElement.clientHeight}}function a(t,e=l().height){return{spaceAbove:t.top,spaceBelow:e-t.bottom}}function m(t){return a(t.getBoundingClientRect())}function h(){return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches??!1}function p(){return h()?"auto":"smooth"}const d=8;function w(t,e,s){const o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),{height:i}=l(),r=Math.min(o.top,n.top),c=Math.max(o.bottom,n.bottom),u=p();if(c>i)window.scrollBy({top:c-i+d,behavior:u});else if(r<0)window.scrollBy({top:r-d,behavior:u});else return null;return requestAnimationFrame(s)}export{d as ANCHORED_SURFACE_SCROLL_MARGIN,m as getSpaceAboveBelow,h as prefersReducedMotion,p as scrollBehavior,w as scrollToContainAnchoredSurface,a as spaceAroundRect,l as viewportSize};

package/dist/tooltip/esp-tooltip.js

@@ -1,4 +1,4 @@
-var s=function(n,e,t,r){var l=arguments.length,o=l<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,t,r);else for(var d=n.length-1;d>=0;d--)(p=n[d])&&(o=(l<3?p(o):l>3?p(e,t,o):p(e,t))||o);return l>3&&o&&Object.defineProperty(e,t,o),o};import{css as f,html as b,nothing as u}from"lit";import{customElement as y,property as a}from"lit/decorators.js";import{createRef as h,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import"../popover/esp-popover.js";let v=0,i=class extends g{constructor(){super(...arguments),this.popoverRef=h(),this.contentRef=h(),this.tooltipId=`esp-tooltip-${++v}`,this.text="",this.attach="above",this.align="center",this.offset="4px",this.showDelay=300,this.hideDelay=100,this.triggerTabindexBacker=0,this.triggerTabindexExplicit=!1,this.handleKeydown=e=>{e.key==="Escape"&&this.popoverRef.value?.closePopover()},this.handleSlotChange=()=>{this.requestUpdate(),this.syncTriggerDescribedBy()}}get triggerTabindex(){return this.triggerTabindexBacker}set triggerTabindex(e){const t=this.triggerTabindexBacker;this.triggerTabindexExplicit=e!==null,this.triggerTabindexBacker=e!==null&&Number.isFinite(e)?e:0,this.requestUpdate("triggerTabindex",t)}get effectiveTriggerTabindex(){return this.triggerTabindexExplicit?this.triggerTabindex:this.hasButtonTrigger()?-1:0}hasButtonTrigger(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE")?.tagName;return e==="BUTTON"||e==="ESP-BUTTON"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e);const t=this.querySelector("template");t&&this.contentRef.value&&this.contentRef.value.appendChild(t.content.cloneNode(!0)),this.syncTriggerDescribedBy()}updated(e){super.updated(e),e.has("triggerTabindex")&&this.syncTriggerDescribedBy()}syncTriggerDescribedBy(){const e=Array.from(this.children).find(r=>r.tagName!=="TEMPLATE");if(!e)return;const t=(e.getAttribute("aria-describedby")??"").split(/\s+/).filter(r=>r&&r!==this.tooltipId);this.effectiveTriggerTabindex<0&&t.push(this.tooltipId),t.length>0?e.setAttribute("aria-describedby",t.join(" ")):e.removeAttribute("aria-describedby")}render(){return b`
+var o=function(a,e,t,n){var p=arguments.length,r=p<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(a,e,t,n);else for(var d=a.length-1;d>=0;d--)(l=a[d])&&(r=(p<3?l(r):p>3?l(e,t,r):l(e,t))||r);return p>3&&r&&Object.defineProperty(e,t,r),r};import{css as f,html as u,nothing as b}from"lit";import{customElement as y,property as s}from"lit/decorators.js";import{createRef as h,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import"../popover/esp-popover.js";import{syncDescribedByTokens as v}from"../shared/aria-describedby.js";let x=0,i=class extends g{constructor(){super(...arguments),this.popoverRef=h(),this.contentRef=h(),this.tooltipId=`esp-tooltip-${++x}`,this.text="",this.attach="above",this.align="center",this.offset="4px",this.showDelay=300,this.hideDelay=100,this.triggerTabindexBacker=0,this.triggerTabindexExplicit=!1,this.handleKeydown=e=>{e.key==="Escape"&&this.popoverRef.value?.closePopover()},this.handleSlotChange=()=>{this.requestUpdate(),this.syncTriggerDescribedBy()}}get triggerTabindex(){return this.triggerTabindexBacker}set triggerTabindex(e){const t=this.triggerTabindexBacker;this.triggerTabindexExplicit=e!==null,this.triggerTabindexBacker=e!==null&&Number.isFinite(e)?e:0,this.requestUpdate("triggerTabindex",t)}get effectiveTriggerTabindex(){return this.triggerTabindexExplicit?this.triggerTabindex:this.hasButtonTrigger()?-1:0}hasButtonTrigger(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE")?.tagName;return e==="BUTTON"||e==="ESP-BUTTON"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e);const t=this.querySelector("template");t&&this.contentRef.value&&this.contentRef.value.appendChild(t.content.cloneNode(!0)),this.syncTriggerDescribedBy()}updated(e){super.updated(e),e.has("triggerTabindex")&&this.syncTriggerDescribedBy()}syncTriggerDescribedBy(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE");e&&v(e,{add:this.effectiveTriggerTabindex<0?[this.tooltipId]:[],remove:[this.tooltipId]})}render(){return u`
       <esp-popover
         ${c(this.popoverRef)}
         trigger="focus-hover"
@@ -23,7 +23,7 @@ var s=function(n,e,t,r){var l=arguments.length,o=l<3?e:r===null?r=Object.getOwnP
           role="tooltip"
           class="tooltip-content"
         >
-          ${this.text?this.text:u}
+          ${this.text?this.text:b}
         </div>
       </esp-popover>
     `}};i.styles=[...g.styles,f`
@@ -54,4 +54,4 @@ var s=function(n,e,t,r){var l=arguments.length,o=l<3?e:r===null?r=Object.getOwnP
         box-shadow: var(--esp-tooltip-shadow, 2px 2px 4px var(--esp-color-shadow));
         line-height: 1.4;
       }
-    `],s([a({type:String})],i.prototype,"text",void 0),s([a({type:String})],i.prototype,"attach",void 0),s([a({type:String})],i.prototype,"align",void 0),s([a({type:String})],i.prototype,"offset",void 0),s([a({attribute:"show-delay",type:Number})],i.prototype,"showDelay",void 0),s([a({attribute:"hide-delay",type:Number})],i.prototype,"hideDelay",void 0),s([a({attribute:"trigger-tabindex",type:Number,hasChanged:()=>!0})],i.prototype,"triggerTabindex",null),i=s([y("esp-tooltip")],i);export{i as EspalierTooltip};
+    `],o([s({type:String})],i.prototype,"text",void 0),o([s({type:String})],i.prototype,"attach",void 0),o([s({type:String})],i.prototype,"align",void 0),o([s({type:String})],i.prototype,"offset",void 0),o([s({attribute:"show-delay",type:Number})],i.prototype,"showDelay",void 0),o([s({attribute:"hide-delay",type:Number})],i.prototype,"hideDelay",void 0),o([s({attribute:"trigger-tabindex",type:Number,hasChanged:()=>!0})],i.prototype,"triggerTabindex",null),i=o([y("esp-tooltip")],i);export{i as EspalierTooltip};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",