@taprootio/espalier 4.19.0 → 4.20.1

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

@@ -117,6 +117,23 @@ export declare function parseImageRatio(value: string): string | null;
  * </esp-image>
  * ```
  *
+ * ### The scrim follows its content
+ *
+ * A directional scrim holds full strength over at least the first 20% of the
+ * frame, and further when the overlay content reaches past it, so every line
+ * of a long heading on a short card cover sits on the full-strength scrim. A
+ * radial scrim grows an opaque core that covers centered content. Overlays
+ * that already fit the 20% band render exactly as before.
+ *
+ * ```html
+ * <div style="max-width: 24rem">
+ *   <esp-image banner ratio="3/1" compact-ratio="16/9" focus="0.65 0.4">
+ *     <img src="/assets/focus-picker-unsplash.jpg" alt="A woman standing in a sunlit field with her back to the camera" />
+ *     <h3 slot="overlay">A three-line title stays on the scrim however short the cover gets</h3>
+ *   </esp-image>
+ * </div>
+ * ```
+ *
  * ### Meeting an adjoining band
  *
  * A directional scrim is capped by `scrim-strength`, so even `strong` leaves

package/dist/image/esp-image.js

@@ -1,4 +1,4 @@
-var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var l=d.length-1;l>=0;l--)(o=d[l])&&(s=(i<3?o(s):i>3?o(e,t,s):o(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},p;import{css as T,html as h,nothing as C}from"lit";import{customElement as $,property as c,state as u}from"lit/decorators.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{slotHasContent as y}from"../shared/slot-content.js";import{renderVisualOverlay as E,visualOverlayStyles as A}from"../shared/visual-overlay.js";import{focusConverter as N,normalizeFocus as R}from"./image-focus.js";import{ensureImageTextureFilters as W,imageTextureFilterId as M}from"./image-texture-filters.js";import{getImageTexture as b,isBuiltInImageTexture as x,subscribeToImageTextureRegistry as D}from"../shared/image-texture-registry.js";import{validImageDimensions as _}from"./image-dimensions.js";import"./esp-image-option.js";const k=new Set(["auto","none","flat","top","bottom","left","right","radial"]),w=new Set(["soft","medium","strong"]),S=new Set(["none","flush"]),z=new Set(["fine","medium","coarse"]),j=new Set(["auto","light","dark"]),O=new Set(["bottom-start","bottom","bottom-end","center","top-start","top","top-end"]);function m(d,e){return{fromAttribute(t){return t&&d.has(t)?t:e},toAttribute(t){return d.has(t)?t:e}}}function I(d){const e=d.trim();if(!e)return null;const t=e.split("/").map(i=>i.trim());if(t.length>2||t.some(i=>i.length===0))return null;const r=t.map(Number);return r.some(i=>!Number.isFinite(i)||i<=0)?null:r.length===1?String(r[0]):`${r[0]} / ${r[1]}`}let a=p=class extends v{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.resizeObserver=null,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(e.target.name==="overlay"){const t=y(e.target);t!==this.overlayHasContent&&(this.overlayHasContent=t);return}this.requestUpdate()}}}get isPortrait(){const e=_(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(i=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}i.some(s=>s.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),p.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=D(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),this.syncOffscreenDeferral()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),i=Number(t.getAttribute("width"));if(!r||!Number.isFinite(i)||i<=0)continue;const s=t.getAttribute("type")??"",o=e.get(s)??[];o.push({url:r,width:i}),e.set(s,o)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((i,s)=>i.width-s.width).map(i=>`${i.url} ${i.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return x(this.texture)?this.texture:b(this.texture)?this.texture:"none"}resolvedScrim(){return this.scrim!=="auto"?this.scrim:this.overlayHasContent?this.contentPosition.startsWith("top")?"top":this.contentPosition.startsWith("bottom")?"bottom":"radial":"none"}resolvedAspectRatio(){const e=_(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=I(this.ratio);return(this.compact?I(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!k.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!j.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!w.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!S.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!z.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!O.has(this.contentPosition)&&(this.contentPosition="bottom-start")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=R(this.focusPoint),r=Number((t.x*100).toFixed(4)),i=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${i}%`);const s=this.resolvedAspectRatio();s?this.style.setProperty("--_esp-image-aspect-ratio",s):this.style.removeProperty("--_esp-image-aspect-ratio");const o=this.resolvedTexture();if(["paper","grain","grunge"].includes(o)){const g=o==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":o;this.style.setProperty("--_esp-image-texture-filter",`url(#${M(g,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const l=x(o)?void 0:b(o),P=[["--_esp-image-registered-image",l?.image],["--_esp-image-registered-size",l?.size],["--_esp-image-registered-repeat",l?.repeat],["--_esp-image-registered-position",l?.position],["--_esp-image-registered-opacity",l?.opacity?.toString()],["--_esp-image-registered-blend-mode",l?.blendMode]];for(const[g,f]of P)f===void 0?this.style.removeProperty(g):this.style.setProperty(g,f)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector('slot[name="overlay"]');t&&(this.overlayHasContent=y(t))}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&W(this.renderRoot),this.renderedWidth>0){const o=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,l=o>0&&this.renderedWidth<o;l!==this.compact&&(this.compact=l)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const s of t.querySelectorAll("source"))s.setAttribute("sizes",r);const i=this.findProjectedImage(t);i?.hasAttribute("srcset")&&i.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return h`<img
+var n=function(l,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(l,e,t,r);else for(var m=l.length-1;m>=0;m--)(o=l[m])&&(a=(i<3?o(a):i>3?o(e,t,a):o(e,t))||a);return i>3&&a&&Object.defineProperty(e,t,a),a},p;import{css as I,html as h,nothing as P}from"lit";import{customElement as E,property as c,state as u}from"lit/decorators.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{slotHasContent as y}from"../shared/slot-content.js";import{renderVisualOverlay as $,visualOverlayStyles as A}from"../shared/visual-overlay.js";import{focusConverter as N,normalizeFocus as W}from"./image-focus.js";import{ensureImageTextureFilters as D,imageTextureFilterId as M}from"./image-texture-filters.js";import{getImageTexture as b,isBuiltInImageTexture as x,subscribeToImageTextureRegistry as B}from"../shared/image-texture-registry.js";import{validImageDimensions as _}from"./image-dimensions.js";import{isMeasuredScrim as q,scrimReach as H,unionScrimBox as U}from"./scrim-reach.js";import"./esp-image-option.js";const k=new Set(["auto","none","flat","top","bottom","left","right","radial"]),w=new Set(["soft","medium","strong"]),S=new Set(["none","flush"]),z=new Set(["fine","medium","coarse"]),O=new Set(["auto","light","dark"]),j=new Set(["bottom-start","bottom","bottom-end","center","top-start","top","top-end"]);function d(l,e){return{fromAttribute(t){return t&&l.has(t)?t:e},toAttribute(t){return l.has(t)?t:e}}}function R(l){const e=l.trim();if(!e)return null;const t=e.split("/").map(i=>i.trim());if(t.length>2||t.some(i=>i.length===0))return null;const r=t.map(Number);return r.some(i=>!Number.isFinite(i)||i<=0)?null:r.length===1?String(r[0]):`${r[0]} / ${r[1]}`}function T(l){const e=[];for(const t of l)getComputedStyle(t).display==="contents"?e.push(...T(t.children)):e.push(t);return e}function F(l){const e=l.getBoundingClientRect();if(e.width>0||e.height>0)return e;const t=l.ownerDocument.createRange();t.selectNodeContents(l);const r=t.getBoundingClientRect();return r.width>0||r.height>0?r:null}let s=p=class extends v{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.resizeObserver=null,this.scrimObserver=null,this.appliedScrimReach=0,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(e.target.name==="overlay"){const t=y(e.target);t!==this.overlayHasContent&&(this.overlayHasContent=t),this.observeScrimTargets();return}this.requestUpdate()}}}get isPortrait(){const e=_(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(i=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}i.some(a=>a.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),p.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=B(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),this.syncOffscreenDeferral(),this.hasUpdated&&this.observeScrimTargets()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.scrimObserver?.disconnect(),this.scrimObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}observeScrimTargets(){if(!this.shadowRoot)return;this.scrimObserver??=new ResizeObserver(()=>this.measureScrimReach()),this.scrimObserver.disconnect();const e=this.shadowRoot?.querySelector(".overlay");e&&this.scrimObserver.observe(e);const t=this.shadowRoot?.querySelector('[part="scrim"]');t&&this.scrimObserver.observe(t);for(const r of T(this.overlayElements()))this.scrimObserver.observe(r,{box:"border-box"})}overlayElements(){return this.shadowRoot?.querySelector('slot[name="overlay"]')?.assignedElements({flatten:!0})??[]}measureScrimReach(){const e=this.shadowRoot?.querySelector(".frame");if(!e)return;const t=this.resolvedScrim();let r=0;const i=this.shadowRoot?.querySelector('[part="scrim"]');if(this.banner&&this.overlayHasContent&&i&&q(t)){const a=i.getBoundingClientRect();if(a.width<=0||a.height<=0)return;const o=U(this.overlayElements().map(F));r=H(t,a,o)}r!==this.appliedScrimReach&&(this.appliedScrimReach=r,r>0?e.style.setProperty("--_esp-image-scrim-reach",`${r}%`):e.style.removeProperty("--_esp-image-scrim-reach"))}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),i=Number(t.getAttribute("width"));if(!r||!Number.isFinite(i)||i<=0)continue;const a=t.getAttribute("type")??"",o=e.get(a)??[];o.push({url:r,width:i}),e.set(a,o)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((i,a)=>i.width-a.width).map(i=>`${i.url} ${i.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return x(this.texture)?this.texture:b(this.texture)?this.texture:"none"}resolvedScrim(){return this.scrim!=="auto"?this.scrim:this.overlayHasContent?this.contentPosition.startsWith("top")?"top":this.contentPosition.startsWith("bottom")?"bottom":"radial":"none"}resolvedAspectRatio(){const e=_(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=R(this.ratio);return(this.compact?R(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!k.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!O.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!w.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!S.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!z.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!j.has(this.contentPosition)&&(this.contentPosition="bottom-start")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=W(this.focusPoint),r=Number((t.x*100).toFixed(4)),i=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${i}%`);const a=this.resolvedAspectRatio();a?this.style.setProperty("--_esp-image-aspect-ratio",a):this.style.removeProperty("--_esp-image-aspect-ratio");const o=this.resolvedTexture();if(["paper","grain","grunge"].includes(o)){const g=o==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":o;this.style.setProperty("--_esp-image-texture-filter",`url(#${M(g,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const m=x(o)?void 0:b(o),C=[["--_esp-image-registered-image",m?.image],["--_esp-image-registered-size",m?.size],["--_esp-image-registered-repeat",m?.repeat],["--_esp-image-registered-position",m?.position],["--_esp-image-registered-opacity",m?.opacity?.toString()],["--_esp-image-registered-blend-mode",m?.blendMode]];for(const[g,f]of C)f===void 0?this.style.removeProperty(g):this.style.setProperty(g,f)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector('slot[name="overlay"]');t&&(this.overlayHasContent=y(t)),this.observeScrimTargets()}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),(e.has("banner")||e.has("scrim")||e.has("contentPosition")||e.has("overlayHasContent")||e.has("compact"))&&this.observeScrimTargets(),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&D(this.renderRoot),this.renderedWidth>0){const o=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,m=o>0&&this.renderedWidth<o;m!==this.compact&&(this.compact=m)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const a of t.querySelectorAll("source"))a.setAttribute("sizes",r);const i=this.findProjectedImage(t);i?.hasAttribute("srcset")&&i.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return h`<img
         src=${this.localImage}
         alt=${this.caption}
         decoding="async"
@@ -9,7 +9,7 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
             <source
               srcset=${r.srcset}
               sizes=${this.effectiveSizes()}
-              type=${r.type||C}
+              type=${r.type||P}
             />
           `)}
         <img src=${this.imageUrl} alt=${this.caption} decoding="async" loading=${this.loading} />
@@ -28,13 +28,13 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
         data-content-position=${this.contentPosition}
       >
         <div part="image" class="image">${this.renderMedia()}</div>
-        ${E({className:"banner-layers",imagePart:"texture",scrimPart:"scrim",texturePart:"texture"})}
+        ${$({className:"banner-layers",imagePart:"texture",scrimPart:"scrim",texturePart:"texture"})}
         <div part="overlay" class="overlay" ?hidden=${!this.banner||!this.overlayHasContent}>
           <slot name="overlay" @slotchange=${this.handleSlotChange}></slot>
         </div>
         <span class="compact-sentinel" aria-hidden="true"></span>
       </div>
-    `}static ensureProjectionStyles(e){const t=e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in e?e:e.nodeType===Node.DOCUMENT_NODE?e.head:e.ownerDocument?.head??document.head,r=Array.from(t.querySelectorAll("style[data-esp-image-projection-styles]")),i=r.find(o=>o.textContent===p.projectionStyles);if(i){for(const o of r)o!==i&&o.remove();return}for(const o of r)o.remove();const s=t.ownerDocument.createElement("style");s.dataset.espImageProjectionStyles="",s.textContent=p.projectionStyles,t.append(s)}};a.projectionStyles=`
+    `}static ensureProjectionStyles(e){const t=e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in e?e:e.nodeType===Node.DOCUMENT_NODE?e.head:e.ownerDocument?.head??document.head,r=Array.from(t.querySelectorAll("style[data-esp-image-projection-styles]")),i=r.find(o=>o.textContent===p.projectionStyles);if(i){for(const o of r)o!==i&&o.remove();return}for(const o of r)o.remove();const a=t.ownerDocument.createElement("style");a.dataset.espImageProjectionStyles="",a.textContent=p.projectionStyles,t.append(a)}};s.projectionStyles=`
     esp-image > picture,
     esp-image > img {
       display: block;
@@ -50,7 +50,7 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
       object-fit: var(--_esp-image-object-fit, cover);
       object-position: var(--esp-image-object-position, var(--_esp-image-object-position, center));
     }
-  `,a.styles=[...v.styles,T`
+  `,s.styles=[...v.styles,I`
       :host {
         display: block;
         aspect-ratio: var(--_esp-image-aspect-ratio, auto);
@@ -176,6 +176,18 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
         --_esp-image-scrim-opacity: 0.76;
       }
 
+      
+      .frame {
+        --_esp-image-scrim-reach: 0%;
+        --_esp-image-scrim-plateau: max(20%, var(--_esp-image-scrim-reach));
+        --_esp-image-scrim-fade-mid: calc(
+          var(--_esp-image-scrim-plateau) + (100% - var(--_esp-image-scrim-plateau)) * 0.35
+        );
+        --_esp-image-scrim-fade-end: calc(
+          var(--_esp-image-scrim-plateau) + (100% - var(--_esp-image-scrim-plateau)) * 0.725
+        );
+      }
+
       .frame[data-scrim="none"] {
         --_esp-overlay-scrim: none;
       }
@@ -185,42 +197,54 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
       .frame[data-scrim="top"] {
         --_esp-overlay-scrim: linear-gradient(
           to bottom,
-          var(--_esp-image-scrim-resolved) 0% 20%,
-          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent) 48%,
-          transparent 78%
+          var(--_esp-image-scrim-resolved) 0% var(--_esp-image-scrim-plateau),
+          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent)
+            var(--_esp-image-scrim-fade-mid),
+          transparent var(--_esp-image-scrim-fade-end)
         );
       }
       .frame[data-scrim="bottom"] {
         --_esp-overlay-scrim: linear-gradient(
           to top,
-          var(--_esp-image-scrim-resolved) 0% 20%,
-          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent) 48%,
-          transparent 78%
+          var(--_esp-image-scrim-resolved) 0% var(--_esp-image-scrim-plateau),
+          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent)
+            var(--_esp-image-scrim-fade-mid),
+          transparent var(--_esp-image-scrim-fade-end)
         );
       }
       .frame[data-scrim="left"] {
         --_esp-overlay-scrim: linear-gradient(
           to right,
-          var(--_esp-image-scrim-resolved) 0% 20%,
-          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent) 48%,
-          transparent 78%
+          var(--_esp-image-scrim-resolved) 0% var(--_esp-image-scrim-plateau),
+          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent)
+            var(--_esp-image-scrim-fade-mid),
+          transparent var(--_esp-image-scrim-fade-end)
         );
       }
       .frame[data-scrim="right"] {
         --_esp-overlay-scrim: linear-gradient(
           to left,
-          var(--_esp-image-scrim-resolved) 0% 20%,
-          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent) 48%,
-          transparent 78%
+          var(--_esp-image-scrim-resolved) 0% var(--_esp-image-scrim-plateau),
+          color-mix(in oklch, var(--_esp-image-scrim-resolved) 68%, transparent)
+            var(--_esp-image-scrim-fade-mid),
+          transparent var(--_esp-image-scrim-fade-end)
         );
       }
+      
       .frame[data-scrim="radial"] {
         --_esp-overlay-scrim: radial-gradient(
           circle at center,
-          var(--_esp-image-scrim-resolved) 0%,
-          color-mix(in oklch, var(--_esp-image-scrim-resolved) 72%, transparent) 34%,
-          color-mix(in oklch, var(--_esp-image-scrim-resolved) 28%, transparent) 64%,
-          transparent 82%
+          var(--_esp-image-scrim-resolved) 0% var(--_esp-image-scrim-reach),
+          color-mix(in oklch, var(--_esp-image-scrim-resolved) 72%, transparent)
+            calc(
+              var(--_esp-image-scrim-reach) + (100% - var(--_esp-image-scrim-reach)) * 0.34
+            ),
+          color-mix(in oklch, var(--_esp-image-scrim-resolved) 28%, transparent)
+            calc(
+              var(--_esp-image-scrim-reach) + (100% - var(--_esp-image-scrim-reach)) * 0.64
+            ),
+          transparent
+            calc(var(--_esp-image-scrim-reach) + (100% - var(--_esp-image-scrim-reach)) * 0.82)
         );
       }
 
@@ -505,4 +529,4 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
           transition: none !important;
         }
       }
-    `,A],n([c({attribute:"original-height",type:Number})],a.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],a.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],a.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],a.prototype,"localImage",void 0),n([c({type:String})],a.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],a.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],a.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],a.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],a.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:m(j,"auto"),reflect:!0})],a.prototype,"bannerScheme",void 0),n([c({converter:m(k,"auto"),reflect:!0})],a.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:m(w,"medium"),reflect:!0})],a.prototype,"scrimStrength",void 0),n([c({attribute:"scrim-edge",converter:m(S,"none"),reflect:!0})],a.prototype,"scrimEdge",void 0),n([c({type:String,reflect:!0})],a.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:m(z,"medium"),reflect:!0})],a.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:m(O,"bottom-start"),reflect:!0})],a.prototype,"contentPosition",void 0),n([c({attribute:"focus",converter:N,reflect:!0})],a.prototype,"focusPoint",void 0),n([c({type:String})],a.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],a.prototype,"compactRatio",void 0),n([u()],a.prototype,"renderedWidth",void 0),n([u()],a.prototype,"compact",void 0),n([u()],a.prototype,"overlayHasContent",void 0),a=p=n([$("esp-image")],a);export{a as EspalierImage,I as parseImageRatio};
+    `,A],n([c({attribute:"original-height",type:Number})],s.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],s.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],s.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],s.prototype,"localImage",void 0),n([c({type:String})],s.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],s.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],s.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],s.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],s.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:d(O,"auto"),reflect:!0})],s.prototype,"bannerScheme",void 0),n([c({converter:d(k,"auto"),reflect:!0})],s.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:d(w,"medium"),reflect:!0})],s.prototype,"scrimStrength",void 0),n([c({attribute:"scrim-edge",converter:d(S,"none"),reflect:!0})],s.prototype,"scrimEdge",void 0),n([c({type:String,reflect:!0})],s.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:d(z,"medium"),reflect:!0})],s.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:d(j,"bottom-start"),reflect:!0})],s.prototype,"contentPosition",void 0),n([c({attribute:"focus",converter:N,reflect:!0})],s.prototype,"focusPoint",void 0),n([c({type:String})],s.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],s.prototype,"compactRatio",void 0),n([u()],s.prototype,"renderedWidth",void 0),n([u()],s.prototype,"compact",void 0),n([u()],s.prototype,"overlayHasContent",void 0),s=p=n([E("esp-image")],s);export{s as EspalierImage,R as parseImageRatio};

package/dist/image/scrim-reach.js

@@ -0,0 +1 @@
+const M=new Set(["top","bottom","left","right","radial"]);function u(h){return M.has(h)}function f(h){let o=null;for(const t of h)!t||t.right<=t.left||t.bottom<=t.top||(o=o?{left:Math.min(o.left,t.left),top:Math.min(o.top,t.top),right:Math.max(o.right,t.right),bottom:Math.max(o.bottom,t.bottom)}:{left:t.left,top:t.top,right:t.right,bottom:t.bottom});return o}function x(h,o,t){const l=o.right-o.left,p=o.bottom-o.top;if(!t||l<=0||p<=0)return 0;let b;if(h==="radial"){const i=(o.left+o.right)/2,r=(o.top+o.bottom)/2;if(!(t.left<=i&&i<=t.right&&t.top<=r&&r<=t.bottom))return 0;const e=Math.hypot(l/2,p/2);b=Math.hypot(Math.max(Math.abs(t.left-i),Math.abs(t.right-i)),Math.max(Math.abs(t.top-r),Math.abs(t.bottom-r)))/e}else{const i=h==="top"||h==="bottom"?p:l,[r,a]=h==="bottom"?[o.bottom-t.bottom,o.bottom-t.top]:h==="top"?[t.top-o.top,t.bottom-o.top]:h==="left"?[t.left-o.left,t.right-o.left]:[o.right-t.right,o.right-t.left];if(r>i/2)return 0;b=a/i}const s=Math.min(1,Math.max(0,b))*100;return Math.ceil(s*100-1e-6)/100}export{u as isMeasuredScrim,x as scrimReach,f as unionScrimBox};

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

@@ -62,8 +62,12 @@ export interface PageWorkspaceResizeDetail {
  * auxiliary panes contract and before main is reclaimed. The rail returns
  * only when doing so preserves the settled pane allocation.
  *
- * @slot sidebar - Contextual navigation placed in the left aside.
- * @slot right - Content to place in the right aside.
+ * @slot sidebar - Contextual navigation placed in the left aside. While the
+ * slot is empty the aside is not exposed as a landmark; with content it is a
+ * complementary landmark named by `sidebar-label`.
+ * @slot right - Content to place in the right aside. While the slot is empty
+ * the aside is not exposed as a landmark; with content it is a complementary
+ * landmark named by `right-label`.
  * @slot preview - Persistent preview content placed after the main surface and
  * before help. It grows from `--esp-page-preview-min-width` to
  * `--esp-page-preview-max-width`, starting at
@@ -516,6 +520,18 @@ export declare class EspalierPage extends EspalierElementBase {
      * actual presentation and the preview restores automatically when room returns.
      */
     previewOpen: boolean;
+    /**
+     * Accessible name for the sidebar's complementary landmark. The aside is
+     * exposed as a landmark only while the `sidebar` slot has content; keep
+     * the name distinct from `right-label` so the two can be told apart.
+     */
+    sidebarLabel: string;
+    /**
+     * Accessible name for the right aside's complementary landmark. The aside
+     * is exposed as a landmark only while the `right` slot has content; keep
+     * the name distinct from `sidebar-label` so the two can be told apart.
+     */
+    rightLabel: string;
     /** Accessible name for the preview's complementary landmark. */
     previewLabel: string;
     /**

package/dist/page/esp-page.js

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