@taprootio/espalier 4.5.0 → 4.6.0

package/dist/page/esp-page.js

@@ -1,4 +1,4 @@
-var P=function(T,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(T,e,t,i);else for(var a=T.length-1;a>=0;a--)(o=T[a])&&(r=(s<3?o(r):s>3?o(e,t,r):o(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r};import{html as re,nothing as ie}from"lit";import{customElement as oe,property as S,state as U}from"lit/decorators.js";import{classMap as ne}from"lit/directives/class-map.js";import{createRef as W,ref as b}from"lit/directives/ref.js";import{EspalierElementBase as le}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as N}from"./bi-directional-sticky-controller.js";import{getEspBus as he}from"../shared/bus-events.js";import{RafThrottle as de}from"../shared/raf-throttle.js";import{InlineBounds as pe,PaneProbes as K,PREVIEW_LAYOUT_EPSILON as l,probeWidth as ue,WidthRange as I}from"./workspace-width.js";import{clampWorkspaceWidth as A,workspaceTargetWidth as ce,workspaceWidthCapacityForAvailable as Y}from"./workspace-geometry.js";import{slotHasContent as ve}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";import{pageStyles as we}from"./esp-page.styles.js";const se='esp-footer, footer, [role~="contentinfo"]',fe="(max-width: 50em)",me=5,ye=12,ge=48,We=48,be=16,Re=64;let g=class extends le{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.previewProbes=new K(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.flyoutProbes=new K(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.mainProbes=new K(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new de(()=>this.runScheduledPreviewLayout()),this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.previewNavigationCollapseTask=null,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.flyoutFullHeightActive=!1,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizePointerDown(e,t)},this.onWorkspaceResizePointerMove=e=>{this.workspaceResizeController?.onWorkspaceResizePointerMove(e)},this.onWorkspaceResizePointerEnd=e=>{this.workspaceResizeController?.onWorkspaceResizePointerEnd(e)},this.onWorkspaceResizeBlur=e=>{this.workspaceResizeController?.onWorkspaceResizeBlur(e)},this.onWorkspaceResizeKeyDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizeKeyDown(e,t)},this.schedulePreviewLayout=(e=!1)=>{!this.isConnected||!this.hasUpdated||(this.previewOverlayRecoveryRequested||=e===!0,!(this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))&&(this.previewSyncGeneration+=1,this.previewSyncFrame.restart()))},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{let t=!1;for(const i of e){const s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const r=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=r===void 0||Math.abs(r-s)>.25}t&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new N(this,".esp-page-left > .sticky-wrapper"),new N(this,".esp-page-right > .sticky-wrapper"),new N(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new N(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("esp-flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.ensureWorkspaceResizeController(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState(),this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.previewNavigationCollapseTask=null,this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=a=>{const n=a;return(typeof n.mode=="string"?n.mode:a.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=a=>{const n=a.open;return typeof n=="boolean"?n:a.hasAttribute("open")},s=a=>a.anchor!=null,r=a=>{const n=a.fullHeight;return typeof n=="boolean"?n:a.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(a=>a.tagName==="ESP-FLYOUT");for(const a of o){const n=a,p=typeof n.mode=="string"?n.mode:a.getAttribute("mode");n.pageOverlayRequested&&(!i(a)||p!=="auto")&&(n.pageOverlayRequested=!1)}o.some(a=>a.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(a=>i(a)&&!t(a))),this.toggleAttribute("flyout-overlay-open",o.some(a=>i(a)&&t(a))),this.toggleAttribute("flyout-anchored",o.some(a=>i(a)&&s(a))),this.flyoutFullHeightActive=o.some(a=>i(a)&&!t(a)&&r(a)),this.toggleAttribute("flyout-full-height",this.flyoutFullHeightActive),this.resizeSession&&(this.hasAttribute("flyout-overlay-open")||this.resizeSession.separator==="preview-flyout"&&!this.hasAttribute("flyout-open"))&&this.endWorkspaceResize(),this.requestUpdate(),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),r=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(r==="overlay"||i.pageOverlayRequested===!0||t.getAttribute("aria-modal")==="true")});this.toggleAttribute("descendant-flyout-overlay-open",e)}assignedFlyouts(){return(this.flyoutSlot.value?.assignedElements()??[]).filter(e=>e.tagName==="ESP-FLYOUT")}openAutoFlyouts(){return this.assignedFlyouts().filter(e=>{const t=typeof e.open=="boolean"?e.open:e.hasAttribute("open"),i=typeof e.mode=="string"?e.mode:e.getAttribute("mode");return t&&i!=="overlay"})}async setPageFlyoutOverlay(e){let t=!1;const i=new Set(this.openAutoFlyouts());for(const s of this.assignedFlyouts()){const r=e&&i.has(s);s.pageOverlayRequested!==r&&(s.pageOverlayRequested=r,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(s=>s.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value;return e?ve(e):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(o=>o.slot==="header"&&o.tagName==="ESP-HEADER"),i=e.find(o=>o.slot==="sidebar"&&o.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",r=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||r!=="vertical"||!("previewCollapseRequested"in t)||!("previewCollapseRequested"in i)?null:{header:t,menu:i}}async setPreviewNavigationCollapse(e){const t=e?this.getPreviewNavigationPair():null,i=t!==null&&this.previewHeader===t.header&&this.previewMenu===t.menu,s=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,r=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),r&&(r.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await r?.updateComplete,!t)return!1;const o=i?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return t.header.previewCollapseRequested=!0,t.menu.previewCollapseRequested=!0,await t.header.updateComplete,await t.menu.updateComplete,t.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=o,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(t.header.previewCollapseRequested=!1,t.menu.previewCollapseRequested=!1,await t.header.updateComplete,await t.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,!1)}requestPreviewNavigationCollapse(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.previewNavigationCollapseTask)return;const e=this.setPreviewNavigationCollapse(!0);this.previewNavigationCollapseTask=e,e.then(()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)},()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)})}createWorkspaceResizeHost(){const e=this;return{element:e,get previewSyncTask(){return e.previewSyncTask},get previewNavigationCollapseTask(){return e.previewNavigationCollapseTask},get previewSyncFrame(){return e.previewSyncFrame},get previewSyncGeneration(){return e.previewSyncGeneration},set previewSyncGeneration(t){e.previewSyncGeneration=t},get previewVisible(){return e.previewVisible},get allocatedPreviewWidth(){return e.allocatedPreviewWidth},get allocatedFlyoutWidth(){return e.allocatedFlyoutWidth},get preferredPreviewWidth(){return e.preferredPreviewWidth},set preferredPreviewWidth(t){e.preferredPreviewWidth=t},get preferredFlyoutWidth(){return e.preferredFlyoutWidth},set preferredFlyoutWidth(t){e.preferredFlyoutWidth=t},get align(){return e.align},get previewProbes(){return e.previewProbes},get flyoutProbes(){return e.flyoutProbes},get mainProbes(){return e.mainProbes},get mainMaxWidthProbe(){return e.mainMaxWidthProbe},schedulePreviewLayout:t=>e.schedulePreviewLayout(t),setWorkspaceWidths:(t,i,s)=>e.setWorkspaceWidths(t,i,s),setPreviewLayoutState:(t,i)=>e.setPreviewLayoutState(t,i)}}createWorkspaceResizeGeometry(){return{separatorIsAvailable:e=>this.separatorIsAvailable(e),mainResizeGrowthCapacity:e=>this.mainResizeGrowthCapacity(e),trailingPaneResizeRange:(e,t,i)=>this.trailingPaneResizeRange(e,t,i),mainPreviewResizeRange:(e,t,i)=>this.mainPreviewResizeRange(e,t,i),workspaceWidthCapacity:(e,t,i)=>this.workspaceWidthCapacity(e,t,i),flyoutOnlyResizeRange:(e,t)=>this.flyoutOnlyResizeRange(e,t),previewFlyoutResizeRange:(e,t)=>this.previewFlyoutResizeRange(e,t),probeWidth:e=>this.probeWidth(e),mainTrackUnbounded:()=>this.mainTrackUnbounded(),renderedWorkspaceWidths:()=>this.renderedWorkspaceWidths(),workspaceLogicalGutterWidths:()=>this.workspaceLogicalGutterWidths(),previewNavigationResizeAllowance:()=>this.previewNavigationResizeAllowance(),workspaceResizeDirection:()=>this.workspaceResizeDirection(),syncTrailingWorkspaceResizeAvailability:()=>this.syncTrailingWorkspaceResizeAvailability()}}ensureWorkspaceResizeController(){if(!this.workspaceResizable||!this.isConnected){this.toggleAttribute("data-workspace-resize-ready",!1);return}if(this.workspaceResizeController){this.toggleAttribute("data-workspace-resize-ready",!0);return}if(this.workspaceResizeControllerLoad)return;this.toggleAttribute("data-workspace-resize-ready",!1);const e=import("./workspace-resize-session.js").then(({WorkspaceResizeSessionController:t})=>{!this.workspaceResizable||!this.isConnected||(this.workspaceResizeController=new t(this.createWorkspaceResizeHost(),this.createWorkspaceResizeGeometry(),{requestPreviewNavigationCollapse:()=>this.requestPreviewNavigationCollapse(),resizeStep:i=>this.resizeStep(i)}),this.toggleAttribute("data-workspace-resize-ready",this.workspaceResizable))}).catch(t=>{this.toggleAttribute("data-workspace-resize-ready",!1),console.warn("<esp-page>: workspace resizing could not be loaded; retry is available",t)}).finally(()=>{this.workspaceResizeControllerLoad===e&&(this.workspaceResizeControllerLoad=void 0)});this.workspaceResizeControllerLoad=e}get resizeSession(){return this.workspaceResizeController?.currentSession??null}finishWorkspaceKeyboardResize(e=!0){this.workspaceResizeController?.finishWorkspaceKeyboardResize(e)}endWorkspaceResize(){this.workspaceResizeController?.endWorkspaceResize()}clearWorkspaceRecenteringState(){this.workspaceResizeController?.clearWorkspaceRecenteringState()}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),r=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${r}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=r}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,r=s?.offsetLeft??0,o=s?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,r),i=Math.min(i,r+o));const a=this.getRootNode();let n=this.parentElement??(a instanceof ShadowRoot?a.host:null);for(;n;){const p=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(p)){const c=n.getBoundingClientRect();t=Math.max(t,c.left),i=Math.min(i,c.right)}const u=n.getRootNode();n=n.parentElement??(u instanceof ShadowRoot?u.host:null)}return new pe(t,i)}probeWidth(e){return ue(e)}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}syncMainMaximumConfiguration(){const e=getComputedStyle(this).getPropertyValue("--esp-page-main-max-width").trim()!=="";this.toggleAttribute("data-main-max-configured",e)}workspaceWidthCapacity(e,t,i=0){const s=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,r=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-s-r-Math.max(0,i));return Y(o,e,t)}allocateWorkspaceWidths(e,t,i,s,r,o,a,n=null,p=null){const u=Math.max(0,e),c=Math.max(0,s),h=Math.max(c,r),f=Math.max(0,o),R=Math.max(f,a),m=t?this.preferredPreviewWidth??(n===null?null:A(n,c,h)):null,z=i?this.preferredFlyoutWidth??(p===null?null:A(p,f,R)):null;let y=0,d=0;t&&i?(y=Math.min(h,Math.max(c,u-f)),d=Math.min(R,Math.max(f,u-y))):t?y=Math.min(h,Math.max(c,u)):i&&(d=Math.min(R,Math.max(f,u))),t&&m!==null&&(y=A(m,c,h),i&&z===null&&(d=A(u-y,f,R))),i&&z!==null&&(d=A(z,f,R),t&&m===null&&(y=A(u-d,c,h)));let M=y+d-u;if(M>0&&i){const x=Math.min(M,Math.max(0,d-f));d-=x,M-=x}return M>0&&t&&(y-=Math.min(M,Math.max(0,y-c))),{previewWidth:y,flyoutWidth:d}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}trailingWorkspaceSeparator(){return this.hasAttribute("flyout-open")&&!this.hasAttribute("flyout-overlay-open")?"flyout-end":this.previewVisible?"preview-end":null}trailingWorkspacePane(){const e=this.trailingWorkspaceSeparator()==="flyout-end"?".esp-page-flyout":this.trailingWorkspaceSeparator()==="preview-end"?".esp-page-preview":null;return e?this.shadowRoot?.querySelector(e)??null:null}workspaceLogicalGutterWidths(){const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-canvas--left")?.getBoundingClientRect().width??0),t=this.trailingWorkspacePane();if(!t)return{leading:e,trailing:0};const i=this.visiblePageInlineBounds(),s=t.getBoundingClientRect(),r=this.workspaceResizeDirection()===1?i.right-s.right:s.left-i.left;return{leading:e,trailing:Math.max(0,r)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const s=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,r=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(s)),a=Math.max(o,this.probeWidth(r));return I.of(o,a).cappedAt(Math.max(0,t)+Math.max(0,i))}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?Re:be}previewNavigationResizeAllowance(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.getPreviewNavigationPair()===null)return 0;const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0);return e>l&&(this.previewCollapsedSidebarWidth=e),e>l?e:this.previewCollapsedSidebarWidth}renderedWorkspaceWidths(){const e=this.shadowRoot?.querySelector(".esp-page-preview"),t=this.shadowRoot?.querySelector(".esp-page-flyout");return{previewWidth:this.allocatedPreviewWidth>0?this.allocatedPreviewWidth:e?.getBoundingClientRect().width??0,flyoutWidth:this.allocatedFlyoutWidth>0?this.allocatedFlyoutWidth:t?.getBoundingClientRect().width??0}}mainPreviewResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,i=this.previewNavigationResizeAllowance()){const s=this.previewProbes.minimum,r=this.previewProbes.maximum,o=this.mainProbes.minimum,a=Math.max(0,t+e),n=Math.max(0,a+i-o);return I.of(s,Math.max(s,Math.min(r,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,s=this.previewProbes.maximum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=e+t;return I.of(Math.max(i,a-o),Math.max(i,Math.min(s,a-r)))}separatorIsAvailable(e){return!this.workspaceResizable||this.hasAttribute("flyout-overlay-open")?!1:e==="main-preview"?this.previewVisible:e==="preview-end"||e==="flyout-end"?this.trailingWorkspaceSeparator()===e&&(this.hasAttribute("data-workspace-trailing-edge-exposed")||this.hasAttribute("data-workspace-position-held")||this.hasAttribute("data-workspace-keyboard-adjusting")):this.hasAttribute("flyout-open")}flyoutOnlyResizeRange(e=this.renderedWorkspaceWidths().flyoutWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0){const i=this.flyoutProbes.minimum,s=this.flyoutProbes.maximum,r=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),a=Math.max(0,t+e),n=o>0?Math.max(0,a-o):0,p=Math.max(i,n);return I.of(p,Math.min(s,a-r))}mainTrackUnbounded(){return this.kind==="site"||this.kind==="full"&&!this.hasAttribute("data-main-max-configured")}mainResizeGrowthCapacity(e){return this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,this.probeWidth(this.mainMaxWidthProbe)-e)}previewFitsWithinPage(e,t,i,s,r,o){const a=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),p=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!n||!p)return!1;const u=this.visiblePageInlineBounds(),c=a.getBoundingClientRect(),h=n.getBoundingClientRect(),f=p.getBoundingClientRect(),R=Math.max(t,i),m=Math.max(r,o),z=h.width+l>=t&&h.width<=R+l,y=!s||f.width+l>=r&&f.width<=m+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||f.left+l>=u.left&&f.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?c.left+l>=h.right&&(!s||h.left+l>=f.right):c.right<=h.left+l&&(!s||h.right<=f.left+l);return c.width+l>=e&&z&&y&&d&&M}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!r)return!1;const o=this.visiblePageInlineBounds(),a=s.getBoundingClientRect(),n=r.getBoundingClientRect(),p=Math.max(t,i),u=n.width+l>=t&&n.width<=p+l,c=n.left+l>=o.left&&n.right<=o.right+l,h=getComputedStyle(this).direction==="rtl"?a.left+l>=n.right:a.right<=n.left+l;return a.width+l>=e&&u&&c&&h}workspaceMinimumsCanFit(e,t,i,s,r){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||s&&r<=0)return!1;const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,u=(t&&this.getPreviewNavigationPair()!==null?0:a)+n+e+(t?i:0)+(s?r:0);return o+l>=u}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect();return[e.left,e.right,e.width,t?.left??0,t?.right??0,t?.width??0,i?.left??0,i?.right??0,i?.width??0,s?.left??0,s?.right??0,s?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,s)=>Math.abs(i-(t[s]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||s>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,r=0;for(let o=0;o<ye;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,r=0;continue}const a=this.workspaceGeometrySample();if(r=s&&this.workspaceGeometryMatches(s,a)?r+1:1,r>=me)return!1;s=a}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const r=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return r===null?!0:r?!1:(await this.promoteFlyoutToOverlay(),!0)}async promoteFlyoutToOverlay(){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.flyoutOverlayPromotionWidth===null&&(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.armFlyoutOverlayRecovery()),await this.setPageFlyoutOverlay(!0)}async syncPreviewLayout(e,t=!0){if(e!==this.previewSyncGeneration||!this.isConnected||this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))return;let i=!1;const s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const r=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,a=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),p=this.hasAttribute("data-preview-navigation-collapsed"),u=this.getPreviewNavigationPair(),c=u===null?0:p?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,h=this.probeWidth(this.previewMinWidthProbe),f=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),R=this.probeWidth(this.previewMaxWidthProbe),m=this.probeWidth(this.flyoutMinWidthProbe),z=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),y=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),x=this.mainTrackUnbounded()?0:M,G=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),G){const k=this.visiblePageInlineBounds().width,F=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+ge;!o&&t&&this.flyoutOverlayRecoveryReady&&F&&this.workspaceMinimumsCanFit(d,r,h,!0,m)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const C=r&&!o&&!a,v=n&&!o;if(d>0&&(!C||h>0)&&(!v||m>0)&&(C||v)&&!this.workspaceMinimumsCanFit(d,C,h,v,m)){v&&await this.promoteFlyoutToOverlay();return}const E=(C?h:0)+(v?m:0),q=C&&this.preferredPreviewWidth!==null||v&&this.preferredFlyoutWidth!==null||(C&&f!==null||v&&z!==null),Q=(C?this.preferredPreviewWidth===null?h:A(this.preferredPreviewWidth,h,R):0)+(v?this.preferredFlyoutWidth===null?m:A(this.preferredFlyoutWidth,m,y):0),w=k=>{const F=ce(k,E,Q),O=this.allocateWorkspaceWidths(F,C,v,h,R,m,y,f,z),H=k.maximum+d,ee=Math.max(0,H-k.natural),ae=O.previewWidth+O.flyoutWidth,te=Math.max(0,Math.min(ee,H-ae));return{allocation:O,mainWidth:te,reclaimsMain:te+l<ee}},L=(k,F)=>Math.abs(k.mainWidth-F.mainWidth)>l||Math.abs(k.allocation.previewWidth-F.allocation.previewWidth)>l||Math.abs(k.allocation.flyoutWidth-F.allocation.flyoutWidth)>l,V=this.workspaceWidthCapacity(d,x,p?c:0),$=w(V);let B=$.allocation;if(this.setWorkspaceWidths(B.previewWidth,B.flyoutWidth,q),!C||h<=0){v&&await this.promoteFlyoutIfClipped(e,d,m,y);return}if(u!==null&&c>l){const k=V.maximum+d,F=Y(k+c,d,x),O=w(F);(p?L(w(Y(Math.max(0,k-We),d,x)),O):$.reclaimsMain&&L($,O))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const Z=this.workspaceWidthCapacity(d,x);if(Z.maximum+l<E){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?m:0),i=!1,v&&await this.promoteFlyoutToOverlay();return}const X=w(Z);if(B=X.allocation,this.setWorkspaceWidths(B.previewWidth,B.flyoutWidth,q),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,X.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const J=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,R,v,m,y),()=>this.workspaceCandidateIsMeasurable(!0,v));if(J===null)return;J?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?m:0),i=!1,v&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.syncTrailingWorkspaceResizeAvailability(),this.requestUpdate())}}runScheduledPreviewLayout(){const e=this.previewSyncGeneration,t=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(e,t)).catch(()=>{})}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(fe),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(se)||e.querySelector(se)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.workspaceResizeControllerLoad,this.isUpdatePending?super.getUpdateComplete():e}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&he().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar")||e.has("align"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&(this.workspaceResizable?this.ensureWorkspaceResizeController():(this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState())),this.warnSiteRailSlots()}warnSiteRailSlots(){this.kind!=="site"||this.warnedSiteRails||!["sidebar","right"].some(t=>(this.shadowRoot?.querySelector(`slot[name="${t}"]`)?.assignedElements({flatten:!0}).length??0)>0)||(this.warnedSiteRails=!0,console.warn('Espalier page: kind="site" does not compose with the sidebar/right rails \u2014 sections span the full viewport and the shared well column ignores rail width. Use kind="wide" for railed layouts, or remove the rail slots from a site page.'))}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(this.renderedWorkspaceWidths().previewWidth,this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,this.previewNavigationResizeAllowance()),s=this.previewProbes.minimum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),p=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,u=this.hasAttribute("flyout-open"),c=p+this.allocatedPreviewWidth,h=i.min<=s+l,f=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,R=Math.max(a,c-i.max),m=Math.max(R,Math.max(a,c-i.min)+f),z=n>0?Math.max(R,Math.min(Math.max(a,n),m)):m,y=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:ie;let d,M;if(this.previewVisible){const w=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),L=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,$=w.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,L-w.max),M=Math.max(d,Math.min(o,L-w.min+$))}else{const w=this.flyoutOnlyResizeRange(this.renderedWorkspaceWidths().flyoutWidth,p);d=w.min,M=w.max}const x=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",G=this.previewVisible?"Resize preview and help panes":"Resize help pane",C=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,v=u?"flyout-end":"preview-end",D=v==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,E=this.workspaceLogicalGutterWidths(),_=this.trailingPaneResizeRange(v,D,E.leading+E.trailing),j=v==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",q=v==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return re`
+var P=function(T,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(T,e,t,i);else for(var a=T.length-1;a>=0;a--)(o=T[a])&&(r=(s<3?o(r):s>3?o(e,t,r):o(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r};import{html as re,nothing as ie}from"lit";import{customElement as oe,property as S,state as U}from"lit/decorators.js";import{classMap as ne}from"lit/directives/class-map.js";import{createRef as W,ref as b}from"lit/directives/ref.js";import{EspalierElementBase as le}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as N}from"./bi-directional-sticky-controller.js";import{getEspBus as he}from"../shared/bus-events.js";import{RafThrottle as de}from"../shared/raf-throttle.js";import{InlineBounds as pe,PaneProbes as K,PREVIEW_LAYOUT_EPSILON as l,probeWidth as ue,WidthRange as I}from"./workspace-width.js";import{clampWorkspaceWidth as A,workspaceTargetWidth as ce,workspaceWidthCapacityForAvailable as Y}from"./workspace-geometry.js";import{slotHasContent as ve}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";import{pageStyles as we}from"./esp-page.styles.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as fe}from"../shared/responsive.js";const se='esp-footer, footer, [role~="contentinfo"]',me=5,ye=12,ge=48,We=48,be=16,Re=64;let g=class extends le{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.previewProbes=new K(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.flyoutProbes=new K(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.mainProbes=new K(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new de(()=>this.runScheduledPreviewLayout()),this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.previewNavigationCollapseTask=null,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.flyoutFullHeightActive=!1,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizePointerDown(e,t)},this.onWorkspaceResizePointerMove=e=>{this.workspaceResizeController?.onWorkspaceResizePointerMove(e)},this.onWorkspaceResizePointerEnd=e=>{this.workspaceResizeController?.onWorkspaceResizePointerEnd(e)},this.onWorkspaceResizeBlur=e=>{this.workspaceResizeController?.onWorkspaceResizeBlur(e)},this.onWorkspaceResizeKeyDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizeKeyDown(e,t)},this.schedulePreviewLayout=(e=!1)=>{!this.isConnected||!this.hasUpdated||(this.previewOverlayRecoveryRequested||=e===!0,!(this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))&&(this.previewSyncGeneration+=1,this.previewSyncFrame.restart()))},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{let t=!1;for(const i of e){const s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const r=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=r===void 0||Math.abs(r-s)>.25}t&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new N(this,".esp-page-left > .sticky-wrapper"),new N(this,".esp-page-right > .sticky-wrapper"),new N(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new N(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("esp-flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.ensureWorkspaceResizeController(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState(),this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.previewNavigationCollapseTask=null,this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=a=>{const n=a;return(typeof n.mode=="string"?n.mode:a.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=a=>{const n=a.open;return typeof n=="boolean"?n:a.hasAttribute("open")},s=a=>a.anchor!=null,r=a=>{const n=a.fullHeight;return typeof n=="boolean"?n:a.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(a=>a.tagName==="ESP-FLYOUT");for(const a of o){const n=a,p=typeof n.mode=="string"?n.mode:a.getAttribute("mode");n.pageOverlayRequested&&(!i(a)||p!=="auto")&&(n.pageOverlayRequested=!1)}o.some(a=>a.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(a=>i(a)&&!t(a))),this.toggleAttribute("flyout-overlay-open",o.some(a=>i(a)&&t(a))),this.toggleAttribute("flyout-anchored",o.some(a=>i(a)&&s(a))),this.flyoutFullHeightActive=o.some(a=>i(a)&&!t(a)&&r(a)),this.toggleAttribute("flyout-full-height",this.flyoutFullHeightActive),this.resizeSession&&(this.hasAttribute("flyout-overlay-open")||this.resizeSession.separator==="preview-flyout"&&!this.hasAttribute("flyout-open"))&&this.endWorkspaceResize(),this.requestUpdate(),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),r=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(r==="overlay"||i.pageOverlayRequested===!0||t.getAttribute("aria-modal")==="true")});this.toggleAttribute("descendant-flyout-overlay-open",e)}assignedFlyouts(){return(this.flyoutSlot.value?.assignedElements()??[]).filter(e=>e.tagName==="ESP-FLYOUT")}openAutoFlyouts(){return this.assignedFlyouts().filter(e=>{const t=typeof e.open=="boolean"?e.open:e.hasAttribute("open"),i=typeof e.mode=="string"?e.mode:e.getAttribute("mode");return t&&i!=="overlay"})}async setPageFlyoutOverlay(e){let t=!1;const i=new Set(this.openAutoFlyouts());for(const s of this.assignedFlyouts()){const r=e&&i.has(s);s.pageOverlayRequested!==r&&(s.pageOverlayRequested=r,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(s=>s.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value;return e?ve(e):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(o=>o.slot==="header"&&o.tagName==="ESP-HEADER"),i=e.find(o=>o.slot==="sidebar"&&o.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",r=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||r!=="vertical"||!("previewCollapseRequested"in t)||!("previewCollapseRequested"in i)?null:{header:t,menu:i}}async setPreviewNavigationCollapse(e){const t=e?this.getPreviewNavigationPair():null,i=t!==null&&this.previewHeader===t.header&&this.previewMenu===t.menu,s=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,r=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),r&&(r.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await r?.updateComplete,!t)return!1;const o=i?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return t.header.previewCollapseRequested=!0,t.menu.previewCollapseRequested=!0,await t.header.updateComplete,await t.menu.updateComplete,t.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=o,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(t.header.previewCollapseRequested=!1,t.menu.previewCollapseRequested=!1,await t.header.updateComplete,await t.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,!1)}requestPreviewNavigationCollapse(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.previewNavigationCollapseTask)return;const e=this.setPreviewNavigationCollapse(!0);this.previewNavigationCollapseTask=e,e.then(()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)},()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)})}createWorkspaceResizeHost(){const e=this;return{element:e,get previewSyncTask(){return e.previewSyncTask},get previewNavigationCollapseTask(){return e.previewNavigationCollapseTask},get previewSyncFrame(){return e.previewSyncFrame},get previewSyncGeneration(){return e.previewSyncGeneration},set previewSyncGeneration(t){e.previewSyncGeneration=t},get previewVisible(){return e.previewVisible},get allocatedPreviewWidth(){return e.allocatedPreviewWidth},get allocatedFlyoutWidth(){return e.allocatedFlyoutWidth},get preferredPreviewWidth(){return e.preferredPreviewWidth},set preferredPreviewWidth(t){e.preferredPreviewWidth=t},get preferredFlyoutWidth(){return e.preferredFlyoutWidth},set preferredFlyoutWidth(t){e.preferredFlyoutWidth=t},get align(){return e.align},get previewProbes(){return e.previewProbes},get flyoutProbes(){return e.flyoutProbes},get mainProbes(){return e.mainProbes},get mainMaxWidthProbe(){return e.mainMaxWidthProbe},schedulePreviewLayout:t=>e.schedulePreviewLayout(t),setWorkspaceWidths:(t,i,s)=>e.setWorkspaceWidths(t,i,s),setPreviewLayoutState:(t,i)=>e.setPreviewLayoutState(t,i)}}createWorkspaceResizeGeometry(){return{separatorIsAvailable:e=>this.separatorIsAvailable(e),mainResizeGrowthCapacity:e=>this.mainResizeGrowthCapacity(e),trailingPaneResizeRange:(e,t,i)=>this.trailingPaneResizeRange(e,t,i),mainPreviewResizeRange:(e,t,i)=>this.mainPreviewResizeRange(e,t,i),workspaceWidthCapacity:(e,t,i)=>this.workspaceWidthCapacity(e,t,i),flyoutOnlyResizeRange:(e,t)=>this.flyoutOnlyResizeRange(e,t),previewFlyoutResizeRange:(e,t)=>this.previewFlyoutResizeRange(e,t),probeWidth:e=>this.probeWidth(e),mainTrackUnbounded:()=>this.mainTrackUnbounded(),renderedWorkspaceWidths:()=>this.renderedWorkspaceWidths(),workspaceLogicalGutterWidths:()=>this.workspaceLogicalGutterWidths(),previewNavigationResizeAllowance:()=>this.previewNavigationResizeAllowance(),workspaceResizeDirection:()=>this.workspaceResizeDirection(),syncTrailingWorkspaceResizeAvailability:()=>this.syncTrailingWorkspaceResizeAvailability()}}ensureWorkspaceResizeController(){if(!this.workspaceResizable||!this.isConnected){this.toggleAttribute("data-workspace-resize-ready",!1);return}if(this.workspaceResizeController){this.toggleAttribute("data-workspace-resize-ready",!0);return}if(this.workspaceResizeControllerLoad)return;this.toggleAttribute("data-workspace-resize-ready",!1);const e=import("./workspace-resize-session.js").then(({WorkspaceResizeSessionController:t})=>{!this.workspaceResizable||!this.isConnected||(this.workspaceResizeController=new t(this.createWorkspaceResizeHost(),this.createWorkspaceResizeGeometry(),{requestPreviewNavigationCollapse:()=>this.requestPreviewNavigationCollapse(),resizeStep:i=>this.resizeStep(i)}),this.toggleAttribute("data-workspace-resize-ready",this.workspaceResizable))}).catch(t=>{this.toggleAttribute("data-workspace-resize-ready",!1),console.warn("<esp-page>: workspace resizing could not be loaded; retry is available",t)}).finally(()=>{this.workspaceResizeControllerLoad===e&&(this.workspaceResizeControllerLoad=void 0)});this.workspaceResizeControllerLoad=e}get resizeSession(){return this.workspaceResizeController?.currentSession??null}finishWorkspaceKeyboardResize(e=!0){this.workspaceResizeController?.finishWorkspaceKeyboardResize(e)}endWorkspaceResize(){this.workspaceResizeController?.endWorkspaceResize()}clearWorkspaceRecenteringState(){this.workspaceResizeController?.clearWorkspaceRecenteringState()}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),r=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${r}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=r}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,r=s?.offsetLeft??0,o=s?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,r),i=Math.min(i,r+o));const a=this.getRootNode();let n=this.parentElement??(a instanceof ShadowRoot?a.host:null);for(;n;){const p=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(p)){const c=n.getBoundingClientRect();t=Math.max(t,c.left),i=Math.min(i,c.right)}const u=n.getRootNode();n=n.parentElement??(u instanceof ShadowRoot?u.host:null)}return new pe(t,i)}probeWidth(e){return ue(e)}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}syncMainMaximumConfiguration(){const e=getComputedStyle(this).getPropertyValue("--esp-page-main-max-width").trim()!=="";this.toggleAttribute("data-main-max-configured",e)}workspaceWidthCapacity(e,t,i=0){const s=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,r=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-s-r-Math.max(0,i));return Y(o,e,t)}allocateWorkspaceWidths(e,t,i,s,r,o,a,n=null,p=null){const u=Math.max(0,e),c=Math.max(0,s),h=Math.max(c,r),f=Math.max(0,o),R=Math.max(f,a),m=t?this.preferredPreviewWidth??(n===null?null:A(n,c,h)):null,z=i?this.preferredFlyoutWidth??(p===null?null:A(p,f,R)):null;let y=0,d=0;t&&i?(y=Math.min(h,Math.max(c,u-f)),d=Math.min(R,Math.max(f,u-y))):t?y=Math.min(h,Math.max(c,u)):i&&(d=Math.min(R,Math.max(f,u))),t&&m!==null&&(y=A(m,c,h),i&&z===null&&(d=A(u-y,f,R))),i&&z!==null&&(d=A(z,f,R),t&&m===null&&(y=A(u-d,c,h)));let M=y+d-u;if(M>0&&i){const x=Math.min(M,Math.max(0,d-f));d-=x,M-=x}return M>0&&t&&(y-=Math.min(M,Math.max(0,y-c))),{previewWidth:y,flyoutWidth:d}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}trailingWorkspaceSeparator(){return this.hasAttribute("flyout-open")&&!this.hasAttribute("flyout-overlay-open")?"flyout-end":this.previewVisible?"preview-end":null}trailingWorkspacePane(){const e=this.trailingWorkspaceSeparator()==="flyout-end"?".esp-page-flyout":this.trailingWorkspaceSeparator()==="preview-end"?".esp-page-preview":null;return e?this.shadowRoot?.querySelector(e)??null:null}workspaceLogicalGutterWidths(){const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-canvas--left")?.getBoundingClientRect().width??0),t=this.trailingWorkspacePane();if(!t)return{leading:e,trailing:0};const i=this.visiblePageInlineBounds(),s=t.getBoundingClientRect(),r=this.workspaceResizeDirection()===1?i.right-s.right:s.left-i.left;return{leading:e,trailing:Math.max(0,r)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const s=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,r=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(s)),a=Math.max(o,this.probeWidth(r));return I.of(o,a).cappedAt(Math.max(0,t)+Math.max(0,i))}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?Re:be}previewNavigationResizeAllowance(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.getPreviewNavigationPair()===null)return 0;const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0);return e>l&&(this.previewCollapsedSidebarWidth=e),e>l?e:this.previewCollapsedSidebarWidth}renderedWorkspaceWidths(){const e=this.shadowRoot?.querySelector(".esp-page-preview"),t=this.shadowRoot?.querySelector(".esp-page-flyout");return{previewWidth:this.allocatedPreviewWidth>0?this.allocatedPreviewWidth:e?.getBoundingClientRect().width??0,flyoutWidth:this.allocatedFlyoutWidth>0?this.allocatedFlyoutWidth:t?.getBoundingClientRect().width??0}}mainPreviewResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,i=this.previewNavigationResizeAllowance()){const s=this.previewProbes.minimum,r=this.previewProbes.maximum,o=this.mainProbes.minimum,a=Math.max(0,t+e),n=Math.max(0,a+i-o);return I.of(s,Math.max(s,Math.min(r,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,s=this.previewProbes.maximum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=e+t;return I.of(Math.max(i,a-o),Math.max(i,Math.min(s,a-r)))}separatorIsAvailable(e){return!this.workspaceResizable||this.hasAttribute("flyout-overlay-open")?!1:e==="main-preview"?this.previewVisible:e==="preview-end"||e==="flyout-end"?this.trailingWorkspaceSeparator()===e&&(this.hasAttribute("data-workspace-trailing-edge-exposed")||this.hasAttribute("data-workspace-position-held")||this.hasAttribute("data-workspace-keyboard-adjusting")):this.hasAttribute("flyout-open")}flyoutOnlyResizeRange(e=this.renderedWorkspaceWidths().flyoutWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0){const i=this.flyoutProbes.minimum,s=this.flyoutProbes.maximum,r=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),a=Math.max(0,t+e),n=o>0?Math.max(0,a-o):0,p=Math.max(i,n);return I.of(p,Math.min(s,a-r))}mainTrackUnbounded(){return this.kind==="site"||this.kind==="full"&&!this.hasAttribute("data-main-max-configured")}mainResizeGrowthCapacity(e){return this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,this.probeWidth(this.mainMaxWidthProbe)-e)}previewFitsWithinPage(e,t,i,s,r,o){const a=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),p=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!n||!p)return!1;const u=this.visiblePageInlineBounds(),c=a.getBoundingClientRect(),h=n.getBoundingClientRect(),f=p.getBoundingClientRect(),R=Math.max(t,i),m=Math.max(r,o),z=h.width+l>=t&&h.width<=R+l,y=!s||f.width+l>=r&&f.width<=m+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||f.left+l>=u.left&&f.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?c.left+l>=h.right&&(!s||h.left+l>=f.right):c.right<=h.left+l&&(!s||h.right<=f.left+l);return c.width+l>=e&&z&&y&&d&&M}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!r)return!1;const o=this.visiblePageInlineBounds(),a=s.getBoundingClientRect(),n=r.getBoundingClientRect(),p=Math.max(t,i),u=n.width+l>=t&&n.width<=p+l,c=n.left+l>=o.left&&n.right<=o.right+l,h=getComputedStyle(this).direction==="rtl"?a.left+l>=n.right:a.right<=n.left+l;return a.width+l>=e&&u&&c&&h}workspaceMinimumsCanFit(e,t,i,s,r){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||s&&r<=0)return!1;const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,u=(t&&this.getPreviewNavigationPair()!==null?0:a)+n+e+(t?i:0)+(s?r:0);return o+l>=u}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect();return[e.left,e.right,e.width,t?.left??0,t?.right??0,t?.width??0,i?.left??0,i?.right??0,i?.width??0,s?.left??0,s?.right??0,s?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,s)=>Math.abs(i-(t[s]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||s>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,r=0;for(let o=0;o<ye;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,r=0;continue}const a=this.workspaceGeometrySample();if(r=s&&this.workspaceGeometryMatches(s,a)?r+1:1,r>=me)return!1;s=a}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const r=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return r===null?!0:r?!1:(await this.promoteFlyoutToOverlay(),!0)}async promoteFlyoutToOverlay(){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.flyoutOverlayPromotionWidth===null&&(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.armFlyoutOverlayRecovery()),await this.setPageFlyoutOverlay(!0)}async syncPreviewLayout(e,t=!0){if(e!==this.previewSyncGeneration||!this.isConnected||this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))return;let i=!1;const s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const r=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,a=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),p=this.hasAttribute("data-preview-navigation-collapsed"),u=this.getPreviewNavigationPair(),c=u===null?0:p?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,h=this.probeWidth(this.previewMinWidthProbe),f=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),R=this.probeWidth(this.previewMaxWidthProbe),m=this.probeWidth(this.flyoutMinWidthProbe),z=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),y=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),x=this.mainTrackUnbounded()?0:M,G=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),G){const k=this.visiblePageInlineBounds().width,F=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+ge;!o&&t&&this.flyoutOverlayRecoveryReady&&F&&this.workspaceMinimumsCanFit(d,r,h,!0,m)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const C=r&&!o&&!a,v=n&&!o;if(d>0&&(!C||h>0)&&(!v||m>0)&&(C||v)&&!this.workspaceMinimumsCanFit(d,C,h,v,m)){v&&await this.promoteFlyoutToOverlay();return}const L=(C?h:0)+(v?m:0),q=C&&this.preferredPreviewWidth!==null||v&&this.preferredFlyoutWidth!==null||(C&&f!==null||v&&z!==null),Q=(C?this.preferredPreviewWidth===null?h:A(this.preferredPreviewWidth,h,R):0)+(v?this.preferredFlyoutWidth===null?m:A(this.preferredFlyoutWidth,m,y):0),w=k=>{const F=ce(k,L,Q),O=this.allocateWorkspaceWidths(F,C,v,h,R,m,y,f,z),H=k.maximum+d,ee=Math.max(0,H-k.natural),ae=O.previewWidth+O.flyoutWidth,te=Math.max(0,Math.min(ee,H-ae));return{allocation:O,mainWidth:te,reclaimsMain:te+l<ee}},E=(k,F)=>Math.abs(k.mainWidth-F.mainWidth)>l||Math.abs(k.allocation.previewWidth-F.allocation.previewWidth)>l||Math.abs(k.allocation.flyoutWidth-F.allocation.flyoutWidth)>l,V=this.workspaceWidthCapacity(d,x,p?c:0),$=w(V);let B=$.allocation;if(this.setWorkspaceWidths(B.previewWidth,B.flyoutWidth,q),!C||h<=0){v&&await this.promoteFlyoutIfClipped(e,d,m,y);return}if(u!==null&&c>l){const k=V.maximum+d,F=Y(k+c,d,x),O=w(F);(p?E(w(Y(Math.max(0,k-We),d,x)),O):$.reclaimsMain&&E($,O))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const Z=this.workspaceWidthCapacity(d,x);if(Z.maximum+l<L){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?m:0),i=!1,v&&await this.promoteFlyoutToOverlay();return}const X=w(Z);if(B=X.allocation,this.setWorkspaceWidths(B.previewWidth,B.flyoutWidth,q),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,X.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const J=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,R,v,m,y),()=>this.workspaceCandidateIsMeasurable(!0,v));if(J===null)return;J?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?m:0),i=!1,v&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.syncTrailingWorkspaceResizeAvailability(),this.requestUpdate())}}runScheduledPreviewLayout(){const e=this.previewSyncGeneration,t=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(e,t)).catch(()=>{})}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(fe),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(se)||e.querySelector(se)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.workspaceResizeControllerLoad,this.isUpdatePending?super.getUpdateComplete():e}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&he().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar")||e.has("align"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&(this.workspaceResizable?this.ensureWorkspaceResizeController():(this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState())),this.warnSiteRailSlots()}warnSiteRailSlots(){this.kind!=="site"||this.warnedSiteRails||!["sidebar","right"].some(t=>(this.shadowRoot?.querySelector(`slot[name="${t}"]`)?.assignedElements({flatten:!0}).length??0)>0)||(this.warnedSiteRails=!0,console.warn('Espalier page: kind="site" does not compose with the sidebar/right rails \u2014 sections span the full viewport and the shared well column ignores rail width. Use kind="wide" for railed layouts, or remove the rail slots from a site page.'))}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(this.renderedWorkspaceWidths().previewWidth,this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,this.previewNavigationResizeAllowance()),s=this.previewProbes.minimum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),p=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,u=this.hasAttribute("flyout-open"),c=p+this.allocatedPreviewWidth,h=i.min<=s+l,f=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,R=Math.max(a,c-i.max),m=Math.max(R,Math.max(a,c-i.min)+f),z=n>0?Math.max(R,Math.min(Math.max(a,n),m)):m,y=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:ie;let d,M;if(this.previewVisible){const w=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),E=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,$=w.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,E-w.max),M=Math.max(d,Math.min(o,E-w.min+$))}else{const w=this.flyoutOnlyResizeRange(this.renderedWorkspaceWidths().flyoutWidth,p);d=w.min,M=w.max}const x=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",G=this.previewVisible?"Resize preview and help panes":"Resize help pane",C=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,v=u?"flyout-end":"preview-end",D=v==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,L=this.workspaceLogicalGutterWidths(),_=this.trailingPaneResizeRange(v,D,L.leading+L.trailing),j=v==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",q=v==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return re`
       <div part="wrapper" class="esp-page ${ne({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>

package/dist/page/esp-page.styles.js

@@ -1,4 +1,4 @@
-import{css as e}from"lit";import{EspalierElementBase as t}from"../shared/esp-element-base.js";const s=[...t.styles,e`
+import{css as a,unsafeCSS as e}from"lit";import{EspalierElementBase as i}from"../shared/esp-element-base.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as t}from"../shared/responsive.js";const n=[...i.styles,a`
     :host {
       --_esp-page-resolved-max-width: var(
         --esp-page-main-max-width,
@@ -129,7 +129,7 @@ import{css as e}from"lit";import{EspalierElementBase as t}from"../shared/esp-ele
     }
 
     
-    @media (max-width: 50em) {
+    @media ${e(t)} {
       :host([flyout-open]) {
         --_esp-page-flyout-min: 0px;
       }
@@ -442,7 +442,7 @@ import{css as e}from"lit";import{EspalierElementBase as t}from"../shared/esp-ele
         margin-inline-start: var(--_esp-page-preview-used-width);
 
         
-        @media (max-width: 50em) {
+        @media ${e(t)} {
           z-index: var(--esp-flyout-z-index, 3000);
         }
       }
@@ -745,4 +745,4 @@ import{css as e}from"lit";import{EspalierElementBase as t}from"../shared/esp-ele
         transition: none;
       }
     }
-  `];export{s as pageStyles};
+  `];export{n as pageStyles};

package/dist/pickers/esp-pick-one.js

@@ -1,14 +1,15 @@
-var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,n):t,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,e,n,t);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(s=(i<3?o(s):i>3?o(e,n,s):o(e,n))||s);return i>3&&s&&Object.defineProperty(e,n,s),s};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as p}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as k}from"../shared/esp-element-base.js";import{styleMap as P}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as v}from"../shared/svgs/filter.js";import{EspalierPickerBase as u}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends u{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=e=>{this.selectOpenMenuAtPoint(e)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=e=>{if(performance.now()-this.lastMenuPointSelectionAt<500){e.preventDefault(),e.stopPropagation();return}this.selectOpenMenuAtPoint(e)}}get selectedItem(){return this.selection.item}decorateFilteredItems(e){if(!this.selectedItem)return e.map(t=>({...t}));const n=this.selectedItem.value;return e.map(t=>({...t,selected:t.value===n}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(e){const n=this.pickerItems??[];for(const i of n)i.selected=i.value===e;const t=this.pickerMenu.value?.pickerItems;if(t&&t!==n)for(const i of t)i.selected=i.value===e;this.selection=r.resolve(n,e),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(e){this.value=e}syncSelectionFromItems(e){if(e.has("pickerItems")){if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const n=this.pickerItems.find(t=>t.selected);n&&(this.selection=r.of(n))}}}selectOpenMenuAtPoint(e){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(e.clientX,e.clientY)??!1)?!1:(this.suppressNextHostClick=!0,e.preventDefault(),e.stopPropagation(),!0)}render(){const{showOptions:e}=this;return m`
+var u=function(h,t,i,e){var n=arguments.length,s=n<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(h,t,i,e);else for(var l=h.length-1;l>=0;l--)(o=h[l])&&(s=(n<3?o(s):n>3?o(t,i,s):o(t,i))||s);return n>3&&s&&Object.defineProperty(t,i,s),s};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{styleMap as P}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as v}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=t=>{this.selectOpenMenuAtPoint(t)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=t=>{if(performance.now()-this.lastMenuPointSelectionAt<500){t.preventDefault(),t.stopPropagation();return}this.selectOpenMenuAtPoint(t)}}get selectedItem(){return this.selection.item}decorateFilteredItems(t){if(!this.selectedItem)return t.map(e=>({...e}));const i=this.selectedItem.value;return t.map(e=>({...e,selected:e.value===i}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(t){const i=this.pickerItems??[];for(const n of i)n.selected=n.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==i)for(const n of e)n.selected=n.value===t;this.selection=r.resolve(i,t),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(t.has("pickerItems")){if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const i=this.pickerItems.find(e=>e.selected);i&&(this.selection=r.of(i))}}}selectOpenMenuAtPoint(t){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(t.clientX,t.clientY)??!1)?!1:(this.suppressNextHostClick=!0,t.preventDefault(),t.stopPropagation(),!0)}render(){const{showOptions:t}=this,i={"esp-field":!0,"show-options":t};return m`
       <div
+        ${a(this.pickerField)}
         tabindex="-1"
-        class=${g({"esp-field":!0,"show-options":e})}
+        class=${k(i)}
         @pointerdown=${this.handleHostPointerDown}
         @mousedown=${this.handleHostMouseDown}
-        @click=${t=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,t.preventDefault(),t.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions=!this.showOptions,t.stopPropagation()}}
+        @click=${e=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,e.preventDefault(),e.stopPropagation();return}if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
       >
         <section>
           <input
-            ${p(this.theInput)}
+            ${a(this.theInput)}
             class="esp-input"
             value=${this.selectedItem?.text??""}
             style=${P(this.selectedItem?.styles??{})}
@@ -17,10 +18,11 @@ var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnP
             @input=${this.handleTypeaheadInput}
             @focus=${()=>{this.inputFocused=!0,this.typeahead&&!this.suppressAutoSelect&&this.theInput.value?.select(),this.suppressAutoSelect=!1}}
             @blur=${this.handleInputBlur}
-            @keydown=${t=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(t))switch(t.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(t.key,t);break}}}
+            @keydown=${e=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(e))switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(e.key,e);break}}}
           />
         </section>
         <label>${this.typeahead&&this.inputFocused?v:w}</label>
+        ${this.renderPickerMenuDismissButton()}
 
         <esp-picker-menu
           .pickerItems=${this.menuItems}
@@ -28,16 +30,17 @@ var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnP
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${p(this.pickerMenu)}
-          @esp-picker-menu-selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const i=t.detail,s=i.length>0?i[0]:void 0;(i.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
-          @esp-picker-menu-close-requested=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=t.detail,s=i.length>0?i[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          ${a(this.pickerMenu)}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const n=e.detail,s=n.length>0?n[0]:void 0;(n.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
+          @esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const n=e.detail,s=n.length>0?n[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          @esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
         >
         </esp-picker-menu>
       </div>
-      <slot ${p(this.itemsSlot)}></slot>
-    `}};c.styles=[...k.styles,u.pickerFieldStyles,d`
+      <slot ${a(this.itemsSlot)}></slot>
+    `}};c.styles=[...g.styles,...p.pickerFieldStyles,d`
       .esp-field input.esp-input {
         width: 0;
         flex-grow: 1;
       }
-    `],h([y()],c.prototype,"selection",void 0),h([I({type:String})],c.prototype,"value",null),c=h([f("esp-pick-one")],c);export{c as EspalierPickOne};
+    `],u([y()],c.prototype,"selection",void 0),u([I({type:String})],c.prototype,"value",null),c=u([f("esp-pick-one")],c);export{c as EspalierPickOne};

package/dist/pickers/esp-pick-some.js

@@ -1,8 +1,9 @@
-var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,t,s,e);else for(var l=o.length-1;l>=0;l--)(n=o[l])&&(i=(a<3?n(i):a>3?n(t,s,i):n(t,s))||i);return a>3&&i&&Object.defineProperty(t,s,i),i};import{css as I,html as p}from"lit";import{customElement as k,property as u,state as v}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{ref as d}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{caretUpDown as b}from"../shared/svgs/caret-up-down.js";import{filter as $}from"../shared/svgs/filter.js";import{plus as V}from"../shared/svgs/plus.js";import{EspalierPickerBase as m}from"./esp-picker-base.js";import{arrayKeysMatch as f}from"../shared/utilities.js";let r=class extends m{constructor(){super(...arguments),this.selectedItems=[],this.initialSyncDone=!1,this.addNewValue=null}decorateFilteredItems(t){const s=new Set(this.selectedItems.map(e=>e.value));return t.map(e=>({...e,selected:s.has(e.value)}))}get typeaheadRestoreText(){return""}get values(){return this.selectedItems.map(t=>t.value)}getPickerFormValue(){const t=this.values;return t.length>0?t.join(","):null}getPickerValidity(){return this.required&&this.selectedItems.length===0?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select at least one option."}:null}handlePickerReset(){this.selectedItems=[],this.pickerItems=this.pickerItems.map(t=>({...t,selected:!1}))}handlePickerRestore(t){const s=t.split(",");this.pickerItems=this.pickerItems.map(e=>({...e,selected:s.includes(e.value)})),this.selectedItems=this.pickerItems.filter(e=>e.selected)}syncSelectionFromItems(t){if(this.initialSyncDone||!t.has("pickerItems")||this.selectedItems.length>0)return;const s=this.pickerItems.filter(e=>e.selected);s.length>0&&(this.selectedItems=s,this.initialSyncDone=!0)}setSelectedItems(t){this.initialSyncDone=!0,this.selectedItems=t,this.pickerItems=this.pickerItems.map(s=>({...s,selected:this.selectedItems.some(e=>e.value===s.value)})),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItems),this.focus()}get canAddNewValue(){if(!this.addNewValue||!this.typeahead)return!1;const t=this.theInput.value;if(!t||!t.value.trim())return!1;const s=t.value.trim().toLowerCase(),e=a=>a.text.toLowerCase()===s;return!(this.pickerItems.some(e)||this.typeaheadIsRemote&&this.filteredItems.some(e))}async handleAddNewValue(){if(!this.addNewValue)return;const t=this.theInput.value;if(!t||!t.value.trim())return;const s=t.value.trim();let e;try{e=await this.addNewValue(s)}catch{return}const a=this.pickerItems.find(i=>i.value===e.value);if(a){this.selectedItems.some(i=>i.value===a.value)||(a.selected=!0,this.setSelectedItems([...this.selectedItems,a])),this.resetTypeaheadInput();return}e.selected=!0,this.pickerItems=[...this.pickerItems,e],this.setSelectedItems([...this.selectedItems,e]),this.resetTypeaheadInput(),this.refreshTypeaheadItems(),this.typeaheadIsRemote&&this.fetchInitialTypeaheadItems()}get iconSvg(){return this.canAddNewValue?V:this.typeahead&&this.inputFocused?$:b}render(){const{showOptions:t}=this;return p`
+var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,t,s,e);else for(var l=o.length-1;l>=0;l--)(n=o[l])&&(i=(a<3?n(i):a>3?n(t,s,i):n(t,s))||i);return a>3&&i&&Object.defineProperty(t,s,i),i};import{css as I,html as p}from"lit";import{customElement as k,property as u,state as y}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{ref as h}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{caretUpDown as b}from"../shared/svgs/caret-up-down.js";import{filter as $}from"../shared/svgs/filter.js";import{plus as V}from"../shared/svgs/plus.js";import{EspalierPickerBase as m}from"./esp-picker-base.js";import{arrayKeysMatch as f}from"../shared/utilities.js";let r=class extends m{constructor(){super(...arguments),this.selectedItems=[],this.initialSyncDone=!1,this.addNewValue=null}decorateFilteredItems(t){const s=new Set(this.selectedItems.map(e=>e.value));return t.map(e=>({...e,selected:s.has(e.value)}))}get typeaheadRestoreText(){return""}get values(){return this.selectedItems.map(t=>t.value)}getPickerFormValue(){const t=this.values;return t.length>0?t.join(","):null}getPickerValidity(){return this.required&&this.selectedItems.length===0?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select at least one option."}:null}handlePickerReset(){this.selectedItems=[],this.pickerItems=this.pickerItems.map(t=>({...t,selected:!1}))}handlePickerRestore(t){const s=t.split(",");this.pickerItems=this.pickerItems.map(e=>({...e,selected:s.includes(e.value)})),this.selectedItems=this.pickerItems.filter(e=>e.selected)}syncSelectionFromItems(t){if(this.initialSyncDone||!t.has("pickerItems")||this.selectedItems.length>0)return;const s=this.pickerItems.filter(e=>e.selected);s.length>0&&(this.selectedItems=s,this.initialSyncDone=!0)}setSelectedItems(t){this.initialSyncDone=!0,this.selectedItems=t,this.pickerItems=this.pickerItems.map(s=>({...s,selected:this.selectedItems.some(e=>e.value===s.value)})),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItems),this.focus()}get canAddNewValue(){if(!this.addNewValue||!this.typeahead)return!1;const t=this.theInput.value;if(!t||!t.value.trim())return!1;const s=t.value.trim().toLowerCase(),e=a=>a.text.toLowerCase()===s;return!(this.pickerItems.some(e)||this.typeaheadIsRemote&&this.filteredItems.some(e))}async handleAddNewValue(){if(!this.addNewValue)return;const t=this.theInput.value;if(!t||!t.value.trim())return;const s=t.value.trim();let e;try{e=await this.addNewValue(s)}catch{return}const a=this.pickerItems.find(i=>i.value===e.value);if(a){this.selectedItems.some(i=>i.value===a.value)||(a.selected=!0,this.setSelectedItems([...this.selectedItems,a])),this.resetTypeaheadInput();return}e.selected=!0,this.pickerItems=[...this.pickerItems,e],this.setSelectedItems([...this.selectedItems,e]),this.resetTypeaheadInput(),this.refreshTypeaheadItems(),this.typeaheadIsRemote&&this.fetchInitialTypeaheadItems()}get iconSvg(){return this.canAddNewValue?V:this.typeahead&&this.inputFocused?$:b}render(){const{showOptions:t}=this,s={"esp-field":!0,"show-options":t};return p`
       <div
+        ${h(this.pickerField)}
         tabindex="-1"
-        class=${y({"esp-field":!0,"show-options":t})}
-        @click=${e=>{this.theInput.value?.focus(),this.showOptions=!this.showOptions,e.stopPropagation()}}
+        class=${v(s)}
+        @click=${e=>{if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
       >
         <section>
           ${this.selectedItems.map(e=>p`<span
@@ -11,7 +12,7 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
                 >${e.text}</span
               >`)}
           <input
-            ${d(this.theInput)}
+            ${h(this.theInput)}
             class="esp-input"
             placeholder=${this.placeholder}
             ?readonly=${!this.typeahead}
@@ -30,6 +31,7 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           aria-label=${g(this.canAddNewValue?"Add new value":void 0)}
           >${this.iconSvg}</label
         >
+        ${this.renderPickerMenuDismissButton()}
 
         <esp-picker-menu
           .pickerItems=${this.menuItems}
@@ -37,14 +39,15 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${d(this.pickerMenu)}
+          ${h(this.pickerMenu)}
           multi-select
-          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead){const i=new Set(this.filteredItems.map(h=>h.value)),l=[...this.selectedItems.filter(h=>!i.has(h.value)),...e.detail];if(f(l,this.selectedItems,"value"))return;this.setSelectedItems(l),this.resetTypeaheadInput();return}f(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail)}}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead){const i=new Set(this.filteredItems.map(d=>d.value)),l=[...this.selectedItems.filter(d=>!i.has(d.value)),...e.detail];if(f(l,this.selectedItems,"value"))return;this.setSelectedItems(l),this.resetTypeaheadInput();return}f(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail)}}
+          @esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
         >
         </esp-picker-menu>
       </div>
-      <slot ${d(this.itemsSlot)}></slot>
-    `}};r.styles=[...w.styles,m.pickerFieldStyles,I`
+      <slot ${h(this.itemsSlot)}></slot>
+    `}};r.styles=[...w.styles,...m.pickerFieldStyles,I`
       :host {
         --_esp-pick-some-chip-hover-l: calc(var(--esp-l-raised-2) * 0.88);
         --_esp-pick-some-chip-focus-l: calc(var(--esp-l-raised-2) * 0.8);
@@ -99,4 +102,4 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           color: var(--esp-color-primary);
         }
       }
-    `],c([v()],r.prototype,"selectedItems",void 0),c([u({type:Array})],r.prototype,"values",null),c([u({attribute:!1})],r.prototype,"addNewValue",void 0),r=c([k("esp-pick-some")],r);export{r as EspalierPickSome};
+    `],c([y()],r.prototype,"selectedItems",void 0),c([u({type:Array})],r.prototype,"values",null),c([u({attribute:!1})],r.prototype,"addNewValue",void 0),r=c([k("esp-pick-some")],r);export{r as EspalierPickSome};

package/dist/pickers/esp-picker-base.d.ts

@@ -2,7 +2,7 @@ import { type EspalierFormField } from "../form-item/esp-form-item.js";
 import { type EspalierPickerMenu } from "./esp-picker-menu.js";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type PickerItem } from "./esp-picker-item.js";
-import { type PropertyValues } from "lit";
+import { type PropertyValues, type TemplateResult } from "lit";
 import { FormFieldController } from "../shared/form-field-controller.js";
 import type { TypeaheadFetchItems } from "./types.js";
 /** Keys that drive the picker menu rather than the input's text. */
@@ -32,6 +32,7 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
     protected itemsSlot: import("lit-html/directives/ref.js").Ref<HTMLSlotElement>;
     protected pickerMenu: import("lit-html/directives/ref.js").Ref<EspalierPickerMenu>;
     protected theInput: import("lit-html/directives/ref.js").Ref<HTMLInputElement>;
+    protected pickerField: import("lit-html/directives/ref.js").Ref<HTMLDivElement>;
     protected get showOptions(): boolean;
     protected set showOptions(val: boolean);
     protected typeaheadLoading: boolean;
@@ -97,6 +98,14 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
      * click has closed the menu itself, or focus really is gone.
      */
     protected handleInputBlur: (event: FocusEvent) => void;
+    protected closeAndResetTypeahead(): void;
+    /** Close without changing selection, then restore focus to the combobox. */
+    protected dismissMenu(): void;
+    /** Handle the public menu request while preserving owner-level state. */
+    protected readonly handleMenuDismissRequested: (ev: Event) => void;
+    /** Render compact-only chrome outside the listbox accessibility subtree. */
+    protected renderPickerMenuDismissButton(): TemplateResult;
+    disconnectedCallback(): void;
     /**
      * Handle the keys both pickers treat identically.
      *
@@ -203,5 +212,5 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
      * Subclasses spread this into their own `static styles` and add only what is
      * genuinely theirs (`esp-pick-some`'s selection chips, for example).
      */
-    static pickerFieldStyles: import("lit").CSSResult;
+    static pickerFieldStyles: import("lit").CSSResult[];
 }

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

@@ -1,33 +1,89 @@
-var r=function(d,e,t,o){var a=arguments.length,s=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,o);else for(var l=d.length-1;l>=0;l--)(n=d[l])&&(s=(a<3?n(s):a>3?n(e,t,s):n(e,t))||s);return a>3&&s&&Object.defineProperty(e,t,s),s};import{createRef as u}from"lit/directives/ref.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{property as h,state as p}from"lit/decorators.js";import{EspalierPickerItem as y}from"./esp-picker-item.js";import{css as v}from"lit";import{findContainingPopovers as g,PopoverController as I}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as w,viewportSize as c}from"../shared/viewport.js";import{FormFieldController as C}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as k}from"../shared/form-field-description-controller.js";import{TypeaheadController as b}from"./typeahead-controller.js";class i extends f{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new C({host:this,internals:this.internals,getFormValue:()=>this.getPickerFormValue(),getValidity:()=>this.getPickerValidity(),onReset:()=>this.handlePickerReset(),onRestore:e=>this.handlePickerRestore(e),onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new k({host:this,getTarget:()=>this.theInput.value}),this._showOptions=!1,this.itemsSlot=u(),this.pickerMenu=u(),this.theInput=u(),this._lastViewportHeight=0,this.popoverCtrl=new I({host:this,closeStrategy:"source-identity",isOpen:()=>this._showOptions,onShouldClose:()=>{this.showOptions=!1},onPositionUpdate:()=>{this.pickerMenu.value?.updatePosition(this);const{height:e}=c();if(this._lastViewportHeight!==0&&e!==this._lastViewportHeight){const t=this._lastViewportHeight-e;t>=i.KEYBOARD_THRESHOLD?(this._scrollToContainPopover(),this._lastViewportHeight=e):t<0&&(this._lastViewportHeight=e)}},getInsideElements:()=>[this.pickerMenu.value??null],onOutsideClick:()=>{this.showOptions=!1}}),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.typeaheadCtrl=new b({host:this,onFilteredItemsChanged:e=>{this.filteredItems=this.decorateFilteredItems(e)},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,this.handleTypeaheadInput=e=>{this.typeahead&&(this.typeaheadCtrl.setQuery(e.target.value),this.showOptions||(this.showOptions=!0))},this.handleInputBlur=e=>{this.inputFocused=!1;const t=e.relatedTarget;if(!(t&&(this.contains(t)||this.shadowRoot?.contains(t)))){if(!t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&this.closeAndResetTypeahead()});return}this.closeAndResetTypeahead()}},this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.pickerItems=[],this.placeholder="Choose...",this.width="",this._slotExtractPending=!1}getPickerFormValue(){return null}getPickerValidity(){return null}handlePickerReset(){}handlePickerRestore(e){}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}get showOptions(){return this._showOptions}set showOptions(e){if(e&&this.disabled)return;const t=this._showOptions;this._showOptions=e;const o=this.theInput.value;o&&(o.ariaExpanded=String(e)),e&&this.pickerMenu.value?(this.popoverCtrl.publishCloseOthers(g(this)),this.pickerMenu.value.positionSelf(this),this._lastViewportHeight=c().height,this.clearActiveDescendant(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick()):!e&&this.pickerMenu.value&&(this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.pickerMenu.value.hideMenu(),this.clearActiveDescendant(),this._lastViewportHeight=0),e&&!t&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote}get typeaheadIsRemote(){return this.typeaheadCtrl.isRemote}refreshTypeaheadItems(){this.typeaheadCtrl.setAllItems(this.pickerItems)}fetchInitialTypeaheadItems(){this.typeaheadCtrl.fetchInitial()}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.typeaheadRestoreText),this.preservesRemoteResultsOnReset?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}closeAndResetTypeahead(){this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}handleSharedPickerKeydown(e){switch(e.key){case" ":return this.typeahead||(this.showOptions=!this.showOptions),!0;case"Tab":return this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput(),!0;case"Escape":return this.closeAndResetTypeahead(),!0;default:return!1}}handleMenuNavigationKey(e,t){if(t.preventDefault(),!this.showOptions){this.showOptions=!0;return}this.pickerMenu.value?.doKeyboardNav(e),this.updateActiveDescendant()}get menuItems(){return this.typeahead?this.filteredItems:this.pickerItems}focus(){this.theInput.value?.focus()}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}updateActiveDescendant(){const e=this.theInput.value;if(!e||!this.pickerMenu.value)return;const t=this.pickerMenu.value.getHighlightedElement();e.ariaActiveDescendantElement=t}clearActiveDescendant(){const e=this.theInput.value;e&&(e.ariaActiveDescendantElement=null)}_scrollToContainPopover(){const e=this.pickerMenu.value;e&&w(this,e,()=>{this.pickerMenu.value?.updatePosition(this)})}syncSelectionFromItems(e){}willUpdate(e){super.willUpdate(e),this.syncSelectionFromItems(e),this.typeahead&&((e.has("pickerItems")||e.has("typeahead"))&&this.typeaheadCtrl.setAllItems(this.pickerItems),(e.has("fetchItems")||e.has("typeahead"))&&this.typeaheadCtrl.setFetchItems(this.fetchItems),(e.has("debounceMs")||e.has("typeahead"))&&this.debounceMs!==void 0&&this.typeaheadCtrl.setDebounceMs(this.debounceMs))}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.width=this.width:this.style.removeProperty("width"))}firstUpdated(e){super.firstUpdated(e);const t=this.theInput.value;if(t&&(t.role="combobox",t.ariaHasPopup="listbox",t.ariaExpanded="false",t.ariaAutoComplete=this.typeahead?"list":"none",this.pickerMenu.value)){const a=t;a.ariaControlsElements=[this.pickerMenu.value]}const o=this.itemsSlot.value;o&&(this.extractSlotItems(o),o.addEventListener("slotchange",()=>this.extractSlotItems(o)))}extractSlotItems(e){this._slotExtractPending||(this._slotExtractPending=!0,queueMicrotask(()=>{this._slotExtractPending=!1;const t=e.assignedElements();if(t.length===0)return;const o=[];for(const a of t){if(!(a instanceof y))throw new Error(`Picker items must be of type esp-picker-item, but got <${a.tagName.toLowerCase()}>`);const s=a,n=Array.from(s.childNodes),l=n.length>0?n.map(m=>m.cloneNode(!0)):void 0;o.push({text:s.text||s.getAttribute("text")||s.textContent?.trim()||"",value:s.value||s.getAttribute("value")||"",selected:s.selected||s.hasAttribute("selected"),icon:s.icon||s.getAttribute("icon")||"",styles:s.styles,slotNodes:l})}this.pickerItems=o;for(const a of t)a.remove()}))}}i.formAssociated=!0,i.KEYBOARD_THRESHOLD=150,i.pickerFieldStyles=v`
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    .esp-field {
-      display: grid;
-      grid-template-columns: auto min-content;
-      position: relative;
-
-      > section {
-        cursor: pointer;
-        display: flex;
-        flex-wrap: wrap;
+var l=function(m,e,t,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(m,e,t,r);else for(var h=m.length-1;h>=0;h--)(n=m[h])&&(i=(o<3?n(i):o>3?n(e,t,i):n(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i};import{createRef as u}from"lit/directives/ref.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{property as a,state as d}from"lit/decorators.js";import{EspalierPickerItem as I}from"./esp-picker-item.js";import{css as P,html as C,unsafeCSS as R}from"lit";import{findContainingPopovers as F,PopoverController as A}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as S,viewportSize as y}from"../shared/viewport.js";import{FormFieldController as _}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as O}from"../shared/form-field-description-controller.js";import{TypeaheadController as M}from"./typeahead-controller.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as z}from"../shared/responsive.js";import{cancelSVG as x}from"../shared/svgs/cancel.js";import{quietCloseButton as E}from"../shared/style-fragments.js";import{ScrollLock as g}from"../shared/overlay-controller.js";class s extends w{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new _({host:this,internals:this.internals,getFormValue:()=>this.getPickerFormValue(),getValidity:()=>this.getPickerValidity(),onReset:()=>this.handlePickerReset(),onRestore:e=>this.handlePickerRestore(e),onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new O({host:this,getTarget:()=>this.theInput.value}),this._showOptions=!1,this.itemsSlot=u(),this.pickerMenu=u(),this.theInput=u(),this.pickerField=u(),this._lastViewportHeight=0,this._containRepositionFrame=null,this.fullscreenPlaceholderInlineSize=0,this.fullscreenPlaceholderViewportWidth=0,this.fullscreenPlaceholderFieldHeight=0,this.fullscreenPlaceholderEntryInlineSize=0,this.fullscreenPlaceholderContentSized=!1,this.popoverCtrl=new A({host:this,closeStrategy:"source-identity",isOpen:()=>this._showOptions,onShouldClose:()=>{this.showOptions=!1},onPositionUpdate:()=>{this.pickerMenu.value?.updatePosition(this);const{height:e}=y();if(this.pickerMenu.value?.hasAttribute("data-fullscreen")){this._lastViewportHeight=e;return}if(this._lastViewportHeight!==0&&e!==this._lastViewportHeight){const t=this._lastViewportHeight-e;t>=s.KEYBOARD_THRESHOLD?(this._scrollToContainPopover(),this._lastViewportHeight=e):t<0&&(this._lastViewportHeight=e)}},getPositionElements:()=>this.hasAttribute("data-picker-menu-fullscreen")?[this.pickerField.value]:[this.pickerMenu.value],getInsideElements:()=>[this.pickerMenu.value??null],onOutsideClick:()=>{this.closeAndResetTypeahead(),requestAnimationFrame(()=>{const e=document.activeElement;!this.showOptions&&(e===null||e===document.body||e===this)&&this.theInput.value?.focus()})}}),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.typeaheadCtrl=new M({host:this,onFilteredItemsChanged:e=>{this.filteredItems=this.decorateFilteredItems(e)},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,this.handleTypeaheadInput=e=>{this.typeahead&&(this.typeaheadCtrl.setQuery(e.target.value),this.showOptions||(this.showOptions=!0))},this.handleInputBlur=e=>{this.inputFocused=!1;const t=e.relatedTarget;if(!(t&&(this.contains(t)||this.shadowRoot?.contains(t)))){if(t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.closeAndResetTypeahead()});return}if(!t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&this.closeAndResetTypeahead()});return}this.closeAndResetTypeahead()}},this.handleMenuDismissRequested=e=>{e.preventDefault(),e.stopPropagation(),this.dismissMenu()},this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.pickerItems=[],this.placeholder="Choose...",this.width="",this._slotExtractPending=!1}getPickerFormValue(){return null}getPickerValidity(){return null}handlePickerReset(){}handlePickerRestore(e){}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}get showOptions(){return this._showOptions}set showOptions(e){if(e&&this.disabled)return;const t=this._showOptions;this._showOptions=e;const r=this.theInput.value;r&&(r.ariaExpanded=String(e)),e&&this.pickerMenu.value?(this.popoverCtrl.publishCloseOthers(F(this)),this.pickerMenu.value.positionSelf(this),this._lastViewportHeight=y().height,this.clearActiveDescendant(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick()):!e&&this.pickerMenu.value&&(this._containRepositionFrame!==null&&(cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=null),this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.pickerMenu.value.hideMenu(),this.clearActiveDescendant(),this._lastViewportHeight=0),e&&!t&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote}get typeaheadIsRemote(){return this.typeaheadCtrl.isRemote}refreshTypeaheadItems(){this.typeaheadCtrl.setAllItems(this.pickerItems)}fetchInitialTypeaheadItems(){this.typeaheadCtrl.fetchInitial()}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.typeaheadRestoreText),this.preservesRemoteResultsOnReset?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}closeAndResetTypeahead(){this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}dismissMenu(){this.closeAndResetTypeahead(),this.theInput.value?.focus()}renderPickerMenuDismissButton(){return C`<button
+      class="picker-mobile-dismiss"
+      type="button"
+      aria-label="Close options"
+      @click=${e=>{e.preventDefault(),e.stopPropagation(),this.pickerMenu.value?.requestDismiss()}}
+    >
+      ${x}
+    </button>`}enterPickerMenuFullscreen(){const e=this.pickerField.value;if(!e)return null;const t=y().width;if(!this.hasAttribute("data-picker-menu-fullscreen")){const c=this.getBoundingClientRect(),f=Number.isFinite(c.width)?c.width:0;this.fullscreenPlaceholderEntryInlineSize=Math.max(f,0),this.setAttribute("data-picker-menu-fullscreen",""),e.setAttribute("data-picker-menu-fullscreen-surface",""),e.setAttribute("popover","manual");try{e.matches(":popover-open")||e.showPopover()}catch{return e.removeAttribute("popover"),e.removeAttribute("data-picker-menu-fullscreen-surface"),this.removeAttribute("data-picker-menu-fullscreen"),this.fullscreenPlaceholderEntryInlineSize=0,null}this.fullscreenPlaceholderContentSized=!(this.getBoundingClientRect().width>0),g.lock(this,{preserveScrollPosition:!0}),this.popoverCtrl.refreshPositionElements()}const o=e.getBoundingClientRect(),i=o.height;let n;if(this.fullscreenPlaceholderContentSized)n=Math.min(this.fullscreenPlaceholderEntryInlineSize,t);else{const c=this.getBoundingClientRect().width;n=Number.isFinite(c)?Math.min(Math.max(c,0),t):this.fullscreenPlaceholderInlineSize}const h=n!==this.fullscreenPlaceholderInlineSize||t!==this.fullscreenPlaceholderViewportWidth||i!==this.fullscreenPlaceholderFieldHeight;if(h){const f=["inline-size","box-sizing","padding","margin","overflow"].map(p=>({name:p,value:e.style.getPropertyValue(p),priority:e.style.getPropertyPriority(p)}));this.removeAttribute("data-picker-menu-fullscreen"),e.style.setProperty("inline-size",`${n}px`),e.style.setProperty("box-sizing","border-box"),e.style.setProperty("padding","0"),e.style.setProperty("margin","0"),e.style.setProperty("overflow","visible");const k=e.getBoundingClientRect().height;this.setAttribute("data-picker-menu-fullscreen","");for(const{name:p,value:v,priority:b}of f)v?e.style.setProperty(p,v,b):e.style.removeProperty(p);this.fullscreenPlaceholderInlineSize=n,this.fullscreenPlaceholderViewportWidth=t,this.fullscreenPlaceholderFieldHeight=i,this.style.setProperty("--_esp-picker-fullscreen-placeholder-block-size",`${k}px`),this.fullscreenPlaceholderContentSized?this.style.setProperty("--_esp-picker-fullscreen-placeholder-inline-size",`${n}px`):this.style.removeProperty("--_esp-picker-fullscreen-placeholder-inline-size")}return h?e.getBoundingClientRect():o}exitPickerMenuFullscreen(){const e=this.hasAttribute("data-picker-menu-fullscreen"),t=this.pickerField.value;if(t?.matches(":popover-open"))try{t.hidePopover()}catch{}t?.removeAttribute("popover"),t?.removeAttribute("data-picker-menu-fullscreen-surface"),this.removeAttribute("data-picker-menu-fullscreen"),this.style.removeProperty("--_esp-picker-fullscreen-placeholder-block-size"),this.style.removeProperty("--_esp-picker-fullscreen-placeholder-inline-size"),this.fullscreenPlaceholderInlineSize=0,this.fullscreenPlaceholderViewportWidth=0,this.fullscreenPlaceholderFieldHeight=0,this.fullscreenPlaceholderEntryInlineSize=0,this.fullscreenPlaceholderContentSized=!1,g.unlock(this),e&&this.popoverCtrl.refreshPositionElements()}pickerMenuIsOpen(){return this.showOptions}disconnectedCallback(){this.showOptions=!1,this.exitPickerMenuFullscreen(),super.disconnectedCallback()}handleSharedPickerKeydown(e){switch(e.key){case" ":return this.typeahead||(this.showOptions=!this.showOptions),!0;case"Tab":return this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput(),!0;case"Escape":return this.closeAndResetTypeahead(),!0;default:return!1}}handleMenuNavigationKey(e,t){if(t.preventDefault(),!this.showOptions){this.showOptions=!0;return}this.pickerMenu.value?.doKeyboardNav(e),this.updateActiveDescendant()}get menuItems(){return this.typeahead?this.filteredItems:this.pickerItems}focus(){this.theInput.value?.focus()}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}updateActiveDescendant(){const e=this.theInput.value;if(!e||!this.pickerMenu.value)return;const t=this.pickerMenu.value.getHighlightedElement();e.ariaActiveDescendantElement=t}clearActiveDescendant(){const e=this.theInput.value;e&&(e.ariaActiveDescendantElement=null)}_scrollToContainPopover(){const e=this.pickerMenu.value;e&&(this._containRepositionFrame!==null&&cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=S(this,e,()=>{this._containRepositionFrame=null,this.showOptions&&this.pickerMenu.value?.updatePosition(this)}))}syncSelectionFromItems(e){}willUpdate(e){super.willUpdate(e),this.syncSelectionFromItems(e),this.typeahead&&((e.has("pickerItems")||e.has("typeahead"))&&this.typeaheadCtrl.setAllItems(this.pickerItems),(e.has("fetchItems")||e.has("typeahead"))&&this.typeaheadCtrl.setFetchItems(this.fetchItems),(e.has("debounceMs")||e.has("typeahead"))&&this.debounceMs!==void 0&&this.typeaheadCtrl.setDebounceMs(this.debounceMs))}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.width=this.width:this.style.removeProperty("width"))}firstUpdated(e){super.firstUpdated(e);const t=this.theInput.value;if(t&&(t.role="combobox",t.ariaHasPopup="listbox",t.ariaExpanded="false",t.ariaAutoComplete=this.typeahead?"list":"none",this.pickerMenu.value)){const o=t;o.ariaControlsElements=[this.pickerMenu.value]}const r=this.itemsSlot.value;r&&(this.extractSlotItems(r),r.addEventListener("slotchange",()=>this.extractSlotItems(r)))}extractSlotItems(e){this._slotExtractPending||(this._slotExtractPending=!0,queueMicrotask(()=>{this._slotExtractPending=!1;const t=e.assignedElements();if(t.length===0)return;const r=[];for(const o of t){if(!(o instanceof I))throw new Error(`Picker items must be of type esp-picker-item, but got <${o.tagName.toLowerCase()}>`);const i=o,n=Array.from(i.childNodes),h=n.length>0?n.map(c=>c.cloneNode(!0)):void 0;r.push({text:i.text||i.getAttribute("text")||i.textContent?.trim()||"",value:i.value||i.getAttribute("value")||"",selected:i.selected||i.hasAttribute("selected"),icon:i.icon||i.getAttribute("icon")||"",styles:i.styles,slotNodes:h})}this.pickerItems=r;for(const o of t)o.remove()}))}}s.formAssociated=!0,s.KEYBOARD_THRESHOLD=150,s.pickerFieldStyles=[...E(".esp-field > .picker-mobile-dismiss"),P`
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.5;
       }
 
-      > label {
+      .esp-field {
         display: grid;
-        place-content: center;
-        cursor: pointer;
+        grid-template-columns: auto min-content;
+        position: relative;
 
-        > svg {
-          height: var(--esp-size-normal-to-medium);
-          width: var(--esp-size-normal-to-medium);
+        > section {
+          cursor: pointer;
+          display: flex;
+          flex-wrap: wrap;
         }
+
+        > label {
+          display: grid;
+          place-content: center;
+          cursor: pointer;
+
+          > svg {
+            height: var(--esp-size-normal-to-medium);
+            width: var(--esp-size-normal-to-medium);
+          }
+        }
+      }
+
+      :host([typeahead]) .esp-field > section {
+        cursor: text;
       }
-    }
 
-    :host([typeahead]) .esp-field > section {
-      cursor: text;
-    }
-  `,r([p()],i.prototype,"showOptions",null),r([p()],i.prototype,"typeaheadLoading",void 0),r([p()],i.prototype,"filteredItems",void 0),r([p()],i.prototype,"inputFocused",void 0),r([h({type:Boolean,reflect:!0})],i.prototype,"typeahead",void 0),r([h({attribute:!1})],i.prototype,"fetchItems",void 0),r([h({type:Number,attribute:"debounce-ms"})],i.prototype,"debounceMs",void 0),r([h({type:String,reflect:!0})],i.prototype,"name",void 0),r([h({type:Boolean,reflect:!0})],i.prototype,"required",void 0),r([h({attribute:"required-message"})],i.prototype,"requiredMessage",void 0),r([h({type:Boolean,reflect:!0})],i.prototype,"disabled",void 0),r([h({type:Array})],i.prototype,"pickerItems",void 0),r([h({type:String})],i.prototype,"placeholder",void 0),r([h({type:String})],i.prototype,"width",void 0);export{i as EspalierPickerBase};
+      .esp-field > .picker-mobile-dismiss {
+        display: none;
+      }
+
+      @media ${R(z)} {
+        
+        :host([data-picker-menu-fullscreen]) {
+          min-block-size: var(--_esp-picker-fullscreen-placeholder-block-size, 2.75rem);
+          min-inline-size: var(--_esp-picker-fullscreen-placeholder-inline-size, 0);
+        }
+
+        :host([data-picker-menu-fullscreen]) .esp-field {
+          position: fixed;
+          inset: 0 0 auto 0;
+          box-sizing: border-box;
+          inline-size: 100vw;
+          max-inline-size: none;
+          min-block-size: 2.75rem;
+          margin: 0;
+          padding: 0;
+          overflow: visible;
+          grid-template-columns: minmax(0, 1fr) min-content min-content;
+          border-radius: 0;
+        }
+
+        :host([data-picker-menu-fullscreen]) .esp-field > section {
+          min-inline-size: 0;
+        }
+
+        :host([data-picker-menu-fullscreen]) .esp-field > label:not(.add-new) {
+          display: none;
+        }
+
+        :host([data-picker-menu-fullscreen]) .picker-mobile-dismiss {
+          display: grid;
+          grid-column: -2;
+          place-items: center;
+          box-sizing: border-box;
+          min-block-size: 2.75rem;
+          min-inline-size: 2.75rem;
+          margin: 0;
+          border-radius: var(--esp-size-border-radius);
+        }
+
+        :host([data-picker-menu-fullscreen]) .picker-mobile-dismiss:focus-visible {
+          box-shadow: inset 0 0 0 3px var(--esp-color-link, var(--esp-color-shadow));
+        }
+      }
+    `],l([d()],s.prototype,"showOptions",null),l([d()],s.prototype,"typeaheadLoading",void 0),l([d()],s.prototype,"filteredItems",void 0),l([d()],s.prototype,"inputFocused",void 0),l([a({type:Boolean,reflect:!0})],s.prototype,"typeahead",void 0),l([a({attribute:!1})],s.prototype,"fetchItems",void 0),l([a({type:Number,attribute:"debounce-ms"})],s.prototype,"debounceMs",void 0),l([a({type:String,reflect:!0})],s.prototype,"name",void 0),l([a({type:Boolean,reflect:!0})],s.prototype,"required",void 0),l([a({attribute:"required-message"})],s.prototype,"requiredMessage",void 0),l([a({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),l([a({type:Array})],s.prototype,"pickerItems",void 0),l([a({type:String})],s.prototype,"placeholder",void 0),l([a({type:String})],s.prototype,"width",void 0);export{s as EspalierPickerBase};

package/dist/pickers/esp-picker-menu.d.ts

@@ -7,9 +7,15 @@ import "../shared/virtualizer/lit-virtualizer.js";
  * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-selection-changed - Emitted when
  * the user changes the selected item(s). If there are initially selected items,
  * emitted on first update.
- * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-close-requested - Emitted in single-select mode when the menu should close after a selection is made. Bubbles and is composed so parent pickers can observe it across shadow boundaries.
+ * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-close-requested - Emitted when the menu should close after a single-select choice. Bubbles and is composed so parent pickers can observe it across shadow boundaries.
+ * @event {CustomEvent<void>} esp-picker-menu-dismiss-requested - Emitted when the mobile dismiss affordance requests a close without changing selection. Bubbles, is composed, and is cancelable so an owner can coordinate state before closing; an uncanceled request closes the standalone menu directly.
  * @event {CustomEvent<{ first: number; last: number; items: Array<PickerItem> }>} esp-picker-menu-range-changed - Emitted when the virtualized visible item range changes.
  *
+ * Standalone menus do not render owner chrome. Call the public
+ * `requestDismiss()` method from a consumer-provided close affordance.
+ * `updatePosition()` repositions an already-open standalone menu but does not
+ * open one; standalone consumers retain explicit ownership of that lifecycle.
+ *
  * ```html
  * <esp-box>
  *   <h4>No selected items</h4>
@@ -101,6 +107,8 @@ export declare class EspalierPickerMenu extends LitElement {
      */
     getHighlightedElement(): EspalierPickerItem | null;
     selectItemAtPoint(clientX: number, clientY: number): boolean;
+    /** Request an owner-coordinated close, with a standalone self-close fallback. */
+    requestDismiss(): void;
     /**
      * Position the picker menu above or below the given element depending
      * on whether or not there is more room above or below the element.
@@ -130,6 +138,7 @@ export declare class EspalierPickerMenu extends LitElement {
      * Hide the picker menu popover.
      */
     hideMenu(): void;
+    disconnectedCallback(): void;
     /**
      * Used to perform keyboard actions on the menu. `ArrowDown` and `ArrowUp`
      * change the focused item in the menu. `Enter` toggles selection of the