@taprootio/espalier 6.0.0 → 6.2.0

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

@@ -9,7 +9,8 @@ export type ImageScrimEdge = "none" | "flush";
 export type ImageTexture = "none" | "dots" | "halftone" | "paper" | "grain" | "grunge" | "scanlines" | "duotone";
 export type ImageTextureScale = "fine" | "medium" | "coarse";
 export type ImageBannerScheme = "auto" | "light" | "dark";
-export type ImageContentPosition = "bottom-start" | "bottom" | "bottom-end" | "center" | "top-start" | "top" | "top-end";
+export type ImageContentPosition = "bottom-start" | "bottom" | "bottom-end" | "center" | "middle-start" | "middle-end" | "top-start" | "top" | "top-end";
+export type ImageCompactPlacement = "overlay" | "below";
 export { parseImageRatio };
 /**
  * A responsive image with a native `<picture>` and an optional
@@ -117,6 +118,55 @@ export { parseImageRatio };
  * </esp-image>
  * ```
  *
+ * ### Headline, supporting copy, and one action
+ *
+ * The overlay takes a headline in `slot="overlay"`, an optional supporting
+ * sentence in `slot="overlay-supporting"`, and at most one native link or
+ * button in `slot="overlay-action"`. Together they form one copy stack:
+ * grouped spacing, the supporting sentence on the lead type role so the
+ * headline stays prominent, line length bounded by
+ * `--esp-image-overlay-measure` (`36rem`), and an action drawn in the
+ * overlay ink with a focus ring that reads over any photograph. The scrim
+ * covers the whole stack. `middle-start` and `middle-end` center the copy
+ * against an inline edge, and an `auto` scrim follows it to that edge:
+ *
+ * ```html
+ * <esp-image banner ratio="3/1" compact-ratio="4/3" content-position="middle-start" focus="0.75 0.4">
+ *   <img src="/assets/focus-picker-unsplash.jpg" alt="A woman standing in a sunlit field with her back to the camera" />
+ *   <h2 slot="overlay">Grow somewhere wonderful</h2>
+ *   <p slot="overlay-supporting">Plan a garden around the light you already have, from the first frost to the last harvest.</p>
+ *   <a slot="overlay-action" href="#start">Start planning</a>
+ * </esp-image>
+ * ```
+ *
+ * A headline on its own lays out exactly as it always has.
+ *
+ * ### Copy below the image at compact widths
+ *
+ * A crop that keeps the subject at narrow widths can lose the quiet region
+ * the copy sat on. `compact-placement="below"` moves the copy into a band
+ * under the image below the compact width, painted with the banner scheme's
+ * own surface and ink. Narrow this example's container to see it switch:
+ *
+ * ```html
+ * <div style="max-width: 24rem">
+ *   <esp-image banner ratio="3/1" compact-ratio="3/2" compact-placement="below" focus="0.65 0.4">
+ *     <img src="/assets/focus-picker-unsplash.jpg" alt="A woman standing in a sunlit field with her back to the camera" />
+ *     <h2 slot="overlay">Grow somewhere wonderful</h2>
+ *     <p slot="overlay-supporting">The band keeps the copy off the photograph.</p>
+ *     <a slot="overlay-action" href="#start">Start planning</a>
+ *   </esp-image>
+ * </div>
+ * ```
+ *
+ * Long copy, long words, and enlarged text grow the banner rather than being
+ * clipped. Copy never moves with the image: motion applied to the projected
+ * image or `::part(image)` stays inside the image box, and stops under
+ * `prefers-reduced-motion`. Server-rendered banners can lay all of this out
+ * before the component upgrades with the static stylesheet
+ * `@taprootio/espalier/image/banner-static.css`; the Image banners guide
+ * covers its inputs and limits.
+ *
  * ### The scrim follows its content
  *
  * A directional scrim holds full strength over at least the first 20% of the
@@ -300,7 +350,9 @@ export { parseImageRatio };
  * @slot - A projected native image, or `esp-image-option` children. When
  * projecting, `alt` lives on the consumer's `<img>`; `caption` remains the
  * lightbox text.
- * @slot overlay - Semantic banner content above the image and decorative layers.
+ * @slot overlay - The banner headline (or any semantic overlay content) above the image and decorative layers.
+ * @slot overlay-supporting - One supporting sentence under the headline. With it, or an action, the overlay becomes a copy stack.
+ * @slot overlay-action - One native `a` or `button` under the copy. More than one logs a warning.
  * @csspart frame - The stable banner/image frame.
  * @csspart image - The stable media-box wrapper in every source mode.
  * @csspart scrim - The decorative legibility layer.
@@ -327,6 +379,12 @@ export { parseImageRatio };
  * @cssprop --esp-image-duotone-shadow-color - Duotone shadow stop; defaults to a dark stop derived from the theme primary.
  * @cssprop --esp-image-duotone-highlight-color - Duotone highlight stop; defaults to a light stop derived from the theme complementary.
  * @cssprop --esp-image-overlay-padding - Overlay content padding.
+ * @cssprop --esp-image-overlay-measure - Maximum line length of the overlay copy; defaults to `36rem` for a copy stack and `none` for a headline on its own.
+ * @cssprop --esp-image-overlay-gap - Space between the headline and supporting copy in a copy stack; the action sits twice as far below. Defaults to `var(--esp-size-small)`.
+ * @cssprop --esp-image-banner-max-block-size - A soft height cap for a banner: the ratio-sized height is the smaller of the ratio height and this length, and copy that would not fit (spacing included) grows the banner past it. In the compact band it caps only the image box. Unlike `max-block-size`, it never clips copy. Defaults to none.
+ * @cssprop --esp-image-banner-block-size - A soft height target for a banner: it replaces the ratio as the banner height (viewport-fill banners), and copy that would not fit grows the banner past it. In the compact band it sizes only the image box. Unlike `block-size`, it never clips copy. Defaults to none.
+ * @cssprop --esp-image-static-ratio - Read only by the static `banner-static.css` stylesheet before upgrade: the `ratio` value, e.g. `3 / 1`. A server sets it inline beside the attribute.
+ * @cssprop --esp-image-static-compact-ratio - Read only by the static `banner-static.css` stylesheet before upgrade: the `compact-ratio` value, if any.
  * @cssprop --esp-image-overlay-color - Overlay text color; defaults to the theme heading color when the banner polarity matches the scheme.
  * @cssprop --esp-image-overlay-text-shadow - Overlay text shadow; defaults to a soft polarity-matched halo. Set to `none` to disable.
  * @docPageTitle Image
@@ -406,8 +464,19 @@ export declare class EspalierImage extends EspalierElementBase {
     texture: string;
     /** CSS pitch or discrete SVG-filter variant for the selected texture. */
     textureScale: ImageTextureScale;
-    /** Logical position for semantic banner content. */
+    /**
+     * Logical position for semantic banner content. `middle-start` and
+     * `middle-end` center the copy vertically against the inline start or end
+     * edge, mirroring in right-to-left text.
+     */
     contentPosition: ImageContentPosition;
+    /**
+     * Where the overlay copy goes below the compact width. `overlay` (the
+     * default) keeps it over the image. `below` moves it into a band under the
+     * image, painted in the banner scheme's own surface and ink, for crops that
+     * lose their quiet region at narrow widths.
+     */
+    compactPlacement: ImageCompactPlacement;
     /** Normalized focal point used for cover cropping. */
     focusPoint: FocusPoint;
     /** Banner target aspect ratio, as a positive number or `number / number`. */

package/dist/image/esp-image.js

@@ -1,40 +1,50 @@
-var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(m,e,t,r);else for(var l=m.length-1;l>=0;l--)(o=m[l])&&(a=(s<3?o(a):s>3?o(e,t,a):o(e,t))||a);return s>3&&a&&Object.defineProperty(e,t,a),a},p;import{css as I,html as h,nothing as P}from"lit";import{customElement as E,property as c,state as u}from"lit/decorators.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{slotHasContent as b}from"../shared/slot-content.js";import{renderVisualOverlay as $,visualOverlayStyles as A}from"../shared/visual-overlay.js";import{focusConverter as N,normalizeFocus as W}from"./image-focus.js";import{ensureImageTextureFilters as D,imageTextureFilterId as M}from"./image-texture-filters.js";import{getImageTexture as x,isBuiltInImageTexture as _,subscribeToImageTextureRegistry as B}from"../shared/image-texture-registry.js";import{validImageDimensions as k}from"./image-dimensions.js";import{parseImageRatio as f}from"./image-ratio.js";import{isMeasuredScrim as q,scrimReach as H,unionScrimBox as U}from"./scrim-reach.js";import"./esp-image-option.js";import{enumConverter as d}from"../shared/enum-converter.js";const w=new Set(["auto","none","flat","top","bottom","left","right","radial"]),S=new Set(["soft","medium","strong"]),z=new Set(["none","flush"]),O=new Set(["fine","medium","coarse"]),j=new Set(["auto","light","dark"]),R=new Set(["bottom-start","bottom","bottom-end","center","top-start","top","top-end"]);function T(m){const e=[];for(const t of m)getComputedStyle(t).display==="contents"?e.push(...T(t.children)):e.push(t);return e}function F(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 i=p=class extends y{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.resizeObserver=null,this.scrimObserver=null,this.appliedScrimReach=0,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(e.target.name==="overlay"){const t=b(e.target);t!==this.overlayHasContent&&(this.overlayHasContent=t),this.observeScrimTargets();return}this.requestUpdate()}}}get isPortrait(){const e=k(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(s=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}s.some(a=>a.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),p.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=B(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),this.syncOffscreenDeferral(),this.hasUpdated&&this.observeScrimTargets()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.scrimObserver?.disconnect(),this.scrimObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}observeScrimTargets(){if(!this.shadowRoot)return;this.scrimObserver??=new ResizeObserver(()=>this.measureScrimReach()),this.scrimObserver.disconnect();const e=this.shadowRoot?.querySelector(".overlay");e&&this.scrimObserver.observe(e);const t=this.shadowRoot?.querySelector('[part="scrim"]');t&&this.scrimObserver.observe(t);for(const r of T(this.overlayElements()))this.scrimObserver.observe(r,{box:"border-box"})}overlayElements(){return this.shadowRoot?.querySelector('slot[name="overlay"]')?.assignedElements({flatten:!0})??[]}measureScrimReach(){const e=this.shadowRoot?.querySelector(".frame");if(!e)return;const t=this.resolvedScrim();let r=0;const s=this.shadowRoot?.querySelector('[part="scrim"]');if(this.banner&&this.overlayHasContent&&s&&q(t)){const a=s.getBoundingClientRect();if(a.width<=0||a.height<=0)return;const o=U(this.overlayElements().map(F));r=H(t,a,o)}r!==this.appliedScrimReach&&(this.appliedScrimReach=r,r>0?e.style.setProperty("--_esp-image-scrim-reach",`${r}%`):e.style.removeProperty("--_esp-image-scrim-reach"))}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),s=Number(t.getAttribute("width"));if(!r||!Number.isFinite(s)||s<=0)continue;const a=t.getAttribute("type")??"",o=e.get(a)??[];o.push({url:r,width:s}),e.set(a,o)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((s,a)=>s.width-a.width).map(s=>`${s.url} ${s.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return _(this.texture)?this.texture:x(this.texture)?this.texture:"none"}resolvedScrim(){return this.scrim!=="auto"?this.scrim:this.overlayHasContent?this.contentPosition.startsWith("top")?"top":this.contentPosition.startsWith("bottom")?"bottom":"radial":"none"}resolvedAspectRatio(){const e=k(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=f(this.ratio);return(this.compact?f(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!w.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!j.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!S.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!z.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!O.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!R.has(this.contentPosition)&&(this.contentPosition="bottom-start")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=W(this.focusPoint),r=Number((t.x*100).toFixed(4)),s=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${s}%`);const a=this.resolvedAspectRatio();a?this.style.setProperty("--_esp-image-aspect-ratio",a):this.style.removeProperty("--_esp-image-aspect-ratio");const o=this.resolvedTexture();if(["paper","grain","grunge"].includes(o)){const g=o==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":o;this.style.setProperty("--_esp-image-texture-filter",`url(#${M(g,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const l=_(o)?void 0:x(o),C=[["--_esp-image-registered-image",l?.image],["--_esp-image-registered-size",l?.size],["--_esp-image-registered-repeat",l?.repeat],["--_esp-image-registered-position",l?.position],["--_esp-image-registered-opacity",l?.opacity?.toString()],["--_esp-image-registered-blend-mode",l?.blendMode]];for(const[g,v]of C)v===void 0?this.style.removeProperty(g):this.style.setProperty(g,v)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector('slot[name="overlay"]');t&&(this.overlayHasContent=b(t)),this.observeScrimTargets()}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),(e.has("banner")||e.has("scrim")||e.has("contentPosition")||e.has("overlayHasContent")||e.has("compact"))&&this.observeScrimTargets(),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&D(this.renderRoot),this.renderedWidth>0){const o=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,l=o>0&&this.renderedWidth<o;l!==this.compact&&(this.compact=l)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const a of t.querySelectorAll("source"))a.setAttribute("sizes",r);const s=this.findProjectedImage(t);s?.hasAttribute("srcset")&&s.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return h`<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"
         loading=${this.loading}
-      />`;const e=h`<slot @slotchange=${this.handleSlotChange}></slot>`;if(this.findProjected())return e;const t=this.buildSources();return h`
+      />`;const e=b`<slot @slotchange=${this.handleSlotChange}></slot>`;if(this.findProjected())return e;const t=this.buildSources();return b`
       <picture>
-        ${t.map(r=>h`
+        ${t.map(r=>b`
             <source
               srcset=${r.srcset}
               sizes=${this.effectiveSizes()}
-              type=${r.type||P}
+              type=${r.type||F}
             />
           `)}
         <img src=${this.imageUrl} alt=${this.caption} decoding="async" loading=${this.loading} />
       </picture>
       ${e}
-    `}render(){return h`
+    `}render(){const e=this.resolvedScrim();return this.renderedScrim=e,b`
       <div
         part="frame"
         class="frame"
         data-banner-scheme=${this.resolvedBannerScheme()}
-        data-scrim=${this.resolvedScrim()}
+        data-scrim=${e}
         data-scrim-strength=${this.scrimStrength}
         data-scrim-edge=${this.scrimEdge}
         data-texture=${this.resolvedTexture()}
         data-texture-scale=${this.textureScale}
         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}
       >
         <div part="image" class="image">${this.renderMedia()}</div>
-        ${$({className:"banner-layers",imagePart:"texture",scrimPart:"scrim",texturePart:"texture"})}
+        ${L({className:"banner-layers",imagePart:"texture",scrimPart:"scrim",texturePart:"texture"})}
         <div part="overlay" class="overlay" ?hidden=${!this.banner||!this.overlayHasContent}>
-          <slot name="overlay" @slotchange=${this.handleSlotChange}></slot>
+          <div class="stack">
+            <slot name="overlay" @slotchange=${this.handleSlotChange}></slot>
+            <slot name="overlay-supporting" @slotchange=${this.handleSlotChange}></slot>
+            <slot name="overlay-action" @slotchange=${this.handleSlotChange}></slot>
+          </div>
         </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]")),s=r.find(o=>o.textContent===p.projectionStyles);if(s){for(const o of r)o!==s&&o.remove();return}for(const o of r)o.remove();const a=t.ownerDocument.createElement("style");a.dataset.espImageProjectionStyles="",a.textContent=p.projectionStyles,t.append(a)}};i.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;
@@ -50,7 +60,15 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
       object-fit: var(--_esp-image-object-fit, cover);
       object-position: var(--esp-image-object-position, var(--_esp-image-object-position, center));
     }
-  `,i.styles=[...y.styles,I`
+    @media (prefers-reduced-motion: reduce) {
+      esp-image[banner] > picture,
+      esp-image[banner] > picture > img,
+      esp-image[banner] > img {
+        animation: none !important;
+        transition: none !important;
+      }
+    }
+  `,o.styles=[...C.styles,q`
       :host {
         display: block;
         aspect-ratio: var(--_esp-image-aspect-ratio, auto);
@@ -70,6 +88,8 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<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] {
@@ -110,6 +130,34 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
         z-index: 0;
       }
 
+      
+      :host([banner]) .image {
+        overflow: clip;
+      }
+
+      
+      :host([banner]) .frame:is([data-grown], [data-placement="band"]) {
+        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);
         object-position: var(
@@ -441,6 +489,8 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
         z-index: 2;
         inset: 0;
         display: flex;
+        
+        overflow-wrap: anywhere;
         align-items: flex-end;
         justify-content: flex-start;
         padding: var(--esp-image-overlay-padding, var(--esp-size-padding-page));
@@ -452,10 +502,90 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
         );
         pointer-events: none;
       }
+      :host([banner]) .frame:is([data-grown], [data-placement="band"]) .overlay {
+        position: relative;
+        inset: auto;
+        grid-area: 1 / 1;
+      }
       .overlay slot::slotted(*) {
         color: inherit !important;
         pointer-events: auto;
       }
+      
+      .stack {
+        display: contents;
+      }
+      .overlay slot[name="overlay"]::slotted(*) {
+        max-inline-size: var(--esp-image-overlay-measure, none);
+      }
+      
+      .frame[data-overlay-stack] .stack {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        min-inline-size: 0;
+        max-inline-size: var(--esp-image-overlay-measure, 36rem);
+      }
+      .frame[data-overlay-stack][data-content-position="bottom"] .stack,
+      .frame[data-overlay-stack][data-content-position="center"] .stack,
+      .frame[data-overlay-stack][data-content-position="top"] .stack {
+        align-items: center;
+      }
+      .frame[data-overlay-stack][data-content-position$="-end"] .stack {
+        align-items: end;
+      }
+      .frame[data-overlay-stack] .stack slot::slotted(*) {
+        max-inline-size: 100%;
+        margin-block: 0 !important;
+      }
+      
+      .frame[data-overlay-stack][data-overlay-headline]
+        .stack
+        slot[name="overlay-supporting"]::slotted(*) {
+        margin-block-start: var(--esp-image-overlay-gap, var(--esp-size-small, 0.75rem)) !important;
+      }
+      .frame[data-overlay-stack]:is([data-overlay-headline], [data-overlay-supporting])
+        .stack
+        slot[name="overlay-action"]::slotted(*) {
+        margin-block-start: calc(
+          2 * var(--esp-image-overlay-gap, var(--esp-size-small, 0.75rem))
+        ) !important;
+      }
+      
+      .overlay slot[name="overlay-supporting"]::slotted(*) {
+        font-family: var(--esp-font-body, inherit);
+        font-weight: var(--esp-type-lead-font-weight, var(--esp-font-weight-body, 400));
+        font-size: var(--esp-type-lead-font-size, 1.25rem);
+        line-height: 1.4;
+      }
+      
+      .overlay slot[name="overlay-action"]::slotted(a),
+      .overlay slot[name="overlay-action"]::slotted(button) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-block-size: 2.75rem;
+        padding: 0.5em 1.25em;
+        border: 2px solid currentColor;
+        border-radius: var(--esp-size-border-radius, 0.375rem);
+        background: transparent;
+        font-family: var(--esp-font-body, inherit);
+        font-size: var(--esp-type-normal, 1rem);
+        font-weight: 600;
+        line-height: 1.2;
+        text-align: center;
+        cursor: pointer;
+      }
+      .overlay slot[name="overlay-action"]::slotted(a:hover),
+      .overlay slot[name="overlay-action"]::slotted(button:hover) {
+        background: color-mix(in oklch, currentColor 14%, transparent);
+      }
+      .overlay slot[name="overlay-action"]::slotted(:focus-visible) {
+        outline: 2px solid currentColor;
+        outline-offset: 3px;
+        box-shadow: 0 0 0 7px var(--_esp-image-scrim-resolved);
+      }
       .frame[data-content-position="bottom"] .overlay {
         justify-content: center;
         text-align: center;
@@ -469,6 +599,14 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
         justify-content: center;
         text-align: center;
       }
+      .frame[data-content-position="middle-start"] .overlay {
+        align-items: center;
+      }
+      .frame[data-content-position="middle-end"] .overlay {
+        align-items: center;
+        justify-content: flex-end;
+        text-align: end;
+      }
       .frame[data-content-position="top-start"] .overlay {
         align-items: flex-start;
       }
@@ -483,6 +621,34 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
         text-align: end;
       }
 
+      
+      :host([banner]) .frame[data-placement="band"] {
+        grid-template: minmax(0, 1fr) auto / minmax(0, 1fr);
+      }
+      :host([banner]) .frame[data-placement="band"]::before {
+        display: none;
+      }
+      :host([banner]) .frame[data-placement="band"] .image {
+        position: relative;
+        inset: auto;
+        grid-area: 1 / 1;
+        align-self: stretch;
+        
+        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 {
+        position: relative;
+        inset: auto;
+        grid-area: 1 / 1;
+      }
+      :host([banner]) .frame[data-placement="band"] .overlay {
+        grid-area: 2 / 1;
+        background: var(--_esp-image-scrim-resolved);
+        text-shadow: none;
+      }
+
       .compact-sentinel {
         position: absolute;
         inline-size: var(--esp-image-compact-width, 40rem);
@@ -516,17 +682,23 @@ var n=function(m,e,t,r){var s=arguments.length,a=s<3?e:r===null?r=Object.getOwnP
           display: none;
         }
         
-        .overlay {
+        
+        .overlay,
+        :host([banner]) .frame[data-placement="band"] .overlay {
           background: white;
           color: black;
         }
       }
 
+      
       @media (prefers-reduced-motion: reduce) {
         .banner-layers,
+        .image,
+        .image picture,
+        .image img,
         .overlay {
           animation: none !important;
           transition: none !important;
         }
       }
-    `,A],n([c({attribute:"original-height",type:Number})],i.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],i.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],i.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],i.prototype,"localImage",void 0),n([c({type:String})],i.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],i.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],i.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],i.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],i.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:d(j,"auto"),reflect:!0})],i.prototype,"bannerScheme",void 0),n([c({converter:d(w,"auto"),reflect:!0})],i.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:d(S,"medium"),reflect:!0})],i.prototype,"scrimStrength",void 0),n([c({attribute:"scrim-edge",converter:d(z,"none"),reflect:!0})],i.prototype,"scrimEdge",void 0),n([c({type:String,reflect:!0})],i.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:d(O,"medium"),reflect:!0})],i.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:d(R,"bottom-start"),reflect:!0})],i.prototype,"contentPosition",void 0),n([c({attribute:"focus",converter:N,reflect:!0})],i.prototype,"focusPoint",void 0),n([c({type:String})],i.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],i.prototype,"compactRatio",void 0),n([u()],i.prototype,"renderedWidth",void 0),n([u()],i.prototype,"compact",void 0),n([u()],i.prototype,"overlayHasContent",void 0),i=p=n([E("esp-image")],i);export{i as EspalierImage,f 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/pickers/esp-pick-one.js

@@ -1,18 +1,16 @@
-var u=function(a,t,s,e){var i=arguments.length,n=i<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,t,s,e);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(n=(i<3?o(n):i>3?o(t,s,n):o(t,s))||n);return i>3&&n&&Object.defineProperty(t,s,n),n};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{ref as h}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{samePickerItemDisplay as g}from"./esp-picker-item.js";import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{styleMap as v}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as $}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=t=>{this.selectOpenMenuAtPoint(t)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=t=>{if(performance.now()-this.lastMenuPointSelectionAt<500){t.preventDefault(),t.stopPropagation();return}this.selectOpenMenuAtPoint(t)}}get selectedItem(){return this.selection.item}decorateFilteredItems(t){if(!this.selectedItem)return t.map(e=>({...e}));const s=this.selectedItem.value;return t.map(e=>({...e,selected:e.value===s}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(t){const s=this.pickerItems??[];for(const i of s)i.selected=i.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==s)for(const i of e)i.selected=i.value===t;this.selection=r.resolve(s,t),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(!t.has("pickerItems"))return;if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const e=this.pickerItems.find(i=>i.selected);e&&(this.selection=r.of(e));return}const s=this.pickerItems.find(e=>e.value===this.selectedItem.value);s&&s!==this.selectedItem&&!g(s,this.selectedItem)&&(this.selection=r.of(s))}selectOpenMenuAtPoint(t){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(t.clientX,t.clientY)??!1)?!1:(this.suppressNextHostClick=!0,t.preventDefault(),t.stopPropagation(),!0)}render(){const{showOptions:t}=this,s={"esp-field":!0,"show-options":t};return m`
+var u=function(h,t,i,e){var s=arguments.length,l=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(h,t,i,e);else for(var n=h.length-1;n>=0;n--)(o=h[n])&&(l=(s<3?o(l):s>3?o(t,i,l):o(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{samePickerItemDisplay as v}from"./esp-picker-item.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{styleMap as $}from"lit/directives/style-map.js";import{caretUpDown as P}from"../shared/svgs/caret-up-down.js";import{filter as w}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1}get selectedItem(){return this.selection.item}decorateFilteredItems(t){if(!this.selectedItem)return t.map(e=>({...e}));const i=this.selectedItem.value;return t.map(e=>({...e,selected:e.value===i}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(t){const i=this.pickerItems??[];for(const s of i)s.selected=s.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==i)for(const s of e)s.selected=s.value===t;this.selection=r.resolve(i,t),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(!t.has("pickerItems"))return;if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const e=this.pickerItems.find(s=>s.selected);e&&(this.selection=r.of(e));return}const i=this.pickerItems.find(e=>e.value===this.selectedItem.value);i&&i!==this.selectedItem&&!v(i,this.selectedItem)&&(this.selection=r.of(i))}render(){const{showOptions:t}=this,i={"esp-field":!0,"show-options":t};return m`
       <div
-        ${h(this.pickerField)}
+        ${a(this.pickerField)}
         tabindex="-1"
-        class=${k(s)}
-        @pointerdown=${this.handleHostPointerDown}
-        @mousedown=${this.handleHostMouseDown}
-        @click=${e=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,e.preventDefault(),e.stopPropagation();return}if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
+        class=${k(i)}
+        @click=${e=>{if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
       >
         <section>
           <input
-            ${h(this.theInput)}
+            ${a(this.theInput)}
             class="esp-input"
             value=${this.selectedItem?.text??""}
-            style=${v(this.selectedItem?.styles??{})}
+            style=${$(this.selectedItem?.styles??{})}
             placeholder=${this.placeholder}
             ?disabled=${this.disabled}
             ?readonly=${!this.typeahead}
@@ -22,7 +20,7 @@ var u=function(a,t,s,e){var i=arguments.length,n=i<3?t:e===null?e=Object.getOwnP
             @keydown=${e=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(e))switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(e.key,e);break}}}
           />
         </section>
-        <label>${this.typeahead&&this.inputFocused?$:w}</label>
+        <label>${this.typeahead&&this.inputFocused?w:P}</label>
         ${this.renderPickerMenuDismissButton()}
 
         <esp-picker-menu
@@ -31,15 +29,15 @@ var u=function(a,t,s,e){var i=arguments.length,n=i<3?t:e===null?e=Object.getOwnP
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${h(this.pickerMenu)}
-          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const i=e.detail,n=i.length>0?i[0]:void 0;if(!(i.length>0?this.selectedItem!==n:this.selectedItem!==void 0))return;const l=this.pickerMenu.value?.isVisitorPick===!0;this.selection=l?r.of(n):this.selection.withProvisionalItem(n),l?(this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)):this.formCtrl.syncValueSilently()}}
-          @esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=e.detail,n=i.length>0?i[0]:void 0;if(n?this.selectedItem?.value!==n.value:this.selectedItem!==void 0){if(this.selection=r.of(n),n)for(const l of this.pickerItems)l.selected=l.value===n.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          ${a(this.pickerMenu)}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const s=e.detail,l=s.length>0?s[0]:void 0;if(!(s.length>0?this.selectedItem!==l:this.selectedItem!==void 0))return;const n=this.pickerMenu.value?.isVisitorPick===!0;this.selection=n?r.of(l):this.selection.withProvisionalItem(l),n?(this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)):this.formCtrl.syncValueSilently()}}
+          @esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const s=e.detail,l=s.length>0?s[0]:void 0;if(l?this.selectedItem?.value!==l.value:this.selectedItem!==void 0){if(this.selection=r.of(l),l)for(const n of this.pickerItems)n.selected=n.value===l.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
           @esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
         >
         </esp-picker-menu>
       </div>
-      <slot ${h(this.itemsSlot)}></slot>
-    `}};c.styles=[...P.styles,...p.pickerFieldStyles,d`
+      <slot ${a(this.itemsSlot)}></slot>
+    `}};c.styles=[...g.styles,...p.pickerFieldStyles,d`
       .esp-field input.esp-input {
         width: 0;
         flex-grow: 1;