@taprootio/espalier 6.1.0 → 6.3.0

package/dist/image/esp-image.js

@@ -1,4 +1,4 @@
-var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(m,e,t,r);else for(var n=m.length-1;n>=0;n--)(s=m[n])&&(a=(i<3?s(a):i>3?s(e,t,a):s(e,t))||a);return i>3&&a&&Object.defineProperty(e,t,a),a},y;import{css as q,html as b,nothing as F}from"lit";import{customElement as U,property as c,state as u}from"lit/decorators.js";import{EspalierElementBase as C}from"../shared/esp-element-base.js";import{slotHasContent as G}from"../shared/slot-content.js";import{renderVisualOverlay as L,visualOverlayStyles as V}from"../shared/visual-overlay.js";import{focusConverter as K,normalizeFocus as X}from"./image-focus.js";import{ensureImageTextureFilters as Y,imageTextureFilterId as J}from"./image-texture-filters.js";import{getImageTexture as R,isBuiltInImageTexture as T,subscribeToImageTextureRegistry as Q}from"../shared/image-texture-registry.js";import{validImageDimensions as O}from"./image-dimensions.js";import{parseImageRatio as z}from"./image-ratio.js";import{isMeasuredScrim as Z,scrimReach as ee,unionScrimBox as j}from"./scrim-reach.js";import"./esp-image-option.js";import{enumConverter as v}from"../shared/enum-converter.js";import{RafThrottle as te}from"../shared/raf-throttle.js";const P=new Set(["auto","none","flat","top","bottom","left","right","radial"]),I=new Set(["soft","medium","strong"]),E=new Set(["none","flush"]),A=new Set(["fine","medium","coarse"]),H=new Set(["auto","light","dark"]),N=new Set(["bottom-start","bottom","bottom-end","center","middle-start","middle-end","top-start","top","top-end"]),B=new Set(["overlay","below"]),W=["overlay","overlay-supporting","overlay-action"];function re(m){if(!m)return null;const[e,t=1]=m.split("/").map(i=>Number(i.trim())),r=e/t;return Number.isFinite(r)&&r>0?r:null}const f=new Set;let w=null;const ae={attributeFilter:["dir"],subtree:!0};function $(m,e){if(!(e?!f.has(m)&&!!f.add(m):f.delete(m))||typeof MutationObserver>"u")return;if(w?.disconnect(),f.size===0){w=null;return}w??=new MutationObserver(()=>{for(const i of f)i.requestUpdate()});const r=new Set([document.documentElement]);for(const i of f){let a=i;for(;a;){const s=a.getRootNode();s instanceof ShadowRoot&&r.add(s),a=a instanceof Element&&a.assignedSlot?a.assignedSlot:a.parentNode instanceof ShadowRoot?a.parentNode.host:a.parentNode}}for(const i of r)w.observe(i,ae)}function _(m){const e=[];for(const t of m)getComputedStyle(t).display==="contents"?e.push(..._(t.children)):e.push(t);return e}function ie(m){const e=m.getBoundingClientRect();if(e.width>0||e.height>0)return e;const t=m.ownerDocument.createRange();t.selectNodeContents(m);const r=t.getBoundingClientRect();return r.width>0||r.height>0?r:null}let o=y=class extends C{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.compactPlacement="overlay",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.overlayHasStack=!1,this.overlayHasHeadline=!1,this.overlayHasSupporting=!1,this.renderedScrim=null,this.measuredScrim=null,this.grown=!1,this.growthWidth=null,this.growthCheckPending=!1,this.growthBlock=null,this.growthRollback=new te(()=>{this.grown&&(this.grown=!1,this.growthWidth=null)}),this.resizeObserver=null,this.scrimObserver=null,this.appliedScrimReach=0,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(W.includes(e.target.name)){this.syncOverlaySlots(),this.observeScrimTargets();return}this.requestUpdate()}},this.handleWindowResize=()=>{!this.banner||!this.overlayHasContent||(this.measureScrimReach(),this.growthBlock&&(clearTimeout(this.growthRetryTimer),this.growthRetryTimer=setTimeout(()=>{!this.growthBlock||!this.isConnected||(this.growthBlock=null,this.measureScrimReach())},150)))}}get isPortrait(){const e=O(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}overlaySlot(e){return this.shadowRoot?.querySelector(`slot[name="${e}"]`)??null}syncOverlaySlots(){const e=n=>{const d=this.overlaySlot(n);return d?G(d):!1},t=e("overlay"),r=e("overlay-supporting"),i=r||e("overlay-action"),a=i||t;t!==this.overlayHasHeadline&&(this.overlayHasHeadline=t),r!==this.overlayHasSupporting&&(this.overlayHasSupporting=r),a!==this.overlayHasContent&&(this.overlayHasContent=a),i!==this.overlayHasStack&&(this.overlayHasStack=i);const s=this.overlaySlot("overlay-action")?.assignedElements({flatten:!0})??[];s.length>1&&console.warn(`<esp-image> takes one overlay action; ${s.length} elements are slotted into "overlay-action".`,this)}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(i=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}i.some(a=>a.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),y.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=Q(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{(this.grown||this.growthBlock)&&this.measureScrimReach();const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),window.addEventListener("resize",this.handleWindowResize,{passive:!0}),this.syncOffscreenDeferral(),this.hasUpdated&&(this.observeScrimTargets(),this.syncDirectionTracking())}disconnectedCallback(){super.disconnectedCallback(),$(this,!1),window.removeEventListener("resize",this.handleWindowResize),this.growthRollback.cancel(),clearTimeout(this.growthRetryTimer),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.scrimObserver?.disconnect(),this.scrimObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}observeScrimTargets(){if(!this.shadowRoot)return;this.scrimObserver??=new ResizeObserver(()=>this.measureScrimReach()),this.scrimObserver.disconnect();const e=this.shadowRoot?.querySelector(".overlay");e&&this.scrimObserver.observe(e);const t=this.shadowRoot?.querySelector('[part="scrim"]');t&&this.scrimObserver.observe(t);const r=this.shadowRoot?.querySelector(".stack");r&&this.overlayHasStack&&this.scrimObserver.observe(r);for(const i of _(this.overlayElements()))this.scrimObserver.observe(i,{box:"border-box"})}overlayElements(){return W.flatMap(e=>this.overlaySlot(e)?.assignedElements({flatten:!0})??[])}measureScrimReach(){const e=this.shadowRoot?.querySelector(".frame");if(!e||this.syncGrowth(e))return;const t=this.resolvedScrim();if(this.renderedScrim!==null&&t!==this.renderedScrim){this.requestUpdate();return}let r=0;const i=this.shadowRoot?.querySelector('[part="scrim"]');if(this.banner&&this.overlayHasContent&&!this.bandActive()&&i&&Z(t)){const a=i.getBoundingClientRect();if(a.width<=0||a.height<=0)return;const s=j(this.overlayElements().map(ie));r=ee(t,a,s)}r!==this.appliedScrimReach&&(this.appliedScrimReach=r,r>0?e.style.setProperty("--_esp-image-scrim-reach",`${r}%`):e.style.removeProperty("--_esp-image-scrim-reach"))}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),i=Number(t.getAttribute("width"));if(!r||!Number.isFinite(i)||i<=0)continue;const a=t.getAttribute("type")??"",s=e.get(a)??[];s.push({url:r,width:i}),e.set(a,s)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((i,a)=>i.width-a.width).map(i=>`${i.url} ${i.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return T(this.texture)?this.texture:R(this.texture)?this.texture:"none"}overlayContentHeight(){const e=this.shadowRoot?.querySelector(".overlay");if(!e||e.hidden)return null;const t=getComputedStyle(e),r=(Number.parseFloat(t.paddingTop)||0)+(Number.parseFloat(t.paddingBottom)||0);if(this.overlayHasStack){const s=this.shadowRoot?.querySelector(".stack");return s?r+s.getBoundingClientRect().height:null}let i=1/0,a=-1/0;for(const s of _(this.overlayElements())){const n=s.getBoundingClientRect();if(n.width<=0&&n.height<=0)continue;const d=getComputedStyle(s);i=Math.min(i,n.top-(Number.parseFloat(d.marginTop)||0)),a=Math.max(a,n.bottom+(Number.parseFloat(d.marginBottom)||0))}return a>i?r+a-i:null}syncGrowth(e){const t=re(this.resolvedAspectRatio());let r=!1;if(this.banner&&this.overlayHasContent&&!this.bandActive()&&t!==null){const i=e.getBoundingClientRect(),a=this.overlayContentHeight();if(i.width<=0||a===null)return!1;const s=getComputedStyle(this).maxBlockSize,n=this.growthBlock;n&&(Math.abs(i.width-n.width)>1||s!==n.cap||a<n.need-.5)&&(this.growthBlock=null);const d=this.getBoundingClientRect(),h=getComputedStyle(this),p=[h.borderTopWidth,h.borderBottomWidth,h.paddingTop,h.paddingBottom].reduce((x,S)=>x+(Number.parseFloat(S)||0),0),g=d.width/t,k=getComputedStyle(e),M=(Number.parseFloat(k.borderTopWidth)||0)+(Number.parseFloat(k.borderBottomWidth)||0),D=g-p-M;if(this.grown){const x=this.growthCheckPending&&this.growthWidth!==null&&i.width>this.growthWidth+1;this.growthCheckPending=!1;const S=d.height-p<i.height-.5;if(x||S)return this.growthBlock={width:x?this.growthWidth:i.width,cap:s,need:a},this.scheduleGrowthRollback(),!1;r=a>D+.5}else r=this.growthBlock===null&&this.copyClipped(i,k)&&Math.abs(d.height-g)<=1,r&&(this.growthWidth=i.width,this.growthCheckPending=!0)}return r===this.grown?!1:(this.grown=r,r||(this.growthWidth=null),!0)}scheduleGrowthRollback(){this.growthRollback.schedule()}copyClipped(e,t){const r=e.top+(Number.parseFloat(t.borderTopWidth)||0),i=e.bottom-(Number.parseFloat(t.borderBottomWidth)||0),a=[],s=this.overlayHasStack?this.shadowRoot?.querySelector(".stack"):null;if(s)a.push(s.getBoundingClientRect());else for(const d of _(this.overlayElements())){const h=d.getBoundingClientRect();(h.width>0||h.height>0)&&a.push(h)}const n=j(a);return n!==null&&(n.top<r-.5||n.bottom>i+.5)}grownActive(){return this.grown&&this.banner&&!this.bandActive()}syncDirectionTracking(){$(this,this.isConnected&&this.banner&&this.scrim==="auto"&&this.contentPosition.startsWith("middle"))}bandActive(){return this.banner&&this.compact&&this.compactPlacement==="below"&&this.overlayHasContent}resolvedScrim(){if(this.scrim!=="auto")return this.scrim;if(!this.overlayHasContent||this.bandActive())return"none";if(this.contentPosition.startsWith("top"))return"top";if(this.contentPosition.startsWith("bottom"))return"bottom";if(this.contentPosition.startsWith("middle")){const e=getComputedStyle(this).direction==="rtl";return this.contentPosition==="middle-start"!==e?"left":"right"}return"radial"}resolvedAspectRatio(){const e=O(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=z(this.ratio);return(this.compact?z(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!P.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!H.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!I.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!E.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!A.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!N.has(this.contentPosition)&&(this.contentPosition="bottom-start"),e.has("compactPlacement")&&!B.has(this.compactPlacement)&&(this.compactPlacement="overlay")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=X(this.focusPoint),r=Number((t.x*100).toFixed(4)),i=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${i}%`);const a=this.resolvedAspectRatio(),s=this.grownActive()||this.bandActive();for(const[p,g]of[["--_esp-image-aspect-ratio",!s],["--_esp-image-frame-aspect-ratio",s]])a&&g?this.style.setProperty(p,a):this.style.removeProperty(p);this.syncDirectionTracking();const n=this.resolvedTexture();if(["paper","grain","grunge"].includes(n)){const p=n==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":n;this.style.setProperty("--_esp-image-texture-filter",`url(#${J(p,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const d=T(n)?void 0:R(n),h=[["--_esp-image-registered-image",d?.image],["--_esp-image-registered-size",d?.size],["--_esp-image-registered-repeat",d?.repeat],["--_esp-image-registered-position",d?.position],["--_esp-image-registered-opacity",d?.opacity?.toString()],["--_esp-image-registered-blend-mode",d?.blendMode]];for(const[p,g]of h)g===void 0?this.style.removeProperty(p):this.style.setProperty(p,g)}firstUpdated(e){super.firstUpdated(e),this.syncOverlaySlots(),this.observeScrimTargets()}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),(e.has("banner")||e.has("scrim")||e.has("contentPosition")||e.has("overlayHasContent")||e.has("overlayHasStack")||e.has("compactPlacement")||e.has("grown")||e.has("compact")||this.renderedScrim!==this.measuredScrim)&&(this.measuredScrim=this.renderedScrim,this.observeScrimTargets()),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&Y(this.renderRoot),this.renderedWidth>0){const s=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,n=s>0&&this.renderedWidth<s;n!==this.compact&&(this.compact=n)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const a of t.querySelectorAll("source"))a.setAttribute("sizes",r);const i=this.findProjectedImage(t);i?.hasAttribute("srcset")&&i.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return b`<img
+var n=function(d,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(d,e,t,r);else for(var l=d.length-1;l>=0;l--)(s=d[l])&&(i=(a<3?s(i):a>3?s(e,t,i):s(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i},y;import{css as q,html as b,nothing as F}from"lit";import{customElement as U,property as c,state as g}from"lit/decorators.js";import{EspalierElementBase as C}from"../shared/esp-element-base.js";import{slotHasContent as G}from"../shared/slot-content.js";import{renderVisualOverlay as L,visualOverlayStyles as V}from"../shared/visual-overlay.js";import{focusConverter as K,normalizeFocus as X}from"./image-focus.js";import{ensureImageTextureFilters as Y,imageTextureFilterId as J}from"./image-texture-filters.js";import{getImageTexture as R,isBuiltInImageTexture as T,subscribeToImageTextureRegistry as Q}from"../shared/image-texture-registry.js";import{validImageDimensions as O}from"./image-dimensions.js";import{parseImageRatio as z}from"./image-ratio.js";import{isMeasuredScrim as Z,scrimReach as ee,unionScrimBox as H}from"./scrim-reach.js";import"./esp-image-option.js";import{enumConverter as f}from"../shared/enum-converter.js";import{RafThrottle as te}from"../shared/raf-throttle.js";const j=new Set(["auto","none","flat","top","bottom","left","right","radial"]),P=new Set(["soft","medium","strong"]),I=new Set(["none","flush"]),A=new Set(["fine","medium","coarse"]),E=new Set(["auto","light","dark"]),N=new Set(["bottom-start","bottom","bottom-end","center","middle-start","middle-end","top-start","top","top-end"]),B=new Set(["overlay","below"]),$=["overlay","overlay-supporting","overlay-action"];function re(d){if(!d)return null;const[e,t=1]=d.split("/").map(a=>Number(a.trim())),r=e/t;return Number.isFinite(r)&&r>0?r:null}const v=new Set;let w=null;const ae={attributeFilter:["dir"],subtree:!0};function W(d,e){if(!(e?!v.has(d)&&!!v.add(d):v.delete(d))||typeof MutationObserver>"u")return;if(w?.disconnect(),v.size===0){w=null;return}w??=new MutationObserver(()=>{for(const a of v)a.requestUpdate()});const r=new Set([document.documentElement]);for(const a of v){let i=a;for(;i;){const s=i.getRootNode();s instanceof ShadowRoot&&r.add(s),i=i instanceof Element&&i.assignedSlot?i.assignedSlot:i.parentNode instanceof ShadowRoot?i.parentNode.host:i.parentNode}}for(const a of r)w.observe(a,ae)}function k(d){const e=[];for(const t of d)getComputedStyle(t).display==="contents"?e.push(...k(t.children)):e.push(t);return e}function ie(d){const e=d.getBoundingClientRect();if(e.width>0||e.height>0)return e;const t=d.ownerDocument.createRange();t.selectNodeContents(d);const r=t.getBoundingClientRect();return r.width>0||r.height>0?r:null}let o=y=class extends C{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.compactPlacement="overlay",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.overlayHasStack=!1,this.overlayHasHeadline=!1,this.overlayHasSupporting=!1,this.renderedScrim=null,this.measuredScrim=null,this.grown=!1,this.softHeight=!1,this.growthWidth=null,this.growthCheckPending=!1,this.growthBlock=null,this.growthRollback=new te(()=>{this.grown&&(this.grown=!1,this.growthWidth=null)}),this.resizeObserver=null,this.scrimObserver=null,this.appliedScrimReach=0,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if($.includes(e.target.name)){this.syncOverlaySlots(),this.observeScrimTargets();return}this.requestUpdate()}},this.handleWindowResize=()=>{this.syncSoftHeight()||!this.banner||!this.overlayHasContent||(this.measureScrimReach(),this.growthBlock&&(clearTimeout(this.growthRetryTimer),this.growthRetryTimer=setTimeout(()=>{!this.growthBlock||!this.isConnected||(this.growthBlock=null,this.measureScrimReach())},150)))}}get isPortrait(){const e=O(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}overlaySlot(e){return this.shadowRoot?.querySelector(`slot[name="${e}"]`)??null}syncOverlaySlots(){const e=l=>{const h=this.overlaySlot(l);return h?G(h):!1},t=e("overlay"),r=e("overlay-supporting"),a=r||e("overlay-action"),i=a||t;t!==this.overlayHasHeadline&&(this.overlayHasHeadline=t),r!==this.overlayHasSupporting&&(this.overlayHasSupporting=r),i!==this.overlayHasContent&&(this.overlayHasContent=i),a!==this.overlayHasStack&&(this.overlayHasStack=a);const s=this.overlaySlot("overlay-action")?.assignedElements({flatten:!0})??[];s.length>1&&console.warn(`<esp-image> takes one overlay action; ${s.length} elements are slotted into "overlay-action".`,this)}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(a=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}a.some(i=>i.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),y.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=Q(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{(this.grown||this.growthBlock)&&this.measureScrimReach();const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),window.addEventListener("resize",this.handleWindowResize,{passive:!0}),this.syncOffscreenDeferral(),this.hasUpdated&&(this.observeScrimTargets(),this.syncDirectionTracking())}disconnectedCallback(){super.disconnectedCallback(),W(this,!1),window.removeEventListener("resize",this.handleWindowResize),this.growthRollback.cancel(),clearTimeout(this.growthRetryTimer),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.scrimObserver?.disconnect(),this.scrimObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}observeScrimTargets(){if(!this.shadowRoot)return;this.scrimObserver??=new ResizeObserver(()=>this.measureScrimReach()),this.scrimObserver.disconnect();const e=this.shadowRoot?.querySelector(".overlay");e&&this.scrimObserver.observe(e);const t=this.shadowRoot?.querySelector('[part="scrim"]');t&&this.scrimObserver.observe(t);const r=this.shadowRoot?.querySelector(".stack");r&&this.overlayHasStack&&this.scrimObserver.observe(r);for(const a of k(this.overlayElements()))this.scrimObserver.observe(a,{box:"border-box"})}overlayElements(){return $.flatMap(e=>this.overlaySlot(e)?.assignedElements({flatten:!0})??[])}measureScrimReach(){const e=this.shadowRoot?.querySelector(".frame");if(!e||this.syncSoftHeight()||this.syncGrowth(e))return;const t=this.resolvedScrim();if(this.renderedScrim!==null&&t!==this.renderedScrim){this.requestUpdate();return}let r=0;const a=this.shadowRoot?.querySelector('[part="scrim"]');if(this.banner&&this.overlayHasContent&&!this.bandActive()&&a&&Z(t)){const i=a.getBoundingClientRect();if(i.width<=0||i.height<=0)return;const s=H(this.overlayElements().map(ie));r=ee(t,i,s)}r!==this.appliedScrimReach&&(this.appliedScrimReach=r,r>0?e.style.setProperty("--_esp-image-scrim-reach",`${r}%`):e.style.removeProperty("--_esp-image-scrim-reach"))}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),a=Number(t.getAttribute("width"));if(!r||!Number.isFinite(a)||a<=0)continue;const i=t.getAttribute("type")??"",s=e.get(i)??[];s.push({url:r,width:a}),e.set(i,s)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((a,i)=>a.width-i.width).map(a=>`${a.url} ${a.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return T(this.texture)?this.texture:R(this.texture)?this.texture:"none"}overlayContentHeight(){const e=this.shadowRoot?.querySelector(".overlay");if(!e||e.hidden)return null;const t=getComputedStyle(e),r=(Number.parseFloat(t.paddingTop)||0)+(Number.parseFloat(t.paddingBottom)||0);if(this.overlayHasStack){const s=this.shadowRoot?.querySelector(".stack");return s?r+s.getBoundingClientRect().height:null}let a=1/0,i=-1/0;for(const s of k(this.overlayElements())){const l=s.getBoundingClientRect();if(l.width<=0&&l.height<=0)continue;const h=getComputedStyle(s);a=Math.min(a,l.top-(Number.parseFloat(h.marginTop)||0)),i=Math.max(i,l.bottom+(Number.parseFloat(h.marginBottom)||0))}return i>a?r+i-a:null}syncGrowth(e){const t=re(this.resolvedAspectRatio());let r=!1;if(this.banner&&this.overlayHasContent&&!this.bandActive()&&!this.softHeight&&t!==null){const a=e.getBoundingClientRect(),i=this.overlayContentHeight();if(a.width<=0||i===null)return!1;const s=getComputedStyle(this).maxBlockSize,l=this.growthBlock;l&&(Math.abs(a.width-l.width)>1||s!==l.cap||i<l.need-.5)&&(this.growthBlock=null);const h=this.getBoundingClientRect(),m=getComputedStyle(this),p=[m.borderTopWidth,m.borderBottomWidth,m.paddingTop,m.paddingBottom].reduce((x,S)=>x+(Number.parseFloat(S)||0),0),u=h.width/t,_=getComputedStyle(e),M=(Number.parseFloat(_.borderTopWidth)||0)+(Number.parseFloat(_.borderBottomWidth)||0),D=u-p-M;if(this.grown){const x=this.growthCheckPending&&this.growthWidth!==null&&a.width>this.growthWidth+1;this.growthCheckPending=!1;const S=h.height-p<a.height-.5;if(x||S)return this.growthBlock={width:x?this.growthWidth:a.width,cap:s,need:i},this.scheduleGrowthRollback(),!1;r=i>D+.5}else r=this.growthBlock===null&&this.copyClipped(a,_)&&Math.abs(h.height-u)<=1,r&&(this.growthWidth=a.width,this.growthCheckPending=!0)}return r===this.grown?!1:(this.grown=r,r||(this.growthWidth=null),!0)}scheduleGrowthRollback(){this.growthRollback.schedule()}copyClipped(e,t){const r=e.top+(Number.parseFloat(t.borderTopWidth)||0),a=e.bottom-(Number.parseFloat(t.borderBottomWidth)||0),i=[],s=this.overlayHasStack?this.shadowRoot?.querySelector(".stack"):null;if(s)i.push(s.getBoundingClientRect());else for(const h of k(this.overlayElements())){const m=h.getBoundingClientRect();(m.width>0||m.height>0)&&i.push(m)}const l=H(i);return l!==null&&(l.top<r-.5||l.bottom>a+.5)}readSoftHeight(){if(!this.banner)return!1;const e=getComputedStyle(this),t=a=>!["","none","auto","initial"].includes(e.getPropertyValue(a).trim()),r=t("--esp-image-banner-block-size");return(r||t("--esp-image-banner-max-block-size"))&&(r||this.resolvedAspectRatio()!==null)}syncSoftHeight(){const e=this.readSoftHeight();return e===this.softHeight?!1:(this.softHeight=e,!0)}grownActive(){return(this.grown||this.softHeight)&&this.banner&&!this.bandActive()}syncDirectionTracking(){W(this,this.isConnected&&this.banner&&this.scrim==="auto"&&this.contentPosition.startsWith("middle"))}bandActive(){return this.banner&&this.compact&&this.compactPlacement==="below"&&this.overlayHasContent}resolvedScrim(){if(this.scrim!=="auto")return this.scrim;if(!this.overlayHasContent||this.bandActive())return"none";if(this.contentPosition.startsWith("top"))return"top";if(this.contentPosition.startsWith("bottom"))return"bottom";if(this.contentPosition.startsWith("middle")){const e=getComputedStyle(this).direction==="rtl";return this.contentPosition==="middle-start"!==e?"left":"right"}return"radial"}resolvedAspectRatio(){const e=O(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=z(this.ratio);return(this.compact?z(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!j.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!E.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!P.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!I.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!A.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!N.has(this.contentPosition)&&(this.contentPosition="bottom-start"),e.has("compactPlacement")&&!B.has(this.compactPlacement)&&(this.compactPlacement="overlay")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e),this.softHeight=this.readSoftHeight();const t=X(this.focusPoint),r=Number((t.x*100).toFixed(4)),a=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${a}%`);const i=this.resolvedAspectRatio(),s=this.grownActive()||this.bandActive();for(const[p,u]of[["--_esp-image-aspect-ratio",!s],["--_esp-image-frame-aspect-ratio",s]])this.style.setProperty(p,i&&u?i:"auto");this.style.setProperty("--_esp-image-host-block-size",this.banner&&this.softHeight?"fit-content":"auto"),this.syncDirectionTracking();const l=this.resolvedTexture();if(["paper","grain","grunge"].includes(l)){const p=l==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":l;this.style.setProperty("--_esp-image-texture-filter",`url(#${J(p,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const h=T(l)?void 0:R(l),m=[["--_esp-image-registered-image",h?.image],["--_esp-image-registered-size",h?.size],["--_esp-image-registered-repeat",h?.repeat],["--_esp-image-registered-position",h?.position],["--_esp-image-registered-opacity",h?.opacity?.toString()],["--_esp-image-registered-blend-mode",h?.blendMode]];for(const[p,u]of m)u===void 0?this.style.removeProperty(p):this.style.setProperty(p,u)}firstUpdated(e){super.firstUpdated(e),this.syncOverlaySlots(),this.observeScrimTargets()}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),(e.has("banner")||e.has("scrim")||e.has("contentPosition")||e.has("overlayHasContent")||e.has("overlayHasStack")||e.has("compactPlacement")||e.has("grown")||e.has("compact")||this.renderedScrim!==this.measuredScrim)&&(this.measuredScrim=this.renderedScrim,this.observeScrimTargets()),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&Y(this.renderRoot),this.renderedWidth>0){const s=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,l=s>0&&this.renderedWidth<s;l!==this.compact&&(this.compact=l)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const i of t.querySelectorAll("source"))i.setAttribute("sizes",r);const a=this.findProjectedImage(t);a?.hasAttribute("srcset")&&a.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return b`<img
         src=${this.localImage}
         alt=${this.caption}
         decoding="async"
@@ -28,6 +28,7 @@ var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnP
         data-content-position=${this.contentPosition}
         data-placement=${this.bandActive()?"band":"overlay"}
         ?data-grown=${this.grownActive()}
+        ?data-soft=${this.grownActive()&&this.softHeight}
         ?data-overlay-stack=${this.overlayHasStack}
         ?data-overlay-headline=${this.overlayHasHeadline}
         ?data-overlay-supporting=${this.overlayHasSupporting}
@@ -43,7 +44,7 @@ var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnP
         </div>
         <span class="compact-sentinel" aria-hidden="true"></span>
       </div>
-    `}static ensureProjectionStyles(e){const t=e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in e?e:e.nodeType===Node.DOCUMENT_NODE?e.head:e.ownerDocument?.head??document.head,r=Array.from(t.querySelectorAll("style[data-esp-image-projection-styles]")),i=r.find(s=>s.textContent===y.projectionStyles);if(i){for(const s of r)s!==i&&s.remove();return}for(const s of r)s.remove();const a=t.ownerDocument.createElement("style");a.dataset.espImageProjectionStyles="",a.textContent=y.projectionStyles,t.append(a)}};o.projectionStyles=`
+    `}static ensureProjectionStyles(e){const t=e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in e?e:e.nodeType===Node.DOCUMENT_NODE?e.head:e.ownerDocument?.head??document.head,r=Array.from(t.querySelectorAll("style[data-esp-image-projection-styles]")),a=r.find(s=>s.textContent===y.projectionStyles);if(a){for(const s of r)s!==a&&s.remove();return}for(const s of r)s.remove();const i=t.ownerDocument.createElement("style");i.dataset.espImageProjectionStyles="",i.textContent=y.projectionStyles,t.append(i)}};o.projectionStyles=`
     esp-image > picture,
     esp-image > img {
       display: block;
@@ -87,6 +88,8 @@ var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnP
       :host([banner]) {
         --_esp-image-border-default: none;
         --_esp-image-radius-default: 0;
+        
+        block-size: var(--_esp-image-host-block-size, auto);
       }
 
       [hidden] {
@@ -137,15 +140,23 @@ var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnP
         display: grid;
         grid-template: minmax(0, 1fr) / minmax(0, 1fr);
       }
+      
       :host([banner]) .frame[data-grown]::before {
         content: "";
         grid-area: 1 / 1;
         aspect-ratio: var(--_esp-image-frame-aspect-ratio, auto);
+        block-size: var(--esp-image-banner-block-size, auto);
+        max-block-size: var(--esp-image-banner-max-block-size, none);
       }
       :host([banner]) .frame[data-grown] .image {
         position: absolute;
         inset: 0;
       }
+      
+      :host([banner]) .frame[data-soft] {
+        min-block-size: inherit;
+        max-block-size: inherit;
+      }
 
       img {
         object-fit: var(--_esp-image-object-fit, cover);
@@ -622,7 +633,9 @@ var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnP
         inset: auto;
         grid-area: 1 / 1;
         align-self: stretch;
-        block-size: auto;
+        
+        block-size: var(--esp-image-banner-block-size, auto);
+        max-block-size: var(--esp-image-banner-max-block-size, none);
         aspect-ratio: var(--_esp-image-frame-aspect-ratio, auto);
       }
       :host([banner]) .frame[data-placement="band"] .banner-layers {
@@ -688,4 +701,4 @@ var l=function(m,e,t,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnP
           transition: none !important;
         }
       }
-    `,V],l([c({attribute:"original-height",type:Number})],o.prototype,"originalHeight",void 0),l([c({attribute:"original-width",type:Number})],o.prototype,"originalWidth",void 0),l([c({attribute:"low-res",type:String})],o.prototype,"imageUrl",void 0),l([c({attribute:"local-image",type:String})],o.prototype,"localImage",void 0),l([c({type:String})],o.prototype,"caption",void 0),l([c({attribute:"sizes",type:String})],o.prototype,"sizes",void 0),l([c({attribute:"loading",type:String})],o.prototype,"loading",void 0),l([c({attribute:"defer-offscreen",type:Boolean})],o.prototype,"deferOffscreen",void 0),l([c({type:Boolean,reflect:!0})],o.prototype,"banner",void 0),l([c({attribute:"banner-scheme",converter:v(H,"auto"),reflect:!0})],o.prototype,"bannerScheme",void 0),l([c({converter:v(P,"auto"),reflect:!0})],o.prototype,"scrim",void 0),l([c({attribute:"scrim-strength",converter:v(I,"medium"),reflect:!0})],o.prototype,"scrimStrength",void 0),l([c({attribute:"scrim-edge",converter:v(E,"none"),reflect:!0})],o.prototype,"scrimEdge",void 0),l([c({type:String,reflect:!0})],o.prototype,"texture",void 0),l([c({attribute:"texture-scale",converter:v(A,"medium"),reflect:!0})],o.prototype,"textureScale",void 0),l([c({attribute:"content-position",converter:v(N,"bottom-start"),reflect:!0})],o.prototype,"contentPosition",void 0),l([c({attribute:"compact-placement",converter:v(B,"overlay"),reflect:!0})],o.prototype,"compactPlacement",void 0),l([c({attribute:"focus",converter:K,reflect:!0})],o.prototype,"focusPoint",void 0),l([c({type:String})],o.prototype,"ratio",void 0),l([c({attribute:"compact-ratio",type:String})],o.prototype,"compactRatio",void 0),l([u()],o.prototype,"renderedWidth",void 0),l([u()],o.prototype,"compact",void 0),l([u()],o.prototype,"overlayHasContent",void 0),l([u()],o.prototype,"overlayHasStack",void 0),l([u()],o.prototype,"overlayHasHeadline",void 0),l([u()],o.prototype,"overlayHasSupporting",void 0),l([u()],o.prototype,"grown",void 0),o=y=l([U("esp-image")],o);export{o as EspalierImage,z as parseImageRatio};
+    `,V],n([c({attribute:"original-height",type:Number})],o.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],o.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],o.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],o.prototype,"localImage",void 0),n([c({type:String})],o.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],o.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],o.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],o.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],o.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:f(E,"auto"),reflect:!0})],o.prototype,"bannerScheme",void 0),n([c({converter:f(j,"auto"),reflect:!0})],o.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:f(P,"medium"),reflect:!0})],o.prototype,"scrimStrength",void 0),n([c({attribute:"scrim-edge",converter:f(I,"none"),reflect:!0})],o.prototype,"scrimEdge",void 0),n([c({type:String,reflect:!0})],o.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:f(A,"medium"),reflect:!0})],o.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:f(N,"bottom-start"),reflect:!0})],o.prototype,"contentPosition",void 0),n([c({attribute:"compact-placement",converter:f(B,"overlay"),reflect:!0})],o.prototype,"compactPlacement",void 0),n([c({attribute:"focus",converter:K,reflect:!0})],o.prototype,"focusPoint",void 0),n([c({type:String})],o.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],o.prototype,"compactRatio",void 0),n([g()],o.prototype,"renderedWidth",void 0),n([g()],o.prototype,"compact",void 0),n([g()],o.prototype,"overlayHasContent",void 0),n([g()],o.prototype,"overlayHasStack",void 0),n([g()],o.prototype,"overlayHasHeadline",void 0),n([g()],o.prototype,"overlayHasSupporting",void 0),n([g()],o.prototype,"grown",void 0),n([g()],o.prototype,"softHeight",void 0),o=y=n([U("esp-image")],o);export{o as EspalierImage,z as parseImageRatio};

package/dist/image-picker/esp-image-picker.js

@@ -27,6 +27,7 @@ var a=function(o,e,i,t){var n=arguments.length,r=n<3?e:t===null?t=Object.getOwnP
       }
 
       .preview {
+        --_esp-surface-layer: 2;
         display: grid;
         place-items: center;
         inline-size: 100%;

package/dist/image-upload/esp-image-upload.js

@@ -188,6 +188,7 @@ var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
         padding-right: var(--esp-size-padding);
 
         &.has-previews {
+          --_esp-surface-layer: 4;
           padding: var(--esp-size-padding);
           background: var(--esp-image-upload-preview-background, var(--esp-color-layer-4));
         }

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

@@ -4,7 +4,9 @@ export type DestroyEspalierInfo = {
     toDestroy: EspalierInfo;
 };
 /**
- * Used to show an informational message.
+ * Shows an informational or status message.
+ *
+ * A field fills one layer above the surface it sits on.
  *
  * ```html
  * <esp-info>

package/dist/info/esp-info.js

@@ -1,12 +1,12 @@
-var p=function(s,t,o,n){var i=arguments.length,e=i<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(s,t,o,n);else for(var l=s.length-1;l>=0;l--)(a=s[l])&&(e=(i<3?a(e):i>3?a(t,o,e):a(t,o))||e);return i>3&&e&&Object.defineProperty(t,o,e),e};import{css as f,html as c}from"lit";import{customElement as u,property as d}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as h}from"../shared/events.js";import{intentSurfaceTokens as v}from"../shared/style-fragments.js";import{classMap as b}from"lit/directives/class-map.js";import{trashSVG as g}from"../shared/svgs/trash.js";import{ref as y}from"lit/directives/ref.js";import{getIconHrefForHost as S}from"../shared/intent-values.js";import{SlottedIconController as E}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as _}from"../shared/svgs/render-sprite-icon.js";let r=class extends m{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.iconSlot=new E(this),this.intentBacker="info",this.icon="",this.destroyable=!1}render(){const t=S(this.icon,this),o=this.iconSlot.hasSlottedIcon('[slot="icon-slot"]');return c`
-      <section class=${b({[`intent-${this.intent}`]:!0})}>
+var p=function(s,t,o,n){var i=arguments.length,e=i<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(s,t,o,n);else for(var l=s.length-1;l>=0;l--)(a=s[l])&&(e=(i<3?a(e):i>3?a(t,o,e):a(t,o))||e);return i>3&&e&&Object.defineProperty(t,o,e),e};import{paintedSurface as f}from"../shared/surface-layer.js";import{css as u,html as c}from"lit";import{customElement as h,property as d}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as v}from"../shared/events.js";import{intentSurfaceTokens as b}from"../shared/style-fragments.js";import{classMap as g}from"lit/directives/class-map.js";import{trashSVG as y}from"../shared/svgs/trash.js";import{ref as S}from"lit/directives/ref.js";import{getIconHrefForHost as E}from"../shared/intent-values.js";import{SlottedIconController as _}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as x}from"../shared/svgs/render-sprite-icon.js";let r=class extends m{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.iconSlot=new _(this),this.intentBacker="info",this.icon="",this.destroyable=!1}render(){const t=E(this.icon,this),o=this.iconSlot.hasSlottedIcon('[slot="icon-slot"]');return c`
+      <section class=${g({[`intent-${this.intent}`]:!0})}>
         <div class="icon">
           <slot
             name="icon-slot"
-            ${y(this.iconSlot.slotRef)}
+            ${S(this.iconSlot.slotRef)}
             @slotchange=${this.iconSlot.handleSlotChange}
           ></slot>
-          ${!o&&t?_(t):c``}
+          ${!o&&t?x(t):c``}
         </div>
         <div class="message">
           <slot></slot>
@@ -15,12 +15,12 @@ var p=function(s,t,o,n){var i=arguments.length,e=i<3?t:n===null?n=Object.getOwnP
               class="destroy-button"
               intent="danger"
               icon-only
-              @esp-clicked=${()=>{this.dispatchEvent(new CustomEvent(h.INFO_DESTROY,{detail:{toDestroy:this}}))}}
+              @esp-clicked=${()=>{this.dispatchEvent(new CustomEvent(v.INFO_DESTROY,{detail:{toDestroy:this}}))}}
             >
-              ${g}
+              ${y}
             </esp-button>`:c``}
       </section>
-    `}};r.styles=[...m.styles,v,f`
+    `}};r.styles=[...m.styles,f(2,"section"),b,u`
       :host {
         display: block;
       }
@@ -61,4 +61,4 @@ var p=function(s,t,o,n){var i=arguments.length,e=i<3?t:n===null?n=Object.getOwnP
           margin: var(--esp-size-tiny);
         }
       }
-    `],p([d({type:String})],r.prototype,"icon",void 0),p([d({type:Boolean})],r.prototype,"destroyable",void 0),r=p([u("esp-info")],r);export{r as EspalierInfo};
+    `],p([d({type:String})],r.prototype,"icon",void 0),p([d({type:Boolean})],r.prototype,"destroyable",void 0),r=p([h("esp-info")],r);export{r as EspalierInfo};

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

@@ -9,6 +9,9 @@ import "../button/esp-button.js";
  * at a CSS selector for the container that holds the images. Clicking
  * any image in that container opens the lightbox at that image.
  *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
+ *
  * On mobile, swipe left or right to navigate. The gallery wraps
  * around — swiping past the last image goes back to the first.
  *

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};