@aceshooting/lyra-ui 18.2.0 → 18.3.0

package/dist/components/media/lightbox/lightbox.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{isAccessibilityVisible,nextId,srOnly}from"../../../internal/a11y.js";import{closeIcon,chevronIcon}from"../../../internal/icons.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteCount,finiteInteger}from"../../../internal/numbers.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./lightbox.styles.js";import"../pan-zoom/pan-zoom.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_lightboxImagePosition,LYRA_DEFAULT_lightboxLabel,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const MAX_LIGHTBOX_IMAGES=1e4,EMPTY_LIGHTBOX_IMAGES=Object.freeze([]);function snapshotLightboxImages(value){try{if(!Array.isArray(value))return EMPTY_LIGHTBOX_IMAGES;const count=Math.min(value.length,MAX_LIGHTBOX_IMAGES),images=[];for(let index=0;index<count;index++)try{const candidate=value[index];if(typeof candidate!="object"||candidate===null)continue;const src=candidate.src;if(typeof src!="string")continue;const alt=candidate.alt,caption=candidate.caption;images.push(Object.freeze({src,...typeof alt=="string"?{alt}:{},...typeof caption=="string"?{caption}:{}}))}catch{}return images.length?Object.freeze(images):EMPTY_LIGHTBOX_IMAGES}catch{return EMPTY_LIGHTBOX_IMAGES}}function ownsNavigationKey(event){for(const target of event.composedPath()){const element=target;if(typeof element.matches=="function"&&(element.localName==="lr-pan-zoom"||element.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="listbox"], [role="menu"], [role="menuitem"], [role="radio"], [role="radiogroup"], [role="grid"], [role="tree"], [role="tablist"]')))return!0}return!1}function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}class LyraLightbox extends LyraElement{constructor(){super(...arguments),this._open=!1,this._images=EMPTY_LIGHTBOX_IMAGES,this.index=0,this.loop=!1,this.lightDismiss=!1,this.showCounter=!0,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this.accessibleLabel=null,this.slotPresence=new SlotPresenceController(this),this.liveText="",this.connectionGeneration=0,this.transitionGeneration=0,this.captionId=nextId("lightbox-caption"),this.next=()=>this.changeTo(this.currentIndex()+1),this.previous=()=>this.changeTo(this.currentIndex()-1),this.goTo=index=>this.changeTo(index),this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part="close-button"]')??this;this.closeFrom("close-button",button)},this.onPanelKeyDown=event=>{if(ownsNavigationKey(event))return;const rtl=this.effectiveDirection==="rtl",forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goTo(0)):event.key==="End"&&(event.preventDefault(),this.goTo(this.images.length-1))}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,lightboxImagePosition:LYRA_DEFAULT_lightboxImagePosition,lightboxLabel:LYRA_DEFAULT_lightboxLabel,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,srOnly,styles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get images(){return this._images}set images(value){const old=this._images;this._images=snapshotLightboxImages(value),this.requestUpdate("images",old)}currentIndex(){const count=this.images.length;return count===0?0:finiteCount(this.index,0,count-1)}syncImages(){const current=this.currentIndex();this.index!==current&&(this.index=current)}changeTo(index){const count=this.images.length;if(count===0||!Number.isFinite(index))return;const requested=finiteInteger(index,0),next=this.loop?(requested%count+count)%count:Math.min(count-1,Math.max(0,requested));next!==this.currentIndex()&&(this.index=next,this.emit("lr-index-change",{index:next}))}async show(){if(this.coalesceOpenRequest(!0)||this._open)return;this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);if(this.finishOpenRequest(),prevented||superseded){this.syncOpenAttribute();return}this.applyOpenState(!0);const generation=++this.transitionGeneration;await this.updateComplete,generation===this.transitionGeneration&&this._open&&this.emit("lr-after-show",null)}hide(){return this.close("api")}async close(reason="api"){return this.closeFrom(reason,this)}async closeFrom(reason,source){if(this.coalesceOpenRequest(!1)||!this._open)return;if(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}if(this.emit("lr-lightbox-close",reason,{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}this.finishOpenRequest(),this.applyOpenState(!1);const generation=++this.transitionGeneration;await this.updateComplete,generation===this.transitionGeneration&&!this._open&&this.emit("lr-after-hide",null)}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}updateLiveRegion(){const count=this.images.length,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1});this.liveText=count===0?"":this.localize("lightboxImagePosition",void 0,{index:formatter.format(this.currentIndex()+1),total:formatter.format(count)})}captureAnnouncementBaseline(){this.announcementBaseline={index:this.currentIndex(),images:this.images}}willUpdate(changed){super.willUpdate(changed),(changed.has("images")||changed.has("index"))&&this.syncImages(),(changed.has("index")||changed.has("images")||changed.has("strings")||changed.has("locale"))&&this.updateLiveRegion(),changed.has("open")&&(this.open?this.activateOverlay():this.deactivateOverlay())}updated(changed){super.updated(changed),!(this.announcementBaseline?.index===this.currentIndex()&&this.announcementBaseline.images===this.images)&&this.open&&this.liveText!==""&&isAccessibilityVisible(this)&&(changed.has("index")||changed.has("images"))&&this.announcementSink?.announce(this.liveText),this.isConnected&&this.captureAnnouncementBaseline(),changed.has("open")&&this.open&&this.overlay?.focusInitial();let currentSourceChanged=!1;if(changed.has("images")){const previousImages=changed.get("images"),previousIndex=changed.has("index")?changed.get("index")??0:this.index;currentSourceChanged=previousImages?.[previousImages.length>0?finiteCount(previousIndex,0,previousImages.length-1):0]?.src!==this.images[this.currentIndex()]?.src}this.open&&(changed.has("index")||currentSourceChanged)&&this.frameEl?.resetView()}connectedCallback(){super.connectedCallback();const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.captureAnnouncementBaseline(),this.hasUpdated&&this.open&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&this.isConnected&&this.open&&this.overlay?.focusInitial()}))}disconnectedCallback(){const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink?.release(),this.announcementSink=void 0,this.announcementBaseline=void 0,super.disconnectedCallback(),this.overlay?.suspend(),this.open&&queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&!this.isConnected&&this.open&&(this.transitionGeneration++,this.emit("lr-hide",{source:this}),this.applyOpenState(!1),this.emit("lr-lightbox-close","unmount"),this.emit("lr-after-hide",null))})}activateOverlay(){this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part="panel"]')??this;this.closeFrom("escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part="backdrop"]')??this;this.closeFrom("backdrop",backdrop)},preferredInitialFocus:()=>this.shadowRoot?.querySelector('[part="close-button"]')??null,lockScroll:!0,suspendWhenUnrendered:!0}))}deactivateOverlay(){this.overlay?.deactivate(),this.overlay=void 0}render(){const count=this.images.length,current=this.currentIndex(),image=count>0?this.images[current]:void 0,label=this.accessibleLabel??this.localize("lightboxLabel"),hasCaption=!!image?.caption,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1}),positionText=count>0?this.localize("lightboxImagePosition",void 0,{index:formatter.format(current+1),total:formatter.format(count)}):"";return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{trueDefaultBooleanFromAttributeConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{isAccessibilityVisible,nextId,srOnly}from"../../../internal/a11y.js";import{closeIcon,chevronIcon}from"../../../internal/icons.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteCount,finiteInteger}from"../../../internal/numbers.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./lightbox.styles.js";import"../pan-zoom/pan-zoom.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_lightboxImagePosition,LYRA_DEFAULT_lightboxLabel,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const MAX_LIGHTBOX_IMAGES=1e4,EMPTY_LIGHTBOX_IMAGES=Object.freeze([]);function snapshotLightboxImages(value){try{if(!Array.isArray(value))return EMPTY_LIGHTBOX_IMAGES;const count=Math.min(value.length,MAX_LIGHTBOX_IMAGES),images=[];for(let index=0;index<count;index++)try{const candidate=value[index];if(typeof candidate!="object"||candidate===null)continue;const src=candidate.src;if(typeof src!="string")continue;const alt=candidate.alt,caption=candidate.caption;images.push(Object.freeze({src,...typeof alt=="string"?{alt}:{},...typeof caption=="string"?{caption}:{}}))}catch{}return images.length?Object.freeze(images):EMPTY_LIGHTBOX_IMAGES}catch{return EMPTY_LIGHTBOX_IMAGES}}function ownsNavigationKey(event){for(const target of event.composedPath()){const element=target;if(typeof element.matches=="function"&&(element.localName==="lr-pan-zoom"||element.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="listbox"], [role="menu"], [role="menuitem"], [role="radio"], [role="radiogroup"], [role="grid"], [role="tree"], [role="tablist"]')))return!0}return!1}function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}class LyraLightbox extends LyraElement{constructor(){super(...arguments),this._open=!1,this._images=EMPTY_LIGHTBOX_IMAGES,this._fit="actual",this.index=0,this.loop=!1,this.lightDismiss=!1,this.showCounter=!0,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this.accessibleLabel=null,this.slotPresence=new SlotPresenceController(this),this.liveText="",this.connectionGeneration=0,this.transitionGeneration=0,this.captionId=nextId("lightbox-caption"),this.next=()=>this.changeTo(this.currentIndex()+1),this.previous=()=>this.changeTo(this.currentIndex()-1),this.goTo=index=>this.changeTo(index),this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part="close-button"]')??this;this.closeFrom("close-button",button)},this.onPanelKeyDown=event=>{if(ownsNavigationKey(event))return;const rtl=this.effectiveDirection==="rtl",forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goTo(0)):event.key==="End"&&(event.preventDefault(),this.goTo(this.images.length-1))}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,lightboxImagePosition:LYRA_DEFAULT_lightboxImagePosition,lightboxLabel:LYRA_DEFAULT_lightboxLabel,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,srOnly,styles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get images(){return this._images}set images(value){const old=this._images;this._images=snapshotLightboxImages(value),this.requestUpdate("images",old)}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value,"actual"),this.requestUpdate("fit",old)}currentIndex(){const count=this.images.length;return count===0?0:finiteCount(this.index,0,count-1)}syncImages(){const current=this.currentIndex();this.index!==current&&(this.index=current)}changeTo(index){const count=this.images.length;if(count===0||!Number.isFinite(index))return;const requested=finiteInteger(index,0),next=this.loop?(requested%count+count)%count:Math.min(count-1,Math.max(0,requested));next!==this.currentIndex()&&(this.index=next,this.emit("lr-index-change",{index:next}))}async show(){if(this.coalesceOpenRequest(!0)||this._open)return;this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);if(this.finishOpenRequest(),prevented||superseded){this.syncOpenAttribute();return}this.applyOpenState(!0);const generation=++this.transitionGeneration;await this.updateComplete,generation===this.transitionGeneration&&this._open&&this.emit("lr-after-show",null)}hide(){return this.close("api")}async close(reason="api"){return this.closeFrom(reason,this)}async closeFrom(reason,source){if(this.coalesceOpenRequest(!1)||!this._open)return;if(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}if(this.emit("lr-lightbox-close",reason,{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}this.finishOpenRequest(),this.applyOpenState(!1);const generation=++this.transitionGeneration;await this.updateComplete,generation===this.transitionGeneration&&!this._open&&this.emit("lr-after-hide",null)}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}updateLiveRegion(){const count=this.images.length,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1});this.liveText=count===0?"":this.localize("lightboxImagePosition",void 0,{index:formatter.format(this.currentIndex()+1),total:formatter.format(count)})}captureAnnouncementBaseline(){this.announcementBaseline={index:this.currentIndex(),images:this.images}}willUpdate(changed){super.willUpdate(changed),(changed.has("images")||changed.has("index"))&&this.syncImages(),(changed.has("index")||changed.has("images")||changed.has("strings")||changed.has("locale"))&&this.updateLiveRegion(),changed.has("open")&&(this.open?this.activateOverlay():this.deactivateOverlay())}updated(changed){super.updated(changed),!(this.announcementBaseline?.index===this.currentIndex()&&this.announcementBaseline.images===this.images)&&this.open&&this.liveText!==""&&isAccessibilityVisible(this)&&(changed.has("index")||changed.has("images"))&&this.announcementSink?.announce(this.liveText),this.isConnected&&this.captureAnnouncementBaseline(),changed.has("open")&&this.open&&this.overlay?.focusInitial();let currentSourceChanged=!1;if(changed.has("images")){const previousImages=changed.get("images"),previousIndex=changed.has("index")?changed.get("index")??0:this.index;currentSourceChanged=previousImages?.[previousImages.length>0?finiteCount(previousIndex,0,previousImages.length-1):0]?.src!==this.images[this.currentIndex()]?.src}this.open&&(changed.has("index")||currentSourceChanged)&&this.frameEl?.resetView()}connectedCallback(){super.connectedCallback();const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.captureAnnouncementBaseline(),this.hasUpdated&&this.open&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&this.isConnected&&this.open&&this.overlay?.focusInitial()}))}disconnectedCallback(){const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink?.release(),this.announcementSink=void 0,this.announcementBaseline=void 0,super.disconnectedCallback(),this.overlay?.suspend(),this.open&&queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&!this.isConnected&&this.open&&(this.transitionGeneration++,this.emit("lr-hide",{source:this}),this.applyOpenState(!1),this.emit("lr-lightbox-close","unmount"),this.emit("lr-after-hide",null))})}activateOverlay(){this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part="panel"]')??this;this.closeFrom("escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part="backdrop"]')??this;this.closeFrom("backdrop",backdrop)},preferredInitialFocus:()=>this.shadowRoot?.querySelector('[part="close-button"]')??null,lockScroll:!0,suspendWhenUnrendered:!0}))}deactivateOverlay(){this.overlay?.deactivate(),this.overlay=void 0}render(){const count=this.images.length,current=this.currentIndex(),image=count>0?this.images[current]:void 0,label=this.accessibleLabel??this.localize("lightboxLabel"),hasCaption=!!image?.caption,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1}),positionText=count>0?this.localize("lightboxImagePosition",void 0,{index:formatter.format(current+1),total:formatter.format(count)}):"";return html`
       <div part="backdrop" @click=${this.onBackdropClick}></div>
       <div
         part="panel"
@@ -35,6 +35,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             exportparts="viewport:frame-viewport,content:frame-content,controls:frame-controls"
             src=${image?.src??""}
             alt=${image?.alt??""}
+            .fit=${this.fit}
             .minZoom=${this.minZoom}
             .maxZoom=${this.maxZoom}
             .zoomStep=${this.zoomStep}
@@ -59,4 +60,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           >${this.liveText}</span
         >
       </div>
-    `}}__decorate([property({type:Boolean,reflect:!0})],LyraLightbox.prototype,"open",null),__decorate([property({attribute:!1})],LyraLightbox.prototype,"images",null),__decorate([property({type:Number,reflect:!0})],LyraLightbox.prototype,"index",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraLightbox.prototype,"loop",void 0),__decorate([property({type:Boolean,attribute:"light-dismiss"})],LyraLightbox.prototype,"lightDismiss",void 0),__decorate([property({attribute:"show-counter",converter:trueDefaultBooleanConverter})],LyraLightbox.prototype,"showCounter",void 0),__decorate([property({type:Number,attribute:"min-zoom"})],LyraLightbox.prototype,"minZoom",void 0),__decorate([property({type:Number,attribute:"max-zoom"})],LyraLightbox.prototype,"maxZoom",void 0),__decorate([property({type:Number,attribute:"zoom-step"})],LyraLightbox.prototype,"zoomStep",void 0),__decorate([property({attribute:"aria-label"})],LyraLightbox.prototype,"accessibleLabel",void 0),__decorate([state()],LyraLightbox.prototype,"liveText",void 0),__decorate([query("lr-pan-zoom")],LyraLightbox.prototype,"frameEl",void 0);export{LyraLightbox};
+    `}}__decorate([property({type:Boolean,reflect:!0})],LyraLightbox.prototype,"open",null),__decorate([property({attribute:!1})],LyraLightbox.prototype,"images",null),__decorate([property({type:Number,reflect:!0})],LyraLightbox.prototype,"index",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraLightbox.prototype,"loop",void 0),__decorate([property({type:Boolean,attribute:"light-dismiss"})],LyraLightbox.prototype,"lightDismiss",void 0),__decorate([property({attribute:"show-counter",converter:trueDefaultBooleanConverter})],LyraLightbox.prototype,"showCounter",void 0),__decorate([property({reflect:!0})],LyraLightbox.prototype,"fit",null),__decorate([property({type:Number,attribute:"min-zoom"})],LyraLightbox.prototype,"minZoom",void 0),__decorate([property({type:Number,attribute:"max-zoom"})],LyraLightbox.prototype,"maxZoom",void 0),__decorate([property({type:Number,attribute:"zoom-step"})],LyraLightbox.prototype,"zoomStep",void 0),__decorate([property({attribute:"aria-label"})],LyraLightbox.prototype,"accessibleLabel",void 0),__decorate([state()],LyraLightbox.prototype,"liveText",void 0),__decorate([query("lr-pan-zoom")],LyraLightbox.prototype,"frameEl",void 0);export{LyraLightbox};

package/dist/components/media/pan-zoom/pan-zoom.class.d.ts

@@ -1,4 +1,4 @@
-import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';export interface LyraPanZoomEventMap{'lr-zoom-change':CustomEvent<{zoom:number;}>;blur:FocusEvent;focus:FocusEvent;}
+import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraImageFit}from'../../../internal/image-fit.js';export interface LyraPanZoomEventMap{'lr-zoom-change':CustomEvent<{zoom:number;}>;blur:FocusEvent;focus:FocusEvent;}
 /**
 * `<lr-pan-zoom>` — a scrollable frame for inspecting slotted or image content at a bounded zoom
 * level. This is the intentionally renamed home of the original Lyra `lr-zoomable-frame`
@@ -6,6 +6,8 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
 *
 * `resetZoom()` returns zoom to 1 while preserving the native scroll offset. `resetView()` also
 * returns the viewport to its origin for consumers that replace the inspected content.
+* `fit` controls the base layout of an image supplied through `src`: `actual` preserves the
+* existing natural-size behavior, while `contain` and `width` size it against the viewport.
 * The three controls are independently tabbable native buttons in a labelled `group`; they do not
 * claim the arrow-key navigation contract of an ARIA toolbar.
 *
@@ -28,7 +30,9 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
 * @status stable
 * @since 8.0.0
 */
-export declare class LyraPanZoom extends LyraElement<LyraPanZoomEventMap>{static styles:import("lit").CSSResultGroup[];zoom:number;minZoom:number;maxZoom:number;zoomStep:number;src:string;alt:string;
+export declare class LyraPanZoom extends LyraElement<LyraPanZoomEventMap>{static styles:import("lit").CSSResultGroup[];zoom:number;minZoom:number;maxZoom:number;zoomStep:number;private _fit;
+/** Base image sizing policy. The default preserves the natural-size behavior of this frame. */
+get fit():LyraImageFit;set fit(value:LyraImageFit);src:string;alt:string;
 /** Overall host name when supplied as `aria-label`. A property-only value names the focusable
 * viewport; when the host already owns a name, the viewport keeps its localized purpose name. */
 accessibleLabel:string|null;private get safeMinZoom();private get safeMaxZoom();private get safeZoomStep();private get safeZoom();private setZoom;zoomIn():void;zoomOut():void;resetZoom():void;resetView():void;private get viewportEl();

package/dist/components/media/pan-zoom/pan-zoom.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./pan-zoom.styles.js";import{LYRA_DEFAULT_pdfViewerCurrentZoom,LYRA_DEFAULT_resetZoom,LYRA_DEFAULT_zoomControls,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut,LYRA_DEFAULT_zoomableFrameLabel}from"../../../internal/default-strings.generated.js";function isElementTarget(target){const candidate=target;return candidate.nodeType===1&&typeof candidate.matches=="function"}function ownsKeyboardInput(event){for(const target of event.composedPath())if(isElementTarget(target)&&target.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="listbox"], [role="menu"], [role="menuitem"], [role="radio"], [role="radiogroup"], [role="grid"], [role="tree"], [role="tablist"]'))return!0;return!1}class LyraPanZoom extends LyraElement{constructor(){super(...arguments),this.zoom=1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this.src="",this.alt="",this.accessibleLabel=null,this.onViewportFocus=event=>{relayNativeEvent(this,event)},this.onViewportBlur=event=>{relayNativeEvent(this,event)},this.onViewportKeyDown=event=>{ownsKeyboardInput(event)||(event.key==="+"||event.key==="="?(event.preventDefault(),this.zoomIn()):event.key==="-"||event.key==="_"?(event.preventDefault(),this.zoomOut()):event.key==="0"&&(event.preventDefault(),this.resetZoom()))}}static{this.defaultStrings={...super.defaultStrings,pdfViewerCurrentZoom:LYRA_DEFAULT_pdfViewerCurrentZoom,resetZoom:LYRA_DEFAULT_resetZoom,zoomControls:LYRA_DEFAULT_zoomControls,zoomIn:LYRA_DEFAULT_zoomIn,zoomOut:LYRA_DEFAULT_zoomOut,zoomableFrameLabel:LYRA_DEFAULT_zoomableFrameLabel}}static{this.styles=[LyraElement.styles,styles,srOnly]}get safeMinZoom(){return finiteRange(this.minZoom,.5,.01,1e3)}get safeMaxZoom(){return finiteRange(this.maxZoom,4,this.safeMinZoom,1e3)}get safeZoomStep(){return finiteRange(this.zoomStep,.25,.01,1e3)}get safeZoom(){return finiteRange(this.zoom,1,this.safeMinZoom,this.safeMaxZoom)}setZoom(value,quantize=!0){const min=this.safeMinZoom,max=this.safeMaxZoom,step=this.safeZoomStep,stepped=quantize?Math.round(value/step)*step:value,next=Math.min(max,Math.max(min,Math.round(stepped*100)/100));next!==this.zoom&&(this.zoom=next,this.emit("lr-zoom-change",{zoom:next}))}zoomIn(){this.setZoom(this.safeZoom+this.safeZoomStep)}zoomOut(){this.setZoom(this.safeZoom-this.safeZoomStep)}resetZoom(){this.setZoom(1,!1)}resetView(){this.resetZoom(),this.renderRoot.querySelector('[part="viewport"]')?.scrollTo({left:0,top:0})}get viewportEl(){return this.renderRoot.querySelector('[part="viewport"]')}focus(options){this.viewportEl?.focus(options)}blur(){this.viewportEl?.blur()}click(){this.viewportEl?.click()}render(){const zoom=this.safeZoom,min=this.safeMinZoom,max=this.safeMaxZoom,viewportLabel=this.getAttribute("aria-label")!==null?this.localize("zoomableFrameLabel"):this.accessibleLabel??this.localize("zoomableFrameLabel"),safeSrc=safeMediaSrc(this.src);return html`<div part="base">
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{styles}from"./pan-zoom.styles.js";import{LYRA_DEFAULT_pdfViewerCurrentZoom,LYRA_DEFAULT_resetZoom,LYRA_DEFAULT_zoomControls,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut,LYRA_DEFAULT_zoomableFrameLabel}from"../../../internal/default-strings.generated.js";function isElementTarget(target){const candidate=target;return candidate.nodeType===1&&typeof candidate.matches=="function"}function ownsKeyboardInput(event){for(const target of event.composedPath())if(isElementTarget(target)&&target.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"], [role="combobox"], [role="spinbutton"], [role="slider"], [role="listbox"], [role="menu"], [role="menuitem"], [role="radio"], [role="radiogroup"], [role="grid"], [role="tree"], [role="tablist"]'))return!0;return!1}class LyraPanZoom extends LyraElement{constructor(){super(...arguments),this.zoom=1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this._fit="actual",this.src="",this.alt="",this.accessibleLabel=null,this.onViewportFocus=event=>{relayNativeEvent(this,event)},this.onViewportBlur=event=>{relayNativeEvent(this,event)},this.onViewportKeyDown=event=>{ownsKeyboardInput(event)||(event.key==="+"||event.key==="="?(event.preventDefault(),this.zoomIn()):event.key==="-"||event.key==="_"?(event.preventDefault(),this.zoomOut()):event.key==="0"&&(event.preventDefault(),this.resetZoom()))}}static{this.defaultStrings={...super.defaultStrings,pdfViewerCurrentZoom:LYRA_DEFAULT_pdfViewerCurrentZoom,resetZoom:LYRA_DEFAULT_resetZoom,zoomControls:LYRA_DEFAULT_zoomControls,zoomIn:LYRA_DEFAULT_zoomIn,zoomOut:LYRA_DEFAULT_zoomOut,zoomableFrameLabel:LYRA_DEFAULT_zoomableFrameLabel}}static{this.styles=[LyraElement.styles,styles,srOnly]}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value,"actual"),this.requestUpdate("fit",old)}get safeMinZoom(){return finiteRange(this.minZoom,.5,.01,1e3)}get safeMaxZoom(){return finiteRange(this.maxZoom,4,this.safeMinZoom,1e3)}get safeZoomStep(){return finiteRange(this.zoomStep,.25,.01,1e3)}get safeZoom(){return finiteRange(this.zoom,1,this.safeMinZoom,this.safeMaxZoom)}setZoom(value,quantize=!0){const min=this.safeMinZoom,max=this.safeMaxZoom,step=this.safeZoomStep,stepped=quantize?Math.round(value/step)*step:value,next=Math.min(max,Math.max(min,Math.round(stepped*100)/100));next!==this.zoom&&(this.zoom=next,this.emit("lr-zoom-change",{zoom:next}))}zoomIn(){this.setZoom(this.safeZoom+this.safeZoomStep)}zoomOut(){this.setZoom(this.safeZoom-this.safeZoomStep)}resetZoom(){this.setZoom(1,!1)}resetView(){this.resetZoom(),this.renderRoot.querySelector('[part="viewport"]')?.scrollTo({left:0,top:0})}get viewportEl(){return this.renderRoot.querySelector('[part="viewport"]')}focus(options){this.viewportEl?.focus(options)}blur(){this.viewportEl?.blur()}click(){this.viewportEl?.click()}render(){const zoom=this.safeZoom,min=this.safeMinZoom,max=this.safeMaxZoom,viewportLabel=this.getAttribute("aria-label")!==null?this.localize("zoomableFrameLabel"):this.accessibleLabel??this.localize("zoomableFrameLabel"),safeSrc=safeMediaSrc(this.src);return html`<div part="base">
       <div
         part="viewport"
         role="group"
@@ -23,4 +23,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         </button>
         <button part="zoom-in" type="button" aria-label=${this.localize("zoomIn")} ?disabled=${zoom>=max} @click=${()=>this.zoomIn()}>+</button>
       </div>
-    </div>`}}__decorate([property({type:Number,reflect:!0})],LyraPanZoom.prototype,"zoom",void 0),__decorate([property({type:Number,attribute:"min-zoom"})],LyraPanZoom.prototype,"minZoom",void 0),__decorate([property({type:Number,attribute:"max-zoom"})],LyraPanZoom.prototype,"maxZoom",void 0),__decorate([property({type:Number,attribute:"zoom-step"})],LyraPanZoom.prototype,"zoomStep",void 0),__decorate([property()],LyraPanZoom.prototype,"src",void 0),__decorate([property()],LyraPanZoom.prototype,"alt",void 0),__decorate([property({attribute:"aria-label"})],LyraPanZoom.prototype,"accessibleLabel",void 0);export{LyraPanZoom};
+    </div>`}}__decorate([property({type:Number,reflect:!0})],LyraPanZoom.prototype,"zoom",void 0),__decorate([property({type:Number,attribute:"min-zoom"})],LyraPanZoom.prototype,"minZoom",void 0),__decorate([property({type:Number,attribute:"max-zoom"})],LyraPanZoom.prototype,"maxZoom",void 0),__decorate([property({type:Number,attribute:"zoom-step"})],LyraPanZoom.prototype,"zoomStep",void 0),__decorate([property({reflect:!0})],LyraPanZoom.prototype,"fit",null),__decorate([property()],LyraPanZoom.prototype,"src",void 0),__decorate([property()],LyraPanZoom.prototype,"alt",void 0),__decorate([property({attribute:"aria-label"})],LyraPanZoom.prototype,"accessibleLabel",void 0);export{LyraPanZoom};

package/dist/components/media/pan-zoom/pan-zoom.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{min-inline-size:0;display:block}[part=base]{gap:var(--lr-space-s);min-inline-size:0;display:grid}[part=viewport]{min-block-size:var(--lr-pan-zoom-min-block-size,var(--lr-size-10rem));overscroll-behavior:contain;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-raised);transition:border-color var(--lr-transition-fast);outline:none;overflow:auto}[part=viewport]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=viewport]:hover{border-color:var(--lr-color-brand)}[part=content]{zoom:var(--lr-pan-zoom-zoom,1);place-items:center;block-size:max-content;min-block-size:100%;inline-size:max-content;min-inline-size:100%;display:grid}[part=content] ::slotted(*){max-inline-size:none}[part=content] img{max-inline-size:none;display:block}[part=controls]{justify-content:center;align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}[part=zoom-out],[part=zoom-in],[part=reset]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;cursor:pointer;transition:background-color var(--lr-transition-fast)}[part=reset]{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}[part=zoom-out]:not(:disabled):hover,[part=zoom-in]:not(:disabled):hover,[part=reset]:hover{background:var(--lr-color-brand-quiet)}[part=zoom-out]:not(:disabled):active,[part=zoom-in]:not(:disabled):active,[part=reset]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=zoom-out]:disabled,[part=zoom-in]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=zoom-out]:focus-visible,[part=zoom-in]:focus-visible,[part=reset]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};
+import{css}from"lit";const styles=css`:host{min-inline-size:0;display:block}[part=base]{gap:var(--lr-space-s);min-inline-size:0;display:grid}[part=viewport]{min-block-size:var(--lr-pan-zoom-min-block-size,var(--lr-size-10rem));overscroll-behavior:contain;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-raised);transition:border-color var(--lr-transition-fast);outline:none;overflow:auto}[part=viewport]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=viewport]:hover{border-color:var(--lr-color-brand)}[part=content]{zoom:var(--lr-pan-zoom-zoom,1);place-items:center;block-size:max-content;min-block-size:100%;inline-size:max-content;min-inline-size:100%;display:grid}[part=content] ::slotted(*){max-inline-size:none}[part=content] img{max-inline-size:none;display:block}:host([fit=contain]) [part=content],:host([fit=width]) [part=content]{inline-size:100%}:host([fit=contain]) [part=content]{block-size:100%}:host([fit=contain]) [part=content] img{object-fit:contain;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0}:host([fit=width]) [part=content] img{block-size:auto;inline-size:100%;max-inline-size:100%}[part=controls]{justify-content:center;align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}[part=zoom-out],[part=zoom-in],[part=reset]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;cursor:pointer;transition:background-color var(--lr-transition-fast)}[part=reset]{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}[part=zoom-out]:not(:disabled):hover,[part=zoom-in]:not(:disabled):hover,[part=reset]:hover{background:var(--lr-color-brand-quiet)}[part=zoom-out]:not(:disabled):active,[part=zoom-in]:not(:disabled):active,[part=reset]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=zoom-out]:disabled,[part=zoom-in]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=zoom-out]:focus-visible,[part=zoom-in]:focus-visible,[part=reset]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};

package/dist/components/utility/export-button/export-button.class.d.ts

@@ -1,4 +1,6 @@
-import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraCsvColumn}from'./csv.js';export type LyraExportFormat='csv'|'json';export interface LyraExportFormatDescriptor{
+import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraAppearance,type LyraSize}from'../../../internal/variants.js';import{type LyraCsvColumn}from'./csv.js';export type LyraExportFormat='csv'|'json';
+/** The export trigger's compact treatments. Unset preserves its established chrome. */
+export type LyraExportButtonAppearance=Extract<LyraAppearance,'outlined'> |'quiet';export interface LyraExportFormatDescriptor{
 /** Stable format id carried through `lr-export`. */
 readonly formatId:string;
 /** Consumer-supplied, already-localized menu label. */
@@ -55,6 +57,11 @@ readonly extension?:string;}export type LyraExportFormatOption=LyraExportFormat|
 *   menu's `fixed` default, read from computed style when it is (re)positioned. Set it once on
 *   `:root`, a theme, or one clipping ancestor to change every unset export button beneath it; an
 *   unrecognized value falls back to `fixed`.
+* @property size - Optional density on the shared `2xs` through `xl` ladder, including the
+*   `small`/`medium`/`large` aliases. It changes the trigger and menu-row typography and padding;
+*   the 40px default hit-area floor remains in place. Unset preserves the established geometry.
+* @property appearance - Optional `outlined` or `quiet` trigger treatment. Unset preserves the
+*   established surface, border, and text colors.
 * @status stable
 * @since 4.0.0
 */
@@ -98,7 +105,11 @@ getRows?:()=>readonly Record<string,unknown>[];filename:string;
 bom:boolean;private _formats;
 /** Format choices keyed by unique, nonempty `formatId`; the first duplicate wins. An empty or
 * fully rejected list disables the trigger because there is no export action to perform. */
-get formats():readonly LyraExportFormatOption[];set formats(next:readonly LyraExportFormatOption[]);disabled:boolean;
+get formats():readonly LyraExportFormatOption[];set formats(next:readonly LyraExportFormatOption[]);private _size?;
+/** Optional density tier on the shared ladder. Omission preserves the original trigger geometry. */
+get size():LyraSize|undefined;set size(next:LyraSize|undefined);
+/** Optional compact trigger treatment. Omission preserves the original trigger chrome. */
+get appearance():LyraExportButtonAppearance|undefined;set appearance(next:LyraExportButtonAppearance|undefined);private _appearance?;disabled:boolean;
 /** Controlled busy state for async/server-generated exports. */
 loading:boolean;
 /** Visible trigger button text. It also feeds the format menu's `aria-label` when no host

package/dist/components/utility/export-button/export-button.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{nextId}from"../../../internal/a11y.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{buildCsv,downloadBlob}from"./csv.js";import{styles}from"./export-button.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_exportButtonLabel,LYRA_DEFAULT_exportFormatMenuLabel,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";const MAX_EXPORT_FORMATS=1e4;function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}function formatArrayLength(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");return length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0?void 0:{source:value,length:Math.min(length.value,MAX_EXPORT_FORMATS)}}catch{return}}function projectExportFormat(value){if(value==="csv"||value==="json")return value;if(value===null||typeof value!="object")return;const formatId=getOwnDataDescriptor(value,"formatId"),label=getOwnDataDescriptor(value,"label");if(formatId===MISSING_OWN_DATA_DESCRIPTOR||formatId===UNSAFE_OWN_DATA_DESCRIPTOR||label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||typeof formatId.value!="string"||formatId.value.trim().length===0||typeof label.value!="string"||label.value.trim().length===0)return;const description=getOwnDataDescriptor(value,"description"),extension=getOwnDataDescriptor(value,"extension");return Object.freeze({formatId:formatId.value,label:label.value,...description!==MISSING_OWN_DATA_DESCRIPTOR&&description!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof description.value=="string"?{description:description.value}:{},...extension!==MISSING_OWN_DATA_DESCRIPTOR&&extension!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof extension.value=="string"?{extension:extension.value}:{}})}class LyraExportButton extends LyraElement{constructor(){super(...arguments),this._rows=Object.freeze([]),this._columns=Object.freeze([]),this.filename="export",this.bom=!1,this._formats=Object.freeze(["csv"]),this.disabled=!1,this.loading=!1,this.accessibleLabel=null,this.open=!1,this.exportFailed=!1,this.menuId=nextId("export-menu"),this.menuPositioned=!1,this.connectionGeneration=0,this._isFirstUpdate=!0,this.openVetoed=!1,this.pendingMenuFocusIndex=0,this.injectedHostTabIndex=!1,this.restoreFocusOnMenuClose=!1,this.onDocPointer=e=>{e.composedPath().includes(this)||(this.overlay?.isActive()?this.overlay.dismissBackdrop():this.closeMenu())},this.syncMenuOverlay=()=>{if(this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),!this.open||!this.isConnected){const restoreFocus=this.restoreFocusOnMenuClose;this.restoreFocusOnMenuClose=!1,this.deactivateMenuOverlay(restoreFocus);return}this.activateMenuOverlay(),this.bindDocumentPointer();const anchor=this.triggerEl,menu=this.menuEl,ownerDocument=this.ownerDocument;if(!anchor||!menu)return;const placement=place(anchor,menu,{strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});this.cleanup=placement,placement.ready.then(positioned=>{if(!(this.cleanup!==placement||!this.open||!this.isConnected||this.ownerDocument!==ownerDocument)){if(!positioned){this.forcedMenuClose="state",this.open=!1;return}this.menuPositioned=!0,this.focusMenuItem(this.pendingMenuFocusIndex),this.pendingMenuFocusIndex=0}})},this.onKeyDown=e=>{if(this.formats.length<=1||this.disabled||this.loading)return;const items=this.menuItemEls(),currentIndex=items.indexOf(e.target);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?0:currentIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?items.length-1:currentIndex-1);break;case"Home":this.open&&(e.preventDefault(),this.focusMenuItem(0));break;case"End":this.open&&(e.preventDefault(),this.focusMenuItem(items.length-1));break}}}static{this.defaultStrings={...super.defaultStrings,exportButtonLabel:LYRA_DEFAULT_exportButtonLabel,exportFormatMenuLabel:LYRA_DEFAULT_exportFormatMenuLabel,statusError:LYRA_DEFAULT_statusError}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={rows:{attribute:!1,noAccessor:!0},columns:{attribute:!1,noAccessor:!0},formats:{attribute:!1,noAccessor:!0}}}get rows(){return this._rows}set rows(next){const previous=this._rows,source=Array.isArray(next)?next:[];this._rows=Object.freeze(source.map(row=>Object.freeze({...row}))),this.requestUpdate("rows",previous)}get columns(){return this._columns}set columns(next){const previous=this._columns,source=Array.isArray(next)?next:[];this._columns=Object.freeze(source.map(column=>Object.freeze({...column}))),this.requestUpdate("columns",previous)}get formats(){return this._formats}set formats(next){const previous=this._formats,source=formatArrayLength(next),seen=new Set,formats=[];for(let index=0;source&&index<source.length;index+=1){const descriptor=getOwnDataDescriptor(source.source,String(index));if(descriptor===MISSING_OWN_DATA_DESCRIPTOR||descriptor===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const snapshot=projectExportFormat(descriptor.value);if(!snapshot)continue;const id=typeof snapshot=="string"?snapshot:snapshot.formatId;typeof id!="string"||id.trim()===""||seen.has(id)||(seen.add(id),formats.push(snapshot))}this._formats=Object.freeze(formats),this.requestUpdate("formats",previous)}connectedCallback(){const pendingDisconnectDocument=this.pendingDisconnectDocument;if(this.pendingDisconnectDocument=void 0,this.connectionGeneration+=1,this.connectedDocument=this.ownerDocument,super.connectedCallback(),this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),pendingDisconnectDocument){if(pendingDisconnectDocument===this.ownerDocument){this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1;return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay");return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay")}disconnectedCallback(){const generation=++this.connectionGeneration,disconnectDocument=this.connectedDocument??this.ownerDocument;this.pendingDisconnectDocument=disconnectDocument,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),this.overlay?.suspend(),this.restoreFocusOnMenuClose=!1,this.sink?.release(),this.sink=void 0,queueDocumentMicrotask(disconnectDocument,()=>{this.connectionGeneration!==generation||this.isConnected||this.pendingDisconnectDocument!==disconnectDocument||(this.pendingDisconnectDocument=void 0,this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1)})}adoptedCallback(){super.adoptedCallback(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlay?.suspend(),this.sink?.release(),this.sink=void 0}bindDocumentPointer(){if(!this.isConnected)return;const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}openMenu(){this.open||(this.open=!0)}closeMenu(restoreFocus=!1){this.open&&(this.restoreFocusOnMenuClose||=restoreFocus,this.open=!1)}activateMenuOverlay(){if(this.overlay?.isActive()){this.overlay.resume();return}this.overlay=activateNonmodalOverlay({host:this,panel:()=>this.menuEl??null,onEscape:()=>this.closeMenu(!0),onBackdrop:()=>this.closeMenu(),onTab:()=>this.closeMenu(),restoreFocusTo:()=>this.triggerEl??null})}deactivateMenuOverlay(restoreFocus){const overlay=this.overlay;this.overlay=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}menuItemEls(){return Array.from(this.renderRoot.querySelectorAll('[part="menu-item"]'))}focusMenuItem(index){const items=this.menuItemEls();items.length!==0&&items[Math.max(0,Math.min(items.length-1,index))]?.focus()}focusMenuItemOnOpen(index){this.open&&this.menuPositioned?this.focusMenuItem(index):(this.pendingMenuFocusIndex=index,this.open||this.openMenu())}firstUpdated(changed){super.firstUpdated(changed),this.renderRoot.addEventListener("keydown",this.onKeyDown)}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this.setAttribute("aria-busy",String(this.loading)),(changed.has("disabled")||changed.has("loading"))&&!this.disabled&&!this.loading&&this.injectedHostTabIndex&&(this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.injectedHostTabIndex=!1),(changed.has("disabled")||changed.has("loading"))&&(this.disabled||this.loading)){const active=activeElementIn(this.shadowRoot);if(active===this.triggerEl||active?.getAttribute("part")==="menu-item"){this.hasAttribute("tabindex")||(this.tabIndex=-1,this.injectedHostTabIndex=!0);const ownerHTMLElement=this.ownerDocument.defaultView?.HTMLElement,nativeFocus=ownerHTMLElement?Reflect.get(ownerHTMLElement.prototype,"focus",this):void 0;typeof nativeFocus=="function"&&nativeFocus.call(this,{preventScroll:!0})}this.open&&(this.open=!1,this.forcedMenuClose="state")}if(changed.has("formats")){const active=activeElementIn(this.shadowRoot),index=this.menuItemEls().indexOf(active),previous=changed.get("formats")?.[index];this.formatsFocusSnapshot=index>=0&&previous?{index,id:this.formatId(previous)}:void 0}if(this.open&&this.formats.length<=1){const previousOpen=changed.get("open");this.forcedMenuClose=changed.has("formats")&&changed.get("formats")?.length?"formats":previousOpen===!1||previousOpen===void 0?"invalid-open":"state",this.open=!1}this.announceMenuTransition(changed)}announceMenuTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.forcedMenuClose)return;const name=this.open?"lr-show":"lr-hide";this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open)}updated(changed){super.updated(changed);const forcedMenuClose=this.forcedMenuClose;if(this.forcedMenuClose=void 0,(changed.has("open")||forcedMenuClose==="formats"||forcedMenuClose==="state")&&!this.openVetoed?this.syncMenuOverlay():this.openVetoed&&(this.restoreFocusOnMenuClose=!1),changed.has("formats")&&this.formatsFocusSnapshot){const{index,id}=this.formatsFocusSnapshot;this.formatsFocusSnapshot=void 0,this.scheduleAfterUpdate(()=>{if(this.formats.length<=1)this.closeMenu(),this.triggerEl?.focus();else if(this.open){const nextIndex=this.formats.findIndex(format=>this.formatId(format)===id);this.focusMenuItemOnOpen(nextIndex>=0?nextIndex:index)}})}}effectiveColumns(rows){if(this.columns.length>0)return this.columns;const keys=new Set;for(const row of rows)for(const key of Object.keys(row))keys.add(key);return Array.from(keys,key=>({key,label:key}))}rowsToExport(){if(this.getRows===void 0)return this.rows;const supplied=this.getRows();return Array.isArray(supplied)?supplied:[]}rowsForExport(rows){const keys=this.effectiveColumns(rows).map(c=>c.key);return rows.map(row=>{const picked=Object.create(null);for(const key of keys)picked[key]=row[key];return picked})}formatId(format){return typeof format=="string"?format:format.formatId}formatLabel(format){return typeof format=="string"?format.toUpperCase():format.label}doExport(formatOption){if(this.disabled||this.loading)return;this.closeMenu(),this.triggerEl?.focus(),this.exportFailed=!1;const format=this.formatId(formatOption);if(!this.emit("lr-export",Object.freeze({format}),{cancelable:!0}).defaultPrevented&&!(format!=="csv"&&format!=="json"))try{const rows=this.rowsToExport();format==="csv"?downloadBlob(buildCsv(rows,this.effectiveColumns(rows),{bom:this.bom}),`${this.filename}.csv`,"text/csv;charset=utf-8;",this.ownerDocument):downloadBlob(JSON.stringify(this.rowsForExport(rows),null,2),`${this.filename}.json`,"application/json",this.ownerDocument),this.emit("lr-export-complete",Object.freeze({format}))}catch(error){this.exportFailed=!0,this.sink?.announce(this.localize("statusError")),this.emit("lr-export-error",Object.freeze({format,error}))}}onTriggerClick(){this.disabled||this.loading||this.formats.length!==0&&(this.formats.length===1?this.doExport(this.formats[0]):this.open?this.closeMenu():this.openMenu())}focus(options){this.triggerEl?.focus(options)}blur(){this.triggerEl?.blur()}click(){this.triggerEl?.click()}get effectiveLabel(){return this.label==null?this.localize("exportButtonLabel"):this.label}render(){const label=this.effectiveLabel,labelNamesTrigger=label.trim().length>0,accessibleLabel=this.accessibleLabel??(labelNamesTrigger?label:this.localize("exportButtonLabel")),triggerAriaLabel=this.accessibleLabel!==null||!labelNamesTrigger?accessibleLabel:nothing;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{sizes}from"../../../internal/sizes.styles.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{nextId}from"../../../internal/a11y.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{buildCsv,downloadBlob}from"./csv.js";import{styles}from"./export-button.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_exportButtonLabel,LYRA_DEFAULT_exportFormatMenuLabel,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";const EXPORT_BUTTON_APPEARANCE=optionalLiteralSetConverter(["outlined","quiet"]),MAX_EXPORT_FORMATS=1e4;function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}function formatArrayLength(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");return length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0?void 0:{source:value,length:Math.min(length.value,MAX_EXPORT_FORMATS)}}catch{return}}function projectExportFormat(value){if(value==="csv"||value==="json")return value;if(value===null||typeof value!="object")return;const formatId=getOwnDataDescriptor(value,"formatId"),label=getOwnDataDescriptor(value,"label");if(formatId===MISSING_OWN_DATA_DESCRIPTOR||formatId===UNSAFE_OWN_DATA_DESCRIPTOR||label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||typeof formatId.value!="string"||formatId.value.trim().length===0||typeof label.value!="string"||label.value.trim().length===0)return;const description=getOwnDataDescriptor(value,"description"),extension=getOwnDataDescriptor(value,"extension");return Object.freeze({formatId:formatId.value,label:label.value,...description!==MISSING_OWN_DATA_DESCRIPTOR&&description!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof description.value=="string"?{description:description.value}:{},...extension!==MISSING_OWN_DATA_DESCRIPTOR&&extension!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof extension.value=="string"?{extension:extension.value}:{}})}class LyraExportButton extends LyraElement{constructor(){super(...arguments),this._rows=Object.freeze([]),this._columns=Object.freeze([]),this.filename="export",this.bom=!1,this._formats=Object.freeze(["csv"]),this.disabled=!1,this.loading=!1,this.accessibleLabel=null,this.open=!1,this.exportFailed=!1,this.menuId=nextId("export-menu"),this.menuPositioned=!1,this.connectionGeneration=0,this._isFirstUpdate=!0,this.openVetoed=!1,this.pendingMenuFocusIndex=0,this.injectedHostTabIndex=!1,this.restoreFocusOnMenuClose=!1,this.onDocPointer=e=>{e.composedPath().includes(this)||(this.overlay?.isActive()?this.overlay.dismissBackdrop():this.closeMenu())},this.syncMenuOverlay=()=>{if(this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),!this.open||!this.isConnected){const restoreFocus=this.restoreFocusOnMenuClose;this.restoreFocusOnMenuClose=!1,this.deactivateMenuOverlay(restoreFocus);return}this.activateMenuOverlay(),this.bindDocumentPointer();const anchor=this.triggerEl,menu=this.menuEl,ownerDocument=this.ownerDocument;if(!anchor||!menu)return;const placement=place(anchor,menu,{strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});this.cleanup=placement,placement.ready.then(positioned=>{if(!(this.cleanup!==placement||!this.open||!this.isConnected||this.ownerDocument!==ownerDocument)){if(!positioned){this.forcedMenuClose="state",this.open=!1;return}this.menuPositioned=!0,this.focusMenuItem(this.pendingMenuFocusIndex),this.pendingMenuFocusIndex=0}})},this.onKeyDown=e=>{if(this.formats.length<=1||this.disabled||this.loading)return;const items=this.menuItemEls(),currentIndex=items.indexOf(e.target);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?0:currentIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?items.length-1:currentIndex-1);break;case"Home":this.open&&(e.preventDefault(),this.focusMenuItem(0));break;case"End":this.open&&(e.preventDefault(),this.focusMenuItem(items.length-1));break}}}static{this.defaultStrings={...super.defaultStrings,exportButtonLabel:LYRA_DEFAULT_exportButtonLabel,exportFormatMenuLabel:LYRA_DEFAULT_exportFormatMenuLabel,statusError:LYRA_DEFAULT_statusError}}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={rows:{attribute:!1,noAccessor:!0},columns:{attribute:!1,noAccessor:!0},formats:{attribute:!1,noAccessor:!0}}}get rows(){return this._rows}set rows(next){const previous=this._rows,source=Array.isArray(next)?next:[];this._rows=Object.freeze(source.map(row=>Object.freeze({...row}))),this.requestUpdate("rows",previous)}get columns(){return this._columns}set columns(next){const previous=this._columns,source=Array.isArray(next)?next:[];this._columns=Object.freeze(source.map(column=>Object.freeze({...column}))),this.requestUpdate("columns",previous)}get formats(){return this._formats}set formats(next){const previous=this._formats,source=formatArrayLength(next),seen=new Set,formats=[];for(let index=0;source&&index<source.length;index+=1){const descriptor=getOwnDataDescriptor(source.source,String(index));if(descriptor===MISSING_OWN_DATA_DESCRIPTOR||descriptor===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const snapshot=projectExportFormat(descriptor.value);if(!snapshot)continue;const id=typeof snapshot=="string"?snapshot:snapshot.formatId;typeof id!="string"||id.trim()===""||seen.has(id)||(seen.add(id),formats.push(snapshot))}this._formats=Object.freeze(formats),this.requestUpdate("formats",previous)}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get appearance(){return this._appearance}set appearance(next){const normalized=EXPORT_BUTTON_APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;old!==normalized&&(this._appearance=normalized,this.requestUpdate("appearance",old))}connectedCallback(){const pendingDisconnectDocument=this.pendingDisconnectDocument;if(this.pendingDisconnectDocument=void 0,this.connectionGeneration+=1,this.connectedDocument=this.ownerDocument,super.connectedCallback(),this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),pendingDisconnectDocument){if(pendingDisconnectDocument===this.ownerDocument){this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1;return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay");return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay")}disconnectedCallback(){const generation=++this.connectionGeneration,disconnectDocument=this.connectedDocument??this.ownerDocument;this.pendingDisconnectDocument=disconnectDocument,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),this.overlay?.suspend(),this.restoreFocusOnMenuClose=!1,this.sink?.release(),this.sink=void 0,queueDocumentMicrotask(disconnectDocument,()=>{this.connectionGeneration!==generation||this.isConnected||this.pendingDisconnectDocument!==disconnectDocument||(this.pendingDisconnectDocument=void 0,this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1)})}adoptedCallback(){super.adoptedCallback(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlay?.suspend(),this.sink?.release(),this.sink=void 0}bindDocumentPointer(){if(!this.isConnected)return;const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}openMenu(){this.open||(this.open=!0)}closeMenu(restoreFocus=!1){this.open&&(this.restoreFocusOnMenuClose||=restoreFocus,this.open=!1)}activateMenuOverlay(){if(this.overlay?.isActive()){this.overlay.resume();return}this.overlay=activateNonmodalOverlay({host:this,panel:()=>this.menuEl??null,onEscape:()=>this.closeMenu(!0),onBackdrop:()=>this.closeMenu(),onTab:()=>this.closeMenu(),restoreFocusTo:()=>this.triggerEl??null})}deactivateMenuOverlay(restoreFocus){const overlay=this.overlay;this.overlay=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}menuItemEls(){return Array.from(this.renderRoot.querySelectorAll('[part="menu-item"]'))}focusMenuItem(index){const items=this.menuItemEls();items.length!==0&&items[Math.max(0,Math.min(items.length-1,index))]?.focus()}focusMenuItemOnOpen(index){this.open&&this.menuPositioned?this.focusMenuItem(index):(this.pendingMenuFocusIndex=index,this.open||this.openMenu())}firstUpdated(changed){super.firstUpdated(changed),this.renderRoot.addEventListener("keydown",this.onKeyDown)}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this.setAttribute("aria-busy",String(this.loading)),(changed.has("disabled")||changed.has("loading"))&&!this.disabled&&!this.loading&&this.injectedHostTabIndex&&(this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.injectedHostTabIndex=!1),(changed.has("disabled")||changed.has("loading"))&&(this.disabled||this.loading)){const active=activeElementIn(this.shadowRoot);if(active===this.triggerEl||active?.getAttribute("part")==="menu-item"){this.hasAttribute("tabindex")||(this.tabIndex=-1,this.injectedHostTabIndex=!0);const ownerHTMLElement=this.ownerDocument.defaultView?.HTMLElement,nativeFocus=ownerHTMLElement?Reflect.get(ownerHTMLElement.prototype,"focus",this):void 0;typeof nativeFocus=="function"&&nativeFocus.call(this,{preventScroll:!0})}this.open&&(this.open=!1,this.forcedMenuClose="state")}if(changed.has("formats")){const active=activeElementIn(this.shadowRoot),index=this.menuItemEls().indexOf(active),previous=changed.get("formats")?.[index];this.formatsFocusSnapshot=index>=0&&previous?{index,id:this.formatId(previous)}:void 0}if(this.open&&this.formats.length<=1){const previousOpen=changed.get("open");this.forcedMenuClose=changed.has("formats")&&changed.get("formats")?.length?"formats":previousOpen===!1||previousOpen===void 0?"invalid-open":"state",this.open=!1}this.announceMenuTransition(changed)}announceMenuTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.forcedMenuClose)return;const name=this.open?"lr-show":"lr-hide";this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open)}updated(changed){super.updated(changed);const forcedMenuClose=this.forcedMenuClose;if(this.forcedMenuClose=void 0,(changed.has("open")||forcedMenuClose==="formats"||forcedMenuClose==="state")&&!this.openVetoed?this.syncMenuOverlay():this.openVetoed&&(this.restoreFocusOnMenuClose=!1),changed.has("formats")&&this.formatsFocusSnapshot){const{index,id}=this.formatsFocusSnapshot;this.formatsFocusSnapshot=void 0,this.scheduleAfterUpdate(()=>{if(this.formats.length<=1)this.closeMenu(),this.triggerEl?.focus();else if(this.open){const nextIndex=this.formats.findIndex(format=>this.formatId(format)===id);this.focusMenuItemOnOpen(nextIndex>=0?nextIndex:index)}})}}effectiveColumns(rows){if(this.columns.length>0)return this.columns;const keys=new Set;for(const row of rows)for(const key of Object.keys(row))keys.add(key);return Array.from(keys,key=>({key,label:key}))}rowsToExport(){if(this.getRows===void 0)return this.rows;const supplied=this.getRows();return Array.isArray(supplied)?supplied:[]}rowsForExport(rows){const keys=this.effectiveColumns(rows).map(c=>c.key);return rows.map(row=>{const picked=Object.create(null);for(const key of keys)picked[key]=row[key];return picked})}formatId(format){return typeof format=="string"?format:format.formatId}formatLabel(format){return typeof format=="string"?format.toUpperCase():format.label}doExport(formatOption){if(this.disabled||this.loading)return;this.closeMenu(),this.triggerEl?.focus(),this.exportFailed=!1;const format=this.formatId(formatOption);if(!this.emit("lr-export",Object.freeze({format}),{cancelable:!0}).defaultPrevented&&!(format!=="csv"&&format!=="json"))try{const rows=this.rowsToExport();format==="csv"?downloadBlob(buildCsv(rows,this.effectiveColumns(rows),{bom:this.bom}),`${this.filename}.csv`,"text/csv;charset=utf-8;",this.ownerDocument):downloadBlob(JSON.stringify(this.rowsForExport(rows),null,2),`${this.filename}.json`,"application/json",this.ownerDocument),this.emit("lr-export-complete",Object.freeze({format}))}catch(error){this.exportFailed=!0,this.sink?.announce(this.localize("statusError")),this.emit("lr-export-error",Object.freeze({format,error}))}}onTriggerClick(){this.disabled||this.loading||this.formats.length!==0&&(this.formats.length===1?this.doExport(this.formats[0]):this.open?this.closeMenu():this.openMenu())}focus(options){this.triggerEl?.focus(options)}blur(){this.triggerEl?.blur()}click(){this.triggerEl?.click()}get effectiveLabel(){return this.label==null?this.localize("exportButtonLabel"):this.label}render(){const label=this.effectiveLabel,labelNamesTrigger=label.trim().length>0,accessibleLabel=this.accessibleLabel??(labelNamesTrigger?label:this.localize("exportButtonLabel")),triggerAriaLabel=this.accessibleLabel!==null||!labelNamesTrigger?accessibleLabel:nothing;return html`
       <button
         part=${this.exportFailed?"trigger trigger-error":"trigger"}
         type="button"
@@ -29,4 +29,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
                   ${typeof f!="string"&&f.description?html`<span part="format-description">${f.description}</span>`:nothing}
                 </button>`)}
           </div>`:nothing}
-    `}}__decorate([property({attribute:!1})],LyraExportButton.prototype,"getRows",void 0),__decorate([property()],LyraExportButton.prototype,"filename",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"bom",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"loading",void 0),__decorate([property()],LyraExportButton.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraExportButton.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"open",void 0),__decorate([query('[part~="trigger"]')],LyraExportButton.prototype,"triggerEl",void 0),__decorate([query('[part="menu"]')],LyraExportButton.prototype,"menuEl",void 0),__decorate([state()],LyraExportButton.prototype,"exportFailed",void 0);export{LyraExportButton};
+    `}}__decorate([property({attribute:!1})],LyraExportButton.prototype,"getRows",void 0),__decorate([property()],LyraExportButton.prototype,"filename",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"bom",void 0),__decorate([property({reflect:!0,converter:optionalSizeConverter})],LyraExportButton.prototype,"size",null),__decorate([property({reflect:!0,converter:EXPORT_BUTTON_APPEARANCE})],LyraExportButton.prototype,"appearance",null),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"loading",void 0),__decorate([property()],LyraExportButton.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraExportButton.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"open",void 0),__decorate([query('[part~="trigger"]')],LyraExportButton.prototype,"triggerEl",void 0),__decorate([query('[part="menu"]')],LyraExportButton.prototype,"menuEl",void 0),__decorate([state()],LyraExportButton.prototype,"exportFailed",void 0);export{LyraExportButton};

package/dist/components/utility/export-button/export-button.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; position: relative; } [part~='trigger'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-m); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; } :where([part~='trigger']):hover:where(:not(:disabled)) { border-color: var(--lr-color-brand); } :where([part~='trigger']):active:where(:not(:disabled)) { border-color: var(--lr-color-brand); background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part~='trigger']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part~='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='trigger-error'] { border-color: var(--lr-color-danger); color: var(--lr-color-danger); } [part='menu'] { visibility: hidden; position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; inline-size: max-content; min-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-8rem), var(--lr-positioner-available-inline-size, 100vw) ); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-20rem), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: var(--lr-positioner-available-block-size, 100vh); overflow: auto; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); opacity: 0; transform: translateY(var(--lr-size-neg-4px)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } :host([open]) [part='menu'] { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [part='menu'] { transition: none; } } [part='menu-item'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-size-1px); box-sizing: border-box; inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); text-align: center; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--lr-radius); } :where([part='menu-item']):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); } :where([part='menu-item']):active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='menu-item']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='menu-item']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='format-description'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='format-label'], [part='format-description'] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; position: relative; --_lr-export-button-background: var(--lr-color-surface); --_lr-export-button-color: var(--lr-color-text); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-surface); --_lr-export-button-hover-color: var(--lr-color-text); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='outlined']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-brand); --_lr-export-button-border: var(--lr-color-border-strong); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-brand); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-brand); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='quiet']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-text-quiet); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-text-quiet); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text-quiet); --_lr-export-button-active-border: var(--lr-color-brand); } [part~='trigger'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-m); border: var(--lr-border-width-thin) solid var(--_lr-export-button-border); border-radius: var(--lr-radius); background: var(--_lr-export-button-background); color: var(--_lr-export-button-color); font: inherit; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; } :where([part~='trigger']):hover:where(:not(:disabled)) { background: var(--_lr-export-button-hover-background); color: var(--_lr-export-button-hover-color); border-color: var(--_lr-export-button-hover-border); } :where([part~='trigger']):active:where(:not(:disabled)) { background: var(--_lr-export-button-active-background); color: var(--_lr-export-button-active-color); border-color: var(--_lr-export-button-active-border); } :host([size='2xs']) [part~='trigger'], :host([size='xs']) [part~='trigger'], :host([size='s']) [part~='trigger'], :host([size='small']) [part~='trigger'], :host([size='m']) [part~='trigger'], :host([size='medium']) [part~='trigger'], :host([size='l']) [part~='trigger'], :host([size='large']) [part~='trigger'], :host([size='xl']) [part~='trigger'], :host([size='2xs']) [part='menu-item'], :host([size='xs']) [part='menu-item'], :host([size='s']) [part='menu-item'], :host([size='small']) [part='menu-item'], :host([size='m']) [part='menu-item'], :host([size='medium']) [part='menu-item'], :host([size='l']) [part='menu-item'], :host([size='large']) [part='menu-item'], :host([size='xl']) [part='menu-item'] { font-size: var(--lr-form-control-font-size); padding-block: var(--lr-form-control-padding-block); padding-inline: var(--lr-form-control-padding-inline); min-block-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); } [part~='trigger']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part~='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='trigger-error'] { border-color: var(--lr-color-danger); color: var(--lr-color-danger); } [part='menu'] { visibility: hidden; position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; inline-size: max-content; min-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-8rem), var(--lr-positioner-available-inline-size, 100vw) ); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-20rem), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: var(--lr-positioner-available-block-size, 100vh); overflow: auto; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); opacity: 0; transform: translateY(var(--lr-size-neg-4px)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } :host([open]) [part='menu'] { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [part='menu'] { transition: none; } } [part='menu-item'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-size-1px); box-sizing: border-box; inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); text-align: center; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--lr-radius); } :where([part='menu-item']):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); } :where([part='menu-item']):active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='menu-item']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='menu-item']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='format-description'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='format-label'], [part='format-description'] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};