@taprootio/espalier 4.16.0 → 4.18.0

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

@@ -174,6 +174,7 @@ export type FooterColumns = "auto" | "1" | "2" | "3" | "4" | "5" | "6";
  * @cssprop --esp-footer-link-group-gap - Space between a link-group heading and its links. Defaults to `var(--esp-size-small)`.
  * @cssprop --esp-footer-brand-logo-size - Configured logo block size. Defaults to `3rem`.
  * @cssprop --esp-footer-brand-logo-max-width - Configured logo maximum inline size. Defaults to `12rem`.
+ * @cssprop --esp-footer-brand-logo-aspect-ratio - The ratio the configured logo's box is reserved at while the image is still loading or has failed, so alt text never decides the brand region's width. A logo that loads is always laid out at its own ratio, whatever this is set to. Defaults to `3 / 1`.
  * @cssprop --esp-footer-background-image - Decorative image or gradient layer. Defaults to `none`.
  * @cssprop --esp-footer-background-image-opacity - Decorative layer opacity. Defaults to `1`.
  * @cssprop --esp-footer-background-repeat - Decorative layer repeat behavior. Defaults to `repeat`.

package/dist/footer/esp-footer.js

@@ -1,10 +1,10 @@
-var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,a):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")d=Reflect.decorate(i,e,a,r);else for(var p=i.length-1;p>=0;p--)(l=i[p])&&(d=(s<3?l(d):s>3?l(e,a,d):l(e,a))||d);return s>3&&d&&Object.defineProperty(e,a,d),d};import{css as f,html as v,nothing as y}from"lit";import{customElement as x,property as n,state as _}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{styleMap as k}from"lit/directives/style-map.js";import{renderConfiguredBrand as z,resolveConfiguredBrand as B}from"../shared/configured-brand.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{slotHasContent as h}from"../shared/slot-content.js";import{renderVisualOverlay as S,visualOverlayStyles as L}from"../shared/visual-overlay.js";import"./esp-footer-column.js";import"./esp-footer-link-group.js";const m=new Set(["auto","1","2","3","4","5","6"]),c={media:!1,brand:!1,groups:!1,aside:!1,bottom:!1},w={fromAttribute(i){return i&&m.has(i)?i:"auto"},toAttribute(i){return m.has(i)?i:"auto"}};let o=class extends g{constructor(){super(...arguments),this.slotContent={...c},this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.columns="auto",this.fullBleedContent=!1,this.landmarkLabel="",this.handleSlotChange=e=>{if(!(e.target instanceof HTMLSlotElement))return;const a=this.slotRegion(e.target);if(!a)return;const r=h(e.target);this.slotContent[a]!==r&&(this.slotContent={...this.slotContent,[a]:r})}}willUpdate(e){super.willUpdate(e),e.has("columns")&&!m.has(this.columns)&&(this.columns="auto")}slotRegion(e){return e.name?["media","brand","aside","bottom"].includes(e.name)?e.name:null:"groups"}firstUpdated(e){super.firstUpdated(e);const a={...c};for(const r of this.shadowRoot?.querySelectorAll("slot")??[]){const s=this.slotRegion(r);s&&(a[s]=h(r))}Object.entries(a).some(([r,s])=>this.slotContent[r]!==s)&&(this.slotContent=a)}render(){const{media:e,brand:a,groups:r,aside:s,bottom:d}=this.slotContent,l=B({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),p=a||!!(l.brandLogo||this.brandText),u=p||r||s,b={primary:!0,"has-brand":p,"has-groups":r,"has-aside":s};return v`
+var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,a):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")d=Reflect.decorate(i,e,a,r);else for(var p=i.length-1;p>=0;p--)(l=i[p])&&(d=(s<3?l(d):s>3?l(e,a,d):l(e,a))||d);return s>3&&d&&Object.defineProperty(e,a,d),d};import{css as f,html as v,nothing as y}from"lit";import{customElement as _,property as n,state as x}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{styleMap as k}from"lit/directives/style-map.js";import{CONFIGURED_BRAND_LOGO_ASPECT_RATIO as z,configuredBrandLogoGeometry as B,renderConfiguredBrand as S,resolveConfiguredBrand as L}from"../shared/configured-brand.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{slotHasContent as h}from"../shared/slot-content.js";import{renderVisualOverlay as w,visualOverlayStyles as $}from"../shared/visual-overlay.js";import"./esp-footer-column.js";import"./esp-footer-link-group.js";const m=new Set(["auto","1","2","3","4","5","6"]),c={media:!1,brand:!1,groups:!1,aside:!1,bottom:!1},O={fromAttribute(i){return i&&m.has(i)?i:"auto"},toAttribute(i){return m.has(i)?i:"auto"}};let o=class extends g{constructor(){super(...arguments),this.slotContent={...c},this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.columns="auto",this.fullBleedContent=!1,this.landmarkLabel="",this.handleSlotChange=e=>{if(!(e.target instanceof HTMLSlotElement))return;const a=this.slotRegion(e.target);if(!a)return;const r=h(e.target);this.slotContent[a]!==r&&(this.slotContent={...this.slotContent,[a]:r})}}willUpdate(e){super.willUpdate(e),e.has("columns")&&!m.has(this.columns)&&(this.columns="auto")}slotRegion(e){return e.name?["media","brand","aside","bottom"].includes(e.name)?e.name:null:"groups"}firstUpdated(e){super.firstUpdated(e);const a={...c};for(const r of this.shadowRoot?.querySelectorAll("slot")??[]){const s=this.slotRegion(r);s&&(a[s]=h(r))}Object.entries(a).some(([r,s])=>this.slotContent[r]!==s)&&(this.slotContent=a)}render(){const{media:e,brand:a,groups:r,aside:s,bottom:d}=this.slotContent,l=L({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),p=a||!!(l.brandLogo||this.brandText),u=p||r||s,b={primary:!0,"has-brand":p,"has-groups":r,"has-aside":s};return v`
       <footer
         part="footer"
         aria-label=${this.landmarkLabel||y}
         style=${k({"--_esp-footer-brand-color":l.brandColor||null})}
       >
-        ${S({className:"background",rootPart:"background"})}
+        ${w({className:"background",rootPart:"background"})}
         <div part="content" class="content-frame">
           <div class="content">
             <div part="media" class="media" ?hidden=${!e}>
@@ -14,7 +14,7 @@ var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnP
             <div part="primary" class=${C(b)} ?hidden=${!u}>
               <div part="brand" class="brand" ?hidden=${!p}>
                 <slot name="brand" @slotchange=${this.handleSlotChange}
-                  >${z({brandLogo:l.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+                  >${S({brandLogo:l.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
                 >
               </div>
 
@@ -33,7 +33,7 @@ var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnP
           </div>
         </div>
       </footer>
-    `}};o.styles=[...g.styles,f`
+    `}};o.styles=[...g.styles,B,f`
       :host {
         display: block;
         min-inline-size: 0;
@@ -255,6 +255,9 @@ var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnP
       }
 
       .brand-logo {
+        
+        aspect-ratio: auto
+          var(--esp-footer-brand-logo-aspect-ratio, ${z});
         display: block;
         inline-size: auto;
         max-inline-size: min(var(--esp-footer-brand-logo-max-width, 12rem), 100%);
@@ -318,4 +321,4 @@ var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnP
           grid-template-areas: "aside";
         }
       }
-    `,L],t([_()],o.prototype,"slotContent",void 0),t([n({attribute:"brand-text",type:String})],o.prototype,"brandText",void 0),t([n({attribute:"brand-logo",type:String})],o.prototype,"brandLogo",void 0),t([n({attribute:"light-brand-logo",type:String})],o.prototype,"lightBrandLogo",void 0),t([n({attribute:"dark-brand-logo",type:String})],o.prototype,"darkBrandLogo",void 0),t([n({attribute:"brand-href",type:String})],o.prototype,"brandHref",void 0),t([n({attribute:"brand-alt",type:String})],o.prototype,"brandAlt",void 0),t([n({attribute:"brand-color",type:String})],o.prototype,"brandColor",void 0),t([n({attribute:"light-brand-color",type:String})],o.prototype,"lightBrandColor",void 0),t([n({attribute:"dark-brand-color",type:String})],o.prototype,"darkBrandColor",void 0),t([n({converter:w,reflect:!0})],o.prototype,"columns",void 0),t([n({attribute:"full-bleed-content",type:Boolean,reflect:!0})],o.prototype,"fullBleedContent",void 0),t([n({attribute:"landmark-label",type:String})],o.prototype,"landmarkLabel",void 0),o=t([x("esp-footer")],o);export{o as EspalierFooter};
+    `,$],t([x()],o.prototype,"slotContent",void 0),t([n({attribute:"brand-text",type:String})],o.prototype,"brandText",void 0),t([n({attribute:"brand-logo",type:String})],o.prototype,"brandLogo",void 0),t([n({attribute:"light-brand-logo",type:String})],o.prototype,"lightBrandLogo",void 0),t([n({attribute:"dark-brand-logo",type:String})],o.prototype,"darkBrandLogo",void 0),t([n({attribute:"brand-href",type:String})],o.prototype,"brandHref",void 0),t([n({attribute:"brand-alt",type:String})],o.prototype,"brandAlt",void 0),t([n({attribute:"brand-color",type:String})],o.prototype,"brandColor",void 0),t([n({attribute:"light-brand-color",type:String})],o.prototype,"lightBrandColor",void 0),t([n({attribute:"dark-brand-color",type:String})],o.prototype,"darkBrandColor",void 0),t([n({converter:O,reflect:!0})],o.prototype,"columns",void 0),t([n({attribute:"full-bleed-content",type:Boolean,reflect:!0})],o.prototype,"fullBleedContent",void 0),t([n({attribute:"landmark-label",type:String})],o.prototype,"landmarkLabel",void 0),o=t([_("esp-footer")],o);export{o as EspalierFooter};

package/dist/header/esp-header-button.d.ts

@@ -33,6 +33,17 @@ import { LitElement } from "lit";
  * </esp-header>
  * ```
  *
+ * The host carries no role of its own. The native `<button>` in its shadow
+ * root is the single interactive owner of the action, so `aria-label`,
+ * `aria-controls` and `aria-expanded` set on the host are forwarded to it
+ * rather than announced twice.
+ *
+ * `aria-controls` is an id reference, and a browser resolves one only inside
+ * the tree its referring element belongs to. The forwarded value therefore
+ * names a relationship only when the target is in the same shadow root as this
+ * button; pointed at an element in the document it is inert. `aria-label` and
+ * `aria-expanded` carry values rather than references and are unaffected.
+ *
  * @event {CustomEvent} esp-clicked - Dispatched when the button is clicked. The event bubbles and is composed.
  * @cssprop --esp-header-button-background - The background color of the button. Defaults to `var(--esp-color-layer-3)`.
  * @cssprop --esp-header-button-background-hover - The background color of the button on hover. Defaults to `var(--esp-color-layer-4)`.
@@ -51,6 +62,32 @@ export declare class EspalierHeaderButton extends LitElement {
      * the button's purpose instead of silence.
      */
     ariaLabel: string | null;
+    /**
+     * Id of the region this button controls, forwarded to the inner
+     * `<button>`.
+     *
+     * The host is not the control — it has no tabindex and no key handling, so
+     * the native button inside the shadow root is what assistive technology and
+     * role-based locators resolve to. State set on the host has no path to it
+     * unless the component carries it across, which is what this does.
+     *
+     * Forwarding the string is not the same as forwarding the relationship: an
+     * id reference resolves only within the referring element's own tree, so a
+     * target outside this button's shadow root stays unresolved. ESP0222 tracks
+     * carrying a resolved element reference instead.
+     *
+     * `ariaControls` is deliberately not an `override`: `ARIAMixin` carries
+     * `ariaControlsElements`, not a string reflection, so there is no base
+     * member to override. If a future lib adds one, `noImplicitOverride` will
+     * say so here.
+     */
+    ariaControls: string | null;
+    /**
+     * Whether the region this button controls is expanded, forwarded to the
+     * inner `<button>`. See {@link ariaControls} for why the host cannot carry
+     * it itself.
+     */
+    ariaExpanded: string | null;
     /**
      * Optional icon name from the configured Espalier SVG sprite.
      * Slotted SVG content remains supported and overrides this value.

package/dist/header/esp-header-button.js

@@ -1,7 +1,12 @@
-var n=function(a,e,o,i){var s=arguments.length,t=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,o):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(a,e,o,i);else for(var c=a.length-1;c>=0;c--)(l=a[c])&&(t=(s<3?l(t):s>3?l(e,o,t):l(e,o))||t);return s>3&&t&&Object.defineProperty(e,o,t),t};import{LitElement as d,css as u,html as b,nothing as p}from"lit";import{customElement as v,eventOptions as m,property as h}from"lit/decorators.js";import{ref as f}from"lit/directives/ref.js";import{getIconHrefForHost as g}from"../shared/intent-values.js";import{SlottedIconController as S}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";import{DocumentSpriteController as y}from"../shared/document-sprite.js";import{ESP_EVENTS as x}from"../shared/events.js";let r=class extends d{constructor(){super(),this.iconSlot=new S(this),this.ariaLabel=null,this.icon="",new y(this,{reactToSpriteChanges:!0})}handleClick(e){this.dispatchEvent(new CustomEvent(x.CLICKED,{detail:{},bubbles:!0,composed:!0}))}render(){const e=g(this.icon,this),o=this.iconSlot.hasSlottedIcon(":scope > *");return b`<button @click=${this.handleClick} aria-label=${this.ariaLabel??p}>
+var a=function(i,e,r,n){var s=arguments.length,o=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,r):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(i,e,r,n);else for(var d=i.length-1;d>=0;d--)(l=i[d])&&(o=(s<3?l(o):s>3?l(e,r,o):l(e,r))||o);return s>3&&o&&Object.defineProperty(e,r,o),o};import{LitElement as h,css as u,html as b,nothing as p}from"lit";import{customElement as v,eventOptions as m,property as c}from"lit/decorators.js";import{ref as f}from"lit/directives/ref.js";import{getIconHrefForHost as g}from"../shared/intent-values.js";import{SlottedIconController as S}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as x}from"../shared/svgs/render-sprite-icon.js";import{DocumentSpriteController as y}from"../shared/document-sprite.js";import{ESP_EVENTS as C}from"../shared/events.js";let t=class extends h{constructor(){super(),this.iconSlot=new S(this),this.ariaLabel=null,this.ariaControls=null,this.ariaExpanded=null,this.icon="",new y(this,{reactToSpriteChanges:!0})}handleClick(e){this.dispatchEvent(new CustomEvent(C.CLICKED,{detail:{},bubbles:!0,composed:!0}))}render(){const e=g(this.icon,this),r=this.iconSlot.hasSlottedIcon(":scope > *");return b`<button
+      @click=${this.handleClick}
+      aria-label=${this.ariaLabel??p}
+      aria-controls=${this.ariaControls??p}
+      aria-expanded=${this.ariaExpanded??p}
+    >
       <slot ${f(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
-      ${!o&&e?w(e):p}
-    </button>`}};r.styles=u`
+      ${!r&&e?x(e):p}
+    </button>`}};t.styles=u`
     :host {
       position: relative;
       display: block;
@@ -35,4 +40,4 @@ var n=function(a,e,o,i){var s=arguments.length,t=s<3?e:i===null?i=Object.getOwnP
         background: var(--esp-header-button-background-hover, var(--esp-color-layer-4));
       }
     }
-  `,n([h({attribute:"aria-label",type:String})],r.prototype,"ariaLabel",void 0),n([h({type:String})],r.prototype,"icon",void 0),n([m({capture:!1,passive:!0})],r.prototype,"handleClick",null),r=n([v("esp-header-button")],r);export{r as EspalierHeaderButton};
+  `,a([c({attribute:"aria-label",type:String})],t.prototype,"ariaLabel",void 0),a([c({attribute:"aria-controls",type:String})],t.prototype,"ariaControls",void 0),a([c({attribute:"aria-expanded",type:String})],t.prototype,"ariaExpanded",void 0),a([c({type:String})],t.prototype,"icon",void 0),a([m({capture:!1,passive:!0})],t.prototype,"handleClick",null),t=a([v("esp-header-button")],t);export{t as EspalierHeaderButton};

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

@@ -184,6 +184,7 @@ export interface EspThemeToggleEventDetail {
  * @cssprop --esp-header-brand-gap - Space between a configured logo and brand text. Defaults to `var(--esp-size-tiny-to-small)`.
  * @cssprop --esp-header-brand-logo-size - The configured logo block size. Defaults to `calc(0.72 * var(--esp-header-height, calc(4.5 * var(--esp-size-small))))`.
  * @cssprop --esp-header-brand-logo-max-width - The configured logo maximum inline size. Defaults to `12rem`.
+ * @cssprop --esp-header-brand-logo-aspect-ratio - The ratio the configured logo's box is reserved at while the image is still loading or has failed, so alt text never decides the brand region's width. A logo that loads is always laid out at its own ratio, whatever this is set to. Defaults to `3 / 1`.
  * @cssprop --esp-header-brand-max-width - The maximum inline size of configured brand content. Defaults to `min(36ch, 45vw)`.
  * @cssprop --esp-header-brand-hover-color - The configured brand hover color. Defaults to `var(--esp-color-headings-hover)`.
  * @cssprop --esp-header-brand-hover-background - The configured brand hover background. Defaults to `transparent`.

package/dist/header/esp-header.js

@@ -1,4 +1,4 @@
-var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,e,t,o);else for(var d=h.length-1;d>=0;d--)(n=h[d])&&(i=(r<3?n(i):r>3?n(e,t,i):n(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};import{css as k,html as x,nothing as T}from"lit";import{customElement as A,property as l,state as c}from"lit/decorators.js";import{classMap as O}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as C,ref as D}from"lit/directives/ref.js";import{EspalierMenu as p}from"../menu/esp-menu.js";import{RafThrottle as E}from"../shared/raf-throttle.js";import{viewportSize as R}from"../shared/viewport.js";import{renderConfiguredBrand as z,resolveConfiguredBrand as M}from"../shared/configured-brand.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{ESP_EVENTS as H}from"../shared/events.js";const P="(max-width: 36rem)";function u(h,e){const t=new Set(h);return{allowedValues:t,converter:{fromAttribute(r){return r??e},toAttribute(r){return t.has(r)?r:e}},defaultValue:e}}const j=["standard","centered-brand","centered-menu","extended","extended-centered","minimal"],V=["start","center","end"],q=["truncate","wrap","nowrap"],N=["auto","inline","drawer"],U=["hidden","visible"],g=u(j,"standard"),b=u(V,"start"),f=u(q,"truncate"),v=u(N,"auto"),w=u(U,"hidden");let s=class extends L{constructor(){super(...arguments),this.menuOpen=!1,this.menuTooLarge=!1,this.mobileMenu=!1,this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0,this.showBurger=!1,this.layout=g.defaultValue,this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.brandAlign=b.defaultValue,this.brandWrap=f.defaultValue,this.menuDisplay=v.defaultValue,this.themeToggle=w.defaultValue,this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.previewCollapseRequested=!1,this.fullBleedContent=!1,this.menuContainer=C(),this.menuButton=C(),this.menu=void 0,this.externalDrawerTarget=null,this.lastScrollY=0,this.lastInlineMenuWidth=0,this.mobileMenuQuery=null,this.menuDrawerListenersAttached=!1,this.observingMenuContainer=!1,this.scrollListenersAttached=!1,this.scrollFrame=new E(()=>this.runScrollStateUpdate()),this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>this.scrollFrame.schedule(),this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();if(!e)return;e.scheme=e.scheme==="dark"?"light":"dark";const t=e.scheme==="dark"?"dark":"light";this.dispatchEvent(new CustomEvent(H.HEADER_THEME_TOGGLE,{detail:{scheme:t},bubbles:!0,composed:!0}))},this.handleMenuToggleClicked=()=>{if(this.menuOpen){this.closeNav();return}this.openNav()},this.onMenuDrawerOpened=()=>{this.menuOpen=!0,document.body.classList.add("menu-open"),this.burger&&(this.burger.menuOpen=!0)},this.onMenuDrawerClosed=()=>{this.menuOpen=!1,document.body.classList.remove("menu-open"),this.burger&&(this.burger.menuOpen=!1),this.demoteMenuToggle()},this.onMenuDrawerPresented=e=>{e.target!==this.menu||!this.menu?.isFullScreenDrawer||this.promoteMenuToggle()},this.menuTogglePromoted=!1,this.promotedToggleFrame=new E(()=>this.positionPromotedToggle()),this.handlePromotedViewportResize=()=>this.promotedToggleFrame.schedule(),this.lastDrawerBrandKey="",this.inertedHeaderChrome=[]}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;this.positionPromotedToggle();const e=this.menu.getWidth();e>0&&(this.lastInlineMenuWidth=e);const t=this.lastInlineMenuWidth||e,o=this.getExternalDrawerTarget(),r=this.menuDisplay!=="inline",i=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested,n=r&&this.menuDisplay==="auto",d=n?this.layout==="centered-menu"?this.centeredMenuCapacity():this.menuContainer.value.clientWidth:0;this.menuTooLarge=n&&t>d,this.menu.sliding=r&&!o&&this.hasDrawerableContent()&&(this.menuTooLarge||i||this.mobileMenu)}centeredMenuCapacity(){const e=this.menuContainer.value?.parentElement;if(!(e instanceof HTMLElement))return 0;const t=d=>d?d.getBoundingClientRect().width:0,o=getComputedStyle(e),r=e.clientWidth-(Number.parseFloat(o.paddingLeft)||0)-(Number.parseFloat(o.paddingRight)||0),i=e.querySelector(":scope > section.brand"),n=e.querySelector(":scope > section.buttons");return r-t(i)-t(n)+t(n?.querySelector("esp-header-button.menu-toggle"))}menuHasContent(){return!!(this.menu??this.querySelector(':scope > [slot="menu"]'))?.querySelector("esp-menu-item, esp-menu-group")}hasDrawerableContent(){return this.showBurger||!!this.getExternalDrawerTarget()||this.menuHasContent()}getExternalDrawerTarget(){if(!this.drawerTarget)return null;const e=document.getElementById(this.drawerTarget);return e===this.menu?null:e&&"openDrawer"in e&&typeof e.openDrawer=="function"&&"closeDrawer"in e&&typeof e.closeDrawer=="function"?e:null}getBurgerFocusTarget(){const t=this.shadowRoot?.querySelector("esp-header-button.menu-toggle")?.shadowRoot?.querySelector("button"),o=this.menuButton.value?.shadowRoot?.querySelector("button");return t??o??null}getScrollTokens(){const e=this.scrollBehavior.split(/\s+/).map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e.filter(t=>t!=="none"))}getEffectiveScrollThreshold(){return Number.isFinite(this.scrollThreshold)?Math.max(0,this.scrollThreshold):0}clearScrollState(){this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0}runScrollStateUpdate(){const e=this.getScrollTokens();if(!e.size){this.clearScrollState();return}const t=Math.max(0,window.scrollY||document.documentElement.scrollTop||0),o=this.getEffectiveScrollThreshold(),r=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?r:o),n=t>this.lastScrollY,d=e.has("reveal")&&n&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=d,e.has("progress")){const m=document.documentElement,y=Math.max(1,m.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/y)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollFrame.cancel()}syncScrollListeners(){const e=this.getScrollTokens().size>0;if(e&&!this.scrollListenersAttached?(window.addEventListener("scroll",this.updateScrollState,{passive:!0}),window.addEventListener("resize",this.updateScrollState,{passive:!0}),this.scrollListenersAttached=!0):!e&&this.scrollListenersAttached&&this.removeScrollListeners(),e){this.updateScrollState();return}this.cancelScrollUpdate(),this.clearScrollState()}removeScrollListeners(){this.scrollListenersAttached&&(window.removeEventListener("scroll",this.updateScrollState),window.removeEventListener("resize",this.updateScrollState),this.scrollListenersAttached=!1)}addMenuDrawerListeners(){!this.menu||this.menuDrawerListenersAttached||(this.menu.addEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("esp-menu-drawer-presented",this.onMenuDrawerPresented),this.menu.addEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("esp-menu-drawer-presented",this.onMenuDrawerPresented),this.menu.removeEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){if(!this.menuContainer.value||this.observingMenuContainer)return;this.resizeObserver.observe(this.menuContainer.value);const e=this.menuContainer.value.parentElement;if(e){this.resizeObserver.observe(e);for(const t of e.querySelectorAll(":scope > section.brand, :scope > section.buttons"))this.resizeObserver.observe(t)}this.observingMenuContainer=!0}disconnectResizeObserver(){this.observingMenuContainer&&(this.resizeObserver.disconnect(),this.observingMenuContainer=!1)}observeMenuChildren(){!this.menu||this.menuChildObserver||(this.menuChildObserver=new MutationObserver(()=>{this.syncMenuLayout(),this.requestUpdate()}),this.menuChildObserver.observe(this.menu,{childList:!0,subtree:!0}))}syncMobileMenuQuery(){if("matchMedia"in window){if(!this.mobileMenuQuery){this.mobileMenuQuery=window.matchMedia(P),this.mobileMenu=this.mobileMenuQuery.matches,this.mobileMenuQuery.addEventListener("change",this.handleMobileMenuQueryChange);return}this.mobileMenu=this.mobileMenuQuery.matches}}getThemeRoot(){return this.traverseToClosest("esp-root")}syncExternalDrawerTarget(){const e=this.getExternalDrawerTarget(),t=e===this.menu?null:e;t!==this.externalDrawerTarget&&(this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof p&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested;return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof p&&(this.externalDrawerTarget.hasExternalDrawerControl=this.burgerVisibleForTarget())}openNav(){const e=this.getBurgerFocusTarget(),t=this.getExternalDrawerTarget();if(this.burger&&(this.burger.menuOpen=!0),t){this.menuOpen=!0,t.openDrawer(e),document.body.classList.add("menu-open");return}if(this.menu){this.menu.sliding=!0,this.menuOpen=!0,this.menu.isFullScreenDrawer&&this.canPromoteMenuToggle()&&(this.menu.liftedCloseControl=this.getMenuToggleElement()),this.menu.openDrawer(e),document.body.classList.add("menu-open");return}this.burger&&(this.burger.menuOpen=!1)}closeNav(){this.menuOpen=!1,this.burger&&(this.burger.menuOpen=!1),this.demoteMenuToggle();const e=this.getExternalDrawerTarget();if(e){e.closeDrawer(),document.body.classList.remove("menu-open");return}this.menu&&(this.menu.closeDrawer(),document.body.classList.remove("menu-open"))}getMenuToggleElement(){return this.shadowRoot?.querySelector("esp-header-button.menu-toggle")??null}canPromoteMenuToggle(){const e=this.getMenuToggleElement();return!!e&&typeof e?.showPopover=="function"}setHeaderChromeInert(e){if(!e){for(const n of this.inertedHeaderChrome)n.inert=!1;this.inertedHeaderChrome=[];return}const t=this.menuContainer.value?.parentElement,o=this.getMenuToggleElement();if(!t||!o)return;const r=[];for(const n of t.querySelectorAll(":scope > section.brand, :scope > section.topbar"))r.push(n);const i=t.querySelector(":scope > section.buttons");for(const n of i?.children??[])if(!(!(n instanceof HTMLElement)||n===o)){if(n instanceof HTMLSlotElement){for(const d of n.assignedElements())d instanceof HTMLElement&&r.push(d);continue}r.push(n)}for(const n of r)n.inert||(n.inert=!0,this.inertedHeaderChrome.push(n))}promoteMenuToggle(){const e=this.getMenuToggleElement();if(!e||this.menuTogglePromoted||typeof e.showPopover!="function")return;const t=e.getBoundingClientRect();e.setAttribute("popover","manual"),Object.assign(e.style,{position:"fixed",inset:"auto",margin:"0",padding:"0",border:"0",background:"transparent",overflow:"visible"}),this.setPromotedTogglePosition(e,t.left,t.top,t.width,t.height);try{e.showPopover()}catch{e.removeAttribute("popover"),e.removeAttribute("style"),this.menu&&(this.menu.liftedCloseControl=null);return}this.menuTogglePromoted=!0,window.addEventListener("resize",this.handlePromotedViewportResize),this.menu&&(this.menu.liftedCloseControl=e),this.setHeaderChromeInert(!0)}positionPromotedToggle(){if(!this.menuTogglePromoted)return;const e=this.getMenuToggleElement(),t=this.shadowRoot?.querySelector("section.buttons");if(!e||!t)return;const o=t.getBoundingClientRect(),r=e.getBoundingClientRect(),i=getComputedStyle(t).direction==="rtl";this.setPromotedTogglePosition(e,i?o.left:o.right-r.width,o.top+(o.height-r.height)/2,r.width,r.height)}setPromotedTogglePosition(e,t,o,r,i){const n=R();e.style.left=`${Math.max(0,Math.min(t,n.width-r))}px`,e.style.top=`${Math.max(0,Math.min(o,n.height-i))}px`}demoteMenuToggle(){if(window.removeEventListener("resize",this.handlePromotedViewportResize),this.promotedToggleFrame.cancel(),this.menu?.liftedCloseControl&&(this.menu.liftedCloseControl=null),!this.menuTogglePromoted)return;this.menuTogglePromoted=!1,this.setHeaderChromeInert(!1);const e=this.getMenuToggleElement();if(e){try{e.hidePopover()}catch{}e.removeAttribute("popover"),e.removeAttribute("style")}}syncDrawerBrand(){if(!this.menu)return;const e=M({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),t=e.brandLogo||this.brandText?{brandLogo:e.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt,brandColor:e.brandColor}:null,o=JSON.stringify(t);o!==this.lastDrawerBrandKey&&(this.lastDrawerBrandKey=o,this.menu.drawerBrand=t)}get burger(){return this.menuButton.value??void 0}willUpdate(e){super.willUpdate(e),e.has("layout")&&!g.allowedValues.has(this.layout)&&(this.layout=g.defaultValue),e.has("brandAlign")&&!b.allowedValues.has(this.brandAlign)&&(this.brandAlign=b.defaultValue),e.has("brandWrap")&&!f.allowedValues.has(this.brandWrap)&&(this.brandWrap=f.defaultValue),e.has("menuDisplay")&&!v.allowedValues.has(this.menuDisplay)&&(this.menuDisplay=v.defaultValue),e.has("themeToggle")&&!w.allowedValues.has(this.themeToggle)&&(this.themeToggle=w.defaultValue)}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const r=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];r instanceof p?(this.menu=r,this.addMenuDrawerListeners(),this.observeMenuChildren(),this.syncDrawerBrand()):r&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",r),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),this.syncDrawerBrand(),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout")||e.has("previewCollapseRequested"))&&(this.syncExternalDrawerTarget(),this.syncMenuLayout()),(e.has("mobileMenu")||e.has("menuTooLarge"))&&this.syncExternalDrawerControl(),e.has("scrollBehavior")?this.syncScrollListeners():(e.has("scrollThreshold")||e.has("dockOffset"))&&this.updateScrollState()}connectedCallback(){super.connectedCallback(),this.syncScrollListeners(),this.syncMobileMenuQuery(),this.addMenuDrawerListeners(),this.syncExternalDrawerTarget(),this.observeMenuContainer(),this.observeMenuChildren()}disconnectedCallback(){this.removeMenuDrawerListeners(),this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof p&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=null,this.mobileMenuQuery?.removeEventListener("change",this.handleMobileMenuQueryChange),this.mobileMenuQuery=null,this.removeScrollListeners(),this.cancelScrollUpdate(),this.disconnectResizeObserver(),this.menuChildObserver?.disconnect(),this.menuChildObserver=null,this.demoteMenuToggle(),super.disconnectedCallback()}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,r=this.menuDisplay!=="inline",i=r&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested),n=this.getScrollTokens(),d=n.has("progress"),m=M({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),y={"--_esp-header-brand-color":m.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},S={"menu-open":e,"too-wide":r&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":n.has("compact"),"scroll-elevate":n.has("elevate"),"scroll-transparent":n.has("transparent")||n.has("transparent-to-solid"),"scroll-collapse-topbar":n.has("collapse-topbar")},B=this.scheme==="dark"?"light":"dark";return x`
+var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,e,t,o);else for(var d=h.length-1;d>=0;d--)(n=h[d])&&(i=(r<3?n(i):r>3?n(e,t,i):n(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};import{css as k,html as x,nothing as T}from"lit";import{customElement as A,property as l,state as c}from"lit/decorators.js";import{classMap as O}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as C,ref as D}from"lit/directives/ref.js";import{EspalierMenu as p}from"../menu/esp-menu.js";import{RafThrottle as E}from"../shared/raf-throttle.js";import{viewportSize as R}from"../shared/viewport.js";import{CONFIGURED_BRAND_LOGO_ASPECT_RATIO as z,configuredBrandLogoGeometry as H,renderConfiguredBrand as P,resolveConfiguredBrand as M}from"../shared/configured-brand.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{ESP_EVENTS as j}from"../shared/events.js";const V="(max-width: 36rem)";function u(h,e){const t=new Set(h);return{allowedValues:t,converter:{fromAttribute(r){return r??e},toAttribute(r){return t.has(r)?r:e}},defaultValue:e}}const N=["standard","centered-brand","centered-menu","extended","extended-centered","minimal"],q=["start","center","end"],U=["truncate","wrap","nowrap"],$=["auto","inline","drawer"],F=["hidden","visible"],g=u(N,"standard"),b=u(q,"start"),f=u(U,"truncate"),v=u($,"auto"),w=u(F,"hidden");let s=class extends L{constructor(){super(...arguments),this.menuOpen=!1,this.menuTooLarge=!1,this.mobileMenu=!1,this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0,this.showBurger=!1,this.layout=g.defaultValue,this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.brandAlign=b.defaultValue,this.brandWrap=f.defaultValue,this.menuDisplay=v.defaultValue,this.themeToggle=w.defaultValue,this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.previewCollapseRequested=!1,this.fullBleedContent=!1,this.menuContainer=C(),this.menuButton=C(),this.menu=void 0,this.externalDrawerTarget=null,this.lastScrollY=0,this.lastInlineMenuWidth=0,this.mobileMenuQuery=null,this.menuDrawerListenersAttached=!1,this.observingMenuContainer=!1,this.scrollListenersAttached=!1,this.scrollFrame=new E(()=>this.runScrollStateUpdate()),this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>this.scrollFrame.schedule(),this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();if(!e)return;e.scheme=e.scheme==="dark"?"light":"dark";const t=e.scheme==="dark"?"dark":"light";this.dispatchEvent(new CustomEvent(j.HEADER_THEME_TOGGLE,{detail:{scheme:t},bubbles:!0,composed:!0}))},this.handleMenuToggleClicked=()=>{if(this.menuOpen){this.closeNav();return}this.openNav()},this.onMenuDrawerOpened=()=>{this.menuOpen=!0,document.body.classList.add("menu-open"),this.burger&&(this.burger.menuOpen=!0)},this.onMenuDrawerClosed=()=>{this.menuOpen=!1,document.body.classList.remove("menu-open"),this.burger&&(this.burger.menuOpen=!1),this.demoteMenuToggle()},this.onMenuDrawerPresented=e=>{e.target!==this.menu||!this.menu?.isFullScreenDrawer||this.promoteMenuToggle()},this.menuTogglePromoted=!1,this.promotedToggleFrame=new E(()=>this.positionPromotedToggle()),this.handlePromotedViewportResize=()=>this.promotedToggleFrame.schedule(),this.lastDrawerBrandKey="",this.inertedHeaderChrome=[]}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;this.positionPromotedToggle();const e=this.menu.getWidth();e>0&&(this.lastInlineMenuWidth=e);const t=this.lastInlineMenuWidth||e,o=this.getExternalDrawerTarget(),r=this.menuDisplay!=="inline",i=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested,n=r&&this.menuDisplay==="auto",d=n?this.layout==="centered-menu"?this.centeredMenuCapacity():this.menuContainer.value.clientWidth:0;this.menuTooLarge=n&&t>d,this.menu.sliding=r&&!o&&this.hasDrawerableContent()&&(this.menuTooLarge||i||this.mobileMenu)}centeredMenuCapacity(){const e=this.menuContainer.value?.parentElement;if(!(e instanceof HTMLElement))return 0;const t=d=>d?d.getBoundingClientRect().width:0,o=getComputedStyle(e),r=e.clientWidth-(Number.parseFloat(o.paddingLeft)||0)-(Number.parseFloat(o.paddingRight)||0),i=e.querySelector(":scope > section.brand"),n=e.querySelector(":scope > section.buttons");return r-t(i)-t(n)+t(n?.querySelector("esp-header-button.menu-toggle"))}menuHasContent(){return!!(this.menu??this.querySelector(':scope > [slot="menu"]'))?.querySelector("esp-menu-item, esp-menu-group")}hasDrawerableContent(){return this.showBurger||!!this.getExternalDrawerTarget()||this.menuHasContent()}getExternalDrawerTarget(){if(!this.drawerTarget)return null;const e=document.getElementById(this.drawerTarget);return e===this.menu?null:e&&"openDrawer"in e&&typeof e.openDrawer=="function"&&"closeDrawer"in e&&typeof e.closeDrawer=="function"?e:null}getBurgerFocusTarget(){const t=this.shadowRoot?.querySelector("esp-header-button.menu-toggle")?.shadowRoot?.querySelector("button"),o=this.menuButton.value?.shadowRoot?.querySelector("button");return t??o??null}getScrollTokens(){const e=this.scrollBehavior.split(/\s+/).map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e.filter(t=>t!=="none"))}getEffectiveScrollThreshold(){return Number.isFinite(this.scrollThreshold)?Math.max(0,this.scrollThreshold):0}clearScrollState(){this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0}runScrollStateUpdate(){const e=this.getScrollTokens();if(!e.size){this.clearScrollState();return}const t=Math.max(0,window.scrollY||document.documentElement.scrollTop||0),o=this.getEffectiveScrollThreshold(),r=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?r:o),n=t>this.lastScrollY,d=e.has("reveal")&&n&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=d,e.has("progress")){const m=document.documentElement,y=Math.max(1,m.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/y)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollFrame.cancel()}syncScrollListeners(){const e=this.getScrollTokens().size>0;if(e&&!this.scrollListenersAttached?(window.addEventListener("scroll",this.updateScrollState,{passive:!0}),window.addEventListener("resize",this.updateScrollState,{passive:!0}),this.scrollListenersAttached=!0):!e&&this.scrollListenersAttached&&this.removeScrollListeners(),e){this.updateScrollState();return}this.cancelScrollUpdate(),this.clearScrollState()}removeScrollListeners(){this.scrollListenersAttached&&(window.removeEventListener("scroll",this.updateScrollState),window.removeEventListener("resize",this.updateScrollState),this.scrollListenersAttached=!1)}addMenuDrawerListeners(){!this.menu||this.menuDrawerListenersAttached||(this.menu.addEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("esp-menu-drawer-presented",this.onMenuDrawerPresented),this.menu.addEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("esp-menu-drawer-presented",this.onMenuDrawerPresented),this.menu.removeEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){if(!this.menuContainer.value||this.observingMenuContainer)return;this.resizeObserver.observe(this.menuContainer.value);const e=this.menuContainer.value.parentElement;if(e){this.resizeObserver.observe(e);for(const t of e.querySelectorAll(":scope > section.brand, :scope > section.buttons"))this.resizeObserver.observe(t)}this.observingMenuContainer=!0}disconnectResizeObserver(){this.observingMenuContainer&&(this.resizeObserver.disconnect(),this.observingMenuContainer=!1)}observeMenuChildren(){!this.menu||this.menuChildObserver||(this.menuChildObserver=new MutationObserver(()=>{this.syncMenuLayout(),this.requestUpdate()}),this.menuChildObserver.observe(this.menu,{childList:!0,subtree:!0}))}syncMobileMenuQuery(){if("matchMedia"in window){if(!this.mobileMenuQuery){this.mobileMenuQuery=window.matchMedia(V),this.mobileMenu=this.mobileMenuQuery.matches,this.mobileMenuQuery.addEventListener("change",this.handleMobileMenuQueryChange);return}this.mobileMenu=this.mobileMenuQuery.matches}}getThemeRoot(){return this.traverseToClosest("esp-root")}syncExternalDrawerTarget(){const e=this.getExternalDrawerTarget(),t=e===this.menu?null:e;t!==this.externalDrawerTarget&&(this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof p&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested;return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof p&&(this.externalDrawerTarget.hasExternalDrawerControl=this.burgerVisibleForTarget())}openNav(){const e=this.getBurgerFocusTarget(),t=this.getExternalDrawerTarget();if(this.burger&&(this.burger.menuOpen=!0),t){this.menuOpen=!0,t.openDrawer(e),document.body.classList.add("menu-open");return}if(this.menu){this.menu.sliding=!0,this.menuOpen=!0,this.menu.isFullScreenDrawer&&this.canPromoteMenuToggle()&&(this.menu.liftedCloseControl=this.getMenuToggleElement()),this.menu.openDrawer(e),document.body.classList.add("menu-open");return}this.burger&&(this.burger.menuOpen=!1)}closeNav(){this.menuOpen=!1,this.burger&&(this.burger.menuOpen=!1),this.demoteMenuToggle();const e=this.getExternalDrawerTarget();if(e){e.closeDrawer(),document.body.classList.remove("menu-open");return}this.menu&&(this.menu.closeDrawer(),document.body.classList.remove("menu-open"))}getMenuToggleElement(){return this.shadowRoot?.querySelector("esp-header-button.menu-toggle")??null}canPromoteMenuToggle(){const e=this.getMenuToggleElement();return!!e&&typeof e?.showPopover=="function"}setHeaderChromeInert(e){if(!e){for(const n of this.inertedHeaderChrome)n.inert=!1;this.inertedHeaderChrome=[];return}const t=this.menuContainer.value?.parentElement,o=this.getMenuToggleElement();if(!t||!o)return;const r=[];for(const n of t.querySelectorAll(":scope > section.brand, :scope > section.topbar"))r.push(n);const i=t.querySelector(":scope > section.buttons");for(const n of i?.children??[])if(!(!(n instanceof HTMLElement)||n===o)){if(n instanceof HTMLSlotElement){for(const d of n.assignedElements())d instanceof HTMLElement&&r.push(d);continue}r.push(n)}for(const n of r)n.inert||(n.inert=!0,this.inertedHeaderChrome.push(n))}promoteMenuToggle(){const e=this.getMenuToggleElement();if(!e||this.menuTogglePromoted||typeof e.showPopover!="function")return;const t=e.getBoundingClientRect();e.setAttribute("popover","manual"),Object.assign(e.style,{position:"fixed",inset:"auto",margin:"0",padding:"0",border:"0",background:"transparent",overflow:"visible"}),this.setPromotedTogglePosition(e,t.left,t.top,t.width,t.height);try{e.showPopover()}catch{e.removeAttribute("popover"),e.removeAttribute("style"),this.menu&&(this.menu.liftedCloseControl=null);return}this.menuTogglePromoted=!0,window.addEventListener("resize",this.handlePromotedViewportResize),this.menu&&(this.menu.liftedCloseControl=e),this.setHeaderChromeInert(!0)}positionPromotedToggle(){if(!this.menuTogglePromoted)return;const e=this.getMenuToggleElement(),t=this.shadowRoot?.querySelector("section.buttons");if(!e||!t)return;const o=t.getBoundingClientRect(),r=e.getBoundingClientRect(),i=getComputedStyle(t).direction==="rtl";this.setPromotedTogglePosition(e,i?o.left:o.right-r.width,o.top+(o.height-r.height)/2,r.width,r.height)}setPromotedTogglePosition(e,t,o,r,i){const n=R();e.style.left=`${Math.max(0,Math.min(t,n.width-r))}px`,e.style.top=`${Math.max(0,Math.min(o,n.height-i))}px`}demoteMenuToggle(){if(window.removeEventListener("resize",this.handlePromotedViewportResize),this.promotedToggleFrame.cancel(),this.menu?.liftedCloseControl&&(this.menu.liftedCloseControl=null),!this.menuTogglePromoted)return;this.menuTogglePromoted=!1,this.setHeaderChromeInert(!1);const e=this.getMenuToggleElement();if(e){try{e.hidePopover()}catch{}e.removeAttribute("popover"),e.removeAttribute("style")}}syncDrawerBrand(){if(!this.menu)return;const e=M({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),t=e.brandLogo||this.brandText?{brandLogo:e.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt,brandColor:e.brandColor}:null,o=JSON.stringify(t);o!==this.lastDrawerBrandKey&&(this.lastDrawerBrandKey=o,this.menu.drawerBrand=t)}get burger(){return this.menuButton.value??void 0}willUpdate(e){super.willUpdate(e),e.has("layout")&&!g.allowedValues.has(this.layout)&&(this.layout=g.defaultValue),e.has("brandAlign")&&!b.allowedValues.has(this.brandAlign)&&(this.brandAlign=b.defaultValue),e.has("brandWrap")&&!f.allowedValues.has(this.brandWrap)&&(this.brandWrap=f.defaultValue),e.has("menuDisplay")&&!v.allowedValues.has(this.menuDisplay)&&(this.menuDisplay=v.defaultValue),e.has("themeToggle")&&!w.allowedValues.has(this.themeToggle)&&(this.themeToggle=w.defaultValue)}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const r=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];r instanceof p?(this.menu=r,this.addMenuDrawerListeners(),this.observeMenuChildren(),this.syncDrawerBrand()):r&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",r),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),this.syncDrawerBrand(),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout")||e.has("previewCollapseRequested"))&&(this.syncExternalDrawerTarget(),this.syncMenuLayout()),(e.has("mobileMenu")||e.has("menuTooLarge"))&&this.syncExternalDrawerControl(),e.has("scrollBehavior")?this.syncScrollListeners():(e.has("scrollThreshold")||e.has("dockOffset"))&&this.updateScrollState()}connectedCallback(){super.connectedCallback(),this.syncScrollListeners(),this.syncMobileMenuQuery(),this.addMenuDrawerListeners(),this.syncExternalDrawerTarget(),this.observeMenuContainer(),this.observeMenuChildren()}disconnectedCallback(){this.removeMenuDrawerListeners(),this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("esp-menu-drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof p&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=null,this.mobileMenuQuery?.removeEventListener("change",this.handleMobileMenuQueryChange),this.mobileMenuQuery=null,this.removeScrollListeners(),this.cancelScrollUpdate(),this.disconnectResizeObserver(),this.menuChildObserver?.disconnect(),this.menuChildObserver=null,this.demoteMenuToggle(),super.disconnectedCallback()}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,r=this.menuDisplay!=="inline",i=r&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"||this.previewCollapseRequested),n=this.getScrollTokens(),d=n.has("progress"),m=M({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),y={"--_esp-header-brand-color":m.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},S={"menu-open":e,"too-wide":r&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":n.has("compact"),"scroll-elevate":n.has("elevate"),"scroll-transparent":n.has("transparent")||n.has("transparent-to-solid"),"scroll-collapse-topbar":n.has("collapse-topbar")},B=this.scheme==="dark"?"light":"dark";return x`
       <header class=${O(S)} style=${_(y)}>
         <section class="topbar">
           <slot name="topbar"></slot>
@@ -6,7 +6,7 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
 
         <section class="brand">
           <slot name="brand"
-            >${z({brandLogo:m.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+            >${P({brandLogo:m.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
           >
         </section>
 
@@ -22,9 +22,9 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
                 aria-label=${`Switch to ${B} mode`}
                 @esp-clicked=${this.toggleTheme}
               ></esp-header-button>`:T}
+          
           <esp-header-button
             class="menu-toggle"
-            role="button"
             aria-label=${e?"Close navigation":"Open navigation"}
             aria-controls=${this.drawerTarget||T}
             aria-expanded=${e?"true":"false"}
@@ -35,7 +35,7 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
         </section>
         ${d?x`<div class="scroll-progress" aria-hidden="true"></div>`:T}
       </header>
-    `}};s.styles=[...L.styles,k`
+    `}};s.styles=[...L.styles,H,k`
       :host {
         --_esp-header-current-height: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
 
@@ -175,6 +175,9 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
         }
 
         .brand-logo {
+          
+          aspect-ratio: auto
+            var(--esp-header-brand-logo-aspect-ratio, ${z});
           width: auto;
           height: var(
             --esp-header-brand-logo-size,

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

@@ -4,6 +4,7 @@ import { type FocusPoint } from "./image-focus.js";
 import "./esp-image-option.js";
 export type ImageScrim = "auto" | "none" | "flat" | "top" | "bottom" | "left" | "right" | "radial";
 export type ImageScrimStrength = "soft" | "medium" | "strong";
+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";
@@ -116,6 +117,66 @@ export declare function parseImageRatio(value: string): string | null;
  * </esp-image>
  * ```
  *
+ * ### Meeting an adjoining band
+ *
+ * A directional scrim is capped by `scrim-strength`, so even `strong` leaves
+ * roughly a quarter of the photograph showing at the very edge it is anchored
+ * to. `scrim-edge="flush"` paints that edge at full alpha and relaxes to the
+ * ordinary strength over `--esp-image-scrim-edge-depth` (12% of the gradient
+ * axis by default), so a banner dissolves into a section band directly beneath
+ * it with no seam. Above that band the scrim is unchanged — `flush` is an edge
+ * treatment, not a heavier veil over the subject.
+ *
+ * The join is exact because both sides paint the same token: when
+ * `banner-scheme` resolves to the page scheme the scrim ink *is*
+ * `--esp-color-background`, which is what [esp-section](/components/section)
+ * paints its band with. Put the banner in a section with no padding, directly
+ * above a section in the same context:
+ *
+ * ```html
+ * <esp-section style="--esp-section-max-width: none; --esp-section-padding-inline: 0; --esp-section-padding-block: 0;">
+ *   <esp-image banner ratio="3/1" scrim="bottom" scrim-strength="strong" scrim-edge="flush" 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>
+ *   </esp-image>
+ * </esp-section>
+ * <esp-section>
+ *   <p>The banner's bottom edge and this band are the same color, so the photograph fades into the page rather than stopping at a line.</p>
+ * </esp-section>
+ * ```
+ *
+ * `flush` is inert unless the *resolved* scrim is directional — an `auto`
+ * scrim that resolves to `top` or `bottom` picks it up, while `none`, `flat`,
+ * and `radial` ignore it, having no anchored edge for it to close.
+ *
+ * It is its own attribute rather than a fourth `scrim-strength` because the two
+ * are independent: `scrim-strength` is how much veil sits over the subject,
+ * `scrim-edge` is whether the anchored edge completes. A light veil with a
+ * closed edge is exactly the composition this exists for, and a strength step
+ * could not express it.
+ *
+ * A seamless tile can bleed across the join too — any `background-image` value,
+ * a tile the application serves, a data URI, or a gradient. Hand the edge the
+ * same background the adjoining section paints and it tiles up over the
+ * photograph, fading out over the same band:
+ *
+ * ```html
+ * <esp-image
+ *   banner
+ *   ratio="3/1"
+ *   scrim="bottom"
+ *   scrim-edge="flush"
+ *   style="--esp-image-scrim-edge-image: repeating-linear-gradient(45deg, oklch(0.55 0.08 255 / 0.18) 0 6px, transparent 6px 18px); --esp-image-scrim-edge-size: 18px 18px; --esp-image-scrim-edge-depth: 22%;"
+ * >
+ *   <img src="/assets/focus-picker-unsplash.jpg" alt="A woman standing in a sunlit field with her back to the camera" />
+ * </esp-image>
+ * ```
+ *
+ * The component anchors its own side of the tile to the scrim's edge, so the
+ * banner's last tile row ends exactly at the join. Continuity into the section
+ * below is the consumer's half of the contract: the same `background-size`,
+ * and a `top`-anchored `background-position` on the adjoining band.
+ *
  * Every procedural preset supports `fine`, `medium`, and `coarse` scales.
  *
  * ### Dots
@@ -232,8 +293,11 @@ export declare function parseImageRatio(value: string): string | null;
  * @cssprop --esp-image-border-radius - Corner radius; defaults to `var(--esp-size-border-radius)` or zero in banner mode.
  * @cssprop --esp-image-object-position - Final object-position override.
  * @cssprop --esp-image-compact-width - Component-width threshold; defaults to `40rem`.
- * @cssprop --esp-image-scrim-color - Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation.
+ * @cssprop --esp-image-scrim-color - Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation. A `scrim-edge="flush"` join is seamless only while the ink is the adjoining band's own color, so an explicit cross-scheme `banner-scheme` (or an override to any other color) makes the edge a deliberate color break rather than a dissolve.
  * @cssprop --esp-image-scrim-opacity - Scrim-strength opacity override.
+ * @cssprop --esp-image-scrim-edge-depth - How far a `scrim-edge="flush"` edge takes to relax from full alpha to the ordinary scrim strength, along the gradient axis; defaults to `12%`.
+ * @cssprop --esp-image-scrim-edge-image - Background image painted over the flush edge and faded out with it — the adjoining band's seamless tile; defaults to `none`. Inert unless `scrim-edge="flush"` resolves onto a directional scrim.
+ * @cssprop --esp-image-scrim-edge-size - Background size for `--esp-image-scrim-edge-image`; defaults to `auto`. Match the adjoining band's own `background-size` for a continuous tile.
  * @cssprop --esp-image-texture-color - Procedural texture ink; defaults to a theme-derived color following `banner-scheme`.
  * @cssprop --esp-image-texture-opacity - Procedural texture opacity override.
  * @cssprop --esp-image-texture-scale - CSS-gradient texture pitch override.
@@ -309,6 +373,14 @@ export declare class EspalierImage extends EspalierElementBase {
     scrim: ImageScrim;
     /** Preset opacity for the scrim. */
     scrimStrength: ImageScrimStrength;
+    /**
+     * Edge treatment for a directional scrim. `flush` paints the scrim ink at
+     * full alpha along the edge the scrim is anchored to, relaxing to the
+     * ordinary strength over `--esp-image-scrim-edge-depth`, so a banner can
+     * dissolve into a section band it adjoins. Inert unless the resolved scrim
+     * is `top`, `bottom`, `left`, or `right`.
+     */
+    scrimEdge: ImageScrimEdge;
     /**
      * Optional texture: a built-in procedural preset, or the name of a
      * texture registered with `registerImageTexture`. Unknown names render

package/dist/image/esp-image.js

@@ -1,11 +1,11 @@
-var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var l=d.length-1;l>=0;l--)(o=d[l])&&(s=(i<3?o(s):i>3?o(e,t,s):o(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},p;import{css as I,html as m,nothing as C}from"lit";import{customElement as $,property as c,state as g}from"lit/decorators.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{slotHasContent as y}from"../shared/slot-content.js";import{renderVisualOverlay as T,visualOverlayStyles as A}from"../shared/visual-overlay.js";import{focusConverter as N,normalizeFocus as R}from"./image-focus.js";import{ensureImageTextureFilters as W,imageTextureFilterId as E}from"./image-texture-filters.js";import{getImageTexture as b,isBuiltInImageTexture as x,subscribeToImageTextureRegistry as M}from"../shared/image-texture-registry.js";import{validImageDimensions as _}from"./image-dimensions.js";import"./esp-image-option.js";const k=new Set(["auto","none","flat","top","bottom","left","right","radial"]),S=new Set(["soft","medium","strong"]),w=new Set(["fine","medium","coarse"]),j=new Set(["auto","light","dark"]),O=new Set(["bottom-start","bottom","bottom-end","center","top-start","top","top-end"]);function h(d,e){return{fromAttribute(t){return t&&d.has(t)?t:e},toAttribute(t){return d.has(t)?t:e}}}function z(d){const e=d.trim();if(!e)return null;const t=e.split("/").map(i=>i.trim());if(t.length>2||t.some(i=>i.length===0))return null;const r=t.map(Number);return r.some(i=>!Number.isFinite(i)||i<=0)?null:r.length===1?String(r[0]):`${r[0]} / ${r[1]}`}let a=p=class extends v{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.resizeObserver=null,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(e.target.name==="overlay"){const t=y(e.target);t!==this.overlayHasContent&&(this.overlayHasContent=t);return}this.requestUpdate()}}}get isPortrait(){const e=_(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(i=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}i.some(s=>s.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),p.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=M(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),this.syncOffscreenDeferral()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),i=Number(t.getAttribute("width"));if(!r||!Number.isFinite(i)||i<=0)continue;const s=t.getAttribute("type")??"",o=e.get(s)??[];o.push({url:r,width:i}),e.set(s,o)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((i,s)=>i.width-s.width).map(i=>`${i.url} ${i.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return x(this.texture)?this.texture:b(this.texture)?this.texture:"none"}resolvedScrim(){return this.scrim!=="auto"?this.scrim:this.overlayHasContent?this.contentPosition.startsWith("top")?"top":this.contentPosition.startsWith("bottom")?"bottom":"radial":"none"}resolvedAspectRatio(){const e=_(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=z(this.ratio);return(this.compact?z(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!k.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!j.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!S.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("textureScale")&&!w.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!O.has(this.contentPosition)&&(this.contentPosition="bottom-start")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=R(this.focusPoint),r=Number((t.x*100).toFixed(4)),i=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${i}%`);const s=this.resolvedAspectRatio();s?this.style.setProperty("--_esp-image-aspect-ratio",s):this.style.removeProperty("--_esp-image-aspect-ratio");const o=this.resolvedTexture();if(["paper","grain","grunge"].includes(o)){const u=o==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":o;this.style.setProperty("--_esp-image-texture-filter",`url(#${E(u,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const l=x(o)?void 0:b(o),P=[["--_esp-image-registered-image",l?.image],["--_esp-image-registered-size",l?.size],["--_esp-image-registered-repeat",l?.repeat],["--_esp-image-registered-position",l?.position],["--_esp-image-registered-opacity",l?.opacity?.toString()],["--_esp-image-registered-blend-mode",l?.blendMode]];for(const[u,f]of P)f===void 0?this.style.removeProperty(u):this.style.setProperty(u,f)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector('slot[name="overlay"]');t&&(this.overlayHasContent=y(t))}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&W(this.renderRoot),this.renderedWidth>0){const o=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,l=o>0&&this.renderedWidth<o;l!==this.compact&&(this.compact=l)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const s of t.querySelectorAll("source"))s.setAttribute("sizes",r);const i=this.findProjectedImage(t);i?.hasAttribute("srcset")&&i.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return m`<img
+var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var l=d.length-1;l>=0;l--)(o=d[l])&&(s=(i<3?o(s):i>3?o(e,t,s):o(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},p;import{css as T,html as h,nothing as C}from"lit";import{customElement as $,property as c,state as u}from"lit/decorators.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{slotHasContent as y}from"../shared/slot-content.js";import{renderVisualOverlay as E,visualOverlayStyles as A}from"../shared/visual-overlay.js";import{focusConverter as N,normalizeFocus as R}from"./image-focus.js";import{ensureImageTextureFilters as W,imageTextureFilterId as M}from"./image-texture-filters.js";import{getImageTexture as b,isBuiltInImageTexture as x,subscribeToImageTextureRegistry as D}from"../shared/image-texture-registry.js";import{validImageDimensions as _}from"./image-dimensions.js";import"./esp-image-option.js";const k=new Set(["auto","none","flat","top","bottom","left","right","radial"]),w=new Set(["soft","medium","strong"]),S=new Set(["none","flush"]),z=new Set(["fine","medium","coarse"]),j=new Set(["auto","light","dark"]),O=new Set(["bottom-start","bottom","bottom-end","center","top-start","top","top-end"]);function m(d,e){return{fromAttribute(t){return t&&d.has(t)?t:e},toAttribute(t){return d.has(t)?t:e}}}function I(d){const e=d.trim();if(!e)return null;const t=e.split("/").map(i=>i.trim());if(t.length>2||t.some(i=>i.length===0))return null;const r=t.map(Number);return r.some(i=>!Number.isFinite(i)||i<=0)?null:r.length===1?String(r[0]):`${r[0]} / ${r[1]}`}let a=p=class extends v{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.resizeObserver=null,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(e.target.name==="overlay"){const t=y(e.target);t!==this.overlayHasContent&&(this.overlayHasContent=t);return}this.requestUpdate()}}}get isPortrait(){const e=_(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(i=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}i.some(s=>s.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),p.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=D(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),this.syncOffscreenDeferral()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),i=Number(t.getAttribute("width"));if(!r||!Number.isFinite(i)||i<=0)continue;const s=t.getAttribute("type")??"",o=e.get(s)??[];o.push({url:r,width:i}),e.set(s,o)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((i,s)=>i.width-s.width).map(i=>`${i.url} ${i.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return x(this.texture)?this.texture:b(this.texture)?this.texture:"none"}resolvedScrim(){return this.scrim!=="auto"?this.scrim:this.overlayHasContent?this.contentPosition.startsWith("top")?"top":this.contentPosition.startsWith("bottom")?"bottom":"radial":"none"}resolvedAspectRatio(){const e=_(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=I(this.ratio);return(this.compact?I(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!k.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!j.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!w.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!S.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!z.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!O.has(this.contentPosition)&&(this.contentPosition="bottom-start")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=R(this.focusPoint),r=Number((t.x*100).toFixed(4)),i=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${i}%`);const s=this.resolvedAspectRatio();s?this.style.setProperty("--_esp-image-aspect-ratio",s):this.style.removeProperty("--_esp-image-aspect-ratio");const o=this.resolvedTexture();if(["paper","grain","grunge"].includes(o)){const g=o==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":o;this.style.setProperty("--_esp-image-texture-filter",`url(#${M(g,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const l=x(o)?void 0:b(o),P=[["--_esp-image-registered-image",l?.image],["--_esp-image-registered-size",l?.size],["--_esp-image-registered-repeat",l?.repeat],["--_esp-image-registered-position",l?.position],["--_esp-image-registered-opacity",l?.opacity?.toString()],["--_esp-image-registered-blend-mode",l?.blendMode]];for(const[g,f]of P)f===void 0?this.style.removeProperty(g):this.style.setProperty(g,f)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector('slot[name="overlay"]');t&&(this.overlayHasContent=y(t))}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&W(this.renderRoot),this.renderedWidth>0){const o=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,l=o>0&&this.renderedWidth<o;l!==this.compact&&(this.compact=l)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const s of t.querySelectorAll("source"))s.setAttribute("sizes",r);const i=this.findProjectedImage(t);i?.hasAttribute("srcset")&&i.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return h`<img
         src=${this.localImage}
         alt=${this.caption}
         decoding="async"
         loading=${this.loading}
-      />`;const e=m`<slot @slotchange=${this.handleSlotChange}></slot>`;if(this.findProjected())return e;const t=this.buildSources();return m`
+      />`;const e=h`<slot @slotchange=${this.handleSlotChange}></slot>`;if(this.findProjected())return e;const t=this.buildSources();return h`
       <picture>
-        ${t.map(r=>m`
+        ${t.map(r=>h`
             <source
               srcset=${r.srcset}
               sizes=${this.effectiveSizes()}
@@ -15,19 +15,20 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
         <img src=${this.imageUrl} alt=${this.caption} decoding="async" loading=${this.loading} />
       </picture>
       ${e}
-    `}render(){return m`
+    `}render(){return h`
       <div
         part="frame"
         class="frame"
         data-banner-scheme=${this.resolvedBannerScheme()}
         data-scrim=${this.resolvedScrim()}
         data-scrim-strength=${this.scrimStrength}
+        data-scrim-edge=${this.scrimEdge}
         data-texture=${this.resolvedTexture()}
         data-texture-scale=${this.textureScale}
         data-content-position=${this.contentPosition}
       >
         <div part="image" class="image">${this.renderMedia()}</div>
-        ${T({className:"banner-layers",imagePart:"texture",scrimPart:"scrim",texturePart:"texture"})}
+        ${E({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>
@@ -49,7 +50,7 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
       object-fit: var(--_esp-image-object-fit, cover);
       object-position: var(--esp-image-object-position, var(--_esp-image-object-position, center));
     }
-  `,a.styles=[...v.styles,I`
+  `,a.styles=[...v.styles,T`
       :host {
         display: block;
         aspect-ratio: var(--_esp-image-aspect-ratio, auto);
@@ -224,6 +225,71 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
       }
 
       
+      :host([banner]) .banner-layers::after {
+        content: var(--_esp-image-scrim-edge-content, none);
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background-color: var(--_esp-image-scrim-edge-color, transparent);
+        background-image: var(--_esp-image-scrim-edge-image, none);
+        background-position: var(--_esp-image-scrim-edge-position, 0 0);
+        background-repeat: repeat;
+        background-size: var(--_esp-image-scrim-edge-size, auto);
+        mask-image: var(--_esp-image-scrim-edge-mask, none);
+        mask-mode: alpha;
+      }
+
+      
+      .frame[data-scrim-edge="flush"][data-scrim="top"] {
+        --_esp-image-scrim-edge-content: "";
+        --_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
+        --_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
+        --_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
+        --_esp-image-scrim-edge-position: left top;
+        --_esp-image-scrim-edge-mask: linear-gradient(
+          to bottom,
+          black 0%,
+          transparent var(--esp-image-scrim-edge-depth, 12%)
+        );
+      }
+      .frame[data-scrim-edge="flush"][data-scrim="bottom"] {
+        --_esp-image-scrim-edge-content: "";
+        --_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
+        --_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
+        --_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
+        --_esp-image-scrim-edge-position: left bottom;
+        --_esp-image-scrim-edge-mask: linear-gradient(
+          to top,
+          black 0%,
+          transparent var(--esp-image-scrim-edge-depth, 12%)
+        );
+      }
+      .frame[data-scrim-edge="flush"][data-scrim="left"] {
+        --_esp-image-scrim-edge-content: "";
+        --_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
+        --_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
+        --_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
+        --_esp-image-scrim-edge-position: left top;
+        --_esp-image-scrim-edge-mask: linear-gradient(
+          to right,
+          black 0%,
+          transparent var(--esp-image-scrim-edge-depth, 12%)
+        );
+      }
+      .frame[data-scrim-edge="flush"][data-scrim="right"] {
+        --_esp-image-scrim-edge-content: "";
+        --_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
+        --_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
+        --_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
+        --_esp-image-scrim-edge-position: right top;
+        --_esp-image-scrim-edge-mask: linear-gradient(
+          to left,
+          black 0%,
+          transparent var(--esp-image-scrim-edge-depth, 12%)
+        );
+      }
+
+      
       .frame[data-banner-scheme="dark"] {
         --_esp-image-scrim-ink: oklch(from var(--esp-color-background, oklch(0.98 0 0)) 0.13 c h);
         --_esp-image-texture-ink: oklch(from var(--esp-color-background, oklch(0.98 0 0)) 0.12 c h);
@@ -439,4 +505,4 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
           transition: none !important;
         }
       }
-    `,A],n([c({attribute:"original-height",type:Number})],a.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],a.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],a.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],a.prototype,"localImage",void 0),n([c({type:String})],a.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],a.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],a.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],a.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],a.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:h(j,"auto"),reflect:!0})],a.prototype,"bannerScheme",void 0),n([c({converter:h(k,"auto"),reflect:!0})],a.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:h(S,"medium"),reflect:!0})],a.prototype,"scrimStrength",void 0),n([c({type:String,reflect:!0})],a.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:h(w,"medium"),reflect:!0})],a.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:h(O,"bottom-start"),reflect:!0})],a.prototype,"contentPosition",void 0),n([c({attribute:"focus",converter:N,reflect:!0})],a.prototype,"focusPoint",void 0),n([c({type:String})],a.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],a.prototype,"compactRatio",void 0),n([g()],a.prototype,"renderedWidth",void 0),n([g()],a.prototype,"compact",void 0),n([g()],a.prototype,"overlayHasContent",void 0),a=p=n([$("esp-image")],a);export{a as EspalierImage,z as parseImageRatio};
+    `,A],n([c({attribute:"original-height",type:Number})],a.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],a.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],a.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],a.prototype,"localImage",void 0),n([c({type:String})],a.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],a.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],a.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],a.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],a.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:m(j,"auto"),reflect:!0})],a.prototype,"bannerScheme",void 0),n([c({converter:m(k,"auto"),reflect:!0})],a.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:m(w,"medium"),reflect:!0})],a.prototype,"scrimStrength",void 0),n([c({attribute:"scrim-edge",converter:m(S,"none"),reflect:!0})],a.prototype,"scrimEdge",void 0),n([c({type:String,reflect:!0})],a.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:m(z,"medium"),reflect:!0})],a.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:m(O,"bottom-start"),reflect:!0})],a.prototype,"contentPosition",void 0),n([c({attribute:"focus",converter:N,reflect:!0})],a.prototype,"focusPoint",void 0),n([c({type:String})],a.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],a.prototype,"compactRatio",void 0),n([u()],a.prototype,"renderedWidth",void 0),n([u()],a.prototype,"compact",void 0),n([u()],a.prototype,"overlayHasContent",void 0),a=p=n([$("esp-image")],a);export{a as EspalierImage,I as parseImageRatio};

package/dist/lightbox/esp-lightbox.js

@@ -73,6 +73,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
         aria-modal="true"
         aria-label="Image lightbox"
         tabindex="-1"
+        data-no-swipe
         @keydown=${this._handleKeyDown}
         @click=${this._handleLightboxClick}
         @touchstart=${this._handleTouchStart}