@taprootio/espalier 6.2.0 → 6.3.0

package/dist/footer/esp-footer.js

@@ -1,20 +1,20 @@
-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`
+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{paintedSurface as b}from"../shared/surface-layer.js";import{css as v,html as y,nothing as _}from"lit";import{customElement as x,property as n,state as C}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{styleMap as z}from"lit/directives/style-map.js";import{CONFIGURED_BRAND_LOGO_ASPECT_RATIO as B,configuredBrandLogoGeometry as S,renderConfiguredBrand as L,resolveConfiguredBrand as w}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 $,visualOverlayStyles as O}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},T={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=w({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,f={primary:!0,"has-brand":p,"has-groups":r,"has-aside":s};return y`
       <footer
         part="footer"
-        aria-label=${this.landmarkLabel||y}
-        style=${k({"--_esp-footer-brand-color":l.brandColor||null})}
+        aria-label=${this.landmarkLabel||_}
+        style=${z({"--_esp-footer-brand-color":l.brandColor||null})}
       >
-        ${w({className:"background",rootPart:"background"})}
+        ${$({className:"background",rootPart:"background"})}
         <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=${C(b)} ?hidden=${!u}>
+            <div part="primary" class=${k(f)} ?hidden=${!u}>
               <div part="brand" class="brand" ?hidden=${!p}>
                 <slot name="brand" @slotchange=${this.handleSlotChange}
-                  >${S({brandLogo:l.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+                  >${L({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,B,f`
+    `}};o.styles=[...g.styles,b(2),S,v`
       :host {
         display: block;
         min-inline-size: 0;
@@ -44,7 +44,7 @@ var t=function(i,e,a,r){var s=arguments.length,d=s<3?e:r===null?r=Object.getOwnP
       }
 
       footer {
-        --_esp-overlay-base-color: var(--esp-footer-background, var(--esp-color-layer-2));
+        --_esp-overlay-base-color: var(--esp-footer-background, var(--_esp-surface-background));
         --_esp-overlay-image: var(--esp-footer-background-image, none);
         --_esp-overlay-image-opacity: var(--esp-footer-background-image-opacity, 1);
         --_esp-overlay-image-repeat: var(--esp-footer-background-repeat, repeat);
@@ -257,7 +257,7 @@ 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});
+          var(--esp-footer-brand-logo-aspect-ratio, ${B});
         display: block;
         inline-size: auto;
         max-inline-size: min(var(--esp-footer-brand-logo-max-width, 12rem), 100%);
@@ -321,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";
         }
       }
-    `,$],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};
+    `,O],t([C()],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:T,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};

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

@@ -67,6 +67,9 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  * adding [esp-grid-column](/components/grid/grid-column) elements to
  * the default slot.
  *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
+ *
  * @slot - Grid has a default slot that expects `<esp-grid-column>`
  * elements to define the columns in the grid:
  *

package/dist/grid/esp-grid.js

@@ -1,4 +1,4 @@
-var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(C,e,t,i);else for(var n=C.length-1;n>=0;n--)(r=C[n])&&(o=(s<3?r(o):s>3?r(e,t,o):r(e,t))||o);return s>3&&o&&Object.defineProperty(e,t,o),o};import{css as F,html as c}from"lit";import{customElement as T,property as m,state as u}from"lit/decorators.js";import"../input/esp-input.js";import"../button/esp-button.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{accumulatePage as G,RequestVersionGuard as N}from"../shared/cursor-pagination.js";import{ref as y,createRef as w}from"lit/directives/ref.js";import"./esp-grid-column.js";import{classMap as x}from"lit/directives/class-map.js";import{styleMap as k}from"lit/directives/style-map.js";import{leftArrow as _}from"../shared/svgs/left-arrow.js";import{rightArrow as j}from"../shared/svgs/right-arrow.js";import{filter as V}from"../shared/svgs/filter.js";import"../shared/virtualizer/lit-virtualizer.js";import{ESP_EVENTS as I}from"../shared/events.js";const M=I.GRID_LOAD_START,z=I.GRID_LOAD_SUCCESS,O=I.GRID_LOAD_ERROR,B=I.GRID_ITEMS_CHANGED;let d=class extends L{constructor(){super(...arguments),this.columnDefinitionsSlot=w(),this.headerButtonsSlot=w(),this.filteredItems=[],this.sortColumn=void 0,this.itemsBacker=[],this.virtualizerRef=w(),this.gridHeaderRowRef=w(),this.infiniteContainerRef=w(),this.pageLoads=new N,this.nextCursor=null,this.searchTerm="",this.allowNext=!1,this.allowPrevious=!1,this.columnDefinitions=new Array,this.displayedItems=[],this.pageNumber=1,this.footerMessage="",this.allLoadedItems=[],this.hasMoreData=!1,this.isLoadingFirstPage=!1,this.isLoadingPage=!1,this.effectiveGridHeight="",this.pendingHeightRetry=!1,this.wheelHandlerAttached=!1,this.dataField="",this.dataUrl="",this.pageSize=10,this.gridHeight="60vh",this.searchFields=[],this.fetchPageBacker=null,this.isAdjustingHeight=!1,this.heightRetryObserver=null,this.pinnedOffsets=new Map,this.handleGridClick=e=>{const t=e.target,i=t.hasAttribute("grid-event")?t:t.closest("[grid-event]");if(!i)return;const s=i.closest("tr")??i.closest(".grid-row"),o=Number(s?.dataset.rowIndex),r=this.isInfiniteMode?this.allLoadedItems:this.displayedItems,n=Number.isInteger(o)&&o>=0?r[o]:void 0;this.dispatchEvent(new CustomEvent(I.GRID_EVENT,{detail:{grid:this,target:i,event:i.getAttribute("grid-event")??"",data:n??{}},bubbles:!1,composed:!0})),e.stopPropagation()},this.syncHeaderScroll=()=>{const e=this.virtualizerRef.value,t=this.gridHeaderRowRef.value;e&&t&&(t.scrollLeft=e.scrollLeft)},this.handleVirtualizerWheel=e=>{const t=this.infiniteContainerRef.value;if(!t)return;const i=t.getBoundingClientRect(),s=window.innerHeight,o=i.top>=0&&i.bottom<=s,r=i.top<=0&&i.bottom>=s;!o&&!r&&(e.preventDefault(),window.scrollBy(0,e.deltaY))},this.handleSearch=e=>{const t=e.detail.toLowerCase();this.isInfiniteMode?(this.searchDebounceTimer&&clearTimeout(this.searchDebounceTimer),this.searchDebounceTimer=setTimeout(async()=>{this.searchTerm=t,await this.resetAndReload().catch(()=>{})},300)):(this.searchTerm=t,this.filteredItems=this.applySearchTerm(this.items),this.sortColumn?this.sort({emitItemsChanged:!1,pageNumber:1}):this.setPage(1),this.dispatchItemsChanged())}}get items(){return this.itemsBacker}set items(e){this.applyPagedItems(e)}applyPagedItems(e,t={}){const i=t.emitItemsChanged??!0,s=t.pageNumber??this.pageNumber??1;this.itemsBacker=e,this.filteredItems=this.applySearchTerm(this.itemsBacker),this.sortColumn?this.sort({emitItemsChanged:!1,pageNumber:s}):this.setPage(s),i&&this.dispatchItemsChanged()}get fetchPage(){return this.fetchPageBacker}set fetchPage(e){this.fetchPageBacker=e,e&&this.hasUpdated&&this.loadPage(null).then(async()=>{await this.updateComplete,this.measurePinnedOffsets()}).catch(()=>{})}get isInfiniteMode(){return this.fetchPage!==null}get currentDataStateItems(){return this.isInfiniteMode?this.allLoadedItems:this.filteredItems}getCurrentSortField(){return this.sortColumn?this.sortColumn.sortField.length>0?this.sortColumn.sortField:this.sortColumn.fieldName:""}createDataStateDetail(e={}){const t=[...this.currentDataStateItems],i=e.cursor??null,s=e.isFirstPage??(this.isInfiniteMode?i===null:this.pageNumber<=1);return{items:t,itemCount:t.length,isFirstPage:s,cursor:i,nextCursor:this.nextCursor,hasRows:t.length>0,isEmpty:t.length===0,search:this.searchTerm,sortField:this.getCurrentSortField(),sortOrder:this.sortColumn?.sortOrder??""}}dispatchGridDataEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchItemsChanged(e={}){this.dispatchGridDataEvent(B,this.createDataStateDetail(e))}setPage(e){const t=Math.ceil(this.filteredItems.length/this.pageSize);e>t&&(e=t),e<1&&(e=1),this.pageNumber=e;const i=(this.pageNumber-1)*this.pageSize;switch(this.displayedItems=this.filteredItems.slice(i,i+this.pageSize),this.allowPrevious=this.pageNumber>1,this.allowNext=t>this.pageNumber,t){case 0:this.footerMessage="No matching items";break;case 1:this.footerMessage=this.filteredItems.length<this.items.length?"Showing all filtered items":"Showing all items";break;default:this.footerMessage=`Showing page ${this.pageNumber} of ${t} pages`}}async loadPage(e){const t=this.fetchPage;if(!t||e!==null&&this.isLoadingPage)return;const i=this.pageLoads.begin(),s=e===null;let o=!1;this.isLoadingPage=!0,this.isLoadingFirstPage=s,s&&(this.nextCursor=null,this.hasMoreData=!1);const r={cursor:e,limit:this.pageSize,search:this.searchTerm,sortField:this.getCurrentSortField(),sortOrder:this.sortColumn?.sortOrder??""};this.dispatchGridDataEvent(M,this.createDataStateDetail({cursor:e,isFirstPage:s}));try{const n=await t(r);if(!this.pageLoads.isCurrent(i))return;this.allLoadedItems=G(this.allLoadedItems,n.items,e),this.nextCursor=n.nextCursor,this.hasMoreData=n.nextCursor!==null,o=!0,this.dispatchGridDataEvent(z,this.createDataStateDetail({cursor:e,isFirstPage:s})),this.dispatchItemsChanged({cursor:e,isFirstPage:s})}catch(n){throw this.pageLoads.isCurrent(i)&&this.dispatchGridDataEvent(O,{...this.createDataStateDetail({cursor:e,isFirstPage:s}),error:n}),n}finally{if(this.pageLoads.isCurrent(i)){if(this.isLoadingPage=!1,this.isLoadingFirstPage=!1,s&&o){const n=this.virtualizerRef.value;if(n&&n.scrollTop>0)try{n.scrollTo({top:0})}catch{n.scrollTop=0}}await this.adjustInfiniteHeight()}}}async resetAndReload(){await this.loadPage(null)}onRangeChanged(e){this.isLoadingFirstPage||e.last>=this.allLoadedItems.length-5&&this.hasMoreData&&!this.isLoadingPage&&this.loadPage(this.nextCursor).catch(()=>{})}async adjustInfiniteHeight(){if(!this.isAdjustingHeight){this.isAdjustingHeight=!0;try{const e=this.virtualizerRef.value;e&&(e.style.minHeight=""),this.effectiveGridHeight=this.gridHeight,await this.updateComplete;const t=this.infiniteContainerRef.value,i=this.virtualizerRef.value;if(!t||this.hasMoreData)return;const o=this.gridHeaderRowRef.value?.offsetHeight??0;if(!i){const p=t.querySelector(".no-results");let f=0;p?f=o+p.offsetHeight:t.querySelectorAll(":scope > *").forEach(D=>f+=D.offsetHeight),f<t.offsetHeight&&(this.effectiveGridHeight=`${f}px`);return}const r=i.querySelectorAll(".grid-row");let n=0,a=!1;if(r.forEach(p=>{const f=p.offsetHeight;f===0&&(a=!0),n+=f}),r.length===0||a||n===0){this.pendingHeightRetry||(this.pendingHeightRetry=!0,this.observeForHeightRetry(i));return}const l=i.querySelectorAll(".grid-row :defined"),g=[];l.forEach(p=>{"updateComplete"in p&&g.push(p.updateComplete)}),g.length>0&&(await Promise.all(g),n=0,r.forEach(p=>{n+=p.offsetHeight}));const v=n+o,b=t.offsetHeight;v<b&&r.length>=this.allLoadedItems.length&&(i.style.minHeight=`${n}px`,this.effectiveGridHeight=`${v}px`),!this.hasMoreData&&!this.pendingHeightRetry&&(this.pendingHeightRetry=!0,setTimeout(()=>{this.pendingHeightRetry=!1;const p=this.infiniteContainerRef.value,f=this.virtualizerRef.value;if(!p||!f||this.hasMoreData)return;const E=this.gridHeaderRowRef.value?.offsetHeight??0,R=f.querySelectorAll(".grid-row");let P=0,$=!1;if(R.forEach(A=>{const H=A.offsetHeight;H===0&&($=!0),P+=H}),R.length===0||$||P===0)return;const S=P+E;S<p.offsetHeight&&R.length>=this.allLoadedItems.length&&(f.style.minHeight=`${P}px`,this.effectiveGridHeight=`${S}px`)},100))}finally{this.isAdjustingHeight=!1}}}observeForHeightRetry(e){this.heightRetryObserver?.disconnect(),this.heightRetryObserver=new IntersectionObserver(t=>{if(!t.some(r=>r.isIntersecting))return;this.heightRetryObserver?.disconnect(),this.heightRetryObserver=null;let s=0;const o=()=>{this.pendingHeightRetry=!1,this.adjustInfiniteHeight(),this.pendingHeightRetry&&++s<5&&setTimeout(o,100)};requestAnimationFrame(()=>setTimeout(o,50))},{threshold:0}),this.heightRetryObserver.observe(e)}async sortOn(e){this.sortColumn===e?this.sortColumn.sortOrder=this.sortColumn.sortOrder=="asc"?"desc":"asc":(this.sortColumn=e,this.sortColumn.sortOrder="asc"),this.isInfiniteMode?await this.resetAndReload():this.sort()}sort(e={}){if(!this.sortColumn)return;const t=this.getCurrentSortField(),i=this.sortColumn.sortOrder==="asc"?1:-1,s=this.sortColumn.sortType,o=this.filteredItems.map((r,n)=>{const a=r[t]??"",l=s==="number"?Number(a):a.toString().toLowerCase();return{item:r,index:n,sortValue:l}});o.sort((r,n)=>r.sortValue<n.sortValue?-1*i:r.sortValue>n.sortValue?1*i:r.index-n.index),this.filteredItems=o.map(({item:r})=>r),this.setPage(e.pageNumber??1),(e.emitItemsChanged??!0)&&this.dispatchItemsChanged()}delete(e){if(this.isInfiniteMode){const t=this.allLoadedItems.filter(i=>!e(i));if(t.length===this.allLoadedItems.length)return;this.allLoadedItems=t,this.dispatchItemsChanged(),this.adjustInfiniteHeight()}else{const t=this.items.filter(i=>!e(i));if(t.length===this.items.length)return;this.items=t}}addOrReplace(e,t){if(this.isInfiniteMode){const i=this.allLoadedItems.findIndex(e);if(i>=0){const s=[...this.allLoadedItems];s[i]={...s[i],...t},this.allLoadedItems=s}else this.allLoadedItems=[...this.allLoadedItems,t];this.dispatchItemsChanged(),this.adjustInfiniteHeight()}else this.items.find(e)?this.items=this.items.map(s=>e(s)?{...s,...t}:s):this.items=[...this.items,t]}addInOrder(e,t,i){if(this.isInfiniteMode){const a=this.allLoadedItems.findIndex(e),l=[...this.allLoadedItems];if(a>=0)return l[a]={...l[a],...t},this.allLoadedItems=l,this.dispatchItemsChanged(),a;let g=0,v=l.length;for(;g<v;){const b=g+v>>>1;i(l[b],t)<0?g=b+1:v=b}return l.splice(g,0,t),this.allLoadedItems=l,this.dispatchItemsChanged(),this.adjustInfiniteHeight(),g}const s=this.items.findIndex(e),o=[...this.items];if(s>=0)return o[s]={...o[s],...t},this.items=o,s;let r=0,n=o.length;for(;r<n;){const a=r+n>>>1;i(o[a],t)<0?r=a+1:n=a}return o.splice(r,0,t),this.items=o,r}async scrollToIndex(e,t="center"){if(this.isInfiniteMode){await this.updateComplete;const i=this.virtualizerRef.value;if(!i)return;await i.updateComplete,await new Promise(s=>requestAnimationFrame(s)),await i.layoutComplete,i.scrollToIndex(e,t)}else{const i=Math.floor(e/this.pageSize)+1;this.setPage(i)}}clear(){if(this.isInfiniteMode){if(this.allLoadedItems.length===0&&this.nextCursor===null&&!this.hasMoreData)return;this.allLoadedItems=[],this.nextCursor=null,this.hasMoreData=!1,this.dispatchItemsChanged(),this.adjustInfiniteHeight()}else{if(this.items.length===0)return;this.items=[]}}async reload(){this.isInfiniteMode&&await this.resetAndReload()}computePinnedStyles(){return this.pinnedOffsets}measurePinnedOffsets(){this.pinnedOffsets=new Map,this.isInfiniteMode?this.computePinnedOffsetsFromWidths():this.measurePinnedOffsetsFromCells(),this.requestUpdate()}computePinnedOffsetsFromWidths(){const e=this.columnDefinitions.filter(r=>r.pin==="left"),t=this.columnDefinitions.filter(r=>r.pin==="right"),i=[];for(let r=0;r<e.length;r++){const n=e[r],a=i.length===0?"0px":`calc(${i.join(" + ")})`;this.pinnedOffsets.set(n,{position:"sticky",left:a,zIndex:`${e.length-r+1}`}),i.push(n.width||"0px")}const s=[],o=[...t].reverse();for(let r=0;r<o.length;r++){const n=o[r],a=s.length===0?"0px":`calc(${s.join(" + ")})`;this.pinnedOffsets.set(n,{position:"sticky",right:a,zIndex:`${o.length-r+1}`}),s.push(n.width||"0px")}}measurePinnedOffsetsFromCells(){const e=this.shadowRoot?.querySelectorAll("thead th");if(!e)return;const t=this.columnDefinitions.filter(a=>a.pin==="left"),i=this.columnDefinitions.filter(a=>a.pin==="right"),s=new Map;this.columnDefinitions.forEach((a,l)=>{e[l]&&s.set(a,e[l])});let o=0;for(let a=0;a<t.length;a++){const l=t[a];this.pinnedOffsets.set(l,{position:"sticky",left:`${o}px`,zIndex:`${t.length-a+1}`});const g=s.get(l);g&&(o+=g.offsetWidth)}let r=0;const n=[...i].reverse();for(let a=0;a<n.length;a++){const l=n[a];this.pinnedOffsets.set(l,{position:"sticky",right:`${r}px`,zIndex:`${n.length-a+1}`});const g=s.get(l);g&&(r+=g.offsetWidth)}}computeGridTemplateColumns(){return this.columnDefinitions.map(e=>e.width?e.grow?`minmax(${e.width}, 1fr)`:e.width:e.grow?"minmax(0, 1fr)":"auto").join(" ")}get hasGrowableColumns(){return this.columnDefinitions.some(e=>e.grow)}computePinnedColumnFlags(){const e=new Map,t=this.columnDefinitions.filter(r=>r.pin==="left"),i=this.columnDefinitions.filter(r=>r.pin==="right"),s=t[t.length-1],o=i[0];return this.columnDefinitions.forEach((r,n)=>{e.set(r,{beforePinnedRight:this.columnDefinitions[n+1]?.pin==="right",firstPinnedRight:o===r,lastPinnedLeft:s===r})}),e}renderCell(e,t){if(!e.fieldName)return c`<span></span>`;const i=e.textAlign??"left";return c`<span style="text-align: ${i};"> ${t[e.fieldName]} </span>`}attachWheelHandler(){const e=this.virtualizerRef.value;e&&!this.wheelHandlerAttached?(e.addEventListener("wheel",this.handleVirtualizerWheel,{passive:!1}),this.wheelHandlerAttached=!0):!e&&this.wheelHandlerAttached&&(this.wheelHandlerAttached=!1)}applySearchTerm(e){return this.searchTerm.length===0?e:e.filter(t=>{let i;return this.searchFields.length>0?i=this.searchFields.map(s=>t[s]):i=Object.values(t),i.some(s=>String(s).toLowerCase().includes(this.searchTerm))})}async firstUpdated(e){super.firstUpdated(e),this.headerButtonsSlot.value.assignedElements().length===0&&this.headerButtonsSlot.value.remove();for(const i of this.columnDefinitionsSlot.value.assignedElements())i.localName==="esp-grid-column"&&this.columnDefinitions.push(i);const t=this.columnDefinitions.find(i=>i.sortOrder!=="");t&&(this.sortColumn=t),this.isInfiniteMode?await this.loadPage(null).catch(()=>{}):this.dataUrl.length&&await this.loadDataUrl().catch(()=>{}),await this.updateComplete,this.measurePinnedOffsets()}updated(e){super.updated(e),this.isInfiniteMode&&this.attachWheelHandler()}async loadDataUrl(){this.dispatchGridDataEvent(M,this.createDataStateDetail({cursor:null,isFirstPage:!0}));try{const t=await fetch(this.dataUrl).then(i=>i.json());this.applyPagedItems(this.dataField?t[this.dataField]:t,{emitItemsChanged:!1}),this.dispatchGridDataEvent(z,this.createDataStateDetail({cursor:null,isFirstPage:!0})),this.dispatchItemsChanged({cursor:null,isFirstPage:!0})}catch(t){throw this.dispatchGridDataEvent(O,{...this.createDataStateDetail({cursor:null,isFirstPage:!0}),error:t}),t}}disconnectedCallback(){super.disconnectedCallback();const e=this.virtualizerRef.value;e&&e.removeEventListener("wheel",this.handleVirtualizerWheel),this.wheelHandlerAttached=!1,this.heightRetryObserver?.disconnect(),this.heightRetryObserver=null}renderSortIcons(){return c`
+var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(C,e,t,i);else for(var a=C.length-1;a>=0;a--)(r=C[a])&&(o=(s<3?r(o):s>3?r(e,t,o):r(e,t))||o);return s>3&&o&&Object.defineProperty(e,t,o),o};import{paintedSurface as F}from"../shared/surface-layer.js";import{css as T,html as c}from"lit";import{customElement as G,property as m,state as u}from"lit/decorators.js";import"../input/esp-input.js";import"../button/esp-button.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{accumulatePage as _,RequestVersionGuard as N}from"../shared/cursor-pagination.js";import{ref as y,createRef as w}from"lit/directives/ref.js";import"./esp-grid-column.js";import{classMap as x}from"lit/directives/class-map.js";import{styleMap as k}from"lit/directives/style-map.js";import{leftArrow as j}from"../shared/svgs/left-arrow.js";import{rightArrow as V}from"../shared/svgs/right-arrow.js";import{filter as B}from"../shared/svgs/filter.js";import"../shared/virtualizer/lit-virtualizer.js";import{ESP_EVENTS as I}from"../shared/events.js";const M=I.GRID_LOAD_START,z=I.GRID_LOAD_SUCCESS,O=I.GRID_LOAD_ERROR,W=I.GRID_ITEMS_CHANGED;let d=class extends L{constructor(){super(...arguments),this.columnDefinitionsSlot=w(),this.headerButtonsSlot=w(),this.filteredItems=[],this.sortColumn=void 0,this.itemsBacker=[],this.virtualizerRef=w(),this.gridHeaderRowRef=w(),this.infiniteContainerRef=w(),this.pageLoads=new N,this.nextCursor=null,this.searchTerm="",this.allowNext=!1,this.allowPrevious=!1,this.columnDefinitions=new Array,this.displayedItems=[],this.pageNumber=1,this.footerMessage="",this.allLoadedItems=[],this.hasMoreData=!1,this.isLoadingFirstPage=!1,this.isLoadingPage=!1,this.effectiveGridHeight="",this.pendingHeightRetry=!1,this.wheelHandlerAttached=!1,this.dataField="",this.dataUrl="",this.pageSize=10,this.gridHeight="60vh",this.searchFields=[],this.fetchPageBacker=null,this.isAdjustingHeight=!1,this.heightRetryObserver=null,this.pinnedOffsets=new Map,this.handleGridClick=e=>{const t=e.target,i=t.hasAttribute("grid-event")?t:t.closest("[grid-event]");if(!i)return;const s=i.closest("tr")??i.closest(".grid-row"),o=Number(s?.dataset.rowIndex),r=this.isInfiniteMode?this.allLoadedItems:this.displayedItems,a=Number.isInteger(o)&&o>=0?r[o]:void 0;this.dispatchEvent(new CustomEvent(I.GRID_EVENT,{detail:{grid:this,target:i,event:i.getAttribute("grid-event")??"",data:a??{}},bubbles:!1,composed:!0})),e.stopPropagation()},this.syncHeaderScroll=()=>{const e=this.virtualizerRef.value,t=this.gridHeaderRowRef.value;e&&t&&(t.scrollLeft=e.scrollLeft)},this.handleVirtualizerWheel=e=>{const t=this.infiniteContainerRef.value;if(!t)return;const i=t.getBoundingClientRect(),s=window.innerHeight,o=i.top>=0&&i.bottom<=s,r=i.top<=0&&i.bottom>=s;!o&&!r&&(e.preventDefault(),window.scrollBy(0,e.deltaY))},this.handleSearch=e=>{const t=e.detail.toLowerCase();this.isInfiniteMode?(this.searchDebounceTimer&&clearTimeout(this.searchDebounceTimer),this.searchDebounceTimer=setTimeout(async()=>{this.searchTerm=t,await this.resetAndReload().catch(()=>{})},300)):(this.searchTerm=t,this.filteredItems=this.applySearchTerm(this.items),this.sortColumn?this.sort({emitItemsChanged:!1,pageNumber:1}):this.setPage(1),this.dispatchItemsChanged())}}get items(){return this.itemsBacker}set items(e){this.applyPagedItems(e)}applyPagedItems(e,t={}){const i=t.emitItemsChanged??!0,s=t.pageNumber??this.pageNumber??1;this.itemsBacker=e,this.filteredItems=this.applySearchTerm(this.itemsBacker),this.sortColumn?this.sort({emitItemsChanged:!1,pageNumber:s}):this.setPage(s),i&&this.dispatchItemsChanged()}get fetchPage(){return this.fetchPageBacker}set fetchPage(e){this.fetchPageBacker=e,e&&this.hasUpdated&&this.loadPage(null).then(async()=>{await this.updateComplete,this.measurePinnedOffsets()}).catch(()=>{})}get isInfiniteMode(){return this.fetchPage!==null}get currentDataStateItems(){return this.isInfiniteMode?this.allLoadedItems:this.filteredItems}getCurrentSortField(){return this.sortColumn?this.sortColumn.sortField.length>0?this.sortColumn.sortField:this.sortColumn.fieldName:""}createDataStateDetail(e={}){const t=[...this.currentDataStateItems],i=e.cursor??null,s=e.isFirstPage??(this.isInfiniteMode?i===null:this.pageNumber<=1);return{items:t,itemCount:t.length,isFirstPage:s,cursor:i,nextCursor:this.nextCursor,hasRows:t.length>0,isEmpty:t.length===0,search:this.searchTerm,sortField:this.getCurrentSortField(),sortOrder:this.sortColumn?.sortOrder??""}}dispatchGridDataEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchItemsChanged(e={}){this.dispatchGridDataEvent(W,this.createDataStateDetail(e))}setPage(e){const t=Math.ceil(this.filteredItems.length/this.pageSize);e>t&&(e=t),e<1&&(e=1),this.pageNumber=e;const i=(this.pageNumber-1)*this.pageSize;switch(this.displayedItems=this.filteredItems.slice(i,i+this.pageSize),this.allowPrevious=this.pageNumber>1,this.allowNext=t>this.pageNumber,t){case 0:this.footerMessage="No matching items";break;case 1:this.footerMessage=this.filteredItems.length<this.items.length?"Showing all filtered items":"Showing all items";break;default:this.footerMessage=`Showing page ${this.pageNumber} of ${t} pages`}}async loadPage(e){const t=this.fetchPage;if(!t||e!==null&&this.isLoadingPage)return;const i=this.pageLoads.begin(),s=e===null;let o=!1;this.isLoadingPage=!0,this.isLoadingFirstPage=s,s&&(this.nextCursor=null,this.hasMoreData=!1);const r={cursor:e,limit:this.pageSize,search:this.searchTerm,sortField:this.getCurrentSortField(),sortOrder:this.sortColumn?.sortOrder??""};this.dispatchGridDataEvent(M,this.createDataStateDetail({cursor:e,isFirstPage:s}));try{const a=await t(r);if(!this.pageLoads.isCurrent(i))return;this.allLoadedItems=_(this.allLoadedItems,a.items,e),this.nextCursor=a.nextCursor,this.hasMoreData=a.nextCursor!==null,o=!0,this.dispatchGridDataEvent(z,this.createDataStateDetail({cursor:e,isFirstPage:s})),this.dispatchItemsChanged({cursor:e,isFirstPage:s})}catch(a){throw this.pageLoads.isCurrent(i)&&this.dispatchGridDataEvent(O,{...this.createDataStateDetail({cursor:e,isFirstPage:s}),error:a}),a}finally{if(this.pageLoads.isCurrent(i)){if(this.isLoadingPage=!1,this.isLoadingFirstPage=!1,s&&o){const a=this.virtualizerRef.value;if(a&&a.scrollTop>0)try{a.scrollTo({top:0})}catch{a.scrollTop=0}}await this.adjustInfiniteHeight()}}}async resetAndReload(){await this.loadPage(null)}onRangeChanged(e){this.isLoadingFirstPage||e.last>=this.allLoadedItems.length-5&&this.hasMoreData&&!this.isLoadingPage&&this.loadPage(this.nextCursor).catch(()=>{})}async adjustInfiniteHeight(){if(!this.isAdjustingHeight){this.isAdjustingHeight=!0;try{const e=this.virtualizerRef.value;e&&(e.style.minHeight=""),this.effectiveGridHeight=this.gridHeight,await this.updateComplete;const t=this.infiniteContainerRef.value,i=this.virtualizerRef.value;if(!t||this.hasMoreData)return;const o=this.gridHeaderRowRef.value?.offsetHeight??0;if(!i){const p=t.querySelector(".no-results");let f=0;p?f=o+p.offsetHeight:t.querySelectorAll(":scope > *").forEach(D=>f+=D.offsetHeight),f<t.offsetHeight&&(this.effectiveGridHeight=`${f}px`);return}const r=i.querySelectorAll(".grid-row");let a=0,n=!1;if(r.forEach(p=>{const f=p.offsetHeight;f===0&&(n=!0),a+=f}),r.length===0||n||a===0){this.pendingHeightRetry||(this.pendingHeightRetry=!0,this.observeForHeightRetry(i));return}const l=i.querySelectorAll(".grid-row :defined"),g=[];l.forEach(p=>{"updateComplete"in p&&g.push(p.updateComplete)}),g.length>0&&(await Promise.all(g),a=0,r.forEach(p=>{a+=p.offsetHeight}));const v=a+o,b=t.offsetHeight;v<b&&r.length>=this.allLoadedItems.length&&(i.style.minHeight=`${a}px`,this.effectiveGridHeight=`${v}px`),!this.hasMoreData&&!this.pendingHeightRetry&&(this.pendingHeightRetry=!0,setTimeout(()=>{this.pendingHeightRetry=!1;const p=this.infiniteContainerRef.value,f=this.virtualizerRef.value;if(!p||!f||this.hasMoreData)return;const E=this.gridHeaderRowRef.value?.offsetHeight??0,R=f.querySelectorAll(".grid-row");let P=0,S=!1;if(R.forEach(A=>{const H=A.offsetHeight;H===0&&(S=!0),P+=H}),R.length===0||S||P===0)return;const $=P+E;$<p.offsetHeight&&R.length>=this.allLoadedItems.length&&(f.style.minHeight=`${P}px`,this.effectiveGridHeight=`${$}px`)},100))}finally{this.isAdjustingHeight=!1}}}observeForHeightRetry(e){this.heightRetryObserver?.disconnect(),this.heightRetryObserver=new IntersectionObserver(t=>{if(!t.some(r=>r.isIntersecting))return;this.heightRetryObserver?.disconnect(),this.heightRetryObserver=null;let s=0;const o=()=>{this.pendingHeightRetry=!1,this.adjustInfiniteHeight(),this.pendingHeightRetry&&++s<5&&setTimeout(o,100)};requestAnimationFrame(()=>setTimeout(o,50))},{threshold:0}),this.heightRetryObserver.observe(e)}async sortOn(e){this.sortColumn===e?this.sortColumn.sortOrder=this.sortColumn.sortOrder=="asc"?"desc":"asc":(this.sortColumn=e,this.sortColumn.sortOrder="asc"),this.isInfiniteMode?await this.resetAndReload():this.sort()}sort(e={}){if(!this.sortColumn)return;const t=this.getCurrentSortField(),i=this.sortColumn.sortOrder==="asc"?1:-1,s=this.sortColumn.sortType,o=this.filteredItems.map((r,a)=>{const n=r[t]??"",l=s==="number"?Number(n):n.toString().toLowerCase();return{item:r,index:a,sortValue:l}});o.sort((r,a)=>r.sortValue<a.sortValue?-1*i:r.sortValue>a.sortValue?1*i:r.index-a.index),this.filteredItems=o.map(({item:r})=>r),this.setPage(e.pageNumber??1),(e.emitItemsChanged??!0)&&this.dispatchItemsChanged()}delete(e){if(this.isInfiniteMode){const t=this.allLoadedItems.filter(i=>!e(i));if(t.length===this.allLoadedItems.length)return;this.allLoadedItems=t,this.dispatchItemsChanged(),this.adjustInfiniteHeight()}else{const t=this.items.filter(i=>!e(i));if(t.length===this.items.length)return;this.items=t}}addOrReplace(e,t){if(this.isInfiniteMode){const i=this.allLoadedItems.findIndex(e);if(i>=0){const s=[...this.allLoadedItems];s[i]={...s[i],...t},this.allLoadedItems=s}else this.allLoadedItems=[...this.allLoadedItems,t];this.dispatchItemsChanged(),this.adjustInfiniteHeight()}else this.items.find(e)?this.items=this.items.map(s=>e(s)?{...s,...t}:s):this.items=[...this.items,t]}addInOrder(e,t,i){if(this.isInfiniteMode){const n=this.allLoadedItems.findIndex(e),l=[...this.allLoadedItems];if(n>=0)return l[n]={...l[n],...t},this.allLoadedItems=l,this.dispatchItemsChanged(),n;let g=0,v=l.length;for(;g<v;){const b=g+v>>>1;i(l[b],t)<0?g=b+1:v=b}return l.splice(g,0,t),this.allLoadedItems=l,this.dispatchItemsChanged(),this.adjustInfiniteHeight(),g}const s=this.items.findIndex(e),o=[...this.items];if(s>=0)return o[s]={...o[s],...t},this.items=o,s;let r=0,a=o.length;for(;r<a;){const n=r+a>>>1;i(o[n],t)<0?r=n+1:a=n}return o.splice(r,0,t),this.items=o,r}async scrollToIndex(e,t="center"){if(this.isInfiniteMode){await this.updateComplete;const i=this.virtualizerRef.value;if(!i)return;await i.updateComplete,await new Promise(s=>requestAnimationFrame(s)),await i.layoutComplete,i.scrollToIndex(e,t)}else{const i=Math.floor(e/this.pageSize)+1;this.setPage(i)}}clear(){if(this.isInfiniteMode){if(this.allLoadedItems.length===0&&this.nextCursor===null&&!this.hasMoreData)return;this.allLoadedItems=[],this.nextCursor=null,this.hasMoreData=!1,this.dispatchItemsChanged(),this.adjustInfiniteHeight()}else{if(this.items.length===0)return;this.items=[]}}async reload(){this.isInfiniteMode&&await this.resetAndReload()}computePinnedStyles(){return this.pinnedOffsets}measurePinnedOffsets(){this.pinnedOffsets=new Map,this.isInfiniteMode?this.computePinnedOffsetsFromWidths():this.measurePinnedOffsetsFromCells(),this.requestUpdate()}computePinnedOffsetsFromWidths(){const e=this.columnDefinitions.filter(r=>r.pin==="left"),t=this.columnDefinitions.filter(r=>r.pin==="right"),i=[];for(let r=0;r<e.length;r++){const a=e[r],n=i.length===0?"0px":`calc(${i.join(" + ")})`;this.pinnedOffsets.set(a,{position:"sticky",left:n,zIndex:`${e.length-r+1}`}),i.push(a.width||"0px")}const s=[],o=[...t].reverse();for(let r=0;r<o.length;r++){const a=o[r],n=s.length===0?"0px":`calc(${s.join(" + ")})`;this.pinnedOffsets.set(a,{position:"sticky",right:n,zIndex:`${o.length-r+1}`}),s.push(a.width||"0px")}}measurePinnedOffsetsFromCells(){const e=this.shadowRoot?.querySelectorAll("thead th");if(!e)return;const t=this.columnDefinitions.filter(n=>n.pin==="left"),i=this.columnDefinitions.filter(n=>n.pin==="right"),s=new Map;this.columnDefinitions.forEach((n,l)=>{e[l]&&s.set(n,e[l])});let o=0;for(let n=0;n<t.length;n++){const l=t[n];this.pinnedOffsets.set(l,{position:"sticky",left:`${o}px`,zIndex:`${t.length-n+1}`});const g=s.get(l);g&&(o+=g.offsetWidth)}let r=0;const a=[...i].reverse();for(let n=0;n<a.length;n++){const l=a[n];this.pinnedOffsets.set(l,{position:"sticky",right:`${r}px`,zIndex:`${a.length-n+1}`});const g=s.get(l);g&&(r+=g.offsetWidth)}}computeGridTemplateColumns(){return this.columnDefinitions.map(e=>e.width?e.grow?`minmax(${e.width}, 1fr)`:e.width:e.grow?"minmax(0, 1fr)":"auto").join(" ")}get hasGrowableColumns(){return this.columnDefinitions.some(e=>e.grow)}computePinnedColumnFlags(){const e=new Map,t=this.columnDefinitions.filter(r=>r.pin==="left"),i=this.columnDefinitions.filter(r=>r.pin==="right"),s=t[t.length-1],o=i[0];return this.columnDefinitions.forEach((r,a)=>{e.set(r,{beforePinnedRight:this.columnDefinitions[a+1]?.pin==="right",firstPinnedRight:o===r,lastPinnedLeft:s===r})}),e}renderCell(e,t){if(!e.fieldName)return c`<span></span>`;const i=e.textAlign??"left";return c`<span style="text-align: ${i};"> ${t[e.fieldName]} </span>`}attachWheelHandler(){const e=this.virtualizerRef.value;e&&!this.wheelHandlerAttached?(e.addEventListener("wheel",this.handleVirtualizerWheel,{passive:!1}),this.wheelHandlerAttached=!0):!e&&this.wheelHandlerAttached&&(this.wheelHandlerAttached=!1)}applySearchTerm(e){return this.searchTerm.length===0?e:e.filter(t=>{let i;return this.searchFields.length>0?i=this.searchFields.map(s=>t[s]):i=Object.values(t),i.some(s=>String(s).toLowerCase().includes(this.searchTerm))})}async firstUpdated(e){super.firstUpdated(e),this.headerButtonsSlot.value.assignedElements().length===0&&this.headerButtonsSlot.value.remove();for(const i of this.columnDefinitionsSlot.value.assignedElements())i.localName==="esp-grid-column"&&this.columnDefinitions.push(i);const t=this.columnDefinitions.find(i=>i.sortOrder!=="");t&&(this.sortColumn=t),this.isInfiniteMode?await this.loadPage(null).catch(()=>{}):this.dataUrl.length&&await this.loadDataUrl().catch(()=>{}),await this.updateComplete,this.measurePinnedOffsets()}updated(e){super.updated(e),this.isInfiniteMode&&this.attachWheelHandler()}async loadDataUrl(){this.dispatchGridDataEvent(M,this.createDataStateDetail({cursor:null,isFirstPage:!0}));try{const t=await fetch(this.dataUrl).then(i=>i.json());this.applyPagedItems(this.dataField?t[this.dataField]:t,{emitItemsChanged:!1}),this.dispatchGridDataEvent(z,this.createDataStateDetail({cursor:null,isFirstPage:!0})),this.dispatchItemsChanged({cursor:null,isFirstPage:!0})}catch(t){throw this.dispatchGridDataEvent(O,{...this.createDataStateDetail({cursor:null,isFirstPage:!0}),error:t}),t}}disconnectedCallback(){super.disconnectedCallback();const e=this.virtualizerRef.value;e&&e.removeEventListener("wheel",this.handleVirtualizerWheel),this.wheelHandlerAttached=!1,this.heightRetryObserver?.disconnect(),this.heightRetryObserver=null}renderSortIcons(){return c`
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
@@ -38,7 +38,7 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
 
       <div class="header-controls">
         <esp-input fieldName="filter" @esp-value-changed=${this.handleSearch}>
-          ${V}
+          ${B}
         </esp-input>
         <slot name="header-buttons" ${y(this.headerButtonsSlot)}></slot>
       </div>
@@ -81,7 +81,7 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
           .disabled=${!this.allowPrevious}
           @esp-clicked=${i=>{this.setPage(this.pageNumber-1),i.stopPropagation()}}
         >
-          ${_}
+          ${j}
         </esp-button>
         <h4>${this.footerMessage}</h4>
         <esp-button
@@ -89,10 +89,10 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
           .disabled=${!this.allowNext}
           @esp-clicked=${i=>{this.setPage(this.pageNumber+1),i.stopPropagation()}}
         >
-          ${j}
+          ${V}
         </esp-button>
       </div>
-    `}renderInfiniteMode(e,t){const i=this.computeGridTemplateColumns(),s=this.hasGrowableColumns?"":"width: max-content; min-width: 100%;",o=(r,n)=>this.renderVirtualRow(r,n,e,t,i);return c`
+    `}renderInfiniteMode(e,t){const i=this.computeGridTemplateColumns(),s=this.hasGrowableColumns?"":"width: max-content; min-width: 100%;",o=(r,a)=>this.renderVirtualRow(r,a,e,t,i);return c`
       <div
         class="infinite-scroll-container"
         ${y(this.infiniteContainerRef)}
@@ -104,10 +104,10 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
           ${y(this.gridHeaderRowRef)}
           style="${s} grid-template-columns: ${i}"
         >
-          ${this.columnDefinitions.map(r=>{const n=e.get(r)??{};return c`<div
+          ${this.columnDefinitions.map(r=>{const a=e.get(r)??{};return c`<div
               class=${x({"grid-header-cell":!0,...this.headerClasses(r,t)})}
-              style=${k(n)}
-              @click=${a=>{r.sortable&&this.sortOn(r).catch(()=>{}),a.preventDefault()}}
+              style=${k(a)}
+              @click=${n=>{r.sortable&&this.sortOn(r).catch(()=>{}),n.preventDefault()}}
             >
               <div>
                 <span>${r.header}</span>
@@ -132,24 +132,24 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
               </div>`:c``}
         </div>
       </div>
-    `}renderVirtualRow(e,t,i,s,o){if(!e)return c``;const r={"grid-row":!0,"grid-row-odd":t%2===0,"grid-row-even":t%2!==0},n=this.hasGrowableColumns?"":"width: max-content;";return c`<div
+    `}renderVirtualRow(e,t,i,s,o){if(!e)return c``;const r={"grid-row":!0,"grid-row-odd":t%2===0,"grid-row-even":t%2!==0},a=this.hasGrowableColumns?"":"width: max-content;";return c`<div
       class=${x(r)}
-      style="${n} grid-template-columns: ${o}"
+      style="${a} grid-template-columns: ${o}"
       data-row-index=${t}
     >
-      ${this.columnDefinitions.map(a=>{const l=i.get(a)??{};return c`<div
-          class=${x({"grid-cell":!0,...this.cellClasses(a,s)})}
-          style=${k({textAlign:a.textAlign||"left",...l})}
+      ${this.columnDefinitions.map(n=>{const l=i.get(n)??{};return c`<div
+          class=${x({"grid-cell":!0,...this.cellClasses(n,s)})}
+          style=${k({textAlign:n.textAlign||"left",...l})}
         >
-          ${a.template?a.template(e):c`${this.renderCell(a,e)}`}
+          ${n.template?n.template(e):c`${this.renderCell(n,e)}`}
         </div>`})}
-    </div>`}};d.styles=[...L.styles,F`
+    </div>`}};d.styles=[...L.styles,F(1),T`
       :host {
         display: block;
         overflow: hidden;
         border: var(--esp-grid-border-outer, 2px solid var(--esp-color-border));
         border-radius: var(--esp-size-border-radius);
-        background-color: var(--esp-grid-background, var(--esp-color-layer-1));
+        background-color: var(--esp-grid-background, var(--_esp-surface-background));
       }
 
       .header-controls {
@@ -184,6 +184,7 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       
 
       .esp-grid {
+        --_esp-surface-layer: 4;
         color: var(--esp-grid-text-color, var(--esp-color-text));
         width: 100%;
         border-spacing: 0;
@@ -326,14 +327,17 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
           }
 
           tr:nth-child(odd) {
+            --_esp-surface-layer: 1;
             background-color: var(--esp-grid-row-background-odd, var(--esp-color-layer-1));
           }
 
           tr:nth-child(even) {
+            --_esp-surface-layer: 2;
             background-color: var(--esp-grid-row-background-even, var(--esp-color-layer-2));
           }
 
           tr:hover {
+            --_esp-surface-layer: 3;
             background-color: var(--esp-grid-row-hover-background, var(--esp-color-layer-3));
 
             td {
@@ -366,6 +370,7 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       }
 
       .grid-header-row {
+        --_esp-surface-layer: 4;
         display: grid;
         background-color: var(--esp-grid-header-background, var(--esp-color-layer-4));
         border-bottom: var(--esp-grid-border-inner, 2px solid var(--esp-color-border));
@@ -554,14 +559,17 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
 
         
         .grid-row-odd > & {
+          --_esp-surface-layer: 1;
           background-color: var(--esp-grid-row-background-odd, var(--esp-color-layer-1));
         }
 
         .grid-row-even > & {
+          --_esp-surface-layer: 2;
           background-color: var(--esp-grid-row-background-even, var(--esp-color-layer-2));
         }
 
         .grid-row:hover > & {
+          --_esp-surface-layer: 3;
           background-color: var(--esp-grid-row-hover-background, var(--esp-color-layer-3));
           border-color: var(--esp-grid-row-hover-border-color, var(--esp-color-layer-4));
         }
@@ -599,4 +607,4 @@ var h=function(C,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
           box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
         }
       }
-    `],h([u()],d.prototype,"allowNext",void 0),h([u()],d.prototype,"allowPrevious",void 0),h([u()],d.prototype,"columnDefinitions",void 0),h([u()],d.prototype,"displayedItems",void 0),h([u()],d.prototype,"pageNumber",void 0),h([u()],d.prototype,"footerMessage",void 0),h([u()],d.prototype,"allLoadedItems",void 0),h([u()],d.prototype,"hasMoreData",void 0),h([u()],d.prototype,"isLoadingFirstPage",void 0),h([u()],d.prototype,"isLoadingPage",void 0),h([u()],d.prototype,"effectiveGridHeight",void 0),h([m({attribute:"data-field",type:String})],d.prototype,"dataField",void 0),h([m({attribute:"data-url",type:String})],d.prototype,"dataUrl",void 0),h([m({type:Array})],d.prototype,"items",null),h([m({attribute:"page-size",type:Number})],d.prototype,"pageSize",void 0),h([m({attribute:"grid-height",type:String})],d.prototype,"gridHeight",void 0),h([m({attribute:"search-fields",type:Array})],d.prototype,"searchFields",void 0),h([m({attribute:!1})],d.prototype,"fetchPage",null),d=h([T("esp-grid")],d);export{d as EspalierGrid,B as GRID_ITEMS_CHANGED_EVENT,O as GRID_LOAD_ERROR_EVENT,M as GRID_LOAD_START_EVENT,z as GRID_LOAD_SUCCESS_EVENT};
+    `],h([u()],d.prototype,"allowNext",void 0),h([u()],d.prototype,"allowPrevious",void 0),h([u()],d.prototype,"columnDefinitions",void 0),h([u()],d.prototype,"displayedItems",void 0),h([u()],d.prototype,"pageNumber",void 0),h([u()],d.prototype,"footerMessage",void 0),h([u()],d.prototype,"allLoadedItems",void 0),h([u()],d.prototype,"hasMoreData",void 0),h([u()],d.prototype,"isLoadingFirstPage",void 0),h([u()],d.prototype,"isLoadingPage",void 0),h([u()],d.prototype,"effectiveGridHeight",void 0),h([m({attribute:"data-field",type:String})],d.prototype,"dataField",void 0),h([m({attribute:"data-url",type:String})],d.prototype,"dataUrl",void 0),h([m({type:Array})],d.prototype,"items",null),h([m({attribute:"page-size",type:Number})],d.prototype,"pageSize",void 0),h([m({attribute:"grid-height",type:String})],d.prototype,"gridHeight",void 0),h([m({attribute:"search-fields",type:Array})],d.prototype,"searchFields",void 0),h([m({attribute:!1})],d.prototype,"fetchPage",null),d=h([G("esp-grid")],d);export{d as EspalierGrid,W as GRID_ITEMS_CHANGED_EVENT,O as GRID_LOAD_ERROR_EVENT,M as GRID_LOAD_START_EVENT,z as GRID_LOAD_SUCCESS_EVENT};

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

@@ -63,23 +63,14 @@ export declare class EspalierHeaderButton extends LitElement {
      */
     ariaLabel: string | null;
     /**
-     * Id of the region this button controls, forwarded to the inner
-     * `<button>`.
+     * Id of the controlled region, forwarded to the inner native 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.
+     * Assistive technology and role locators target that button, so host state must
+     * be forwarded. A string id reference still cannot resolve a target outside
+     * its shadow root; ESP0222 tracks forwarding a resolved element reference.
      *
-     * 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` has no base string member in the current DOM types. Keep it
+     * without `override`; `noImplicitOverride` will flag a future base declaration.
      */
     ariaControls: string | null;
     /**

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

@@ -16,10 +16,12 @@ export interface EspThemeToggleEventDetail {
     scheme: "light" | "dark";
 }
 /**
- * Used to build the top navigation for a site. An empty header
- * displays a bar. It has three slots for populating header content:
+ * Builds a site's top navigation bar. Use its four slots to add content:
  * `topbar`, `brand`, `menu`, and `buttons`.
  *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
+ *
  * The header works together with several companion components:
  * [`<esp-menu>`](/components/menu/) provides the navigation
  * container, [`<esp-menu-item>`](/components/menu/item/)

package/dist/header/esp-header.js

@@ -1,12 +1,12 @@
-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)}>
+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{paintedSurface as k}from"../shared/surface-layer.js";import{css as A,html as x,nothing as T}from"lit";import{customElement as _,property as l,state as c}from"lit/decorators.js";import{classMap as O}from"lit/directives/class-map.js";import{styleMap as R}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 z}from"../shared/viewport.js";import{CONFIGURED_BRAND_LOGO_ASPECT_RATIO as H,configuredBrandLogoGeometry as P,renderConfiguredBrand as j,resolveConfiguredBrand as M}from"../shared/configured-brand.js";import{EspalierElementBase as L}from"../shared/esp-element-base.js";import{ESP_EVENTS as V}from"../shared/events.js";const N="(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 q=["standard","centered-brand","centered-menu","extended","extended-centered","minimal"],U=["start","center","end"],$=["truncate","wrap","nowrap"],F=["auto","inline","drawer"],W=["hidden","visible"],g=u(q,"standard"),b=u(U,"start"),f=u($,"truncate"),v=u(F,"auto"),w=u(W,"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(V.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(N),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=z();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=${R(y)}>
         <section class="topbar">
           <slot name="topbar"></slot>
         </section>
 
         <section class="brand">
           <slot name="brand"
-            >${P({brandLogo:m.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+            >${j({brandLogo:m.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
           >
         </section>
 
@@ -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,H,k`
+    `}};s.styles=[...L.styles,k(2,"header"),P,A`
       :host {
         --_esp-header-current-height: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
 
@@ -64,7 +64,7 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
         align-items: stretch;
         overflow: visible;
         min-height: var(--_esp-header-current-height);
-        background: var(--esp-header-background, var(--esp-color-layer-2));
+        background: var(--esp-header-background, var(--_esp-surface-background));
         border: var(--esp-header-border, solid var(--esp-color-border));
         border-width: var(--esp-header-border-width, 0 0 1px 0);
         box-shadow: var(--esp-header-shadow, 0 0 2px var(--esp-color-shadow));
@@ -177,7 +177,7 @@ 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});
+            var(--esp-header-brand-logo-aspect-ratio, ${H});
           width: auto;
           height: var(
             --esp-header-brand-logo-size,
@@ -360,6 +360,7 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
         }
 
         &.scroll-transparent:not(.is-scrolled) {
+          --_esp-surface-layer: inherit;
           background: var(--esp-header-transparent-background, transparent);
           border-color: transparent;
           box-shadow: none;
@@ -495,4 +496,4 @@ var a=function(h,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
           transition: none;
         }
       }
-    `],a([c()],s.prototype,"menuOpen",void 0),a([c()],s.prototype,"menuTooLarge",void 0),a([c()],s.prototype,"mobileMenu",void 0),a([c()],s.prototype,"scrolled",void 0),a([c()],s.prototype,"hiddenByScroll",void 0),a([c()],s.prototype,"scrollProgress",void 0),a([l({attribute:"show-burger",type:Boolean})],s.prototype,"showBurger",void 0),a([l({converter:g.converter,reflect:!0})],s.prototype,"layout",void 0),a([l({attribute:"brand-text",type:String})],s.prototype,"brandText",void 0),a([l({attribute:"brand-logo",type:String})],s.prototype,"brandLogo",void 0),a([l({attribute:"light-brand-logo",type:String})],s.prototype,"lightBrandLogo",void 0),a([l({attribute:"dark-brand-logo",type:String})],s.prototype,"darkBrandLogo",void 0),a([l({attribute:"brand-href",type:String})],s.prototype,"brandHref",void 0),a([l({attribute:"brand-alt",type:String})],s.prototype,"brandAlt",void 0),a([l({attribute:"brand-color",type:String})],s.prototype,"brandColor",void 0),a([l({attribute:"light-brand-color",type:String})],s.prototype,"lightBrandColor",void 0),a([l({attribute:"dark-brand-color",type:String})],s.prototype,"darkBrandColor",void 0),a([l({attribute:"brand-align",converter:b.converter,reflect:!0})],s.prototype,"brandAlign",void 0),a([l({attribute:"brand-wrap",converter:f.converter,reflect:!0})],s.prototype,"brandWrap",void 0),a([l({attribute:"menu-display",converter:v.converter,reflect:!0})],s.prototype,"menuDisplay",void 0),a([l({attribute:"theme-toggle",converter:w.converter,reflect:!0})],s.prototype,"themeToggle",void 0),a([l({attribute:"scroll-behavior",type:String})],s.prototype,"scrollBehavior",void 0),a([l({attribute:"scroll-threshold",type:Number})],s.prototype,"scrollThreshold",void 0),a([l({attribute:"dock-offset",type:Number})],s.prototype,"dockOffset",void 0),a([l({attribute:"drawer-target",type:String})],s.prototype,"drawerTarget",void 0),a([l({attribute:!1})],s.prototype,"previewCollapseRequested",void 0),a([l({attribute:"full-bleed-content",type:Boolean,reflect:!0})],s.prototype,"fullBleedContent",void 0),s=a([A("esp-header")],s);export{s as EspalierHeader};
+    `],a([c()],s.prototype,"menuOpen",void 0),a([c()],s.prototype,"menuTooLarge",void 0),a([c()],s.prototype,"mobileMenu",void 0),a([c()],s.prototype,"scrolled",void 0),a([c()],s.prototype,"hiddenByScroll",void 0),a([c()],s.prototype,"scrollProgress",void 0),a([l({attribute:"show-burger",type:Boolean})],s.prototype,"showBurger",void 0),a([l({converter:g.converter,reflect:!0})],s.prototype,"layout",void 0),a([l({attribute:"brand-text",type:String})],s.prototype,"brandText",void 0),a([l({attribute:"brand-logo",type:String})],s.prototype,"brandLogo",void 0),a([l({attribute:"light-brand-logo",type:String})],s.prototype,"lightBrandLogo",void 0),a([l({attribute:"dark-brand-logo",type:String})],s.prototype,"darkBrandLogo",void 0),a([l({attribute:"brand-href",type:String})],s.prototype,"brandHref",void 0),a([l({attribute:"brand-alt",type:String})],s.prototype,"brandAlt",void 0),a([l({attribute:"brand-color",type:String})],s.prototype,"brandColor",void 0),a([l({attribute:"light-brand-color",type:String})],s.prototype,"lightBrandColor",void 0),a([l({attribute:"dark-brand-color",type:String})],s.prototype,"darkBrandColor",void 0),a([l({attribute:"brand-align",converter:b.converter,reflect:!0})],s.prototype,"brandAlign",void 0),a([l({attribute:"brand-wrap",converter:f.converter,reflect:!0})],s.prototype,"brandWrap",void 0),a([l({attribute:"menu-display",converter:v.converter,reflect:!0})],s.prototype,"menuDisplay",void 0),a([l({attribute:"theme-toggle",converter:w.converter,reflect:!0})],s.prototype,"themeToggle",void 0),a([l({attribute:"scroll-behavior",type:String})],s.prototype,"scrollBehavior",void 0),a([l({attribute:"scroll-threshold",type:Number})],s.prototype,"scrollThreshold",void 0),a([l({attribute:"dock-offset",type:Number})],s.prototype,"dockOffset",void 0),a([l({attribute:"drawer-target",type:String})],s.prototype,"drawerTarget",void 0),a([l({attribute:!1})],s.prototype,"previewCollapseRequested",void 0),a([l({attribute:"full-bleed-content",type:Boolean,reflect:!0})],s.prototype,"fullBleedContent",void 0),s=a([_("esp-header")],s);export{s as EspalierHeader};

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

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

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

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

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

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

package/dist/info/esp-info.js

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

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

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