@taprootio/espalier 4.3.0 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/css/fonts/font-fallback-profiles.json +1 -0
  3. package/custom-elements.json +2338 -1491
  4. package/dist/action-menu/esp-action-menu-item.js +7 -4
  5. package/dist/avatar/esp-avatar.js +14 -8
  6. package/dist/avatar/esp-profile-chip.js +4 -1
  7. package/dist/badge/esp-badge.js +7 -4
  8. package/dist/box/esp-box.d.ts +1 -1
  9. package/dist/checkbox/esp-checkbox.js +6 -3
  10. package/dist/color-picker/esp-color-picker.js +1 -1
  11. package/dist/data-cell/esp-data-cell.js +6 -3
  12. package/dist/date-picker/helpers/styles.js +10 -4
  13. package/dist/details/esp-details.d.ts +4 -4
  14. package/dist/details/esp-details.js +11 -5
  15. package/dist/empty-state/esp-empty-state.js +16 -7
  16. package/dist/flyout/esp-flyout.js +5 -2
  17. package/dist/font-picker/esp-font-picker.d.ts +1 -0
  18. package/dist/font-picker/esp-font-picker.js +4 -4
  19. package/dist/footer/esp-footer-link-group.js +12 -6
  20. package/dist/footer/esp-footer.js +21 -6
  21. package/dist/form-item/esp-form-item.js +4 -1
  22. package/dist/header/esp-header.d.ts +2 -1
  23. package/dist/header/esp-header.js +24 -6
  24. package/dist/help/esp-help-button.d.ts +1 -1
  25. package/dist/help/help-document.js +4 -4
  26. package/dist/index.d.ts +2 -1
  27. package/dist/index.js +1 -1
  28. package/dist/lightbox/esp-lightbox.d.ts +1 -1
  29. package/dist/page/esp-page.d.ts +1 -0
  30. package/dist/page/esp-page.js +40 -783
  31. package/dist/page/esp-page.styles.js +748 -0
  32. package/dist/page/workspace-geometry.js +1 -0
  33. package/dist/page/workspace-resize-session.js +1 -0
  34. package/dist/page/workspace-width.js +1 -1
  35. package/dist/pickers/esp-picker-menu.js +6 -6
  36. package/dist/progress/esp-progress.js +11 -5
  37. package/dist/radio-button/esp-radio-button.js +6 -3
  38. package/dist/root/esp-root.d.ts +8 -0
  39. package/dist/root/esp-root.js +13 -7
  40. package/dist/root/helpers/compute-theme-properties.js +1 -1
  41. package/dist/search/esp-search.js +10 -4
  42. package/dist/shared/esp-element-base.js +20 -4
  43. package/dist/shared/font-helpers.d.ts +26 -0
  44. package/dist/shared/font-helpers.js +1 -1
  45. package/dist/shared/font-plan.d.ts +90 -0
  46. package/dist/shared/font-plan.js +5 -0
  47. package/dist/shared/scale-engine.js +1 -1
  48. package/dist/shared/theme.d.ts +28 -4
  49. package/dist/shared/theme.js +1 -1
  50. package/dist/slider/esp-slider.js +8 -5
  51. package/dist/status-indicator/esp-status-indicator.d.ts +1 -1
  52. package/dist/switch/esp-switch.js +11 -5
  53. package/dist/tabs/esp-tab-group.js +6 -3
  54. package/dist/tabs/esp-tab.js +6 -3
  55. package/dist/tree/esp-tree.js +4 -1
  56. package/espalier.css-data.json +9 -5
  57. package/espalier.token-manifest.json +13 -5
  58. package/licenses/ASSET_PROVENANCE.md +2 -1
  59. package/licenses/THIRD_PARTY_NOTICES.md +35 -0
  60. package/licenses/asset-provenance.json +26 -2
  61. package/package.json +16 -2
@@ -1,5 +1,5 @@
1
- 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`
2
- <div part="wrapper" class="esp-page ${le({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
1
+ var P=function(T,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(T,e,t,i);else for(var a=T.length-1;a>=0;a--)(o=T[a])&&(r=(s<3?o(r):s>3?o(e,t,r):o(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r};import{html as re,nothing as ie}from"lit";import{customElement as oe,property as S,state as U}from"lit/decorators.js";import{classMap as ne}from"lit/directives/class-map.js";import{createRef as W,ref as b}from"lit/directives/ref.js";import{EspalierElementBase as le}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as N}from"./bi-directional-sticky-controller.js";import{getEspBus as he}from"../shared/bus-events.js";import{RafThrottle as de}from"../shared/raf-throttle.js";import{InlineBounds as pe,PaneProbes as K,PREVIEW_LAYOUT_EPSILON as l,probeWidth as ue,WidthRange as I}from"./workspace-width.js";import{clampWorkspaceWidth as A,workspaceTargetWidth as ce,workspaceWidthCapacityForAvailable as Y}from"./workspace-geometry.js";import{slotHasContent as ve}from"../shared/slot-content.js";import"../toaster/esp-toaster.js";import{pageStyles as we}from"./esp-page.styles.js";const se='esp-footer, footer, [role~="contentinfo"]',fe="(max-width: 50em)",me=5,ye=12,ge=48,We=48,be=16,Re=64;let g=class extends le{constructor(){super(),this.dialogZone=W(),this.flyoutSlot=W(),this.footerSlot=W(),this.previewSlot=W(),this.previewSpace=W(),this.previewMinWidthProbe=W(),this.previewDefaultWidthProbe=W(),this.previewMaxWidthProbe=W(),this.previewProbes=new K(this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe),this.flyoutMinWidthProbe=W(),this.flyoutDefaultWidthProbe=W(),this.flyoutMaxWidthProbe=W(),this.flyoutProbes=new K(this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe),this.mainMinWidthProbe=W(),this.mainConfiguredMaxWidthProbe=W(),this.mainMaxWidthProbe=W(),this.mainProbes=new K(this.mainMinWidthProbe,this.mainMaxWidthProbe,this.mainMaxWidthProbe),this.resizeStepProbe=W(),this.resizeLargeStepProbe=W(),this.previewObservedWidths=new WeakMap,this.previewSyncFrame=new de(()=>this.runScheduledPreviewLayout()),this.previewSyncGeneration=0,this.previewSyncTask=Promise.resolve(),this.previewOverlayRecoveryRequested=!1,this.previewHeader=null,this.previewMenu=null,this.previewCollapsedSidebarWidth=0,this.previewNavigationCollapseTask=null,this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration=0,this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.flyoutFullHeightActive=!1,this.footerWrapperIsLandmark=!0,this.allocatedPreviewWidth=0,this.allocatedFlyoutWidth=0,this.onWorkspaceResizePointerDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizePointerDown(e,t)},this.onWorkspaceResizePointerMove=e=>{this.workspaceResizeController?.onWorkspaceResizePointerMove(e)},this.onWorkspaceResizePointerEnd=e=>{this.workspaceResizeController?.onWorkspaceResizePointerEnd(e)},this.onWorkspaceResizeBlur=e=>{this.workspaceResizeController?.onWorkspaceResizeBlur(e)},this.onWorkspaceResizeKeyDown=(e,t)=>{this.workspaceResizeController?.onWorkspaceResizeKeyDown(e,t)},this.schedulePreviewLayout=(e=!1)=>{!this.isConnected||!this.hasUpdated||(this.previewOverlayRecoveryRequested||=e===!0,!(this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))&&(this.previewSyncGeneration+=1,this.previewSyncFrame.restart()))},this.onPreviewMediaChange=()=>this.schedulePreviewLayout(!0),this.onPreviewResize=e=>{let t=!1;for(const i of e){const s=i.contentRect.width;if(i.target instanceof HTMLElement&&i.target.classList.contains("esp-page-left")){s>l&&!this.hasAttribute("data-preview-navigation-collapsed")&&(this.previewCollapsedSidebarWidth=s);continue}const r=this.previewObservedWidths.get(i.target);this.previewObservedWidths.set(i.target,s),t||=r===void 0||Math.abs(r-s)>.25}t&&this.schedulePreviewLayout(!0)},this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,this.previewOpen=!1,this.previewLabel="Preview",this.previewCollapseSidebar=!1,this.workspaceResizable=!1,this.previewVisible=!1,this.previewReclaiming=!1,this.warnedSiteRails=!1,new N(this,".esp-page-left > .sticky-wrapper"),new N(this,".esp-page-right > .sticky-wrapper"),new N(this,".esp-page-flyout > .sticky-wrapper",{topOffset:()=>this.flyoutFullHeightActive?0:void 0}),new N(this,".esp-page-preview > .sticky-wrapper",{topOffset:()=>0}),this.addEventListener("esp-flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(t=>t.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(t=>this.footerElementProvidesLandmark(t)),super.connectedCallback(),this.syncMainMaximumConfiguration(),this.ensureWorkspaceResizeController(),this.hasUpdated&&queueMicrotask(()=>this.setupPreviewLayoutObserver())}disconnectedCallback(){this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(!1),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState(),this.previewResizeObserver?.disconnect(),this.previewResizeObserver=void 0,this.previewMediaQuery?.removeEventListener("change",this.onPreviewMediaChange),this.previewMediaQuery=void 0,this.previewSyncFrame.cancel(),this.previewSyncGeneration+=1,this.previewOverlayRecoveryRequested=!1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.toggleAttribute("data-workspace-keyboard-adjusting",!1),this.toggleAttribute("descendant-flyout-overlay-open",!1),this.clearFlyoutOverlayRecovery(),this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.preferredPreviewWidth=null,this.preferredFlyoutWidth=null,this.previewNavigationCollapseTask=null,this.setPreviewNavigationCollapse(!1),super.disconnectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this){this.syncDescendantFlyoutOverlayState();return}const t=a=>{const n=a;return(typeof n.mode=="string"?n.mode:a.getAttribute("mode"))==="overlay"||n.pageOverlayRequested===!0},i=a=>{const n=a.open;return typeof n=="boolean"?n:a.hasAttribute("open")},s=a=>a.anchor!=null,r=a=>{const n=a.fullHeight;return typeof n=="boolean"?n:a.hasAttribute("full-height")},o=(this.flyoutSlot.value?.assignedElements()??[]).filter(a=>a.tagName==="ESP-FLYOUT");for(const a of o){const n=a,p=typeof n.mode=="string"?n.mode:a.getAttribute("mode");n.pageOverlayRequested&&(!i(a)||p!=="auto")&&(n.pageOverlayRequested=!1)}o.some(a=>a.pageOverlayRequested===!0)||this.clearFlyoutOverlayRecovery(),this.toggleAttribute("flyout-open",o.some(a=>i(a)&&!t(a))),this.toggleAttribute("flyout-overlay-open",o.some(a=>i(a)&&t(a))),this.toggleAttribute("flyout-anchored",o.some(a=>i(a)&&s(a))),this.flyoutFullHeightActive=o.some(a=>i(a)&&!t(a)&&r(a)),this.toggleAttribute("flyout-full-height",this.flyoutFullHeightActive),this.resizeSession&&(this.hasAttribute("flyout-overlay-open")||this.resizeSession.separator==="preview-flyout"&&!this.hasAttribute("flyout-open"))&&this.endWorkspaceResize(),this.requestUpdate(),this.schedulePreviewLayout()}syncDescendantFlyoutOverlayState(){const e=Array.from(this.querySelectorAll("esp-flyout")).some(t=>{if(t.closest("esp-page")===this)return!1;const i=t,s=typeof i.open=="boolean"?i.open:t.hasAttribute("open"),r=typeof i.mode=="string"?i.mode:t.getAttribute("mode");return s&&(r==="overlay"||i.pageOverlayRequested===!0||t.getAttribute("aria-modal")==="true")});this.toggleAttribute("descendant-flyout-overlay-open",e)}assignedFlyouts(){return(this.flyoutSlot.value?.assignedElements()??[]).filter(e=>e.tagName==="ESP-FLYOUT")}openAutoFlyouts(){return this.assignedFlyouts().filter(e=>{const t=typeof e.open=="boolean"?e.open:e.hasAttribute("open"),i=typeof e.mode=="string"?e.mode:e.getAttribute("mode");return t&&i!=="overlay"})}async setPageFlyoutOverlay(e){let t=!1;const i=new Set(this.openAutoFlyouts());for(const s of this.assignedFlyouts()){const r=e&&i.has(s);s.pageOverlayRequested!==r&&(s.pageOverlayRequested=r,t=!0)}return t&&await Promise.all(this.assignedFlyouts().map(s=>s.updateComplete??Promise.resolve())),e||this.clearFlyoutOverlayRecovery(),t}clearFlyoutOverlayRecovery(){this.flyoutOverlayPromotionWidth=null,this.flyoutOverlayRecoveryReady=!1,this.flyoutOverlayRecoveryGeneration+=1}armFlyoutOverlayRecovery(){const e=++this.flyoutOverlayRecoveryGeneration;this.flyoutOverlayRecoveryReady=!1,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e!==this.flyoutOverlayRecoveryGeneration||!this.openAutoFlyouts().some(t=>t.pageOverlayRequested===!0)||(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.flyoutOverlayRecoveryReady=!0)})})}previewHasContent(){const e=this.previewSlot.value;return e?ve(e):Array.from(this.childNodes).some(t=>t instanceof Element&&t.getAttribute("slot")==="preview"&&!t.hasAttribute("hidden"))}getPreviewNavigationPair(){if(!this.previewCollapseSidebar)return null;const e=Array.from(this.children),t=e.find(o=>o.slot==="header"&&o.tagName==="ESP-HEADER"),i=e.find(o=>o.slot==="sidebar"&&o.tagName==="ESP-MENU");if(!t||!i||!i.id)return null;const s=typeof t.drawerTarget=="string"?t.drawerTarget:t.getAttribute("drawer-target")??"",r=typeof i.mode=="string"?i.mode:i.getAttribute("mode");return s!==i.id||r!=="vertical"||!("previewCollapseRequested"in t)||!("previewCollapseRequested"in i)?null:{header:t,menu:i}}async setPreviewNavigationCollapse(e){const t=e?this.getPreviewNavigationPair():null,i=t!==null&&this.previewHeader===t.header&&this.previewMenu===t.menu,s=this.previewHeader&&this.previewHeader!==t?.header?this.previewHeader:null,r=this.previewMenu&&this.previewMenu!==t?.menu?this.previewMenu:null;if(s&&(s.previewCollapseRequested=!1),r&&(r.previewCollapseRequested=!1),this.previewHeader=t?.header??null,this.previewMenu=t?.menu??null,this.toggleAttribute("data-preview-navigation-collapsed",!1),await s?.updateComplete,await r?.updateComplete,!t)return!1;const o=i?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0;return t.header.previewCollapseRequested=!0,t.menu.previewCollapseRequested=!0,await t.header.updateComplete,await t.menu.updateComplete,t.menu.hasExternalDrawerControl===!0?(this.previewCollapsedSidebarWidth=o,this.toggleAttribute("data-preview-navigation-collapsed",!0),!0):(t.header.previewCollapseRequested=!1,t.menu.previewCollapseRequested=!1,await t.header.updateComplete,await t.menu.updateComplete,this.previewHeader=null,this.previewMenu=null,!1)}requestPreviewNavigationCollapse(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.previewNavigationCollapseTask)return;const e=this.setPreviewNavigationCollapse(!0);this.previewNavigationCollapseTask=e,e.then(()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)},()=>{this.previewNavigationCollapseTask===e&&(this.previewNavigationCollapseTask=null)})}createWorkspaceResizeHost(){const e=this;return{element:e,get previewSyncTask(){return e.previewSyncTask},get previewNavigationCollapseTask(){return e.previewNavigationCollapseTask},get previewSyncFrame(){return e.previewSyncFrame},get previewSyncGeneration(){return e.previewSyncGeneration},set previewSyncGeneration(t){e.previewSyncGeneration=t},get previewVisible(){return e.previewVisible},get allocatedPreviewWidth(){return e.allocatedPreviewWidth},get allocatedFlyoutWidth(){return e.allocatedFlyoutWidth},get preferredPreviewWidth(){return e.preferredPreviewWidth},set preferredPreviewWidth(t){e.preferredPreviewWidth=t},get preferredFlyoutWidth(){return e.preferredFlyoutWidth},set preferredFlyoutWidth(t){e.preferredFlyoutWidth=t},get align(){return e.align},get previewProbes(){return e.previewProbes},get flyoutProbes(){return e.flyoutProbes},get mainProbes(){return e.mainProbes},get mainMaxWidthProbe(){return e.mainMaxWidthProbe},schedulePreviewLayout:t=>e.schedulePreviewLayout(t),setWorkspaceWidths:(t,i,s)=>e.setWorkspaceWidths(t,i,s),setPreviewLayoutState:(t,i)=>e.setPreviewLayoutState(t,i)}}createWorkspaceResizeGeometry(){return{separatorIsAvailable:e=>this.separatorIsAvailable(e),mainResizeGrowthCapacity:e=>this.mainResizeGrowthCapacity(e),trailingPaneResizeRange:(e,t,i)=>this.trailingPaneResizeRange(e,t,i),mainPreviewResizeRange:(e,t,i)=>this.mainPreviewResizeRange(e,t,i),workspaceWidthCapacity:(e,t,i)=>this.workspaceWidthCapacity(e,t,i),flyoutOnlyResizeRange:(e,t)=>this.flyoutOnlyResizeRange(e,t),previewFlyoutResizeRange:(e,t)=>this.previewFlyoutResizeRange(e,t),probeWidth:e=>this.probeWidth(e),mainTrackUnbounded:()=>this.mainTrackUnbounded(),renderedWorkspaceWidths:()=>this.renderedWorkspaceWidths(),workspaceLogicalGutterWidths:()=>this.workspaceLogicalGutterWidths(),previewNavigationResizeAllowance:()=>this.previewNavigationResizeAllowance(),workspaceResizeDirection:()=>this.workspaceResizeDirection(),syncTrailingWorkspaceResizeAvailability:()=>this.syncTrailingWorkspaceResizeAvailability()}}ensureWorkspaceResizeController(){if(!this.workspaceResizable||!this.isConnected){this.toggleAttribute("data-workspace-resize-ready",!1);return}if(this.workspaceResizeController){this.toggleAttribute("data-workspace-resize-ready",!0);return}if(this.workspaceResizeControllerLoad)return;this.toggleAttribute("data-workspace-resize-ready",!1);const e=import("./workspace-resize-session.js").then(({WorkspaceResizeSessionController:t})=>{!this.workspaceResizable||!this.isConnected||(this.workspaceResizeController=new t(this.createWorkspaceResizeHost(),this.createWorkspaceResizeGeometry(),{requestPreviewNavigationCollapse:()=>this.requestPreviewNavigationCollapse(),resizeStep:i=>this.resizeStep(i)}),this.toggleAttribute("data-workspace-resize-ready",this.workspaceResizable))}).catch(t=>{this.toggleAttribute("data-workspace-resize-ready",!1),console.warn("<esp-page>: workspace resizing could not be loaded; retry is available",t)}).finally(()=>{this.workspaceResizeControllerLoad===e&&(this.workspaceResizeControllerLoad=void 0)});this.workspaceResizeControllerLoad=e}get resizeSession(){return this.workspaceResizeController?.currentSession??null}finishWorkspaceKeyboardResize(e=!0){this.workspaceResizeController?.finishWorkspaceKeyboardResize(e)}endWorkspaceResize(){this.workspaceResizeController?.endWorkspaceResize()}clearWorkspaceRecenteringState(){this.workspaceResizeController?.clearWorkspaceRecenteringState()}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),r=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${r}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=r}visiblePageInlineBounds(){const e=this.getBoundingClientRect();let t=e.left,i=e.right;const s=window.visualViewport,r=s?.offsetLeft??0,o=s?.width??document.documentElement.clientWidth;o>0&&(t=Math.max(t,r),i=Math.min(i,r+o));const a=this.getRootNode();let n=this.parentElement??(a instanceof ShadowRoot?a.host:null);for(;n;){const p=getComputedStyle(n).overflowX;if(["auto","clip","hidden","scroll"].includes(p)){const c=n.getBoundingClientRect();t=Math.max(t,c.left),i=Math.min(i,c.right)}const u=n.getRootNode();n=n.parentElement??(u instanceof ShadowRoot?u.host:null)}return new pe(t,i)}probeWidth(e){return ue(e)}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}syncMainMaximumConfiguration(){const e=getComputedStyle(this).getPropertyValue("--esp-page-main-max-width").trim()!=="";this.toggleAttribute("data-main-max-configured",e)}workspaceWidthCapacity(e,t,i=0){const s=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,r=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,o=Math.max(0,this.visiblePageInlineBounds().width-s-r-Math.max(0,i));return Y(o,e,t)}allocateWorkspaceWidths(e,t,i,s,r,o,a,n=null,p=null){const u=Math.max(0,e),c=Math.max(0,s),h=Math.max(c,r),f=Math.max(0,o),R=Math.max(f,a),m=t?this.preferredPreviewWidth??(n===null?null:A(n,c,h)):null,z=i?this.preferredFlyoutWidth??(p===null?null:A(p,f,R)):null;let y=0,d=0;t&&i?(y=Math.min(h,Math.max(c,u-f)),d=Math.min(R,Math.max(f,u-y))):t?y=Math.min(h,Math.max(c,u)):i&&(d=Math.min(R,Math.max(f,u))),t&&m!==null&&(y=A(m,c,h),i&&z===null&&(d=A(u-y,f,R))),i&&z!==null&&(d=A(z,f,R),t&&m===null&&(y=A(u-d,c,h)));let M=y+d-u;if(M>0&&i){const x=Math.min(M,Math.max(0,d-f));d-=x,M-=x}return M>0&&t&&(y-=Math.min(M,Math.max(0,y-c))),{previewWidth:y,flyoutWidth:d}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}trailingWorkspaceSeparator(){return this.hasAttribute("flyout-open")&&!this.hasAttribute("flyout-overlay-open")?"flyout-end":this.previewVisible?"preview-end":null}trailingWorkspacePane(){const e=this.trailingWorkspaceSeparator()==="flyout-end"?".esp-page-flyout":this.trailingWorkspaceSeparator()==="preview-end"?".esp-page-preview":null;return e?this.shadowRoot?.querySelector(e)??null:null}workspaceLogicalGutterWidths(){const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-canvas--left")?.getBoundingClientRect().width??0),t=this.trailingWorkspacePane();if(!t)return{leading:e,trailing:0};const i=this.visiblePageInlineBounds(),s=t.getBoundingClientRect(),r=this.workspaceResizeDirection()===1?i.right-s.right:s.left-i.left;return{leading:e,trailing:Math.max(0,r)}}syncTrailingWorkspaceResizeAvailability(){const{trailing:e}=this.workspaceLogicalGutterWidths();this.toggleAttribute("data-workspace-trailing-edge-exposed",this.trailingWorkspaceSeparator()!==null&&e>l)}trailingPaneResizeRange(e,t,i){const s=e==="preview-end"?this.previewMinWidthProbe:this.flyoutMinWidthProbe,r=e==="preview-end"?this.previewMaxWidthProbe:this.flyoutMaxWidthProbe,o=Math.max(0,this.probeWidth(s)),a=Math.max(o,this.probeWidth(r));return I.of(o,a).cappedAt(Math.max(0,t)+Math.max(0,i))}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?Re:be}previewNavigationResizeAllowance(){if(this.hasAttribute("data-preview-navigation-collapsed")||this.getPreviewNavigationPair()===null)return 0;const e=Math.max(0,this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0);return e>l&&(this.previewCollapsedSidebarWidth=e),e>l?e:this.previewCollapsedSidebarWidth}renderedWorkspaceWidths(){const e=this.shadowRoot?.querySelector(".esp-page-preview"),t=this.shadowRoot?.querySelector(".esp-page-flyout");return{previewWidth:this.allocatedPreviewWidth>0?this.allocatedPreviewWidth:e?.getBoundingClientRect().width??0,flyoutWidth:this.allocatedFlyoutWidth>0?this.allocatedFlyoutWidth:t?.getBoundingClientRect().width??0}}mainPreviewResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,i=this.previewNavigationResizeAllowance()){const s=this.previewProbes.minimum,r=this.previewProbes.maximum,o=this.mainProbes.minimum,a=Math.max(0,t+e),n=Math.max(0,a+i-o);return I.of(s,Math.max(s,Math.min(r,n)))}previewFlyoutResizeRange(e=this.renderedWorkspaceWidths().previewWidth,t=this.renderedWorkspaceWidths().flyoutWidth){const i=this.previewProbes.minimum,s=this.previewProbes.maximum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=e+t;return I.of(Math.max(i,a-o),Math.max(i,Math.min(s,a-r)))}separatorIsAvailable(e){return!this.workspaceResizable||this.hasAttribute("flyout-overlay-open")?!1:e==="main-preview"?this.previewVisible:e==="preview-end"||e==="flyout-end"?this.trailingWorkspaceSeparator()===e&&(this.hasAttribute("data-workspace-trailing-edge-exposed")||this.hasAttribute("data-workspace-position-held")||this.hasAttribute("data-workspace-keyboard-adjusting")):this.hasAttribute("flyout-open")}flyoutOnlyResizeRange(e=this.renderedWorkspaceWidths().flyoutWidth,t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0){const i=this.flyoutProbes.minimum,s=this.flyoutProbes.maximum,r=this.mainProbes.minimum,o=this.probeWidth(this.mainMaxWidthProbe),a=Math.max(0,t+e),n=o>0?Math.max(0,a-o):0,p=Math.max(i,n);return I.of(p,Math.min(s,a-r))}mainTrackUnbounded(){return this.kind==="site"||this.kind==="full"&&!this.hasAttribute("data-main-max-configured")}mainResizeGrowthCapacity(e){return this.mainTrackUnbounded()?Number.POSITIVE_INFINITY:Math.max(0,this.probeWidth(this.mainMaxWidthProbe)-e)}previewFitsWithinPage(e,t,i,s,r,o){const a=this.shadowRoot?.querySelector(".esp-page-main"),n=this.shadowRoot?.querySelector(".esp-page-preview"),p=this.shadowRoot?.querySelector(".esp-page-flyout");if(!a||!n||!p)return!1;const u=this.visiblePageInlineBounds(),c=a.getBoundingClientRect(),h=n.getBoundingClientRect(),f=p.getBoundingClientRect(),R=Math.max(t,i),m=Math.max(r,o),z=h.width+l>=t&&h.width<=R+l,y=!s||f.width+l>=r&&f.width<=m+l,d=h.left+l>=u.left&&h.right<=u.right+l&&(!s||f.left+l>=u.left&&f.right<=u.right+l),M=getComputedStyle(this).direction==="rtl"?c.left+l>=h.right&&(!s||h.left+l>=f.right):c.right<=h.left+l&&(!s||h.right<=f.left+l);return c.width+l>=e&&z&&y&&d&&M}flyoutFitsWithinPage(e,t,i){const s=this.shadowRoot?.querySelector(".esp-page-main"),r=this.shadowRoot?.querySelector(".esp-page-flyout");if(!s||!r)return!1;const o=this.visiblePageInlineBounds(),a=s.getBoundingClientRect(),n=r.getBoundingClientRect(),p=Math.max(t,i),u=n.width+l>=t&&n.width<=p+l,c=n.left+l>=o.left&&n.right<=o.right+l,h=getComputedStyle(this).direction==="rtl"?a.left+l>=n.right:a.right<=n.left+l;return a.width+l>=e&&u&&c&&h}workspaceMinimumsCanFit(e,t,i,s,r){const o=this.visiblePageInlineBounds().width;if(o<=0||e<=0||t&&i<=0||s&&r<=0)return!1;const a=this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,n=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,u=(t&&this.getPreviewNavigationPair()!==null?0:a)+n+e+(t?i:0)+(s?r:0);return o+l>=u}workspaceGeometrySample(){const e=this.visiblePageInlineBounds(),t=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect(),i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect(),s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect();return[e.left,e.right,e.width,t?.left??0,t?.right??0,t?.width??0,i?.left??0,i?.right??0,i?.width??0,s?.left??0,s?.right??0,s?.width??0]}workspaceGeometryMatches(e,t){return e.length===t.length&&e.every((i,s)=>Math.abs(i-(t[s]??i))<=l)}workspaceCandidateIsMeasurable(e,t){const i=this.shadowRoot?.querySelector(".esp-page-preview")?.getBoundingClientRect().width??0,s=this.shadowRoot?.querySelector(".esp-page-flyout")?.getBoundingClientRect().width??0;return(!e||i>l)&&(!t||s>l)}async candidateFitsAfterLayoutSettles(e,t,i){if(await this.updateComplete,e!==this.previewSyncGeneration||!this.isConnected)return null;let s=null,r=0;for(let o=0;o<ye;o+=1){if(await new Promise(n=>requestAnimationFrame(()=>n())),e!==this.previewSyncGeneration||!this.isConnected)return null;if(t())return!0;if(!i()){s=null,r=0;continue}const a=this.workspaceGeometrySample();if(r=s&&this.workspaceGeometryMatches(s,a)?r+1:1,r>=me)return!1;s=a}return null}async promoteFlyoutIfClipped(e,t,i,s){if(i<=0)return!1;const r=await this.candidateFitsAfterLayoutSettles(e,()=>this.flyoutFitsWithinPage(t,i,s),()=>this.workspaceCandidateIsMeasurable(!1,!0));return r===null?!0:r?!1:(await this.promoteFlyoutToOverlay(),!0)}async promoteFlyoutToOverlay(){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),this.flyoutOverlayPromotionWidth===null&&(this.flyoutOverlayPromotionWidth=this.visiblePageInlineBounds().width,this.armFlyoutOverlayRecovery()),await this.setPageFlyoutOverlay(!0)}async syncPreviewLayout(e,t=!0){if(e!==this.previewSyncGeneration||!this.isConnected||this.resizeSession||this.hasAttribute("data-workspace-keyboard-adjusting")||this.hasAttribute("data-workspace-position-held"))return;let i=!1;const s=this.previewVisible;this.toggleAttribute("data-preview-measuring",!0);try{const r=this.previewOpen&&this.previewHasContent(),o=this.previewMediaQuery?.matches??!1,a=this.hasAttribute("flyout-overlay-open"),n=this.hasAttribute("flyout-open"),p=this.hasAttribute("data-preview-navigation-collapsed"),u=this.getPreviewNavigationPair(),c=u===null?0:p?this.previewCollapsedSidebarWidth:this.shadowRoot?.querySelector(".esp-page-left")?.getBoundingClientRect().width??0,h=this.probeWidth(this.previewMinWidthProbe),f=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),R=this.probeWidth(this.previewMaxWidthProbe),m=this.probeWidth(this.flyoutMinWidthProbe),z=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),y=this.probeWidth(this.flyoutMaxWidthProbe),d=this.probeWidth(this.mainMinWidthProbe);this.syncMainMaximumConfiguration();const M=this.probeWidth(this.mainMaxWidthProbe),x=this.mainTrackUnbounded()?0:M,G=this.openAutoFlyouts().some(k=>k.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),G){const k=this.visiblePageInlineBounds().width,F=this.flyoutOverlayPromotionWidth===null||k>=this.flyoutOverlayPromotionWidth+ge;!o&&t&&this.flyoutOverlayRecoveryReady&&F&&this.workspaceMinimumsCanFit(d,r,h,!0,m)?await this.setPageFlyoutOverlay(!1):o&&await this.setPageFlyoutOverlay(!1);return}if(await this.updateComplete,e!==this.previewSyncGeneration)return;const C=r&&!o&&!a,v=n&&!o;if(d>0&&(!C||h>0)&&(!v||m>0)&&(C||v)&&!this.workspaceMinimumsCanFit(d,C,h,v,m)){v&&await this.promoteFlyoutToOverlay();return}const E=(C?h:0)+(v?m:0),q=C&&this.preferredPreviewWidth!==null||v&&this.preferredFlyoutWidth!==null||(C&&f!==null||v&&z!==null),Q=(C?this.preferredPreviewWidth===null?h:A(this.preferredPreviewWidth,h,R):0)+(v?this.preferredFlyoutWidth===null?m:A(this.preferredFlyoutWidth,m,y):0),w=k=>{const F=ce(k,E,Q),O=this.allocateWorkspaceWidths(F,C,v,h,R,m,y,f,z),H=k.maximum+d,ee=Math.max(0,H-k.natural),ae=O.previewWidth+O.flyoutWidth,te=Math.max(0,Math.min(ee,H-ae));return{allocation:O,mainWidth:te,reclaimsMain:te+l<ee}},L=(k,F)=>Math.abs(k.mainWidth-F.mainWidth)>l||Math.abs(k.allocation.previewWidth-F.allocation.previewWidth)>l||Math.abs(k.allocation.flyoutWidth-F.allocation.flyoutWidth)>l,V=this.workspaceWidthCapacity(d,x,p?c:0),$=w(V);let B=$.allocation;if(this.setWorkspaceWidths(B.previewWidth,B.flyoutWidth,q),!C||h<=0){v&&await this.promoteFlyoutIfClipped(e,d,m,y);return}if(u!==null&&c>l){const k=V.maximum+d,F=Y(k+c,d,x),O=w(F);(p?L(w(Y(Math.max(0,k-We),d,x)),O):$.reclaimsMain&&L($,O))?i=await this.setPreviewNavigationCollapse(!0):await this.setPreviewNavigationCollapse(!1)}else await this.setPreviewNavigationCollapse(!1);if(e!==this.previewSyncGeneration)return;const Z=this.workspaceWidthCapacity(d,x);if(Z.maximum+l<E){this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?m:0),i=!1,v&&await this.promoteFlyoutToOverlay();return}const X=w(Z);if(B=X.allocation,this.setWorkspaceWidths(B.previewWidth,B.flyoutWidth,q),s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,X.reclaimsMain),await this.updateComplete,e!==this.previewSyncGeneration)return;const J=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(d,h,R,v,m,y),()=>this.workspaceCandidateIsMeasurable(!0,v));if(J===null)return;J?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,v?m:0),i=!1,v&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.syncTrailingWorkspaceResizeAvailability(),this.requestUpdate())}}runScheduledPreviewLayout(){const e=this.previewSyncGeneration,t=this.previewOverlayRecoveryRequested;this.previewOverlayRecoveryRequested=!1,this.previewSyncTask=this.previewSyncTask.then(()=>this.syncPreviewLayout(e,t)).catch(()=>{})}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(fe),this.previewMediaQuery.addEventListener("change",this.onPreviewMediaChange)),!this.previewResizeObserver&&typeof ResizeObserver<"u"){this.previewResizeObserver=new ResizeObserver(this.onPreviewResize),this.previewResizeObserver.observe(this);const e=this.shadowRoot?.querySelector(".esp-page-left");e&&this.previewResizeObserver.observe(e);for(const t of[this.previewMinWidthProbe,this.previewDefaultWidthProbe,this.previewMaxWidthProbe,this.flyoutMinWidthProbe,this.flyoutDefaultWidthProbe,this.flyoutMaxWidthProbe,this.mainMinWidthProbe,this.mainConfiguredMaxWidthProbe,this.mainMaxWidthProbe,this.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(se)||e.querySelector(se)!==null}syncFooterLandmark(){const t=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(i=>this.footerElementProvidesLandmark(i));this.footerWrapperIsLandmark=!t}showPreview(){this.previewOpen=!0}closePreview(){this.previewOpen=!1}togglePreview(){this.previewOpen=!this.previewOpen}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState(),this.setupPreviewLayoutObserver()}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.workspaceResizeControllerLoad,this.isUpdatePending?super.getUpdateComplete():e}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&he().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"}),(e.has("previewOpen")||e.has("previewCollapseSidebar")||e.has("align"))&&this.schedulePreviewLayout(!0),e.has("workspaceResizable")&&(this.workspaceResizable?this.ensureWorkspaceResizeController():(this.toggleAttribute("data-workspace-resize-ready",!1),this.finishWorkspaceKeyboardResize(),this.endWorkspaceResize(),this.clearWorkspaceRecenteringState())),this.warnSiteRailSlots()}warnSiteRailSlots(){this.kind!=="site"||this.warnedSiteRails||!["sidebar","right"].some(t=>(this.shadowRoot?.querySelector(`slot[name="${t}"]`)?.assignedElements({flatten:!0}).length??0)>0)||(this.warnedSiteRails=!0,console.warn('Espalier page: kind="site" does not compose with the sidebar/right rails \u2014 sections span the full viewport and the shared well column ignores rail width. Use kind="wide" for railed layouts, or remove the rail slots from a site page.'))}render(){const e=this.fixedMenus||this.headerPosition==="fixed",t=!e&&this.headerPosition==="sticky",i=this.mainPreviewResizeRange(this.renderedWorkspaceWidths().previewWidth,this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,this.previewNavigationResizeAllowance()),s=this.previewProbes.minimum,r=this.flyoutProbes.minimum,o=this.flyoutProbes.maximum,a=this.mainProbes.minimum,n=this.probeWidth(this.mainMaxWidthProbe),p=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,u=this.hasAttribute("flyout-open"),c=p+this.allocatedPreviewWidth,h=i.min<=s+l,f=u&&h?Math.max(0,this.allocatedFlyoutWidth-r):0,R=Math.max(a,c-i.max),m=Math.max(R,Math.max(a,c-i.min)+f),z=n>0?Math.max(R,Math.min(Math.max(a,n),m)):m,y=n>0&&p+l>=n?`${Math.round(p)}px main, ${Math.round(this.allocatedPreviewWidth)}px preview`:ie;let d,M;if(this.previewVisible){const w=this.previewFlyoutResizeRange(this.renderedWorkspaceWidths().previewWidth,this.renderedWorkspaceWidths().flyoutWidth),L=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,$=w.min<=s+l?Math.max(0,p-a):0;d=Math.max(r,L-w.max),M=Math.max(d,Math.min(o,L-w.min+$))}else{const w=this.flyoutOnlyResizeRange(this.renderedWorkspaceWidths().flyoutWidth,p);d=w.min,M=w.max}const x=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",G=this.previewVisible?"Resize preview and help panes":"Resize help pane",C=this.previewVisible?`${Math.round(this.allocatedPreviewWidth)}px preview, ${Math.round(this.allocatedFlyoutWidth)}px help`:`${Math.round(this.allocatedFlyoutWidth)}px help`,v=u?"flyout-end":"preview-end",D=v==="flyout-end"?this.allocatedFlyoutWidth:this.allocatedPreviewWidth,E=this.workspaceLogicalGutterWidths(),_=this.trailingPaneResizeRange(v,D,E.leading+E.trailing),j=v==="flyout-end"?"flyout-end-resize-handle":"preview-end-resize-handle",q=v==="flyout-end"?"Resize help pane from its outer edge":"Resize preview pane from its outer edge";return re`
2
+ <div part="wrapper" class="esp-page ${ne({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
3
3
  <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
4
4
  <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
5
5
  <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -23,7 +23,7 @@ var M=function(q,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnP
23
23
  <div class="sticky-wrapper">
24
24
  <slot
25
25
  name="flyout"
26
- ${z(this.flyoutSlot)}
26
+ ${b(this.flyoutSlot)}
27
27
  @slotchange=${()=>this.syncFlyoutState()}
28
28
  ></slot>
29
29
  </div>
@@ -31,64 +31,64 @@ var M=function(q,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnP
31
31
  <div
32
32
  class="esp-page-preview-width-probe esp-page-preview-min-width-probe"
33
33
  aria-hidden="true"
34
- ${z(this.previewMinWidthProbe)}
34
+ ${b(this.previewMinWidthProbe)}
35
35
  ></div>
36
36
  <div
37
37
  class="esp-page-preview-default-width-probe"
38
38
  aria-hidden="true"
39
- ${z(this.previewDefaultWidthProbe)}
39
+ ${b(this.previewDefaultWidthProbe)}
40
40
  ></div>
41
41
  <div
42
42
  class="esp-page-preview-max-width-probe"
43
43
  aria-hidden="true"
44
- ${z(this.previewMaxWidthProbe)}
44
+ ${b(this.previewMaxWidthProbe)}
45
45
  ></div>
46
46
  <div
47
47
  class="esp-page-flyout-min-width-probe"
48
48
  aria-hidden="true"
49
- ${z(this.flyoutMinWidthProbe)}
49
+ ${b(this.flyoutMinWidthProbe)}
50
50
  ></div>
51
51
  <div
52
52
  class="esp-page-flyout-default-width-probe"
53
53
  aria-hidden="true"
54
- ${z(this.flyoutDefaultWidthProbe)}
54
+ ${b(this.flyoutDefaultWidthProbe)}
55
55
  ></div>
56
56
  <div
57
57
  class="esp-page-flyout-max-width-probe"
58
58
  aria-hidden="true"
59
- ${z(this.flyoutMaxWidthProbe)}
59
+ ${b(this.flyoutMaxWidthProbe)}
60
60
  ></div>
61
61
  <div
62
62
  class="esp-page-preview-main-min-probe esp-page-main-min-width-probe"
63
63
  aria-hidden="true"
64
- ${z(this.mainMinWidthProbe)}
64
+ ${b(this.mainMinWidthProbe)}
65
65
  ></div>
66
66
  <div
67
67
  class="esp-page-main-configured-max-width-probe"
68
68
  aria-hidden="true"
69
- ${z(this.mainConfiguredMaxWidthProbe)}
69
+ ${b(this.mainConfiguredMaxWidthProbe)}
70
70
  ></div>
71
71
  <div
72
72
  class="esp-page-main-max-width-probe"
73
73
  aria-hidden="true"
74
- ${z(this.mainMaxWidthProbe)}
74
+ ${b(this.mainMaxWidthProbe)}
75
75
  ></div>
76
76
  <div
77
77
  class="esp-page-resize-step-probe"
78
78
  aria-hidden="true"
79
- ${z(this.resizeStepProbe)}
79
+ ${b(this.resizeStepProbe)}
80
80
  ></div>
81
81
  <div
82
82
  class="esp-page-resize-large-step-probe"
83
83
  aria-hidden="true"
84
- ${z(this.resizeLargeStepProbe)}
84
+ ${b(this.resizeLargeStepProbe)}
85
85
  ></div>
86
- <div class="esp-page-preview-space" ${z(this.previewSpace)}>
86
+ <div class="esp-page-preview-space" ${b(this.previewSpace)}>
87
87
  <aside part="preview" class="esp-page-preview" aria-label=${this.previewLabel}>
88
88
  <div part="preview-content" class="sticky-wrapper">
89
89
  <slot
90
90
  name="preview"
91
- ${z(this.previewSlot)}
91
+ ${b(this.previewSlot)}
92
92
  @slotchange=${this.schedulePreviewLayout}
93
93
  ></slot>
94
94
  </div>
@@ -101,804 +101,61 @@ var M=function(q,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnP
101
101
  role="separator"
102
102
  aria-orientation="vertical"
103
103
  aria-label="Resize main pane"
104
- aria-valuemin=${Math.round(W)}
105
- aria-valuemax=${Math.round(w)}
106
- aria-valuenow=${Math.round(d)}
107
- aria-valuetext=${c}
104
+ aria-valuemin=${Math.round(R)}
105
+ aria-valuemax=${Math.round(z)}
106
+ aria-valuenow=${Math.round(p)}
107
+ aria-valuetext=${y}
108
108
  tabindex="0"
109
- @pointerdown=${f=>this.onWorkspaceResizePointerDown("main-preview",f)}
109
+ @pointerdown=${w=>this.onWorkspaceResizePointerDown("main-preview",w)}
110
110
  @pointermove=${this.onWorkspaceResizePointerMove}
111
111
  @pointerup=${this.onWorkspaceResizePointerEnd}
112
112
  @pointercancel=${this.onWorkspaceResizePointerEnd}
113
113
  @lostpointercapture=${this.onWorkspaceResizePointerEnd}
114
- @keydown=${f=>this.onWorkspaceResizeKeyDown("main-preview",f)}
114
+ @keydown=${w=>this.onWorkspaceResizeKeyDown("main-preview",w)}
115
115
  @blur=${this.onWorkspaceResizeBlur}
116
116
  ></div>
117
117
  <div
118
- part=${P}
118
+ part=${x}
119
119
  class="esp-page-workspace-resize-handle esp-page-preview-flyout-resize-handle"
120
120
  role="separator"
121
121
  aria-orientation="vertical"
122
- aria-label=${C}
123
- aria-valuemin=${Math.round(h)}
124
- aria-valuemax=${Math.round(b)}
122
+ aria-label=${G}
123
+ aria-valuemin=${Math.round(d)}
124
+ aria-valuemax=${Math.round(M)}
125
125
  aria-valuenow=${Math.round(this.allocatedFlyoutWidth)}
126
- aria-valuetext=${k}
126
+ aria-valuetext=${C}
127
127
  tabindex="0"
128
- @pointerdown=${f=>this.onWorkspaceResizePointerDown("preview-flyout",f)}
128
+ @pointerdown=${w=>this.onWorkspaceResizePointerDown("preview-flyout",w)}
129
129
  @pointermove=${this.onWorkspaceResizePointerMove}
130
130
  @pointerup=${this.onWorkspaceResizePointerEnd}
131
131
  @pointercancel=${this.onWorkspaceResizePointerEnd}
132
132
  @lostpointercapture=${this.onWorkspaceResizePointerEnd}
133
- @keydown=${f=>this.onWorkspaceResizeKeyDown("preview-flyout",f)}
133
+ @keydown=${w=>this.onWorkspaceResizeKeyDown("preview-flyout",w)}
134
134
  @blur=${this.onWorkspaceResizeBlur}
135
135
  ></div>
136
136
  <div
137
- part=${O}
137
+ part=${j}
138
138
  class="esp-page-workspace-resize-handle esp-page-workspace-end-resize-handle"
139
139
  role="separator"
140
140
  aria-orientation="vertical"
141
- aria-label=${L}
142
- aria-valuemin=${Math.round(E.min)}
143
- aria-valuemax=${Math.round(E.max)}
144
- aria-valuenow=${Math.round(F)}
141
+ aria-label=${q}
142
+ aria-valuemin=${Math.round(_.min)}
143
+ aria-valuemax=${Math.round(_.max)}
144
+ aria-valuenow=${Math.round(D)}
145
145
  tabindex="0"
146
- @pointerdown=${f=>this.onWorkspaceResizePointerDown(g,f)}
146
+ @pointerdown=${w=>this.onWorkspaceResizePointerDown(v,w)}
147
147
  @pointermove=${this.onWorkspaceResizePointerMove}
148
148
  @pointerup=${this.onWorkspaceResizePointerEnd}
149
149
  @pointercancel=${this.onWorkspaceResizePointerEnd}
150
150
  @lostpointercapture=${this.onWorkspaceResizePointerEnd}
151
- @keydown=${f=>this.onWorkspaceResizeKeyDown(g,f)}
151
+ @keydown=${w=>this.onWorkspaceResizeKeyDown(v,w)}
152
152
  @blur=${this.onWorkspaceResizeBlur}
153
153
  ></div>
154
154
  </div>
155
- <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":ee}>
156
- <slot name="footer" ${z(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
155
+ <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":ie}>
156
+ <slot name="footer" ${b(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
157
157
  </div>
158
- <div id="dialog-drop-zone" ${z(this.dialogZone)}></div>
158
+ <div id="dialog-drop-zone" ${b(this.dialogZone)}></div>
159
159
  <esp-toaster></esp-toaster>
160
160
  </div>
161
- `}};x.styles=[...te.styles,re`
162
- :host {
163
- --_esp-page-resolved-max-width: var(
164
- --esp-page-main-max-width,
165
- var(--esp-page-max-width, 1536px)
166
- );
167
- --_esp-page-main-min-width: var(
168
- --esp-page-main-min-width,
169
- var(--esp-page-preview-min-main-width, 30rem)
170
- );
171
- --_esp-page-preview-resolved-min-width: var(
172
- --esp-page-preview-width,
173
- var(--esp-page-preview-min-width, 22.5rem)
174
- );
175
- --_esp-page-preview-resolved-max-width: var(
176
- --esp-page-preview-width,
177
- var(--esp-page-preview-max-width, 48rem)
178
- );
179
- --_esp-page-flyout-resolved-min-width: var(
180
- --esp-page-flyout-width,
181
- var(--esp-page-flyout-min-width, 20rem)
182
- );
183
- --_esp-page-flyout-resolved-max-width: var(
184
- --esp-page-flyout-width,
185
- var(--esp-page-flyout-max-width, 30rem)
186
- );
187
- --_esp-page-preview-used-width: 0px;
188
- --_esp-page-flyout-used-width: 0px;
189
- --_esp-page-workspace-track: minmax(
190
- calc(var(--_esp-page-flyout-min) + var(--_esp-page-preview-min)),
191
- calc(var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width))
192
- );
193
-
194
- --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width));
195
-
196
- --_esp-page-gutter-left: 0fr;
197
- --_esp-page-gutter-right: 1fr;
198
-
199
- --_esp-page-flyout-min: 0px;
200
-
201
- --_esp-page-preview-min: 0px;
202
-
203
- --_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow);
204
-
205
- --_esp-page-surface-shadow: var(
206
- --esp-page-surface-shadow,
207
- -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow),
208
- var(--_esp-page-surface-edge-shadow)
209
- );
210
- --_esp-page-surface-border: var(--esp-page-surface-border, none);
211
- --_esp-page-fixed-header-offset: var(
212
- --esp-page-fixed-header-offset,
213
- var(--esp-header-height, calc(4.5 * var(--esp-size-small)))
214
- );
215
-
216
- display: block;
217
- }
218
-
219
- :host([kind="narrow"]) {
220
- --_esp-page-resolved-max-width: var(
221
- --esp-page-main-max-width,
222
- var(--esp-page-max-width, 768px)
223
- );
224
- }
225
-
226
- :host([align="center"]) {
227
- --_esp-page-gutter-left: 1fr;
228
- --_esp-page-gutter-right: 1fr;
229
- }
230
-
231
- :host([align="end"]) {
232
- --_esp-page-gutter-left: 1fr;
233
- --_esp-page-gutter-right: 0fr;
234
- }
235
-
236
-
237
- :host([kind="full"]) {
238
- --_esp-page-resolved-max-width: var(
239
- --esp-page-main-max-width,
240
- var(--esp-page-max-width, none)
241
- );
242
- }
243
-
244
- :host([kind="full"]:not([data-main-max-configured])) {
245
- --_esp-page-main-track: 1fr;
246
- --_esp-page-gutter-left: 0fr;
247
- --_esp-page-gutter-right: 0fr;
248
- }
249
-
250
-
251
- :host([kind="site"]) {
252
- --_esp-page-resolved-max-width: none;
253
- --_esp-page-main-track: 1fr;
254
- --_esp-page-gutter-left: 0fr;
255
- --_esp-page-gutter-right: 0fr;
256
- }
257
-
258
-
259
- :host([flyout-open]) {
260
- --_esp-page-flyout-min: var(--_esp-page-flyout-resolved-min-width);
261
- }
262
-
263
- :host([preview-reclaiming]) {
264
- --_esp-page-preview-min: var(--_esp-page-preview-resolved-min-width);
265
- }
266
-
267
-
268
- :host([flyout-open][data-workspace-targeted]) {
269
- --_esp-page-flyout-min: var(--_esp-page-flyout-used-width);
270
- }
271
-
272
- :host([preview-reclaiming][data-workspace-targeted]) {
273
- --_esp-page-preview-min: var(--_esp-page-preview-used-width);
274
- }
275
-
276
- :host([flyout-open]),
277
- :host([preview-reclaiming]) {
278
- --_esp-page-main-track: minmax(
279
- var(--_esp-page-main-min-width),
280
- var(--_esp-page-resolved-max-width)
281
- );
282
- }
283
-
284
- :host([kind="full"]:not([data-main-max-configured])[flyout-open]),
285
- :host([kind="full"]:not([data-main-max-configured])[preview-reclaiming]),
286
- :host([kind="site"][flyout-open]),
287
- :host([kind="site"][preview-reclaiming]) {
288
- --_esp-page-main-track: minmax(var(--_esp-page-main-min-width), 1fr);
289
- }
290
-
291
-
292
- @media (max-width: 50em) {
293
- :host([flyout-open]) {
294
- --_esp-page-flyout-min: 0px;
295
- }
296
-
297
- :host([preview-reclaiming]) {
298
- --_esp-page-preview-min: 0px;
299
- }
300
-
301
- :host([flyout-open]),
302
- :host([preview-reclaiming]) {
303
- --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width));
304
- }
305
-
306
- :host([kind="full"]:not([data-main-max-configured])[flyout-open]),
307
- :host([kind="full"]:not([data-main-max-configured])[preview-reclaiming]),
308
- :host([kind="site"][flyout-open]),
309
- :host([kind="site"][preview-reclaiming]) {
310
- --_esp-page-main-track: 1fr;
311
- }
312
-
313
- .esp-page > .esp-page-preview-space,
314
- .esp-page > .esp-page-workspace-resize-handles {
315
- display: none;
316
- }
317
- }
318
-
319
-
320
- :host([flyout-overlay-open]) .esp-page > div.esp-page-flyout {
321
- z-index: var(--esp-flyout-z-index, 3000);
322
- }
323
-
324
-
325
- :host([descendant-flyout-overlay-open]) .esp-page > div.esp-page-main {
326
- z-index: var(--esp-flyout-z-index, 3000);
327
- overflow: visible;
328
- }
329
-
330
-
331
- :host([flyout-anchored]:not([flyout-full-height]))
332
- .esp-page
333
- > div.esp-page-flyout
334
- > .sticky-wrapper {
335
- position: static;
336
- }
337
-
338
-
339
- :host([flyout-full-height]) .esp-page > div.esp-page-flyout {
340
- grid-row: top-start / footer-end;
341
- z-index: calc(var(--esp-page-header-z-index, 20) + 2);
342
- }
343
-
344
-
345
- :host([flyout-anchored][preview-visible]) .esp-page > div.esp-page-flyout {
346
- z-index: calc(var(--esp-page-header-z-index, 20) + 2);
347
- }
348
-
349
- slot[name="flyout"]::slotted(esp-flyout) {
350
- --_esp-flyout-used-width: var(--_esp-page-flyout-used-width);
351
- --_esp-flyout-preview-bridge-width: 0px;
352
- --_esp-flyout-preview-anchor-display: none;
353
- }
354
-
355
- :host([preview-visible]) slot[name="flyout"]::slotted(esp-flyout) {
356
- --_esp-flyout-preview-bridge-width: var(--_esp-page-preview-used-width);
357
- --_esp-flyout-preview-anchor-display: block;
358
- }
359
-
360
-
361
- slot[name="flyout"]::slotted(esp-flyout[match-surface]) {
362
- --esp-flyout-shadow: var(--_esp-page-surface-edge-shadow);
363
- }
364
-
365
-
366
- slot[name="header"]::slotted(esp-header) {
367
- --esp-header-content-max-width: var(--_esp-page-resolved-max-width);
368
- --esp-header-content-lead: 0;
369
- }
370
-
371
- :host([align="center"]) slot[name="header"]::slotted(esp-header) {
372
- --esp-header-content-lead: 0.5;
373
- }
374
-
375
- :host([align="end"]) slot[name="header"]::slotted(esp-header) {
376
- --esp-header-content-lead: 1;
377
- }
378
-
379
-
380
- :host([kind="full"]:not([data-main-max-configured]))
381
- slot[name="header"]::slotted(esp-header) {
382
- --esp-header-content-max-width: 100%;
383
- }
384
-
385
-
386
- slot[name="footer"]::slotted(esp-footer) {
387
- --esp-footer-content-max-width: var(--_esp-page-resolved-max-width);
388
- --esp-footer-content-lead: 0;
389
- }
390
-
391
- :host([align="center"]) slot[name="footer"]::slotted(esp-footer) {
392
- --esp-footer-content-lead: 0.5;
393
- }
394
-
395
- :host([align="end"]) slot[name="footer"]::slotted(esp-footer) {
396
- --esp-footer-content-lead: 1;
397
- }
398
-
399
- :host([kind="full"]:not([data-main-max-configured]))
400
- slot[name="footer"]::slotted(esp-footer) {
401
- --esp-footer-content-max-width: 100%;
402
- }
403
-
404
-
405
- :host([kind="site"]) slot[name="header"]::slotted(esp-header) {
406
- --esp-header-content-max-width: var(--esp-page-well-max-width, 72rem);
407
- --esp-header-content-lead: 0.5;
408
- }
409
-
410
- :host([kind="site"]) slot[name="footer"]::slotted(esp-footer) {
411
- --esp-footer-content-max-width: var(--esp-page-well-max-width, 72rem);
412
- --esp-footer-content-lead: 0.5;
413
- }
414
-
415
-
416
- :host([contained]) .esp-page > div.esp-page-top,
417
- :host([contained]) .esp-page > div.esp-page-footer {
418
- grid-column: surface;
419
- }
420
-
421
-
422
- :host([contained]) slot[name="header"]::slotted(esp-header) {
423
- --esp-header-shadow: none;
424
- }
425
-
426
-
427
- :host([contained]:not([kind="site"])) slot[name="header"]::slotted(esp-header) {
428
- --esp-header-content-max-width: 100%;
429
- }
430
-
431
- :host([contained]:not([kind="site"])) slot[name="footer"]::slotted(esp-footer) {
432
- --esp-footer-content-max-width: 100%;
433
- }
434
-
435
- :host([kind="narrow"]) .esp-page > div.esp-page-main {
436
-
437
- > ::slotted(*) {
438
- max-inline-size: var(--esp-measure, 66ch);
439
- }
440
- }
441
-
442
- #dialog-drop-zone {
443
- z-index: 4000;
444
- position: absolute;
445
- }
446
-
447
- :host([preview-visible]) .esp-page > div.esp-page-preview-space > .esp-page-preview {
448
- display: block;
449
- }
450
-
451
- :host([workspace-resizable][preview-visible]:not([flyout-overlay-open]))
452
- .esp-page
453
- > div.esp-page-workspace-resize-handles
454
- > .esp-page-main-preview-resize-handle,
455
- :host([workspace-resizable][flyout-open]:not([flyout-overlay-open]))
456
- .esp-page
457
- > div.esp-page-workspace-resize-handles
458
- > .esp-page-preview-flyout-resize-handle {
459
- display: block;
460
- }
461
-
462
- :host([workspace-resizable][data-workspace-trailing-edge-exposed]:not([flyout-overlay-open]))
463
- .esp-page
464
- > div.esp-page-workspace-resize-handles
465
- > .esp-page-workspace-end-resize-handle,
466
- :host([workspace-resizable][data-workspace-position-held]:not([flyout-overlay-open]))
467
- .esp-page
468
- > div.esp-page-workspace-resize-handles
469
- > .esp-page-workspace-end-resize-handle {
470
- display: block;
471
- }
472
-
473
-
474
- :host([data-workspace-position-held]) {
475
- --_esp-page-gutter-left: var(--_esp-page-resize-leading-gutter-width, 0px);
476
- --_esp-page-gutter-right: 1fr;
477
- }
478
-
479
- :host([data-workspace-resizing]) {
480
- cursor: col-resize;
481
- user-select: none;
482
- }
483
-
484
-
485
- :host([data-workspace-resizing]) .esp-page,
486
- :host([data-workspace-keyboard-adjusting]) .esp-page {
487
- transition: none;
488
- }
489
-
490
-
491
- :host([data-preview-navigation-collapsed]) .esp-page > aside.esp-page-left {
492
- inline-size: 0;
493
- min-inline-size: 0;
494
- }
495
-
496
- :host([data-preview-measuring]) .esp-page {
497
- transition: none;
498
- }
499
-
500
-
501
- :host([data-preview-validating]) .esp-page-preview {
502
- visibility: hidden;
503
- }
504
-
505
- .esp-page {
506
-
507
- min-height: 100vh;
508
- min-height: 100dvh;
509
- display: grid;
510
- grid-template-columns:
511
- [full-start canvas-left-start] var(--_esp-page-gutter-left)
512
- [canvas-left-end surface-start left-start] min-content
513
- [left-end main-start] var(--_esp-page-main-track)
514
- [main-end right-start] min-content
515
- [right-end surface-end canvas-right-start flyout-start]
516
- var(--_esp-page-workspace-track)
517
- [flyout-end] var(--_esp-page-gutter-right)
518
- [canvas-right-end full-end];
519
-
520
- transition: grid-template-columns 0.25s ease;
521
- grid-template-rows:
522
- [top-start] min-content
523
- [top-end content-start] 1fr
524
- [content-end footer-start] min-content
525
- [footer-end];
526
- overflow-x: clip;
527
- background: var(--esp-page-background, var(--esp-color-background));
528
- line-height: 1.5;
529
- font-family: var(--esp-font-body);
530
- font-size: var(--esp-type-normal);
531
- color: var(--esp-color-text);
532
- position: relative;
533
-
534
- &:before {
535
- content: " ";
536
- display: block;
537
- position: absolute;
538
- left: 0;
539
- top: 0;
540
- right: 0;
541
- bottom: 0;
542
- opacity: var(--esp-page-background-image-opacity, 1);
543
- background-image: var(--esp-page-background-image, none);
544
- z-index: 1;
545
- }
546
-
547
- > div.esp-page-top {
548
- z-index: var(--esp-page-header-z-index, 20);
549
- grid-column: full;
550
- grid-row: top;
551
- position: relative;
552
-
553
- contain: inline-size;
554
- }
555
-
556
-
557
- aside.esp-page-left,
558
- aside.esp-page-right {
559
- z-index: 5;
560
- grid-row: content;
561
- position: relative;
562
-
563
- }
564
-
565
- > aside.esp-page-left {
566
- grid-column: left;
567
- }
568
-
569
- > div.esp-page-main {
570
- z-index: 5;
571
- grid-column: main;
572
- grid-row: content;
573
- position: relative;
574
- overflow: hidden;
575
-
576
- background: var(--esp-page-main-background, transparent);
577
-
578
- contain: inline-size;
579
- }
580
-
581
- > aside.esp-page-right {
582
- grid-column: right;
583
- }
584
-
585
-
586
- > div.esp-page-flyout {
587
-
588
- grid-column: flyout;
589
- justify-self: start;
590
- grid-row: content;
591
- z-index: 5;
592
- position: relative;
593
- inline-size: var(--_esp-page-flyout-used-width);
594
- min-inline-size: 0;
595
- margin-inline-start: var(--_esp-page-preview-used-width);
596
-
597
-
598
- @media (max-width: 50em) {
599
- z-index: var(--esp-flyout-z-index, 3000);
600
- }
601
- }
602
-
603
-
604
- > div.esp-page-preview-space {
605
- grid-column: flyout;
606
- grid-row: content;
607
- z-index: 4;
608
- position: relative;
609
- min-inline-size: 0;
610
-
611
- > .esp-page-preview {
612
- display: none;
613
- box-sizing: border-box;
614
- inline-size: var(--_esp-page-preview-used-width);
615
- position: relative;
616
- background: var(
617
- --esp-page-preview-background,
618
- var(
619
- --esp-page-main-background,
620
- var(--esp-page-background, var(--esp-color-background))
621
- )
622
- );
623
- border-inline-start: var(--esp-page-preview-border, 1px dotted var(--esp-color-border));
624
- box-shadow: var(--esp-page-preview-shadow, var(--_esp-page-surface-edge-shadow));
625
- }
626
- }
627
-
628
-
629
- > div.esp-page-workspace-resize-handles {
630
- grid-column: flyout;
631
- grid-row: top-start / footer-end;
632
- z-index: calc(var(--esp-page-header-z-index, 20) + 3);
633
- position: relative;
634
- min-inline-size: 0;
635
- pointer-events: none;
636
- }
637
-
638
- > div.esp-page-workspace-resize-handles > .esp-page-workspace-resize-handle {
639
- display: none;
640
- box-sizing: border-box;
641
- position: absolute;
642
- inset-block: 0;
643
- z-index: 3;
644
- inline-size: var(--esp-page-resize-handle-hit-size, 2.75rem);
645
- margin-inline-start: calc(-0.5 * var(--esp-page-resize-handle-hit-size, 2.75rem));
646
- border: 0;
647
- outline: 0;
648
- background: transparent;
649
- cursor: col-resize;
650
- pointer-events: auto;
651
- touch-action: none;
652
-
653
-
654
- &::after {
655
- content: "";
656
- display: block;
657
- position: sticky;
658
- inset-block-start: 0;
659
- box-sizing: border-box;
660
- inline-size: 0;
661
- margin-inline: auto;
662
- block-size: 100dvh;
663
- max-block-size: 100%;
664
- pointer-events: none;
665
- }
666
-
667
- &:focus-visible::after {
668
- border-inline-start: var(
669
- --esp-page-resize-focus-outline,
670
- 2px dashed var(--esp-color-link)
671
- );
672
-
673
- box-shadow: var(--esp-page-resize-focus-shadow, 0 0 0.75rem var(--esp-color-link));
674
- }
675
- }
676
-
677
- > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle {
678
- inset-inline-start: 0;
679
- }
680
-
681
- > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle {
682
- inset-inline-start: var(--_esp-page-preview-used-width);
683
- }
684
-
685
- > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle {
686
- inset-inline-start: calc(
687
- var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width)
688
- );
689
- }
690
-
691
-
692
- > .esp-page-preview-min-width-probe,
693
- > .esp-page-preview-default-width-probe,
694
- > .esp-page-preview-max-width-probe,
695
- > .esp-page-flyout-min-width-probe,
696
- > .esp-page-flyout-default-width-probe,
697
- > .esp-page-flyout-max-width-probe,
698
- > .esp-page-main-min-width-probe,
699
- > .esp-page-main-configured-max-width-probe,
700
- > .esp-page-main-max-width-probe,
701
- > .esp-page-resize-step-probe,
702
- > .esp-page-resize-large-step-probe {
703
- position: absolute;
704
- block-size: 0;
705
- visibility: hidden;
706
- pointer-events: none;
707
- contain: strict;
708
- }
709
-
710
- > .esp-page-preview-min-width-probe {
711
- inline-size: var(--_esp-page-preview-resolved-min-width);
712
- }
713
-
714
- > .esp-page-preview-max-width-probe {
715
- inline-size: var(--_esp-page-preview-resolved-max-width);
716
- }
717
-
718
- > .esp-page-preview-default-width-probe {
719
- inline-size: var(--esp-page-preview-default-width, 0px);
720
- }
721
-
722
- > .esp-page-flyout-min-width-probe {
723
- inline-size: var(--_esp-page-flyout-resolved-min-width);
724
- }
725
-
726
- > .esp-page-flyout-max-width-probe {
727
- inline-size: var(--_esp-page-flyout-resolved-max-width);
728
- }
729
-
730
- > .esp-page-flyout-default-width-probe {
731
- inline-size: var(--esp-page-flyout-default-width, 0px);
732
- }
733
-
734
- > .esp-page-main-min-width-probe {
735
- inline-size: var(--_esp-page-main-min-width);
736
- }
737
-
738
- > .esp-page-main-configured-max-width-probe {
739
- inline-size: var(--esp-page-main-max-width, 0px);
740
- }
741
-
742
- > .esp-page-main-max-width-probe {
743
- inline-size: var(--_esp-page-resolved-max-width);
744
- }
745
-
746
- > .esp-page-resize-step-probe {
747
- inline-size: var(--esp-page-resize-step, 1rem);
748
- }
749
-
750
- > .esp-page-resize-large-step-probe {
751
- inline-size: var(--esp-page-resize-large-step, 4rem);
752
- }
753
-
754
-
755
- > .esp-page-canvas {
756
-
757
- grid-row: top-start / footer-end;
758
- z-index: 1;
759
- position: relative;
760
- pointer-events: none;
761
- background-color: var(--esp-page-canvas-background, transparent);
762
-
763
-
764
- &::before {
765
- content: "";
766
- position: absolute;
767
- inset: 0;
768
- background-image: var(--esp-page-canvas-background-image, none);
769
- opacity: var(--esp-page-canvas-background-image-opacity, 1);
770
- }
771
- }
772
-
773
- > .esp-page-canvas--left {
774
- grid-column: canvas-left;
775
- }
776
-
777
- > .esp-page-canvas--right {
778
-
779
- grid-column: canvas-right;
780
- }
781
-
782
-
783
- > .esp-page-surface {
784
- grid-column: surface;
785
-
786
- grid-row: top-start / footer-end;
787
- z-index: 2;
788
- pointer-events: none;
789
- box-shadow: var(--_esp-page-surface-shadow);
790
- border-inline: var(--_esp-page-surface-border);
791
- }
792
-
793
-
794
- .sticky-wrapper {
795
- will-change: top;
796
- display: block;
797
- width: 100%;
798
- position: sticky;
799
- top: 0;
800
- }
801
-
802
- > div.esp-page-footer {
803
- grid-column: full;
804
- grid-row: footer;
805
- z-index: 10;
806
- background: var(--esp-page-background, var(--esp-color-background));
807
-
808
- contain: inline-size;
809
- }
810
-
811
- &.sticky-header {
812
- slot[name="header"]::slotted(esp-header),
813
- slot[name="sidebar"]::slotted(esp-menu),
814
- slot[name="right"]::slotted(esp-menu) {
815
- --esp-menu-top-offset: var(--_esp-page-fixed-header-offset);
816
- }
817
-
818
- > div.esp-page-top {
819
- position: sticky;
820
- top: var(--esp-page-sticky-header-top, 0);
821
- }
822
- }
823
-
824
- &.fixed-header {
825
- slot[name="header"]::slotted(esp-header),
826
- slot[name="sidebar"]::slotted(esp-menu),
827
- slot[name="right"]::slotted(esp-menu) {
828
- --esp-menu-top-offset: var(--_esp-page-fixed-header-offset);
829
- }
830
-
831
- > div.esp-page-top {
832
- position: fixed;
833
- top: 0;
834
- left: 0;
835
- right: 0;
836
- }
837
-
838
- > div.esp-page-main,
839
- > aside.esp-page-left,
840
- > aside.esp-page-right,
841
- > div.esp-page-flyout,
842
- > .esp-page-surface,
843
- > .esp-page-canvas {
844
- margin-top: var(--_esp-page-fixed-header-offset);
845
- }
846
- }
847
-
848
-
849
- input,
850
- button,
851
- textarea,
852
- select {
853
- font-family: inherit;
854
- font-size: inherit;
855
- }
856
-
857
-
858
- textarea:not([rows]) {
859
- min-height: 10em;
860
- }
861
-
862
-
863
- :target {
864
- scroll-margin-block: 5ex;
865
- }
866
- }
867
-
868
- .esp-page:has(esp-dialog[is-open="true"]) {
869
- overflow: hidden;
870
- }
871
-
872
-
873
- :host([preview-visible]) .esp-page > .esp-page-surface {
874
- box-shadow: none;
875
- }
876
-
877
-
878
- .esp-page > div.esp-page-preview-space {
879
- grid-row: top-start / footer-end;
880
- z-index: calc(var(--esp-page-header-z-index, 20) + 1);
881
- pointer-events: none;
882
-
883
- > .esp-page-preview {
884
- position: absolute;
885
- inset-block: 0;
886
- inset-inline-start: 0;
887
- pointer-events: auto;
888
-
889
- > .sticky-wrapper {
890
- block-size: 100vh;
891
- block-size: 100dvh;
892
- overflow-y: auto;
893
-
894
- overscroll-behavior-y: auto;
895
- }
896
- }
897
- }
898
-
899
- @media (prefers-reduced-motion: reduce) {
900
- .esp-page {
901
- transition: none;
902
- }
903
- }
904
- `],M([H()],x.prototype,"footerWrapperIsLandmark",void 0),M([H()],x.prototype,"allocatedPreviewWidth",void 0),M([H()],x.prototype,"allocatedFlyoutWidth",void 0),M([_({reflect:!0})],x.prototype,"kind",void 0),M([_({reflect:!0})],x.prototype,"align",void 0),M([_({type:Boolean,reflect:!0})],x.prototype,"contained",void 0),M([_({attribute:"header-position",reflect:!0})],x.prototype,"headerPosition",void 0),M([_({attribute:"fixed-menus",type:Boolean,reflect:!0})],x.prototype,"fixedMenus",void 0),M([_({attribute:"preview-open",type:Boolean,reflect:!0})],x.prototype,"previewOpen",void 0),M([_({attribute:"preview-label",type:String,reflect:!0})],x.prototype,"previewLabel",void 0),M([_({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],x.prototype,"previewCollapseSidebar",void 0),M([_({attribute:"workspace-resizable",type:Boolean,reflect:!0})],x.prototype,"workspaceResizable",void 0),M([_({attribute:"preview-visible",type:Boolean,reflect:!0})],x.prototype,"previewVisible",void 0),M([_({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],x.prototype,"previewReclaiming",void 0),x=M([ne("esp-page")],x);export{x as EspalierPage};
161
+ `}};g.styles=we,P([U()],g.prototype,"footerWrapperIsLandmark",void 0),P([U()],g.prototype,"allocatedPreviewWidth",void 0),P([U()],g.prototype,"allocatedFlyoutWidth",void 0),P([S({reflect:!0})],g.prototype,"kind",void 0),P([S({reflect:!0})],g.prototype,"align",void 0),P([S({type:Boolean,reflect:!0})],g.prototype,"contained",void 0),P([S({attribute:"header-position",reflect:!0})],g.prototype,"headerPosition",void 0),P([S({attribute:"fixed-menus",type:Boolean,reflect:!0})],g.prototype,"fixedMenus",void 0),P([S({attribute:"preview-open",type:Boolean,reflect:!0})],g.prototype,"previewOpen",void 0),P([S({attribute:"preview-label",type:String,reflect:!0})],g.prototype,"previewLabel",void 0),P([S({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],g.prototype,"previewCollapseSidebar",void 0),P([S({attribute:"workspace-resizable",type:Boolean,reflect:!0})],g.prototype,"workspaceResizable",void 0),P([S({attribute:"preview-visible",type:Boolean,reflect:!0})],g.prototype,"previewVisible",void 0),P([S({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],g.prototype,"previewReclaiming",void 0),g=P([oe("esp-page")],g);export{g as EspalierPage};