@taprootio/espalier 2.1.2 → 2.2.0

package/dist/page/esp-page.js

@@ -1,5 +1,5 @@
-var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,e,s,r);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(a=(d<3?p(a):d>3?p(e,s,a):p(e,s))||a);return d>3&&a&&Object.defineProperty(e,s,a),a};import{css as g,html as f}from"lit";import{customElement as u,property as i}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{createRef as v,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as h}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as c}from"./bi-directional-sticky-controller.js";import{getEspBus as b}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let t=class extends h{constructor(){super(),this.dialogZone=v(),this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new c(this,".esp-page-left > .sticky-wrapper"),new c(this,".esp-page-right > .sticky-wrapper")}AddDialog(e){this.dialogZone.value?.appendChild(e)}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&b().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",s=!e&&this.headerPosition==="sticky";return f`
-      <div part="wrapper" class="esp-page ${m({"fixed-menus":e,"fixed-header":e,"sticky-header":s})}">
+var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,s):o,t;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(h,e,s,o);else for(var r=h.length-1;r>=0;r--)(t=h[r])&&(a=(n<3?t(a):n>3?t(e,s,a):t(e,s))||a);return n>3&&a&&Object.defineProperty(e,s,a),a};import{css as f,html as m}from"lit";import{customElement as v,property as l}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{createRef as c,ref as u}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as p}from"./bi-directional-sticky-controller.js";import{getEspBus as w}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let i=class extends g{constructor(){super(),this.dialogZone=c(),this.flyoutSlot=c(),this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new p(this,".esp-page-left > .sticky-wrapper"),new p(this,".esp-page-right > .sticky-wrapper"),new p(this,".esp-page-flyout > .sticky-wrapper"),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this)return;const s=t=>{const r=t.mode;return(typeof r=="string"?r:t.getAttribute("mode"))==="overlay"},o=t=>{const r=t.open;return typeof r=="boolean"?r:t.hasAttribute("open")},n=t=>t.anchor!=null,a=(this.flyoutSlot.value?.assignedElements()??[]).filter(t=>t.tagName==="ESP-FLYOUT");this.toggleAttribute("flyout-open",a.some(t=>o(t)&&!s(t))),this.toggleAttribute("flyout-overlay-open",a.some(t=>o(t)&&s(t))),this.toggleAttribute("flyout-anchored",a.some(t=>o(t)&&n(t)))}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&w().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",s=!e&&this.headerPosition==="sticky";return m`
+      <div part="wrapper" class="esp-page ${y({"fixed-menus":e,"fixed-header":e,"sticky-header":s})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
         <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -19,20 +19,40 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
             <slot name="right"></slot>
           </div>
         </aside>
+        <div class="esp-page-flyout">
+          <div class="sticky-wrapper">
+            <slot
+              name="flyout"
+              ${u(this.flyoutSlot)}
+              @slotchange=${()=>this.syncFlyoutState()}
+            ></slot>
+          </div>
+        </div>
         <footer>
           <slot name="footer"></slot>
         </footer>
-        <div id="dialog-drop-zone" ${w(this.dialogZone)}></div>
+        <div id="dialog-drop-zone" ${u(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};t.styles=[...h.styles,g`
+    `}};i.styles=[...g.styles,f`
       :host {
         --_esp-page-resolved-max-width: var(--esp-page-max-width, 1536px);
         
         --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width));
         
-        --_esp-page-gutter-left: 0;
+        --_esp-page-gutter-left: 0fr;
         --_esp-page-gutter-right: 1fr;
+        
+        --_esp-page-flyout-min: 0px;
+        
+        --_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow);
+        
+        --_esp-page-surface-shadow: var(
+          --esp-page-surface-shadow,
+          -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow),
+          var(--_esp-page-surface-edge-shadow)
+        );
+        --_esp-page-surface-border: var(--esp-page-surface-border, none);
         --_esp-page-fixed-header-offset: var(
           --esp-page-fixed-header-offset,
           var(--esp-header-height, calc(4.5 * var(--esp-size-small)))
@@ -52,15 +72,42 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
 
       :host([align="end"]) {
         --_esp-page-gutter-left: 1fr;
-        --_esp-page-gutter-right: 0;
+        --_esp-page-gutter-right: 0fr;
       }
 
       
       :host([kind="full"]) {
         --_esp-page-resolved-max-width: var(--esp-page-max-width, none);
         --_esp-page-main-track: 1fr;
-        --_esp-page-gutter-left: 0;
-        --_esp-page-gutter-right: 0;
+        --_esp-page-gutter-left: 0fr;
+        --_esp-page-gutter-right: 0fr;
+      }
+
+      
+      :host([flyout-open]) {
+        --_esp-page-flyout-min: var(--esp-page-flyout-width, 20rem);
+      }
+
+      
+      @media (max-width: 50em) {
+        :host([flyout-open]) {
+          --_esp-page-flyout-min: 0px;
+        }
+      }
+
+      
+      :host([flyout-overlay-open]) .esp-page > div.esp-page-flyout {
+        z-index: var(--esp-flyout-z-index, 3000);
+      }
+
+      
+      :host([flyout-anchored]) .esp-page > div.esp-page-flyout > .sticky-wrapper {
+        position: static;
+      }
+
+      
+      slot[name="flyout"]::slotted(esp-flyout[match-surface]) {
+        --esp-flyout-shadow: var(--_esp-page-surface-edge-shadow);
       }
 
       
@@ -116,8 +163,13 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           [canvas-left-end surface-start left-start] min-content
           [left-end main-start] var(--_esp-page-main-track)
           [main-end right-start] min-content
-          [right-end surface-end canvas-right-start] var(--_esp-page-gutter-right)
-          [canvas-right-end full-end];
+          [right-end surface-end canvas-right-start flyout-start] minmax(
+            var(--_esp-page-flyout-min),
+            var(--_esp-page-gutter-right)
+          )
+          [flyout-end canvas-right-end full-end];
+        
+        transition: grid-template-columns 0.25s ease;
         grid-template-rows:
           [top-start] min-content
           [top-end content-start] 1fr
@@ -173,6 +225,8 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           position: relative;
           overflow: hidden;
           
+          background: var(--esp-page-main-background, transparent);
+          
           contain: inline-size;
         }
 
@@ -181,6 +235,21 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
         }
 
         
+        > div.esp-page-flyout {
+          
+          grid-column: flyout;
+          justify-self: start;
+          grid-row: content;
+          z-index: 5;
+          position: relative;
+
+          
+          @media (max-width: 50em) {
+            z-index: var(--esp-flyout-z-index, 3000);
+          }
+        }
+
+        
         > .esp-page-canvas {
           
           grid-row: top-start / footer-end;
@@ -204,6 +273,7 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
         }
 
         > .esp-page-canvas--right {
+          
           grid-column: canvas-right;
         }
 
@@ -214,12 +284,8 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           grid-row: top-start / footer-end;
           z-index: 2;
           pointer-events: none;
-          box-shadow: var(
-            --esp-page-surface-shadow,
-            -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow),
-            0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow)
-          );
-          border-inline: var(--esp-page-surface-border, none);
+          box-shadow: var(--_esp-page-surface-shadow);
+          border-inline: var(--_esp-page-surface-border);
         }
 
         
@@ -270,6 +336,7 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           > div.esp-page-main,
           > aside.esp-page-left,
           > aside.esp-page-right,
+          > div.esp-page-flyout,
           > .esp-page-surface,
           > .esp-page-canvas {
             margin-top: var(--_esp-page-fixed-header-offset);
@@ -299,4 +366,10 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
       .esp-page:has(esp-dialog[is-open="true"]) {
         overflow: hidden;
       }
-    `],o([i({reflect:!0})],t.prototype,"kind",void 0),o([i({reflect:!0})],t.prototype,"align",void 0),o([i({type:Boolean,reflect:!0})],t.prototype,"contained",void 0),o([i({attribute:"header-position",reflect:!0})],t.prototype,"headerPosition",void 0),o([i({attribute:"fixed-menus",type:Boolean,reflect:!0})],t.prototype,"fixedMenus",void 0),t=o([u("esp-page")],t);export{t as EspalierPage};
+
+      @media (prefers-reduced-motion: reduce) {
+        .esp-page {
+          transition: none;
+        }
+      }
+    `],d([l({reflect:!0})],i.prototype,"kind",void 0),d([l({reflect:!0})],i.prototype,"align",void 0),d([l({type:Boolean,reflect:!0})],i.prototype,"contained",void 0),d([l({attribute:"header-position",reflect:!0})],i.prototype,"headerPosition",void 0),d([l({attribute:"fixed-menus",type:Boolean,reflect:!0})],i.prototype,"fixedMenus",void 0),i=d([v("esp-page")],i);export{i as EspalierPage};

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

@@ -248,7 +248,7 @@ export declare class EspalierPopover extends LitElement {
     protected updated(changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/popover/esp-popover.js

@@ -1,4 +1,4 @@
-var n=function(u,t,e,r){var o=arguments.length,i=o<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,e):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,r);else for(var s=u.length-1;s>=0;s--)(l=u[s])&&(i=(o<3?l(i):o>3?l(t,e,i):l(t,e))||i);return o>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as m,css as y,html as b}from"lit";import{customElement as T,property as c,state as w}from"lit/decorators.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{PopoverController as D}from"../shared/popover-controller.js";function g(u){const t=[];let e=u;for(;e&&e.closest;){const r=e["linked-popover"];if(r){e=r;continue}const o=e.closest("esp-popover");if(o)t.push(o),e=o.parentElement||o.getRootNode()?.host;else{const i=e.getRootNode();i instanceof ShadowRoot?e=i.host:e=void 0}}return t}let P=0,h=class extends m{constructor(){super(...arguments),this.popoverOpen=!1,this.thePopover=f(),this.popoverSlot=f(),this.targetSlot=f(),this.attachTo=null,this.showDelayTimer=null,this.hideDelayTimer=null,this.isHovered=!1,this.isFocused=!1,this.popoverId=`esp-popover-${++P}`,this.popoverCtrl=new D({host:this,closeStrategy:"skip-list",isOpen:()=>this.popoverOpen,onShouldClose:()=>this.closePopover(),onPositionUpdate:()=>this.positionPopover()}),this.attach="below",this.align="start",this.offset="",this.offsetX=0,this.offsetY=0,this.trigger="click",this.showDelay=0,this.hideDelay=0,this.closePopover=()=>{this.cancelDelays();const t=this.thePopover.value;if(t){try{t.hidePopover()}catch{}this.popoverCtrl.stopTracking(),this.popoverOpen=!1,this.dispatchEvent(new CustomEvent("popover-closed",{bubbles:!0,composed:!0}))}},this.openPopover=()=>{this.scheduleOpen()},this.updatePosition=()=>{this.popoverOpen&&this.positionPopover()},this.toggleOpen=t=>{if(this.trigger==="click")if(t.stopPropagation(),this.popoverOpen)this.closePopover();else{const e=g(this);this.popoverCtrl.publishCloseExcept(e),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}}}cancelDelays(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null)}scheduleOpen(){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null),!this.popoverOpen&&(this.showDelay>0&&this.showDelayTimer===null?this.showDelayTimer=setTimeout(()=>{this.showDelayTimer=null,this.doOpen()},this.showDelay):this.showDelay<=0&&this.doOpen())}scheduleClose(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.popoverOpen&&(this.hideDelay>0&&this.hideDelayTimer===null?this.hideDelayTimer=setTimeout(()=>{this.hideDelayTimer=null,this.closePopover()},this.hideDelay):this.hideDelay<=0&&this.closePopover())}doOpen(){if(this.popoverOpen)return;const t=g(this);this.popoverCtrl.publishCloseExcept(t),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}positionPopover(){const t=this.thePopover.value;if(!t||!this.attachTo)return;const e=this.attachTo.getBoundingClientRect(),r=this.offset.length?this.offset:"0px";t.matches(":popover-open")||t.showPopover();const o=t.getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight,l=window.innerWidth||document.documentElement.clientWidth;let s=this.attach;s==="above"&&e.top<o.height&&i-e.bottom>e.top?s="below":s==="below"&&i-e.bottom<o.height&&e.top>i-e.bottom?s="above":s==="left"&&e.left<o.width&&l-e.right>e.left?s="right":s==="right"&&l-e.right<o.width&&e.left>l-e.right&&(s="left");let p="0px",a="0px";switch(s){case"above":p=`calc(${e.top-o.height}px - ${r})`;break;case"below":p=`calc(${e.bottom}px + ${r})`;break;case"left":a=`calc(${e.left-o.width}px - ${r})`;break;case"right":a=`calc(${e.right}px + ${r})`;break}if(s==="above"||s==="below")switch(this.align){case"start":a=`${e.left}px`;break;case"center":a=`${e.left+e.width/2-o.width/2}px`;break;case"end":a=`${e.right-o.width}px`;break}else switch(this.align){case"start":p=`${e.top}px`;break;case"center":p=`${e.top+e.height/2-o.height/2}px`;break;case"end":p=`${e.bottom-o.height}px`;break}this.offsetX!==0&&(a=`calc(${a} + ${this.offsetX}px)`),this.offsetY!==0&&(p=`calc(${p} + ${this.offsetY}px)`),t.style.top=p,t.style.left=a,requestAnimationFrame(()=>{const d=t.getBoundingClientRect();d.right>l&&(t.style.left=`${l-d.width}px`),d.left<0&&(t.style.left="0px")})}handleHoverEnter(){this.isHovered=!0,this.scheduleOpen()}handleHoverLeave(){if(this.isHovered=!1,this.trigger==="focus-hover"&&this.isFocused){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}handleFocusIn(){this.isFocused=!0,this.scheduleOpen()}handleFocusOut(){if(this.isFocused=!1,this.trigger==="focus-hover"&&this.isHovered){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}disconnectedCallback(){super.disconnectedCallback(),this.cancelDelays()}updated(t){t.has("trigger")&&(this.isHovered=!1,this.isFocused=!1,this.cancelDelays())}firstUpdated(t){let e=this.targetSlot.value.assignedElements()[0];for(;e instanceof HTMLSlotElement;)e=e.assignedElements()[0];this.attachTo=e;const r=this.thePopover.value;r&&(r.setAttribute("popover","manual"),r.id=this.popoverId);const o=this.popoverSlot.value?.assignedElements();if(o?.length){let i=o[0];for(;i instanceof HTMLSlotElement;)i=i.assignedElements()[0];i&&(i["linked-popover"]=this,i.addEventListener("click",l=>{l.stopPropagation();const s=[this,...g(this)];this.popoverCtrl.publishCloseExcept(s)}))}}render(){return b`
+var n=function(u,t,e,r){var o=arguments.length,i=o<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,e):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,r);else for(var s=u.length-1;s>=0;s--)(l=u[s])&&(i=(o<3?l(i):o>3?l(t,e,i):l(t,e))||i);return o>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as m,css as y,html as b}from"lit";import{customElement as T,property as c,state as w}from"lit/decorators.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{PopoverController as D}from"../shared/popover-controller.js";import{alignAttributeTextInheritance as P}from"../shared/style-fragments.js";function g(u){const t=[];let e=u;for(;e&&e.closest;){const r=e["linked-popover"];if(r){e=r;continue}const o=e.closest("esp-popover");if(o)t.push(o),e=o.parentElement||o.getRootNode()?.host;else{const i=e.getRootNode();i instanceof ShadowRoot?e=i.host:e=void 0}}return t}let E=0,h=class extends m{constructor(){super(...arguments),this.popoverOpen=!1,this.thePopover=f(),this.popoverSlot=f(),this.targetSlot=f(),this.attachTo=null,this.showDelayTimer=null,this.hideDelayTimer=null,this.isHovered=!1,this.isFocused=!1,this.popoverId=`esp-popover-${++E}`,this.popoverCtrl=new D({host:this,closeStrategy:"skip-list",isOpen:()=>this.popoverOpen,onShouldClose:()=>this.closePopover(),onPositionUpdate:()=>this.positionPopover()}),this.attach="below",this.align="start",this.offset="",this.offsetX=0,this.offsetY=0,this.trigger="click",this.showDelay=0,this.hideDelay=0,this.closePopover=()=>{this.cancelDelays();const t=this.thePopover.value;if(t){try{t.hidePopover()}catch{}this.popoverCtrl.stopTracking(),this.popoverOpen=!1,this.dispatchEvent(new CustomEvent("popover-closed",{bubbles:!0,composed:!0}))}},this.openPopover=()=>{this.scheduleOpen()},this.updatePosition=()=>{this.popoverOpen&&this.positionPopover()},this.toggleOpen=t=>{if(this.trigger==="click")if(t.stopPropagation(),this.popoverOpen)this.closePopover();else{const e=g(this);this.popoverCtrl.publishCloseExcept(e),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}}}cancelDelays(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null)}scheduleOpen(){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null),!this.popoverOpen&&(this.showDelay>0&&this.showDelayTimer===null?this.showDelayTimer=setTimeout(()=>{this.showDelayTimer=null,this.doOpen()},this.showDelay):this.showDelay<=0&&this.doOpen())}scheduleClose(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.popoverOpen&&(this.hideDelay>0&&this.hideDelayTimer===null?this.hideDelayTimer=setTimeout(()=>{this.hideDelayTimer=null,this.closePopover()},this.hideDelay):this.hideDelay<=0&&this.closePopover())}doOpen(){if(this.popoverOpen)return;const t=g(this);this.popoverCtrl.publishCloseExcept(t),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}positionPopover(){const t=this.thePopover.value;if(!t||!this.attachTo)return;const e=this.attachTo.getBoundingClientRect(),r=this.offset.length?this.offset:"0px";t.matches(":popover-open")||t.showPopover();const o=t.getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight,l=window.innerWidth||document.documentElement.clientWidth;let s=this.attach;s==="above"&&e.top<o.height&&i-e.bottom>e.top?s="below":s==="below"&&i-e.bottom<o.height&&e.top>i-e.bottom?s="above":s==="left"&&e.left<o.width&&l-e.right>e.left?s="right":s==="right"&&l-e.right<o.width&&e.left>l-e.right&&(s="left");let p="0px",a="0px";switch(s){case"above":p=`calc(${e.top-o.height}px - ${r})`;break;case"below":p=`calc(${e.bottom}px + ${r})`;break;case"left":a=`calc(${e.left-o.width}px - ${r})`;break;case"right":a=`calc(${e.right}px + ${r})`;break}if(s==="above"||s==="below")switch(this.align){case"start":a=`${e.left}px`;break;case"center":a=`${e.left+e.width/2-o.width/2}px`;break;case"end":a=`${e.right-o.width}px`;break}else switch(this.align){case"start":p=`${e.top}px`;break;case"center":p=`${e.top+e.height/2-o.height/2}px`;break;case"end":p=`${e.bottom-o.height}px`;break}this.offsetX!==0&&(a=`calc(${a} + ${this.offsetX}px)`),this.offsetY!==0&&(p=`calc(${p} + ${this.offsetY}px)`),t.style.top=p,t.style.left=a,requestAnimationFrame(()=>{const d=t.getBoundingClientRect();d.right>l&&(t.style.left=`${l-d.width}px`),d.left<0&&(t.style.left="0px")})}handleHoverEnter(){this.isHovered=!0,this.scheduleOpen()}handleHoverLeave(){if(this.isHovered=!1,this.trigger==="focus-hover"&&this.isFocused){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}handleFocusIn(){this.isFocused=!0,this.scheduleOpen()}handleFocusOut(){if(this.isFocused=!1,this.trigger==="focus-hover"&&this.isHovered){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}disconnectedCallback(){super.disconnectedCallback(),this.cancelDelays()}updated(t){t.has("trigger")&&(this.isHovered=!1,this.isFocused=!1,this.cancelDelays())}firstUpdated(t){let e=this.targetSlot.value.assignedElements()[0];for(;e instanceof HTMLSlotElement;)e=e.assignedElements()[0];this.attachTo=e;const r=this.thePopover.value;r&&(r.setAttribute("popover","manual"),r.id=this.popoverId);const o=this.popoverSlot.value?.assignedElements();if(o?.length){let i=o[0];for(;i instanceof HTMLSlotElement;)i=i.assignedElements()[0];i&&(i["linked-popover"]=this,i.addEventListener("click",l=>{l.stopPropagation();const s=[this,...g(this)];this.popoverCtrl.publishCloseExcept(s)}))}}render(){return b`
       <slot
         ${v(this.targetSlot)}
         @click=${t=>{this.trigger==="click"&&this.toggleOpen(t)}}
@@ -16,21 +16,21 @@ var n=function(u,t,e,r){var o=arguments.length,i=o<3?t:r===null?r=Object.getOwnP
       >
         <slot name="popover" ${v(this.popoverSlot)}></slot>
       </div>
-    `}};h.styles=y`
-    :host {
-      position: relative;
-      display: flex;
-      place-content: center;
-    }
+    `}};h.styles=[P,y`
+      :host {
+        position: relative;
+        display: flex;
+        place-content: center;
+      }
 
-    div.popover-content {
-      position: fixed;
-      inset: unset;
-      margin: 0;
-      padding: 0;
-      border: none;
-      background: none;
-      overflow: visible;
-      color: var(--esp-color-text);
-    }
-  `,n([w()],h.prototype,"popoverOpen",void 0),n([c({attribute:"attach",type:String})],h.prototype,"attach",void 0),n([c({attribute:"align",type:String})],h.prototype,"align",void 0),n([c({attribute:"offset",type:String})],h.prototype,"offset",void 0),n([c({attribute:"offset-x",type:Number})],h.prototype,"offsetX",void 0),n([c({attribute:"offset-y",type:Number})],h.prototype,"offsetY",void 0),n([c({attribute:"trigger",type:String})],h.prototype,"trigger",void 0),n([c({attribute:"show-delay",type:Number})],h.prototype,"showDelay",void 0),n([c({attribute:"hide-delay",type:Number})],h.prototype,"hideDelay",void 0),h=n([T("esp-popover")],h);export{h as EspalierPopover};
+      div.popover-content {
+        position: fixed;
+        inset: unset;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: none;
+        overflow: visible;
+        color: var(--esp-color-text);
+      }
+    `],n([w()],h.prototype,"popoverOpen",void 0),n([c({attribute:"attach",type:String})],h.prototype,"attach",void 0),n([c({attribute:"align",type:String})],h.prototype,"align",void 0),n([c({attribute:"offset",type:String})],h.prototype,"offset",void 0),n([c({attribute:"offset-x",type:Number})],h.prototype,"offsetX",void 0),n([c({attribute:"offset-y",type:Number})],h.prototype,"offsetY",void 0),n([c({attribute:"trigger",type:String})],h.prototype,"trigger",void 0),n([c({attribute:"show-delay",type:Number})],h.prototype,"showDelay",void 0),n([c({attribute:"hide-delay",type:Number})],h.prototype,"hideDelay",void 0),h=n([T("esp-popover")],h);export{h as EspalierPopover};

package/dist/shared/bus-events.d.ts

@@ -24,6 +24,7 @@
  */
 import { EspBus } from "./esp-bus.js";
 import type { ToastConfig } from "./toast-events.js";
+import type { FlyoutConfig } from "./flyout-events.js";
 /**
  * Contract for elements that provide a seed color to their subtree.
  * Implemented by `EspalierRoot` (the global provider) and
@@ -91,6 +92,22 @@ export interface SchemeEvents {
 export interface ToastEvents {
     "show-toast": ToastConfig;
 }
+/**
+ * Flyout surface events.
+ *
+ * Published by the `showFlyout()` / `closeFlyout()` helpers and
+ * subscribed to by `<esp-flyout>`. This is how components that
+ * cannot know where the flyout lives (form items, help buttons,
+ * dialog content) request the page's flyout surface.
+ *
+ * @docUrl /api/flyout-events
+ * @menuGroup Bus Events
+ * @menuLabel FlyoutEvents
+ */
+export interface FlyoutEvents {
+    "show-flyout": FlyoutConfig;
+    "close-flyout": Record<string, never>;
+}
 /**
  * Cross-popover coordination events.
  *
@@ -157,7 +174,7 @@ export interface PageEventMap {
  * @menuGroup Bus Events
  * @menuLabel EspBusEventMap
  */
-export type EspBusEventMap = SchemeEvents & ToastEvents & PopoverEvents & SizeEvents & PageEventMap;
+export type EspBusEventMap = SchemeEvents & ToastEvents & FlyoutEvents & PopoverEvents & SizeEvents & PageEventMap;
 /**
  * Typed accessor for the singleton bus.
  *

package/dist/shared/esp-element-base.js

@@ -1,4 +1,4 @@
-var p=function(g,e,t,o){var r=arguments.length,s=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(g,e,t,o);else for(var c=g.length-1;c>=0;c--)(a=g[c])&&(s=(r<3?a(s):r>3?a(e,t,s):a(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{css as x,LitElement as E}from"lit";import{property as m,state as I}from"lit/decorators.js";import{getEspBus as V}from"./bus-events.js";import{traverseToClosest as S}from"./utilities.js";import{parseOklch as O,serializeOklch as y,gamutMapToSRGB as A,deriveSemantic as L,deriveSemanticWithContrast as U}from"./color-engine.js";import{computeVariants as T}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as R,semanticToCSS as P}from"./theme.js";import{focusRing as _}from"./style-fragments.js";class n extends E{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.applyVariantTokens()},this.handleIconSpriteUrlChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const o=()=>{const r=e();return r?(r.focus(t),!0):!1};o()||this.updateComplete.then(()=>{o()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback(),this.subscribeToRootEvents(),this.hasUpdated&&this.syncRootFromDom(!1)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=S(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const o=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,(o||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),o&&this.requestUpdate(),t}subscribeToRootEvents(){if(this.rootEventSubscriptionsActive)return;const e=V();e.subscribe("seed-color-changed",this.handleSeedColorChanged),e.subscribe("scheme-changed",this.handleSchemeChanged),e.subscribe("theme-changed",this.handleThemeChanged),e.subscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!0}unsubscribeFromRootEvents(){if(!this.rootEventSubscriptionsActive)return;const e=V();e.unsubscribe("seed-color-changed",this.handleSeedColorChanged),e.unsubscribe("scheme-changed",this.handleSchemeChanged),e.unsubscribe("theme-changed",this.handleThemeChanged),e.unsubscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!1}traverseToClosest(e){return S(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,o=O(t.seedColor);if(!o)return;const s=T(o,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",y(A(s)));const a=T(s,t),c=n.statusVariantSources.has(e),{textContrast:k}=n,f={};for(const i of R){if(k[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),b=a[d],v=t.lightness[l.lightness],u=L(b,v,h.min,h.max);f[i]=u,this.setVariantTokenProperty(P(i),y(u))}for(const i of R){const l=k[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],b=this.effectiveVariantTokenSource(i,h.source,c),v=a[b],u=t.lightness[h.lightness],w=f[l.bg],C=U(v,u,d.min,d.max,w,l.targetLc);f[i]=C,this.setVariantTokenProperty(P(i),y(C))}}effectiveVariantTokenSource(e,t,o){return o&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const o=this.variantTokenOriginalValues.get(e);if(o){const r=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(r!==o.generatedValue||s!==o.generatedPriority)&&(o.originalValue=r.length?r:null,o.originalPriority=s),o.generatedValue=t,o.generatedPriority=""}else{const r=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:r.length?r:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const o=this.style.getPropertyValue(e),r=this.style.getPropertyPriority(e);(o!==t.generatedValue||r!==t.generatedPriority)&&(t.originalValue=o.length?o:null,t.originalPriority=r),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[_(".esp-field:focus-within","--esp-field-focus-shadow"),x`
+var p=function(g,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(g,e,t,r);else for(var c=g.length-1;c>=0;c--)(a=g[c])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as x,LitElement as E}from"lit";import{property as m,state as I}from"lit/decorators.js";import{getEspBus as V}from"./bus-events.js";import{traverseToClosest as S}from"./utilities.js";import{parseOklch as A,serializeOklch as y,gamutMapToSRGB as O,deriveSemantic as L,deriveSemanticWithContrast as U}from"./color-engine.js";import{computeVariants as T}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as R,semanticToCSS as P}from"./theme.js";import{alignAttributeTextInheritance as _,focusRing as z}from"./style-fragments.js";class n extends E{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.applyVariantTokens()},this.handleIconSpriteUrlChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback(),this.subscribeToRootEvents(),this.hasUpdated&&this.syncRootFromDom(!1)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=S(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,(r||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),r&&this.requestUpdate(),t}subscribeToRootEvents(){if(this.rootEventSubscriptionsActive)return;const e=V();e.subscribe("seed-color-changed",this.handleSeedColorChanged),e.subscribe("scheme-changed",this.handleSchemeChanged),e.subscribe("theme-changed",this.handleThemeChanged),e.subscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!0}unsubscribeFromRootEvents(){if(!this.rootEventSubscriptionsActive)return;const e=V();e.unsubscribe("seed-color-changed",this.handleSeedColorChanged),e.unsubscribe("scheme-changed",this.handleSchemeChanged),e.unsubscribe("theme-changed",this.handleThemeChanged),e.unsubscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!1}traverseToClosest(e){return S(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,r=A(t.seedColor);if(!r)return;const s=T(r,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",y(O(s)));const a=T(s,t),c=n.statusVariantSources.has(e),{textContrast:k}=n,f={};for(const i of R){if(k[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),b=a[d],v=t.lightness[l.lightness],u=L(b,v,h.min,h.max);f[i]=u,this.setVariantTokenProperty(P(i),y(u))}for(const i of R){const l=k[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],b=this.effectiveVariantTokenSource(i,h.source,c),v=a[b],u=t.lightness[h.lightness],w=f[l.bg],C=U(v,u,d.min,d.max,w,l.targetLc);f[i]=C,this.setVariantTokenProperty(P(i),y(C))}}effectiveVariantTokenSource(e,t,r){return r&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const r=this.variantTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[z(".esp-field:focus-within","--esp-field-focus-shadow"),_,x`
       :host {
         
         --_esp-field-resolved-hover-bg: var(

package/dist/shared/events.d.ts

@@ -26,10 +26,12 @@ export { type GridClickedEvent, type GridDataStateEventDetail, type GridItemsCha
 export { type DestroyEspalierInfo } from "../info/esp-info.js";
 export { type ValidityChangedDetail, type ValidationError, VALIDITY_CHANGED_EVENT, } from "./validation.js";
 export { type ToastConfig } from "./toast-events.js";
+export { type FlyoutConfig, type FlyoutCloseReason } from "./flyout-events.js";
 export { type PickerItem } from "../pickers/esp-picker-item.js";
 export { type EspalierUploadImage } from "../image-upload/image-helpers.js";
 export { type FontPickerValueChangedDetail, type GoogleFont, type WebSafeFont, } from "../font-picker/esp-font-picker.js";
 import type { EspalierDetails } from "../details/esp-details.js";
+import type { FlyoutCloseReason } from "./flyout-events.js";
 import type { ValidityChangedDetail } from "./validation.js";
 import type { GridClickedEvent, GridItemsChangedEventDetail, GridLoadErrorEventDetail, GridLoadStartEventDetail, GridLoadSuccessEventDetail } from "../grid/esp-grid.js";
 import type { DestroyEspalierInfo } from "../info/esp-info.js";
@@ -63,6 +65,9 @@ export declare const ESP_EVENTS: {
     readonly ESP_ACCORDION_CHANGE: "esp-accordion-change";
     readonly DRAWER_OPENED: "drawer-opened";
     readonly DRAWER_CLOSED: "drawer-closed";
+    readonly FLYOUT_OPENED: "flyout-opened";
+    readonly FLYOUT_CLOSED: "flyout-closed";
+    readonly FLYOUT_STATE_CHANGED: "flyout-state-changed";
     readonly POPOVER_OPENED: "popover-opened";
     readonly POPOVER_CLOSED: "popover-closed";
     readonly GRID_EVENT: "grid-event";
@@ -267,6 +272,14 @@ export interface EspalierMenuEventMap {
     [ESP_EVENTS.DRAWER_OPENED]: CustomEvent<void>;
     [ESP_EVENTS.DRAWER_CLOSED]: CustomEvent<void>;
 }
+/** Events fired by `<esp-flyout>`. */
+export interface EspalierFlyoutEventMap {
+    [ESP_EVENTS.FLYOUT_OPENED]: CustomEvent<Record<string, never>>;
+    [ESP_EVENTS.FLYOUT_CLOSED]: CustomEvent<{
+        reason: FlyoutCloseReason;
+    }>;
+    [ESP_EVENTS.FLYOUT_STATE_CHANGED]: CustomEvent<Record<string, never>>;
+}
 /** Events fired by `<esp-header-button>`. */
 export interface EspalierHeaderButtonEventMap {
     [ESP_EVENTS.CLICKED]: CustomEvent<Record<string, never>>;

package/dist/shared/events.js

@@ -1 +1 @@
-import{VALIDITY_CHANGED_EVENT as r}from"./validation.js";const e={VALUE_CHANGED:"value-changed",VALIDITY_CHANGED:"validity-changed",CLICKED:"clicked",ESP_SUBMIT:"esp-submit",ESP_SUBMIT_RESPONSE:"esp-submit-response",ESP_SUBMIT_ERROR:"esp-submit-error",ESP_TAB_CHANGED:"esp-tab-changed",ESP_TAB_UPDATED:"esp-tab-updated",ESP_TOGGLE:"esp-toggle",ESP_ACCORDION_CHANGE:"esp-accordion-change",DRAWER_OPENED:"drawer-opened",DRAWER_CLOSED:"drawer-closed",POPOVER_OPENED:"popover-opened",POPOVER_CLOSED:"popover-closed",GRID_EVENT:"grid-event",GRID_LOAD_START:"esp-grid-load-start",GRID_LOAD_SUCCESS:"esp-grid-load-success",GRID_LOAD_ERROR:"esp-grid-load-error",GRID_ITEMS_CHANGED:"esp-grid-items-changed",DESTROY:"destroy",FILE_SELECTED:"file-selected",FILE_REMOVED:"file-removed",FILES_SELECTED:"files-selected",FILES_REJECTED:"files-rejected",UPLOAD_RETRY:"upload-retry",RETRY_UPLOAD:"retry-upload",IMAGES_REORDERED:"images-reordered",SEARCH_REQUESTED:"search-requested",RESULT_SELECTED:"result-selected",SEARCH_CLOSED:"search-closed",SELECTION_CHANGED:"selection-changed",CLOSE_MENU:"close-menu",REMOVE_IMAGE:"remove-image"};export{e as ESP_EVENTS,r as VALIDITY_CHANGED_EVENT};
+import{VALIDITY_CHANGED_EVENT as D}from"./validation.js";const e={VALUE_CHANGED:"value-changed",VALIDITY_CHANGED:"validity-changed",CLICKED:"clicked",ESP_SUBMIT:"esp-submit",ESP_SUBMIT_RESPONSE:"esp-submit-response",ESP_SUBMIT_ERROR:"esp-submit-error",ESP_TAB_CHANGED:"esp-tab-changed",ESP_TAB_UPDATED:"esp-tab-updated",ESP_TOGGLE:"esp-toggle",ESP_ACCORDION_CHANGE:"esp-accordion-change",DRAWER_OPENED:"drawer-opened",DRAWER_CLOSED:"drawer-closed",FLYOUT_OPENED:"flyout-opened",FLYOUT_CLOSED:"flyout-closed",FLYOUT_STATE_CHANGED:"flyout-state-changed",POPOVER_OPENED:"popover-opened",POPOVER_CLOSED:"popover-closed",GRID_EVENT:"grid-event",GRID_LOAD_START:"esp-grid-load-start",GRID_LOAD_SUCCESS:"esp-grid-load-success",GRID_LOAD_ERROR:"esp-grid-load-error",GRID_ITEMS_CHANGED:"esp-grid-items-changed",DESTROY:"destroy",FILE_SELECTED:"file-selected",FILE_REMOVED:"file-removed",FILES_SELECTED:"files-selected",FILES_REJECTED:"files-rejected",UPLOAD_RETRY:"upload-retry",RETRY_UPLOAD:"retry-upload",IMAGES_REORDERED:"images-reordered",SEARCH_REQUESTED:"search-requested",RESULT_SELECTED:"result-selected",SEARCH_CLOSED:"search-closed",SELECTION_CHANGED:"selection-changed",CLOSE_MENU:"close-menu",REMOVE_IMAGE:"remove-image"};export{e as ESP_EVENTS,D as VALIDITY_CHANGED_EVENT};

package/dist/shared/flyout-events.d.ts

@@ -0,0 +1,87 @@
+/**
+ * The reason a flyout closed, carried on the `flyout-closed`
+ * event detail.
+ *
+ * - `"escape"` — the user pressed the Escape key
+ * - `"vellum"` — the user clicked the overlay-mode backdrop
+ * - `"button"` — the user clicked the flyout's close button
+ * - `"programmatic"` — `close()` was called from code (including
+ *   the `"close-flyout"` bus event)
+ *
+ * @docUrl /api/flyout-close-reason
+ * @menuGroup Event Details
+ * @menuLabel FlyoutCloseReason
+ */
+export type FlyoutCloseReason = "escape" | "vellum" | "button" | "programmatic";
+/**
+ * Configuration for opening a flyout via {@link showFlyout}.
+ *
+ * @docUrl /api/flyout-config
+ * @menuGroup Configuration
+ * @menuLabel FlyoutConfig
+ */
+export type FlyoutConfig = {
+    /**
+     * Heading text shown in the flyout's header. Also becomes the
+     * flyout's accessible name unless an `aria-label` was set by
+     * the author. When omitted, the flyout keeps its current
+     * heading.
+     */
+    heading?: string | undefined;
+    /**
+     * Content to show. A string is rendered as plain text; pass a
+     * `Node` (element or fragment) for rich content. The flyout's
+     * existing light-DOM children are **replaced** — a second
+     * `showFlyout` swaps content in place, it never stacks. When
+     * omitted, the flyout opens with whatever content it already
+     * has (e.g. declaratively slotted markup).
+     */
+    content?: string | Node | undefined;
+    /**
+     * Triggering element whose block-start edge the in-grid flyout
+     * should align with. The flyout stays in the page's normal scroll
+     * flow, shifting upward only while needed to fit the visible
+     * scrollport. Content taller than that scrollport scrolls inside the
+     * panel. Overlay drawers ignore this geometry and remain
+     * viewport-fixed. When omitted, the flyout starts at the top of the
+     * page's content row.
+     */
+    anchor?: HTMLElement | undefined;
+    /**
+     * Element to return focus to when the flyout closes — pass the
+     * triggering control. In the in-grid modes (where opening never
+     * moves focus) it is focused only if focus is inside the panel at
+     * close; in the overlay-drawer mode (a modal, which does move focus
+     * in) it overrides the automatic restore-to-opener.
+     */
+    returnFocusTo?: HTMLElement | undefined;
+};
+/**
+ * Open the page's flyout surface. Publishes a `"show-flyout"`
+ * event on `EspBus` which is picked up by `<esp-flyout>`.
+ *
+ * ```ts
+ * import { showFlyout } from "@taprootio/espalier";
+ *
+ * showFlyout({ heading: "Details", content: detailsFragment });
+ * ```
+ *
+ * If no `<esp-flyout>` is connected, the event goes unserviced —
+ * callers that need a fallback (e.g. opening a URL in a new tab)
+ * should check for a connected flyout themselves.
+ *
+ * @param config - Flyout configuration.
+ * @docUrl /api/show-flyout
+ * @menuGroup Functions
+ * @menuLabel showFlyout
+ */
+export declare function showFlyout(config?: FlyoutConfig): void;
+/**
+ * Close the page's flyout surface. Publishes a `"close-flyout"`
+ * event on `EspBus`.
+ *
+ * @docUrl /api/close-flyout
+ * @menuGroup Functions
+ * @menuLabel closeFlyout
+ */
+export declare function closeFlyout(): void;

package/dist/shared/flyout-events.js

@@ -0,0 +1 @@
+import{getEspBus as o}from"./bus-events.js";function l(t={}){o().publish("show-flyout",t)}function s(){o().publish("close-flyout",{})}export{s as closeFlyout,l as showFlyout};

package/dist/shared/overlay-controller.js

@@ -1 +1 @@
-const l=['a[href]:not([disabled]):not([tabindex="-1"])','button:not([disabled]):not([tabindex="-1"])','input:not([disabled]):not([tabindex="-1"])','select:not([disabled]):not([tabindex="-1"])','textarea:not([disabled]):not([tabindex="-1"])','[tabindex]:not([tabindex="-1"]):not([disabled])'].join(", "),a="[autofocus]:not([disabled])";class o{static lock(){o._count===0&&(o._savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden"),o._count++}static unlock(){o._count<=0||(o._count--,o._count===0&&(document.body.style.overflow=o._savedOverflow??"",o._savedOverflow=null))}static _reset(){o._count=0,o._savedOverflow=null}}o._count=0,o._savedOverflow=null;function f(){o._reset()}class r{static lock(t){const e=r._counts.get(t);return e!==void 0?(r._counts.set(t,e+1),!0):t.inert?!1:(r._counts.set(t,1),t.inert=!0,!0)}static unlock(t){const e=r._counts.get(t)??0;if(e<=0)return;const s=e-1;s===0?(t.inert=!1,r._counts.delete(t)):r._counts.set(t,s)}static _reset(){r._counts.clear()}}r._counts=new Map;function d(){r._reset()}class _{get isPromoting(){return this._promoting}constructor(t){this._isOpen=!1,this._previouslyFocused=null,this._inertElements=[],this._promoted=!1,this._dropZone=null,this._promoting=!1,this._host=t.host,this._opts=t,t.host.addController(this)}get isOpen(){return this._isOpen}open(){this._isOpen||(this._previouslyFocused=document.activeElement??null,this._isOpen=!0,o.lock(),this._promoteToDropZone(),this._setInert(!0))}close(){this._isOpen&&(this._isOpen=!1,o.unlock(),this._setInert(!1),this._previouslyFocused?.focus(),this._previouslyFocused=null)}trapFocus(t){const e=this.getFocusableElements();if(e.length===0)return;const s=e[0],n=e[e.length-1],i=this._getDeepActiveElement();t.shiftKey?(i===s||this._isOrContains(s,i))&&(t.preventDefault(),n.focus()):(i===n||this._isOrContains(n,i))&&(t.preventDefault(),s.focus())}moveFocusInto(){const t=this._getAutofocusElement();if(t&&(t.focus(),this._autofocusLanded(t)))return;const e=this.getFocusableElements();if(e.length>0){e[0].focus();return}const s=this._opts.getFocusFallback?.();if(s){s.focus();return}this._opts.getFocusTrapContainer()?.focus()}_getAutofocusElement(){return this._getMatchingElements(a)[0]??null}getFocusableElements(){return this._getMatchingElements(l)}_getMatchingElements(t){const e=this._opts.getFocusTrapContainer();if(!e)return[];const s=[];for(const n of Array.from(e.querySelectorAll("*")))if(n instanceof HTMLElement){if(n.matches(t)&&s.push(n),n.shadowRoot){const i=n.shadowRoot.querySelectorAll(t);s.push(...Array.from(i))}if(n instanceof HTMLSlotElement)for(const i of n.assignedElements({flatten:!0})){if(!(i instanceof HTMLElement))continue;i.matches(t)&&s.push(i);const u=i.querySelectorAll(t);if(s.push(...Array.from(u)),i.shadowRoot){const c=i.shadowRoot.querySelectorAll(t);s.push(...Array.from(c))}}}for(const n of Array.from(this._host.children)){if(!(n instanceof HTMLElement))continue;n.matches(t)&&(s.includes(n)||s.push(n));const i=n.querySelectorAll(t);for(const u of Array.from(i))s.includes(u)||s.push(u);if(n.shadowRoot){const u=n.shadowRoot.querySelectorAll(t);for(const c of Array.from(u))s.includes(c)||s.push(c)}}return s}hostConnected(){}hostDisconnected(){this._promoting||this._isOpen&&(this._setInert(!1),o.unlock(),this._isOpen=!1)}_setInert(t){if(t){this._inertElements=[];const e=this._resolveInertAnchor(),s=e.parentElement??document.body;for(const n of s.children)n instanceof HTMLElement&&n!==e&&r.lock(n)&&this._inertElements.push(n)}else{for(const e of this._inertElements)r.unlock(e);this._inertElements=[]}}_resolveInertAnchor(){if(this._dropZone)return this._dropZone;let t=this._host;for(;!t.parentElement;){const e=t.getRootNode();if(e instanceof ShadowRoot&&e.host instanceof HTMLElement)t=e.host;else break}return t}_getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}_isOrContains(t,e){return e?t===e?!0:t.contains(e):!1}_autofocusLanded(t){const e=this._getActiveElementChain(),s=e[0];return e.some(n=>this._isOrContains(t,n)?!0:n!==s&&n instanceof HTMLElement&&this._isOrContains(n,t))}_getActiveElementChain(){const t=[];let e=document.activeElement;for(;e;){t.push(e);const s=e.shadowRoot?.activeElement??null;if(!s||s===e)break;e=s}return t}_promoteToDropZone(){if(this._promoted&&this._dropZone){this._promoting=!0;try{this._dropZone.appendChild(this._host)}finally{this._promoting=!1}return}const t=this._host,e=t.closest("esp-page");if(e){if(customElements.get("esp-page")){this._tryPromote(e);return}customElements.whenDefined("esp-page").then(()=>{if(!this._isOpen||!t.isConnected)return;const s=t.closest("esp-page");this._tryPromote(s)&&(this._setInert(!1),this._setInert(!0))})}}_tryPromote(t){if(!t||this._promoted)return!1;const e=t.AddDialog;if(typeof e=="function"){this._promoting=!0;try{e.call(t,this._host)}finally{this._promoting=!1}return this._promoted=!0,this._dropZone=this._host.parentElement,!0}return!1}}export{l as FOCUSABLE_SELECTOR,_ as OverlayController,d as _resetInertLock,f as _resetScrollLock};
+const c=['a[href]:not([disabled]):not([tabindex="-1"])','button:not([disabled]):not([tabindex="-1"])','input:not([disabled]):not([tabindex="-1"])','select:not([disabled]):not([tabindex="-1"])','textarea:not([disabled]):not([tabindex="-1"])','[tabindex]:not([tabindex="-1"]):not([disabled])'].join(", "),l="[autofocus]:not([disabled])";class o{static lock(){o._count===0&&(o._savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden"),o._count++}static unlock(){o._count<=0||(o._count--,o._count===0&&(document.body.style.overflow=o._savedOverflow??"",o._savedOverflow=null))}static _reset(){o._count=0,o._savedOverflow=null}}o._count=0,o._savedOverflow=null;function f(){o._reset()}class r{static lock(t){const e=r._counts.get(t);return e!==void 0?(r._counts.set(t,e+1),!0):t.inert?!1:(r._counts.set(t,1),t.inert=!0,!0)}static unlock(t){const e=r._counts.get(t)??0;if(e<=0)return;const s=e-1;s===0?(t.inert=!1,r._counts.delete(t)):r._counts.set(t,s)}static _reset(){r._counts.clear()}}r._counts=new Map;function d(){r._reset()}class _{get isPromoting(){return this._promoting}constructor(t){this._isOpen=!1,this._previouslyFocused=null,this._inertElements=[],this._promoted=!1,this._pendingReactivation=!1,this._dropZone=null,this._promoting=!1,this._host=t.host,this._opts=t,t.host.addController(this)}get isOpen(){return this._isOpen}open(){this._isOpen||(this._pendingReactivation?this._pendingReactivation=!1:this._previouslyFocused=document.activeElement??null,this._isOpen=!0,o.lock(),this._opts.promote!==!1&&this._promoteToDropZone(),this._setInert(!0))}close(){if(this._pendingReactivation=!1,!this._isOpen){this._previouslyFocused?.focus(),this._previouslyFocused=null;return}this._isOpen=!1,o.unlock(),this._setInert(!1),this._previouslyFocused?.focus(),this._previouslyFocused=null}trapFocus(t){const e=this.getFocusableElements();if(e.length===0)return;const s=e[0],n=e[e.length-1],i=this._getDeepActiveElement();t.shiftKey?(i===s||this._isOrContains(s,i))&&(t.preventDefault(),n.focus()):(i===n||this._isOrContains(n,i))&&(t.preventDefault(),s.focus())}moveFocusInto(){const t=this._getAutofocusElement();if(t&&(t.focus(),this._autofocusLanded(t)))return;const e=this.getFocusableElements();if(e.length>0){e[0].focus();return}const s=this._opts.getFocusFallback?.();if(s){s.focus();return}this._opts.getFocusTrapContainer()?.focus()}_getAutofocusElement(){return this._getMatchingElements(l)[0]??null}getFocusableElements(){return this._getMatchingElements(c)}_getMatchingElements(t){const e=this._opts.getFocusTrapContainer();if(!e)return[];const s=[];for(const n of Array.from(e.querySelectorAll("*")))if(n instanceof HTMLElement){if(n.matches(t)&&s.push(n),n.shadowRoot){const i=n.shadowRoot.querySelectorAll(t);s.push(...Array.from(i))}if(n instanceof HTMLSlotElement)for(const i of n.assignedElements({flatten:!0})){if(!(i instanceof HTMLElement))continue;i.matches(t)&&s.push(i);const u=i.querySelectorAll(t);if(s.push(...Array.from(u)),i.shadowRoot){const a=i.shadowRoot.querySelectorAll(t);s.push(...Array.from(a))}}}for(const n of Array.from(this._host.children)){if(!(n instanceof HTMLElement))continue;n.matches(t)&&(s.includes(n)||s.push(n));const i=n.querySelectorAll(t);for(const u of Array.from(i))s.includes(u)||s.push(u);if(n.shadowRoot){const u=n.shadowRoot.querySelectorAll(t);for(const a of Array.from(u))s.includes(a)||s.push(a)}}return s}hostConnected(){}hostDisconnected(){this._promoting||this._isOpen&&(this._setInert(!1),o.unlock(),this._isOpen=!1,this._pendingReactivation=!0)}_setInert(t){if(t){this._inertElements=[];const e=this._resolveInertAnchor(),s=e.parentElement??document.body;for(const n of s.children)n instanceof HTMLElement&&n!==e&&r.lock(n)&&this._inertElements.push(n)}else{for(const e of this._inertElements)r.unlock(e);this._inertElements=[]}}_resolveInertAnchor(){if(this._dropZone)return this._dropZone;let t=this._host;for(;!t.parentElement;){const e=t.getRootNode();if(e instanceof ShadowRoot&&e.host instanceof HTMLElement)t=e.host;else break}return t}_getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}_isOrContains(t,e){return e?t===e?!0:t.contains(e):!1}_autofocusLanded(t){const e=this._getActiveElementChain(),s=e[0];return e.some(n=>this._isOrContains(t,n)?!0:n!==s&&n instanceof HTMLElement&&this._isOrContains(n,t))}_getActiveElementChain(){const t=[];let e=document.activeElement;for(;e;){t.push(e);const s=e.shadowRoot?.activeElement??null;if(!s||s===e)break;e=s}return t}_promoteToDropZone(){if(this._promoted&&this._dropZone){this._promoting=!0;try{this._dropZone.appendChild(this._host)}finally{this._promoting=!1}return}const t=this._host,e=t.closest("esp-page");if(e){if(customElements.get("esp-page")){this._tryPromote(e);return}customElements.whenDefined("esp-page").then(()=>{if(!this._isOpen||!t.isConnected)return;const s=t.closest("esp-page");this._tryPromote(s)&&(this._setInert(!1),this._setInert(!0))})}}_tryPromote(t){if(!t||this._promoted)return!1;const e=t.AddDialog;if(typeof e=="function"){this._promoting=!0;try{e.call(t,this._host)}finally{this._promoting=!1}return this._promoted=!0,this._dropZone=this._host.parentElement,!0}return!1}}export{c as FOCUSABLE_SELECTOR,_ as OverlayController,d as _resetInertLock,f as _resetScrollLock};

package/dist/shared/style-fragments.js

@@ -1,4 +1,8 @@
-import{css as i,unsafeCSS as n}from"lit";const e=i`
+import{css as n,unsafeCSS as t}from"lit";const a=n`
+  :host([align]) {
+    text-align: inherit;
+  }
+`,d=n`
   .sr-only {
     position: absolute;
     width: 1px;
@@ -10,14 +14,14 @@ import{css as i,unsafeCSS as n}from"lit";const e=i`
     white-space: nowrap;
     border: 0;
   }
-`;function a(o){const r=o.includes(":host")||o.includes("[disabled]")?o:`:host([disabled]) ${o}`;return i`
-    ${n(r)} {
+`;function l(o){const i=o.includes(":host")||o.includes("[disabled]")?o:`:host([disabled]) ${o}`;return n`
+    ${t(i)} {
       opacity: 0.5;
       cursor: not-allowed;
     }
-  `}function p(o,r,s="0 0 3px",d=""){return i`
-    ${n(o)} {
-      box-shadow: ${n(d)} ${n(s)}
-        var(${n(r)}, var(--esp-color-shadow));
+  `}function p(o,i,e="0 0 3px",r=""){return n`
+    ${t(o)} {
+      box-shadow: ${t(r)} ${t(e)}
+        var(${t(i)}, var(--esp-color-shadow));
     }
-  `}export{a as disabledControl,p as focusRing,e as srOnly};
+  `}export{a as alignAttributeTextInheritance,l as disabledControl,p as focusRing,d as srOnly};

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

@@ -5,6 +5,27 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * components. Place one `<esp-toaster>` in your page layout
  * (it is included automatically inside `<esp-page>`).
  *
+ * If more than one toaster is connected — for example a page that
+ * nests several `<esp-page>`s, each of which injects its own — all
+ * toasts live in one shared stack rendered by a single toaster, so
+ * each `showToast()` renders once, not once per toaster. The renderer
+ * is re-chosen whenever a toast arrives, a toaster connects or
+ * disconnects, or a toaster's size collapses or expands, preferring a
+ * **visible** instance, and the whole live stack migrates with it —
+ * a hidden toaster never swallows toasts, and the stack never
+ * fragments across instances. This needs no configuration.
+ *
+ * The migration timing contract: routing always skips instances
+ * hidden by `display`, `visibility`, `opacity: 0`, or
+ * `content-visibility` at decision time, and a live stack re-routes
+ * **immediately** when its renderer is collapsed via `display` (the
+ * collapse resizes the toaster, which is observed). A pure
+ * `visibility` or `opacity` flip produces no resize, so an
+ * already-rendered stack under one re-routes on the **next** toast,
+ * connect/disconnect, or resize instead. (The related `esp-flyout`
+ * uses an explicit `standalone` opt-out rather than routing, because
+ * its instances are distinct surfaces you target individually.)
+ *
  * Toasts auto-dismiss after their `duration` (default 5 seconds).
  * A duration of `0` creates a persistent toast that the user must
  * dismiss manually.

package/dist/toaster/esp-toaster.js

@@ -1,15 +1,15 @@
-var d=function(a,t,e,o){var i=arguments.length,s=i<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,t,e,o);else for(var l=a.length-1;l>=0;l--)(n=a[l])&&(s=(i<3?n(s):i>3?n(t,e,s):n(t,e))||s);return i>3&&s&&Object.defineProperty(t,e,s),s};import{css as m,html as p}from"lit";import{customElement as u,state as f}from"lit/decorators.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{getEspBus as h}from"../shared/bus-events.js";import{getIconHrefForHost as v}from"../shared/intent-values.js";import{renderSpriteIcon as b}from"../shared/svgs/render-sprite-icon.js";let r=class extends c{constructor(){super(...arguments),this.toasts=[],this.boundHandler=t=>this.handleToast(t)}connectedCallback(){super.connectedCallback(),h().subscribe("show-toast",this.boundHandler)}disconnectedCallback(){super.disconnectedCallback(),h().unsubscribe("show-toast",this.boundHandler)}handleToast(t){this.toasts=[...this.toasts,t];const e=t.duration??5;e>0&&setTimeout(()=>{this.toasts=this.toasts.filter(o=>o!==t),t.onClosed?.()},e*1e3)}removeToast(t){this.toasts=this.toasts.filter(e=>e!==t),t.onClosed?.()}getToastIconHref(t){return t.svgPath?.trim()||v(t.icon,this)}render(){return p`
+var u=function(o,e,s,n){var c=arguments.length,r=c<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(o,e,s,n);else for(var d=o.length-1;d>=0;d--)(a=o[d])&&(r=(c<3?a(r):c>3?a(e,s,r):a(e,s))||r);return c>3&&r&&Object.defineProperty(e,s,r),r},t;import{css as f,html as l}from"lit";import{customElement as v,state as h}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{getEspBus as b}from"../shared/bus-events.js";import{getIconHrefForHost as m}from"../shared/intent-values.js";import{renderSpriteIcon as y}from"../shared/svgs/render-sprite-icon.js";let i=t=class extends p{constructor(){super(...arguments),this.toasts=[]}connectedCallback(){super.connectedCallback(),t.connected.push(this),t.busSubscribed||(b().subscribe("show-toast",t.boundDeliver),t.busSubscribed=!0),typeof ResizeObserver<"u"&&(this.resizeObserver=new ResizeObserver(()=>t.syncRenderer()),this.resizeObserver.observe(this)),t.syncRenderer()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,t.connected=t.connected.filter(e=>e!==this),t.connected.length===0?(t.busSubscribed&&(b().unsubscribe("show-toast",t.boundDeliver),t.busSubscribed=!1),t.queue=[]):t.syncRenderer()}static deliver(e){t.queue=[...t.queue,e];const s=e.duration??5;s>0&&setTimeout(()=>t.dismiss(e),s*1e3),t.syncRenderer()}static dismiss(e){t.queue.includes(e)&&(t.queue=t.queue.filter(s=>s!==e),e.onClosed?.(),t.syncRenderer())}static syncRenderer(){const e=t.connected.find(s=>s.isVisible())??t.connected[0];for(const s of t.connected){const n=s===e?t.queue:[];s.toasts.length===n.length&&s.toasts.every((c,r)=>c===n[r])||(s.toasts=[...n])}}isVisible(){const e=this;return typeof e.checkVisibility=="function"?e.checkVisibility({visibilityProperty:!0,opacityProperty:!0,checkVisibilityCSS:!0,checkOpacity:!0}):this.offsetParent!==null}removeToast(e){t.dismiss(e)}getToastIconHref(e){return e.svgPath?.trim()||m(e.icon,this)}render(){return l`
       <div id="toaster" role="region" aria-label="Notifications" aria-live="polite">
-        ${this.toasts.map(t=>{const e=this.getToastIconHref(t);return p`<esp-info
-            .destroyable=${(t.duration??5)===0}
-            .variant=${t.variant??"complementary"}
-            @destroy=${()=>this.removeToast(t)}
+        ${this.toasts.map(e=>{const s=this.getToastIconHref(e);return l`<esp-info
+            .destroyable=${(e.duration??5)===0}
+            .variant=${e.variant??"complementary"}
+            @destroy=${()=>this.removeToast(e)}
           >
-            ${e?b(e,{"aria-hidden":null,class:null,slot:"icon-slot"}):p``}
-            ${t.message}</esp-info
+            ${s?y(s,{"aria-hidden":null,class:null,slot:"icon-slot"}):l``}
+            ${e.message}</esp-info
           >`})}
       </div>
-    `}};r.styles=[...c.styles,m`
+    `}};i.connected=[],i.busSubscribed=!1,i.queue=[],i.boundDeliver=o=>t.deliver(o),i.styles=[...p.styles,f`
       #toaster {
         z-index: var(--esp-toaster-z-index, 5000);
         position: fixed;
@@ -25,4 +25,4 @@ var d=function(a,t,e,o){var i=arguments.length,s=i<3?t:o===null?o=Object.getOwnP
         box-shadow: 3px 3px 6px var(--esp-color-shadow);
         pointer-events: all;
       }
-    `],d([f()],r.prototype,"toasts",void 0),r=d([u("esp-toaster")],r);export{r as EspalierToaster};
+    `],u([h()],i.prototype,"toasts",void 0),i=t=u([v("esp-toaster")],i);export{i as EspalierToaster};