@taprootio/espalier 4.5.0 → 4.7.0

package/dist/menu/esp-menu.js

@@ -1,44 +1,61 @@
-var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as D,html as w,nothing as g}from"lit";import{customElement as x,property as l,state as v}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as b}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as S}from"../shared/bus-events.js";import{normalizePath as A,pathStartsWithSegment as C,pathsMatch as T}from"../shared/path-matching.js";import{SwipeRevealController as O}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const R="(max-width: 50em)";let a=class extends y{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=S(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new O(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(R),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled()}disconnectedCallback(){this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof E?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?f.MENU_DRAWER_OPENED:f.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return C(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?C(location.pathname,A(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof E){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
+var l=function(w,e,r,i){var t=arguments.length,o=t<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(w,e,r,i);else for(var a=w.length-1;a>=0;a--)(s=w[a])&&(o=(t<3?s(o):t>3?s(e,r,o):s(e,r))||o);return t>3&&o&&Object.defineProperty(e,r,o),o},f;import{css as k,html as c,nothing as u}from"lit";import{customElement as M,property as d,state as y}from"lit/decorators.js";import{classMap as S}from"lit/directives/class-map.js";import{unsafeHTML as T}from"lit/directives/unsafe-html.js";import{createRef as m,ref as g}from"lit/directives/ref.js";import{styleMap as z}from"lit/directives/style-map.js";import{EspalierElementBase as E}from"../shared/esp-element-base.js";import{ESP_EVENTS as v}from"../shared/events.js";import{getEspBus as _}from"../shared/bus-events.js";import{normalizePath as $,pathStartsWithSegment as D,pathsMatch as x}from"../shared/path-matching.js";import{renderConfiguredBrand as F}from"../shared/configured-brand.js";import{FOCUSABLE_SELECTOR as A,OverlayController as C}from"../shared/overlay-controller.js";import{SwipeRevealController as L}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import"../burger/esp-burger.js";import{EspalierMenuItem as O}from"./esp-menu-item.js";import{EspalierMenuGroup as b}from"./esp-menu-group.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as I}from"../shared/responsive.js";const G=new Set(["panel","full-screen"]),N=new Set(["fade","slide-down","slide-up","slide-left","slide-right"]);let n=f=class extends E{ownsDrawerLock(){return this.isFullScreenDrawer}fullScreenInertAnchor(){return f.inertAnchorFor(this)}static inertAnchorFor(e){let r=e,i=e;for(;;){const t=i.parentElement;if(t){if(t.localName==="esp-page"||t.localName==="esp-root")return i;t===document.body&&(r=i),i=t;continue}const o=i.getRootNode();if(o instanceof ShadowRoot&&o.host instanceof HTMLElement){i=o.host;continue}return r}}constructor(){super(),this.itemsSlot=m(),this.railRef=m(),this.scrimRef=m(),this.drawerRef=m(),this.bus=_(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this.overlay=new C({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.onOverlayOpened=e=>{if(e===this.overlay||!this.drawerOpen)return;const r=this.drawerTrigger;this.drawerTrigger=null,r&&e.redirectFocusRestore(r),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 L(this,this.side),this.swipeController.enabled=!1}get isFullScreenDrawer(){return G.has(this.drawerPresentation)?this.drawerPresentation==="full-screen":!1}get resolvedFullScreenTransition(){return N.has(this.fullScreenTransition)?this.fullScreenTransition:"fade"}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(I),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled(),C.addOpenListener(this.onOverlayOpened)}disconnectedCallback(){C.removeOpenListener(this.onOverlayOpened),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()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.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 r of this.getAssignedChildren())r instanceof O?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof b&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.openedFullScreen=this.isFullScreenDrawer,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?v.MENU_DRAWER_OPENED:v.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r||!this.isConnected)){this.swipeController.drawerElement=r;try{this.openedFullScreen||e.showPopover(),r.showPopover()}catch{}this.dispatchEvent(new CustomEvent(v.MENU_DRAWER_PRESENTED,{bubbles:!0,composed:!0})),r.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 r=s=>s instanceof HTMLElement&&s.getClientRects().length>0,i=[],t=s=>{if(s.matches(A)&&r(s)&&i.push(s),s.shadowRoot)for(const a of s.shadowRoot.querySelectorAll(A))r(a)&&i.push(a)};for(const s of e.querySelectorAll("*"))if(t(s),s instanceof HTMLSlotElement)for(const a of s.assignedElements({flatten:!0})){t(a);for(const p of a.querySelectorAll("*"))t(p)}const o=this.liftedCloseControl;if(o?.isConnected){const s=o.shadowRoot?.querySelector("button")??o;r(s)&&i.push(s)}return i}static drawerTransitionMs(e){const r=getComputedStyle(e),i=a=>a.split(",").map(p=>p.trim()).filter(Boolean).map(p=>{const h=Number.parseFloat(p);return Number.isFinite(h)?p.endsWith("ms")?h:h*1e3:0}),t=i(r.transitionDuration),o=i(r.transitionDelay);let s=0;return t.forEach((a,p)=>{s=Math.max(s,a+(o[p%Math.max(o.length,1)]??0))}),s}startCloseTransition(){const e=this.drawerRef.value;if(!e){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer);const r=f.drawerTransitionMs(e);if(r===0){this.onDrawerTransitionEnd();return}this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},r+50)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let i=null;for(const o of this.querySelectorAll("esp-menu-item")){const s=o.url||o.getAttribute("url");if(s&&x(s)){i=o;break}}if(!i)for(const o of this.querySelectorAll("esp-menu-group")){const s=o.url||o.getAttribute("url");if(s&&x(s)){i=o;break}}if(!i&&e){for(const o of this.querySelectorAll("esp-menu-group"))o.parentElement===this&&r.add(o);return r}if(!i)return r;i instanceof b&&r.add(i);let t=i.parentElement;for(;t&&t!==this;)t instanceof b&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return D(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?D(location.pathname,$(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const i of r)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,r=this.getDrawerAutoExpandedGroups()){const i=[];for(const t of e)if(t instanceof O){const o=t.querySelector(":scope > svg, :scope > img");i.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:o?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof b){const o=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),a=this.drawerGroupOpenOverrides.get(t)??(t.open||s);i.push({kind:"group",label:t.label,url:t.url||"",open:a,icon:t.icon,iconHtml:o?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return i}renderDrawerNode(e){return e.kind==="item"?c`<esp-menu-item
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}
         .mode=${"drawer"}
         @esp-clicked=${()=>!e.url&&e.originalItem?this.handleDrawerItemClick(e.originalItem):void 0}
-        >${b(e.iconHtml)}</esp-menu-item
-      >`:w`<esp-menu-group
+        >${T(e.iconHtml)}</esp-menu-item
+      >`:c`<esp-menu-group
       label=${e.label}
       .url=${e.url}
       .icon=${e.icon}
       .mode=${"drawer"}
+      .fullScreenPresentation=${this.openedFullScreen}
       ?open=${e.open}
       @esp-menu-group-toggle=${r=>{e.originalGroup&&(this.drawerGroupOpenOverrides.set(e.originalGroup,r.detail.open),this.isHorizontalTopLevelGroup(e.originalGroup)||(e.originalGroup.open=r.detail.open))}}
     >
-      ${e.iconHtml?b(e.iconHtml):g}
+      ${e.iconHtml?T(e.iconHtml):u}
       ${e.children.map(r=>this.renderDrawerNode(r))}
-    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent(f.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,r=this.drawerActive,o={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},t={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right",transitioning:this.drawerTransitioning,open:this.drawerOpen},i=e?this.collectDrawerNodes(this.getAssignedChildren()):[],s=this.ariaLabel??"Navigation";return w`
+    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent(v.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,r=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},t=e?this.openedFullScreen:this.isFullScreenDrawer,o={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right","full-screen":t,[`transition-${this.resolvedFullScreenTransition}`]:t,transitioning:this.drawerTransitioning,open:this.drawerShown},s=e?this.collectDrawerNodes(this.getAssignedChildren()):[],a=this.ariaLabel??"Navigation",p={"--_esp-menu-drawer-brand-color":this.drawerBrand?.brandColor||null},h=t&&e?c`<div class="drawer-chrome">
+            <div class="drawer-brand" style=${z(p)}>
+              <slot name="drawer-brand"
+                >${this.drawerBrand?F(this.drawerBrand):u}</slot
+              >
+            </div>
+            ${this.liftedCloseControl?u:c`
+                  <button
+                    type="button"
+                    class="drawer-close"
+                    aria-label="Close menu"
+                    @click=${this.handleDrawerCloseClick}
+                  >
+                    <esp-burger presentation-only menu-open></esp-burger>
+                  </button>`}
+          </div>`:u;return c`
       <nav
-        ${c(this.railRef)}
-        class=${m(o)}
-        aria-label=${s}
+        ${g(this.railRef)}
+        class=${S(i)}
+        aria-label=${a}
         ?hidden=${r}
       >
-        <slot ${c(this.itemsSlot)} @slotchange=${this.handleSlotChange}></slot>
+        <slot ${g(this.itemsSlot)} @slotchange=${this.handleSlotChange}></slot>
       </nav>
       <div
-        ${c(this.scrimRef)}
-        class=${m({scrim:!0,open:this.drawerOpen,transitioning:this.drawerTransitioning})}
+        ${g(this.scrimRef)}
+        class=${S({scrim:!0,"full-screen":t,open:this.drawerShown,transitioning:this.drawerTransitioning})}
         popover="manual"
       ></div>
       <nav
-        ${c(this.drawerRef)}
-        class=${m(t)}
-        aria-label=${s}
+        ${g(this.drawerRef)}
+        class=${S(o)}
+        aria-label=${a}
         popover="manual"
+        ?data-no-swipe=${t}
         @transitionend=${this.onDrawerTransitionEnd}
       >
-        ${e?i.map(h=>this.renderDrawerNode(h)):g}
+        ${h} ${e?s.map(R=>this.renderDrawerNode(R)):u}
       </nav>
-    `}};a.styles=[...y.styles,D`
+    `}};n.styles=[...E.styles,k`
       :host {
         display: block;
         min-width: 0;
@@ -161,10 +178,154 @@ var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
         transform: translateX(0);
       }
 
+      
+      .scrim.full-screen {
+        display: none;
+      }
+
+      .drawer.full-screen {
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        padding-block: var(--esp-size-normal-to-medium);
+        box-shadow: none;
+        opacity: 0;
+        transform: none;
+      }
+
+      .drawer.full-screen.transitioning {
+        transition:
+          opacity var(--esp-menu-drawer-transition-duration, 0.3s) ease,
+          transform var(--esp-menu-drawer-transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .drawer.full-screen.transition-slide-down {
+        opacity: 1;
+        transform: translateY(-100%);
+      }
+
+      .drawer.full-screen.transition-slide-up {
+        opacity: 1;
+        transform: translateY(100%);
+      }
+
+      .drawer.full-screen.transition-slide-left {
+        opacity: 1;
+        transform: translateX(100%);
+      }
+
+      .drawer.full-screen.transition-slide-right {
+        opacity: 1;
+        transform: translateX(-100%);
+      }
+
+      .drawer.full-screen.open {
+        opacity: 1;
+        transform: none;
+      }
+
+      .drawer-chrome {
+        position: relative;
+        display: grid;
+        padding-inline: var(--esp-size-normal);
+      }
+
+      .drawer-brand {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: var(--esp-menu-drawer-brand-logo-size, calc(3 * var(--esp-size-medium)));
+        padding-block: var(--esp-size-normal);
+        color: var(
+          --_esp-menu-drawer-brand-color,
+          var(--esp-menu-drawer-brand-color, var(--esp-color-headings))
+        );
+      }
+
+      .drawer-brand .configured-brand {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--esp-size-tiny-to-small);
+        max-width: 80vw;
+        color: inherit;
+        font-family: var(
+          --_esp-font-brand-effective,
+          var(
+            --esp-font-brand,
+            var(
+              --_esp-font-headings-effective,
+              var(
+                --esp-font-headings,
+                var(
+                  --_esp-font-body-effective,
+                  var(--esp-font-body, var(--_esp-font-body-fallback))
+                )
+              )
+            )
+          )
+        );
+        font-size: var(--esp-type-medium);
+        font-weight: var(--esp-font-weight-brand, var(--esp-font-weight-headings));
+        text-decoration: none;
+      }
+
+      .drawer-brand .brand-logo {
+        width: auto;
+        height: var(--esp-menu-drawer-brand-logo-size, calc(3 * var(--esp-size-medium)));
+        max-width: 60vw;
+        object-fit: contain;
+      }
+
+      .drawer-close {
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+        display: grid;
+        place-content: center;
+        width: max(44px, calc(3.5 * var(--esp-size-small)));
+        height: max(44px, calc(3.5 * var(--esp-size-small)));
+        border: none;
+        padding: 0;
+        background: none;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .drawer-close:focus-visible {
+        outline: 2px solid var(--esp-color-link);
+        outline-offset: -2px;
+      }
+
+      
+      .drawer.full-screen esp-menu-item,
+      .drawer.full-screen esp-menu-group {
+        --esp-menu-item-border-color: transparent;
+        --esp-menu-item-background: transparent;
+        --esp-menu-item-hover-background: transparent;
+        --esp-menu-item-active-background: transparent;
+        --esp-menu-item-font-size: var(--esp-menu-drawer-item-font-size, var(--esp-type-large));
+        --esp-menu-item-padding: var(--esp-size-small) var(--esp-size-normal);
+        --esp-menu-group-border-color: transparent;
+        --esp-menu-group-background: transparent;
+        --esp-menu-group-hover-background: transparent;
+      }
+
+      .drawer.full-screen esp-menu-item::part(menu-text),
+      .drawer.full-screen esp-menu-group::part(menu-text) {
+        display: flex;
+        flex: 1 1 auto;
+        justify-content: center;
+        text-align: center;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .scrim.transitioning,
-        .drawer.transitioning {
+        .drawer.transitioning,
+        .drawer.full-screen.transitioning {
           transition: none;
         }
       }
-    `],n([l({type:String,reflect:!0})],a.prototype,"mode",void 0),n([l({type:String,reflect:!0})],a.prototype,"overflow",void 0),n([l({type:String,reflect:!0})],a.prototype,"side",void 0),n([l({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),n([l({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),n([l({type:Boolean})],a.prototype,"sliding",null),n([l({type:Boolean})],a.prototype,"collapsed",null),n([v()],a.prototype,"drawerOpen",void 0),n([v()],a.prototype,"drawerTransitioning",void 0),n([l({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),n([l({attribute:!1})],a.prototype,"previewCollapseRequested",void 0),a=n([x("esp-menu")],a);export{a as EspalierMenu};
+    `],l([d({type:String,reflect:!0})],n.prototype,"mode",void 0),l([d({type:String,reflect:!0})],n.prototype,"overflow",void 0),l([d({type:String,reflect:!0})],n.prototype,"side",void 0),l([d({attribute:"drawer-presentation",type:String,reflect:!0})],n.prototype,"drawerPresentation",void 0),l([d({attribute:"full-screen-transition",type:String,reflect:!0})],n.prototype,"fullScreenTransition",void 0),l([d({attribute:!1})],n.prototype,"drawerBrand",void 0),l([d({attribute:!1})],n.prototype,"liftedCloseControl",void 0),l([d({attribute:"aria-label",type:String})],n.prototype,"ariaLabel",void 0),l([d({type:Boolean,attribute:"auto-expand"})],n.prototype,"autoExpand",void 0),l([d({type:Boolean})],n.prototype,"sliding",null),l([d({type:Boolean})],n.prototype,"collapsed",null),l([y()],n.prototype,"drawerOpen",void 0),l([y()],n.prototype,"drawerShown",void 0),l([y()],n.prototype,"drawerTransitioning",void 0),l([d({attribute:!1})],n.prototype,"hasExternalDrawerControl",void 0),l([d({attribute:!1})],n.prototype,"previewCollapseRequested",void 0),n=f=l([M("esp-menu")],n);export{n as EspalierMenu};

package/dist/menu/swipe-reveal-controller.js

@@ -1 +1 @@
-const h=10,a=.25,l=.25,c=10,d=24,u=400,f=800;let o=null;class g{constructor(e,t="left"){this._isOpen=!1,this._isTouch=!1,this._enabled=!0,this._drawerElement=null,this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.gestureStartedInDrawer=!1,this.tracking=!1,this.pointerMediaQuery=null,this.horizontalScrollTarget=null,this.lastViewportWidth=0,this.lastViewportHeight=0,this.lastTouchEndTime=0,this.openedAt=0,this.closedViaTap=!1,this.onTouchStart=i=>this.handleTouchStart(i),this.onTouchMove=i=>this.handleTouchMove(i),this.onTouchEnd=i=>this.handleTouchEnd(i),this.onKeyDown=i=>this.handleKeyDown(i),this.onResize=()=>this.handleResize(),this.onDocumentClick=i=>this.handleDocumentClick(i),this.onMediaChange=i=>this.handleMediaChange(i),this.savedScrollY=0,this.isScrollLocked=!1,this.inertElements=[],(this.host=e).addController(this),this._direction=t}get isOpen(){return this._isOpen}get isTouch(){return this._isTouch}get direction(){return this._direction}set direction(e){this._direction=e}set drawerElement(e){this._drawerElement=e}get enabled(){return this._enabled}set enabled(e){this._enabled=e,!e&&this._isOpen&&this.close(!0)}open(){this._isOpen||this._enabled&&(o&&o!==this||(this._isOpen=!0,o=this,this.openedAt=Date.now(),this.lockScroll(!0),this.host.onSwipeRevealChanged(!0)))}close(e=!1){this._isOpen&&(!e&&Date.now()-this.openedAt<400||(this._isOpen=!1,o===this&&(o=null),this.lockScroll(!1),this.host.onSwipeRevealChanged(!1)))}toggle(){this._isOpen?this.close(!0):this.open()}hostConnected(){this.pointerMediaQuery=window.matchMedia("(pointer: coarse)"),this._isTouch=this.pointerMediaQuery.matches,this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,this.pointerMediaQuery.addEventListener("change",this.onMediaChange),this._isTouch&&this.attachTouchListeners(),this.attachClickListener(),this.attachDismissListeners()}hostDisconnected(){this.detachTouchListeners(),this.stopTracking(),this.detachClickListener(),this.detachDismissListeners(),this.pointerMediaQuery?.removeEventListener("change",this.onMediaChange),this.pointerMediaQuery=null,this.lockScroll(!1),o===this&&(o=null)}attachTouchListeners(){document.addEventListener("touchstart",this.onTouchStart,{passive:!0}),document.addEventListener("touchend",this.onTouchEnd,{passive:!0}),document.addEventListener("touchcancel",this.onTouchEnd,{passive:!0})}detachTouchListeners(){document.removeEventListener("touchstart",this.onTouchStart),document.removeEventListener("touchend",this.onTouchEnd),document.removeEventListener("touchcancel",this.onTouchEnd)}startTracking(){this.tracking||(this.tracking=!0,document.addEventListener("touchmove",this.onTouchMove,{passive:!1}))}stopTracking(){this.tracking&&(this.tracking=!1,document.removeEventListener("touchmove",this.onTouchMove))}attachClickListener(){document.addEventListener("click",this.onDocumentClick,!0)}detachClickListener(){document.removeEventListener("click",this.onDocumentClick,!0)}attachDismissListeners(){document.addEventListener("keydown",this.onKeyDown),window.addEventListener("resize",this.onResize)}detachDismissListeners(){document.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResize)}handleMediaChange(e){this._isTouch=e.matches,e.matches?this.attachTouchListeners():(this._isOpen&&this.close(!0),this.detachTouchListeners(),this.stopTracking()),this.host.requestUpdate()}isHorizontalDragControl(e){for(const t of e.composedPath())if(t instanceof HTMLElement){if(t===document.body||t===document.documentElement)break;if(t instanceof HTMLInputElement&&t.type==="range")return!0}return!1}isInsideDatePickerCalendar(e){for(const t of e.composedPath())if(t instanceof HTMLElement){if(t===document.body||t===document.documentElement)break;if(t.classList.contains("picker-popover")){const i=t.getRootNode();if(i instanceof ShadowRoot&&i.host?.tagName==="ESP-DATE-PICKER")return!0}}return!1}hasNoSwipeAncestor(e){for(const t of e.composedPath())if(t instanceof HTMLElement){if(t===document.body||t===document.documentElement)break;if(t.hasAttribute("data-no-swipe"))return!0}return!1}findHorizontallyScrollable(e){const t=e.composedPath();for(const i of t){if(!(i instanceof HTMLElement))continue;if(i===document.body||i===document.documentElement)break;if(i.scrollWidth<=i.clientWidth)continue;const n=getComputedStyle(i).overflowX;if(n==="auto"||n==="scroll"||n==="-webkit-marquee")return i}return null}canScrollInDirection(e,t){return t>0?e.scrollLeft>0:e.scrollLeft+e.clientWidth<e.scrollWidth-1}isPointInDrawer(e,t){if(!this._drawerElement)return!1;const i=this._drawerElement.getBoundingClientRect();return e>=i.left&&e<=i.right&&t>=i.top&&t<=i.bottom}handleTouchStart(e){if(!this._enabled||e.touches.length!==1)return;(this.committed||this.gestureStarted||this.tracking)&&this.resetGesture();const t=e.touches[0];if(this.isPointInDrawer(t.clientX,t.clientY)){if(!this._isOpen)return;this.gestureStartedInDrawer=!0,this.horizontalScrollTarget=null,this.startX=t.clientX,this.startY=t.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking();return}this.isHorizontalDragControl(e)||this.isInsideDatePickerCalendar(e)||this.hasNoSwipeAncestor(e)||!this._isOpen&&!this.isWithinOpenEdge(t.clientX)||(this.horizontalScrollTarget=this._isOpen?null:this.findHorizontallyScrollable(e),this.gestureStartedInDrawer=!1,this.startX=t.clientX,this.startY=t.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking())}isWithinOpenEdge(e){const t=window.innerWidth*.25;return this._direction==="left"?e<=t:e>=window.innerWidth-t}handleTouchMove(e){if(e.touches.length!==1||this.committed||this.startX===0&&this.startY===0)return;this._isOpen&&!this.gestureStartedInDrawer&&e.cancelable&&e.preventDefault();const t=e.touches[0],i=t.clientX-this.startX,s=t.clientY-this.startY;if(!this.gestureStarted){if(Math.abs(i)<10&&Math.abs(s)<10)return;if(Math.abs(s)>Math.abs(i)){this.resetGesture();return}if(this._direction==="left"){if(!this._isOpen&&i<0){this.resetGesture();return}if(this._isOpen&&i>0){this.resetGesture();return}}else{if(!this._isOpen&&i>0){this.resetGesture();return}if(this._isOpen&&i<0){this.resetGesture();return}}if(this.horizontalScrollTarget&&this.canScrollInDirection(this.horizontalScrollTarget,i)){this.resetGesture();return}this.gestureStarted=!0}e.cancelable&&e.preventDefault();const n=window.innerWidth*.25;Math.abs(i)>=n&&(this.committed=!0,this._isOpen?this.close():this.open())}handleTouchEnd(e){if(this.lastTouchEndTime=Date.now(),this._isOpen&&this.tracking&&!this.committed&&!this.gestureStartedInDrawer&&e.changedTouches.length===1){const t=e.changedTouches[0],i=t.clientX-this.startX,s=t.clientY-this.startY;Math.abs(i)<10&&Math.abs(s)<10&&(this.closedViaTap=!0,setTimeout(()=>{this.closedViaTap=!1},400),this.close())}this.resetGesture()}handleDocumentClick(e){if(this.closedViaTap){this.closedViaTap=!1,e.stopImmediatePropagation(),e.preventDefault();return}this._isOpen&&(Date.now()-this.openedAt<800||Date.now()-this.lastTouchEndTime<400||this.isPointInDrawer(e.clientX,e.clientY)||(e.stopImmediatePropagation(),this.close()))}resetGesture(){this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.gestureStartedInDrawer=!1,this.horizontalScrollTarget=null,this.stopTracking()}handleKeyDown(e){e.key==="Escape"&&this._isOpen&&this.close(!0)}handleResize(){const e=Math.abs(window.innerWidth-this.lastViewportWidth),t=Math.abs(window.innerHeight-this.lastViewportHeight);this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,!(this._isOpen&&Date.now()-this.openedAt<800)&&(e<24&&t<24||this._isOpen&&this.close(!0))}lockScroll(e){if(e&&this.isScrollLocked||!e&&!this.isScrollLocked)return;this.isScrollLocked=e;const{style:t}=document.body;e?(this.savedScrollY=window.scrollY,t.position="fixed",t.top=`-${this.savedScrollY}px`,t.left="0",t.right="0",this.setPageContentInert(!0)):(t.position="",t.top="",t.left="",t.right="",window.scrollTo(0,this.savedScrollY),requestAnimationFrame(()=>{this.setPageContentInert(!1),window.dispatchEvent(new Event("resize"))}))}getPageRegionFromSlot(e){return e.closest(".esp-page-top, .esp-page-main, .esp-page-left, .esp-page-right, footer")}getContainingPageRegionFromLightDom(){const e=this.host.closest("esp-page");if(!e?.shadowRoot)return null;let t=this.host;for(;t?.parentElement&&t.parentElement!==e;)t=t.parentElement;if(!t||t.parentElement!==e)return null;const i=t.getAttribute("slot")??"",s=Array.from(e.shadowRoot.querySelectorAll("slot")).find(n=>n.name===i);return s?this.getPageRegionFromSlot(s):null}getContainingPageRegion(){const e=this.getContainingPageRegionFromLightDom();if(e)return e;let t=this.host;for(;t;){if(t instanceof HTMLElement&&t.assignedSlot){const s=this.getPageRegionFromSlot(t.assignedSlot);if(s)return s;const n=t.assignedSlot.getRootNode();if(n instanceof ShadowRoot){t=n.host;continue}}if(t.parentElement){t=t.parentElement;continue}const i=t.getRootNode();t=i instanceof ShadowRoot?i.host:null}return null}setPageContentInert(e){if(e){this.inertElements=[];const t=this.getContainingPageRegion();if(!t)return;const i=t.parentElement;if(!i)return;for(const s of i.children)s instanceof HTMLElement&&s!==t&&(s.inert||(s.inert=!0,this.inertElements.push(s)))}else{for(const t of this.inertElements)t.inert=!1;this.inertElements=[]}}}export{g as SwipeRevealController};
+const h=10,a=.25,l=.25,c=10,d=24,u=400,f=800;let o=null;class g{constructor(t,e="left"){this._isOpen=!1,this._isTouch=!1,this._enabled=!0,this._drawerElement=null,this.lockOwnedByHost=!1,this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.gestureStartedInDrawer=!1,this.tracking=!1,this.pointerMediaQuery=null,this.horizontalScrollTarget=null,this.lastViewportWidth=0,this.lastViewportHeight=0,this.lastTouchEndTime=0,this.openedAt=0,this.closedViaTap=!1,this.onTouchStart=i=>this.handleTouchStart(i),this.onTouchMove=i=>this.handleTouchMove(i),this.onTouchEnd=i=>this.handleTouchEnd(i),this.onKeyDown=i=>this.handleKeyDown(i),this.onResize=()=>this.handleResize(),this.onDocumentClick=i=>this.handleDocumentClick(i),this.onMediaChange=i=>this.handleMediaChange(i),this.savedScrollY=0,this.isScrollLocked=!1,this.inertElements=[],(this.host=t).addController(this),this._direction=e}get isOpen(){return this._isOpen}get isTouch(){return this._isTouch}get direction(){return this._direction}set direction(t){this._direction=t}set drawerElement(t){this._drawerElement=t}get enabled(){return this._enabled}set enabled(t){this._enabled=t,!t&&this._isOpen&&this.close(!0)}open(){this._isOpen||this._enabled&&(o&&o!==this||(this._isOpen=!0,o=this,this.openedAt=Date.now(),this.lockOwnedByHost=this.host.ownsDrawerLock?.()===!0,this.lockOwnedByHost||this.lockScroll(!0),this.host.onSwipeRevealChanged(!0)))}close(t=!1){this._isOpen&&(!t&&Date.now()-this.openedAt<400||this.finishClose(!1))}closeForHandoff(){this._isOpen&&this.finishClose(!0)}finishClose(t){this._isOpen=!1,o===this&&(o=null),this.lockOwnedByHost||this.lockScroll(!1,t),this.lockOwnedByHost=!1,this.host.onSwipeRevealChanged(!1)}toggle(){this._isOpen?this.close(!0):this.open()}hostConnected(){this.pointerMediaQuery=window.matchMedia("(pointer: coarse)"),this._isTouch=this.pointerMediaQuery.matches,this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,this.pointerMediaQuery.addEventListener("change",this.onMediaChange),this._isTouch&&this.attachTouchListeners(),this.attachClickListener(),this.attachDismissListeners()}hostDisconnected(){this.detachTouchListeners(),this.stopTracking(),this.detachClickListener(),this.detachDismissListeners(),this.pointerMediaQuery?.removeEventListener("change",this.onMediaChange),this.pointerMediaQuery=null,this.lockScroll(!1),o===this&&(o=null)}attachTouchListeners(){document.addEventListener("touchstart",this.onTouchStart,{passive:!0}),document.addEventListener("touchend",this.onTouchEnd,{passive:!0}),document.addEventListener("touchcancel",this.onTouchEnd,{passive:!0})}detachTouchListeners(){document.removeEventListener("touchstart",this.onTouchStart),document.removeEventListener("touchend",this.onTouchEnd),document.removeEventListener("touchcancel",this.onTouchEnd)}startTracking(){this.tracking||(this.tracking=!0,document.addEventListener("touchmove",this.onTouchMove,{passive:!1}))}stopTracking(){this.tracking&&(this.tracking=!1,document.removeEventListener("touchmove",this.onTouchMove))}attachClickListener(){document.addEventListener("click",this.onDocumentClick,!0)}detachClickListener(){document.removeEventListener("click",this.onDocumentClick,!0)}attachDismissListeners(){document.addEventListener("keydown",this.onKeyDown),window.addEventListener("resize",this.onResize)}detachDismissListeners(){document.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResize)}handleMediaChange(t){this._isTouch=t.matches,t.matches?this.attachTouchListeners():(this._isOpen&&this.close(!0),this.detachTouchListeners(),this.stopTracking()),this.host.requestUpdate()}isHorizontalDragControl(t){for(const e of t.composedPath())if(e instanceof HTMLElement){if(e===document.body||e===document.documentElement)break;if(e instanceof HTMLInputElement&&e.type==="range")return!0}return!1}isInsideDatePickerCalendar(t){for(const e of t.composedPath())if(e instanceof HTMLElement){if(e===document.body||e===document.documentElement)break;if(e.classList.contains("picker-popover")){const i=e.getRootNode();if(i instanceof ShadowRoot&&i.host?.tagName==="ESP-DATE-PICKER")return!0}}return!1}hasNoSwipeAncestor(t){for(const e of t.composedPath())if(e instanceof HTMLElement){if(e===document.body||e===document.documentElement)break;if(e.hasAttribute("data-no-swipe"))return!0}return!1}findHorizontallyScrollable(t){const e=t.composedPath();for(const i of e){if(!(i instanceof HTMLElement))continue;if(i===document.body||i===document.documentElement)break;if(i.scrollWidth<=i.clientWidth)continue;const n=getComputedStyle(i).overflowX;if(n==="auto"||n==="scroll"||n==="-webkit-marquee")return i}return null}canScrollInDirection(t,e){return e>0?t.scrollLeft>0:t.scrollLeft+t.clientWidth<t.scrollWidth-1}isPointInDrawer(t,e){if(!this._drawerElement)return!1;const i=this._drawerElement.getBoundingClientRect();return t>=i.left&&t<=i.right&&e>=i.top&&e<=i.bottom}handleTouchStart(t){if(!this._enabled||t.touches.length!==1)return;(this.committed||this.gestureStarted||this.tracking)&&this.resetGesture();const e=t.touches[0];if(this.isPointInDrawer(e.clientX,e.clientY)){if(!this._isOpen||this._drawerElement?.hasAttribute("data-no-swipe"))return;this.gestureStartedInDrawer=!0,this.horizontalScrollTarget=null,this.startX=e.clientX,this.startY=e.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking();return}this.isHorizontalDragControl(t)||this.isInsideDatePickerCalendar(t)||this.hasNoSwipeAncestor(t)||!this._isOpen&&!this.isWithinOpenEdge(e.clientX)||(this.horizontalScrollTarget=this._isOpen?null:this.findHorizontallyScrollable(t),this.gestureStartedInDrawer=!1,this.startX=e.clientX,this.startY=e.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking())}isWithinOpenEdge(t){const e=window.innerWidth*.25;return this._direction==="left"?t<=e:t>=window.innerWidth-e}handleTouchMove(t){if(t.touches.length!==1||this.committed||this.startX===0&&this.startY===0)return;this._isOpen&&!this.gestureStartedInDrawer&&t.cancelable&&t.preventDefault();const e=t.touches[0],i=e.clientX-this.startX,s=e.clientY-this.startY;if(!this.gestureStarted){if(Math.abs(i)<10&&Math.abs(s)<10)return;if(Math.abs(s)>Math.abs(i)){this.resetGesture();return}if(this._direction==="left"){if(!this._isOpen&&i<0){this.resetGesture();return}if(this._isOpen&&i>0){this.resetGesture();return}}else{if(!this._isOpen&&i>0){this.resetGesture();return}if(this._isOpen&&i<0){this.resetGesture();return}}if(this.horizontalScrollTarget&&this.canScrollInDirection(this.horizontalScrollTarget,i)){this.resetGesture();return}this.gestureStarted=!0}t.cancelable&&t.preventDefault();const n=window.innerWidth*.25;Math.abs(i)>=n&&(this.committed=!0,this._isOpen?this.close():this.open())}handleTouchEnd(t){if(this.lastTouchEndTime=Date.now(),this._isOpen&&this.tracking&&!this.committed&&!this.gestureStartedInDrawer&&t.changedTouches.length===1){const e=t.changedTouches[0],i=e.clientX-this.startX,s=e.clientY-this.startY;Math.abs(i)<10&&Math.abs(s)<10&&(this.closedViaTap=!0,setTimeout(()=>{this.closedViaTap=!1},400),this.close())}this.resetGesture()}handleDocumentClick(t){if(this.closedViaTap){this.closedViaTap=!1,t.stopImmediatePropagation(),t.preventDefault();return}this._isOpen&&(Date.now()-this.openedAt<800||Date.now()-this.lastTouchEndTime<400||this.isPointInDrawer(t.clientX,t.clientY)||(t.stopImmediatePropagation(),this.close()))}resetGesture(){this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.gestureStartedInDrawer=!1,this.horizontalScrollTarget=null,this.stopTracking()}handleKeyDown(t){t.defaultPrevented||t.key==="Escape"&&this._isOpen&&this.close(!0)}handleResize(){const t=Math.abs(window.innerWidth-this.lastViewportWidth),e=Math.abs(window.innerHeight-this.lastViewportHeight);this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,!(this._isOpen&&Date.now()-this.openedAt<800)&&(t<24&&e<24||this._isOpen&&this.close(!0))}lockScroll(t,e=!1){if(t&&this.isScrollLocked||!t&&!this.isScrollLocked)return;this.isScrollLocked=t;const{style:i}=document.body;t?(this.savedScrollY=window.scrollY,i.position="fixed",i.top=`-${this.savedScrollY}px`,i.left="0",i.right="0",this.setPageContentInert(!0)):(i.position="",i.top="",i.left="",i.right="",window.scrollTo(0,this.savedScrollY),e&&this.setPageContentInert(!1),requestAnimationFrame(()=>{e||this.setPageContentInert(!1),window.dispatchEvent(new Event("resize"))}))}getPageRegionFromSlot(t){return t.closest(".esp-page-top, .esp-page-main, .esp-page-left, .esp-page-right, footer")}getContainingPageRegionFromLightDom(){const t=this.host.closest("esp-page");if(!t?.shadowRoot)return null;let e=this.host;for(;e?.parentElement&&e.parentElement!==t;)e=e.parentElement;if(!e||e.parentElement!==t)return null;const i=e.getAttribute("slot")??"",s=Array.from(t.shadowRoot.querySelectorAll("slot")).find(n=>n.name===i);return s?this.getPageRegionFromSlot(s):null}getContainingPageRegion(){const t=this.getContainingPageRegionFromLightDom();if(t)return t;let e=this.host;for(;e;){if(e instanceof HTMLElement&&e.assignedSlot){const s=this.getPageRegionFromSlot(e.assignedSlot);if(s)return s;const n=e.assignedSlot.getRootNode();if(n instanceof ShadowRoot){e=n.host;continue}}if(e.parentElement){e=e.parentElement;continue}const i=e.getRootNode();e=i instanceof ShadowRoot?i.host:null}return null}setPageContentInert(t){if(t){this.inertElements=[];const e=this.getContainingPageRegion();if(!e)return;const i=e.parentElement;if(!i)return;for(const s of i.children)s instanceof HTMLElement&&s!==e&&(s.inert||(s.inert=!0,this.inertElements.push(s)))}else{for(const e of this.inertElements)e.inert=!1;this.inertElements=[]}}}export{g as SwipeRevealController};

package/dist/page/esp-page.js

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

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

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