@taprootio/espalier 2.3.0 → 2.4.0

package/dist/footer/esp-footer.js

@@ -0,0 +1,300 @@
+var i=function(s,e,r,a){var o=arguments.length,n=o<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,r):a,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(s,e,r,a);else for(var l=s.length-1;l>=0;l--)(d=s[l])&&(n=(o<3?d(n):o>3?d(e,r,n):d(e,r))||n);return o>3&&n&&Object.defineProperty(e,r,n),n};import{css as b,html as f,nothing as v}from"lit";import{customElement as y,property as p,state as x}from"lit/decorators.js";import{classMap as _}from"lit/directives/class-map.js";import{renderConfiguredBrand as z}from"../shared/configured-brand.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{slotHasContent as c}from"../shared/slot-content.js";import"./esp-footer-link-group.js";const m=new Set(["auto","1","2","3","4","5","6"]),u={media:!1,brand:!1,groups:!1,aside:!1,bottom:!1},k={fromAttribute(s){return s&&m.has(s)?s:"auto"},toAttribute(s){return m.has(s)?s:"auto"}};let t=class extends g{constructor(){super(...arguments),this.slotContent={...u},this.brandText="",this.brandLogo="",this.brandHref="",this.brandAlt="",this.columns="auto",this.fullBleedContent=!1,this.landmarkLabel="",this.handleSlotChange=e=>{if(!(e.target instanceof HTMLSlotElement))return;const r=this.slotRegion(e.target);if(!r)return;const a=c(e.target);this.slotContent[r]!==a&&(this.slotContent={...this.slotContent,[r]:a})}}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 r={...u};for(const a of this.shadowRoot?.querySelectorAll("slot")??[]){const o=this.slotRegion(a);o&&(r[o]=c(a))}Object.entries(r).some(([a,o])=>this.slotContent[a]!==o)&&(this.slotContent=r)}render(){const{media:e,brand:r,groups:a,aside:o,bottom:n}=this.slotContent,d=r||!!(this.brandLogo||this.brandText),l=d||a||o,h={primary:!0,"has-brand":d,"has-groups":a,"has-aside":o};return f`
+      <footer part="footer" aria-label=${this.landmarkLabel||v}>
+        <div part="background" class="background" aria-hidden="true"></div>
+        <div part="content" class="content-frame">
+          <div class="content">
+            <div part="media" class="media" ?hidden=${!e}>
+              <slot name="media" @slotchange=${this.handleSlotChange}></slot>
+            </div>
+
+            <div part="primary" class=${_(h)} ?hidden=${!l}>
+              <div part="brand" class="brand" ?hidden=${!d}>
+                <slot name="brand" @slotchange=${this.handleSlotChange}
+                  >${z({brandLogo:this.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+                >
+              </div>
+
+              <div part="groups" class="groups" ?hidden=${!a}>
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </div>
+
+              <div part="aside" class="aside" ?hidden=${!o}>
+                <slot name="aside" @slotchange=${this.handleSlotChange}></slot>
+              </div>
+            </div>
+
+            <div part="bottom" class="bottom" ?hidden=${!n}>
+              <slot name="bottom" @slotchange=${this.handleSlotChange}></slot>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `}};t.styles=[...g.styles,b`
+      :host {
+        display: block;
+        min-inline-size: 0;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      footer {
+        position: relative;
+        isolation: isolate;
+        min-inline-size: 0;
+        overflow: hidden;
+        color: var(--esp-footer-color, var(--esp-color-text));
+        background: var(--esp-footer-background, var(--esp-color-layer-2));
+        border-block-start: var(--esp-footer-border, 1px solid var(--esp-color-border));
+      }
+
+      .background {
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+        pointer-events: none;
+        background-image: var(--esp-footer-background-image, none);
+        background-repeat: var(--esp-footer-background-repeat, repeat);
+        background-position: var(--esp-footer-background-position, 0 0);
+        background-size: var(--esp-footer-background-size, auto);
+        opacity: var(--esp-footer-background-image-opacity, 1);
+        mix-blend-mode: var(--esp-footer-background-blend-mode, normal);
+      }
+
+      .content-frame {
+        --_esp-footer-content-surplus: max(
+          0px,
+          calc(100% - var(--esp-footer-content-max-width, 100%))
+        );
+
+        box-sizing: border-box;
+        min-inline-size: 0;
+        padding-inline: calc(var(--_esp-footer-content-surplus) * var(--esp-footer-content-lead, 0))
+          calc(var(--_esp-footer-content-surplus) * (1 - var(--esp-footer-content-lead, 0)));
+      }
+
+      :host([full-bleed-content]) .content-frame {
+        padding-inline: 0;
+      }
+
+      .content {
+        display: grid;
+        container: esp-footer / inline-size;
+        gap: var(--esp-footer-section-gap, var(--esp-size-big));
+        min-inline-size: 0;
+        padding-block: var(--esp-footer-padding-block, var(--esp-size-padding-page))
+          calc(
+            var(--esp-footer-padding-block, var(--esp-size-padding-page)) +
+              env(safe-area-inset-bottom, 0px)
+          );
+        padding-inline: var(--esp-footer-padding-inline, var(--esp-size-padding-page));
+      }
+
+      .media,
+      .primary,
+      .brand,
+      .groups,
+      .aside,
+      .bottom {
+        min-inline-size: 0;
+      }
+
+      .media ::slotted(img),
+      .media ::slotted(picture),
+      .media ::slotted(esp-image) {
+        display: block;
+        inline-size: 100%;
+        max-inline-size: 100%;
+      }
+
+      .primary {
+        display: grid;
+        grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr) minmax(10rem, 1fr);
+        grid-template-areas: "brand groups aside";
+        gap: var(--esp-footer-row-gap, var(--esp-size-big))
+          var(--esp-footer-column-gap, var(--esp-size-padding-page));
+        align-items: start;
+      }
+
+      .primary.has-brand.has-groups:not(.has-aside),
+      .primary.has-groups.has-aside:not(.has-brand) {
+        grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
+      }
+
+      .primary.has-brand.has-groups:not(.has-aside) {
+        grid-template-areas: "brand groups";
+      }
+
+      .primary.has-groups.has-aside:not(.has-brand) {
+        grid-template-areas: "groups aside";
+      }
+
+      .primary.has-brand.has-aside:not(.has-groups) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-areas: "brand aside";
+      }
+
+      .primary.has-brand:not(.has-groups):not(.has-aside) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas: "brand";
+      }
+
+      .primary.has-groups:not(.has-brand):not(.has-aside) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas: "groups";
+      }
+
+      .primary.has-aside:not(.has-brand):not(.has-groups) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas: "aside";
+      }
+
+      .brand {
+        grid-area: brand;
+      }
+
+      .groups {
+        --_esp-footer-column-gap: var(--esp-footer-column-gap, var(--esp-size-padding-page));
+        --_esp-footer-column-min: var(--esp-footer-link-group-min-width, 10rem);
+        --_esp-footer-column-basis: var(--_esp-footer-column-min);
+
+        grid-area: groups;
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(min(100%, var(--_esp-footer-column-basis)), 1fr)
+        );
+        gap: var(--esp-footer-row-gap, var(--esp-size-big)) var(--_esp-footer-column-gap);
+      }
+
+      :host([columns="1"]) .groups {
+        --_esp-footer-column-basis: 100%;
+      }
+
+      :host([columns="2"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(50% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="3"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(33.3333% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="4"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(25% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="5"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(20% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="6"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(16.6667% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      .aside {
+        grid-area: aside;
+      }
+
+      .configured-brand {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--esp-size-small);
+        max-inline-size: 100%;
+        color: var(--esp-footer-heading-color, var(--esp-color-headings));
+        font-family: var(--esp-font-brand, var(--esp-font-headings));
+        font-size: var(--esp-type-medium);
+        font-weight: var(--esp-font-weight-brand, var(--esp-font-weight-headings));
+        line-height: 1.1;
+        overflow-wrap: anywhere;
+        text-decoration: none;
+      }
+
+      a.configured-brand:hover {
+        color: var(--esp-footer-link-hover-color, var(--esp-color-link-hover));
+        text-decoration: underline;
+        text-underline-offset: 0.18em;
+      }
+
+      a.configured-brand:focus-visible {
+        border-radius: var(--esp-size-border-radius);
+        outline: var(--esp-footer-focus-outline, 2px solid var(--esp-color-link));
+        outline-offset: 3px;
+      }
+
+      .brand-logo {
+        display: block;
+        inline-size: auto;
+        max-inline-size: min(var(--esp-footer-brand-logo-max-width, 12rem), 100%);
+        block-size: var(--esp-footer-brand-logo-size, 3rem);
+        object-fit: contain;
+      }
+
+      .brand-text {
+        min-inline-size: 0;
+      }
+
+      @container esp-footer (max-width: 48rem) {
+        .primary,
+        .primary.has-brand.has-groups:not(.has-aside),
+        .primary.has-groups.has-aside:not(.has-brand),
+        .primary.has-brand.has-aside:not(.has-groups),
+        .primary.has-brand:not(.has-groups):not(.has-aside),
+        .primary.has-groups:not(.has-brand):not(.has-aside),
+        .primary.has-aside:not(.has-brand):not(.has-groups) {
+          grid-template-columns: minmax(0, 1fr);
+        }
+
+        .primary.has-brand.has-groups.has-aside {
+          grid-template-areas:
+            "brand"
+            "groups"
+            "aside";
+        }
+
+        .primary.has-brand.has-groups:not(.has-aside) {
+          grid-template-areas:
+            "brand"
+            "groups";
+        }
+
+        .primary.has-groups.has-aside:not(.has-brand) {
+          grid-template-areas:
+            "groups"
+            "aside";
+        }
+
+        .primary.has-brand.has-aside:not(.has-groups) {
+          grid-template-areas:
+            "brand"
+            "aside";
+        }
+
+        .primary.has-brand:not(.has-groups):not(.has-aside) {
+          grid-template-areas: "brand";
+        }
+
+        .primary.has-groups:not(.has-brand):not(.has-aside) {
+          grid-template-areas: "groups";
+        }
+
+        .primary.has-aside:not(.has-brand):not(.has-groups) {
+          grid-template-areas: "aside";
+        }
+      }
+    `],i([x()],t.prototype,"slotContent",void 0),i([p({attribute:"brand-text",type:String})],t.prototype,"brandText",void 0),i([p({attribute:"brand-logo",type:String})],t.prototype,"brandLogo",void 0),i([p({attribute:"brand-href",type:String})],t.prototype,"brandHref",void 0),i([p({attribute:"brand-alt",type:String})],t.prototype,"brandAlt",void 0),i([p({converter:k,reflect:!0})],t.prototype,"columns",void 0),i([p({attribute:"full-bleed-content",type:Boolean,reflect:!0})],t.prototype,"fullBleedContent",void 0),i([p({attribute:"landmark-label",type:String})],t.prototype,"landmarkLabel",void 0),t=i([y("esp-footer")],t);export{t as EspalierFooter};

package/dist/footer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./esp-footer-link-group.js";
+export * from "./esp-footer.js";

package/dist/footer/index.js

@@ -0,0 +1 @@
+export*from"./esp-footer-link-group.js";export*from"./esp-footer.js";

package/dist/header/esp-header.js

@@ -1,14 +1,13 @@
-var n=function(p,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,t,o);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{css as x,html as d,nothing as c}from"lit";import{customElement as D,property as a,state as u}from"lit/decorators.js";import{classMap as M}from"lit/directives/class-map.js";import{styleMap as T}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{EspalierMenu as m}from"./esp-menu.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";const S="(max-width: 36rem)";let r=class extends w{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="standard",this.brandText="",this.brandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.brandAlign="start",this.brandWrap="truncate",this.menuDisplay="auto",this.themeToggle="hidden",this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.fullBleedContent=!1,this.menuContainer=f(),this.menuButton=f(),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.scrollRafId=null,this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>{this.scrollRafId===null&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=null,this.runScrollStateUpdate()}))},this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();e&&(e.scheme=e.scheme==="dark"?"light":"dark")},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)}}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;const e=this.menuContainer.value.clientWidth,t=this.menu.getWidth();t>0&&(this.lastInlineMenuWidth=t);const o=this.lastInlineMenuWidth||t,s=this.getExternalDrawerTarget(),i=this.menuDisplay!=="inline",l=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";this.menuTooLarge=i&&this.menuDisplay==="auto"&&o>e,this.menu.sliding=i&&!s&&this.hasDrawerableContent()&&(this.menuTooLarge||l||this.mobileMenu)}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(),s=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?s:o),l=t>this.lastScrollY,h=e.has("reveal")&&l&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=h,e.has("progress")){const g=document.documentElement,b=Math.max(1,g.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/b)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollRafId!==null&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=null)}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("drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){!this.menuContainer.value||this.observingMenuContainer||(this.resizeObserver.observe(this.menuContainer.value),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(S),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("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof m&&(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.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);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"))}get burger(){return this.menuButton.value??void 0}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const s=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];s instanceof m?(this.menu=s,this.addMenuDrawerListeners(),this.observeMenuChildren()):s&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",s),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout"))&&(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("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(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,super.disconnectedCallback()}renderConfiguredBrand(){if(!this.brandLogo&&!this.brandText)return c;const e=this.brandAlt||(this.brandText?"":"Site logo"),t=d`
-      ${this.brandLogo?d`<img class="brand-logo" src=${this.brandLogo} alt=${e} />`:c}
-      ${this.brandText?d`<span class="brand-text">${this.brandText}</span>`:c}
-    `;return this.brandHref?d`<a class="configured-brand" href=${this.brandHref}>${t}</a>`:d`<span class="configured-brand">${t}</span>`}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,s=this.menuDisplay!=="inline",i=s&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"),l=this.getScrollTokens(),h=l.has("progress"),g={"--_esp-header-brand-color":this.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},b={"menu-open":e,"too-wide":s&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":l.has("compact"),"scroll-elevate":l.has("elevate"),"scroll-transparent":l.has("transparent")||l.has("transparent-to-solid"),"scroll-collapse-topbar":l.has("collapse-topbar")},y=this.scheme==="dark"?"light":"dark";return d`
-      <header class=${M(b)} style=${T(g)}>
+var n=function(c,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(c,e,t,o);else for(var d=c.length-1;d>=0;d--)(l=c[d])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{css as x,html as g,nothing as b}from"lit";import{customElement as D,property as a,state as h}from"lit/decorators.js";import{classMap as M}from"lit/directives/class-map.js";import{styleMap as T}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{EspalierMenu as u}from"./esp-menu.js";import{renderConfiguredBrand as S}from"../shared/configured-brand.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";const C="(max-width: 36rem)";let r=class extends w{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="standard",this.brandText="",this.brandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.brandAlign="start",this.brandWrap="truncate",this.menuDisplay="auto",this.themeToggle="hidden",this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.fullBleedContent=!1,this.menuContainer=f(),this.menuButton=f(),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.scrollRafId=null,this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>{this.scrollRafId===null&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=null,this.runScrollStateUpdate()}))},this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();e&&(e.scheme=e.scheme==="dark"?"light":"dark")},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)}}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;const e=this.menuContainer.value.clientWidth,t=this.menu.getWidth();t>0&&(this.lastInlineMenuWidth=t);const o=this.lastInlineMenuWidth||t,s=this.getExternalDrawerTarget(),i=this.menuDisplay!=="inline",l=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";this.menuTooLarge=i&&this.menuDisplay==="auto"&&o>e,this.menu.sliding=i&&!s&&this.hasDrawerableContent()&&(this.menuTooLarge||l||this.mobileMenu)}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(),s=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?s:o),l=t>this.lastScrollY,d=e.has("reveal")&&l&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=d,e.has("progress")){const p=document.documentElement,m=Math.max(1,p.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/m)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollRafId!==null&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=null)}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("drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){!this.menuContainer.value||this.observingMenuContainer||(this.resizeObserver.observe(this.menuContainer.value),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(C),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("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof u&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof u&&(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.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);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"))}get burger(){return this.menuButton.value??void 0}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const s=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];s instanceof u?(this.menu=s,this.addMenuDrawerListeners(),this.observeMenuChildren()):s&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",s),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout"))&&(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("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof u&&(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,super.disconnectedCallback()}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,s=this.menuDisplay!=="inline",i=s&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"),l=this.getScrollTokens(),d=l.has("progress"),p={"--_esp-header-brand-color":this.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},m={"menu-open":e,"too-wide":s&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":l.has("compact"),"scroll-elevate":l.has("elevate"),"scroll-transparent":l.has("transparent")||l.has("transparent-to-solid"),"scroll-collapse-topbar":l.has("collapse-topbar")},y=this.scheme==="dark"?"light":"dark";return g`
+      <header class=${M(m)} style=${T(p)}>
         <section class="topbar">
           <slot name="topbar"></slot>
         </section>
 
         <section class="brand">
-          <slot name="brand">${this.renderConfiguredBrand()}</slot>
+          <slot name="brand"
+            >${S({brandLogo:this.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+          >
         </section>
 
         <section ${v(this.menuContainer)} class="menu-container">
@@ -17,24 +16,24 @@ var n=function(p,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnP
 
         <section class="buttons">
           <slot name="buttons"></slot>
-          ${this.themeToggle==="visible"?d`<esp-header-button
+          ${this.themeToggle==="visible"?g`<esp-header-button
                 class="theme-toggle"
                 icon=${this.scheme==="dark"?"sun":"moon"}
                 aria-label=${`Switch to ${y} mode`}
                 @clicked=${this.toggleTheme}
-              ></esp-header-button>`:c}
+              ></esp-header-button>`:b}
           <esp-header-button
             class="menu-toggle"
             role="button"
             aria-label=${e?"Close navigation":"Open navigation"}
-            aria-controls=${this.drawerTarget||c}
+            aria-controls=${this.drawerTarget||b}
             aria-expanded=${e?"true":"false"}
             @clicked=${this.handleMenuToggleClicked}
           >
             <esp-burger ${v(this.menuButton)} presentation-only></esp-burger>
           </esp-header-button>
         </section>
-        ${h?d`<div class="scroll-progress" aria-hidden="true"></div>`:c}
+        ${d?g`<div class="scroll-progress" aria-hidden="true"></div>`:b}
       </header>
     `}};r.styles=[...w.styles,x`
       :host {
@@ -431,4 +430,4 @@ var n=function(p,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnP
           transition: none;
         }
       }
-    `],n([u()],r.prototype,"menuOpen",void 0),n([u()],r.prototype,"menuTooLarge",void 0),n([u()],r.prototype,"mobileMenu",void 0),n([u()],r.prototype,"scrolled",void 0),n([u()],r.prototype,"hiddenByScroll",void 0),n([u()],r.prototype,"scrollProgress",void 0),n([a({attribute:"show-burger",type:Boolean})],r.prototype,"showBurger",void 0),n([a({type:String,reflect:!0})],r.prototype,"layout",void 0),n([a({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),n([a({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),n([a({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),n([a({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),n([a({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),n([a({attribute:"brand-align",type:String,reflect:!0})],r.prototype,"brandAlign",void 0),n([a({attribute:"brand-wrap",type:String,reflect:!0})],r.prototype,"brandWrap",void 0),n([a({attribute:"menu-display",type:String,reflect:!0})],r.prototype,"menuDisplay",void 0),n([a({attribute:"theme-toggle",type:String,reflect:!0})],r.prototype,"themeToggle",void 0),n([a({attribute:"scroll-behavior",type:String})],r.prototype,"scrollBehavior",void 0),n([a({attribute:"scroll-threshold",type:Number})],r.prototype,"scrollThreshold",void 0),n([a({attribute:"dock-offset",type:Number})],r.prototype,"dockOffset",void 0),n([a({attribute:"drawer-target",type:String})],r.prototype,"drawerTarget",void 0),n([a({attribute:"full-bleed-content",type:Boolean,reflect:!0})],r.prototype,"fullBleedContent",void 0),r=n([D("esp-header")],r);export{r as EspalierHeader};
+    `],n([h()],r.prototype,"menuOpen",void 0),n([h()],r.prototype,"menuTooLarge",void 0),n([h()],r.prototype,"mobileMenu",void 0),n([h()],r.prototype,"scrolled",void 0),n([h()],r.prototype,"hiddenByScroll",void 0),n([h()],r.prototype,"scrollProgress",void 0),n([a({attribute:"show-burger",type:Boolean})],r.prototype,"showBurger",void 0),n([a({type:String,reflect:!0})],r.prototype,"layout",void 0),n([a({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),n([a({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),n([a({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),n([a({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),n([a({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),n([a({attribute:"brand-align",type:String,reflect:!0})],r.prototype,"brandAlign",void 0),n([a({attribute:"brand-wrap",type:String,reflect:!0})],r.prototype,"brandWrap",void 0),n([a({attribute:"menu-display",type:String,reflect:!0})],r.prototype,"menuDisplay",void 0),n([a({attribute:"theme-toggle",type:String,reflect:!0})],r.prototype,"themeToggle",void 0),n([a({attribute:"scroll-behavior",type:String})],r.prototype,"scrollBehavior",void 0),n([a({attribute:"scroll-threshold",type:Number})],r.prototype,"scrollThreshold",void 0),n([a({attribute:"dock-offset",type:Number})],r.prototype,"dockOffset",void 0),n([a({attribute:"drawer-target",type:String})],r.prototype,"drawerTarget",void 0),n([a({attribute:"full-bleed-content",type:Boolean,reflect:!0})],r.prototype,"fullBleedContent",void 0),r=n([D("esp-header")],r);export{r as EspalierHeader};

package/dist/image/esp-image.js

@@ -1,4 +1,4 @@
-var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(h,e,t,i);else for(var d=h.length-1;d>=0;d--)(n=h[d])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r},c;import{css as u,html as p,nothing as m}from"lit";import{customElement as b,property as l,state as f}from"lit/decorators.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import"./esp-image-option.js";let s=c=class extends g{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.renderedWidth=0,this.resizeObserver=null,this.handleSlotChange=()=>{this.requestUpdate()}}get isPortrait(){return this.originalHeight>this.originalWidth}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}connectedCallback(){super.connectedCallback(),c.ensureProjectionStyles(this.getRootNode()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],i=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);i>0&&i!==this.renderedWidth&&(this.renderedWidth=i)}),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=Array.from(this.querySelectorAll("esp-image-option")),t=new Map;for(const i of e){const o=i.getAttribute("url"),r=Number(i.getAttribute("width"));if(!o||!Number.isFinite(r)||r<=0)continue;const n=i.getAttribute("type")??"",d=t.get(n)??[];d.push({url:o,width:r}),t.set(n,d)}return Array.from(t,([i,o])=>({type:i,srcset:o.sort((r,n)=>r.width-n.width).map(r=>`${r.url} ${r.width}w`).join(", ")})).filter(i=>i.srcset.length>0)}willUpdate(e){super.willUpdate(e),(!this.hasUpdated||e.has("originalWidth")||e.has("originalHeight"))&&(this.originalWidth>0&&this.originalHeight>0?this.style.setProperty("--_esp-image-aspect-ratio",`${this.originalWidth} / ${this.originalHeight}`):this.style.removeProperty("--_esp-image-aspect-ratio"))}updated(e){if(super.updated(e),this.renderedWidth<=0)return;const t=this.findProjected();if(!t)return;const i=this.effectiveSizes();if(t.tagName==="PICTURE")for(const r of t.querySelectorAll("source"))r.setAttribute("sizes",i);const o=t.tagName==="IMG"?t:t.querySelector("img");o?.hasAttribute("srcset")&&o.setAttribute("sizes",i)}render(){if(this.localImage)return p`<img
+var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(h,e,t,i);else for(var c=h.length-1;c>=0;c--)(s=h[c])&&(r=(o<3?s(r):o>3?s(e,t,r):s(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r},d;import{css as m,html as p,nothing as f}from"lit";import{customElement as y,property as l,state as b}from"lit/decorators.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{validImageDimensions as u}from"./image-dimensions.js";import"./esp-image-option.js";let n=d=class extends g{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.renderedWidth=0,this.resizeObserver=null,this.handleSlotChange=()=>{this.requestUpdate()}}get isPortrait(){const e=u(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}connectedCallback(){super.connectedCallback(),d.ensureProjectionStyles(this.getRootNode()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],i=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);i>0&&i!==this.renderedWidth&&(this.renderedWidth=i)}),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=Array.from(this.querySelectorAll("esp-image-option")),t=new Map;for(const i of e){const o=i.getAttribute("url"),r=Number(i.getAttribute("width"));if(!o||!Number.isFinite(r)||r<=0)continue;const s=i.getAttribute("type")??"",c=t.get(s)??[];c.push({url:o,width:r}),t.set(s,c)}return Array.from(t,([i,o])=>({type:i,srcset:o.sort((r,s)=>r.width-s.width).map(r=>`${r.url} ${r.width}w`).join(", ")})).filter(i=>i.srcset.length>0)}willUpdate(e){if(super.willUpdate(e),!this.hasUpdated||e.has("originalWidth")||e.has("originalHeight")){const t=u(this.originalWidth,this.originalHeight);t?this.style.setProperty("--_esp-image-aspect-ratio",`${t.width} / ${t.height}`):this.style.removeProperty("--_esp-image-aspect-ratio")}}updated(e){if(super.updated(e),this.renderedWidth<=0)return;const t=this.findProjected();if(!t)return;const i=this.effectiveSizes();if(t.tagName==="PICTURE")for(const r of t.querySelectorAll("source"))r.setAttribute("sizes",i);const o=t.tagName==="IMG"?t:t.querySelector("img");o?.hasAttribute("srcset")&&o.setAttribute("sizes",i)}render(){if(this.localImage)return p`<img
         src=${this.localImage}
         alt=${this.caption}
         decoding="async"
@@ -7,25 +7,25 @@ var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
         ${t.map(i=>p`<source
               srcset=${i.srcset}
               sizes=${this.effectiveSizes()}
-              type=${i.type||m}
+              type=${i.type||f}
             />`)}
         <img src=${this.imageUrl} alt=${this.caption} decoding="async" loading=${this.loading} />
       </picture>
-      ${e}`}static ensureProjectionStyles(e){const t=e instanceof ShadowRoot?e:document.head;if(c.styledRoots.has(t))return;c.styledRoots.add(t);const i=document.createElement("style");i.textContent=c.projectionStyles,t.appendChild(i)}};s.projectionStyles=`
+      ${e}`}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,i=Array.from(t.querySelectorAll("style[data-esp-image-projection-styles]")),o=i.find(s=>s.textContent===d.projectionStyles);if(o){for(const s of i)s!==o&&s.remove();return}for(const s of i)s.remove();const r=t.ownerDocument.createElement("style");r.dataset.espImageProjectionStyles="",r.textContent=d.projectionStyles,t.appendChild(r)}};n.projectionStyles=`
     esp-image > picture,
     esp-image > img {
       display: block;
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: var(--_esp-image-object-fit, cover);
     }
     esp-image > picture > img {
       display: block;
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: var(--_esp-image-object-fit, cover);
     }
-  `,s.styledRoots=new WeakSet,s.styles=[...g.styles,u`
+  `,n.styles=[...g.styles,m`
       :host {
         display: block;
         aspect-ratio: var(--_esp-image-aspect-ratio, auto);
@@ -46,6 +46,6 @@ var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
         display: block;
         height: 100%;
         width: 100%;
-        object-fit: cover;
+        object-fit: var(--_esp-image-object-fit, cover);
       }
-    `],a([l({attribute:"original-height",type:Number})],s.prototype,"originalHeight",void 0),a([l({attribute:"original-width",type:Number})],s.prototype,"originalWidth",void 0),a([l({attribute:"low-res",type:String})],s.prototype,"imageUrl",void 0),a([l({attribute:"local-image",type:String})],s.prototype,"localImage",void 0),a([l({type:String})],s.prototype,"caption",void 0),a([l({attribute:"sizes",type:String})],s.prototype,"sizes",void 0),a([l({attribute:"loading",type:String})],s.prototype,"loading",void 0),a([f()],s.prototype,"renderedWidth",void 0),s=c=a([b("esp-image")],s);export{s as EspalierImage};
+    `],a([l({attribute:"original-height",type:Number})],n.prototype,"originalHeight",void 0),a([l({attribute:"original-width",type:Number})],n.prototype,"originalWidth",void 0),a([l({attribute:"low-res",type:String})],n.prototype,"imageUrl",void 0),a([l({attribute:"local-image",type:String})],n.prototype,"localImage",void 0),a([l({type:String})],n.prototype,"caption",void 0),a([l({attribute:"sizes",type:String})],n.prototype,"sizes",void 0),a([l({attribute:"loading",type:String})],n.prototype,"loading",void 0),a([b()],n.prototype,"renderedWidth",void 0),n=d=a([y("esp-image")],n);export{n as EspalierImage};

package/dist/image/image-dimensions.js

@@ -0,0 +1 @@
+function i(n,e){return!Number.isFinite(n)||n<=0||!Number.isFinite(e)||e<=0?null:{width:n,height:e}}export{i as validImageDimensions};