@taprootio/espalier 6.7.0 → 6.9.0

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

@@ -268,6 +268,12 @@ export declare class EspalierButton extends EspalierElementBase {
      * @type {string}
      */
     rel: string;
+    /**
+     * Hidden phrase appended to the accessible name of a `target="_blank"` link.
+     * Replace for non-English sites. Empty or whitespace text falls back to English.
+     * @default "opens in a new tab"
+     */
+    newTabLabel: string;
     /**
      * When true and `button-type` is `"submit"`, the enclosing
      * form is submitted without running constraint validation.

package/dist/button/esp-button.js

@@ -1,4 +1,4 @@
-var n=function(h,t,s,i){var a=arguments.length,o=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,s):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(h,t,s,i);else for(var c=h.length-1;c>=0;c--)(d=h[c])&&(o=(a<3?d(o):a>3?d(t,s,o):d(t,s))||o);return a>3&&o&&Object.defineProperty(t,s,o),o};import{css as g,html as p,nothing as l}from"lit";import{customElement as f,eventOptions as m,property as r,state as v}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ESP_EVENTS as y}from"../shared/events.js";import{ref as w}from"lit/directives/ref.js";import{getIconHrefForHost as k}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as T}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_INTERACTION_LIGHTNESS_FACTOR as S}from"./action-state-lightness.js";const $=p`<svg
+var o=function(h,t,s,i){var a=arguments.length,n=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,s):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(h,t,s,i);else for(var c=h.length-1;c>=0;c--)(d=h[c])&&(n=(a<3?d(n):a>3?d(t,s,n):d(t,s))||n);return a>3&&n&&Object.defineProperty(t,s,n),n};import{css as g,html as p,nothing as l}from"lit";import{customElement as f,eventOptions as m,property as r,state as v}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ESP_EVENTS as y}from"../shared/events.js";import{ref as w}from"lit/directives/ref.js";import{getIconHrefForHost as T}from"../shared/intent-values.js";import{SlottedIconController as k}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as x}from"../shared/svgs/render-sprite-icon.js";import{DEFAULT_NEW_TAB_LABEL as S,newTabSuffix as $,renderNewTabCue as E}from"../shared/new-tab-cue.js";import{srOnly as C}from"../shared/style-fragments.js";import{BUTTON_INTERACTION_LIGHTNESS_FACTOR as N}from"./action-state-lightness.js";const z=p`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -10,23 +10,24 @@ var n=function(h,t,s,i){var a=arguments.length,o=a<3?t:i===null?i=Object.getOwnP
 >
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
-</svg>`;let e=class extends b{constructor(){super(...arguments),this.iconSlot=new x(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.iconPosition="right",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?p` <span>${$}</span> `:p`
+</svg>`;let e=class extends b{constructor(){super(...arguments),this.iconSlot=new k(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.iconPosition="right",this.label="",this.loading=!1,this.target="",this.rel="",this.newTabLabel=S,this.formNoValidate=!1,this.buildIcon=t=>this.loading?p` <span>${z}</span> `:p`
       <span>
         <slot ${w(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
-        ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?T(t):l}
+        ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?x(t):l}
       </span>
-    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,s,i){if(super.attributeChangedCallback(t,s,i),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=i===null?null:Number(i),o=a===null||Number.isNaN(a)?null:a;o!==null&&o>=0?(this.innerTabindex=o,this.writeHostTabindex(null)):o===null&&i!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=o}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent(y.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const s=this.closest("form");if(s){const i=document.createElement("button");i.type="submit",i.hidden=!0,this.formNoValidate&&(i.formNoValidate=!0),s.appendChild(i),s.requestSubmit(i),i.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=k(this.icon,this),s=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:i,iconOnly:a}=this,o=a?this.getAttribute("aria-label")||this.label||l:l,d=this.getAttribute("aria-pressed")||l,c={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":i,"has-icon":s,"icon-left":s&&!a&&this.iconPosition==="left"};return this.href.length?p`
+    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,s,i){if(super.attributeChangedCallback(t,s,i),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=i===null?null:Number(i),n=a===null||Number.isNaN(a)?null:a;n!==null&&n>=0?(this.innerTabindex=n,this.writeHostTabindex(null)):n===null&&i!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=n}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent(y.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const s=this.closest("form");if(s){const i=document.createElement("button");i.type="submit",i.hidden=!0,this.formNoValidate&&(i.formNoValidate=!0),s.appendChild(i),s.requestSubmit(i),i.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=T(this.icon,this),s=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:i,iconOnly:a}=this,n=a?this.getAttribute("aria-label")||this.label||l:l,d=this.getAttribute("aria-pressed")||l,c={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":i,"has-icon":s,"icon-left":s&&!a&&this.iconPosition==="left"};return this.href.length?p`
           <div part="wrapper" class=${u(c)}>
             <a
               ?disabled=${this.disabled}
               href=${this.href}
-              target=${this.target}
+              target=${this.target||l}
               rel=${this.rel||l}
               tabindex=${this.innerTabindex??l}
-              aria-label=${o}
+              aria-label=${n===l?l:`${n}${$(this.target,this.newTabLabel)}`}
             >
               <span>${this.label??""}</span>
               ${this.buildIcon(t)}
+              ${a?l:E(this.target,this.newTabLabel)}
             </a>
           </div>
         `:p`
@@ -36,14 +37,14 @@ var n=function(h,t,s,i){var a=arguments.length,o=a<3?t:i===null?i=Object.getOwnP
               @click=${this.handleClick}
               type=${this.buttonType}
               tabindex=${this.innerTabindex??l}
-              aria-label=${o}
+              aria-label=${n}
               aria-pressed=${d}
             >
               <span>${this.label??""}</span>
               ${this.buildIcon(t)}
             </button>
           </div>
-        `}};e.styles=[...b.styles,g`
+        `}};e.styles=[...b.styles,C,g`
       :host {
         --_esp-button-radius: var(--esp-size-border-radius);
       }
@@ -158,7 +159,7 @@ var n=function(h,t,s,i){var a=arguments.length,o=a<3?t:i===null?i=Object.getOwnP
         &:hover,
         &:focus-within {
           background-color: oklch(
-            from var(--esp-color-action-background) calc(l * ${S})
+            from var(--esp-color-action-background) calc(l * ${N})
               c h
           );
         }
@@ -232,4 +233,4 @@ var n=function(h,t,s,i){var a=arguments.length,o=a<3?t:i===null?i=Object.getOwnP
           transform: rotate(360deg);
         }
       }
-    `],n([v()],e.prototype,"innerTabindex",void 0),n([r({attribute:"button-type",type:String})],e.prototype,"buttonType",void 0),n([r({type:Boolean})],e.prototype,"collapsed",void 0),n([r({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0),n([r({type:String})],e.prototype,"href",void 0),n([r({attribute:"icon-only",type:Boolean})],e.prototype,"iconOnly",void 0),n([r({type:Boolean,reflect:!0})],e.prototype,"incognito",void 0),n([r({type:String})],e.prototype,"icon",void 0),n([r({attribute:"icon-position",type:String})],e.prototype,"iconPosition",void 0),n([r({type:String})],e.prototype,"label",void 0),n([r({type:Boolean,reflect:!0})],e.prototype,"loading",void 0),n([r({type:String})],e.prototype,"target",void 0),n([r({type:String})],e.prototype,"rel",void 0),n([r({attribute:"formnovalidate",type:Boolean})],e.prototype,"formNoValidate",void 0),n([m({capture:!1,passive:!0})],e.prototype,"handleClick",null),e=n([f("esp-button")],e);export{e as EspalierButton};
+    `],o([v()],e.prototype,"innerTabindex",void 0),o([r({attribute:"button-type",type:String})],e.prototype,"buttonType",void 0),o([r({type:Boolean})],e.prototype,"collapsed",void 0),o([r({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0),o([r({type:String})],e.prototype,"href",void 0),o([r({attribute:"icon-only",type:Boolean})],e.prototype,"iconOnly",void 0),o([r({type:Boolean,reflect:!0})],e.prototype,"incognito",void 0),o([r({type:String})],e.prototype,"icon",void 0),o([r({attribute:"icon-position",type:String})],e.prototype,"iconPosition",void 0),o([r({type:String})],e.prototype,"label",void 0),o([r({type:Boolean,reflect:!0})],e.prototype,"loading",void 0),o([r({type:String})],e.prototype,"target",void 0),o([r({type:String})],e.prototype,"rel",void 0),o([r({type:String,attribute:"new-tab-label"})],e.prototype,"newTabLabel",void 0),o([r({attribute:"formnovalidate",type:Boolean})],e.prototype,"formNoValidate",void 0),o([m({capture:!1,passive:!0})],e.prototype,"handleClick",null),e=o([f("esp-button")],e);export{e as EspalierButton};

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

@@ -1,17 +1,26 @@
-var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(a,e,t,r);else for(var p=a.length-1;p>=0;p--)(h=a[p])&&(o=(i<3?h(o):i>3?h(e,t,o):h(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};import{css as v,html as d,nothing as c}from"lit";import{customElement as g,property as u}from"lit/decorators.js";import{classMap as b}from"lit/directives/class-map.js";import{keyed as f}from"lit/directives/keyed.js";import{createRef as y,ref as w}from"lit/directives/ref.js";import"../button/esp-button.js";import"../progress/esp-progress.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{previewLoadQueue as k}from"./preview-load-queue.js";const T="esp-internal-image-preview-remove",R="esp-internal-image-preview-retry",L=2,E=250,I=6e4;function l(a){const e=a.trim().toLowerCase();return e.length>0&&!e.startsWith("blob:")&&!e.startsWith("data:")}let s=class extends m{constructor(){super(...arguments),this.image=y(),this.url="",this.alt="",this.failed=!1,this.sourceToken=0,this.admittedUrl="",this.remoteImageLoaded=!1,this.imageLoadFailed=!1,this.automaticRetryCount=0,this.remotePreviewVisible=!1,this.visibilityObserver=null,this.queuedLoadCancel=null,this.loadSlotRelease=null,this.retryTimer=null,this.loadTimeoutTimer=null,this.activeSourceToken=null}connectedCallback(){super.connectedCallback(),this.startCurrentPreview()}disconnectedCallback(){this.stopVisibilityObserver(),this.cancelRemoteWork(),this.remoteImageLoaded=!1,this.admittedUrl="",this.sourceToken+=1,this.remotePreviewVisible=!1,super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),e.has("url")&&(this.stopVisibilityObserver(),this.cancelRemoteWork(),this.sourceToken+=1,this.admittedUrl="",this.remoteImageLoaded=!1,this.imageLoadFailed=!1,this.automaticRetryCount=0,this.remotePreviewVisible=!1)}updated(e){super.updated(e),e.has("url")&&this.startCurrentPreview()}startCurrentPreview(){if(!(!this.isConnected||!l(this.url))){if(typeof IntersectionObserver>"u"){this.remotePreviewVisible=!0,this.requestRemoteLoad();return}this.visibilityObserver??=new IntersectionObserver((e,t)=>{if(t!==this.visibilityObserver)return;const r=e.find(i=>i.target===this);!r||!this.isConnected||!l(this.url)||(this.remotePreviewVisible=r.isIntersecting,r.isIntersecting?this.requestRemoteLoad():!this.loadSlotRelease&&!this.remoteImageLoaded&&this.cancelQueuedLoad())},{threshold:0}),this.visibilityObserver.observe(this)}}stopVisibilityObserver(){this.visibilityObserver?.disconnect(),this.visibilityObserver=null}requestRemoteLoad(){if(!this.isConnected||!l(this.url)||!this.remotePreviewVisible||this.imageLoadFailed||this.remoteImageLoaded||this.loadSlotRelease||this.queuedLoadCancel||this.retryTimer)return;let e=!1;const t=k.request(r=>{if(e=!0,this.queuedLoadCancel=null,!this.isConnected||!l(this.url)||!this.remotePreviewVisible||this.imageLoadFailed||this.remoteImageLoaded){r();return}this.loadSlotRelease=r;const i=++this.sourceToken;this.activeSourceToken=i,this.admittedUrl=this.url,this.loadTimeoutTimer=setTimeout(()=>this.handleImageFailure(i),I),this.requestUpdate()});e||(this.queuedLoadCancel=t)}handleImageLoad(e,t){this.isActiveImageEvent(e,t)&&(this.completeActiveLoad(),this.remoteImageLoaded=!0,this.stopVisibilityObserver())}handleImageError(e,t){this.isActiveImageEvent(e,t)&&this.handleImageFailure(t)}isActiveImageEvent(e,t){return e.currentTarget instanceof HTMLImageElement&&e.currentTarget.getAttribute("src")===this.url&&t===this.activeSourceToken&&t===this.sourceToken&&this.loadSlotRelease!==null}handleImageFailure(e){if(e!==this.activeSourceToken||e!==this.sourceToken||!this.loadSlotRelease)return;if(this.abandonActiveLoad(),this.automaticRetryCount>=L){this.imageLoadFailed=!0,this.requestUpdate();return}this.automaticRetryCount+=1;const t=.75+Math.random()*.5,r=Math.round(E*2**(this.automaticRetryCount-1)*t),i=this.sourceToken;this.retryTimer=setTimeout(()=>{this.retryTimer=null,i===this.sourceToken&&this.requestRemoteLoad()},r)}completeActiveLoad(){this.releaseActiveLoad()}abandonActiveLoad(){if(!this.loadSlotRelease)return;const e=this.shadowRoot?.querySelector("img");e?.getAttribute("src")===this.admittedUrl&&e.removeAttribute("src"),this.admittedUrl="",this.sourceToken+=1,this.releaseActiveLoad(),this.isConnected&&this.requestUpdate()}releaseActiveLoad(){this.loadTimeoutTimer!==null&&(clearTimeout(this.loadTimeoutTimer),this.loadTimeoutTimer=null),this.activeSourceToken=null;const e=this.loadSlotRelease;this.loadSlotRelease=null,e?.()}cancelQueuedLoad(){const e=this.queuedLoadCancel;this.queuedLoadCancel=null,e?.()}cancelRemoteWork(){this.retryTimer!==null&&(clearTimeout(this.retryTimer),this.retryTimer=null),this.cancelQueuedLoad(),this.abandonActiveLoad()}retryImage(){l(this.url)&&(this.cancelRemoteWork(),this.sourceToken+=1,this.admittedUrl="",this.remoteImageLoaded=!1,this.imageLoadFailed=!1,this.automaticRetryCount=0,this.remotePreviewVisible=!0,this.requestRemoteLoad())}renderImage(){const t=l(this.url)?this.admittedUrl:this.url,r=this.sourceToken;return f(`${t}:${r}`,d`<img
-        ${w(this.image)}
-        src=${t||c}
+var l=function(n,e,t,o){var i=arguments.length,r=i<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(n,e,t,o);else for(var u=n.length-1;u>=0;u--)(a=n[u])&&(r=(i<3?a(r):i>3?a(e,t,r):a(e,t))||r);return i>3&&r&&Object.defineProperty(e,t,r),r};import{css as v,html as d,nothing as h}from"lit";import{customElement as b,property as c}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{keyed as f}from"lit/directives/keyed.js";import{createRef as w,ref as y}from"lit/directives/ref.js";import"../button/esp-button.js";import"../progress/esp-progress.js";import"../tooltip/esp-tooltip.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{getIconHrefForHost as k}from"../shared/intent-values.js";import{previewLoadQueue as x}from"./preview-load-queue.js";const T="esp-internal-image-preview-remove",E="esp-internal-image-preview-retry",L="esp-internal-image-preview-action",R=2,I=250,C=6e4;function p(n){const e=n.trim().toLowerCase();return e.length>0&&!e.startsWith("blob:")&&!e.startsWith("data:")}let s=class extends m{constructor(){super(...arguments),this.image=w(),this.url="",this.alt="",this.failed=!1,this.positionLabel="",this.sourceToken=0,this.admittedUrl="",this.remoteImageLoaded=!1,this.imageLoadFailed=!1,this.automaticRetryCount=0,this.remotePreviewVisible=!1,this.visibilityObserver=null,this.queuedLoadCancel=null,this.loadSlotRelease=null,this.retryTimer=null,this.loadTimeoutTimer=null,this.activeSourceToken=null}connectedCallback(){super.connectedCallback(),this.startCurrentPreview()}disconnectedCallback(){this.stopVisibilityObserver(),this.cancelRemoteWork(),this.remoteImageLoaded=!1,this.admittedUrl="",this.sourceToken+=1,this.remotePreviewVisible=!1,super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),e.has("url")&&(this.stopVisibilityObserver(),this.cancelRemoteWork(),this.sourceToken+=1,this.admittedUrl="",this.remoteImageLoaded=!1,this.imageLoadFailed=!1,this.automaticRetryCount=0,this.remotePreviewVisible=!1)}updated(e){super.updated(e),e.has("url")&&this.startCurrentPreview()}startCurrentPreview(){if(!(!this.isConnected||!p(this.url))){if(typeof IntersectionObserver>"u"){this.remotePreviewVisible=!0,this.requestRemoteLoad();return}this.visibilityObserver??=new IntersectionObserver((e,t)=>{if(t!==this.visibilityObserver)return;const o=e.find(i=>i.target===this);!o||!this.isConnected||!p(this.url)||(this.remotePreviewVisible=o.isIntersecting,o.isIntersecting?this.requestRemoteLoad():!this.loadSlotRelease&&!this.remoteImageLoaded&&this.cancelQueuedLoad())},{threshold:0}),this.visibilityObserver.observe(this)}}stopVisibilityObserver(){this.visibilityObserver?.disconnect(),this.visibilityObserver=null}requestRemoteLoad(){if(!this.isConnected||!p(this.url)||!this.remotePreviewVisible||this.imageLoadFailed||this.remoteImageLoaded||this.loadSlotRelease||this.queuedLoadCancel||this.retryTimer)return;let e=!1;const t=x.request(o=>{if(e=!0,this.queuedLoadCancel=null,!this.isConnected||!p(this.url)||!this.remotePreviewVisible||this.imageLoadFailed||this.remoteImageLoaded){o();return}this.loadSlotRelease=o;const i=++this.sourceToken;this.activeSourceToken=i,this.admittedUrl=this.url,this.loadTimeoutTimer=setTimeout(()=>this.handleImageFailure(i),C),this.requestUpdate()});e||(this.queuedLoadCancel=t)}handleImageLoad(e,t){this.isActiveImageEvent(e,t)&&(this.completeActiveLoad(),this.remoteImageLoaded=!0,this.stopVisibilityObserver())}handleImageError(e,t){this.isActiveImageEvent(e,t)&&this.handleImageFailure(t)}isActiveImageEvent(e,t){return e.currentTarget instanceof HTMLImageElement&&e.currentTarget.getAttribute("src")===this.url&&t===this.activeSourceToken&&t===this.sourceToken&&this.loadSlotRelease!==null}handleImageFailure(e){if(e!==this.activeSourceToken||e!==this.sourceToken||!this.loadSlotRelease)return;if(this.abandonActiveLoad(),this.automaticRetryCount>=R){this.imageLoadFailed=!0,this.requestUpdate();return}this.automaticRetryCount+=1;const t=.75+Math.random()*.5,o=Math.round(I*2**(this.automaticRetryCount-1)*t),i=this.sourceToken;this.retryTimer=setTimeout(()=>{this.retryTimer=null,i===this.sourceToken&&this.requestRemoteLoad()},o)}completeActiveLoad(){this.releaseActiveLoad()}abandonActiveLoad(){if(!this.loadSlotRelease)return;const e=this.shadowRoot?.querySelector("img");e?.getAttribute("src")===this.admittedUrl&&e.removeAttribute("src"),this.admittedUrl="",this.sourceToken+=1,this.releaseActiveLoad(),this.isConnected&&this.requestUpdate()}releaseActiveLoad(){this.loadTimeoutTimer!==null&&(clearTimeout(this.loadTimeoutTimer),this.loadTimeoutTimer=null),this.activeSourceToken=null;const e=this.loadSlotRelease;this.loadSlotRelease=null,e?.()}cancelQueuedLoad(){const e=this.queuedLoadCancel;this.queuedLoadCancel=null,e?.()}cancelRemoteWork(){this.retryTimer!==null&&(clearTimeout(this.retryTimer),this.retryTimer=null),this.cancelQueuedLoad(),this.abandonActiveLoad()}retryImage(){p(this.url)&&(this.cancelRemoteWork(),this.sourceToken+=1,this.admittedUrl="",this.remoteImageLoaded=!1,this.imageLoadFailed=!1,this.automaticRetryCount=0,this.remotePreviewVisible=!0,this.requestRemoteLoad())}renderImage(){const t=p(this.url)?this.admittedUrl:this.url,o=this.sourceToken;return f(`${t}:${o}`,d`<img
+        ${y(this.image)}
+        src=${t||h}
         alt=${this.alt}
         draggable="false"
         decoding="async"
-        @load=${i=>this.handleImageLoad(i,r)}
-        @error=${i=>this.handleImageError(i,r)}
-      />`)}render(){const e=this.progress!==void 0,t=this.failed&&!e,r=this.imageLoadFailed&&!e&&!t,i=e?this.alt?`Cancel upload and remove ${this.alt}`:"Cancel upload and remove image":this.alt?`Remove ${this.alt}`:"Remove image";return d`<div>
+        @load=${i=>this.handleImageLoad(i,o)}
+        @error=${i=>this.handleImageError(i,o)}
+      />`)}renderAction(){const{action:e}=this,t=this.alt||this.positionLabel,o=e?.label?.trim();return!e||!o||!k(e.icon,this)?h:d`<esp-tooltip class="preview-action" text=${o}>
+      <esp-button
+        data-preview-action
+        icon-only
+        collapsed
+        icon=${e.icon}
+        label=${t?`${o}: ${t}`:o}
+        @esp-clicked=${i=>{i.stopPropagation(),this.dispatchEvent(new CustomEvent(L))}}
+      ></esp-button>
+    </esp-tooltip>`}render(){const e=this.progress!==void 0,t=this.failed&&!e,o=this.imageLoadFailed&&!e&&!t,i=this.alt||this.positionLabel,r=e?i?`Cancel upload and remove ${i}`:"Cancel upload and remove image":i?`Remove ${i}`:"Remove image";return d`<div>
       ${this.renderImage()}
       <button
         type="button"
-        aria-label=${i}
-        class=${b({uploading:e})}
+        aria-label=${r}
+        class=${g({uploading:e})}
         @click=${()=>{this.dispatchEvent(new CustomEvent(T,{detail:this,bubbles:!0,composed:!0}))}}
       >
         <svg
@@ -38,7 +47,7 @@ var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnP
                 label="Upload progress"
               ></esp-progress>
             </div>
-          `:c}
+          `:h}
       ${t?d`
             <div class="upload-overlay failed">
               <svg
@@ -63,13 +72,13 @@ var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnP
                 class="retry-btn"
                 collapsed
                 label="Retry upload"
-                @esp-clicked=${o=>{o.stopPropagation(),this.dispatchEvent(new CustomEvent(R,{detail:this,bubbles:!0,composed:!0}))}}
+                @esp-clicked=${a=>{a.stopPropagation(),this.dispatchEvent(new CustomEvent(E,{detail:this,bubbles:!0,composed:!0}))}}
               >
                 Retry
               </esp-button>
             </div>
-          `:c}
-      ${r?d`
+          `:h}
+      ${o?d`
             <div class="upload-overlay failed image-load-failed">
               <svg
                 class="alert-icon"
@@ -93,17 +102,48 @@ var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnP
                 class="image-retry-btn"
                 collapsed
                 label="Retry image"
-                @esp-clicked=${o=>{o.stopPropagation(),this.retryImage()}}
+                @esp-clicked=${a=>{a.stopPropagation(),this.retryImage()}}
               >
                 Retry image
               </esp-button>
             </div>
-          `:c}
+          `:h}
+      ${e||t||o?h:this.renderAction()}
     </div>`}};s.styles=[...m.styles,v`
       :host {
         display: block;
         box-sizing: border-box;
         position: relative;
+        
+        container-type: size;
+      }
+
+      
+      .preview-action {
+        position: absolute;
+        right: var(--esp-size-padding);
+        bottom: var(--esp-size-padding);
+        z-index: 3;
+      }
+
+      .preview-action esp-button::part(wrapper) {
+        box-shadow: 1px 1px 2px var(--esp-color-shadow);
+      }
+
+      
+      .preview-action esp-button:focus-within::part(wrapper) {
+        box-shadow: 0 0 0 2px var(--esp-color-background);
+        outline: 2px solid var(--esp-color-text);
+        outline-offset: 2px;
+      }
+
+      @container (max-width: 96px) or (max-height: 150px) {
+        .preview-action {
+          
+          right: 4px;
+          bottom: 4px;
+          --esp-button-padding: calc(var(--esp-size-tiny) / 2);
+        }
       }
 
       div {
@@ -122,7 +162,6 @@ var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnP
         }
 
         button:not(.retry-btn) {
-          visibility: hidden;
           display: grid;
           place-content: center;
           cursor: pointer;
@@ -148,20 +187,23 @@ var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnP
             border-color: oklch(from var(--esp-color-danger) var(--esp-l-shadow) c h);
           }
 
-          svg {
-            height: var(--esp-size-medium);
+          
+          &:focus-visible {
+            box-shadow: 0 0 0 2px var(--esp-color-background);
+            outline: 2px solid var(--esp-color-text);
+            outline-offset: 2px;
           }
 
-          
-          &.uploading {
-            visibility: visible;
+          svg {
+            height: var(--esp-size-medium);
           }
         }
 
-        &:hover,
-        &:focus-within {
-          button:not(.retry-btn) {
-            visibility: visible;
+        
+        @media (hover: hover) {
+          &:not(:hover, :focus-within) button:not(.retry-btn, .uploading) {
+            opacity: 0;
+            pointer-events: none;
           }
         }
       }
@@ -208,4 +250,4 @@ var n=function(a,e,t,r){var i=arguments.length,o=i<3?e:r===null?r=Object.getOwnP
         --esp-color-action-text: var(--esp-image-preview-overlay-text, var(--esp-color-layer-1));
         --esp-color-border: var(--esp-image-preview-overlay-text, var(--esp-color-layer-1));
       }
-    `],n([u()],s.prototype,"url",void 0),n([u()],s.prototype,"alt",void 0),n([u({type:Number})],s.prototype,"progress",void 0),n([u({type:Boolean})],s.prototype,"failed",void 0),s=n([g("esp-image-preview")],s);export{s as EspalierImagePreview};
+    `],l([c()],s.prototype,"url",void 0),l([c()],s.prototype,"alt",void 0),l([c({type:Number})],s.prototype,"progress",void 0),l([c({type:Boolean})],s.prototype,"failed",void 0),l([c({attribute:!1})],s.prototype,"action",void 0),l([c({attribute:!1})],s.prototype,"positionLabel",void 0),s=l([b("esp-image-preview")],s);export{s as EspalierImagePreview};

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

@@ -1,4 +1,4 @@
-import { type EspalierUploadImage, type ExistingImage } from "./image-helpers.js";
+import { type EspalierUploadImage, type ExistingImage, type ImagePreviewAction } from "./image-helpers.js";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 /**
  * Used to upload images.
@@ -116,6 +116,66 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * <esp-image-upload></esp-image-upload>
  * ```
  *
+ * **Keyboard and touch**
+ *
+ * Tab reaches each preview's remove button, then its action if `previewAction` is
+ * set, and finally Add photos. Enter or Space removes that image and moves focus to
+ * Add photos, scrolling it into view if a long album has pushed it off screen.
+ *
+ * With a mouse, the remove button appears when the pointer is over a preview or
+ * focus is inside it. A device without hover (`(hover: none)`) always shows it,
+ * because a tap on a hidden button would remove the image with no warning. A
+ * touchscreen laptop whose primary pointer has hover keeps the mouse behaviour, so a
+ * tap on a photo's empty corner there can still remove it.
+ *
+ * Each control's accessible name says which image it acts on. A selected image uses
+ * its file name, as in `Remove holiday.jpg`. An existing image uses its position, as
+ * in `Remove image 3 of 12`, which follows removal and reordering.
+ *
+ * **Adding an action to each preview**
+ *
+ * Set `previewAction` to show a labelled icon button in the lower-right of each
+ * completed preview, for example to open your own dialog about one image. There
+ * is no button by default.
+ *
+ * - `label` is the tooltip and the start of the accessible name, which continues
+ *   with the image's file name or position, as in `Edit details: image 3 of 12`.
+ * - `icon` is an icon name from the sprite configured on `esp-root`.
+ *
+ * Existing images offer the button straight away, and selected images once
+ * `onComplete` has run. It is hidden while an image uploads, after `onFailed`,
+ * after Retry until the next `onComplete`, and while the preview shows that its
+ * image failed to load. Activating it never removes the image, opens the file
+ * picker or starts a drag.
+ *
+ * `detail.image` on `esp-image-upload-preview-action` is the object in
+ * `uploadedImages` itself, and it stays the same object through reorder and
+ * upload completion. An album can hold the same image twice, so keep anything
+ * specific to one use against this object, not against `uploadedId` or an index.
+ * If your dialog applies a change later, first check that
+ * `uploadedImages.includes(image)` is still true.
+ *
+ * ```html
+ * <script>
+ *   const uploader = findByTagName("esp-image-upload")[0];
+ *   uploader.previewAction = { label: "Edit details", icon: "edit" };
+ *   uploader.setExistingImages([
+ *     { url: "https://picsum.photos/id/29/1200/800", width: 1200, height: 800, uploadedId: "img-1" },
+ *     { url: "https://picsum.photos/id/15/900/1200", width: 900,  height: 1200, uploadedId: "img-2" },
+ *   ]);
+ *   uploader.addEventListener("esp-image-upload-file-selected", (e) => {
+ *     // Stub — replace with your real upload. The button appears on completion.
+ *     setTimeout(() => e.detail.onComplete("id-" + e.detail.image.file.name), 1500);
+ *   });
+ *   uploader.addEventListener("esp-image-upload-preview-action", (e) => {
+ *     const { image } = e.detail;
+ *     const name = image.source === "selected" ? image.file.name : image.uploadedId;
+ *     showToast({ message: "Edit details for " + name, icon: "info-i", duration: 3 });
+ *   });
+ * </script>
+ * <esp-image-upload></esp-image-upload>
+ * ```
+ *
  * @event {CustomEvent<EspalierUploadImage>} esp-image-upload-file-removed - Fired when
  * an image has been removed by the user. Narrow on `detail.source` to
  * distinguish newly selected images from pre-existing server images.
@@ -141,6 +201,13 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * (`detail.unsupported`) or because they could not be read or decoded
  * (`detail.unreadable`). The component also shows a transient inline notice.
  *
+ * @event {CustomEvent<ImagePreviewActionDetail>} esp-image-upload-preview-action - Fired
+ * once each time the user activates the `previewAction` button on a completed
+ * preview, whether by pointer, touch or keyboard. `detail.image` is the object in
+ * `uploadedImages` itself, so it identifies one use of an image even when an album
+ * holds the same `uploadedId` twice, and it stays the same object through reorder
+ * and upload completion.
+ *
  * @cssprop --esp-image-upload-preview-background - The background color of the image preview area.
  * @docPageTitle Image Upload
  * @docUrl /components/image-upload
@@ -172,6 +239,16 @@ export declare class EspalierImageUpload extends EspalierElementBase {
      * @type {number}
      */
     maxRowHeightVh: number;
+    /**
+     * An optional action button in the lower-right of each completed preview,
+     * reported through `esp-image-upload-preview-action`. Clear it, or leave it
+     * unset, for no button. A blank `label` or an invalid `icon` name also shows
+     * none. Assign a new object to change it, since the component does not watch
+     * the object's fields.
+     *
+     * @type {ImagePreviewAction}
+     */
+    previewAction?: ImagePreviewAction | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

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

@@ -1,25 +1,25 @@
-var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(_,e,t,i);else for(var n=_.length-1;n>=0;n--)(d=_[n])&&(r=(o<3?d(r):o>3?d(e,t,r):d(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r},m;import{css as A,html as w}from"lit";import{customElement as R,property as x,state as b}from"lit/decorators.js";import{createRef as I,ref as E}from"lit/directives/ref.js";import"./esp-image-preview.js";import{classMap as P}from"lit/directives/class-map.js";import{getImageDetails as M,releasePreviewUrl as y}from"./image-helpers.js";const U=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+var g=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(_,e,t,i);else for(var l=_.length-1;l>=0;l--)(d=_[l])&&(r=(o<3?d(r):o>3?d(e,t,r):d(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r},m;import{css as D,html as b}from"lit";import{customElement as R,property as w,state as x}from"lit/decorators.js";import{createRef as I,ref as E}from"lit/directives/ref.js";import"./esp-image-preview.js";import{classMap as P}from"lit/directives/class-map.js";import{getImageDetails as M,releasePreviewUrl as y}from"./image-helpers.js";const L=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M11.911 3.634a2 2 0 0 1 1.089 1.78l.001 2.586h6.999a2 2 0 0 1 2 2v4l-.005 .15a2 2 0 0 1 -1.995 1.85l-6.999 -.001l-.001 2.587a2 2 0 0 1 -3.414 1.414l-6.586 -6.586a2 2 0 0 1 0 -2.828l6.586 -6.586a2 2 0 0 1 2.18 -.434l.145 .068z" />
-</svg>`,k=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+</svg>`,U=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001 2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0 1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414 1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2 2 0 0 0 -2.18 -.434l-.145 .068z" />
-</svg>`;import{EspalierElementBase as D}from"../shared/esp-element-base.js";import{calculateAlbumLayout as C,DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH as L,normalizeAlbumMaxRowHeightVh as O}from"../shared/justified-layout.js";import{ESP_EVENTS as v}from"../shared/events.js";import{viewportSize as H}from"../shared/viewport.js";const S=220,T=4,$=8e3;let c=m=class extends D{constructor(){super(...arguments),this.uploadInput=I(),this.previewsDiv=I(),this.dropAreaDiv=I(),this.draggingOver=!1,this.uploadedImages=[],this.accept="image/jpeg, image/png, image/webp",this.maxRowHeightVh=L,this._rejectionNotice="",this._uploadState=new WeakMap,this._selectionGeneration=0,this._chromeWidth=null,this._resizeObserver=new ResizeObserver(()=>{this._chromeWidth=null,this.requestUpdate()}),this._handleViewportResize=()=>{this._chromeWidth=null,this.requestUpdate()},this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragStartX=0,this._dragStartY=0,this._dragActive=!1,this._ghostEl=null,this._ghostHalfW=0,this._ghostHalfH=0,this._arrowEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._savedBodyUserSelect="",this._handleDragPointerDown=e=>{if(e.button!==0||this._dragPointerId!==null||e.composedPath().some(o=>o instanceof HTMLElement&&(o.tagName==="BUTTON"||o.tagName==="ESP-BUTTON")))return;const i=this._getPreviewIndex(e);i!==null&&(this._dragPointerId=e.pointerId,this._dragSourceIndex=i,this._dragStartX=e.clientX,this._dragStartY=e.clientY,this._dragActive=!1,document.addEventListener("pointermove",this._onDocPointerMove),document.addEventListener("pointerup",this._onDocPointerUp),document.addEventListener("pointercancel",this._onDocPointerUp))},this._onDocPointerMove=e=>{if(this._dragSourceIndex===null||e.pointerId!==this._dragPointerId)return;const t=e.clientX-this._dragStartX,i=e.clientY-this._dragStartY;if(!this._dragActive){if(Math.sqrt(t*t+i*i)<m._DRAG_THRESHOLD)return;this._dragActive=!0,this._createGhost(e.clientX,e.clientY);const n=this.shadowRoot?.querySelectorAll("esp-image-preview");n&&(this._cachedPreviews=Array.from(n).map(s=>({el:s,rect:s.getBoundingClientRect()})),this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity="0.3")),this._savedBodyUserSelect=document.body.style.userSelect,document.body.style.userSelect="none",this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="none")}this._ghostEl&&(this._ghostEl.style.transform=`translate(${e.clientX-this._ghostHalfW}px, ${e.clientY-this._ghostHalfH}px)`);const o=this._cachedPreviews;if(!o||o.length===0)return;let r=null,d=!1;for(let n=0;n<o.length;n++){const s=o[n].rect;if(e.clientX>=s.left&&e.clientX<=s.right&&e.clientY>=s.top&&e.clientY<=s.bottom){r=n,d=e.clientX>s.left+s.width/2;break}}if(r===null){let n=1/0;for(let s=0;s<o.length;s++){const l=o[s].rect,a=e.clientX-(l.left+l.width/2),h=e.clientY-(l.top+l.height/2),p=a*a+h*h;p<n&&(n=p,r=s)}if(r!==null){const s=o[r].rect;d=e.clientX>s.left+s.width/2}}r!==null&&(this._dragOverIndex=d?r+1:r,!(this._lastDropHit&&this._lastDropHit.index===r&&this._lastDropHit.after===d)&&(this._lastDropHit={index:r,after:d},this._updateDropTargets(o.map(n=>n.el),r,d)))},this._onDocPointerUp=e=>{if(e.pointerId===this._dragPointerId){if(this._dragActive&&this._dragSourceIndex!==null&&this._dragOverIndex!==null&&this._dragSourceIndex!==this._dragOverIndex&&this._dragSourceIndex+1!==this._dragOverIndex){const t=[...this.uploadedImages],[i]=t.splice(this._dragSourceIndex,1),o=this._dragOverIndex>this._dragSourceIndex?this._dragOverIndex-1:this._dragOverIndex;t.splice(o,0,i),this.uploadedImages=t,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_IMAGES_REORDERED,{detail:{images:this.uploadedImages},bubbles:!0,composed:!0}))}this._clearDragState()}},this._arrowColor=null,this.filesSelected=async e=>{const t=[],i=[];for(const a of e)(this._isAccepted(a)?t:i).push(a);if(!t.length){i.length&&this._reportRejectedFiles({unsupported:i,unreadable:[]});return}const o=this._selectionGeneration,r=Math.round(S*Math.min(globalThis.devicePixelRatio||1,2)),d=new Array(t.length).fill(null),n=[];let s=0;const l=async()=>{for(;s<t.length;){const a=s++,h=t[a];try{const p=await M(h,{thumbnailHeight:r});if(o!==this._selectionGeneration){y(p);continue}this._addSelectedImage(d,a,p)}catch{n.push(h)}}};await Promise.all(Array.from({length:Math.min(T,t.length)},()=>l())),(i.length||n.length)&&o===this._selectionGeneration&&this._reportRejectedFiles({unsupported:i,unreadable:n})},this._makeCallbacks=e=>({onProgress:t=>{const i=this._uploadState.get(e);i&&(i.progress=t,i.failed=!1,this.requestUpdate())},onComplete:t=>{if(!this._uploadState.get(e))return;e.uploadedId=t,this._uploadState.delete(e),!this.uploadedImages.find(r=>!r.uploadedId)?this.uploadedImages=[...this.uploadedImages]:this.requestUpdate()},onFailed:()=>{const t=this._uploadState.get(e);t&&(t.progress=void 0,t.failed=!0,this.requestUpdate())}}),this._fullPreviewUrls=new Map,this.setExistingImages=e=>{this._selectionGeneration++,this._releaseSelectedImages(),this.uploadedImages=e.filter(t=>t.url&&t.uploadedId&&Number.isFinite(t.width)&&t.width>0&&Number.isFinite(t.height)&&t.height>0).map(t=>({source:"existing",url:t.url,urls:t.urls,height:t.height,width:t.width,uploadedId:t.uploadedId,orientation:t.width>t.height?"landscape":"portrait"})),this._uploadState=new WeakMap}}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),window.addEventListener("resize",this._handleViewportResize)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect(),window.removeEventListener("resize",this._handleViewportResize),this._clearDragState(),clearTimeout(this._noticeTimer),this._selectionGeneration++,this._releaseSelectedImages()}_getPreviewIndex(e){const t=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!t)return null;for(const i of e.composedPath())if(i instanceof HTMLElement&&i.tagName==="ESP-IMAGE-PREVIEW"){for(let o=0;o<t.length;o++)if(t[o]===i)return o}return null}_clearDragState(){document.removeEventListener("pointermove",this._onDocPointerMove),document.removeEventListener("pointerup",this._onDocPointerUp),document.removeEventListener("pointercancel",this._onDocPointerUp),this._dragActive&&(this._cachedPreviews&&this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity=""),this._clearDropTargets(),document.body.style.userSelect=this._savedBodyUserSelect,this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="")),this._ghostEl?.remove(),this._ghostEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragActive=!1}_createGhost(e,t){const i=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!i||this._dragSourceIndex===null)return;const o=i[this._dragSourceIndex],r=o.getBoundingClientRect(),d=document.createElement("div"),n=Math.min(120/r.width,120/r.height),s=r.width*n,l=r.height*n;d.style.cssText=`
+</svg>`;import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{calculateAlbumLayout as C,DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH as k,normalizeAlbumMaxRowHeightVh as O}from"../shared/justified-layout.js";import{ESP_EVENTS as v}from"../shared/events.js";import{viewportSize as H}from"../shared/viewport.js";const S=220,T=4,$=8e3;let p=m=class extends A{constructor(){super(...arguments),this.uploadInput=I(),this.previewsDiv=I(),this.dropAreaDiv=I(),this.draggingOver=!1,this.uploadedImages=[],this.accept="image/jpeg, image/png, image/webp",this.maxRowHeightVh=k,this._rejectionNotice="",this._uploadState=new WeakMap,this._selectionGeneration=0,this._chromeWidth=null,this._resizeObserver=new ResizeObserver(()=>{this._chromeWidth=null,this.requestUpdate()}),this._handleViewportResize=()=>{this._chromeWidth=null,this.requestUpdate()},this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragStartX=0,this._dragStartY=0,this._dragActive=!1,this._ghostEl=null,this._ghostHalfW=0,this._ghostHalfH=0,this._arrowEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._savedBodyUserSelect="",this._handleDragPointerDown=e=>{if(e.button!==0||this._dragPointerId!==null||e.composedPath().some(o=>o instanceof HTMLElement&&(o.tagName==="BUTTON"||o.tagName==="ESP-BUTTON")))return;const i=this._getPreviewIndex(e);i!==null&&(this._dragPointerId=e.pointerId,this._dragSourceIndex=i,this._dragStartX=e.clientX,this._dragStartY=e.clientY,this._dragActive=!1,document.addEventListener("pointermove",this._onDocPointerMove),document.addEventListener("pointerup",this._onDocPointerUp),document.addEventListener("pointercancel",this._onDocPointerUp))},this._onDocPointerMove=e=>{if(this._dragSourceIndex===null||e.pointerId!==this._dragPointerId)return;const t=e.clientX-this._dragStartX,i=e.clientY-this._dragStartY;if(!this._dragActive){if(Math.sqrt(t*t+i*i)<m._DRAG_THRESHOLD)return;this._dragActive=!0,this._createGhost(e.clientX,e.clientY);const l=this.shadowRoot?.querySelectorAll("esp-image-preview");l&&(this._cachedPreviews=Array.from(l).map(s=>({el:s,rect:s.getBoundingClientRect()})),this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity="0.3")),this._savedBodyUserSelect=document.body.style.userSelect,document.body.style.userSelect="none",this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="none")}this._ghostEl&&(this._ghostEl.style.transform=`translate(${e.clientX-this._ghostHalfW}px, ${e.clientY-this._ghostHalfH}px)`);const o=this._cachedPreviews;if(!o||o.length===0)return;let r=null,d=!1;for(let l=0;l<o.length;l++){const s=o[l].rect;if(e.clientX>=s.left&&e.clientX<=s.right&&e.clientY>=s.top&&e.clientY<=s.bottom){r=l,d=e.clientX>s.left+s.width/2;break}}if(r===null){let l=1/0;for(let s=0;s<o.length;s++){const n=o[s].rect,a=e.clientX-(n.left+n.width/2),h=e.clientY-(n.top+n.height/2),c=a*a+h*h;c<l&&(l=c,r=s)}if(r!==null){const s=o[r].rect;d=e.clientX>s.left+s.width/2}}r!==null&&(this._dragOverIndex=d?r+1:r,!(this._lastDropHit&&this._lastDropHit.index===r&&this._lastDropHit.after===d)&&(this._lastDropHit={index:r,after:d},this._updateDropTargets(o.map(l=>l.el),r,d)))},this._onDocPointerUp=e=>{if(e.pointerId===this._dragPointerId){if(this._dragActive&&this._dragSourceIndex!==null&&this._dragOverIndex!==null&&this._dragSourceIndex!==this._dragOverIndex&&this._dragSourceIndex+1!==this._dragOverIndex){const t=[...this.uploadedImages],[i]=t.splice(this._dragSourceIndex,1),o=this._dragOverIndex>this._dragSourceIndex?this._dragOverIndex-1:this._dragOverIndex;t.splice(o,0,i),this.uploadedImages=t,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_IMAGES_REORDERED,{detail:{images:this.uploadedImages},bubbles:!0,composed:!0}))}this._clearDragState()}},this._arrowColor=null,this.filesSelected=async e=>{const t=[],i=[];for(const a of e)(this._isAccepted(a)?t:i).push(a);if(!t.length){i.length&&this._reportRejectedFiles({unsupported:i,unreadable:[]});return}const o=this._selectionGeneration,r=Math.round(S*Math.min(globalThis.devicePixelRatio||1,2)),d=new Array(t.length).fill(null),l=[];let s=0;const n=async()=>{for(;s<t.length;){const a=s++,h=t[a];try{const c=await M(h,{thumbnailHeight:r});if(o!==this._selectionGeneration){y(c);continue}this._addSelectedImage(d,a,c)}catch{l.push(h)}}};await Promise.all(Array.from({length:Math.min(T,t.length)},()=>n())),(i.length||l.length)&&o===this._selectionGeneration&&this._reportRejectedFiles({unsupported:i,unreadable:l})},this._makeCallbacks=e=>({onProgress:t=>{const i=this._uploadState.get(e);i&&(i.progress=t,i.failed=!1,this.requestUpdate())},onComplete:t=>{if(!this._uploadState.get(e))return;e.uploadedId=t,this._uploadState.delete(e),!this.uploadedImages.find(r=>!r.uploadedId)?this.uploadedImages=[...this.uploadedImages]:this.requestUpdate()},onFailed:()=>{const t=this._uploadState.get(e);t&&(t.progress=void 0,t.failed=!0,this.requestUpdate())}}),this._fullPreviewUrls=new Map,this.setExistingImages=e=>{this._selectionGeneration++,this._releaseSelectedImages(),this.uploadedImages=e.filter(t=>t.url&&t.uploadedId&&Number.isFinite(t.width)&&t.width>0&&Number.isFinite(t.height)&&t.height>0).map(t=>({source:"existing",url:t.url,urls:t.urls,height:t.height,width:t.width,uploadedId:t.uploadedId,orientation:t.width>t.height?"landscape":"portrait"})),this._uploadState=new WeakMap}}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),window.addEventListener("resize",this._handleViewportResize)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect(),window.removeEventListener("resize",this._handleViewportResize),this._clearDragState(),clearTimeout(this._noticeTimer),this._selectionGeneration++,this._releaseSelectedImages()}_getPreviewIndex(e){const t=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!t)return null;for(const i of e.composedPath())if(i instanceof HTMLElement&&i.tagName==="ESP-IMAGE-PREVIEW"){for(let o=0;o<t.length;o++)if(t[o]===i)return o}return null}_clearDragState(){document.removeEventListener("pointermove",this._onDocPointerMove),document.removeEventListener("pointerup",this._onDocPointerUp),document.removeEventListener("pointercancel",this._onDocPointerUp),this._dragActive&&(this._cachedPreviews&&this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity=""),this._clearDropTargets(),document.body.style.userSelect=this._savedBodyUserSelect,this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="")),this._ghostEl?.remove(),this._ghostEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragActive=!1}_createGhost(e,t){const i=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!i||this._dragSourceIndex===null)return;const o=i[this._dragSourceIndex],r=o.getBoundingClientRect(),d=document.createElement("div"),l=Math.min(120/r.width,120/r.height),s=r.width*l,n=r.height*l;d.style.cssText=`
       position: fixed;
       left: 0;
       top: 0;
       z-index: 10001;
       pointer-events: none;
       width: ${s}px;
-      height: ${l}px;
+      height: ${n}px;
       border: 2px dashed var(--esp-color-action-background, #4aa);
       border-radius: var(--esp-size-border-radius, 4px);
       background-size: cover;
       background-position: center;
       opacity: 0.85;
       will-change: transform;
-      transform: translate(${e-s/2}px, ${t-l/2}px);
-    `;const a=o.shadowRoot?.querySelector("img");a&&(d.style.backgroundImage=`url(${a.src})`),document.body.appendChild(d),this._ghostEl=d,this._ghostHalfW=s/2,this._ghostHalfH=l/2}_updateDropTargets(e,t,i){for(let a=0;a<e.length;a++){const h=e[a];a===t&&a!==this._dragSourceIndex?h.setAttribute("data-drop-side",i?"right":"left"):h.removeAttribute("data-drop-side")}if(t===this._dragSourceIndex){this._arrowEl&&(this._arrowEl.style.display="none");return}const o=this._cachedPreviews,r=o?o[t].rect:e[t].getBoundingClientRect(),d=i?k:U;if(!this._arrowEl){const a=document.createElement("div");a.style.cssText=`
+      transform: translate(${e-s/2}px, ${t-n/2}px);
+    `;const a=o.shadowRoot?.querySelector("img");a&&(d.style.backgroundImage=`url(${a.src})`),document.body.appendChild(d),this._ghostEl=d,this._ghostHalfW=s/2,this._ghostHalfH=n/2}_updateDropTargets(e,t,i){for(let a=0;a<e.length;a++){const h=e[a];a===t&&a!==this._dragSourceIndex?h.setAttribute("data-drop-side",i?"right":"left"):h.removeAttribute("data-drop-side")}if(t===this._dragSourceIndex){this._arrowEl&&(this._arrowEl.style.display="none");return}const o=this._cachedPreviews,r=o?o[t].rect:e[t].getBoundingClientRect(),d=i?U:L;if(!this._arrowEl){const a=document.createElement("div");a.style.cssText=`
         position: fixed;
         left: 0;
         top: 0;
@@ -30,27 +30,30 @@ var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
         justify-content: center;
         will-change: transform;
         filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
-      `,document.body.appendChild(a),this._arrowEl=a;const h=e[t],u=getComputedStyle(h).getPropertyValue("--esp-color-complementary").trim();this._arrowColor=u?`oklch(from ${u} var(--esp-l-accent) c h)`:"oklch(0.7 0.2 330)"}this._arrowEl.innerHTML=d;const n=this._arrowEl.querySelector("svg");n&&(n.style.width="40px",n.style.height="40px",n.style.color=this._arrowColor??"oklch(0.7 0.2 330)"),this._arrowEl.style.display="flex";const s=i?r.left+r.width*.75:r.left+r.width*.25,l=r.top+r.height/2;this._arrowEl.style.transform=`translate(${s-20}px, ${l-20}px)`}_clearDropTargets(){const e=this.shadowRoot?.querySelectorAll("esp-image-preview");if(e)for(const t of e)t.removeAttribute("data-drop-side");this._arrowEl?.remove(),this._arrowEl=null,this._arrowColor=null}getContainerWidth(){const e=this.parentElement??this.offsetParent,t=e?e.getBoundingClientRect().width:window.innerWidth;if(t<=0){const i=window.innerWidth;return i<640?i-32:i<1024?i*90/100-32:Math.min(i*85/100-32,1400)}if(this._chromeWidth===null){const i=this.previewsDiv.value;if(i){const o=l=>{const a=parseFloat(l);return Number.isFinite(a)?a:0},r=getComputedStyle(i),d=o(r.paddingLeft)+o(r.paddingRight),n=this.shadowRoot?.querySelector(".esp-field"),s=n?o(getComputedStyle(n).borderLeftWidth)+o(getComputedStyle(n).borderRightWidth):0;this._chromeWidth=d+s}}return Math.max(t-(this._chromeWidth??0),1)}_isAccepted(e){const t=this.accept.split(",").map(r=>r.trim().toLowerCase()).filter(Boolean);if(!t.length)return e.type.toLowerCase().startsWith("image/");const i=e.type.toLowerCase(),o=e.name.toLowerCase();return t.some(r=>r.startsWith(".")?o.endsWith(r):r.endsWith("/*")?i.startsWith(r.slice(0,-1)):i===r)}_addSelectedImage(e,t,i){e[t]=i;const o=[...this.uploadedImages];let r=-1;for(let n=t-1;n>=0&&r<0;n--){const s=e[n];if(!s)continue;const l=o.indexOf(s);l>=0&&(r=l+1)}for(let n=t+1;n<e.length&&r<0;n++){const s=e[n];if(!s)continue;const l=o.indexOf(s);l>=0&&(r=l)}r<0&&(r=o.length),o.splice(r,0,i);const d=new AbortController;this._uploadState.set(i,{progress:null,failed:!1,controller:d}),this.uploadedImages=o,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILE_SELECTED,{detail:{image:i,signal:d.signal,...this._makeCallbacks(i)},bubbles:!0,composed:!0}))}_reportRejectedFiles(e){this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILES_REJECTED,{detail:e,bubbles:!0,composed:!0}));const t=o=>o===1?"file":"files",i=[];e.unsupported.length&&i.push(`${e.unsupported.length} unsupported ${t(e.unsupported.length)} skipped`),e.unreadable.length&&i.push(`${e.unreadable.length} ${t(e.unreadable.length)} could not be read`),this._rejectionNotice=i.join("; "),clearTimeout(this._noticeTimer),this._noticeTimer=setTimeout(()=>{this._rejectionNotice=""},$)}_previewUrlFor(e,t,i){const o=e.width>0&&e.height>0?e.width/e.height:1,r=Math.max(t,(i??0)/o);if(e.source!=="selected")return this._pickExistingPreviewUrl(e,r);const d=Math.min(globalThis.devicePixelRatio||1,2),n=S*d;if(r*d<=n*m._THUMBNAIL_UPSCALE_SLACK||e.height<=n)return e.url;let a=this._fullPreviewUrls.get(e);return a||(a=URL.createObjectURL(e.file),this._fullPreviewUrls.set(e,a)),a}_pickExistingPreviewUrl(e,t){const i=e.urls;if(!i?.length)return e.url;const o=Math.min(globalThis.devicePixelRatio||1,2),r=e.height>0?e.width/e.height:1,d=t*r*o,n=[...i].sort((l,a)=>l.minWidth-a.minWidth);return(n.find(l=>l.minWidth>=d)??n[n.length-1]).url}_releaseFullPreviewUrl(e){if(e.source!=="selected")return;const t=this._fullPreviewUrls.get(e);t&&(URL.revokeObjectURL(t),this._fullPreviewUrls.delete(e))}_releaseSelectedImages(){for(const e of this.uploadedImages)e.source==="selected"&&(this._uploadState.get(e)?.controller.abort(),y(e));for(const e of this._fullPreviewUrls.values())URL.revokeObjectURL(e);this._fullPreviewUrls.clear()}render(){const{draggingOver:e,uploadedImages:t}=this,i={"dragging-over":e,"has-previews":t.length},o=this.getContainerWidth(),{height:r}=H(),d=r>0?r*O(this.maxRowHeightVh)/100:Number.POSITIVE_INFINITY,n=C(t,{containerWidth:o,targetRowHeight:S,gap:8,maxRowHeight:d,maxImagesPerRow:this.maxImagesPerRow});return w` <div
+      `,document.body.appendChild(a),this._arrowEl=a;const h=e[t],u=getComputedStyle(h).getPropertyValue("--esp-color-complementary").trim();this._arrowColor=u?`oklch(from ${u} var(--esp-l-accent) c h)`:"oklch(0.7 0.2 330)"}this._arrowEl.innerHTML=d;const l=this._arrowEl.querySelector("svg");l&&(l.style.width="40px",l.style.height="40px",l.style.color=this._arrowColor??"oklch(0.7 0.2 330)"),this._arrowEl.style.display="flex";const s=i?r.left+r.width*.75:r.left+r.width*.25,n=r.top+r.height/2;this._arrowEl.style.transform=`translate(${s-20}px, ${n-20}px)`}_clearDropTargets(){const e=this.shadowRoot?.querySelectorAll("esp-image-preview");if(e)for(const t of e)t.removeAttribute("data-drop-side");this._arrowEl?.remove(),this._arrowEl=null,this._arrowColor=null}getContainerWidth(){const e=this.parentElement??this.offsetParent,t=e?e.getBoundingClientRect().width:window.innerWidth;if(t<=0){const i=window.innerWidth;return i<640?i-32:i<1024?i*90/100-32:Math.min(i*85/100-32,1400)}if(this._chromeWidth===null){const i=this.previewsDiv.value;if(i){const o=n=>{const a=parseFloat(n);return Number.isFinite(a)?a:0},r=getComputedStyle(i),d=o(r.paddingLeft)+o(r.paddingRight),l=this.shadowRoot?.querySelector(".esp-field"),s=l?o(getComputedStyle(l).borderLeftWidth)+o(getComputedStyle(l).borderRightWidth):0;this._chromeWidth=d+s}}return Math.max(t-(this._chromeWidth??0),1)}_isAccepted(e){const t=this.accept.split(",").map(r=>r.trim().toLowerCase()).filter(Boolean);if(!t.length)return e.type.toLowerCase().startsWith("image/");const i=e.type.toLowerCase(),o=e.name.toLowerCase();return t.some(r=>r.startsWith(".")?o.endsWith(r):r.endsWith("/*")?i.startsWith(r.slice(0,-1)):i===r)}_addSelectedImage(e,t,i){e[t]=i;const o=[...this.uploadedImages];let r=-1;for(let l=t-1;l>=0&&r<0;l--){const s=e[l];if(!s)continue;const n=o.indexOf(s);n>=0&&(r=n+1)}for(let l=t+1;l<e.length&&r<0;l++){const s=e[l];if(!s)continue;const n=o.indexOf(s);n>=0&&(r=n)}r<0&&(r=o.length),o.splice(r,0,i);const d=new AbortController;this._uploadState.set(i,{progress:null,failed:!1,controller:d}),this.uploadedImages=o,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILE_SELECTED,{detail:{image:i,signal:d.signal,...this._makeCallbacks(i)},bubbles:!0,composed:!0}))}_reportRejectedFiles(e){this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILES_REJECTED,{detail:e,bubbles:!0,composed:!0}));const t=o=>o===1?"file":"files",i=[];e.unsupported.length&&i.push(`${e.unsupported.length} unsupported ${t(e.unsupported.length)} skipped`),e.unreadable.length&&i.push(`${e.unreadable.length} ${t(e.unreadable.length)} could not be read`),this._rejectionNotice=i.join("; "),clearTimeout(this._noticeTimer),this._noticeTimer=setTimeout(()=>{this._rejectionNotice=""},$)}_emitPreviewAction(e){!this.uploadedImages.includes(e)||this._uploadState.has(e)||this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_PREVIEW_ACTION,{detail:{image:e},bubbles:!0,composed:!0}))}_previewUrlFor(e,t,i){const o=e.width>0&&e.height>0?e.width/e.height:1,r=Math.max(t,(i??0)/o);if(e.source!=="selected")return this._pickExistingPreviewUrl(e,r);const d=Math.min(globalThis.devicePixelRatio||1,2),l=S*d;if(r*d<=l*m._THUMBNAIL_UPSCALE_SLACK||e.height<=l)return e.url;let a=this._fullPreviewUrls.get(e);return a||(a=URL.createObjectURL(e.file),this._fullPreviewUrls.set(e,a)),a}_pickExistingPreviewUrl(e,t){const i=e.urls;if(!i?.length)return e.url;const o=Math.min(globalThis.devicePixelRatio||1,2),r=e.height>0?e.width/e.height:1,d=t*r*o,l=[...i].sort((n,a)=>n.minWidth-a.minWidth);return(l.find(n=>n.minWidth>=d)??l[l.length-1]).url}_releaseFullPreviewUrl(e){if(e.source!=="selected")return;const t=this._fullPreviewUrls.get(e);t&&(URL.revokeObjectURL(t),this._fullPreviewUrls.delete(e))}_releaseSelectedImages(){for(const e of this.uploadedImages)e.source==="selected"&&(this._uploadState.get(e)?.controller.abort(),y(e));for(const e of this._fullPreviewUrls.values())URL.revokeObjectURL(e);this._fullPreviewUrls.clear()}render(){const{draggingOver:e,uploadedImages:t}=this,i={"dragging-over":e,"has-previews":t.length},o=this.getContainerWidth(),{height:r}=H(),d=r>0?r*O(this.maxRowHeightVh)/100:Number.POSITIVE_INFINITY,l=C(t,{containerWidth:o,targetRowHeight:S,gap:8,maxRowHeight:d,maxImagesPerRow:this.maxImagesPerRow});return b` <div
       class="esp-field"
-      @click=${()=>{this.dropAreaDiv.value?.focus({preventScroll:!0})}}
+      @click=${s=>{const n=s.composedPath();if(n.some(c=>c instanceof HTMLElement&&c.hasAttribute("data-preview-action")))return;const h=s.detail===0&&n.some(c=>c instanceof HTMLElement&&c.localName==="esp-image-preview");this.dropAreaDiv.value?.focus({preventScroll:!h})}}
       @dragover=${s=>{s.preventDefault(),this.draggingOver=!0}}
       @dragleave=${s=>{s.preventDefault(),this.draggingOver=!1}}
-      @drop=${s=>{s.preventDefault(),this.draggingOver=!1;const l=s.dataTransfer?.files;l&&l.length&&this.filesSelected(l)}}
+      @drop=${s=>{s.preventDefault(),this.draggingOver=!1;const n=s.dataTransfer?.files;n&&n.length&&this.filesSelected(n)}}
     >
       <div
         ${E(this.previewsDiv)}
         class=${P({previews:!0,...i})}
         @pointerdown=${this._handleDragPointerDown}
       >
-        ${n.map(s=>w`<div class="photo-row" style="height: ${s.height}px;">
-            ${s.items.map(({image:l,width:a})=>{const h=s.height,p=this._uploadState.get(l);return w`<esp-image-preview
+        ${l.map(s=>b`<div class="photo-row" style="height: ${s.height}px;">
+            ${s.items.map(({image:n,width:a})=>{const h=s.height,c=this._uploadState.get(n);return b`<esp-image-preview
                 style="width: ${a}px; height: ${h}px; flex-shrink: 0;"
-                .url=${this._previewUrlFor(l,h,a)}
-                .alt=${l.source==="selected"?l.file.name:""}
-                .progress=${p?.progress}
-                .failed=${p?.failed??!1}
-                @esp-internal-image-preview-remove=${()=>{const u=this.uploadedImages.indexOf(l);if(u<0)return;this._uploadState.get(l)?.controller.abort(),this._uploadState.delete(l),y(l),this._releaseFullPreviewUrl(l);const g=[...this.uploadedImages];g.splice(u,1),this.uploadedImages=g,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILE_REMOVED,{detail:l,bubbles:!0,composed:!0}))}}
-                @esp-internal-image-preview-retry=${()=>{if(l.source!=="selected")return;const u=new AbortController,g=this._uploadState.get(l);g?(g.failed=!1,g.progress=null,g.controller=u):this._uploadState.set(l,{progress:null,failed:!1,controller:u}),this.requestUpdate(),this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_RETRY,{detail:{image:l,signal:u.signal,...this._makeCallbacks(l)},bubbles:!0,composed:!0}))}}
+                .url=${this._previewUrlFor(n,h,a)}
+                .alt=${n.source==="selected"?n.file.name:""}
+                .positionLabel=${`image ${t.indexOf(n)+1} of ${t.length}`}
+                .progress=${c?.progress}
+                .failed=${c?.failed??!1}
+                .action=${this.previewAction}
+                @esp-internal-image-preview-action=${()=>this._emitPreviewAction(n)}
+                @esp-internal-image-preview-remove=${()=>{const u=this.uploadedImages.indexOf(n);if(u<0)return;this._uploadState.get(n)?.controller.abort(),this._uploadState.delete(n),y(n),this._releaseFullPreviewUrl(n);const f=[...this.uploadedImages];f.splice(u,1),this.uploadedImages=f,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILE_REMOVED,{detail:n,bubbles:!0,composed:!0}))}}
+                @esp-internal-image-preview-retry=${()=>{if(n.source!=="selected")return;const u=new AbortController,f=this._uploadState.get(n);f?(f.failed=!1,f.progress=null,f.controller=u):this._uploadState.set(n,{progress:null,failed:!1,controller:u}),this.requestUpdate(),this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_RETRY,{detail:{image:n,signal:u.signal,...this._makeCallbacks(n)},bubbles:!0,composed:!0}))}}
               ></esp-image-preview>`})}
           </div>`)}
       </div>
@@ -61,7 +64,7 @@ var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
         aria-label="Add photos"
         class=${P({"drop-area":!0,...i})}
         @click=${()=>{this.uploadInput.value?.click()}}
-        @keydown=${s=>{(s.code==="Enter"||s.code==="Space")&&(s.preventDefault(),this.uploadInput.value?.click())}}
+        @keydown=${s=>{(s.code==="Enter"||s.code==="Space")&&(s.preventDefault(),s.repeat||this.uploadInput.value?.click())}}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -111,7 +114,7 @@ var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
         hidden
         @change=${()=>{const s=this.uploadInput.value;!s||!s.files||!s.files.length||(this.filesSelected(s.files),s.value="")}}
       />
-    </div>`}};c._DRAG_THRESHOLD=8,c._THUMBNAIL_UPSCALE_SLACK=1.1,c.styles=[...D.styles,A`
+    </div>`}};p._DRAG_THRESHOLD=8,p._THUMBNAIL_UPSCALE_SLACK=1.1,p.styles=[...A.styles,D`
       :host {
         overflow: hidden;
       }
@@ -238,4 +241,4 @@ var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
           }
         }
       }
-    `],f([b()],c.prototype,"draggingOver",void 0),f([b()],c.prototype,"uploadedImages",void 0),f([x({type:String})],c.prototype,"accept",void 0),f([x({attribute:"max-images-per-row",type:Number})],c.prototype,"maxImagesPerRow",void 0),f([x({attribute:"max-row-height-vh",type:Number})],c.prototype,"maxRowHeightVh",void 0),f([b()],c.prototype,"_rejectionNotice",void 0),c=m=f([R("esp-image-upload")],c);export{c as EspalierImageUpload};
+    `],g([x()],p.prototype,"draggingOver",void 0),g([x()],p.prototype,"uploadedImages",void 0),g([w({type:String})],p.prototype,"accept",void 0),g([w({attribute:"max-images-per-row",type:Number})],p.prototype,"maxImagesPerRow",void 0),g([w({attribute:"max-row-height-vh",type:Number})],p.prototype,"maxRowHeightVh",void 0),g([w({attribute:!1})],p.prototype,"previewAction",void 0),g([x()],p.prototype,"_rejectionNotice",void 0),p=m=g([R("esp-image-upload")],p);export{p as EspalierImageUpload};

package/dist/image-upload/image-helpers.d.ts

@@ -31,6 +31,16 @@ export type ExistingUploadImage = UploadImageBase & {
  * Narrow on `source` to access variant-specific fields.
  */
 export type EspalierUploadImage = SelectedUploadImage | ExistingUploadImage;
+/**
+ * Configures the optional action button on each completed preview of
+ * `esp-image-upload`. Assign a new object to change it.
+ */
+export interface ImagePreviewAction {
+    /** Tooltip text and accessible name of the button. */
+    label: string;
+    /** Icon name from the sprite configured on the surrounding `esp-root`. */
+    icon: string;
+}
 /** Callbacks attached to `esp-image-upload-file-selected` and `esp-image-upload-retry` event details. */
 export interface UploadCallbacks {
     /** Update the progress overlay (0–100 determinate, `null` for indeterminate). */

package/dist/index.d.ts

@@ -72,7 +72,7 @@ export { showFlyout, closeFlyout, type FlyoutConfig, type FlyoutCloseReason, } f
 export { requestHelp, type HelpRequest, type HelpState } from "./shared/help-events.js";
 export { getEspBus, type EspBusEventMap, type SchemeEvents, type ToastEvents, type FlyoutEvents, type HelpEvents, type PopoverEvents, type SizeEvents, type PageEventMap, type SeedColorRoot, } from "./shared/bus-events.js";
 export * from "./shared/events.js";
-export { getImageDetails, releasePreviewUrl, type EspalierUploadImage, type ImageDetailsOptions, type SelectedUploadImage, type ExistingUploadImage, type ExistingImage, type ResponsiveImageUrl, type UploadCallbacks, type UploadEventDetail, } from "./image-upload/image-helpers.js";
+export { getImageDetails, releasePreviewUrl, type EspalierUploadImage, type ImageDetailsOptions, type ImagePreviewAction, type SelectedUploadImage, type ExistingUploadImage, type ExistingImage, type ResponsiveImageUrl, type UploadCallbacks, type UploadEventDetail, } from "./image-upload/image-helpers.js";
 export { calculateAlbumLayout, DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH, normalizeAlbumMaxRowHeightVh, normalizeMaxImagesPerRow, type AlbumLayoutItem, type AlbumLayoutOptions, type AlbumLayoutRow, type LayoutImage, } from "./shared/justified-layout.js";
 export { type TypeaheadFetchItems } from "./pickers/types.js";
 export { type EspalierTheme, type LightnessKey, type LightnessReference, type PartialTheme, type PartialThemeContexts, type PartialThemeTones, type ThemeContext, type ThemeContexts, type ThemeTones, type ToneReference, type VariantColorSource, encodeTheme, parseTheme, mergePartials, layerThemes, validateThemePair, resolveContextTheme, isObjectRecord, isSemanticColorName, buildTaprootLightTheme, buildTaprootDarkTheme, NESTED_THEME_KEYS, } from "./shared/theme.js";

package/dist/menu/esp-menu-group.d.ts

@@ -37,6 +37,16 @@ export declare class EspalierMenuGroup extends EspalierElementBase {
     label: string;
     /** Optional URL for the group label. */
     url: string;
+    /** Target browsing context for the link. Empty omits the attribute. */
+    target: string;
+    /** Link relationship, passed through unchanged. Empty omits the attribute. */
+    rel: string;
+    /**
+     * Hidden phrase appended to the accessible name of a `target="_blank"` link.
+     * Replace for non-English sites. Empty or whitespace text falls back to English.
+     * @default "opens in a new tab"
+     */
+    newTabLabel: string;
     /** Optional icon name from the configured Espalier SVG sprite. */
     icon: string;
     /** Whether the group's children are visible. */