@taprootio/espalier 4.20.1 → 5.0.0

package/dist/menu/esp-menu.js

@@ -1,4 +1,4 @@
-var l=function(g,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(g,e,t,i);else for(var o=g.length-1;o>=0;o--)(n=g[o])&&(s=(r<3?n(s):r>3?n(e,t,s):n(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s},y;import{css as N,html as f,nothing as w}from"lit";import{customElement as M,property as h,state as F}from"lit/decorators.js";import{classMap as x}from"lit/directives/class-map.js";import{unsafeHTML as z}from"lit/directives/unsafe-html.js";import{createRef as c,ref as u}from"lit/directives/ref.js";import{styleMap as k}from"lit/directives/style-map.js";import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{ESP_EVENTS as S}from"../shared/events.js";import{getEspBus as I}from"../shared/bus-events.js";import{normalizePath as $,pathStartsWithSegment as O,pathsMatch as R}from"../shared/path-matching.js";import{renderConfiguredBrand as L}from"../shared/configured-brand.js";import{FOCUSABLE_SELECTOR as A,OverlayController as T}from"../shared/overlay-controller.js";import{SwipeRevealController as _}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import"../burger/esp-burger.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";import{EspalierMenuGroup as v}from"./esp-menu-group.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as G}from"../shared/responsive.js";import{RafThrottle as H}from"../shared/raf-throttle.js";import{viewportSize as q}from"../shared/viewport.js";import{solveDrawerNestedFit as B}from"./drawer-nested-fit.js";const K=new Set(["panel","full-screen"]),U=new Set(["fade","slide-down","slide-up","slide-left","slide-right"]);let a=y=class extends P{ownsDrawerLock(){return this.isFullScreenDrawer}fullScreenInertAnchor(){return y.inertAnchorFor(this)}static inertAnchorFor(e){let t=e,i=e;for(;;){const r=i.parentElement;if(r){if(r.localName==="esp-page"||r.localName==="esp-root")return i;r===document.body&&(t=i),i=r;continue}const s=i.getRootNode();if(s instanceof ShadowRoot&&s.host instanceof HTMLElement){i=s.host;continue}return t}}constructor(){super(),this.itemsSlot=c(),this.railRef=c(),this.scrimRef=c(),this.drawerRef=c(),this.bus=I(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this.overlay=new T({host:this,getFocusTrapContainer:()=>this.drawerRef.value??null,getFocusScope:()=>this.fullScreenFocusScope(),getInertAnchor:()=>this.fullScreenInertAnchor(),promote:!1,scrollLock:{preserveScrollPosition:!0}}),this.fullScreenSession=!1,this.openedFullScreen=!1,this.drawerKeydownAttached=!1,this.nestedFitProbe=c(),this.nestedFitCapProbe=c(),this.nestedFitFloorProbe=c(),this.nestedFitPadProbe=c(),this.nestedFitTextProbe=c(),this.nestedFit=null,this.nestedFitMeasured=!1,this.nestedFitIdleHandle=null,this.nestedFitFallback=null,this.nestedFitResize=new H(()=>this.measureNestedFit()),this.nestedFitObserver=null,this.onNestedFitResize=()=>{this.drawerPresentation==="full-screen"&&this.nestedFitResize.schedule()},this.onNestedFitFontsLoaded=()=>this.scheduleNestedFit(!0),this.onOverlayOpened=e=>{if(e===this.overlay||!this.drawerOpen)return;const t=this.drawerTrigger;this.drawerTrigger=null,t&&e.redirectFocusRestore(t),this.swipeController.closeForHandoff(),this.onDrawerTransitionEnd()},this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.drawerPresentation="panel",this.fullScreenTransition="fade",this.drawerBrand=null,this.liftedCloseControl=null,this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerShown=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerKeydown=e=>{!this.drawerOpen||!this.openedFullScreen||e.key==="Tab"&&this.overlay.trapFocus(e)},this.onDrawerTransitionEnd=e=>{e&&e.target!==this.drawerRef.value||(this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear()))},this.handleDrawerCloseClick=()=>{this.closeDrawer()},this.swipeController=new _(this,this.side),this.swipeController.enabled=!1}get isFullScreenDrawer(){return K.has(this.drawerPresentation)?this.drawerPresentation==="full-screen":!1}get resolvedFullScreenTransition(){return U.has(this.fullScreenTransition)?this.fullScreenTransition:"fade"}get sliding(){return this._sliding}set sliding(e){const t=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",t)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(G),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled(),T.addOpenListener(this.onOverlayOpened),window.addEventListener("resize",this.onNestedFitResize),typeof document<"u"&&document.fonts&&(document.fonts.addEventListener("loadingdone",this.onNestedFitFontsLoaded),document.fonts.ready.then(()=>{this.isConnected&&this.scheduleNestedFit(!0)})),!this.nestedFitObserver&&typeof MutationObserver<"u"&&(this.nestedFitObserver=new MutationObserver(()=>this.scheduleNestedFit(!0)),this.nestedFitObserver.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["label"]}))}disconnectedCallback(){T.removeOpenListener(this.onOverlayOpened),window.removeEventListener("resize",this.onNestedFitResize),document.fonts?.removeEventListener("loadingdone",this.onNestedFitFontsLoaded),this.nestedFitObserver?.disconnect(),this.nestedFitObserver=null,this.nestedFitResize.cancel(),this.cancelNestedFitIdle(),this.nestedFitMeasured=!1,this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,this.detachDrawerKeydown(),this.fullScreenSession=!1,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems(),this.scheduleNestedFit()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),e.has("drawerPresentation")&&(this.nestedFitMeasured=!1,this.scheduleNestedFit()),this.drawerOpen&&this.openedFullScreen!==this.isFullScreenDrawer&&this.swipeController.close(!0),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const t of this.getAssignedChildren())t instanceof E?(t.mode=e,t.depth=0,t.touchDevice=this.swipeController.isTouch):t instanceof v&&(t.mode=e,t.depth=0,t.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems(),this.scheduleNestedFit(!0)}scheduleNestedFit(e=!1){if(this.drawerPresentation!=="full-screen"){this.cancelNestedFitIdle(),this.nestedFit!==null&&(this.nestedFit=null);return}if(e&&(this.nestedFitMeasured=!1),e&&this.drawerShown){this.cancelNestedFitIdle(),this.nestedFitResize.schedule();return}if(this.nestedFitIdleHandle!==null||this.nestedFitFallback!==null)return;const t=()=>{this.nestedFitIdleHandle=null,this.nestedFitFallback=null,this.isConnected&&this.measureNestedFit()};typeof requestIdleCallback=="function"?this.nestedFitIdleHandle=requestIdleCallback(t,{timeout:2e3}):this.nestedFitFallback={stage:"frame",handle:requestAnimationFrame(()=>{this.nestedFitFallback={stage:"timeout",handle:window.setTimeout(t,0)}})}}cancelNestedFitIdle(){this.nestedFitIdleHandle!==null&&(cancelIdleCallback(this.nestedFitIdleHandle),this.nestedFitIdleHandle=null),this.nestedFitFallback!==null&&(this.nestedFitFallback.stage==="frame"?cancelAnimationFrame(this.nestedFitFallback.handle):window.clearTimeout(this.nestedFitFallback.handle),this.nestedFitFallback=null)}ensureNestedFitMeasured(){this.nestedFitMeasured||(this.cancelNestedFitIdle(),this.measureNestedFit())}collectNestedLabels(){const e=[];let t=!1;const i=(r,s)=>{for(const n of r){const o=s>0;n instanceof E?o&&e.push(n.label):n instanceof v&&(o&&(e.push(n.label),n.url&&(t=!0)),i(Array.from(n.children),s+1))}};return i(this.getAssignedChildren(),0),{labels:e,linkedGroup:t}}readNestedFitMetrics(e){const t=this.nestedFitCapProbe.value,i=this.nestedFitFloorProbe.value,r=this.nestedFitPadProbe.value,s=this.nestedFitTextProbe.value;if(!t||!i||!r||!s)return null;const n=parseFloat(getComputedStyle(t).fontSize),o=parseFloat(getComputedStyle(i).fontSize),d=getComputedStyle(r),p=parseFloat(d.paddingInlineStart),b=parseFloat(d.paddingInlineEnd);if(![n,o,p,b].every(m=>Number.isFinite(m)))return null;s.replaceChildren(...e.map(m=>{const D=document.createElement("span");return D.textContent=m,D}));const C=Array.from(s.children,m=>m.getBoundingClientRect().width);return s.replaceChildren(),{capPx:n,floorPx:o,paddingPx:p,smallPx:b,widths:C}}measureNestedFit(){if(!this.isConnected||this.drawerPresentation!=="full-screen")return;const{labels:e,linkedGroup:t}=this.collectNestedLabels();if(this.nestedFitMeasured=!0,e.length===0){this.nestedFit!==null&&(this.nestedFit=null);return}const i=this.readNestedFitMetrics(e);if(!i)return;const r=this.drawerRef.value,s=r&&this.drawerShown?r.getBoundingClientRect().width:0,n=s>0?s:q().width,o=t?2*(2*i.smallPx+4.5):0,d=n-2*i.paddingPx-o,p=B({capPx:i.capPx,floorPx:i.floorPx,availablePx:d,widestAtCapPx:Math.max(0,...i.widths)});this.nestedFit&&this.nestedFit.fontSizePx===p.fontSizePx&&this.nestedFit.wrap===p.wrap||(this.nestedFit=p)}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.openedFullScreen=this.isFullScreenDrawer,this.openedFullScreen&&this.ensureNestedFitMeasured(),this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.detachDrawerKeydown(),this.fullScreenSession&&(this.fullScreenSession=!1,this.overlay.close()),this.drawerShown=!1,this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?S.MENU_DRAWER_OPENED:S.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,t=this.drawerRef.value;if(!(!e||!t||!this.isConnected)){this.swipeController.drawerElement=t;try{this.openedFullScreen||e.showPopover(),t.showPopover()}catch{}this.dispatchEvent(new CustomEvent(S.MENU_DRAWER_PRESENTED,{bubbles:!0,composed:!0})),t.getBoundingClientRect(),requestAnimationFrame(()=>{!this.drawerOpen||!this.isConnected||(this.drawerTransitioning=!0,this.drawerShown=!0,this.openedFullScreen&&(this.fullScreenSession=!0,this.overlay.open(),this.attachDrawerKeydown(),this.updateComplete.then(()=>{this.drawerOpen&&this.overlay.moveFocusInto()})))})}}attachDrawerKeydown(){this.drawerKeydownAttached||(document.addEventListener("keydown",this.onDrawerKeydown),this.drawerKeydownAttached=!0)}detachDrawerKeydown(){this.drawerKeydownAttached&&(document.removeEventListener("keydown",this.onDrawerKeydown),this.drawerKeydownAttached=!1)}fullScreenFocusScope(){const e=this.drawerRef.value;if(!e)return[];const t=n=>n instanceof HTMLElement&&n.getClientRects().length>0,i=[],r=n=>{if(n.matches(A)&&t(n)&&i.push(n),n.shadowRoot)for(const o of n.shadowRoot.querySelectorAll(A))t(o)&&i.push(o)};for(const n of e.querySelectorAll("*"))if(r(n),n instanceof HTMLSlotElement)for(const o of n.assignedElements({flatten:!0})){r(o);for(const d of o.querySelectorAll("*"))r(d)}const s=this.liftedCloseControl;if(s?.isConnected){const n=s.shadowRoot?.querySelector("button")??s;t(n)&&i.push(n)}return i}static drawerTransitionMs(e){const t=getComputedStyle(e),i=o=>o.split(",").map(d=>d.trim()).filter(Boolean).map(d=>{const p=Number.parseFloat(d);return Number.isFinite(p)?d.endsWith("ms")?p:p*1e3:0}),r=i(t.transitionDuration),s=i(t.transitionDelay);let n=0;return r.forEach((o,d)=>{n=Math.max(n,o+(s[d%Math.max(s.length,1)]??0))}),n}startCloseTransition(){const e=this.drawerRef.value;if(!e){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer);const t=y.drawerTransitionMs(e);if(t===0){this.onDrawerTransitionEnd();return}this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},t+50)}hideDrawerPopover(){const e=this.scrimRef.value,t=this.drawerRef.value;this.swipeController.drawerElement=null,t&&(t.style.cssText="");try{t?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const t=new Set;let i=null;for(const s of this.querySelectorAll("esp-menu-item")){const n=s.url||s.getAttribute("url");if(n&&R(n)){i=s;break}}if(!i)for(const s of this.querySelectorAll("esp-menu-group")){const n=s.url||s.getAttribute("url");if(n&&R(n)){i=s;break}}if(!i&&e){for(const s of this.querySelectorAll("esp-menu-group"))s.parentElement===this&&t.add(s);return t}if(!i)return t;i instanceof v&&t.add(i);let r=i.parentElement;for(;r&&r!==this;)r instanceof v&&t.add(r),r=r.parentElement;return t}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return O(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const t=e.url||e.getAttribute("url");return t?O(location.pathname,$(t)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),t=this.querySelectorAll("esp-menu-group");for(const i of t)i.open=e.has(i)&&!this.isHorizontalTopLevelGroup(i)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,t=this.getDrawerAutoExpandedGroups()){const i=[];for(const r of e)if(r instanceof E){const s=r.querySelector(":scope > svg, :scope > img");i.push({kind:"item",label:r.label,url:r.url,open:!1,icon:r.icon,iconHtml:s?.outerHTML||"",children:[],originalItem:r,originalGroup:null})}else if(r instanceof v){const s=r.querySelector(':scope > [slot="icon"]'),n=t.has(r)||this.groupPathMatches(r),o=this.drawerGroupOpenOverrides.get(r)??(r.open||n);i.push({kind:"group",label:r.label,url:r.url||"",open:o,icon:r.icon,iconHtml:s?.outerHTML||"",children:this.collectDrawerNodes(Array.from(r.children),t),originalItem:null,originalGroup:r})}return i}renderDrawerNode(e){return e.kind==="item"?f`<esp-menu-item
+var l=function(g,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(g,e,t,i);else for(var o=g.length-1;o>=0;o--)(n=g[o])&&(s=(r<3?n(s):r>3?n(e,t,s):n(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s},y;import{css as N,html as f,nothing as w}from"lit";import{customElement as M,property as c,state as F}from"lit/decorators.js";import{classMap as x}from"lit/directives/class-map.js";import{unsafeHTML as z}from"lit/directives/unsafe-html.js";import{createRef as p,ref as u}from"lit/directives/ref.js";import{styleMap as k}from"lit/directives/style-map.js";import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{ESP_EVENTS as S}from"../shared/events.js";import{getEspBus as I}from"../shared/bus-events.js";import{normalizePath as $,pathStartsWithSegment as R,pathsMatch as O}from"../shared/path-matching.js";import{renderConfiguredBrand as L}from"../shared/configured-brand.js";import{FOCUSABLE_SELECTOR as A,OverlayController as T}from"../shared/overlay-controller.js";import{SwipeRevealController as _}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import"../burger/esp-burger.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";import{EspalierMenuGroup as v}from"./esp-menu-group.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as G}from"../shared/responsive.js";import{RafThrottle as H}from"../shared/raf-throttle.js";import{viewportSize as q}from"../shared/viewport.js";import{solveDrawerNestedFit as B}from"./drawer-nested-fit.js";const K=new Set(["panel","full-screen"]),U=new Set(["fade","slide-down","slide-up","slide-left","slide-right"]);let a=y=class extends P{ownsDrawerLock(){return this.isFullScreenDrawer}fullScreenInertAnchor(){return y.inertAnchorFor(this)}static inertAnchorFor(e){let t=e,i=e;for(;;){const r=i.parentElement;if(r){if(r.localName==="esp-page"||r.localName==="esp-root")return i;r===document.body&&(t=i),i=r;continue}const s=i.getRootNode();if(s instanceof ShadowRoot&&s.host instanceof HTMLElement){i=s.host;continue}return t}}constructor(){super(),this.itemsSlot=p(),this.railRef=p(),this.scrimRef=p(),this.drawerRef=p(),this.bus=I(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this.overlay=new T({host:this,getFocusTrapContainer:()=>this.drawerRef.value??null,getFocusScope:()=>this.fullScreenFocusScope(),getInertAnchor:()=>this.fullScreenInertAnchor(),promote:!1,scrollLock:{preserveScrollPosition:!0}}),this.fullScreenSession=!1,this.openedFullScreen=!1,this.drawerKeydownAttached=!1,this.nestedFitProbe=p(),this.nestedFitCapProbe=p(),this.nestedFitFloorProbe=p(),this.nestedFitPadProbe=p(),this.nestedFitTextProbe=p(),this.nestedFit=null,this.nestedFitMeasured=!1,this.nestedFitIdleHandle=null,this.nestedFitFallback=null,this.nestedFitResize=new H(()=>this.measureNestedFit()),this.nestedFitObserver=null,this.onNestedFitResize=()=>{this.drawerPresentation==="full-screen"&&this.nestedFitResize.schedule()},this.onNestedFitFontsLoaded=()=>this.scheduleNestedFit(!0),this.onOverlayOpened=e=>{if(e===this.overlay||!this.drawerOpen)return;const t=this.drawerTrigger;this.drawerTrigger=null,t&&e.redirectFocusRestore(t),this.swipeController.closeForHandoff(),this.onDrawerTransitionEnd()},this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.drawerPresentation="panel",this.fullScreenTransition="fade",this.drawerBrand=null,this.liftedCloseControl=null,this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerShown=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerKeydown=e=>{!this.drawerOpen||!this.openedFullScreen||e.key==="Tab"&&this.overlay.trapFocus(e)},this.onDrawerTransitionEnd=e=>{e&&e.target!==this.drawerRef.value||(this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear()))},this.handleDrawerCloseClick=()=>{this.closeDrawer()},this.swipeController=new _(this,this.side),this.swipeController.enabled=!1}get isFullScreenDrawer(){return K.has(this.drawerPresentation)?this.drawerPresentation==="full-screen":!1}get resolvedFullScreenTransition(){return U.has(this.fullScreenTransition)?this.fullScreenTransition:"fade"}get sliding(){return this._sliding}set sliding(e){const t=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",t)}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(G),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled(),T.addOpenListener(this.onOverlayOpened),window.addEventListener("resize",this.onNestedFitResize),typeof document<"u"&&document.fonts&&(document.fonts.addEventListener("loadingdone",this.onNestedFitFontsLoaded),document.fonts.ready.then(()=>{this.isConnected&&this.scheduleNestedFit(!0)})),!this.nestedFitObserver&&typeof MutationObserver<"u"&&(this.nestedFitObserver=new MutationObserver(()=>this.scheduleNestedFit(!0)),this.nestedFitObserver.observe(this,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["label"]}))}disconnectedCallback(){T.removeOpenListener(this.onOverlayOpened),window.removeEventListener("resize",this.onNestedFitResize),document.fonts?.removeEventListener("loadingdone",this.onNestedFitFontsLoaded),this.nestedFitObserver?.disconnect(),this.nestedFitObserver=null,this.nestedFitResize.cancel(),this.cancelNestedFitIdle(),this.nestedFitMeasured=!1,this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,this.detachDrawerKeydown(),this.fullScreenSession=!1,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems(),this.scheduleNestedFit()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),e.has("drawerPresentation")&&(this.nestedFitMeasured=!1,this.scheduleNestedFit()),this.drawerOpen&&this.openedFullScreen!==this.isFullScreenDrawer&&this.swipeController.close(!0),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const t of this.getAssignedChildren())t instanceof E?(t.mode=e,t.depth=0,t.touchDevice=this.swipeController.isTouch):t instanceof v&&(t.mode=e,t.depth=0,t.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems(),this.scheduleNestedFit(!0)}scheduleNestedFit(e=!1){if(this.drawerPresentation!=="full-screen"){this.cancelNestedFitIdle(),this.nestedFit!==null&&(this.nestedFit=null);return}if(e&&(this.nestedFitMeasured=!1),e&&this.drawerShown){this.cancelNestedFitIdle(),this.nestedFitResize.schedule();return}if(this.nestedFitIdleHandle!==null||this.nestedFitFallback!==null)return;const t=()=>{this.nestedFitIdleHandle=null,this.nestedFitFallback=null,this.isConnected&&this.measureNestedFit()};typeof requestIdleCallback=="function"?this.nestedFitIdleHandle=requestIdleCallback(t,{timeout:2e3}):this.nestedFitFallback={stage:"frame",handle:requestAnimationFrame(()=>{this.nestedFitFallback={stage:"timeout",handle:window.setTimeout(t,0)}})}}cancelNestedFitIdle(){this.nestedFitIdleHandle!==null&&(cancelIdleCallback(this.nestedFitIdleHandle),this.nestedFitIdleHandle=null),this.nestedFitFallback!==null&&(this.nestedFitFallback.stage==="frame"?cancelAnimationFrame(this.nestedFitFallback.handle):window.clearTimeout(this.nestedFitFallback.handle),this.nestedFitFallback=null)}ensureNestedFitMeasured(){this.nestedFitMeasured||(this.cancelNestedFitIdle(),this.measureNestedFit())}collectNestedLabels(){const e=[];let t=!1;const i=(r,s)=>{for(const n of r){const o=s>0;n instanceof E?o&&e.push(n.label):n instanceof v&&(o&&(e.push(n.label),n.url&&(t=!0)),i(Array.from(n.children),s+1))}};return i(this.getAssignedChildren(),0),{labels:e,linkedGroup:t}}readNestedFitMetrics(e){const t=this.nestedFitCapProbe.value,i=this.nestedFitFloorProbe.value,r=this.nestedFitPadProbe.value,s=this.nestedFitTextProbe.value;if(!t||!i||!r||!s)return null;const n=parseFloat(getComputedStyle(t).fontSize),o=parseFloat(getComputedStyle(i).fontSize),d=getComputedStyle(r),h=parseFloat(d.paddingInlineStart),b=parseFloat(d.paddingInlineEnd);if(![n,o,h,b].every(m=>Number.isFinite(m)))return null;s.replaceChildren(...e.map(m=>{const D=document.createElement("span");return D.textContent=m,D}));const C=Array.from(s.children,m=>m.getBoundingClientRect().width);return s.replaceChildren(),{capPx:n,floorPx:o,paddingPx:h,smallPx:b,widths:C}}measureNestedFit(){if(!this.isConnected||this.drawerPresentation!=="full-screen")return;const{labels:e,linkedGroup:t}=this.collectNestedLabels();if(this.nestedFitMeasured=!0,e.length===0){this.nestedFit!==null&&(this.nestedFit=null);return}const i=this.readNestedFitMetrics(e);if(!i)return;const r=this.drawerRef.value,s=r&&this.drawerShown?r.getBoundingClientRect().width:0,n=s>0?s:q().width,o=t?2*(2*i.smallPx+4.5):0,d=n-2*i.paddingPx-o,h=B({capPx:i.capPx,floorPx:i.floorPx,availablePx:d,widestAtCapPx:Math.max(0,...i.widths)});this.nestedFit&&this.nestedFit.fontSizePx===h.fontSizePx&&this.nestedFit.wrap===h.wrap||(this.nestedFit=h)}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.openedFullScreen=this.isFullScreenDrawer,this.openedFullScreen&&this.ensureNestedFitMeasured(),this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.detachDrawerKeydown(),this.fullScreenSession&&(this.fullScreenSession=!1,this.overlay.close()),this.drawerShown=!1,this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?S.MENU_DRAWER_OPENED:S.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,t=this.drawerRef.value;if(!(!e||!t||!this.isConnected)){this.swipeController.drawerElement=t;try{this.openedFullScreen||e.showPopover(),t.showPopover()}catch{}this.dispatchEvent(new CustomEvent(S.MENU_DRAWER_PRESENTED,{bubbles:!0,composed:!0})),t.getBoundingClientRect(),requestAnimationFrame(()=>{!this.drawerOpen||!this.isConnected||(this.drawerTransitioning=!0,this.drawerShown=!0,this.openedFullScreen&&(this.fullScreenSession=!0,this.overlay.open(),this.attachDrawerKeydown(),this.updateComplete.then(()=>{this.drawerOpen&&this.overlay.moveFocusInto()})))})}}attachDrawerKeydown(){this.drawerKeydownAttached||(document.addEventListener("keydown",this.onDrawerKeydown),this.drawerKeydownAttached=!0)}detachDrawerKeydown(){this.drawerKeydownAttached&&(document.removeEventListener("keydown",this.onDrawerKeydown),this.drawerKeydownAttached=!1)}fullScreenFocusScope(){const e=this.drawerRef.value;if(!e)return[];const t=n=>n instanceof HTMLElement&&n.getClientRects().length>0,i=[],r=n=>{if(n.matches(A)&&t(n)&&i.push(n),n.shadowRoot)for(const o of n.shadowRoot.querySelectorAll(A))t(o)&&i.push(o)};for(const n of e.querySelectorAll("*"))if(r(n),n instanceof HTMLSlotElement)for(const o of n.assignedElements({flatten:!0})){r(o);for(const d of o.querySelectorAll("*"))r(d)}const s=this.liftedCloseControl;if(s?.isConnected){const n=s.shadowRoot?.querySelector("button")??s;t(n)&&i.push(n)}return i}static drawerTransitionMs(e){const t=getComputedStyle(e),i=o=>o.split(",").map(d=>d.trim()).filter(Boolean).map(d=>{const h=Number.parseFloat(d);return Number.isFinite(h)?d.endsWith("ms")?h:h*1e3:0}),r=i(t.transitionDuration),s=i(t.transitionDelay);let n=0;return r.forEach((o,d)=>{n=Math.max(n,o+(s[d%Math.max(s.length,1)]??0))}),n}startCloseTransition(){const e=this.drawerRef.value;if(!e){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer);const t=y.drawerTransitionMs(e);if(t===0){this.onDrawerTransitionEnd();return}this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},t+50)}hideDrawerPopover(){const e=this.scrimRef.value,t=this.drawerRef.value;this.swipeController.drawerElement=null,t&&(t.style.cssText="");try{t?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const t=new Set;let i=null;for(const s of this.querySelectorAll("esp-menu-item")){const n=s.url||s.getAttribute("url");if(n&&O(n)){i=s;break}}if(!i)for(const s of this.querySelectorAll("esp-menu-group")){const n=s.url||s.getAttribute("url");if(n&&O(n)){i=s;break}}if(!i&&e){for(const s of this.querySelectorAll("esp-menu-group"))s.parentElement===this&&t.add(s);return t}if(!i)return t;i instanceof v&&t.add(i);let r=i.parentElement;for(;r&&r!==this;)r instanceof v&&t.add(r),r=r.parentElement;return t}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return R(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const t=e.url||e.getAttribute("url");return t?R(location.pathname,$(t)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),t=this.querySelectorAll("esp-menu-group");for(const i of t)i.open=e.has(i)&&!this.isHorizontalTopLevelGroup(i)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,t=this.getDrawerAutoExpandedGroups()){const i=[];for(const r of e)if(r instanceof E){const s=r.querySelector(":scope > svg, :scope > img");i.push({kind:"item",label:r.label,url:r.url,open:!1,icon:r.icon,iconHtml:s?.outerHTML||"",children:[],originalItem:r,originalGroup:null})}else if(r instanceof v){const s=r.querySelector(':scope > [slot="icon"]'),n=t.has(r)||this.groupPathMatches(r),o=this.drawerGroupOpenOverrides.get(r)??(r.open||n);i.push({kind:"group",label:r.label,url:r.url||"",open:o,icon:r.icon,iconHtml:s?.outerHTML||"",children:this.collectDrawerNodes(Array.from(r.children),t),originalItem:null,originalGroup:r})}return i}renderDrawerNode(e){return e.kind==="item"?f`<esp-menu-item
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}
@@ -16,8 +16,8 @@ var l=function(g,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
     >
       ${e.iconHtml?z(e.iconHtml):w}
       ${e.children.map(t=>this.renderDrawerNode(t))}
-    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent(S.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,t=this.drawerActive,i={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},r=e?this.openedFullScreen:this.isFullScreenDrawer,s={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right","full-screen":r,[`transition-${this.resolvedFullScreenTransition}`]:r,transitioning:this.drawerTransitioning,open:this.drawerShown,"nested-wrap":r&&this.nestedFit?.wrap===!0},n={"--_esp-menu-drawer-nested-font-size":r&&this.nestedFit?`${this.nestedFit.fontSizePx}px`:null},o=e?this.collectDrawerNodes(this.getAssignedChildren()):[],d=this.ariaLabel??"Navigation",p={"--_esp-menu-drawer-brand-color":this.drawerBrand?.brandColor||null},b=r&&e?f`<div class="drawer-chrome">
-            <div class="drawer-brand" style=${k(p)}>
+    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent(S.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,t=this.drawerActive,i={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},r=e?this.openedFullScreen:this.isFullScreenDrawer,s={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right","full-screen":r,[`transition-${this.resolvedFullScreenTransition}`]:r,transitioning:this.drawerTransitioning,open:this.drawerShown,"nested-wrap":r&&this.nestedFit?.wrap===!0},n={"--_esp-menu-drawer-nested-font-size":r&&this.nestedFit?`${this.nestedFit.fontSizePx}px`:null},o=e?this.collectDrawerNodes(this.getAssignedChildren()):[],d=this.ariaLabel??"Navigation",h={"--_esp-menu-drawer-brand-color":this.drawerBrand?.brandColor||null},b=r&&e?f`<div class="drawer-chrome">
+            <div class="drawer-brand" style=${k(h)}>
               <slot name="drawer-brand"
                 >${this.drawerBrand?L(this.drawerBrand):w}</slot
               >
@@ -402,4 +402,4 @@ var l=function(g,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           transition: none;
         }
       }
-    `],l([F()],a.prototype,"nestedFit",void 0),l([h({type:String,reflect:!0})],a.prototype,"mode",void 0),l([h({type:String,reflect:!0})],a.prototype,"overflow",void 0),l([h({type:String,reflect:!0})],a.prototype,"side",void 0),l([h({attribute:"drawer-presentation",type:String,reflect:!0})],a.prototype,"drawerPresentation",void 0),l([h({attribute:"full-screen-transition",type:String,reflect:!0})],a.prototype,"fullScreenTransition",void 0),l([h({attribute:!1})],a.prototype,"drawerBrand",void 0),l([h({attribute:!1})],a.prototype,"liftedCloseControl",void 0),l([h({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),l([h({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),l([h({type:Boolean})],a.prototype,"sliding",null),l([h({type:Boolean})],a.prototype,"collapsed",null),l([F()],a.prototype,"drawerOpen",void 0),l([F()],a.prototype,"drawerShown",void 0),l([F()],a.prototype,"drawerTransitioning",void 0),l([h({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),l([h({attribute:!1})],a.prototype,"previewCollapseRequested",void 0),a=y=l([M("esp-menu")],a);export{a as EspalierMenu};
+    `],l([F()],a.prototype,"nestedFit",void 0),l([c({type:String,reflect:!0})],a.prototype,"mode",void 0),l([c({type:String,reflect:!0})],a.prototype,"overflow",void 0),l([c({type:String,reflect:!0})],a.prototype,"side",void 0),l([c({attribute:"drawer-presentation",type:String,reflect:!0})],a.prototype,"drawerPresentation",void 0),l([c({attribute:"full-screen-transition",type:String,reflect:!0})],a.prototype,"fullScreenTransition",void 0),l([c({attribute:!1})],a.prototype,"drawerBrand",void 0),l([c({attribute:!1})],a.prototype,"liftedCloseControl",void 0),l([c({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),l([c({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),l([c({type:Boolean})],a.prototype,"sliding",null),l([F()],a.prototype,"drawerOpen",void 0),l([F()],a.prototype,"drawerShown",void 0),l([F()],a.prototype,"drawerTransitioning",void 0),l([c({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),l([c({attribute:!1})],a.prototype,"previewCollapseRequested",void 0),a=y=l([M("esp-menu")],a);export{a as EspalierMenu};

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

@@ -174,8 +174,6 @@ export interface PageWorkspaceResizeDetail {
  * @cssprop --esp-page-well-max-width - The shared content-column width in
  * `kind="site"`: the header and footer alignment contract and every
  * `esp-section` well default to it. Defaults to `72rem`.
- * @cssprop --esp-page-max-width - Legacy fallback for
- * `--esp-page-main-max-width`.
  * @cssprop --esp-page-background-image - The background image to
  * display behind page content. Defaults to `none`.
  * @cssprop --esp-page-background-image-opacity - The opacity of the
@@ -236,12 +234,6 @@ export interface PageWorkspaceResizeDetail {
  * height. Defaults to `2px dashed var(--esp-color-link)`.
  * @cssprop --esp-page-resize-focus-shadow - Glow cast by the focused seam
  * line, in the line's color. Defaults to `0 0 0.75rem var(--esp-color-link)`.
- * @cssprop --esp-page-preview-width - Legacy fixed-width alias that pins both
- * preview bounds.
- * @cssprop --esp-page-flyout-width - Legacy fixed-width alias that pins both
- * help bounds.
- * @cssprop --esp-page-preview-min-main-width - Legacy fallback for
- * `--esp-page-main-min-width`.
  * @cssprop --esp-page-fixed-header-offset - Offset reserved for fixed
  * headers. Defaults to `var(--esp-header-height)`.
  * @cssprop --esp-page-sticky-header-top - Top inset for sticky headers.
@@ -285,14 +277,14 @@ export interface PageWorkspaceResizeDetail {
  * ```
  *
  * Use `align` to place the surface within the page once it hits its cap,
- * and the canvas tokens to style the gutters. A low `--esp-page-max-width`
+ * and the canvas tokens to style the gutters. A low `--esp-page-main-max-width`
  * is set here only so the gutters are visible inside the narrow demo
  * frame; the surface edge shadow is on by default.
  *
  * ```html
  * <style>
  * esp-page.align-demo {
- *   --esp-page-max-width: 520px;
+ *   --esp-page-main-max-width: 520px;
  *   --esp-page-canvas-background: var(--esp-color-layer-1);
  * }
  * </style>
@@ -505,15 +497,8 @@ export declare class EspalierPage extends EspalierElementBase {
      * - `normal` lets the header scroll with content.
      * - `sticky` keeps the header stuck to the top after it reaches it.
      * - `fixed` pins the header to the viewport and offsets page content.
-     *
-     * `fixed-menus` remains as a compatibility alias for `fixed`.
      */
     headerPosition: HeaderPosition;
-    /**
-     * Compatibility alias for the original fixed header/sidebar behavior.
-     * Prefer `header-position="fixed"` for new code.
-     */
-    fixedMenus: boolean;
     /**
      * Whether the persistent preview is logically open. The page may keep the
      * preview hidden while space is unavailable; `preview-visible` reflects its

package/dist/page/esp-page.js

@@ -1,4 +1,4 @@
-var b=function(N,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(N,e,t,i);else for(var a=N.length-1;a>=0;a--)(o=N[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 oe,nothing as L}from"lit";import{customElement as ne,property as C,state as q}from"lit/decorators.js";import{classMap as le}from"lit/directives/class-map.js";import{createRef as W,ref as R}from"lit/directives/ref.js";import{EspalierElementBase as he}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as G}from"./bi-directional-sticky-controller.js";import{getEspBus as de}from"../shared/bus-events.js";import{RafThrottle as pe}from"../shared/raf-throttle.js";import{InlineBounds as ue,PaneProbes as Y,PREVIEW_LAYOUT_EPSILON as l,probeWidth as ce,WidthRange as D}from"./workspace-width.js";import{clampWorkspaceWidth as F,workspaceTargetWidth as ve,workspaceWidthCapacityForAvailable as j}from"./workspace-geometry.js";import{slotHasContent as se}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 ae='esp-footer, footer, [role~="contentinfo"]',me=5,ye=12,ge=48,be=48,We=16,Re=64;let f=class extends he{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.sidebarSlot=W(),this.rightSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.previewProbes=new Y(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.flyoutProbes=new Y(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.mainProbes=new Y(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new pe(()=>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.sidebarHasContent=!1,this.rightHasContent=!1,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.onSidebarSlotChange=()=>{this.syncAsideContent(),this.schedulePreviewLayout()},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.sidebarLabel="Sidebar",this.rightLabel="Related",this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new G(this,".esp-page-left > .sticky-wrapper"),new G(this,".esp-page-right > .sticky-wrapper"),new G(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new G(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)),this.syncAsideContent(),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?se(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 ue(t,i)}probeWidth(e){return ce(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 j(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),m=Math.max(0,o),P=Math.max(m,a),y=t?this.preferredPreviewWidth??(n===null?null:F(n,c,h)):null,z=i?this.preferredFlyoutWidth??(p===null?null:F(p,m,P)):null;let g=0,d=0;t&&i?(g=Math.min(h,Math.max(c,u-m)),d=Math.min(P,Math.max(m,u-g))):t?g=Math.min(h,Math.max(c,u)):i&&(d=Math.min(P,Math.max(m,u))),t&&y!==null&&(g=F(y,c,h),i&&z===null&&(d=F(u-g,m,P))),i&&z!==null&&(d=F(z,m,P),t&&y===null&&(g=F(u-d,c,h)));let M=g+d-u;if(M>0&&i){const x=Math.min(M,Math.max(0,d-m));d-=x,M-=x}return M>0&&t&&(g-=Math.min(M,Math.max(0,g-c))),{previewWidth:g,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 D.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:We}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 D.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 D.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 D.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(),m=p.getBoundingClientRect(),P=Math.max(t,i),y=Math.max(r,o),z=h.width+l>=t&&h.width<=P+l,g=!s||m.width+l>=r&&m.width<=y+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||m.left+l>=u.left&&m.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?c.left+l>=h.right&&(!s||h.left+l>=m.right):c.right<=h.left+l&&(!s||h.right<=m.left+l);return c.width+l>=e&&z&&g&&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),m=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),P=this.probeWidth(this.previewMaxWidthProbe),y=this.probeWidth(this.flyoutMinWidthProbe),z=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),g=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),x=this.mainTrackUnbounded()?0:M,H=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),H){const k=this.visiblePageInlineBounds().width,A=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+ge;!o&&t&&this.flyoutOverlayRecoveryReady&&A&&this.workspaceMinimumsCanFit(d,r,h,!0,y)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const S=r&&!o&&!a,v=n&&!o;if(d>0&&(!S||h>0)&&(!v||y>0)&&(S||v)&&!this.workspaceMinimumsCanFit(d,S,h,v,y)){v&&await this.promoteFlyoutToOverlay();return}const E=(S?h:0)+(v?y:0),I=S&&this.preferredPreviewWidth!==null||v&&this.preferredFlyoutWidth!==null||(S&&m!==null||v&&z!==null),Z=(S?this.preferredPreviewWidth===null?h:F(this.preferredPreviewWidth,h,P):0)+(v?this.preferredFlyoutWidth===null?y:F(this.preferredFlyoutWidth,y,g):0),w=k=>{const A=ve(k,E,Z),O=this.allocateWorkspaceWidths(A,S,v,h,P,y,g,m,z),K=k.maximum+d,te=Math.max(0,K-k.natural),re=O.previewWidth+O.flyoutWidth,ie=Math.max(0,Math.min(te,K-re));return{allocation:O,mainWidth:ie,reclaimsMain:ie+l<te}},$=(k,A)=>Math.abs(k.mainWidth-A.mainWidth)>l||Math.abs(k.allocation.previewWidth-A.allocation.previewWidth)>l||Math.abs(k.allocation.flyoutWidth-A.allocation.flyoutWidth)>l,U=this.workspaceWidthCapacity(d,x,p?c:0),B=w(U);let T=B.allocation;if(this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),!S||h<=0){v&&await this.promoteFlyoutIfClipped(e,d,y,g);return}if(u!==null&&c>l){const k=U.maximum+d,A=j(k+c,d,x),O=w(A);(p?$(w(j(Math.max(0,k-be),d,x)),O):B.reclaimsMain&&$(B,O))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const X=this.workspaceWidthCapacity(d,x);if(X.maximum+l<E){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?y:0),i=!1,v&&await this.promoteFlyoutToOverlay();return}const J=w(X);if(T=J.allocation,this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,J.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const ee=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,P,v,y,g),()=>this.workspaceCandidateIsMeasurable(!0,v));if(ee===null)return;ee?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?y: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(ae)||e.querySelector(ae)!==null}syncAsideContent(){const e=(t,i)=>t?se(t):Array.from(this.children).some(s=>s.getAttribute("slot")===i);this.sidebarHasContent=e(this.sidebarSlot.value,"sidebar"),this.rightHasContent=e(this.rightSlot.value,"right")}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"))&&de().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,m=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,P=Math.max(a,c-i.max),y=Math.max(P,Math.max(a,c-i.min)+m),z=n>0?Math.max(P,Math.min(Math.max(a,n),y)):y,g=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:L;let d,M;if(this.previewVisible){const w=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),$=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,B=w.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,$-w.max),M=Math.max(d,Math.min(o,$-w.min+B))}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",H=this.previewVisible?"Resize preview and help panes":"Resize help pane",S=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",_=v==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,E=this.workspaceLogicalGutterWidths(),V=this.trailingPaneResizeRange(v,_,E.leading+E.trailing),Q=v==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",I=v==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return oe`
+var b=function(N,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(N,e,t,i);else for(var a=N.length-1;a>=0;a--)(o=N[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 oe,nothing as L}from"lit";import{customElement as ne,property as C,state as q}from"lit/decorators.js";import{classMap as le}from"lit/directives/class-map.js";import{createRef as W,ref as R}from"lit/directives/ref.js";import{EspalierElementBase as he}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as G}from"./bi-directional-sticky-controller.js";import{getEspBus as de}from"../shared/bus-events.js";import{RafThrottle as pe}from"../shared/raf-throttle.js";import{InlineBounds as ue,PaneProbes as Y,PREVIEW_LAYOUT_EPSILON as l,probeWidth as ce,WidthRange as D}from"./workspace-width.js";import{clampWorkspaceWidth as F,workspaceTargetWidth as ve,workspaceWidthCapacityForAvailable as j}from"./workspace-geometry.js";import{slotHasContent as se}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 me}from"../shared/responsive.js";const ae='esp-footer, footer, [role~="contentinfo"]',ye=5,fe=12,ge=48,be=48,We=16,Re=64;let m=class extends he{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.sidebarSlot=W(),this.rightSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.previewProbes=new Y(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.flyoutProbes=new Y(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.mainProbes=new Y(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new pe(()=>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.sidebarHasContent=!1,this.rightHasContent=!1,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.onSidebarSlotChange=()=>{this.syncAsideContent(),this.schedulePreviewLayout()},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.previewOpen=!1,this.sidebarLabel="Sidebar",this.rightLabel="Related",this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new G(this,".esp-page-left > .sticky-wrapper"),new G(this,".esp-page-right > .sticky-wrapper"),new G(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new G(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)),this.syncAsideContent(),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?se(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 ue(t,i)}probeWidth(e){return ce(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 j(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),y=Math.max(0,o),P=Math.max(y,a),f=t?this.preferredPreviewWidth??(n===null?null:F(n,c,h)):null,z=i?this.preferredFlyoutWidth??(p===null?null:F(p,y,P)):null;let g=0,d=0;t&&i?(g=Math.min(h,Math.max(c,u-y)),d=Math.min(P,Math.max(y,u-g))):t?g=Math.min(h,Math.max(c,u)):i&&(d=Math.min(P,Math.max(y,u))),t&&f!==null&&(g=F(f,c,h),i&&z===null&&(d=F(u-g,y,P))),i&&z!==null&&(d=F(z,y,P),t&&f===null&&(g=F(u-d,c,h)));let M=g+d-u;if(M>0&&i){const x=Math.min(M,Math.max(0,d-y));d-=x,M-=x}return M>0&&t&&(g-=Math.min(M,Math.max(0,g-c))),{previewWidth:g,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 D.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:We}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 D.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 D.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 D.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(),y=p.getBoundingClientRect(),P=Math.max(t,i),f=Math.max(r,o),z=h.width+l>=t&&h.width<=P+l,g=!s||y.width+l>=r&&y.width<=f+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||y.left+l>=u.left&&y.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?c.left+l>=h.right&&(!s||h.left+l>=y.right):c.right<=h.left+l&&(!s||h.right<=y.left+l);return c.width+l>=e&&z&&g&&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<fe;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>=ye)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),y=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),P=this.probeWidth(this.previewMaxWidthProbe),f=this.probeWidth(this.flyoutMinWidthProbe),z=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),g=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),x=this.mainTrackUnbounded()?0:M,H=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),H){const k=this.visiblePageInlineBounds().width,A=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+ge;!o&&t&&this.flyoutOverlayRecoveryReady&&A&&this.workspaceMinimumsCanFit(d,r,h,!0,f)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const S=r&&!o&&!a,v=n&&!o;if(d>0&&(!S||h>0)&&(!v||f>0)&&(S||v)&&!this.workspaceMinimumsCanFit(d,S,h,v,f)){v&&await this.promoteFlyoutToOverlay();return}const E=(S?h:0)+(v?f:0),I=S&&this.preferredPreviewWidth!==null||v&&this.preferredFlyoutWidth!==null||(S&&y!==null||v&&z!==null),Z=(S?this.preferredPreviewWidth===null?h:F(this.preferredPreviewWidth,h,P):0)+(v?this.preferredFlyoutWidth===null?f:F(this.preferredFlyoutWidth,f,g):0),w=k=>{const A=ve(k,E,Z),O=this.allocateWorkspaceWidths(A,S,v,h,P,f,g,y,z),K=k.maximum+d,te=Math.max(0,K-k.natural),re=O.previewWidth+O.flyoutWidth,ie=Math.max(0,Math.min(te,K-re));return{allocation:O,mainWidth:ie,reclaimsMain:ie+l<te}},$=(k,A)=>Math.abs(k.mainWidth-A.mainWidth)>l||Math.abs(k.allocation.previewWidth-A.allocation.previewWidth)>l||Math.abs(k.allocation.flyoutWidth-A.allocation.flyoutWidth)>l,U=this.workspaceWidthCapacity(d,x,p?c:0),B=w(U);let T=B.allocation;if(this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),!S||h<=0){v&&await this.promoteFlyoutIfClipped(e,d,f,g);return}if(u!==null&&c>l){const k=U.maximum+d,A=j(k+c,d,x),O=w(A);(p?$(w(j(Math.max(0,k-be),d,x)),O):B.reclaimsMain&&$(B,O))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const X=this.workspaceWidthCapacity(d,x);if(X.maximum+l<E){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?f:0),i=!1,v&&await this.promoteFlyoutToOverlay();return}const J=w(X);if(T=J.allocation,this.setWorkspaceWidths(T.previewWidth,T.flyoutWidth,I),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,J.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const ee=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,P,v,f,g),()=>this.workspaceCandidateIsMeasurable(!0,v));if(ee===null)return;ee?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?f: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(me),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(ae)||e.querySelector(ae)!==null}syncAsideContent(){const e=(t,i)=>t?se(t):Array.from(this.children).some(s=>s.getAttribute("slot")===i);this.sidebarHasContent=e(this.sidebarSlot.value,"sidebar"),this.rightHasContent=e(this.rightSlot.value,"right")}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("headerPosition")&&de().publish("fixed-menus-changed",{fixed: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.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,y=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,P=Math.max(a,c-i.max),f=Math.max(P,Math.max(a,c-i.min)+y),z=n>0?Math.max(P,Math.min(Math.max(a,n),f)):f,g=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:L;let d,M;if(this.previewVisible){const w=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),$=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,B=w.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,$-w.max),M=Math.max(d,Math.min(o,$-w.min+B))}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",H=this.previewVisible?"Resize preview and help panes":"Resize help pane",S=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",_=v==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,E=this.workspaceLogicalGutterWidths(),V=this.trailingPaneResizeRange(v,_,E.leading+E.trailing),Q=v==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",I=v==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return oe`
       <div part="wrapper" class="esp-page ${le({"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>
@@ -175,4 +175,4 @@ var b=function(N,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
         <div id="dialog-drop-zone" ${R(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};f.styles=we,b([q()],f.prototype,"footerWrapperIsLandmark",void 0),b([q()],f.prototype,"sidebarHasContent",void 0),b([q()],f.prototype,"rightHasContent",void 0),b([q()],f.prototype,"allocatedPreviewWidth",void 0),b([q()],f.prototype,"allocatedFlyoutWidth",void 0),b([C({reflect:!0})],f.prototype,"kind",void 0),b([C({reflect:!0})],f.prototype,"align",void 0),b([C({type:Boolean,reflect:!0})],f.prototype,"contained",void 0),b([C({attribute:"header-position",reflect:!0})],f.prototype,"headerPosition",void 0),b([C({attribute:"fixed-menus",type:Boolean,reflect:!0})],f.prototype,"fixedMenus",void 0),b([C({attribute:"preview-open",type:Boolean,reflect:!0})],f.prototype,"previewOpen",void 0),b([C({attribute:"sidebar-label",type:String,reflect:!0})],f.prototype,"sidebarLabel",void 0),b([C({attribute:"right-label",type:String,reflect:!0})],f.prototype,"rightLabel",void 0),b([C({attribute:"preview-label",type:String,reflect:!0})],f.prototype,"previewLabel",void 0),b([C({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],f.prototype,"previewCollapseSidebar",void 0),b([C({attribute:"workspace-resizable",type:Boolean,reflect:!0})],f.prototype,"workspaceResizable",void 0),b([C({attribute:"preview-visible",type:Boolean,reflect:!0})],f.prototype,"previewVisible",void 0),b([C({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],f.prototype,"previewReclaiming",void 0),f=b([ne("esp-page")],f);export{f as EspalierPage};
+    `}};m.styles=we,b([q()],m.prototype,"footerWrapperIsLandmark",void 0),b([q()],m.prototype,"sidebarHasContent",void 0),b([q()],m.prototype,"rightHasContent",void 0),b([q()],m.prototype,"allocatedPreviewWidth",void 0),b([q()],m.prototype,"allocatedFlyoutWidth",void 0),b([C({reflect:!0})],m.prototype,"kind",void 0),b([C({reflect:!0})],m.prototype,"align",void 0),b([C({type:Boolean,reflect:!0})],m.prototype,"contained",void 0),b([C({attribute:"header-position",reflect:!0})],m.prototype,"headerPosition",void 0),b([C({attribute:"preview-open",type:Boolean,reflect:!0})],m.prototype,"previewOpen",void 0),b([C({attribute:"sidebar-label",type:String,reflect:!0})],m.prototype,"sidebarLabel",void 0),b([C({attribute:"right-label",type:String,reflect:!0})],m.prototype,"rightLabel",void 0),b([C({attribute:"preview-label",type:String,reflect:!0})],m.prototype,"previewLabel",void 0),b([C({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],m.prototype,"previewCollapseSidebar",void 0),b([C({attribute:"workspace-resizable",type:Boolean,reflect:!0})],m.prototype,"workspaceResizable",void 0),b([C({attribute:"preview-visible",type:Boolean,reflect:!0})],m.prototype,"previewVisible",void 0),b([C({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],m.prototype,"previewReclaiming",void 0),m=b([ne("esp-page")],m);export{m as EspalierPage};

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

@@ -1,29 +1,11 @@
 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,
-        var(--esp-page-max-width, 1536px)
-      );
-      --_esp-page-main-min-width: var(
-        --esp-page-main-min-width,
-        var(--esp-page-preview-min-main-width, 30rem)
-      );
-      --_esp-page-preview-resolved-min-width: var(
-        --esp-page-preview-width,
-        var(--esp-page-preview-min-width, 22.5rem)
-      );
-      --_esp-page-preview-resolved-max-width: var(
-        --esp-page-preview-width,
-        var(--esp-page-preview-max-width, 48rem)
-      );
-      --_esp-page-flyout-resolved-min-width: var(
-        --esp-page-flyout-width,
-        var(--esp-page-flyout-min-width, 20rem)
-      );
-      --_esp-page-flyout-resolved-max-width: var(
-        --esp-page-flyout-width,
-        var(--esp-page-flyout-max-width, 30rem)
-      );
+      --_esp-page-resolved-max-width: var(--esp-page-main-max-width, 1536px);
+      --_esp-page-main-min-width: var(--esp-page-main-min-width, 30rem);
+      --_esp-page-preview-resolved-min-width: var(--esp-page-preview-min-width, 22.5rem);
+      --_esp-page-preview-resolved-max-width: var(--esp-page-preview-max-width, 48rem);
+      --_esp-page-flyout-resolved-min-width: var(--esp-page-flyout-min-width, 20rem);
+      --_esp-page-flyout-resolved-max-width: var(--esp-page-flyout-max-width, 30rem);
       --_esp-page-preview-used-width: 0px;
       --_esp-page-flyout-used-width: 0px;
       --_esp-page-workspace-track: minmax(
@@ -57,10 +39,7 @@ import{css as a,unsafeCSS as e}from"lit";import{EspalierElementBase as i}from"..
     }
 
     :host([kind="narrow"]) {
-      --_esp-page-resolved-max-width: var(
-        --esp-page-main-max-width,
-        var(--esp-page-max-width, 768px)
-      );
+      --_esp-page-resolved-max-width: var(--esp-page-main-max-width, 768px);
     }
 
     :host([align="center"]) {
@@ -75,10 +54,7 @@ import{css as a,unsafeCSS as e}from"lit";import{EspalierElementBase as i}from"..
 
     
     :host([kind="full"]) {
-      --_esp-page-resolved-max-width: var(
-        --esp-page-main-max-width,
-        var(--esp-page-max-width, none)
-      );
+      --_esp-page-resolved-max-width: var(--esp-page-main-max-width, none);
     }
 
     :host([kind="full"]:not([data-main-max-configured])) {

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

@@ -1,6 +1,6 @@
-var u=function(h,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(h,t,i,e);else for(var r=h.length-1;r>=0;r--)(o=h[r])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};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 v}from"../shared/svgs/caret-up-down.js";import{filter as w}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as l}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=l.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 s of i)s.selected=s.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==i)for(const s of e)s.selected=s.value===t;this.selection=l.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=l.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(!t.has("pickerItems"))return;if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const e=this.pickerItems.find(s=>s.selected);e&&(this.selection=l.of(e));return}const i=this.pickerItems.find(e=>e.value===this.selectedItem.value);i&&i!==this.selectedItem&&(this.selection=l.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`
+var u=function(a,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,t,i,e);else for(var l=a.length-1;l>=0;l--)(r=a[l])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};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 h}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 v}from"../shared/svgs/caret-up-down.js";import{filter as w}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as o}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=o.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 s of i)s.selected=s.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==i)for(const s of e)s.selected=s.value===t;this.selection=o.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=o.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(!t.has("pickerItems"))return;if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const e=this.pickerItems.find(s=>s.selected);e&&(this.selection=o.of(e));return}const i=this.pickerItems.find(e=>e.value===this.selectedItem.value);i&&i!==this.selectedItem&&(this.selection=o.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)}
+        ${h(this.pickerField)}
         tabindex="-1"
         class=${k(i)}
         @pointerdown=${this.handleHostPointerDown}
@@ -9,7 +9,7 @@ var u=function(h,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
       >
         <section>
           <input
-            ${a(this.theInput)}
+            ${h(this.theInput)}
             class="esp-input"
             value=${this.selectedItem?.text??""}
             style=${P(this.selectedItem?.styles??{})}
@@ -31,14 +31,14 @@ var u=function(h,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${a(this.pickerMenu)}
-          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const s=e.detail,n=s.length>0?s[0]:void 0;(s.length>0?this.selectedItem!==n:this.selectedItem!==void 0)&&(this.selection=this.showOptions?l.of(n):this.selection.withProvisionalItem(n),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
-          @esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const s=e.detail,n=s.length>0?s[0]:void 0;if(n?this.selectedItem?.value!==n.value:this.selectedItem!==void 0){if(this.selection=l.of(n),n)for(const r of this.pickerItems)r.selected=r.value===n.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          ${h(this.pickerMenu)}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const s=e.detail,n=s.length>0?s[0]:void 0;if(!(s.length>0?this.selectedItem!==n:this.selectedItem!==void 0))return;const l=this.pickerMenu.value?.isVisitorPick===!0;this.selection=l?o.of(n):this.selection.withProvisionalItem(n),l?(this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)):this.formCtrl.syncValueSilently()}}
+          @esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const s=e.detail,n=s.length>0?s[0]:void 0;if(n?this.selectedItem?.value!==n.value:this.selectedItem!==void 0){if(this.selection=o.of(n),n)for(const l of this.pickerItems)l.selected=l.value===n.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 ${a(this.itemsSlot)}></slot>
+      <slot ${h(this.itemsSlot)}></slot>
     `}};c.styles=[...g.styles,...p.pickerFieldStyles,d`
       .esp-field input.esp-input {
         width: 0;

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

@@ -1,14 +1,14 @@
-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`
+var c=function(n,t,s,e){var i=arguments.length,r=i<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(n,t,s,e);else for(var o=n.length-1;o>=0;o--)(l=n[o])&&(r=(i<3?l(r):i>3?l(t,s,r):l(t,s))||r);return i>3&&r&&Object.defineProperty(t,s,r),r};import{css as k,html as u}from"lit";import{customElement as y,property as m,state as v}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ifDefined as w}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 b}from"../shared/esp-element-base.js";import{caretUpDown as $}from"../shared/svgs/caret-up-down.js";import{filter as V}from"../shared/svgs/filter.js";import{plus as N}from"../shared/svgs/plus.js";import{EspalierPickerBase as f}from"./esp-picker-base.js";import{arrayKeysMatch as I}from"../shared/utilities.js";let a=class extends f{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,{visitor:s=!0}={}){if(this.initialSyncDone=!0,this.selectedItems=t,this.pickerItems=this.pickerItems.map(e=>({...e,selected:this.selectedItems.some(i=>i.value===e.value)})),!s){this.formCtrl.syncValueSilently();return}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=i=>i.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 i=this.pickerItems.find(r=>r.value===e.value);if(i){this.selectedItems.some(r=>r.value===i.value)||(i.selected=!0,this.setSelectedItems([...this.selectedItems,i])),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?N:this.typeahead&&this.inputFocused?V:$}render(){const{showOptions:t}=this,s={"esp-field":!0,"show-options":t};return u`
       <div
         ${h(this.pickerField)}
         tabindex="-1"
-        class=${v(s)}
+        class=${g(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
+          ${this.selectedItems.map(e=>u`<span
                 class="selected-item"
-                @click=${a=>{a.stopPropagation(),this.setSelectedItems(this.selectedItems.filter(i=>i.value!==e.value))}}
+                @click=${i=>{i.stopPropagation(),this.setSelectedItems(this.selectedItems.filter(r=>r.value!==e.value))}}
                 >${e.text}</span
               >`)}
           <input
@@ -28,7 +28,7 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           class=${this.canAddNewValue?"add-new":""}
           tabindex=${this.canAddNewValue?"0":"-1"}
           role=${this.canAddNewValue?"button":"presentation"}
-          aria-label=${g(this.canAddNewValue?"Add new value":void 0)}
+          aria-label=${w(this.canAddNewValue?"Add new value":void 0)}
           >${this.iconSvg}</label
         >
         ${this.renderPickerMenuDismissButton()}
@@ -41,13 +41,13 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           tabindex="-1"
           ${h(this.pickerMenu)}
           multi-select
-          @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-selection-changed=${e=>{e.stopPropagation();const i=this.pickerMenu.value?.isVisitorPick===!0;if(this.typeahead){const l=new Set(this.filteredItems.map(d=>d.value)),p=[...this.selectedItems.filter(d=>!l.has(d.value)),...e.detail];if(I(p,this.selectedItems,"value"))return;this.setSelectedItems(p,{visitor:i}),this.resetTypeaheadInput();return}I(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail,{visitor:i})}}
           @esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
         >
         </esp-picker-menu>
       </div>
       <slot ${h(this.itemsSlot)}></slot>
-    `}};r.styles=[...w.styles,...m.pickerFieldStyles,I`
+    `}};a.styles=[...b.styles,...f.pickerFieldStyles,k`
       :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);
@@ -102,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([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};
+    `],c([v()],a.prototype,"selectedItems",void 0),c([m({type:Array})],a.prototype,"values",null),c([m({attribute:!1})],a.prototype,"addNewValue",void 0),a=c([y("esp-pick-some")],a);export{a as EspalierPickSome};