@taprootio/espalier 3.9.0 → 4.1.0

package/dist/menu/esp-menu.js

@@ -1,21 +1,21 @@
-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 x,html as w,nothing as f}from"lit";import{customElement as E,property as l,state as g}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as v}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{getEspBus as D}from"../shared/bus-events.js";import{normalizePath as S,pathStartsWithSegment as y,pathsMatch as C}from"../shared/path-matching.js";import{SwipeRevealController as A}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as T}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const O="(max-width: 50em)";let a=class extends b{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=D(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new A(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(O),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 T?(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?"drawer-opened":"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&&C(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&C(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 y(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?y(location.pathname,S(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 T){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
+var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as D,html as w,nothing as g}from"lit";import{customElement as x,property as l,state as v}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as b}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as S}from"../shared/bus-events.js";import{normalizePath as 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
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}
         .mode=${"drawer"}
-        @clicked=${()=>!e.url&&e.originalItem?this.handleDrawerItemClick(e.originalItem):void 0}
-        >${v(e.iconHtml)}</esp-menu-item
+        @esp-clicked=${()=>!e.url&&e.originalItem?this.handleDrawerItemClick(e.originalItem):void 0}
+        >${b(e.iconHtml)}</esp-menu-item
       >`:w`<esp-menu-group
       label=${e.label}
       .url=${e.url}
       .icon=${e.icon}
       .mode=${"drawer"}
       ?open=${e.open}
-      @esp-group-toggle=${r=>{e.originalGroup&&(this.drawerGroupOpenOverrides.set(e.originalGroup,r.detail.open),this.isHorizontalTopLevelGroup(e.originalGroup)||(e.originalGroup.open=r.detail.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?v(e.iconHtml):f}
+      ${e.iconHtml?b(e.iconHtml):g}
       ${e.children.map(r=>this.renderDrawerNode(r))}
-    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent("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(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`
       <nav
         ${c(this.railRef)}
         class=${m(o)}
@@ -36,9 +36,9 @@ var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
         popover="manual"
         @transitionend=${this.onDrawerTransitionEnd}
       >
-        ${e?i.map(h=>this.renderDrawerNode(h)):f}
+        ${e?i.map(h=>this.renderDrawerNode(h)):g}
       </nav>
-    `}};a.styles=[...b.styles,x`
+    `}};a.styles=[...y.styles,D`
       :host {
         display: block;
         min-width: 0;
@@ -167,4 +167,4 @@ var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
           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([g()],a.prototype,"drawerOpen",void 0),n([g()],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([E("esp-menu")],a);export{a as EspalierMenu};
+    `],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};

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

@@ -419,17 +419,17 @@ export interface PageWorkspaceResizeDetail {
  *   page.kind = page.previewOpen || help.open ? "wide" : "full";
  * };
  *
- * findById("page-workspace-preview-toggle").addEventListener("clicked", () => {
+ * findById("page-workspace-preview-toggle").addEventListener("esp-clicked", () => {
  *   page.togglePreview();
  *   syncMainWidth();
  * });
- * findById("page-workspace-help-toggle").addEventListener("clicked", () => {
+ * findById("page-workspace-help-toggle").addEventListener("esp-clicked", () => {
  *   help.anchor = title;
  *   help.toggle();
  *   syncMainWidth();
  * });
- * help.addEventListener("flyout-opened", syncMainWidth);
- * help.addEventListener("flyout-closed", syncMainWidth);
+ * help.addEventListener("esp-flyout-opened", syncMainWidth);
+ * help.addEventListener("esp-flyout-closed", syncMainWidth);
  * syncMainWidth();
  * </script>
  * ```

package/dist/page/esp-page.js

@@ -1,4 +1,4 @@
-var M=function(q,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(q,e,t,i);else for(var r=q.length-1;r>=0;r--)(o=q[r])&&(s=(a<3?o(s):a>3?o(e,t,s):o(e,t))||s);return a>3&&s&&Object.defineProperty(e,t,s),s};import{css as re,html as oe,nothing as ee}from"lit";import{customElement as ne,property as _,state as H}from"lit/decorators.js";import{classMap as le}from"lit/directives/class-map.js";import{createRef as R,ref as z}from"lit/directives/ref.js";import{EspalierElementBase as te}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 ie}from"../shared/raf-throttle.js";import{InlineBounds as pe,PaneProbes as U,probeWidth as de,WidthRange as G}from"./workspace-width.js";import{slotHasContent as ce}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";const ae='esp-footer, footer, [role~="contentinfo"]',ue="(max-width: 50em)",l=1,ge=5,me=12,ve=48,we=48,fe=16,ye=64,be=250,ke=250,We=40;let x=class extends te{constructor(){super(),this.dialogZone=R(),this.flyoutSlot=R(),this.footerSlot=R(),this.previewSlot=R(),this.previewSpace=R(),this.previewMinWidthProbe=R(),this.previewDefaultWidthProbe=R(),this.previewMaxWidthProbe=R(),this.previewProbes=new U(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=R(),this.flyoutDefaultWidthProbe=R(),this.flyoutMaxWidthProbe=R(),this.flyoutProbes=new U(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=R(),this.mainConfiguredMaxWidthProbe=R(),this.mainMaxWidthProbe=R(),this.mainProbes=new U(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=R(),this.resizeLargeStepProbe=R(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new ie(()=>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.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.workspaceRecenteringFrame=new ie(()=>this.applyWorkspaceRecentering()),this.pendingRecenterLeading=0,this.workspaceRecenteringTimer=null,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{if(t.button!==0||!this.separatorIsAvailable(e))return;const i=t.currentTarget,a=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,s=this.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize();const o=i.getBoundingClientRect(),r=this.holdWorkspacePosition();this.toggleAttribute("data-workspace-resizing",!0);const{leading:n,trailing:d}=this.workspaceLogicalGutterWidths(),m=d>l?n+d:0,p=d>l?Math.max(1,m/d):1;this.resizeSession={separator:e,pointerId:t.pointerId,target:i,startClientX:t.clientX,startPreviewWidth:s.previewWidth,startFlyoutWidth:s.flyoutWidth,startMainWidth:a,startNavigationAllowance:this.previewNavigationResizeAllowance(),startOuterGrowthCapacity:m,trailingExpansionScale:p,trailingGroupPushDelta:0,startHandleClientX:o.left+o.width/2,startLeadingGutterWidth:r,heldLeadingGutterWidth:r,direction:this.workspaceResizeDirection()};try{i.setPointerCapture?.(t.pointerId)}catch{}t.preventDefault()},this.onWorkspaceResizePointerMove=e=>{const t=this.resizeSession;if(!t||t.pointerId!==e.pointerId)return;e.preventDefault();const i=e.clientX-t.startClientX,a=i*t.direction,s=t.separator==="main-preview"||t.separator==="preview-flyout"&&!this.previewVisible;t.trailingGroupPushDelta=s&&a>0?Math.min(a,t.startOuterGrowthCapacity/t.trailingExpansionScale,this.mainResizeGrowthCapacity(t.startMainWidth)):0,this.applyWorkspaceResize(t.separator,i,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.startOuterGrowthCapacity,t.trailingExpansionScale,t.direction),this.align!=="start"&&!this.seedWorkspaceResizeLeadingGutter(t)&&this.trackWorkspaceResizePointer(t)},this.onWorkspaceResizePointerEnd=e=>{!this.resizeSession||this.resizeSession.pointerId!==e.pointerId||(e.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=e=>{this.hasAttribute("data-workspace-keyboard-adjusting")&&(e.relatedTarget instanceof Element&&e.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(e,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.separatorIsAvailable(e))return;t.preventDefault(),this.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const i=(t.key==="ArrowLeft"?-1:1)*this.resizeStep(t.shiftKey),a=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,s=this.renderedWorkspaceWidths();this.applyWorkspaceResize(e,i,"keyboard",s.previewWidth,s.flyoutWidth,a,this.previewNavigationResizeAllowance(),(()=>{const o=this.workspaceLogicalGutterWidths();return o.leading+o.trailing})(),1,this.workspaceResizeDirection())},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 a=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){a>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=a);continue}const s=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,a),t||=s===void 0||Math.abs(s-a)>.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("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.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){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=r=>{const n=r;return(typeof n.mode=="string"?n.mode:r.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=r=>{const n=r.open;return typeof n=="boolean"?n:r.hasAttribute("open")},a=r=>r.anchor!=null,s=r=>{const n=r.fullHeight;return typeof n=="boolean"?n:r.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(r=>r.tagName==="ESP-FLYOUT");for(const r of o){const n=r,d=typeof n.mode=="string"?n.mode:r.getAttribute("mode");n.pageOverlayRequested&&(!i(r)||d!=="auto")&&(n.pageOverlayRequested=!1)}o.some(r=>r.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(r=>i(r)&&!t(r))),this.toggleAttribute("flyout-overlay-open",o.some(r=>i(r)&&t(r))),this.toggleAttribute("flyout-anchored",o.some(r=>i(r)&&a(r))),this.flyoutFullHeightActive=o.some(r=>i(r)&&!t(r)&&s(r)),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,a=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),s=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return a&&(s==="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 a of this.assignedFlyouts()){const s=e&&i.has(a);a.pageOverlayRequested!==s&&(a.pageOverlayRequested=s,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(a=>a.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?ce(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 a=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",s=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return a!==i.id||s!=="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,a=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,s=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(a&&(a.previewCollapseRequested=!1),s&&(s.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await a?.updateComplete,await s?.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)})}scheduleWorkspaceSettlement(e=null){const t=()=>{this.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.previewSyncTask.then(()=>{const s=this.shadowRoot?.activeElement,o=this.ownerDocument.activeElement;!this.isConnected||!e.isConnected||s&&s!==e||o!==this&&o!==this.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},i=this.previewNavigationCollapseTask;if(!i){t();return}i.then(()=>t(),()=>t())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const t=this.hasAttribute("data-workspace-keyboard-adjusting");this.toggleAttribute("data-workspace-keyboard-adjusting",!1),t&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.shadowRoot?.activeElement,t=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(t)},be)}suspendPreviewLayoutForWorkspaceResize(){this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const a=Math.max(0,e),s=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${a}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${s}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=a,this.allocatedFlyoutWidth=s}clampWidth(e,t,i){return G.of(t,i).clamp(e)}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const a=window.visualViewport,s=a?.offsetLeft??0,o=a?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,s),i=Math.min(i,s+o));const r=this.getRootNode();let n=this.parentElement??(r instanceof ShadowRoot?r.host:null);for(;n;){const d=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(d)){const p=n.getBoundingClientRect();t=Math.max(t,p.left),i=Math.min(i,p.right)}const m=n.getRootNode();n=n.parentElement??(m instanceof ShadowRoot?m.host:null)}return new pe(t,i)}probeWidth(e){return de(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 a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-a-s-Math.max(0,i));return this.workspaceWidthCapacityForAvailable(o,e,t)}workspaceWidthCapacityForAvailable(e,t,i){const a=Math.max(0,e),s=i>0?Math.min(a,i):a;return{natural:Math.max(0,a-s),maximum:Math.max(0,a-Math.max(0,t))}}workspaceTargetWidth(e,t,i){return Math.min(e.maximum,Math.max(t,i,e.natural))}allocateWorkspaceWidths(e,t,i,a,s,o,r,n=null,d=null){const m=Math.max(0,e),p=Math.max(0,a),u=Math.max(p,s),y=Math.max(0,o),W=Math.max(y,r),v=t?this.preferredPreviewWidth??(n===null?null:this.clampWidth(n,p,u)):null,w=i?this.preferredFlyoutWidth??(d===null?null:this.clampWidth(d,y,W)):null;let c=0,h=0;t&&i?(c=Math.min(u,Math.max(p,m-y)),h=Math.min(W,Math.max(y,m-c))):t?c=Math.min(u,Math.max(p,m)):i&&(h=Math.min(W,Math.max(y,m))),t&&v!==null&&(c=this.clampWidth(v,p,u),i&&w===null&&(h=this.clampWidth(m-c,y,W))),i&&w!==null&&(h=this.clampWidth(w,y,W),t&&v===null&&(c=this.clampWidth(m-h,p,u)));let b=c+h-m;if(b>0&&i){const P=Math.min(b,Math.max(0,h-y));h-=P,b-=P}return b>0&&t&&(c-=Math.min(b,Math.max(0,c-p))),{previewWidth:c,flyoutWidth:h}}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(),a=t.getBoundingClientRect(),s=this.workspaceResizeDirection()===1?i.right-a.right:a.left-i.left;return{leading:e,trailing:Math.max(0,s)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const a=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,s=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(a)),r=Math.max(o,this.probeWidth(s));return G.of(o,r).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?ye:fe}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 a=this.previewProbes.minimum,s=this.previewProbes.maximum,o=this.mainProbes.minimum,r=Math.max(0,t+e),n=Math.max(0,r+i-o);return G.of(a,Math.max(a,Math.min(s,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,a=this.previewProbes.maximum,s=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,r=e+t;return G.of(Math.max(i,r-o),Math.max(i,Math.min(a,r-s)))}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,a=this.flyoutProbes.maximum,s=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),r=Math.max(0,t+e),n=o>0?Math.max(0,r-o):0,d=Math.max(i,n);return G.of(d,Math.min(a,r-s))}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)}applyWorkspaceResize(e,t,i,a,s,o,r,n,d,m){if(!this.separatorIsAvailable(e))return;const p=t*m,u=n/d,y=e==="main-preview"||e==="preview-flyout"&&!this.previewVisible,W=i==="pointer"&&y&&p>0?Math.min(p,u,this.mainResizeGrowthCapacity(o)):0;let v=e,w=a,c=s;if(e==="preview-end"||e==="flyout-end"){const h=e==="preview-end"?a:s,b=this.trailingPaneResizeRange(e,h,n),P=h+(p>0?p*d:p),C=b.clamp(P);e==="preview-end"?(w=C,this.preferredPreviewWidth=C):(c=C,this.preferredFlyoutWidth=C)}else if(e==="main-preview"){const h=this.mainPreviewResizeRange(a,o,r),b=a-(p-W);w=h.clamp(b),this.preferredPreviewWidth=w;const P=this.mainProbes.minimum,C=this.probeWidth(this.mainMaxWidthProbe),k=this.mainTrackUnbounded()?0:C,g=this.workspaceWidthCapacity(P,k);r>0&&w+c>g.natural+l&&this.requestPreviewNavigationCollapse();const F=this.previewProbes.minimum,A=Math.max(0,F-b),E=h.min<=F+l;if(A>0&&E&&s>0){const O=this.flyoutProbes.minimum,L=this.flyoutProbes.maximum;c=this.clampWidth(s-A,O,L),this.preferredFlyoutWidth=c}else s>0&&(this.preferredFlyoutWidth??=s)}else if(!this.previewVisible)v="main-flyout",c=this.flyoutOnlyResizeRange(s,o).clamp(s-(p-W)),w=0,this.preferredFlyoutWidth=c;else{const h=this.previewProbes.minimum,b=this.previewProbes.maximum,P=this.flyoutProbes.minimum,C=this.flyoutProbes.maximum;if(p>=0){const k=Math.max(0,s-P),g=Math.min(p,u),F=Math.max(0,p-g),A=g*d+F,E=k+n;w=this.clampWidth(a+A,h,Math.min(b,a+E));const O=Math.max(0,w-a),L=Math.min(O,n);c=s-Math.min(Math.max(0,O-L),k)}else{const k=this.previewFlyoutResizeRange(a,s),g=a+p;w=k.clamp(g),c=a+s-w;const F=Math.max(0,h-g),A=k.min<=h+l;if(F>0&&A){const E=this.mainProbes.minimum,O=Math.max(0,o-E);c=this.clampWidth(c+Math.min(F,O),P,C)}}this.preferredPreviewWidth=w,this.preferredFlyoutWidth=c}this.setWorkspaceWidths(w,c,!0),this.requestUpdate(),this.previewVisible&&this.setPreviewLayoutState(!0,!0),i==="keyboard"&&(this.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.dispatchEvent(new CustomEvent("esp-page-workspace-resize",{bubbles:!0,composed:!0,detail:{separator:v,source:i,previewWidth:w,flyoutWidth:c}}))}appliedSeparatorInlineDelta(e){if(e.separator==="preview-end"){const a=this.allocatedPreviewWidth-e.startPreviewWidth;return a>0?a/e.trailingExpansionScale:a}if(e.separator==="flyout-end"){const a=this.allocatedFlyoutWidth-e.startFlyoutWidth;return a>0?a/e.trailingExpansionScale:a}if(e.separator==="main-preview")return e.trailingGroupPushDelta+e.startPreviewWidth-this.allocatedPreviewWidth+(e.startFlyoutWidth-this.allocatedFlyoutWidth);const t=e.startFlyoutWidth-this.allocatedFlyoutWidth;if(!this.previewVisible)return e.trailingGroupPushDelta+t;if(this.allocatedPreviewWidth<e.startPreviewWidth)return t;const i=Math.max(0,this.allocatedPreviewWidth+this.allocatedFlyoutWidth-e.startPreviewWidth-e.startFlyoutWidth);return t+i/e.trailingExpansionScale}clearWorkspaceRecenteringState(){this.workspaceRecenteringFrame.cancel(),this.workspaceRecenteringTimer!==null&&(clearTimeout(this.workspaceRecenteringTimer),this.workspaceRecenteringTimer=null),this.toggleAttribute("data-workspace-position-held",!1),this.style.removeProperty("--_esp-page-resize-leading-gutter-width")}holdWorkspacePosition(){const e=this.workspaceLogicalGutterWidths().leading;return this.clearWorkspaceRecenteringState(),this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e}px`),this.toggleAttribute("data-workspace-position-held",!0),e}trackWorkspaceResizePointer(e){const t=e.startHandleClientX+this.appliedSeparatorInlineDelta(e)*e.direction;for(let i=0;i<3;i+=1){const a=e.target.getBoundingClientRect(),s=a.left+a.width/2,o=(t-s)*e.direction;if(Math.abs(o)<=.25)return;const r=Math.max(0,e.heldLeadingGutterWidth+o);if(Math.abs(r-e.heldLeadingGutterWidth)<=.25)return;e.heldLeadingGutterWidth=r,this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`)}}seedWorkspaceResizeLeadingGutter(e){if(this.align==="start")return!1;const t=this.appliedSeparatorInlineDelta(e);if(t<=0)return!1;let i=0;if(e.separator==="preview-end"||e.separator==="flyout-end")i=this.allocatedPreviewWidth-e.startPreviewWidth+this.allocatedFlyoutWidth-e.startFlyoutWidth;else if(e.separator==="preview-flyout"&&this.previewVisible)i=this.allocatedPreviewWidth-e.startPreviewWidth;else{const a=Math.max(0,e.startPreviewWidth-this.allocatedPreviewWidth+e.startFlyoutWidth-this.allocatedFlyoutWidth),s=this.probeWidth(this.mainMaxWidthProbe),o=this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,s-e.startMainWidth);i=Math.min(e.trailingGroupPushDelta+a,o)}return e.heldLeadingGutterWidth=Math.max(0,e.startLeadingGutterWidth+t-i),this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`),!0}finishWorkspaceRecentering(){this.clearWorkspaceRecenteringState(),this.syncTrailingWorkspaceResizeAvailability(),this.isConnected&&this.scheduleWorkspaceSettlement()}beginWorkspaceRecentering(){const e=this.workspaceLogicalGutterWidths(),t=e.leading+e.trailing,i=this.align==="center"?t/2:this.align==="end"?t:0;if(Math.abs(i-e.leading)<=l){this.finishWorkspaceRecentering();return}this.pendingRecenterLeading=i,this.workspaceRecenteringFrame.restart()}applyWorkspaceRecentering(){this.resizeSession||!this.hasAttribute("data-workspace-position-held")||(this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${this.pendingRecenterLeading}px`),this.workspaceRecenteringTimer=setTimeout(()=>this.finishWorkspaceRecentering(),ke+We))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.beginWorkspaceRecentering()}previewFitsWithinPage(e,t,i,a,s,o){const r=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),d=this.shadowRoot?.querySelector(".esp-page-flyout");if(!r||!n||!d)return!1;const m=this.visiblePageInlineBounds(),p=r.getBoundingClientRect(),u=n.getBoundingClientRect(),y=d.getBoundingClientRect(),W=Math.max(t,i),v=Math.max(s,o),w=u.width+l>=t&&u.width<=W+l,c=!a||y.width+l>=s&&y.width<=v+l,h=u.left+l>=m.left&&u.right<=m.right+l&&(!a||y.left+l>=m.left&&y.right<=m.right+l),b=getComputedStyle(this).direction==="rtl"?p.left+l>=u.right&&(!a||u.left+l>=y.right):p.right<=u.left+l&&(!a||u.right<=y.left+l);return p.width+l>=e&&w&&c&&h&&b}flyoutFitsWithinPage(e,t,i){const a=this.shadowRoot?.querySelector(".esp-page-main"),s=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!s)return!1;const o=this.visiblePageInlineBounds(),r=a.getBoundingClientRect(),n=s.getBoundingClientRect(),d=Math.max(t,i),m=n.width+l>=t&&n.width<=d+l,p=n.left+l>=o.left&&n.right<=o.right+l,u=getComputedStyle(this).direction==="rtl"?r.left+l>=n.right:r.right<=n.left+l;return r.width+l>=e&&m&&p&&u}workspaceMinimumsCanFit(e,t,i,a,s){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||a&&s<=0)return!1;const r=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,m=(t&&this.getPreviewNavigationPair()!==null?0:r)+n+e+(t?i:0)+(a?s:0);return o+l>=m}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),a=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,a?.left??0,a?.right??0,a?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,a)=>Math.abs(i-(t[a]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,a=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||a>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let a=null,s=0;for(let o=0;o<me;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){a=null,s=0;continue}const r=this.workspaceGeometrySample();if(s=a&&this.workspaceGeometryMatches(a,r)?s+1:1,s>=ge)return!1;a=r}return null}async promoteFlyoutIfClipped(e,t,i,a){if(i<=0)return!1;const s=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,a),()=>this.workspaceCandidateIsMeasurable(!1,!0));return s===null?!0:s?!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 a=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const s=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,r=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),d=this.hasAttribute("data-preview-navigation-collapsed"),m=this.getPreviewNavigationPair(),p=m===null?0:d?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,u=this.probeWidth(this.previewMinWidthProbe),y=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),W=this.probeWidth(this.previewMaxWidthProbe),v=this.probeWidth(this.flyoutMinWidthProbe),w=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),c=this.probeWidth(this.flyoutMaxWidthProbe),h=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const b=this.probeWidth(this.mainMaxWidthProbe),P=this.mainTrackUnbounded()?0:b,C=this.openAutoFlyouts().some(S=>S.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),C){const S=this.visiblePageInlineBounds().width,T=this.flyoutOverlayPromotionWidth===null||S>=this.flyoutOverlayPromotionWidth+ve;!o&&t&&this.flyoutOverlayRecoveryReady&&T&&this.workspaceMinimumsCanFit(h,s,u,!0,v)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const k=s&&!o&&!r,g=n&&!o;if(h>0&&(!k||u>0)&&(!g||v>0)&&(k||g)&&!this.workspaceMinimumsCanFit(h,k,u,g,v)){g&&await this.promoteFlyoutToOverlay();return}const A=(k?u:0)+(g?v:0),L=k&&this.preferredPreviewWidth!==null||g&&this.preferredFlyoutWidth!==null||(k&&y!==null||g&&w!==null),j=(k?this.preferredPreviewWidth===null?u:this.clampWidth(this.preferredPreviewWidth,u,W):0)+(g?this.preferredFlyoutWidth===null?v:this.clampWidth(this.preferredFlyoutWidth,v,c):0),f=S=>{const T=this.workspaceTargetWidth(S,A,j),B=this.allocateWorkspaceWidths(T,k,g,u,W,v,c,y,w),K=S.maximum+h,Z=Math.max(0,K-S.natural),se=B.previewWidth+B.flyoutWidth,J=Math.max(0,Math.min(Z,K-se));return{allocation:B,mainWidth:J,reclaimsMain:J+l<Z}},D=(S,T)=>Math.abs(S.mainWidth-T.mainWidth)>l||Math.abs(S.allocation.previewWidth-T.allocation.previewWidth)>l||Math.abs(S.allocation.flyoutWidth-T.allocation.flyoutWidth)>l,V=this.workspaceWidthCapacity(h,P,d?p:0),I=f(V);let $=I.allocation;if(this.setWorkspaceWidths($.previewWidth,$.flyoutWidth,L),!k||u<=0){g&&await this.promoteFlyoutIfClipped(e,h,v,c);return}if(m!==null&&p>l){const S=V.maximum+h,T=this.workspaceWidthCapacityForAvailable(S+p,h,P),B=f(T);(d?D(f(this.workspaceWidthCapacityForAvailable(Math.max(0,S-we),h,P)),B):I.reclaimsMain&&D(I,B))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const Y=this.workspaceWidthCapacity(h,P);if(Y.maximum+l<A){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,g?v:0),i=!1,g&&await this.promoteFlyoutToOverlay();return}const X=f(Y);if($=X.allocation,this.setWorkspaceWidths($.previewWidth,$.flyoutWidth,L),a||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,X.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const Q=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(h,u,W,g,v,c),()=>this.workspaceCandidateIsMeasurable(!0,g));if(Q===null)return;Q?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,g?v:0),i=!1,g&&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(ue),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(ae)||e.querySelector(ae)!==null}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()}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.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(),a=this.previewProbes.minimum,s=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,r=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),d=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,m=this.hasAttribute("flyout-open"),p=d+this.allocatedPreviewWidth,u=i.min<=a+l,y=m&&u?Math.max(0,this.allocatedFlyoutWidth-s):0,W=Math.max(r,p-i.max),v=Math.max(W,Math.max(r,p-i.min)+y),w=n>0?Math.max(W,Math.min(Math.max(r,n),v)):v,c=n>0&&d+l>=n?`${Math.round(d)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:ee;let h,b;if(this.previewVisible){const f=this.previewFlyoutResizeRange(),D=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,I=f.min<=a+l?Math.max(0,d-r):0;h=Math.max(s,D-f.max),b=Math.max(h,Math.min(o,D-f.min+I))}else{const f=this.flyoutOnlyResizeRange();h=f.min,b=f.max}const P=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",C=this.previewVisible?"Resize preview and help panes":"Resize help pane",k=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,g=m?"flyout-end":"preview-end",F=g==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,A=this.workspaceLogicalGutterWidths(),E=this.trailingPaneResizeRange(g,F,A.leading+A.trailing),O=g==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",L=g==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return oe`
+var M=function(q,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(q,e,t,i);else for(var r=q.length-1;r>=0;r--)(o=q[r])&&(s=(a<3?o(s):a>3?o(e,t,s):o(e,t))||s);return a>3&&s&&Object.defineProperty(e,t,s),s};import{css as re,html as oe,nothing as ee}from"lit";import{customElement as ne,property as _,state as H}from"lit/decorators.js";import{classMap as le}from"lit/directives/class-map.js";import{createRef as R,ref as z}from"lit/directives/ref.js";import{EspalierElementBase as te}from"../shared/esp-element-base.js";import{ESP_EVENTS as he}from"../shared/events.js";import{BiDirectionalStickyController as N}from"./bi-directional-sticky-controller.js";import{getEspBus as pe}from"../shared/bus-events.js";import{RafThrottle as ie}from"../shared/raf-throttle.js";import{InlineBounds as de,PaneProbes as U,probeWidth as ce,WidthRange as G}from"./workspace-width.js";import{slotHasContent as ue}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";const ae='esp-footer, footer, [role~="contentinfo"]',ge="(max-width: 50em)",l=1,me=5,ve=12,we=48,fe=48,ye=16,be=64,ke=250,We=250,xe=40;let x=class extends te{constructor(){super(),this.dialogZone=R(),this.flyoutSlot=R(),this.footerSlot=R(),this.previewSlot=R(),this.previewSpace=R(),this.previewMinWidthProbe=R(),this.previewDefaultWidthProbe=R(),this.previewMaxWidthProbe=R(),this.previewProbes=new U(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=R(),this.flyoutDefaultWidthProbe=R(),this.flyoutMaxWidthProbe=R(),this.flyoutProbes=new U(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=R(),this.mainConfiguredMaxWidthProbe=R(),this.mainMaxWidthProbe=R(),this.mainProbes=new U(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=R(),this.resizeLargeStepProbe=R(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new ie(()=>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.resizeSession=null,this.workspaceKeyboardSettlementTimer=null,this.workspaceRecenteringFrame=new ie(()=>this.applyWorkspaceRecentering()),this.pendingRecenterLeading=0,this.workspaceRecenteringTimer=null,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{if(t.button!==0||!this.separatorIsAvailable(e))return;const i=t.currentTarget,a=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,s=this.renderedWorkspaceWidths();this.endWorkspaceResize(),this.finishWorkspaceKeyboardResize(!1),this.suspendPreviewLayoutForWorkspaceResize();const o=i.getBoundingClientRect(),r=this.holdWorkspacePosition();this.toggleAttribute("data-workspace-resizing",!0);const{leading:n,trailing:d}=this.workspaceLogicalGutterWidths(),m=d>l?n+d:0,p=d>l?Math.max(1,m/d):1;this.resizeSession={separator:e,pointerId:t.pointerId,target:i,startClientX:t.clientX,startPreviewWidth:s.previewWidth,startFlyoutWidth:s.flyoutWidth,startMainWidth:a,startNavigationAllowance:this.previewNavigationResizeAllowance(),startOuterGrowthCapacity:m,trailingExpansionScale:p,trailingGroupPushDelta:0,startHandleClientX:o.left+o.width/2,startLeadingGutterWidth:r,heldLeadingGutterWidth:r,direction:this.workspaceResizeDirection()};try{i.setPointerCapture?.(t.pointerId)}catch{}t.preventDefault()},this.onWorkspaceResizePointerMove=e=>{const t=this.resizeSession;if(!t||t.pointerId!==e.pointerId)return;e.preventDefault();const i=e.clientX-t.startClientX,a=i*t.direction,s=t.separator==="main-preview"||t.separator==="preview-flyout"&&!this.previewVisible;t.trailingGroupPushDelta=s&&a>0?Math.min(a,t.startOuterGrowthCapacity/t.trailingExpansionScale,this.mainResizeGrowthCapacity(t.startMainWidth)):0,this.applyWorkspaceResize(t.separator,i,"pointer",t.startPreviewWidth,t.startFlyoutWidth,t.startMainWidth,t.startNavigationAllowance,t.startOuterGrowthCapacity,t.trailingExpansionScale,t.direction),this.align!=="start"&&!this.seedWorkspaceResizeLeadingGutter(t)&&this.trackWorkspaceResizePointer(t)},this.onWorkspaceResizePointerEnd=e=>{!this.resizeSession||this.resizeSession.pointerId!==e.pointerId||(e.preventDefault(),this.endWorkspaceResize())},this.onWorkspaceResizeBlur=e=>{this.hasAttribute("data-workspace-keyboard-adjusting")&&(e.relatedTarget instanceof Element&&e.relatedTarget.classList.contains("esp-page-workspace-resize-handle")||this.finishWorkspaceKeyboardResize())},this.onWorkspaceResizeKeyDown=(e,t)=>{if(t.key!=="ArrowLeft"&&t.key!=="ArrowRight"||!this.separatorIsAvailable(e))return;t.preventDefault(),this.hasAttribute("data-workspace-keyboard-adjusting")||this.suspendPreviewLayoutForWorkspaceResize();const i=(t.key==="ArrowLeft"?-1:1)*this.resizeStep(t.shiftKey),a=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,s=this.renderedWorkspaceWidths();this.applyWorkspaceResize(e,i,"keyboard",s.previewWidth,s.flyoutWidth,a,this.previewNavigationResizeAllowance(),(()=>{const o=this.workspaceLogicalGutterWidths();return o.leading+o.trailing})(),1,this.workspaceResizeDirection())},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 a=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){a>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=a);continue}const s=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,a),t||=s===void 0||Math.abs(s-a)>.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.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){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=r=>{const n=r;return(typeof n.mode=="string"?n.mode:r.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=r=>{const n=r.open;return typeof n=="boolean"?n:r.hasAttribute("open")},a=r=>r.anchor!=null,s=r=>{const n=r.fullHeight;return typeof n=="boolean"?n:r.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(r=>r.tagName==="ESP-FLYOUT");for(const r of o){const n=r,d=typeof n.mode=="string"?n.mode:r.getAttribute("mode");n.pageOverlayRequested&&(!i(r)||d!=="auto")&&(n.pageOverlayRequested=!1)}o.some(r=>r.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(r=>i(r)&&!t(r))),this.toggleAttribute("flyout-overlay-open",o.some(r=>i(r)&&t(r))),this.toggleAttribute("flyout-anchored",o.some(r=>i(r)&&a(r))),this.flyoutFullHeightActive=o.some(r=>i(r)&&!t(r)&&s(r)),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,a=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),s=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return a&&(s==="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 a of this.assignedFlyouts()){const s=e&&i.has(a);a.pageOverlayRequested!==s&&(a.pageOverlayRequested=s,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(a=>a.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?ue(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 a=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",s=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return a!==i.id||s!=="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,a=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,s=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(a&&(a.previewCollapseRequested=!1),s&&(s.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await a?.updateComplete,await s?.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)})}scheduleWorkspaceSettlement(e=null){const t=()=>{this.schedulePreviewLayout(),e&&requestAnimationFrame(()=>{this.previewSyncTask.then(()=>{const s=this.shadowRoot?.activeElement,o=this.ownerDocument.activeElement;!this.isConnected||!e.isConnected||s&&s!==e||o!==this&&o!==this.ownerDocument.body||getComputedStyle(e).display!=="none"&&e.focus({preventScroll:!0})})})},i=this.previewNavigationCollapseTask;if(!i){t();return}i.then(()=>t(),()=>t())}clearWorkspaceKeyboardSettlementTimer(){this.workspaceKeyboardSettlementTimer!==null&&(clearTimeout(this.workspaceKeyboardSettlementTimer),this.workspaceKeyboardSettlementTimer=null)}finishWorkspaceKeyboardResize(e=!0){this.clearWorkspaceKeyboardSettlementTimer();const t=this.hasAttribute("data-workspace-keyboard-adjusting");this.toggleAttribute("data-workspace-keyboard-adjusting",!1),t&&e&&!this.resizeSession&&this.scheduleWorkspaceSettlement()}deferWorkspaceKeyboardSettlement(){this.clearWorkspaceKeyboardSettlementTimer(),this.workspaceKeyboardSettlementTimer=setTimeout(()=>{if(this.workspaceKeyboardSettlementTimer=null,!this.hasAttribute("data-workspace-keyboard-adjusting"))return;const e=this.shadowRoot?.activeElement,t=e instanceof HTMLElement&&e.classList.contains("esp-page-workspace-resize-handle")?e:null;this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.resizeSession||this.scheduleWorkspaceSettlement(t)},ke)}suspendPreviewLayoutForWorkspaceResize(){this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const a=Math.max(0,e),s=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${a}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${s}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=a,this.allocatedFlyoutWidth=s}clampWidth(e,t,i){return G.of(t,i).clamp(e)}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const a=window.visualViewport,s=a?.offsetLeft??0,o=a?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,s),i=Math.min(i,s+o));const r=this.getRootNode();let n=this.parentElement??(r instanceof ShadowRoot?r.host:null);for(;n;){const d=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(d)){const p=n.getBoundingClientRect();t=Math.max(t,p.left),i=Math.min(i,p.right)}const m=n.getRootNode();n=n.parentElement??(m instanceof ShadowRoot?m.host:null)}return new de(t,i)}probeWidth(e){return ce(e)}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}syncMainMaximumConfiguration(){const e=getComputedStyle(this).getPropertyValue("--esp-page-main-max-width").trim()!=="";this.toggleAttribute("data-main-max-configured",e)}workspaceWidthCapacity(e,t,i=0){const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-a-s-Math.max(0,i));return this.workspaceWidthCapacityForAvailable(o,e,t)}workspaceWidthCapacityForAvailable(e,t,i){const a=Math.max(0,e),s=i>0?Math.min(a,i):a;return{natural:Math.max(0,a-s),maximum:Math.max(0,a-Math.max(0,t))}}workspaceTargetWidth(e,t,i){return Math.min(e.maximum,Math.max(t,i,e.natural))}allocateWorkspaceWidths(e,t,i,a,s,o,r,n=null,d=null){const m=Math.max(0,e),p=Math.max(0,a),u=Math.max(p,s),y=Math.max(0,o),W=Math.max(y,r),v=t?this.preferredPreviewWidth??(n===null?null:this.clampWidth(n,p,u)):null,w=i?this.preferredFlyoutWidth??(d===null?null:this.clampWidth(d,y,W)):null;let c=0,h=0;t&&i?(c=Math.min(u,Math.max(p,m-y)),h=Math.min(W,Math.max(y,m-c))):t?c=Math.min(u,Math.max(p,m)):i&&(h=Math.min(W,Math.max(y,m))),t&&v!==null&&(c=this.clampWidth(v,p,u),i&&w===null&&(h=this.clampWidth(m-c,y,W))),i&&w!==null&&(h=this.clampWidth(w,y,W),t&&v===null&&(c=this.clampWidth(m-h,p,u)));let b=c+h-m;if(b>0&&i){const P=Math.min(b,Math.max(0,h-y));h-=P,b-=P}return b>0&&t&&(c-=Math.min(b,Math.max(0,c-p))),{previewWidth:c,flyoutWidth:h}}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(),a=t.getBoundingClientRect(),s=this.workspaceResizeDirection()===1?i.right-a.right:a.left-i.left;return{leading:e,trailing:Math.max(0,s)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const a=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,s=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(a)),r=Math.max(o,this.probeWidth(s));return G.of(o,r).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?be:ye}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 a=this.previewProbes.minimum,s=this.previewProbes.maximum,o=this.mainProbes.minimum,r=Math.max(0,t+e),n=Math.max(0,r+i-o);return G.of(a,Math.max(a,Math.min(s,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,a=this.previewProbes.maximum,s=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,r=e+t;return G.of(Math.max(i,r-o),Math.max(i,Math.min(a,r-s)))}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,a=this.flyoutProbes.maximum,s=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),r=Math.max(0,t+e),n=o>0?Math.max(0,r-o):0,d=Math.max(i,n);return G.of(d,Math.min(a,r-s))}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)}applyWorkspaceResize(e,t,i,a,s,o,r,n,d,m){if(!this.separatorIsAvailable(e))return;const p=t*m,u=n/d,y=e==="main-preview"||e==="preview-flyout"&&!this.previewVisible,W=i==="pointer"&&y&&p>0?Math.min(p,u,this.mainResizeGrowthCapacity(o)):0;let v=e,w=a,c=s;if(e==="preview-end"||e==="flyout-end"){const h=e==="preview-end"?a:s,b=this.trailingPaneResizeRange(e,h,n),P=h+(p>0?p*d:p),C=b.clamp(P);e==="preview-end"?(w=C,this.preferredPreviewWidth=C):(c=C,this.preferredFlyoutWidth=C)}else if(e==="main-preview"){const h=this.mainPreviewResizeRange(a,o,r),b=a-(p-W);w=h.clamp(b),this.preferredPreviewWidth=w;const P=this.mainProbes.minimum,C=this.probeWidth(this.mainMaxWidthProbe),k=this.mainTrackUnbounded()?0:C,g=this.workspaceWidthCapacity(P,k);r>0&&w+c>g.natural+l&&this.requestPreviewNavigationCollapse();const F=this.previewProbes.minimum,A=Math.max(0,F-b),E=h.min<=F+l;if(A>0&&E&&s>0){const O=this.flyoutProbes.minimum,L=this.flyoutProbes.maximum;c=this.clampWidth(s-A,O,L),this.preferredFlyoutWidth=c}else s>0&&(this.preferredFlyoutWidth??=s)}else if(!this.previewVisible)v="main-flyout",c=this.flyoutOnlyResizeRange(s,o).clamp(s-(p-W)),w=0,this.preferredFlyoutWidth=c;else{const h=this.previewProbes.minimum,b=this.previewProbes.maximum,P=this.flyoutProbes.minimum,C=this.flyoutProbes.maximum;if(p>=0){const k=Math.max(0,s-P),g=Math.min(p,u),F=Math.max(0,p-g),A=g*d+F,E=k+n;w=this.clampWidth(a+A,h,Math.min(b,a+E));const O=Math.max(0,w-a),L=Math.min(O,n);c=s-Math.min(Math.max(0,O-L),k)}else{const k=this.previewFlyoutResizeRange(a,s),g=a+p;w=k.clamp(g),c=a+s-w;const F=Math.max(0,h-g),A=k.min<=h+l;if(F>0&&A){const E=this.mainProbes.minimum,O=Math.max(0,o-E);c=this.clampWidth(c+Math.min(F,O),P,C)}}this.preferredPreviewWidth=w,this.preferredFlyoutWidth=c}this.setWorkspaceWidths(w,c,!0),this.requestUpdate(),this.previewVisible&&this.setPreviewLayoutState(!0,!0),i==="keyboard"&&(this.toggleAttribute("data-workspace-keyboard-adjusting",!0),this.deferWorkspaceKeyboardSettlement()),this.dispatchEvent(new CustomEvent(he.PAGE_WORKSPACE_RESIZE,{bubbles:!0,composed:!0,detail:{separator:v,source:i,previewWidth:w,flyoutWidth:c}}))}appliedSeparatorInlineDelta(e){if(e.separator==="preview-end"){const a=this.allocatedPreviewWidth-e.startPreviewWidth;return a>0?a/e.trailingExpansionScale:a}if(e.separator==="flyout-end"){const a=this.allocatedFlyoutWidth-e.startFlyoutWidth;return a>0?a/e.trailingExpansionScale:a}if(e.separator==="main-preview")return e.trailingGroupPushDelta+e.startPreviewWidth-this.allocatedPreviewWidth+(e.startFlyoutWidth-this.allocatedFlyoutWidth);const t=e.startFlyoutWidth-this.allocatedFlyoutWidth;if(!this.previewVisible)return e.trailingGroupPushDelta+t;if(this.allocatedPreviewWidth<e.startPreviewWidth)return t;const i=Math.max(0,this.allocatedPreviewWidth+this.allocatedFlyoutWidth-e.startPreviewWidth-e.startFlyoutWidth);return t+i/e.trailingExpansionScale}clearWorkspaceRecenteringState(){this.workspaceRecenteringFrame.cancel(),this.workspaceRecenteringTimer!==null&&(clearTimeout(this.workspaceRecenteringTimer),this.workspaceRecenteringTimer=null),this.toggleAttribute("data-workspace-position-held",!1),this.style.removeProperty("--_esp-page-resize-leading-gutter-width")}holdWorkspacePosition(){const e=this.workspaceLogicalGutterWidths().leading;return this.clearWorkspaceRecenteringState(),this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e}px`),this.toggleAttribute("data-workspace-position-held",!0),e}trackWorkspaceResizePointer(e){const t=e.startHandleClientX+this.appliedSeparatorInlineDelta(e)*e.direction;for(let i=0;i<3;i+=1){const a=e.target.getBoundingClientRect(),s=a.left+a.width/2,o=(t-s)*e.direction;if(Math.abs(o)<=.25)return;const r=Math.max(0,e.heldLeadingGutterWidth+o);if(Math.abs(r-e.heldLeadingGutterWidth)<=.25)return;e.heldLeadingGutterWidth=r,this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`)}}seedWorkspaceResizeLeadingGutter(e){if(this.align==="start")return!1;const t=this.appliedSeparatorInlineDelta(e);if(t<=0)return!1;let i=0;if(e.separator==="preview-end"||e.separator==="flyout-end")i=this.allocatedPreviewWidth-e.startPreviewWidth+this.allocatedFlyoutWidth-e.startFlyoutWidth;else if(e.separator==="preview-flyout"&&this.previewVisible)i=this.allocatedPreviewWidth-e.startPreviewWidth;else{const a=Math.max(0,e.startPreviewWidth-this.allocatedPreviewWidth+e.startFlyoutWidth-this.allocatedFlyoutWidth),s=this.probeWidth(this.mainMaxWidthProbe),o=this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,s-e.startMainWidth);i=Math.min(e.trailingGroupPushDelta+a,o)}return e.heldLeadingGutterWidth=Math.max(0,e.startLeadingGutterWidth+t-i),this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${e.heldLeadingGutterWidth}px`),!0}finishWorkspaceRecentering(){this.clearWorkspaceRecenteringState(),this.syncTrailingWorkspaceResizeAvailability(),this.isConnected&&this.scheduleWorkspaceSettlement()}beginWorkspaceRecentering(){const e=this.workspaceLogicalGutterWidths(),t=e.leading+e.trailing,i=this.align==="center"?t/2:this.align==="end"?t:0;if(Math.abs(i-e.leading)<=l){this.finishWorkspaceRecentering();return}this.pendingRecenterLeading=i,this.workspaceRecenteringFrame.restart()}applyWorkspaceRecentering(){this.resizeSession||!this.hasAttribute("data-workspace-position-held")||(this.style.setProperty("--_esp-page-resize-leading-gutter-width",`${this.pendingRecenterLeading}px`),this.workspaceRecenteringTimer=setTimeout(()=>this.finishWorkspaceRecentering(),We+xe))}endWorkspaceResize(){const e=this.resizeSession;this.resizeSession=null,this.toggleAttribute("data-workspace-resizing",!1),e?.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),e&&this.beginWorkspaceRecentering()}previewFitsWithinPage(e,t,i,a,s,o){const r=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),d=this.shadowRoot?.querySelector(".esp-page-flyout");if(!r||!n||!d)return!1;const m=this.visiblePageInlineBounds(),p=r.getBoundingClientRect(),u=n.getBoundingClientRect(),y=d.getBoundingClientRect(),W=Math.max(t,i),v=Math.max(s,o),w=u.width+l>=t&&u.width<=W+l,c=!a||y.width+l>=s&&y.width<=v+l,h=u.left+l>=m.left&&u.right<=m.right+l&&(!a||y.left+l>=m.left&&y.right<=m.right+l),b=getComputedStyle(this).direction==="rtl"?p.left+l>=u.right&&(!a||u.left+l>=y.right):p.right<=u.left+l&&(!a||u.right<=y.left+l);return p.width+l>=e&&w&&c&&h&&b}flyoutFitsWithinPage(e,t,i){const a=this.shadowRoot?.querySelector(".esp-page-main"),s=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!s)return!1;const o=this.visiblePageInlineBounds(),r=a.getBoundingClientRect(),n=s.getBoundingClientRect(),d=Math.max(t,i),m=n.width+l>=t&&n.width<=d+l,p=n.left+l>=o.left&&n.right<=o.right+l,u=getComputedStyle(this).direction==="rtl"?r.left+l>=n.right:r.right<=n.left+l;return r.width+l>=e&&m&&p&&u}workspaceMinimumsCanFit(e,t,i,a,s){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||a&&s<=0)return!1;const r=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,m=(t&&this.getPreviewNavigationPair()!==null?0:r)+n+e+(t?i:0)+(a?s:0);return o+l>=m}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),a=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,a?.left??0,a?.right??0,a?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,a)=>Math.abs(i-(t[a]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,a=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||a>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let a=null,s=0;for(let o=0;o<ve;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){a=null,s=0;continue}const r=this.workspaceGeometrySample();if(s=a&&this.workspaceGeometryMatches(a,r)?s+1:1,s>=me)return!1;a=r}return null}async promoteFlyoutIfClipped(e,t,i,a){if(i<=0)return!1;const s=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,a),()=>this.workspaceCandidateIsMeasurable(!1,!0));return s===null?!0:s?!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 a=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const s=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,r=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),d=this.hasAttribute("data-preview-navigation-collapsed"),m=this.getPreviewNavigationPair(),p=m===null?0:d?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,u=this.probeWidth(this.previewMinWidthProbe),y=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),W=this.probeWidth(this.previewMaxWidthProbe),v=this.probeWidth(this.flyoutMinWidthProbe),w=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),c=this.probeWidth(this.flyoutMaxWidthProbe),h=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const b=this.probeWidth(this.mainMaxWidthProbe),P=this.mainTrackUnbounded()?0:b,C=this.openAutoFlyouts().some(S=>S.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),C){const S=this.visiblePageInlineBounds().width,T=this.flyoutOverlayPromotionWidth===null||S>=this.flyoutOverlayPromotionWidth+we;!o&&t&&this.flyoutOverlayRecoveryReady&&T&&this.workspaceMinimumsCanFit(h,s,u,!0,v)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const k=s&&!o&&!r,g=n&&!o;if(h>0&&(!k||u>0)&&(!g||v>0)&&(k||g)&&!this.workspaceMinimumsCanFit(h,k,u,g,v)){g&&await this.promoteFlyoutToOverlay();return}const A=(k?u:0)+(g?v:0),L=k&&this.preferredPreviewWidth!==null||g&&this.preferredFlyoutWidth!==null||(k&&y!==null||g&&w!==null),j=(k?this.preferredPreviewWidth===null?u:this.clampWidth(this.preferredPreviewWidth,u,W):0)+(g?this.preferredFlyoutWidth===null?v:this.clampWidth(this.preferredFlyoutWidth,v,c):0),f=S=>{const T=this.workspaceTargetWidth(S,A,j),B=this.allocateWorkspaceWidths(T,k,g,u,W,v,c,y,w),K=S.maximum+h,Z=Math.max(0,K-S.natural),se=B.previewWidth+B.flyoutWidth,J=Math.max(0,Math.min(Z,K-se));return{allocation:B,mainWidth:J,reclaimsMain:J+l<Z}},D=(S,T)=>Math.abs(S.mainWidth-T.mainWidth)>l||Math.abs(S.allocation.previewWidth-T.allocation.previewWidth)>l||Math.abs(S.allocation.flyoutWidth-T.allocation.flyoutWidth)>l,V=this.workspaceWidthCapacity(h,P,d?p:0),I=f(V);let $=I.allocation;if(this.setWorkspaceWidths($.previewWidth,$.flyoutWidth,L),!k||u<=0){g&&await this.promoteFlyoutIfClipped(e,h,v,c);return}if(m!==null&&p>l){const S=V.maximum+h,T=this.workspaceWidthCapacityForAvailable(S+p,h,P),B=f(T);(d?D(f(this.workspaceWidthCapacityForAvailable(Math.max(0,S-fe),h,P)),B):I.reclaimsMain&&D(I,B))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const Y=this.workspaceWidthCapacity(h,P);if(Y.maximum+l<A){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,g?v:0),i=!1,g&&await this.promoteFlyoutToOverlay();return}const X=f(Y);if($=X.allocation,this.setWorkspaceWidths($.previewWidth,$.flyoutWidth,L),a||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,X.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const Q=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(h,u,W,g,v,c),()=>this.workspaceCandidateIsMeasurable(!0,g));if(Q===null)return;Q?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,g?v:0),i=!1,g&&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(ge),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(ae)||e.querySelector(ae)!==null}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()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&pe().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.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(),a=this.previewProbes.minimum,s=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,r=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),d=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,m=this.hasAttribute("flyout-open"),p=d+this.allocatedPreviewWidth,u=i.min<=a+l,y=m&&u?Math.max(0,this.allocatedFlyoutWidth-s):0,W=Math.max(r,p-i.max),v=Math.max(W,Math.max(r,p-i.min)+y),w=n>0?Math.max(W,Math.min(Math.max(r,n),v)):v,c=n>0&&d+l>=n?`${Math.round(d)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:ee;let h,b;if(this.previewVisible){const f=this.previewFlyoutResizeRange(),D=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,I=f.min<=a+l?Math.max(0,d-r):0;h=Math.max(s,D-f.max),b=Math.max(h,Math.min(o,D-f.min+I))}else{const f=this.flyoutOnlyResizeRange();h=f.min,b=f.max}const P=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",C=this.previewVisible?"Resize preview and help panes":"Resize help pane",k=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,g=m?"flyout-end":"preview-end",F=g==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,A=this.workspaceLogicalGutterWidths(),E=this.trailingPaneResizeRange(g,F,A.leading+A.trailing),O=g==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",L=g==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return oe`
       <div part="wrapper" class="esp-page ${le({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>

package/dist/pickers/esp-pick-one.d.ts

@@ -121,8 +121,10 @@ import { EspalierPickerBase } from "./esp-picker-base.js";
  * </script>
  * ```
  *
- * @event {CustomEvent<PickerItem | undefined>} value-changed - Fired when
+ * @event {CustomEvent<PickerItem | undefined>} esp-value-changed - Fired when
  * the user selects a picker item.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed -
+ * Fired whenever constraint validation runs.
  *
  * @docPageTitle Pick One
  * @docUrl /components/pickers/pick-one

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

@@ -29,8 +29,8 @@ var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnP
           .label=${this.placeholder}
           tabindex="-1"
           ${p(this.pickerMenu)}
-          @selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const i=t.detail,s=i.length>0?i[0]:void 0;(i.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
-          @close-menu=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=t.detail,s=i.length>0?i[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          @esp-picker-menu-selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const i=t.detail,s=i.length>0?i[0]:void 0;(i.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
+          @esp-picker-menu-close-requested=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=t.detail,s=i.length>0?i[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
         >
         </esp-picker-menu>
       </div>

package/dist/pickers/esp-pick-some.d.ts

@@ -143,8 +143,10 @@ import { EspalierPickerBase } from "./esp-picker-base.js";
  * </script>
  * ```
  *
- * @event {CustomEvent<PickerItem[]>} value-changed - Fired when
+ * @event {CustomEvent<PickerItem[]>} esp-value-changed - Fired when
  * the user adds or removes a selected picker item.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed -
+ * Fired whenever constraint validation runs.
  *
  * @docPageTitle Pick Some
  * @docUrl /components/pickers/pick-some

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

@@ -39,7 +39,7 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           tabindex="-1"
           ${d(this.pickerMenu)}
           multi-select
-          @selection-changed=${e=>{if(e.stopPropagation(),this.typeahead){const i=new Set(this.filteredItems.map(h=>h.value)),l=[...this.selectedItems.filter(h=>!i.has(h.value)),...e.detail];if(f(l,this.selectedItems,"value"))return;this.setSelectedItems(l),this.resetTypeaheadInput();return}f(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail)}}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead){const i=new Set(this.filteredItems.map(h=>h.value)),l=[...this.selectedItems.filter(h=>!i.has(h.value)),...e.detail];if(f(l,this.selectedItems,"value"))return;this.setSelectedItems(l),this.resetTypeaheadInput();return}f(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail)}}
         >
         </esp-picker-menu>
       </div>

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

@@ -170,7 +170,7 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
      * Focus the picker.
      */
     focus(): void;
-    /** Re-run constraint validation and dispatch `validity-changed`. */
+    /** Re-run constraint validation and dispatch `esp-validity-changed`. */
     validate(): void;
     /** Check whether the current state is valid (delegates to ElementInternals). */
     checkValidity(): boolean;

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

@@ -4,11 +4,11 @@ import "../shared/virtualizer/lit-virtualizer.js";
 /**
  * A menu used by Espalier pickers when choosing option(s).
  *
- * @event {CustomEvent<Array<PickerItem>>} selection-changed - Emitted when
+ * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-selection-changed - Emitted when
  * the user changes the selected item(s). If there are initially selected items,
  * emitted on first update.
- * @event {CustomEvent<Array<PickerItem>>} close-menu - Emitted in single-select mode when the menu should close after a selection is made. Bubbles and is composed so parent pickers can observe it across shadow boundaries.
- * @event {CustomEvent<{ first: number; last: number; items: Array<PickerItem> }>} range-changed - Emitted when the virtualized visible item range changes.
+ * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-close-requested - Emitted in single-select mode when the menu should close after a selection is made. Bubbles and is composed so parent pickers can observe it across shadow boundaries.
+ * @event {CustomEvent<{ first: number; last: number; items: Array<PickerItem> }>} esp-picker-menu-range-changed - Emitted when the virtualized visible item range changes.
  *
  * ```html
  * <esp-box>
@@ -22,7 +22,7 @@ import "../shared/virtualizer/lit-virtualizer.js";
  * <script>
  *   const theMenu = findByTagName("esp-picker-menu")[0];
  *   const theHeader = findByTagName("h4")[0];
- *   theMenu.addEventListener("selection-changed", (ev) => {
+ *   theMenu.addEventListener("esp-picker-menu-selection-changed", (ev) => {
  *     theHeader.innerText = ev.detail.length == 0 ? "No selected items" :
  *       ev.detail.map(pi => pi.text).join(", ");
  *   });

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

@@ -1,4 +1,4 @@
-var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(p,t,e,i);else for(var n=p.length-1;n>=0;n--)(r=p[n])&&(s=(l<3?r(s):l>3?r(t,e,s):r(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as y,css as I,html as d}from"lit";import{customElement as b,property as u,state as f}from"lit/decorators.js";import{createRef as x,ref as P}from"lit/directives/ref.js";import{styleMap as w}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as v,viewportSize as g}from"../shared/viewport.js";const c="highlighted";let o=class extends y{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=x(),this.internalPoolClone=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const i={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
+var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(p,t,e,i);else for(var o=p.length-1;o>=0;o--)(r=p[o])&&(s=(l<3?r(s):l>3?r(t,e,s):r(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as I,css as b,html as d}from"lit";import{customElement as x,property as u,state as v}from"lit/decorators.js";import{createRef as P,ref as S}from"lit/directives/ref.js";import{styleMap as C}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as y,viewportSize as m}from"../shared/viewport.js";import{ESP_EVENTS as g}from"../shared/events.js";const c="highlighted";let n=class extends I{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=P(),this.internalPoolClone=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const i={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
       class="picker-item"
       data-picker-index=${e}
       .text=${t.text}
@@ -6,17 +6,17 @@ var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnP
       .selected=${t.selected}
       .icon=${t.icon??""}
       .highlightRanges=${t.highlightRanges}
-      style=${w(i)}
+      style=${C(i)}
     >
       ${t.slotNodes?.map(l=>l.cloneNode(!0))}
-    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let i=!1;if(e){const l=this.virtualizedItemsPool===this.internalPoolClone;this.internalPoolClone=null;const s=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`);i=!l&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((r,n)=>r!==s[n])),this.lastPoolFingerprint=s}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=i,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(s=>s.selected).map(s=>s.value);this.virtualizedItemsPool=t;const i=t.filter(s=>s.selected),l=i.map(s=>s.value);(e.length!==l.length||e.some((s,r)=>s!==l[r]))&&this.dispatchEvent(new CustomEvent("selection-changed",{detail:i,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;i&&i.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,i=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;if(s){if(await this.stableLayout(s),i())return;const r=s.scrollTop;for(let n=0;n<3;n+=1)try{s.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(s),i()||s.scrollTop!==r)return}if(await this.stableLayout(s),i())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(c))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${c}`))e.classList.remove(c)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(c);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const i of e)if(this.virtualizedItemsPool.findIndex(s=>s.value===i.value&&s.text===i.text)===this.highlightIndex)return i;return null}pickItem(t){for(const l of this.pickerItems)l===t?l.selected=!l.selected:this.multiSelect||(l.selected=!1);const e=this.virtualizedItemsPool.indexOf(t);if(e!==-1){this.highlightIndex=e;const l=this.getHighlightedElement();l&&(this.clearHighlight(),l.classList.add(c))}const i=[...this.pickerItems];this.internalPoolClone=i,this.pickerItems=i,this.dispatchEvent(new CustomEvent("selection-changed",{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent("close-menu",{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const i=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!i)return null;for(const l of i){const s=l.getBoundingClientRect();if(t>=s.left&&t<=s.right&&e>=s.top&&e<=s.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:i}=g(),{spaceAbove:l,spaceBelow:s}=v(e,i),r=Math.max(Math.max(l,s)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=i,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>s?this.style.setProperty("bottom",`${i-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const n=this.pickerItems.find(m=>m.selected);this.highlightIndex=n?this.pickerItems.indexOf(n):0,this.openSessionGeneration+=1;const h=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{h!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const i=t.layoutComplete;if(!i)return;const l=await Promise.race([i.then(()=>"settled",()=>"superseded"),new Promise(s=>setTimeout(()=>s("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===i)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const i=this.virtualizerRef.value;if(!i){requestAnimationFrame(()=>{if(!this.isConnected)return;const r=this.shadowRoot?.querySelector(".status-message");if(r){const n=Math.min(r.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${n}px`)}});continue}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0;if(i.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l>0&&!this.pendingItemsChanged&&!this.retargetingSequence&&i.scrollTop<l){if(i.scrollTop=l,await this.stableLayout(i),t())return;if(this.menuDirty)continue}const s=this.virtualizedItemsPool;if(s.length!==0){if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const r=s.findIndex(n=>n.selected);r>=0?this.highlightIndex=r:this.highlightIndex>=s.length?this.highlightIndex=s.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{i.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3),this.preRenderScrollTop=null,this.retargetingSequence=!1}}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const i=getComputedStyle(this),l=(parseFloat(i.borderTopWidth)||0)+(parseFloat(i.borderBottomWidth)||0),s=this.virtualizedItemsPool.length;if(e.length<s)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const n=t.getBoundingClientRect(),h=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),h.bottom-n.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const i=e.querySelectorAll("esp-picker-item");let l=t.width;for(const s of i)l=Math.max(l,s.scrollWidth);if(l+=2,l>t.width){const{width:s}=g(),r=Math.min(l,s-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:i}=g();if(i!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:n}=v(e,i),h=Math.max(Math.max(r,n)-75,0);this.maxAvailableHeight=h,this.lastViewportHeight=i,(parseFloat(this.style.getPropertyValue("height"))||0)>h&&this.style.setProperty("height",`${h}px`),this.sizeToContent(h)}this.style.setProperty("left",`${e.left}px`);const l=e.top,s=i-e.bottom;l>s?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${i-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
-      ${P(this.virtualizerRef)}
+    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let i=!1;if(e){const l=this.virtualizedItemsPool===this.internalPoolClone;this.internalPoolClone=null;const s=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`);i=!l&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((r,o)=>r!==s[o])),this.lastPoolFingerprint=s}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=i,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(s=>s.selected).map(s=>s.value);this.virtualizedItemsPool=t;const i=t.filter(s=>s.selected),l=i.map(s=>s.value);(e.length!==l.length||e.some((s,r)=>s!==l[r]))&&this.dispatchEvent(new CustomEvent(g.PICKER_MENU_SELECTION_CHANGED,{detail:i,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;i&&i.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,i=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;if(s){if(await this.stableLayout(s),i())return;const r=s.scrollTop;for(let o=0;o<3;o+=1)try{s.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(s),i()||s.scrollTop!==r)return}if(await this.stableLayout(s),i())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(c))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${c}`))e.classList.remove(c)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(c);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const i of e)if(this.virtualizedItemsPool.findIndex(s=>s.value===i.value&&s.text===i.text)===this.highlightIndex)return i;return null}pickItem(t){for(const l of this.pickerItems)l===t?l.selected=!l.selected:this.multiSelect||(l.selected=!1);const e=this.virtualizedItemsPool.indexOf(t);if(e!==-1){this.highlightIndex=e;const l=this.getHighlightedElement();l&&(this.clearHighlight(),l.classList.add(c))}const i=[...this.pickerItems];this.internalPoolClone=i,this.pickerItems=i,this.dispatchEvent(new CustomEvent(g.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(g.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const i=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!i)return null;for(const l of i){const s=l.getBoundingClientRect();if(t>=s.left&&t<=s.right&&e>=s.top&&e<=s.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:i}=m(),{spaceAbove:l,spaceBelow:s}=y(e,i),r=Math.max(Math.max(l,s)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=i,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>s?this.style.setProperty("bottom",`${i-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const o=this.pickerItems.find(f=>f.selected);this.highlightIndex=o?this.pickerItems.indexOf(o):0,this.openSessionGeneration+=1;const h=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{h!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const i=t.layoutComplete;if(!i)return;const l=await Promise.race([i.then(()=>"settled",()=>"superseded"),new Promise(s=>setTimeout(()=>s("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===i)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const i=this.virtualizerRef.value;if(!i){requestAnimationFrame(()=>{if(!this.isConnected)return;const r=this.shadowRoot?.querySelector(".status-message");if(r){const o=Math.min(r.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${o}px`)}});continue}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0;if(i.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l>0&&!this.pendingItemsChanged&&!this.retargetingSequence&&i.scrollTop<l){if(i.scrollTop=l,await this.stableLayout(i),t())return;if(this.menuDirty)continue}const s=this.virtualizedItemsPool;if(s.length!==0){if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const r=s.findIndex(o=>o.selected);r>=0?this.highlightIndex=r:this.highlightIndex>=s.length?this.highlightIndex=s.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{i.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3),this.preRenderScrollTop=null,this.retargetingSequence=!1}}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const i=getComputedStyle(this),l=(parseFloat(i.borderTopWidth)||0)+(parseFloat(i.borderBottomWidth)||0),s=this.virtualizedItemsPool.length;if(e.length<s)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const o=t.getBoundingClientRect(),h=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),h.bottom-o.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const i=e.querySelectorAll("esp-picker-item");let l=t.width;for(const s of i)l=Math.max(l,s.scrollWidth);if(l+=2,l>t.width){const{width:s}=m(),r=Math.min(l,s-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:i}=m();if(i!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:o}=y(e,i),h=Math.max(Math.max(r,o)-75,0);this.maxAvailableHeight=h,this.lastViewportHeight=i,(parseFloat(this.style.getPropertyValue("height"))||0)>h&&this.style.setProperty("height",`${h}px`),this.sizeToContent(h)}this.style.setProperty("left",`${e.left}px`);const l=e.top,s=i-e.bottom;l>s?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${i-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
+      ${S(this.virtualizerRef)}
       scroller
       .items=${this.virtualizedItemsPool}
       .renderItem=${this.renderPickerItem}
       @pointerdown=${this.handleItemPointerDown}
-      @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent("range-changed",{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
-    ></lit-virtualizer>`}};o.styles=I`
+      @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(g.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
+    ></lit-virtualizer>`}};n.styles=b`
     :host {
       position: fixed;
       inset: unset;
@@ -54,4 +54,4 @@ var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnP
       font-style: italic;
       background: var(--esp-color-layer-2);
     }
-  `,a([u({type:String})],o.prototype,"label",void 0),a([f()],o.prototype,"virtualizedItemsPool",void 0),a([f()],o.prototype,"highlightIndex",void 0),a([u({attribute:"multi-select",type:Boolean})],o.prototype,"multiSelect",void 0),a([u({type:Boolean})],o.prototype,"loading",void 0),a([u({type:String,attribute:"empty-message"})],o.prototype,"emptyMessage",void 0),o=a([b("esp-picker-menu")],o);export{o as EspalierPickerMenu};
+  `,a([u({type:String})],n.prototype,"label",void 0),a([v()],n.prototype,"virtualizedItemsPool",void 0),a([v()],n.prototype,"highlightIndex",void 0),a([u({attribute:"multi-select",type:Boolean})],n.prototype,"multiSelect",void 0),a([u({type:Boolean})],n.prototype,"loading",void 0),a([u({type:String,attribute:"empty-message"})],n.prototype,"emptyMessage",void 0),n=a([x("esp-picker-menu")],n);export{n as EspalierPickerMenu};

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

@@ -31,9 +31,9 @@ import { LitElement, type PropertyValues } from "lit";
  * </esp-popover>
  * ```
  *
- * @event {CustomEvent} popover-opened - Emitted when the popover is opened.
+ * @event {CustomEvent} esp-popover-opened - Emitted when the popover is opened.
  *
- * @event {CustomEvent} popover-closed - Emitted when the popover is closed.
+ * @event {CustomEvent} esp-popover-closed - Emitted when the popover is closed.
  *
  * @slot target - The target listens for events to show the popover.
  *

package/dist/popover/esp-popover.js

@@ -1,4 +1,4 @@
-var p=function(u,t,e,s){var i=arguments.length,o=i<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(u,t,e,s);else for(var r=u.length-1;r>=0;r--)(l=u[r])&&(o=(i<3?l(o):i>3?l(t,e,o):l(t,e))||o);return i>3&&o&&Object.defineProperty(t,e,o),o};import{LitElement as m,css as y,html as b}from"lit";import{customElement as T,property as n,state as w}from"lit/decorators.js";import{createRef as f,ref as d}from"lit/directives/ref.js";import{findContainingPopovers as v,PopoverController as D}from"../shared/popover-controller.js";import{viewportSize as g}from"../shared/viewport.js";import{RafThrottle as O}from"../shared/raf-throttle.js";import{alignAttributeTextInheritance as P}from"../shared/style-fragments.js";let C=0,h=class extends m{constructor(){super(...arguments),this.popoverOpen=!1,this.thePopover=f(),this.popoverSlot=f(),this.targetSlot=f(),this.attachTo=null,this.showDelayTimer=null,this.hideDelayTimer=null,this.isHovered=!1,this.isFocused=!1,this.collisionFrame=new O(()=>this.applyCollisionAdjustment()),this.popoverId=`esp-popover-${++C}`,this.popoverCtrl=new D({host:this,closeStrategy:"skip-list",isOpen:()=>this.popoverOpen,onShouldClose:()=>this.closePopover(),onPositionUpdate:()=>this.positionPopover(),getPositionElements:()=>[this.attachTo,this.thePopover.value],getInsideElements:()=>[this.thePopover.value??null],onOutsideClick:()=>this.closePopover()}),this.attach="below",this.collision="flip",this.align="start",this.offset="",this.offsetX=0,this.offsetY=0,this.trigger="click",this.showDelay=0,this.hideDelay=0,this.closePopover=()=>{this.cancelDelays(),this.cancelCollisionAdjustment();const t=this.thePopover.value;if(t&&this.popoverOpen)try{t.hidePopover()}catch{}this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.popoverOpen&&(this.popoverOpen=!1,this.dispatchEvent(new CustomEvent("popover-closed",{bubbles:!0,composed:!0})))},this.openPopover=()=>{this.scheduleOpen()},this.updatePosition=()=>{this.popoverOpen&&this.positionPopover()},this.toggleOpen=t=>{this.trigger==="click"&&(t.stopPropagation(),this.popoverOpen?this.closePopover():this.doOpen())}}cancelDelays(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null)}cancelCollisionAdjustment(){this.collisionFrame.cancel()}applyPixelOffset(t,e){if(e===0)return t;const s=t.startsWith("calc(")&&t.endsWith(")")?t.slice(5,-1):t,i=e>0?"+":"-";return`calc(${s} ${i} ${Math.abs(e)}px)`}scheduleOpen(){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null),!this.popoverOpen&&(this.showDelay>0&&this.showDelayTimer===null?this.showDelayTimer=setTimeout(()=>{this.showDelayTimer=null,this.doOpen()},this.showDelay):this.showDelay<=0&&this.doOpen())}scheduleClose(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.popoverOpen&&(this.hideDelay>0&&this.hideDelayTimer===null?this.hideDelayTimer=setTimeout(()=>{this.hideDelayTimer=null,this.closePopover()},this.hideDelay):this.hideDelay<=0&&this.closePopover())}doOpen(){if(this.popoverOpen)return;const t=v(this);this.popoverCtrl.publishCloseOthers(t),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}positionPopover(){const t=this.thePopover.value;if(!t||!this.attachTo)return;const e=this.attachTo.getBoundingClientRect(),s=this.offset.length?this.offset:"0px";t.matches(":popover-open")||t.showPopover();const i=t.getBoundingClientRect(),{width:o,height:l}=g();this.cancelCollisionAdjustment();let r=this.attach;this.collision==="flip"&&(r==="above"&&e.top<i.height&&l-e.bottom>e.top?r="below":r==="below"&&l-e.bottom<i.height&&e.top>l-e.bottom?r="above":r==="left"&&e.left<i.width&&o-e.right>e.left?r="right":r==="right"&&o-e.right<i.width&&e.left>o-e.right&&(r="left"));let a="0px",c="0px";switch(r){case"above":a=`calc(${e.top-i.height}px - ${s})`;break;case"below":a=`calc(${e.bottom}px + ${s})`;break;case"left":c=`calc(${e.left-i.width}px - ${s})`;break;case"right":c=`calc(${e.right}px + ${s})`;break}if(r==="above"||r==="below")switch(this.align){case"start":c=`${e.left}px`;break;case"center":c=`${e.left+e.width/2-i.width/2}px`;break;case"end":c=`${e.right-i.width}px`;break}else switch(this.align){case"start":a=`${e.top}px`;break;case"center":a=`${e.top+e.height/2-i.height/2}px`;break;case"end":a=`${e.bottom-i.height}px`;break}c=this.applyPixelOffset(c,this.offsetX),a=this.applyPixelOffset(a,this.offsetY),t.style.top=a,t.style.left=c,this.collision!=="none"&&this.collisionFrame.schedule()}applyCollisionAdjustment(){const t=this.thePopover.value;if(!t||!this.popoverOpen||!t.matches(":popover-open"))return;const{width:e,height:s}=g(),i=t.getBoundingClientRect();let o=i.left;if(i.width>e?o=0:o=Math.min(Math.max(i.left,0),e-i.width),o!==i.left&&(t.style.left=`${o}px`),this.collision!=="shift")return;let l=i.top;i.height>s?l=0:l=Math.min(Math.max(i.top,0),s-i.height),l!==i.top&&(t.style.top=`${l}px`)}handleHoverEnter(){this.isHovered=!0,this.scheduleOpen()}handleHoverLeave(){if(this.isHovered=!1,this.trigger==="focus-hover"&&this.isFocused){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}handleFocusIn(){this.isFocused=!0,this.scheduleOpen()}handleFocusOut(){if(this.isFocused=!1,this.trigger==="focus-hover"&&this.isHovered){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}disconnectedCallback(){super.disconnectedCallback(),this.cancelDelays(),this.cancelCollisionAdjustment()}updated(t){super.updated(t),t.has("trigger")&&(this.isHovered=!1,this.isFocused=!1,this.cancelDelays()),this.popoverOpen&&["attach","align","collision","offset","offsetX","offsetY"].some(e=>t.has(e))&&this.positionPopover()}firstUpdated(t){let e=this.targetSlot.value.assignedElements()[0];for(;e instanceof HTMLSlotElement;)e=e.assignedElements()[0];this.attachTo=e;const s=this.thePopover.value;s&&(s.setAttribute("popover","manual"),s.id=this.popoverId);const i=this.popoverSlot.value?.assignedElements();if(i?.length){let o=i[0];for(;o instanceof HTMLSlotElement;)o=o.assignedElements()[0];o&&(o["linked-popover"]=this,o.addEventListener("click",l=>{l.stopPropagation();const r=[this,...v(this)];this.popoverCtrl.publishCloseOthers(r)}))}}render(){return b`
+var p=function(u,t,e,s){var i=arguments.length,o=i<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(u,t,e,s);else for(var r=u.length-1;r>=0;r--)(l=u[r])&&(o=(i<3?l(o):i>3?l(t,e,o):l(t,e))||o);return i>3&&o&&Object.defineProperty(t,e,o),o};import{LitElement as y,css as b,html as T}from"lit";import{customElement as w,property as n,state as D}from"lit/decorators.js";import{createRef as f,ref as d}from"lit/directives/ref.js";import{findContainingPopovers as v,PopoverController as O}from"../shared/popover-controller.js";import{viewportSize as m}from"../shared/viewport.js";import{RafThrottle as P}from"../shared/raf-throttle.js";import{alignAttributeTextInheritance as C}from"../shared/style-fragments.js";import{ESP_EVENTS as g}from"../shared/events.js";let E=0,h=class extends y{constructor(){super(...arguments),this.popoverOpen=!1,this.thePopover=f(),this.popoverSlot=f(),this.targetSlot=f(),this.attachTo=null,this.showDelayTimer=null,this.hideDelayTimer=null,this.isHovered=!1,this.isFocused=!1,this.collisionFrame=new P(()=>this.applyCollisionAdjustment()),this.popoverId=`esp-popover-${++E}`,this.popoverCtrl=new O({host:this,closeStrategy:"skip-list",isOpen:()=>this.popoverOpen,onShouldClose:()=>this.closePopover(),onPositionUpdate:()=>this.positionPopover(),getPositionElements:()=>[this.attachTo,this.thePopover.value],getInsideElements:()=>[this.thePopover.value??null],onOutsideClick:()=>this.closePopover()}),this.attach="below",this.collision="flip",this.align="start",this.offset="",this.offsetX=0,this.offsetY=0,this.trigger="click",this.showDelay=0,this.hideDelay=0,this.closePopover=()=>{this.cancelDelays(),this.cancelCollisionAdjustment();const t=this.thePopover.value;if(t&&this.popoverOpen)try{t.hidePopover()}catch{}this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.popoverOpen&&(this.popoverOpen=!1,this.dispatchEvent(new CustomEvent(g.POPOVER_CLOSED,{bubbles:!0,composed:!0})))},this.openPopover=()=>{this.scheduleOpen()},this.updatePosition=()=>{this.popoverOpen&&this.positionPopover()},this.toggleOpen=t=>{this.trigger==="click"&&(t.stopPropagation(),this.popoverOpen?this.closePopover():this.doOpen())}}cancelDelays(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null)}cancelCollisionAdjustment(){this.collisionFrame.cancel()}applyPixelOffset(t,e){if(e===0)return t;const s=t.startsWith("calc(")&&t.endsWith(")")?t.slice(5,-1):t,i=e>0?"+":"-";return`calc(${s} ${i} ${Math.abs(e)}px)`}scheduleOpen(){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null),!this.popoverOpen&&(this.showDelay>0&&this.showDelayTimer===null?this.showDelayTimer=setTimeout(()=>{this.showDelayTimer=null,this.doOpen()},this.showDelay):this.showDelay<=0&&this.doOpen())}scheduleClose(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.popoverOpen&&(this.hideDelay>0&&this.hideDelayTimer===null?this.hideDelayTimer=setTimeout(()=>{this.hideDelayTimer=null,this.closePopover()},this.hideDelay):this.hideDelay<=0&&this.closePopover())}doOpen(){if(this.popoverOpen)return;const t=v(this);this.popoverCtrl.publishCloseOthers(t),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick(),this.dispatchEvent(new CustomEvent(g.POPOVER_OPENED,{bubbles:!0,composed:!0}))}positionPopover(){const t=this.thePopover.value;if(!t||!this.attachTo)return;const e=this.attachTo.getBoundingClientRect(),s=this.offset.length?this.offset:"0px";t.matches(":popover-open")||t.showPopover();const i=t.getBoundingClientRect(),{width:o,height:l}=m();this.cancelCollisionAdjustment();let r=this.attach;this.collision==="flip"&&(r==="above"&&e.top<i.height&&l-e.bottom>e.top?r="below":r==="below"&&l-e.bottom<i.height&&e.top>l-e.bottom?r="above":r==="left"&&e.left<i.width&&o-e.right>e.left?r="right":r==="right"&&o-e.right<i.width&&e.left>o-e.right&&(r="left"));let a="0px",c="0px";switch(r){case"above":a=`calc(${e.top-i.height}px - ${s})`;break;case"below":a=`calc(${e.bottom}px + ${s})`;break;case"left":c=`calc(${e.left-i.width}px - ${s})`;break;case"right":c=`calc(${e.right}px + ${s})`;break}if(r==="above"||r==="below")switch(this.align){case"start":c=`${e.left}px`;break;case"center":c=`${e.left+e.width/2-i.width/2}px`;break;case"end":c=`${e.right-i.width}px`;break}else switch(this.align){case"start":a=`${e.top}px`;break;case"center":a=`${e.top+e.height/2-i.height/2}px`;break;case"end":a=`${e.bottom-i.height}px`;break}c=this.applyPixelOffset(c,this.offsetX),a=this.applyPixelOffset(a,this.offsetY),t.style.top=a,t.style.left=c,this.collision!=="none"&&this.collisionFrame.schedule()}applyCollisionAdjustment(){const t=this.thePopover.value;if(!t||!this.popoverOpen||!t.matches(":popover-open"))return;const{width:e,height:s}=m(),i=t.getBoundingClientRect();let o=i.left;if(i.width>e?o=0:o=Math.min(Math.max(i.left,0),e-i.width),o!==i.left&&(t.style.left=`${o}px`),this.collision!=="shift")return;let l=i.top;i.height>s?l=0:l=Math.min(Math.max(i.top,0),s-i.height),l!==i.top&&(t.style.top=`${l}px`)}handleHoverEnter(){this.isHovered=!0,this.scheduleOpen()}handleHoverLeave(){if(this.isHovered=!1,this.trigger==="focus-hover"&&this.isFocused){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}handleFocusIn(){this.isFocused=!0,this.scheduleOpen()}handleFocusOut(){if(this.isFocused=!1,this.trigger==="focus-hover"&&this.isHovered){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}disconnectedCallback(){super.disconnectedCallback(),this.cancelDelays(),this.cancelCollisionAdjustment()}updated(t){super.updated(t),t.has("trigger")&&(this.isHovered=!1,this.isFocused=!1,this.cancelDelays()),this.popoverOpen&&["attach","align","collision","offset","offsetX","offsetY"].some(e=>t.has(e))&&this.positionPopover()}firstUpdated(t){let e=this.targetSlot.value.assignedElements()[0];for(;e instanceof HTMLSlotElement;)e=e.assignedElements()[0];this.attachTo=e;const s=this.thePopover.value;s&&(s.setAttribute("popover","manual"),s.id=this.popoverId);const i=this.popoverSlot.value?.assignedElements();if(i?.length){let o=i[0];for(;o instanceof HTMLSlotElement;)o=o.assignedElements()[0];o&&(o["linked-popover"]=this,o.addEventListener("click",l=>{l.stopPropagation();const r=[this,...v(this)];this.popoverCtrl.publishCloseOthers(r)}))}}render(){return T`
       <slot
         ${d(this.targetSlot)}
         @click=${t=>{this.trigger==="click"&&this.toggleOpen(t)}}
@@ -16,7 +16,7 @@ var p=function(u,t,e,s){var i=arguments.length,o=i<3?t:s===null?s=Object.getOwnP
       >
         <slot name="popover" ${d(this.popoverSlot)}></slot>
       </div>
-    `}};h.styles=[P,y`
+    `}};h.styles=[C,b`
       :host {
         position: relative;
         display: flex;
@@ -33,4 +33,4 @@ var p=function(u,t,e,s){var i=arguments.length,o=i<3?t:s===null?s=Object.getOwnP
         overflow: visible;
         color: var(--esp-color-text);
       }
-    `],p([w()],h.prototype,"popoverOpen",void 0),p([n({attribute:"attach",type:String})],h.prototype,"attach",void 0),p([n({attribute:"collision",type:String})],h.prototype,"collision",void 0),p([n({attribute:"align",type:String})],h.prototype,"align",void 0),p([n({attribute:"offset",type:String})],h.prototype,"offset",void 0),p([n({attribute:"offset-x",type:Number})],h.prototype,"offsetX",void 0),p([n({attribute:"offset-y",type:Number})],h.prototype,"offsetY",void 0),p([n({attribute:"trigger",type:String})],h.prototype,"trigger",void 0),p([n({attribute:"show-delay",type:Number})],h.prototype,"showDelay",void 0),p([n({attribute:"hide-delay",type:Number})],h.prototype,"hideDelay",void 0),h=p([T("esp-popover")],h);export{h as EspalierPopover};
+    `],p([D()],h.prototype,"popoverOpen",void 0),p([n({attribute:"attach",type:String})],h.prototype,"attach",void 0),p([n({attribute:"collision",type:String})],h.prototype,"collision",void 0),p([n({attribute:"align",type:String})],h.prototype,"align",void 0),p([n({attribute:"offset",type:String})],h.prototype,"offset",void 0),p([n({attribute:"offset-x",type:Number})],h.prototype,"offsetX",void 0),p([n({attribute:"offset-y",type:Number})],h.prototype,"offsetY",void 0),p([n({attribute:"trigger",type:String})],h.prototype,"trigger",void 0),p([n({attribute:"show-delay",type:Number})],h.prototype,"showDelay",void 0),p([n({attribute:"hide-delay",type:Number})],h.prototype,"hideDelay",void 0),h=p([w("esp-popover")],h);export{h as EspalierPopover};