@taprootio/espalier 6.2.0 → 6.3.0

package/dist/lightbox/esp-lightbox.js

@@ -1,4 +1,4 @@
-var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(c,e,t,i);else for(var a=c.length-1;a>=0;a--)(n=c[a])&&(r=(s<3?n(r):s>3?n(e,t,r):n(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r},m;import{css as O,html as o,nothing as l}from"lit";import{customElement as D,property as _,state as u}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{keyed as k}from"lit/directives/keyed.js";import{styleMap as v}from"lit/directives/style-map.js";import{cancelSVG as $}from"../shared/svgs/cancel.js";import{commentSVG as S}from"../shared/svgs/comment.js";import{leftArrow as R}from"../shared/svgs/left-arrow.js";import{rightArrow as z}from"../shared/svgs/right-arrow.js";import{validImageDimensions as g}from"../image/image-dimensions.js";import{EspalierElementBase as x}from"../shared/esp-element-base.js";import{ESP_EVENTS as B}from"../shared/events.js";import{OverlayController as M}from"../shared/overlay-controller.js";import{RafThrottle as w}from"../shared/raf-throttle.js";import"../image/esp-image.js";import"../image/esp-image-option.js";import"../button/esp-button.js";function C(c,e){if(!c)return e;const t=Math.min(e.width/c.width,e.height/c.height);return!Number.isFinite(t)||t<=0?e:{width:Math.min(e.width,c.width*t),height:Math.min(e.height,c.height*t)}}let h=m=class extends x{constructor(){super(...arguments),this.isOpen=!1,this.currentIndex=0,this.drawerOpen=!1,this._images=[],this._clickHandlers=new Map,this._clickSetupFrame=new w(()=>this._runClickSetup()),this._imageMeasureFrame=new w(()=>this._runImageMeasurement()),this._galleryObserver=null,this._galleryRefreshFrame=new w(()=>this._runGalleryRefresh()),this._galleryRefreshInvalidatesDimensions=!1,this._observedGallery=null,this._imageContainerObserver=null,this._observedImageContainer=null,this._observedRenderedImage=null,this._loadedIntrinsicDimensions=null,this._prefetched=new Map,this._captionBarObserver=null,this._observedCaptionParts=[null,null],this._commentBarObserver=null,this._observedCommentBar=null,this._captionClipped=!1,this._imageDimensions=null,this._overlay=new M({host:this,getFocusTrapContainer:()=>this.shadowRoot?.querySelector(".lightbox")??null}),this._touchStartX=0,this._touchStartY=0,this._touchDeltaX=0,this._touchDeltaY=0,this._swiping=!1,this._swipingVertical=!1,this.for="",this.commentCount=0,this.hideComments=!1,this.hideCaption=!1,this._scheduleImageMeasurement=()=>{this.isOpen&&this._imageMeasureFrame.schedule()},this._handleViewportChange=()=>{this._prepareImageDimensions(),this._scheduleImageMeasurement()},this._handleRenderedImageLoad=()=>{const e=this._observedRenderedImage;if(!e)return;const t=g(e.naturalWidth,e.naturalHeight);t&&(this._loadedIntrinsicDimensions=t,this._prepareImageDimensions())},this._measureCaptionClipped=()=>{const e=this.shadowRoot?.querySelector(".caption-line"),t=this.shadowRoot?.querySelector(".caption-toggle");let i=!1;if(e&&t){const s=getComputedStyle(t),r=t.clientWidth-(Number.parseFloat(s.paddingLeft)||0)-(Number.parseFloat(s.paddingRight)||0);i=e.scrollWidth-r>1}i!==this._captionClipped&&(this._captionClipped=i),this.drawerOpen&&!this._drawerAvailable&&(this.drawerOpen=!1)},this._syncBarHeight=()=>{const e=this.shadowRoot?.querySelector(".comment-panel"),t=this._observedCommentBar;!e||!t||e.style.setProperty("--_bar-height",`${t.getBoundingClientRect().height}px`)}}get _commentLabel(){return this.commentCount<=0?"No comments. Add yours!":this.commentCount===1?"1 comment":`${this.commentCount} comments`}open(e){if(this._collectImages(),this._images.length===0)return;const t=Number.isFinite(e)?Math.trunc(e):0,i=Math.max(0,Math.min(t,this._images.length-1));if(this.isOpen){i===this.currentIndex?(this._prepareImageDimensions(),this._scheduleImageMeasurement()):this._goTo(i);return}this.currentIndex=i,this._loadedIntrinsicDimensions=null,this._prepareImageDimensions(),this.isOpen=!0,this.drawerOpen=!1,this._startImageSizing(),this._overlay.open(),this._emitChanged(),this.updateComplete.then(()=>{this.isOpen&&this._overlay.moveFocusInto()})}close(){this.isOpen&&(this.isOpen=!1,this.drawerOpen=!1,this._stopImageSizing(),this._overlay.close())}_viewportDimensions(){const e=document.documentElement.clientWidth||window.innerWidth,t=document.documentElement.clientHeight||window.innerHeight;return g(e,t)??{width:1,height:1}}_availableImageDimensions(){const e=this.shadowRoot?.querySelector(".image-container");if(e){const t=e.getBoundingClientRect(),i=g(t.width,t.height);if(i)return i}return this._viewportDimensions()}_sourceIntrinsicDimensions(e){if(!e)return null;const t=g(e.originalWidth,e.originalHeight);if(t)return t;const i=Array.from(e.children).find(n=>n.tagName==="PICTURE"||n.tagName==="IMG"),r=(i?.tagName==="IMG"?i:i?.querySelector("img"))??e.shadowRoot?.querySelector("img");return r?g(r.naturalWidth,r.naturalHeight)??g(Number(r.getAttribute("width")),Number(r.getAttribute("height"))):null}_prepareImageDimensions(){const e=this._loadedIntrinsicDimensions??this._sourceIntrinsicDimensions(this._images[this.currentIndex]);this._setImageDimensions(C(e,this._availableImageDimensions()))}_setImageDimensions(e){const t=Math.max(1,e.width),i=Math.max(1,e.height);this._imageDimensions&&Math.abs(this._imageDimensions.width-t)<.5&&Math.abs(this._imageDimensions.height-i)<.5||(this._imageDimensions={width:t,height:i})}_responsiveSizes(){return`${Math.max(1,Math.ceil(this._imageDimensions?.width??1))}px`}_responsiveSizesFor(e){const t=C(this._sourceIntrinsicDimensions(e),this._availableImageDimensions());return`${Math.max(1,Math.ceil(t.width))}px`}_runImageMeasurement(){!this.isOpen||!this.isConnected||(this._observeRenderedImage(),this._prepareImageDimensions(),this._prefetchNeighbors())}_startImageSizing(){window.addEventListener("resize",this._handleViewportChange),window.addEventListener("orientationchange",this._handleViewportChange),window.visualViewport?.addEventListener("resize",this._handleViewportChange)}_observeImageContainer(){const e=this.shadowRoot?.querySelector(".image-container")??null;e!==this._observedImageContainer&&(this._imageContainerObserver?.disconnect(),this._imageContainerObserver=null,this._observedImageContainer=e,!(!e||typeof ResizeObserver>"u")&&(this._imageContainerObserver=new ResizeObserver(this._scheduleImageMeasurement),this._imageContainerObserver.observe(e)))}_stopImageSizing(){window.removeEventListener("resize",this._handleViewportChange),window.removeEventListener("orientationchange",this._handleViewportChange),window.visualViewport?.removeEventListener("resize",this._handleViewportChange),this._imageContainerObserver?.disconnect(),this._imageContainerObserver=null,this._observedImageContainer=null,this._stopObservingRenderedImage(),this._stopObservingCaptionBar(),this._stopObservingCommentBar(),this._clearPrefetch(),this._imageMeasureFrame.cancel()}_observeRenderedImage(){const e=this.shadowRoot?.querySelector(".image-container esp-image"),i=e?.querySelector("img")??null??e?.shadowRoot?.querySelector("img")??null;i!==this._observedRenderedImage&&(this._stopObservingRenderedImage(),this._observedRenderedImage=i,i?.addEventListener("load",this._handleRenderedImageLoad)),i?.complete&&this._handleRenderedImageLoad()}_stopObservingRenderedImage(){this._observedRenderedImage?.removeEventListener("load",this._handleRenderedImageLoad),this._observedRenderedImage=null}_projectedSource(e){return e?Array.from(e.children).find(t=>t.tagName==="PICTURE"||t.tagName==="IMG")??null:null}_prepareProjectedClone(e,t,i){const s=e.cloneNode(!0);s.querySelectorAll("source").forEach(n=>n.setAttribute("sizes",t));const r=s.tagName==="IMG"?s:s.querySelector("img");return r?(r.hasAttribute("srcset")&&r.setAttribute("sizes",t),r.setAttribute("loading","eager"),r.setAttribute("fetchpriority",i),r.setAttribute("decoding","async"),s):null}_projectedSignature(e){const t=[e.tagName];for(const s of e.querySelectorAll("source"))t.push(s.getAttribute("type"),s.getAttribute("media"),s.getAttribute("srcset"));const i=e.tagName==="IMG"?e:e.querySelector("img");return t.push(i?.getAttribute("src")??null,i?.getAttribute("srcset")??null,i?.getAttribute("crossorigin")??null,i?.getAttribute("referrerpolicy")??null),JSON.stringify(t)}_warmPlan(e){if(e.localImage)return null;const t=this._projectedSource(e);if(!t)return null;const i=this._responsiveSizesFor(e);return{projected:t,sizes:i,key:`${i}|${this._projectedSignature(t)}`}}_prefetchNeighbors(){const e=this.shadowRoot?.querySelector(".preload");if(!e)return;const t=this._images.length;if(!this.isOpen||t===0){this._clearPrefetch();return}const i=this._images[this.currentIndex],s=new Set,r=m._PREFETCH_RADIUS;for(let n=-r;n<=r;n++){if(n===0)continue;const a=((this.currentIndex+n)%t+t)%t,p=this._images[a];p&&p!==i&&s.add(p)}for(const[n,a]of this._prefetched)s.has(n)&&a.key===this._warmPlan(n)?.key||(a.node.remove(),this._prefetched.delete(n));for(const n of s){if(this._prefetched.has(n))continue;const a=this._warmPlan(n);if(!a)continue;const p=this._prepareProjectedClone(a.projected,a.sizes,"low");p&&(this._prefetched.set(n,{node:p,key:a.key}),e.appendChild(p))}}_clearPrefetch(){for(const e of this._prefetched.values())e.node.remove();this._prefetched.clear()}_collectImages(){if(!this.for)return this._images=[],null;let e;try{e=document.querySelector(this.for)}catch{return this._images=[],null}return e?(this._images=Array.from(e.querySelectorAll("esp-image")),e):(this._images=[],null)}_attachClickHandlers(e=!1){const t=this._images[this.currentIndex],i=this.currentIndex;this._detachClickHandlers();const s=this._collectImages();if(this._images.forEach((f,I)=>{const y=()=>this.open(I);f.addEventListener("click",y),f.classList.add(m._CLICKABLE_CLASS),this._clickHandlers.set(f,y)}),this._observeGallery(s),!this.isOpen)return;if(this._images.length===0){this.close();return}const r=t?this._images.indexOf(t):-1,n=r>=0?r:Math.min(i,this._images.length-1),a=this._images[n]!==t,p=n!==this.currentIndex;this.currentIndex=n,(a||e)&&(this._loadedIntrinsicDimensions=null),this._prepareImageDimensions(),this.requestUpdate(),(a||p)&&this._emitChanged()}_detachClickHandlers(){for(const[e,t]of this._clickHandlers)e.removeEventListener("click",t),e.classList.remove(m._CLICKABLE_CLASS);this._clickHandlers.clear()}_observeGallery(e){e!==this._observedGallery&&(this._cancelGalleryRefresh(),this._galleryObserver?.disconnect(),this._galleryObserver=null,this._observedGallery=e,!(!e||typeof MutationObserver>"u")&&(this._galleryObserver=new MutationObserver(t=>this._scheduleGalleryRefresh(t)),this._galleryObserver.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["caption","crossorigin","height","local-image","low-res","media","original-height","original-width","referrerpolicy","src","srcset","type","url","width"]})))}_scheduleGalleryRefresh(e){const t=this._images[this.currentIndex];t&&(this._galleryRefreshInvalidatesDimensions||=e.some(i=>i.type==="attributes"&&i.attributeName==="caption"?!1:i.target===t||t.contains(i.target))),this._galleryRefreshFrame.schedule()}_runGalleryRefresh(){if(!this.isConnected)return;const e=this._galleryRefreshInvalidatesDimensions;this._galleryRefreshInvalidatesDimensions=!1,this._attachClickHandlers(e)}_cancelGalleryRefresh(){this._galleryRefreshFrame.cancel(),this._galleryRefreshInvalidatesDimensions=!1}_stopObservingGallery(){this._cancelGalleryRefresh(),this._galleryObserver?.disconnect(),this._galleryObserver=null,this._observedGallery=null}_goTo(e){const t=this._images.length;if(t===0)return;const i=(e%t+t)%t;i!==this.currentIndex&&(this.currentIndex=i,this._loadedIntrinsicDimensions=null,this._prepareImageDimensions(),this._scheduleImageMeasurement(),this._emitChanged())}_emitChanged(){this.dispatchEvent(new CustomEvent(B.LIGHTBOX_CHANGED,{detail:{index:this.currentIndex},bubbles:!0,composed:!0}))}_prev(){this._goTo(this.currentIndex-1)}_next(){this._goTo(this.currentIndex+1)}_handleKeyDown(e){if(this.isOpen)switch(e.key){case"Escape":e.preventDefault(),this.close();break;case"ArrowLeft":e.preventDefault(),this._prev();break;case"ArrowRight":e.preventDefault(),this._next();break;case"ArrowUp":e.preventDefault(),this.drawerOpen||this._toggleDrawer();break;case"ArrowDown":e.preventDefault(),this.drawerOpen&&this._toggleDrawer();break;case"Tab":this._overlay.trapFocus(e);break}}_handleTouchStart(e){e.touches.length===1&&(this._touchStartX=e.touches[0].clientX,this._touchStartY=e.touches[0].clientY,this._touchDeltaX=0,this._touchDeltaY=0,this._swiping=!1,this._swipingVertical=!1)}_handleTouchMove(e){if(e.touches.length!==1)return;const t=e.touches[0].clientX-this._touchStartX,i=e.touches[0].clientY-this._touchStartY;!this._swiping&&!this._swipingVertical&&(Math.abs(t)>10||Math.abs(i)>10)&&(Math.abs(t)>Math.abs(i)?this._swiping=!0:this._swipingVertical=!0),this._swiping?(e.preventDefault(),this._touchDeltaX=t):this._swipingVertical&&(e.preventDefault(),this._touchDeltaY=i)}_handleTouchEnd(){this._swiping?this._touchDeltaX>50?this._prev():this._touchDeltaX<-50&&this._next():this._swipingVertical&&(this._touchDeltaY<-50&&!this.drawerOpen?this._toggleDrawer():this._touchDeltaY>50&&this.drawerOpen&&this._toggleDrawer()),this._touchDeltaX=0,this._touchDeltaY=0,this._swiping=!1,this._swipingVertical=!1}_handleLightboxClick(e){if(!this.drawerOpen)return;const t=this.shadowRoot?.querySelector(".comment-panel");t&&e.composedPath().includes(t)||(this.drawerOpen=!1)}_handleImageContainerClick(e){if(e.target===e.currentTarget){if(this.drawerOpen){this.drawerOpen=!1;return}this.close()}}get _visibleCaption(){return this.hideCaption?"":this._images[this.currentIndex]?.caption??""}get _showsCaptionBar(){return this.hideComments&&this._visibleCaption!==""}get _drawerAvailable(){return this.hideComments?this._showsCaptionBar&&this._captionClipped:!0}get _showsBar(){return!this.hideComments||this._showsCaptionBar}_toggleDrawer(){this._drawerAvailable&&(this.drawerOpen=!this.drawerOpen)}_handleBarKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._toggleDrawer())}_observeCaptionBar(){const e=this.shadowRoot?.querySelector(".caption-toggle")??null,t=this.shadowRoot?.querySelector(".caption-line")??null,[i,s]=this._observedCaptionParts;if(e===i&&t===s){this._measureCaptionClipped();return}if(this._captionBarObserver?.disconnect(),this._captionBarObserver=null,this._observedCaptionParts=[e,t],!e||!t){this._captionClipped&&(this._captionClipped=!1);return}typeof ResizeObserver<"u"&&(this._captionBarObserver=new ResizeObserver(this._measureCaptionClipped),this._captionBarObserver.observe(e),this._captionBarObserver.observe(t)),this._measureCaptionClipped()}_stopObservingCaptionBar(){this._captionBarObserver?.disconnect(),this._captionBarObserver=null,this._observedCaptionParts=[null,null]}_observeCommentBar(){const e=this.shadowRoot?.querySelector(".comment-bar")??null;e!==this._observedCommentBar&&(this._commentBarObserver?.disconnect(),this._commentBarObserver=null,this._observedCommentBar=e,e&&typeof ResizeObserver<"u"&&(this._commentBarObserver=new ResizeObserver(this._syncBarHeight),this._commentBarObserver.observe(e))),this._syncBarHeight()}_stopObservingCommentBar(){this._commentBarObserver?.disconnect(),this._commentBarObserver=null,this._observedCommentBar=null}connectedCallback(){super.connectedCallback(),!this._overlay.isPromoting&&(m._ensureGlobalStyles(),this._clickSetupFrame.schedule())}_runClickSetup(){this.isConnected&&this._attachClickHandlers()}static _ensureGlobalStyles(){if(document.head.querySelector("style[data-esp-lightbox-global-styles]"))return;const e=document.createElement("style");e.dataset.espLightboxGlobalStyles="",e.textContent=`.${m._CLICKABLE_CLASS} { cursor: pointer; }`,document.head.appendChild(e)}updated(e){super.updated(e),e.has("for")&&this._attachClickHandlers(),this.isOpen?(this._observeImageContainer(),this._observeCaptionBar(),this._observeCommentBar(),this._scheduleImageMeasurement()):this._stopImageSizing()}disconnectedCallback(){if(super.disconnectedCallback(),this._overlay.isPromoting)return;this._clickSetupFrame.cancel();const e=this.isOpen;this._stopImageSizing(),this._stopObservingGallery(),this._detachClickHandlers(),e&&(this.isOpen=!1,this.drawerOpen=!1,this._overlay.close())}_renderCurrentImage(){const e=this._images[this.currentIndex];if(!e)return l;const t=this._responsiveSizes(),i=this._imageDimensions??this._viewportDimensions(),s={width:`${i.width}px`,height:`${i.height}px`};if(e.localImage)return o`
+var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(c,e,t,i);else for(var a=c.length-1;a>=0;a--)(n=c[a])&&(r=(s<3?n(r):s>3?n(e,t,r):n(e,t))||r);return s>3&&r&&Object.defineProperty(e,t,r),r},m;import{paintedSurface as O}from"../shared/surface-layer.js";import{css as D,html as o,nothing as l}from"lit";import{customElement as k,property as _,state as u}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{keyed as S}from"lit/directives/keyed.js";import{styleMap as v}from"lit/directives/style-map.js";import{cancelSVG as $}from"../shared/svgs/cancel.js";import{commentSVG as R}from"../shared/svgs/comment.js";import{leftArrow as z}from"../shared/svgs/left-arrow.js";import{rightArrow as B}from"../shared/svgs/right-arrow.js";import{validImageDimensions as g}from"../image/image-dimensions.js";import{EspalierElementBase as x}from"../shared/esp-element-base.js";import{ESP_EVENTS as M}from"../shared/events.js";import{OverlayController as A}from"../shared/overlay-controller.js";import{RafThrottle as w}from"../shared/raf-throttle.js";import"../image/esp-image.js";import"../image/esp-image-option.js";import"../button/esp-button.js";function C(c,e){if(!c)return e;const t=Math.min(e.width/c.width,e.height/c.height);return!Number.isFinite(t)||t<=0?e:{width:Math.min(e.width,c.width*t),height:Math.min(e.height,c.height*t)}}let h=m=class extends x{constructor(){super(...arguments),this.isOpen=!1,this.currentIndex=0,this.drawerOpen=!1,this._images=[],this._clickHandlers=new Map,this._clickSetupFrame=new w(()=>this._runClickSetup()),this._imageMeasureFrame=new w(()=>this._runImageMeasurement()),this._galleryObserver=null,this._galleryRefreshFrame=new w(()=>this._runGalleryRefresh()),this._galleryRefreshInvalidatesDimensions=!1,this._observedGallery=null,this._imageContainerObserver=null,this._observedImageContainer=null,this._observedRenderedImage=null,this._loadedIntrinsicDimensions=null,this._prefetched=new Map,this._captionBarObserver=null,this._observedCaptionParts=[null,null],this._commentBarObserver=null,this._observedCommentBar=null,this._captionClipped=!1,this._imageDimensions=null,this._overlay=new A({host:this,getFocusTrapContainer:()=>this.shadowRoot?.querySelector(".lightbox")??null}),this._touchStartX=0,this._touchStartY=0,this._touchDeltaX=0,this._touchDeltaY=0,this._swiping=!1,this._swipingVertical=!1,this.for="",this.commentCount=0,this.hideComments=!1,this.hideCaption=!1,this._scheduleImageMeasurement=()=>{this.isOpen&&this._imageMeasureFrame.schedule()},this._handleViewportChange=()=>{this._prepareImageDimensions(),this._scheduleImageMeasurement()},this._handleRenderedImageLoad=()=>{const e=this._observedRenderedImage;if(!e)return;const t=g(e.naturalWidth,e.naturalHeight);t&&(this._loadedIntrinsicDimensions=t,this._prepareImageDimensions())},this._measureCaptionClipped=()=>{const e=this.shadowRoot?.querySelector(".caption-line"),t=this.shadowRoot?.querySelector(".caption-toggle");let i=!1;if(e&&t){const s=getComputedStyle(t),r=t.clientWidth-(Number.parseFloat(s.paddingLeft)||0)-(Number.parseFloat(s.paddingRight)||0);i=e.scrollWidth-r>1}i!==this._captionClipped&&(this._captionClipped=i),this.drawerOpen&&!this._drawerAvailable&&(this.drawerOpen=!1)},this._syncBarHeight=()=>{const e=this.shadowRoot?.querySelector(".comment-panel"),t=this._observedCommentBar;!e||!t||e.style.setProperty("--_bar-height",`${t.getBoundingClientRect().height}px`)}}get _commentLabel(){return this.commentCount<=0?"No comments. Add yours!":this.commentCount===1?"1 comment":`${this.commentCount} comments`}open(e){if(this._collectImages(),this._images.length===0)return;const t=Number.isFinite(e)?Math.trunc(e):0,i=Math.max(0,Math.min(t,this._images.length-1));if(this.isOpen){i===this.currentIndex?(this._prepareImageDimensions(),this._scheduleImageMeasurement()):this._goTo(i);return}this.currentIndex=i,this._loadedIntrinsicDimensions=null,this._prepareImageDimensions(),this.isOpen=!0,this.drawerOpen=!1,this._startImageSizing(),this._overlay.open(),this._emitChanged(),this.updateComplete.then(()=>{this.isOpen&&this._overlay.moveFocusInto()})}close(){this.isOpen&&(this.isOpen=!1,this.drawerOpen=!1,this._stopImageSizing(),this._overlay.close())}_viewportDimensions(){const e=document.documentElement.clientWidth||window.innerWidth,t=document.documentElement.clientHeight||window.innerHeight;return g(e,t)??{width:1,height:1}}_availableImageDimensions(){const e=this.shadowRoot?.querySelector(".image-container");if(e){const t=e.getBoundingClientRect(),i=g(t.width,t.height);if(i)return i}return this._viewportDimensions()}_sourceIntrinsicDimensions(e){if(!e)return null;const t=g(e.originalWidth,e.originalHeight);if(t)return t;const i=Array.from(e.children).find(n=>n.tagName==="PICTURE"||n.tagName==="IMG"),r=(i?.tagName==="IMG"?i:i?.querySelector("img"))??e.shadowRoot?.querySelector("img");return r?g(r.naturalWidth,r.naturalHeight)??g(Number(r.getAttribute("width")),Number(r.getAttribute("height"))):null}_prepareImageDimensions(){const e=this._loadedIntrinsicDimensions??this._sourceIntrinsicDimensions(this._images[this.currentIndex]);this._setImageDimensions(C(e,this._availableImageDimensions()))}_setImageDimensions(e){const t=Math.max(1,e.width),i=Math.max(1,e.height);this._imageDimensions&&Math.abs(this._imageDimensions.width-t)<.5&&Math.abs(this._imageDimensions.height-i)<.5||(this._imageDimensions={width:t,height:i})}_responsiveSizes(){return`${Math.max(1,Math.ceil(this._imageDimensions?.width??1))}px`}_responsiveSizesFor(e){const t=C(this._sourceIntrinsicDimensions(e),this._availableImageDimensions());return`${Math.max(1,Math.ceil(t.width))}px`}_runImageMeasurement(){!this.isOpen||!this.isConnected||(this._observeRenderedImage(),this._prepareImageDimensions(),this._prefetchNeighbors())}_startImageSizing(){window.addEventListener("resize",this._handleViewportChange),window.addEventListener("orientationchange",this._handleViewportChange),window.visualViewport?.addEventListener("resize",this._handleViewportChange)}_observeImageContainer(){const e=this.shadowRoot?.querySelector(".image-container")??null;e!==this._observedImageContainer&&(this._imageContainerObserver?.disconnect(),this._imageContainerObserver=null,this._observedImageContainer=e,!(!e||typeof ResizeObserver>"u")&&(this._imageContainerObserver=new ResizeObserver(this._scheduleImageMeasurement),this._imageContainerObserver.observe(e)))}_stopImageSizing(){window.removeEventListener("resize",this._handleViewportChange),window.removeEventListener("orientationchange",this._handleViewportChange),window.visualViewport?.removeEventListener("resize",this._handleViewportChange),this._imageContainerObserver?.disconnect(),this._imageContainerObserver=null,this._observedImageContainer=null,this._stopObservingRenderedImage(),this._stopObservingCaptionBar(),this._stopObservingCommentBar(),this._clearPrefetch(),this._imageMeasureFrame.cancel()}_observeRenderedImage(){const e=this.shadowRoot?.querySelector(".image-container esp-image"),i=e?.querySelector("img")??null??e?.shadowRoot?.querySelector("img")??null;i!==this._observedRenderedImage&&(this._stopObservingRenderedImage(),this._observedRenderedImage=i,i?.addEventListener("load",this._handleRenderedImageLoad)),i?.complete&&this._handleRenderedImageLoad()}_stopObservingRenderedImage(){this._observedRenderedImage?.removeEventListener("load",this._handleRenderedImageLoad),this._observedRenderedImage=null}_projectedSource(e){return e?Array.from(e.children).find(t=>t.tagName==="PICTURE"||t.tagName==="IMG")??null:null}_prepareProjectedClone(e,t,i){const s=e.cloneNode(!0);s.querySelectorAll("source").forEach(n=>n.setAttribute("sizes",t));const r=s.tagName==="IMG"?s:s.querySelector("img");return r?(r.hasAttribute("srcset")&&r.setAttribute("sizes",t),r.setAttribute("loading","eager"),r.setAttribute("fetchpriority",i),r.setAttribute("decoding","async"),s):null}_projectedSignature(e){const t=[e.tagName];for(const s of e.querySelectorAll("source"))t.push(s.getAttribute("type"),s.getAttribute("media"),s.getAttribute("srcset"));const i=e.tagName==="IMG"?e:e.querySelector("img");return t.push(i?.getAttribute("src")??null,i?.getAttribute("srcset")??null,i?.getAttribute("crossorigin")??null,i?.getAttribute("referrerpolicy")??null),JSON.stringify(t)}_warmPlan(e){if(e.localImage)return null;const t=this._projectedSource(e);if(!t)return null;const i=this._responsiveSizesFor(e);return{projected:t,sizes:i,key:`${i}|${this._projectedSignature(t)}`}}_prefetchNeighbors(){const e=this.shadowRoot?.querySelector(".preload");if(!e)return;const t=this._images.length;if(!this.isOpen||t===0){this._clearPrefetch();return}const i=this._images[this.currentIndex],s=new Set,r=m._PREFETCH_RADIUS;for(let n=-r;n<=r;n++){if(n===0)continue;const a=((this.currentIndex+n)%t+t)%t,p=this._images[a];p&&p!==i&&s.add(p)}for(const[n,a]of this._prefetched)s.has(n)&&a.key===this._warmPlan(n)?.key||(a.node.remove(),this._prefetched.delete(n));for(const n of s){if(this._prefetched.has(n))continue;const a=this._warmPlan(n);if(!a)continue;const p=this._prepareProjectedClone(a.projected,a.sizes,"low");p&&(this._prefetched.set(n,{node:p,key:a.key}),e.appendChild(p))}}_clearPrefetch(){for(const e of this._prefetched.values())e.node.remove();this._prefetched.clear()}_collectImages(){if(!this.for)return this._images=[],null;let e;try{e=document.querySelector(this.for)}catch{return this._images=[],null}return e?(this._images=Array.from(e.querySelectorAll("esp-image")),e):(this._images=[],null)}_attachClickHandlers(e=!1){const t=this._images[this.currentIndex],i=this.currentIndex;this._detachClickHandlers();const s=this._collectImages();if(this._images.forEach((f,I)=>{const y=()=>this.open(I);f.addEventListener("click",y),f.classList.add(m._CLICKABLE_CLASS),this._clickHandlers.set(f,y)}),this._observeGallery(s),!this.isOpen)return;if(this._images.length===0){this.close();return}const r=t?this._images.indexOf(t):-1,n=r>=0?r:Math.min(i,this._images.length-1),a=this._images[n]!==t,p=n!==this.currentIndex;this.currentIndex=n,(a||e)&&(this._loadedIntrinsicDimensions=null),this._prepareImageDimensions(),this.requestUpdate(),(a||p)&&this._emitChanged()}_detachClickHandlers(){for(const[e,t]of this._clickHandlers)e.removeEventListener("click",t),e.classList.remove(m._CLICKABLE_CLASS);this._clickHandlers.clear()}_observeGallery(e){e!==this._observedGallery&&(this._cancelGalleryRefresh(),this._galleryObserver?.disconnect(),this._galleryObserver=null,this._observedGallery=e,!(!e||typeof MutationObserver>"u")&&(this._galleryObserver=new MutationObserver(t=>this._scheduleGalleryRefresh(t)),this._galleryObserver.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["caption","crossorigin","height","local-image","low-res","media","original-height","original-width","referrerpolicy","src","srcset","type","url","width"]})))}_scheduleGalleryRefresh(e){const t=this._images[this.currentIndex];t&&(this._galleryRefreshInvalidatesDimensions||=e.some(i=>i.type==="attributes"&&i.attributeName==="caption"?!1:i.target===t||t.contains(i.target))),this._galleryRefreshFrame.schedule()}_runGalleryRefresh(){if(!this.isConnected)return;const e=this._galleryRefreshInvalidatesDimensions;this._galleryRefreshInvalidatesDimensions=!1,this._attachClickHandlers(e)}_cancelGalleryRefresh(){this._galleryRefreshFrame.cancel(),this._galleryRefreshInvalidatesDimensions=!1}_stopObservingGallery(){this._cancelGalleryRefresh(),this._galleryObserver?.disconnect(),this._galleryObserver=null,this._observedGallery=null}_goTo(e){const t=this._images.length;if(t===0)return;const i=(e%t+t)%t;i!==this.currentIndex&&(this.currentIndex=i,this._loadedIntrinsicDimensions=null,this._prepareImageDimensions(),this._scheduleImageMeasurement(),this._emitChanged())}_emitChanged(){this.dispatchEvent(new CustomEvent(M.LIGHTBOX_CHANGED,{detail:{index:this.currentIndex},bubbles:!0,composed:!0}))}_prev(){this._goTo(this.currentIndex-1)}_next(){this._goTo(this.currentIndex+1)}_handleKeyDown(e){if(this.isOpen)switch(e.key){case"Escape":e.preventDefault(),this.close();break;case"ArrowLeft":e.preventDefault(),this._prev();break;case"ArrowRight":e.preventDefault(),this._next();break;case"ArrowUp":e.preventDefault(),this.drawerOpen||this._toggleDrawer();break;case"ArrowDown":e.preventDefault(),this.drawerOpen&&this._toggleDrawer();break;case"Tab":this._overlay.trapFocus(e);break}}_handleTouchStart(e){e.touches.length===1&&(this._touchStartX=e.touches[0].clientX,this._touchStartY=e.touches[0].clientY,this._touchDeltaX=0,this._touchDeltaY=0,this._swiping=!1,this._swipingVertical=!1)}_handleTouchMove(e){if(e.touches.length!==1)return;const t=e.touches[0].clientX-this._touchStartX,i=e.touches[0].clientY-this._touchStartY;!this._swiping&&!this._swipingVertical&&(Math.abs(t)>10||Math.abs(i)>10)&&(Math.abs(t)>Math.abs(i)?this._swiping=!0:this._swipingVertical=!0),this._swiping?(e.preventDefault(),this._touchDeltaX=t):this._swipingVertical&&(e.preventDefault(),this._touchDeltaY=i)}_handleTouchEnd(){this._swiping?this._touchDeltaX>50?this._prev():this._touchDeltaX<-50&&this._next():this._swipingVertical&&(this._touchDeltaY<-50&&!this.drawerOpen?this._toggleDrawer():this._touchDeltaY>50&&this.drawerOpen&&this._toggleDrawer()),this._touchDeltaX=0,this._touchDeltaY=0,this._swiping=!1,this._swipingVertical=!1}_handleLightboxClick(e){if(!this.drawerOpen)return;const t=this.shadowRoot?.querySelector(".comment-panel");t&&e.composedPath().includes(t)||(this.drawerOpen=!1)}_handleImageContainerClick(e){if(e.target===e.currentTarget){if(this.drawerOpen){this.drawerOpen=!1;return}this.close()}}get _visibleCaption(){return this.hideCaption?"":this._images[this.currentIndex]?.caption??""}get _showsCaptionBar(){return this.hideComments&&this._visibleCaption!==""}get _drawerAvailable(){return this.hideComments?this._showsCaptionBar&&this._captionClipped:!0}get _showsBar(){return!this.hideComments||this._showsCaptionBar}_toggleDrawer(){this._drawerAvailable&&(this.drawerOpen=!this.drawerOpen)}_handleBarKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._toggleDrawer())}_observeCaptionBar(){const e=this.shadowRoot?.querySelector(".caption-toggle")??null,t=this.shadowRoot?.querySelector(".caption-line")??null,[i,s]=this._observedCaptionParts;if(e===i&&t===s){this._measureCaptionClipped();return}if(this._captionBarObserver?.disconnect(),this._captionBarObserver=null,this._observedCaptionParts=[e,t],!e||!t){this._captionClipped&&(this._captionClipped=!1);return}typeof ResizeObserver<"u"&&(this._captionBarObserver=new ResizeObserver(this._measureCaptionClipped),this._captionBarObserver.observe(e),this._captionBarObserver.observe(t)),this._measureCaptionClipped()}_stopObservingCaptionBar(){this._captionBarObserver?.disconnect(),this._captionBarObserver=null,this._observedCaptionParts=[null,null]}_observeCommentBar(){const e=this.shadowRoot?.querySelector(".comment-bar")??null;e!==this._observedCommentBar&&(this._commentBarObserver?.disconnect(),this._commentBarObserver=null,this._observedCommentBar=e,e&&typeof ResizeObserver<"u"&&(this._commentBarObserver=new ResizeObserver(this._syncBarHeight),this._commentBarObserver.observe(e))),this._syncBarHeight()}_stopObservingCommentBar(){this._commentBarObserver?.disconnect(),this._commentBarObserver=null,this._observedCommentBar=null}connectedCallback(){super.connectedCallback(),!this._overlay.isPromoting&&(m._ensureGlobalStyles(),this._clickSetupFrame.schedule())}_runClickSetup(){this.isConnected&&this._attachClickHandlers()}static _ensureGlobalStyles(){if(document.head.querySelector("style[data-esp-lightbox-global-styles]"))return;const e=document.createElement("style");e.dataset.espLightboxGlobalStyles="",e.textContent=`.${m._CLICKABLE_CLASS} { cursor: pointer; }`,document.head.appendChild(e)}updated(e){super.updated(e),e.has("for")&&this._attachClickHandlers(),this.isOpen?(this._observeImageContainer(),this._observeCaptionBar(),this._observeCommentBar(),this._scheduleImageMeasurement()):this._stopImageSizing()}disconnectedCallback(){if(super.disconnectedCallback(),this._overlay.isPromoting)return;this._clickSetupFrame.cancel();const e=this.isOpen;this._stopImageSizing(),this._stopObservingGallery(),this._detachClickHandlers(),e&&(this.isOpen=!1,this.drawerOpen=!1,this._overlay.close())}_renderCurrentImage(){const e=this._images[this.currentIndex];if(!e)return l;const t=this._responsiveSizes(),i=this._imageDimensions??this._viewportDimensions(),s={width:`${i.width}px`,height:`${i.height}px`};if(e.localImage)return o`
         <esp-image
           class="lightbox-image"
           original-width=${e.originalWidth}
@@ -38,7 +38,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
           `)}
       </esp-image>
     `}_renderBarToggle(){if(!this._showsBar)return l;const e=this._drawerAvailable,t=e?o`<span class=${b({"comment-bar-caret":!0,open:this.drawerOpen})}>
-          ${A}
+          ${E}
         </span>`:l;return this._showsCaptionBar?o`
         <div
           class=${b({"comment-bar-toggle":!0,"caption-toggle":!0})}
@@ -62,7 +62,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
         @click=${this._toggleDrawer}
         @keydown=${this._handleBarKeyDown}
       >
-        <span class="comment-bar-icon">${S}</span>
+        <span class="comment-bar-icon">${R}</span>
         <span class="comment-bar-label">${this._commentLabel}</span>
         ${t}
       </div>
@@ -102,7 +102,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
                 label="Previous image"
                 @esp-clicked=${this._prev}
               >
-                ${R}
+                ${z}
               </esp-button>
               <esp-button
                 class="next-btn"
@@ -111,13 +111,13 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
                 label="Next image"
                 @esp-clicked=${this._next}
               >
-                ${z}
+                ${B}
               </esp-button>
             `:l}
 
         
         <div class="image-container" @click=${this._handleImageContainerClick}>
-          ${k(e,this._renderCurrentImage())}
+          ${S(e,this._renderCurrentImage())}
         </div>
 
         
@@ -153,7 +153,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
               </div>
             `:l}
       </div>
-    `}};h._PREFETCH_RADIUS=1,h._CLICKABLE_CLASS="esp-lightbox-clickable",h.styles=[...x.styles,O`
+    `}};h._PREFETCH_RADIUS=1,h._CLICKABLE_CLASS="esp-lightbox-clickable",h.styles=[...x.styles,O(3),D`
       :host {
         display: contents;
       }
@@ -172,7 +172,10 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
       .backdrop {
         position: fixed;
         inset: 0;
-        background: var(--esp-lightbox-bg, var(--esp-vellum-background, var(--esp-color-layer-3)));
+        background: var(
+          --esp-lightbox-bg,
+          var(--esp-vellum-background, var(--_esp-surface-background))
+        );
         opacity: var(--esp-lightbox-bg-opacity, var(--esp-vellum-opacity, 0.85));
         z-index: 0;
       }
@@ -431,7 +434,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
           display: none;
         }
       }
-    `],d([u()],h.prototype,"isOpen",void 0),d([u()],h.prototype,"currentIndex",void 0),d([u()],h.prototype,"drawerOpen",void 0),d([u()],h.prototype,"_captionClipped",void 0),d([u()],h.prototype,"_imageDimensions",void 0),d([_({type:String})],h.prototype,"for",void 0),d([_({attribute:"comment-count",type:Number})],h.prototype,"commentCount",void 0),d([_({attribute:"hide-comments",type:Boolean})],h.prototype,"hideComments",void 0),d([_({attribute:"hide-caption",type:Boolean})],h.prototype,"hideCaption",void 0),h=m=d([D("esp-lightbox")],h);const A=o` <svg
+    `],d([u()],h.prototype,"isOpen",void 0),d([u()],h.prototype,"currentIndex",void 0),d([u()],h.prototype,"drawerOpen",void 0),d([u()],h.prototype,"_captionClipped",void 0),d([u()],h.prototype,"_imageDimensions",void 0),d([_({type:String})],h.prototype,"for",void 0),d([_({attribute:"comment-count",type:Number})],h.prototype,"commentCount",void 0),d([_({attribute:"hide-comments",type:Boolean})],h.prototype,"hideComments",void 0),d([_({attribute:"hide-caption",type:Boolean})],h.prototype,"hideCaption",void 0),h=m=d([k("esp-lightbox")],h);const E=o` <svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"

package/dist/menu/esp-menu-group.js

@@ -1,4 +1,4 @@
-var i=function(l,e,o,a){var p=arguments.length,s=p<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,o):a,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(l,e,o,a);else for(var h=l.length-1;h>=0;h--)(d=l[h])&&(s=(p<3?d(s):p>3?d(e,o,s):d(e,o))||s);return p>3&&s&&Object.defineProperty(e,o,s),s},c;import{css as b,html as n,nothing as g}from"lit";import{customElement as y,property as r,state as x}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{createRef as f,ref as u}from"lit/directives/ref.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as w}from"../shared/events.js";import{getIconHrefForHost as z}from"../shared/intent-values.js";import{pathStartsWithSegment as v,pathsMatch as S}from"../shared/path-matching.js";import{SlottedIconController as $}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as C}from"../shared/svgs/render-sprite-icon.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";let t=c=class extends m{constructor(){super(...arguments),this.itemsSlot=f(),this.toggleButton=f(),this.iconSlot=new $(this),this.openedByUrlPrefix=!1,this.dismissedUrlPrefix=!1,this.label="",this.url="",this.icon="",this.open=!1,this.mode="vertical",this.depth=0,this.touchDevice=!1,this.fullScreenPresentation=!1,this.active=!1,this.urlPrefix="",this.globalListenersActive=!1,this.handleDocumentClick=e=>{this.open&&(e.composedPath().includes(this)||this.setOpen(!1))},this.handleDocumentKeydown=e=>{!this.open||e.key!=="Escape"||(e.preventDefault(),this.setOpen(!1),this.toggleButton.value?.focus())}}connectedCallback(){super.connectedCallback(),this.checkActive()}disconnectedCallback(){super.disconnectedCallback(),this.removeGlobalDismissListeners()}firstUpdated(e){super.firstUpdated(e),this.propagateToChildren()}updated(e){super.updated(e),(e.has("mode")||e.has("depth")||e.has("touchDevice"))&&this.propagateToChildren(),(e.has("mode")||e.has("depth")||e.has("urlPrefix"))&&this.syncUrlPrefixExpansion(),e.has("url")&&this.checkActive(),e.has("open")&&!this.open&&(this.openedByUrlPrefix=!1),(e.has("open")||e.has("mode"))&&(this.open&&this.isHorizontalTopLevel?this.addGlobalDismissListeners():this.removeGlobalDismissListeners())}checkActive(){if(!this.url){this.active=!1;return}this.active=S(this.url)}get isHorizontalTopLevel(){return this.mode==="horizontal"&&this.depth===0}get childMode(){return this.mode==="horizontal"?"vertical":this.mode}syncUrlPrefixExpansion(){const e=v(location.pathname,this.urlPrefix);if(e||(this.dismissedUrlPrefix=!1),e&&!this.dismissedUrlPrefix&&!this.isHorizontalTopLevel){this.open||(this.open=!0,this.openedByUrlPrefix=!0);return}this.openedByUrlPrefix&&(this.open=!1,this.openedByUrlPrefix=!1)}getChildren(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()):[]}propagateToChildren(){for(const e of this.getChildren())e instanceof E?(e.mode=this.childMode,e.depth=this.depth+1,e.touchDevice=this.touchDevice):e instanceof c&&(e.mode=this.childMode,e.depth=this.depth+1,e.touchDevice=this.touchDevice)}handleSlotChange(){this.propagateToChildren()}setOpen(e){this.open!==e&&(this.openedByUrlPrefix=!1,this.dismissedUrlPrefix=!e&&v(location.pathname,this.urlPrefix),this.open=e,this.dispatchEvent(new CustomEvent(w.MENU_GROUP_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0})))}handleHeaderClick(){this.toggleOpen()}handleLinkClick(e){e.stopPropagation()}handleToggleClick(e){e.stopPropagation(),this.toggleOpen()}toggleOpen(){this.setOpen(!this.open)}handleToggleKeydown(e){e.key==="Escape"&&(e.preventDefault(),this.setOpen(!1),this.toggleButton.value?.focus())}addGlobalDismissListeners(){this.globalListenersActive||(document.addEventListener("click",this.handleDocumentClick,!0),document.addEventListener("keydown",this.handleDocumentKeydown),this.globalListenersActive=!0)}removeGlobalDismissListeners(){this.globalListenersActive&&(document.removeEventListener("click",this.handleDocumentClick,!0),document.removeEventListener("keydown",this.handleDocumentKeydown),this.globalListenersActive=!1)}renderIcon(){const e=z(this.icon,this),o=this.iconSlot.hasSlottedIcon();return n`
+var i=function(l,e,o,a){var p=arguments.length,s=p<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,o):a,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(l,e,o,a);else for(var c=l.length-1;c>=0;c--)(d=l[c])&&(s=(p<3?d(s):p>3?d(e,o,s):d(e,o))||s);return p>3&&s&&Object.defineProperty(e,o,s),s},h;import{css as b,html as n,nothing as g}from"lit";import{customElement as y,property as r,state as x}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{createRef as f,ref as u}from"lit/directives/ref.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as w}from"../shared/events.js";import{getIconHrefForHost as z}from"../shared/intent-values.js";import{pathStartsWithSegment as v,pathsMatch as S}from"../shared/path-matching.js";import{SlottedIconController as $}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as C}from"../shared/svgs/render-sprite-icon.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";let t=h=class extends m{constructor(){super(...arguments),this.itemsSlot=f(),this.toggleButton=f(),this.iconSlot=new $(this),this.openedByUrlPrefix=!1,this.dismissedUrlPrefix=!1,this.label="",this.url="",this.icon="",this.open=!1,this.mode="vertical",this.depth=0,this.touchDevice=!1,this.fullScreenPresentation=!1,this.active=!1,this.urlPrefix="",this.globalListenersActive=!1,this.handleDocumentClick=e=>{this.open&&(e.composedPath().includes(this)||this.setOpen(!1))},this.handleDocumentKeydown=e=>{!this.open||e.key!=="Escape"||(e.preventDefault(),this.setOpen(!1),this.toggleButton.value?.focus())}}connectedCallback(){super.connectedCallback(),this.checkActive()}disconnectedCallback(){super.disconnectedCallback(),this.removeGlobalDismissListeners()}firstUpdated(e){super.firstUpdated(e),this.propagateToChildren()}updated(e){super.updated(e),(e.has("mode")||e.has("depth")||e.has("touchDevice"))&&this.propagateToChildren(),(e.has("mode")||e.has("depth")||e.has("urlPrefix"))&&this.syncUrlPrefixExpansion(),e.has("url")&&this.checkActive(),e.has("open")&&!this.open&&(this.openedByUrlPrefix=!1),(e.has("open")||e.has("mode"))&&(this.open&&this.isHorizontalTopLevel?this.addGlobalDismissListeners():this.removeGlobalDismissListeners())}checkActive(){if(!this.url){this.active=!1;return}this.active=S(this.url)}get isHorizontalTopLevel(){return this.mode==="horizontal"&&this.depth===0}get childMode(){return this.mode==="horizontal"?"vertical":this.mode}syncUrlPrefixExpansion(){const e=v(location.pathname,this.urlPrefix);if(e||(this.dismissedUrlPrefix=!1),e&&!this.dismissedUrlPrefix&&!this.isHorizontalTopLevel){this.open||(this.open=!0,this.openedByUrlPrefix=!0);return}this.openedByUrlPrefix&&(this.open=!1,this.openedByUrlPrefix=!1)}getChildren(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()):[]}propagateToChildren(){for(const e of this.getChildren())e instanceof E?(e.mode=this.childMode,e.depth=this.depth+1,e.touchDevice=this.touchDevice):e instanceof h&&(e.mode=this.childMode,e.depth=this.depth+1,e.touchDevice=this.touchDevice)}handleSlotChange(){this.propagateToChildren()}setOpen(e){this.open!==e&&(this.openedByUrlPrefix=!1,this.dismissedUrlPrefix=!e&&v(location.pathname,this.urlPrefix),this.open=e,this.dispatchEvent(new CustomEvent(w.MENU_GROUP_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0})))}handleHeaderClick(){this.toggleOpen()}handleLinkClick(e){e.stopPropagation()}handleToggleClick(e){e.stopPropagation(),this.toggleOpen()}toggleOpen(){this.setOpen(!this.open)}handleToggleKeydown(e){e.key==="Escape"&&(e.preventDefault(),this.setOpen(!1),this.toggleButton.value?.focus())}addGlobalDismissListeners(){this.globalListenersActive||(document.addEventListener("click",this.handleDocumentClick,!0),document.addEventListener("keydown",this.handleDocumentKeydown),this.globalListenersActive=!0)}removeGlobalDismissListeners(){this.globalListenersActive&&(document.removeEventListener("click",this.handleDocumentClick,!0),document.removeEventListener("keydown",this.handleDocumentKeydown),this.globalListenersActive=!1)}renderIcon(){const e=z(this.icon,this),o=this.iconSlot.hasSlottedIcon();return n`
       <slot
         name="icon"
         ${u(this.iconSlot.slotRef)}
@@ -56,6 +56,7 @@ var i=function(l,e,o,a){var p=arguments.length,s=p<3?e:a===null?a=Object.getOwnP
       }
 
       .group-header {
+        --_esp-surface-layer: 1;
         position: relative;
         display: grid;
         grid-template-columns: minmax(0, 1fr) min-content;
@@ -70,10 +71,12 @@ var i=function(l,e,o,a){var p=arguments.length,s=p<3?e:a===null?a=Object.getOwnP
 
       .group-header:hover,
       .group-header:focus-within {
+        --_esp-surface-layer: 2;
         background-color: var(--esp-menu-group-hover-background, var(--esp-color-layer-2));
       }
 
       .is-horizontal > .group-header {
+        --_esp-surface-layer: inherit;
         height: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
         border-right: none;
         border-bottom: none;
@@ -246,6 +249,7 @@ var i=function(l,e,o,a){var p=arguments.length,s=p<3?e:a===null?a=Object.getOwnP
       }
 
       .is-horizontal > .group-items {
+        --_esp-surface-layer: 1;
         position: absolute;
         top: 100%;
         left: 0;
@@ -275,4 +279,4 @@ var i=function(l,e,o,a){var p=arguments.length,s=p<3?e:a===null?a=Object.getOwnP
           transition: none;
         }
       }
-    `],i([r({type:String})],t.prototype,"label",void 0),i([r({type:String})],t.prototype,"url",void 0),i([r({type:String})],t.prototype,"icon",void 0),i([r({type:Boolean,reflect:!0})],t.prototype,"open",void 0),i([r({attribute:!1,type:String})],t.prototype,"mode",void 0),i([r({attribute:!1,type:Number})],t.prototype,"depth",void 0),i([r({attribute:!1,type:Boolean})],t.prototype,"touchDevice",void 0),i([r({attribute:"full-screen-presentation",type:Boolean,reflect:!0})],t.prototype,"fullScreenPresentation",void 0),i([x()],t.prototype,"active",void 0),i([r({type:String,attribute:"url-prefix"})],t.prototype,"urlPrefix",void 0),t=c=i([y("esp-menu-group")],t);export{t as EspalierMenuGroup};
+    `],i([r({type:String})],t.prototype,"label",void 0),i([r({type:String})],t.prototype,"url",void 0),i([r({type:String})],t.prototype,"icon",void 0),i([r({type:Boolean,reflect:!0})],t.prototype,"open",void 0),i([r({attribute:!1,type:String})],t.prototype,"mode",void 0),i([r({attribute:!1,type:Number})],t.prototype,"depth",void 0),i([r({attribute:!1,type:Boolean})],t.prototype,"touchDevice",void 0),i([r({attribute:"full-screen-presentation",type:Boolean,reflect:!0})],t.prototype,"fullScreenPresentation",void 0),i([x()],t.prototype,"active",void 0),i([r({type:String,attribute:"url-prefix"})],t.prototype,"urlPrefix",void 0),t=h=i([y("esp-menu-group")],t);export{t as EspalierMenuGroup};

package/dist/menu/esp-menu-item.js

@@ -1,9 +1,9 @@
-var n=function(p,e,r,a){var s=arguments.length,t=s<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,r):a,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(p,e,r,a);else for(var d=p.length-1;d>=0;d--)(i=p[d])&&(t=(s<3?i(t):s>3?i(e,r,t):i(e,r))||t);return s>3&&t&&Object.defineProperty(e,r,t),t};import{css as u,html as c,nothing as h}from"lit";import{customElement as v,property as l,state as f}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{ref as g}from"lit/directives/ref.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as k}from"../shared/events.js";import{pathsMatch as w}from"../shared/path-matching.js";import{SlottedIconController as z}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as x}from"../shared/svgs/render-sprite-icon.js";let o=class extends m{constructor(){super(...arguments),this.iconSlot=new z(this),this.label="",this.url="",this.icon="",this.mode="vertical",this.depth=0,this.touchDevice=!1,this.active=!1}connectedCallback(){super.connectedCallback(),this.checkActive()}updated(e){super.updated(e),e.has("url")&&this.checkActive()}checkActive(){if(!this.url){this.active=!1;return}this.active=w(this.url)}handleButtonClick(){this.dispatchEvent(new CustomEvent(k.CLICKED,{detail:{},bubbles:!0,composed:!0}))}render(){const e=y(this.icon,this),r=this.iconSlot.hasSlottedIcon(":scope > *"),a=r||e.length>0,s={item:!0,"is-horizontal":this.mode==="horizontal"&&this.depth===0,"is-vertical":this.mode!=="horizontal"||this.depth>0,"is-drawer":this.mode==="drawer","is-nested":this.depth>0,"has-icon":a,"is-active":this.active},t=c`<span part="menu-text">${this.label}</span>`,i=c`<span class="icon-area" aria-hidden=${a?"true":h}>
+var a=function(p,e,r,n){var s=arguments.length,t=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,r):n,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(p,e,r,n);else for(var d=p.length-1;d>=0;d--)(i=p[d])&&(t=(s<3?i(t):s>3?i(e,r,t):i(e,r))||t);return s>3&&t&&Object.defineProperty(e,r,t),t};import{css as m,html as c,nothing as h}from"lit";import{customElement as v,property as l,state as f}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{ref as g}from"lit/directives/ref.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{ESP_EVENTS as k}from"../shared/events.js";import{pathsMatch as w}from"../shared/path-matching.js";import{SlottedIconController as z}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as x}from"../shared/svgs/render-sprite-icon.js";let o=class extends u{constructor(){super(...arguments),this.iconSlot=new z(this),this.label="",this.url="",this.icon="",this.mode="vertical",this.depth=0,this.touchDevice=!1,this.active=!1}connectedCallback(){super.connectedCallback(),this.checkActive()}updated(e){super.updated(e),e.has("url")&&this.checkActive()}checkActive(){if(!this.url){this.active=!1;return}this.active=w(this.url)}handleButtonClick(){this.dispatchEvent(new CustomEvent(k.CLICKED,{detail:{},bubbles:!0,composed:!0}))}render(){const e=y(this.icon,this),r=this.iconSlot.hasSlottedIcon(":scope > *"),n=r||e.length>0,s={item:!0,"is-horizontal":this.mode==="horizontal"&&this.depth===0,"is-vertical":this.mode!=="horizontal"||this.depth>0,"is-drawer":this.mode==="drawer","is-nested":this.depth>0,"has-icon":n,"is-active":this.active},t=c`<span part="menu-text">${this.label}</span>`,i=c`<span class="icon-area" aria-hidden=${n?"true":h}>
       <slot ${g(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
       ${!r&&e?x(e):h}
     </span>`;return c`<div class=${b(s)}>
       ${this.active?c`<span class="current-page" aria-current="page">${t}${i}</span>`:this.url?c`<a href=${this.url}>${t}${i}</a>`:c`<button type="button" @click=${this.handleButtonClick}>${t}${i}</button>`}
-    </div>`}};o.styles=[...m.styles,u`
+    </div>`}};o.styles=[...u.styles,m`
       :host {
         display: block;
       }
@@ -108,6 +108,7 @@ var n=function(p,e,r,a){var s=arguments.length,t=s<3?e:a===null?a=Object.getOwnP
       }
 
       .is-vertical {
+        --_esp-surface-layer: 1;
         border-right: 1px solid var(--esp-menu-item-border-color, var(--esp-color-border));
         border-bottom: 1px solid var(--esp-menu-item-border-color, var(--esp-color-border));
         background-color: var(--esp-menu-item-background, var(--esp-color-layer-1));
@@ -115,11 +116,13 @@ var n=function(p,e,r,a){var s=arguments.length,t=s<3?e:a===null?a=Object.getOwnP
 
       .is-vertical:hover,
       .is-vertical:focus-within {
+        --_esp-surface-layer: 2;
         color: var(--esp-menu-item-hover-color, var(--esp-color-headings-hover));
         background-color: var(--esp-menu-item-hover-background, var(--esp-color-layer-2));
       }
 
       .is-nested {
+        --_esp-surface-layer: 1;
         border-bottom: none;
         background-color: var(--esp-menu-item-background, var(--esp-color-layer-1));
       }
@@ -131,6 +134,7 @@ var n=function(p,e,r,a){var s=arguments.length,t=s<3?e:a===null?a=Object.getOwnP
       }
 
       .is-active {
+        --_esp-surface-layer: 2;
         color: var(--esp-menu-item-active-color, var(--esp-color-link));
         background-color: var(--esp-menu-item-active-background, var(--esp-color-layer-2));
       }
@@ -186,4 +190,4 @@ var n=function(p,e,r,a){var s=arguments.length,t=s<3?e:a===null?a=Object.getOwnP
         width: var(--esp-menu-item-icon-size, calc(1 * var(--esp-size-font)));
         object-fit: contain;
       }
-    `],n([l({type:String})],o.prototype,"label",void 0),n([l({type:String})],o.prototype,"url",void 0),n([l({type:String})],o.prototype,"icon",void 0),n([l({attribute:!1,type:String})],o.prototype,"mode",void 0),n([l({attribute:!1,type:Number})],o.prototype,"depth",void 0),n([l({attribute:!1,type:Boolean})],o.prototype,"touchDevice",void 0),n([f()],o.prototype,"active",void 0),o=n([v("esp-menu-item")],o);export{o as EspalierMenuItem};
+    `],a([l({type:String})],o.prototype,"label",void 0),a([l({type:String})],o.prototype,"url",void 0),a([l({type:String})],o.prototype,"icon",void 0),a([l({attribute:!1,type:String})],o.prototype,"mode",void 0),a([l({attribute:!1,type:Number})],o.prototype,"depth",void 0),a([l({attribute:!1,type:Boolean})],o.prototype,"touchDevice",void 0),a([f()],o.prototype,"active",void 0),o=a([v("esp-menu-item")],o);export{o as EspalierMenuItem};

package/dist/menu/esp-menu.js

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

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

@@ -23,7 +23,7 @@ export interface PageWorkspaceResizeDetail {
     flyoutWidth: number;
 }
 /**
- * Used to lay out standard page structure.
+ * Arranges a page's header, navigation, main content, and footer.
  *
  * @slot header - Global navigation content (typically an `esp-header`).
  *

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

@@ -1,5 +1,6 @@
 import{css as a,unsafeCSS as e}from"lit";import{EspalierElementBase as i}from"../shared/esp-element-base.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as t}from"../shared/responsive.js";const n=[...i.styles,a`
     :host {
+      --_esp-surface-layer: initial;
       --_esp-page-resolved-max-width: var(--esp-page-main-max-width, 1536px);
       --_esp-page-main-min-width: var(--esp-page-main-min-width, 30rem);
       --_esp-page-preview-resolved-min-width: var(--esp-page-preview-min-width, 22.5rem);

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

@@ -4,8 +4,7 @@ import "./esp-picker-menu.js";
 import { type PickerItem } from "./esp-picker-item.js";
 import { EspalierPickerBase } from "./esp-picker-base.js";
 /**
- * Component for selecting a single option from a list of
- * options. For selecting multiple options, see
+ * Selects one option from a list. For selecting multiple options, see
  * [esp-pick-some](/components/pickers/pick-some/).
  *
  * ```html

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

@@ -4,7 +4,7 @@ import "./esp-picker-menu.js";
 import { type PickerItem } from "./esp-picker-item.js";
 import { EspalierPickerBase } from "./esp-picker-base.js";
 /**
- * Component for selecting multiple options from a list of options.
+ * Selects multiple options from a list.
  *
  * ```html
  * <esp-box>

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

@@ -1,7 +1,7 @@
-var c=function(e,t,r,n){var i=arguments.length,o=i<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,r):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(e,t,r,n);else for(var h=e.length-1;h>=0;h--)(l=e[h])&&(o=(i<3?l(o):i>3?l(t,r,o):l(t,r))||o);return i>3&&o&&Object.defineProperty(t,r,o),o};import{LitElement as g,nothing as u,css as v,html as a}from"lit";import{customElement as m,property as p}from"lit/decorators.js";import{ref as f}from"lit/directives/ref.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as b}from"../shared/svgs/render-sprite-icon.js";import{DocumentSpriteController as k}from"../shared/document-sprite.js";const S=["text","icon","styles"],d=new WeakMap;function P(e,t){d.set(e,t)}function E(e){return{text:e.text||e.getAttribute("text")||e.textContent?.trim()||"",icon:e.icon||e.getAttribute("icon")||"",styles:e.styles}}function H(e,t){return e.text===t.text&&(e.icon??"")===(t.icon??"")&&e.styles===t.styles}function j(e){return e.value||e.getAttribute("value")||""}let s=class extends g{constructor(){super(),this.internals=this.attachInternals(),this.iconSlot=new x(this),this.text="",this.icon="",this.value="",this.selected=!1,new k(this,{reactToSpriteChanges:!0}),this.internals.role="option"}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","option")}updated(t){super.updated(t),S.some(r=>t.has(r))&&d.get(this)?.pickerItemChanged(this),t.has("selected")&&(this.internals.ariaSelected=String(this.selected),this.setAttribute("aria-selected",String(this.selected)))}renderHighlightedText(){const t=this.highlightRanges;if(!t||t.length===0)return this.text;const r=[...t].sort((o,l)=>o[0]-l[0]),n=[];let i=0;for(const[o,l]of r)o>i&&n.push(a`${this.text.slice(i,o)}`),n.push(a`<mark>${this.text.slice(o,l)}</mark>`),i=l;return i<this.text.length&&n.push(a`${this.text.slice(i)}`),n}render(){const t=y(this.icon,this),r=this.iconSlot.hasSlottedIcon(":scope > *");return a`<div>
+var c=function(e,t,o,n){var s=arguments.length,r=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,t,o,n);else for(var h=e.length-1;h>=0;h--)(l=e[h])&&(r=(s<3?l(r):s>3?l(t,o,r):l(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{LitElement as u,nothing as g,css as f,html as a}from"lit";import{customElement as v,property as p}from"lit/decorators.js";import{ref as m}from"lit/directives/ref.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as b}from"../shared/svgs/render-sprite-icon.js";import{DocumentSpriteController as k}from"../shared/document-sprite.js";const S=["text","icon","styles"],d=new WeakMap;function z(e,t){d.set(e,t)}function P(e){return{text:e.text||e.getAttribute("text")||e.textContent?.trim()||"",icon:e.icon||e.getAttribute("icon")||"",styles:e.styles}}function E(e,t){return e.text===t.text&&(e.icon??"")===(t.icon??"")&&e.styles===t.styles}function H(e){return e.value||e.getAttribute("value")||""}let i=class extends u{constructor(){super(),this.internals=this.attachInternals(),this.iconSlot=new x(this),this.text="",this.icon="",this.value="",this.selected=!1,new k(this,{reactToSpriteChanges:!0}),this.internals.role="option"}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","option")}updated(t){super.updated(t),S.some(o=>t.has(o))&&d.get(this)?.pickerItemChanged(this),t.has("selected")&&(this.internals.ariaSelected=String(this.selected),this.setAttribute("aria-selected",String(this.selected)))}renderHighlightedText(){const t=this.highlightRanges;if(!t||t.length===0)return this.text;const o=[...t].sort((r,l)=>r[0]-l[0]),n=[];let s=0;for(const[r,l]of o)r>s&&n.push(a`${this.text.slice(s,r)}`),n.push(a`<mark>${this.text.slice(r,l)}</mark>`),s=l;return s<this.text.length&&n.push(a`${this.text.slice(s)}`),n}render(){const t=y(this.icon,this),o=this.iconSlot.hasSlottedIcon(":scope > *");return a`<div>
       <span class="icon">
-        <slot ${f(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
-        ${!r&&t?b(t):u}
+        <slot ${m(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
+        ${!o&&t?b(t):g}
       </span>
       <span class="text">${this.renderHighlightedText()}</span>
       ${this.selected?a`<svg
@@ -19,13 +19,15 @@ var c=function(e,t,r,n){var i=arguments.length,o=i<3?t:n===null?n=Object.getOwnP
             />
             <path d="M9 12l2 2l4 -4" />
           </svg>`:a``}
-    </div>`}};s.styles=v`
+    </div>`}};i.styles=f`
     :host(:hover),
     :host(.highlighted) {
       div {
+        --_esp-surface-layer: 3;
         background-color: var(--esp-color-picker-bg-hover, var(--esp-color-layer-3));
 
         > span.icon {
+          --_esp-surface-layer: 4;
           background-color: var(--esp-color-picker-bg-alt-hover, var(--esp-color-layer-4));
         }
       }
@@ -43,11 +45,13 @@ var c=function(e,t,r,n){var i=arguments.length,o=i<3?t:n===null?n=Object.getOwnP
     }
 
     div {
+      --_esp-surface-layer: 2;
       display: grid;
       grid-template-columns: min-content auto min-content;
       background-color: var(--esp-color-picker-bg, var(--esp-color-layer-2));
 
       .icon {
+        --_esp-surface-layer: 3;
         display: grid;
         grid-template-columns: min-content;
         background-color: var(--esp-color-picker-bg-alt, var(--esp-color-layer-3));
@@ -77,4 +81,4 @@ var c=function(e,t,r,n){var i=arguments.length,o=i<3?t:n===null?n=Object.getOwnP
         margin: var(--esp-size-tiny);
       }
     }
-  `,c([p({type:Object})],s.prototype,"styles",void 0),c([p({type:String})],s.prototype,"text",void 0),c([p({type:String})],s.prototype,"icon",void 0),c([p({type:String})],s.prototype,"value",void 0),c([p({type:Boolean})],s.prototype,"selected",void 0),c([p({attribute:"highlight-ranges",type:Array})],s.prototype,"highlightRanges",void 0),s=c([m("esp-picker-item")],s);export{s as EspalierPickerItem,P as adoptPickerItem,E as pickerItemDisplay,j as pickerItemValue,H as samePickerItemDisplay};
+  `,c([p({type:Object})],i.prototype,"styles",void 0),c([p({type:String})],i.prototype,"text",void 0),c([p({type:String})],i.prototype,"icon",void 0),c([p({type:String})],i.prototype,"value",void 0),c([p({type:Boolean})],i.prototype,"selected",void 0),c([p({attribute:"highlight-ranges",type:Array})],i.prototype,"highlightRanges",void 0),i=c([v("esp-picker-item")],i);export{i as EspalierPickerItem,z as adoptPickerItem,P as pickerItemDisplay,H as pickerItemValue,E as samePickerItemDisplay};

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

@@ -55,6 +55,7 @@ var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnP
     }
 
     .status-message {
+      --_esp-surface-layer: 2;
       display: grid;
       place-content: center;
       min-height: 3em;
@@ -76,6 +77,7 @@ var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnP
       }
 
       :host([data-fullscreen]) .menu-content {
+        --_esp-surface-layer: 2;
         grid-row: 2;
         box-sizing: border-box;
         min-height: 0;

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

@@ -1,9 +1,7 @@
 import { LitElement, type PropertyValues } from "lit";
 /**
- * Display a contextual UI overlay that appears when a
- * user interacts with an element, providing a temporary space
- * for additional information, options, or actions without blocking
- * the underlying content. Uses the native Popover API to render
+ * Shows contextual information, options, or actions while the underlying
+ * page remains interactive. Uses the native Popover API to render
  * in the browser's top layer, escaping all ancestor `overflow`
  * and `z-index` contexts.
  *

package/dist/repeater/esp-repeater.js

@@ -73,6 +73,7 @@ var n=function(f,e,t,s){var r=arguments.length,o=r<3?e:s===null?s=Object.getOwnP
 
       .state-panel,
       .status-footer {
+        --_esp-surface-layer: 2;
         display: grid;
         gap: var(--esp-size-tiny);
         padding: var(--esp-repeater-padding, var(--esp-size-small));

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

@@ -8,10 +8,10 @@ export type { SchemeEvents } from "../shared/bus-events.js";
 /**
  * Root container for the Espalier design system.
  *
- * Provides the full design-token pipeline — colors, scales, and
- * fonts — to every descendant component.  All tokens are
- * JS-computed from a pair of Base64-encoded theme objects and
- * emitted as CSS custom properties on the host element.
+ * Supplies descendant components with color, size, and font tokens.
+ * Configure light and dark themes through JavaScript properties or
+ * Base64-encoded attributes. The root emits CSS custom properties
+ * for the active theme.
  *
  * ### Theme API
  *