@aceshooting/lyra-ui 24.1.0 → 25.0.0

package/dist/components/utility/mention-popover/mention-popover.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{maxCssTime}from"../../../internal/css-motion-time.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{styles}from"./mention-popover.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{LYRA_DEFAULT_mentionResultCount,LYRA_DEFAULT_mentionResultPosition,LYRA_DEFAULT_mentionSuggestions,LYRA_DEFAULT_noMatches}from"../../../internal/default-strings.generated.js";function isTextControl(el){const view=el.ownerDocument.defaultView;return view?el instanceof view.HTMLTextAreaElement?!0:el instanceof view.HTMLInputElement&&(el.type==="text"||el.type==="search"):!1}function isTextareaAnchor(el){const view=el.ownerDocument.defaultView;return!!(view&&el instanceof view.HTMLTextAreaElement)}const MIRROR_CSS_PROPS=["box-sizing","width","padding-top","padding-right","padding-bottom","padding-left","border-top-width","border-right-width","border-bottom-width","border-left-width","border-style","font-family","font-size","font-style","font-variant","font-weight","font-stretch","letter-spacing","word-spacing","line-height","text-align","text-indent","text-transform","tab-size","direction"];function caretClientRect(el){const owner=el.ownerDocument,view=owner.defaultView;if(!view)return null;const elRect=el.getBoundingClientRect();if(elRect.width===0||elRect.height===0)return null;const computed=view.getComputedStyle(el),mirror=owner.createElement("div");mirror.style.position="absolute",mirror.style.visibility="hidden",mirror.style.top="0",mirror.style.left="-9999px",mirror.style.whiteSpace=el instanceof view.HTMLTextAreaElement?"pre-wrap":"pre",mirror.style.overflowWrap="break-word";for(const prop of MIRROR_CSS_PROPS)mirror.style.setProperty(prop,computed.getPropertyValue(prop));const index=el.selectionStart??el.value.length;mirror.append(owner.createTextNode(el.value.slice(0,index)));const marker=owner.createElement("span");marker.textContent=el.value.slice(index)||"​",mirror.appendChild(marker),owner.body.appendChild(mirror);const mirrorRect=mirror.getBoundingClientRect(),markerRect=marker.getBoundingClientRect();mirror.remove();const lineHeight=parseFloat(computed.lineHeight)||markerRect.height||16;return new view.DOMRect(elRect.left+(markerRect.left-mirrorRect.left)-el.scrollLeft,elRect.top+(markerRect.top-mirrorRect.top)-el.scrollTop,1,lineHeight)}class LyraMentionPopover extends LyraElement{constructor(){super(...arguments),this._textareaFocusSessionGeneration=0,this._items=Object.freeze([]),this.query="",this.open=!1,this.filter=null,this.activeIndex=0,this.listboxHidden=!0,this.listboxHideToken=0,this._listId=nextId("mention-popover-listbox"),this.virtualAnchor=null,this._isFirstUpdate=!0,this._silentClose=!1,this._ownsFocus=!1,this._focusTransferGeneration=0,this.onListboxMouseDown=e=>{e.target.closest('[part="option"]')&&e.preventDefault()},this.onListboxClick=e=>{const optionEl=e.target.closest('[part="option"]'),index=Number(optionEl?.dataset.index);if(!Number.isInteger(index)||index<0)return;const item=this.filteredItems[index];item&&this.commit(item)},this.onListboxKeyDown=e=>{e.defaultPrevented||!this._ownsFocus||this.handleKeyDown(e)&&this.open&&this.focusActiveOption()}}static{this.defaultStrings={...super.defaultStrings,mentionResultCount:LYRA_DEFAULT_mentionResultCount,mentionResultPosition:LYRA_DEFAULT_mentionResultPosition,mentionSuggestions:LYRA_DEFAULT_mentionSuggestions,noMatches:LYRA_DEFAULT_noMatches}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}requestUpdate(name,oldValue,options){(name==="open"||name==="anchor"||name==="query"||name==="items"||name==="filter")&&this.hasTextareaFocusSession()&&(this._textareaFocusSessionGeneration+=1),super.requestUpdate(name,oldValue,options)}hasTextareaFocusSession(){const relationshipControl=this.anchorRelationship?.control;return this.anchor!==void 0&&isTextareaAnchor(this.anchor)||relationshipControl!==void 0&&isTextareaAnchor(relationshipControl)}get items(){return this._items}set items(next){const previous=this._items,source=Array.isArray(next)?next:[];this._items=Object.freeze(source.map(item=>Object.freeze({...item}))),this.requestUpdate("items",previous)}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.announceResultState()}willUpdate(changed){super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,changed.has("open")&&this.open&&(this.listboxHidden=!1),this._ownsFocus&&!this.fallbackFocusIsStillOwned()&&(this._ownsFocus=!1,this._focusOwnerPredicate=void 0),(changed.has("query")||changed.has("items")||changed.has("filter"))&&(this.activeIndex=0);const candidatesChanged=changed.has("query")||changed.has("items")||changed.has("filter");this._ownsFocus&&changed.has("open")&&!this.open?(this.restoreAnchorFocus(),this._ownsFocus=!1,this._focusOwnerPredicate=void 0):this._ownsFocus&&this.open&&candidatesChanged&&this.filteredItems.length===0&&(this.anchor?.isConnected?this.restoreAnchorFocus():this.renderRoot.querySelector('[part="listbox"]')?.focus({preventScroll:!0}),this._ownsFocus=!1,this._focusOwnerPredicate=void 0),this._ownsFocus&&changed.has("anchor")&&this.anchorRelationship?.control!==this.anchor&&this.detachAnchorRelationship()}updated(changed){if(super.updated(changed),changed.has("open"))if(this.open)this.reposition();else{this.cleanup?.(),this.cleanup=void 0,this.virtualAnchor?.remove(),this.settleListboxHidden();const relationshipControl=this.anchorRelationship?.control;relationshipControl&&isTextareaAnchor(relationshipControl)&&this.detachAnchorRelationship(),!this._isFirstUpdate&&!this._silentClose&&queueMicrotask(()=>this.emit("lr-mention-close")),this._silentClose=!1}else this.open&&(changed.has("anchor")||changed.has("query"))&&this.reposition();if(changed.has("activeIndex")||changed.has("query")||changed.has("items")||changed.has("filter")){const active=this.renderRoot.querySelector('[part="option"][data-active]');active?.scrollIntoView({block:"nearest"}),this._ownsFocus&&(!active&&this.anchor?.isConnected?this.restoreFocus():this.restoreFocus(!0))}this.syncAnchorRelationship(),this.open?this.announceResultState():this.resetResultAnnouncements()}disconnectedCallback(){this._focusTransferGeneration+=1,this.resetResultAnnouncements(),this.announcementSink?.release(),this.announcementSink=void 0,this._ownsFocus&&this.callFocusOwner(this._focusOwnerPredicate)&&this.restoreAnchorFocus(),this._ownsFocus=!1,this._focusOwnerPredicate=void 0,this.detachAnchorRelationship(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.virtualAnchor?.remove(),this.listboxHideToken++,this.listboxHidden=!0,this.open=!1}adoptedCallback(){super.adoptedCallback(),this._focusTransferGeneration+=1,this.resetResultAnnouncements(),this.syncAnnouncementSink(),this._ownsFocus&&this.callFocusOwner(this._focusOwnerPredicate)&&this.restoreAnchorFocus(),this._ownsFocus=!1,this._focusOwnerPredicate=void 0,this.detachAnchorRelationship(),this.open=!1}syncAnnouncementSink(){this.announcementSink?.element?.ownerDocument!==this.ownerDocument&&(this.announcementSink?.release(),this.announcementSink=this.isConnected?acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}):void 0)}resetResultAnnouncements(){this.announcedResultCount=void 0,this.announcedResultPosition=void 0}announceResultState(){if(!this.open||!this.announcementSink)return;const rows=this.filteredItems,resultState=rows.length===0?this.localize("noMatches"):this.localize("mentionResultCount",void 0,{count:rows.length}),index=this.clampedIndex(rows),position=index<0?void 0:this.localize("mentionResultPosition",void 0,{current:index+1,total:rows.length});if(this._isFirstUpdate){this.announcedResultCount=resultState,this.announcedResultPosition=position;return}if(resultState!==this.announcedResultCount&&(this.announcementSink.announce(resultState),this.announcedResultCount=resultState),position===void 0){this.announcedResultPosition=void 0;return}position!==this.announcedResultPosition&&(this.announcementSink.announce(position),this.announcedResultPosition=position)}snapshotAttribute(control,name){return{present:control.hasAttribute(name),value:control.getAttribute(name)}}restoreAttribute(control,name,snapshot){snapshot.present?control.setAttribute(name,snapshot.value??""):control.removeAttribute(name)}captureAnchorCaret(relationship=this.anchorRelationship){if(!relationship||!isTextareaAnchor(relationship.control))return;const{control}=relationship;relationship.selectionStart=control.selectionStart,relationship.selectionEnd=control.selectionEnd,relationship.selectionDirection=control.selectionDirection}restoreRelationshipFocus(relationship){const{control}=relationship;if(control.isConnected)try{control.focus({preventScroll:!0}),isTextareaAnchor(control)&&relationship.selectionStart!==null&&relationship.selectionStart!==void 0&&relationship.selectionEnd!==null&&relationship.selectionEnd!==void 0&&control.setSelectionRange(relationship.selectionStart,relationship.selectionEnd,relationship.selectionDirection??void 0)}catch{}}restoreAnchorFocus(){const relationship=this.anchorRelationship;if(relationship){this.restoreRelationshipFocus(relationship);return}const anchor=this.anchor;if(anchor?.isConnected)try{anchor.focus({preventScroll:!0})}catch{}}attachAnchorRelationship(control){const reflected=control,textarea=isTextareaAnchor(control),attributes=new Map((textarea?["role","aria-expanded","aria-haspopup","aria-autocomplete","aria-controls","aria-activedescendant"]:["role","aria-expanded","aria-haspopup","aria-controls","aria-activedescendant"]).map(name=>[name,this.snapshotAttribute(control,name)])),activeElement="ariaActiveDescendantElement"in control?reflected.ariaActiveDescendantElement??null:void 0,controlsElements="ariaControlsElements"in control?reflected.ariaControlsElements??null:void 0,capturedTextareaActiveElement=textarea&&attributes.get("aria-activedescendant")?.present&&attributes.get("aria-activedescendant")?.value===""?activeElement??void 0:void 0,capturedTextareaControlsElements=textarea&&attributes.get("aria-controls")?.present&&attributes.get("aria-controls")?.value===""&&controlsElements?.length?controlsElements:void 0,relationship={control,attributes,activeElement:textarea?capturedTextareaActiveElement:activeElement,controlsElements:textarea?capturedTextareaControlsElements:controlsElements,selectionStart:textarea?control.selectionStart:void 0,selectionEnd:textarea?control.selectionEnd:void 0,selectionDirection:textarea?control.selectionDirection:void 0};return this.anchorRelationship=relationship,relationship}detachAnchorRelationship(){const relationship=this.anchorRelationship;if(!relationship)return;if(this.anchorRelationship=void 0,this._ownsFocus&&(this.restoreRelationshipFocus(relationship),this._ownsFocus=!1,this._focusOwnerPredicate=void 0),!isTextareaAnchor(relationship.control)){const reflected2=relationship.control;if(relationship.activeElement!==void 0)try{reflected2.ariaActiveDescendantElement=relationship.activeElement}catch{}if(relationship.controlsElements!==void 0)try{reflected2.ariaControlsElements=relationship.controlsElements}catch{}for(const[name,snapshot]of relationship.attributes)this.restoreAttribute(relationship.control,name,snapshot);return}for(const[name,snapshot]of relationship.attributes)this.restoreAttribute(relationship.control,name,snapshot);const reflected=relationship.control;if(relationship.activeElement!==void 0)try{reflected.ariaActiveDescendantElement=relationship.activeElement}catch{}if(relationship.controlsElements!==void 0)try{reflected.ariaControlsElements=relationship.controlsElements}catch{}}syncAnchorRelationship(){const next=this.open&&this.anchor&&isTextControl(this.anchor)?this.anchor:void 0;if(this.anchorRelationship?.control!==next&&this.detachAnchorRelationship(),!next)return;const relationship=this.anchorRelationship??this.attachAnchorRelationship(next),control=relationship.control;if(isTextareaAnchor(control)){control.removeAttribute("role"),control.removeAttribute("aria-expanded"),control.removeAttribute("aria-controls"),control.removeAttribute("aria-activedescendant");const reflected2=control;if(relationship.activeElement!==void 0)try{reflected2.ariaActiveDescendantElement=null}catch{}if(relationship.controlsElements!==void 0)try{reflected2.ariaControlsElements=null}catch{}control.removeAttribute("aria-controls"),control.removeAttribute("aria-activedescendant"),control.setAttribute("aria-haspopup","listbox"),control.setAttribute("aria-autocomplete","list");return}relationship.attributes.get("role")?.present||control.setAttribute("role","combobox"),control.setAttribute("aria-expanded","true"),control.setAttribute("aria-haspopup","listbox");const listbox=this.renderRoot.querySelector('[part="listbox"]'),reflected=control;if(listbox&&"ariaControlsElements"in control)try{control.removeAttribute("aria-controls"),reflected.ariaControlsElements=[listbox],reflected.ariaControlsElements?.[0]!==listbox&&(reflected.ariaControlsElements=[this],reflected.ariaControlsElements?.[0]!==this&&control.removeAttribute("aria-controls"))}catch{control.removeAttribute("aria-controls")}else control.removeAttribute("aria-controls");control.removeAttribute("aria-activedescendant"),this.syncActiveDescendant(control)}get filteredItems(){const locale=this.effectiveLocale,q=(this.query??"").trim().toLocaleLowerCase(locale);return this.items.filter(item=>typeof item.label!="string"||item.label.trim().length===0?!1:q?this.filter?this.filter(item,q):item.label.toLocaleLowerCase(locale).includes(q)||(typeof item.description=="string"?item.description:"").toLocaleLowerCase(locale).includes(q):!0)}get activeDescendantId(){if(!this.open)return null;const idx=this.clampedIndex(this.filteredItems);return idx>=0?this.rowId(idx):null}get activeDescendantElement(){const id=this.activeDescendantId,escape=this.ownerDocument.defaultView?.CSS.escape;return id&&escape?this.renderRoot.querySelector(`#${escape(id)}`):null}syncActiveDescendant(_control){if(isTextareaAnchor(_control)||(_control.removeAttribute("aria-activedescendant"),!("ariaActiveDescendantElement"in _control)))return!1;const active=this.activeDescendantElement;try{const reflected=_control;reflected.ariaActiveDescendantElement=active;const accepted=reflected.ariaActiveDescendantElement===active;return accepted||(reflected.ariaActiveDescendantElement=null,_control.removeAttribute("aria-activedescendant")),accepted}catch{return _control.removeAttribute("aria-activedescendant"),!1}}async focusActiveOption(options={}){const ownsFocus=options.ownsFocus??(this._ownsFocus?this._focusOwnerPredicate:void 0);if(!this.open||!this.isConnected||!this.activeDescendantElement||!this.callFocusOwner(ownsFocus))return!1;const generation=++this._focusTransferGeneration,textareaSession=this.anchor!==void 0&&isTextareaAnchor(this.anchor),textareaSessionGeneration=this._textareaFocusSessionGeneration,snapshot={ownerDocument:this.ownerDocument,anchor:this.anchor,items:this.items,query:this.query,filter:this.filter,activeIndex:this.activeIndex};if(await this.updateComplete,await this.cleanup?.ready===!1||generation!==this._focusTransferGeneration||textareaSession&&textareaSessionGeneration!==this._textareaFocusSessionGeneration||!this.isConnected||!this.open||this.ownerDocument!==snapshot.ownerDocument||this.anchor!==snapshot.anchor||this.items!==snapshot.items||this.query!==snapshot.query||this.filter!==snapshot.filter||this.activeIndex!==snapshot.activeIndex||!this.callFocusOwner(ownsFocus))return!1;const active=this.activeDescendantElement;return!active?.isConnected||!this.callFocusOwner(ownsFocus)||(this.captureAnchorCaret(),active.focus({preventScroll:!0}),activeElementIn(this.shadowRoot)!==active)?!1:(this._focusOwnerPredicate=ownsFocus,this._ownsFocus=!0,!0)}async restoreFocus(waitForPlacement=!1){if(waitForPlacement){if(await this.cleanup?.ready===!1||!this._ownsFocus||!this.open)return;if(this.hasTextareaFocusSession()&&!this.fallbackFocusIsStillOwned()){this._ownsFocus=!1,this._focusOwnerPredicate=void 0;return}}const active=this.renderRoot.querySelector('[part="option"][data-active]');active?active.focus({preventScroll:!0}):this.anchor?.isConnected?(this.renderRoot.querySelector('[part="listbox"]')?.setAttribute("tabindex","-1"),this.restoreAnchorFocus(),this.scheduleAfterUpdate(()=>{this._ownsFocus=!1,this._focusOwnerPredicate=void 0})):this.renderRoot.querySelector('[part="listbox"]')?.focus({preventScroll:!0})}callFocusOwner(predicate){try{return predicate?.()??!0}catch{return!1}}fallbackFocusIsStillOwned(){return this.callFocusOwner(this._focusOwnerPredicate)&&activeElementIn(this.shadowRoot)!==null}get listboxId(){return this._listId}handleKeyDown(e){if(!this.open||e.isComposing||e.keyCode===229)return!1;const rows=this.filteredItems;switch(e.key){case"ArrowDown":return rows.length?(e.preventDefault(),this.activeIndex=this.stepEnabledIndex(rows,this.clampedIndex(rows),1),!0):!1;case"ArrowUp":return rows.length?(e.preventDefault(),this.activeIndex=this.stepEnabledIndex(rows,this.clampedIndex(rows),-1),!0):!1;case"Enter":case"Tab":{const idx=this.clampedIndex(rows);return idx<0?!1:(e.preventDefault(),this.commit(rows[idx]),!0)}case"Escape":return e.preventDefault(),this.open=!1,!0;default:return!1}}clampedIndex(rows){const count=rows.length;if(!count)return-1;const clamped=Math.min(Math.max(this.activeIndex,0),count-1);if(!rows[clamped]?.disabled)return clamped;for(let forward=clamped+1;forward<count;forward+=1)if(!rows[forward]?.disabled)return forward;for(let backward=clamped-1;backward>=0;backward-=1)if(!rows[backward]?.disabled)return backward;return-1}stepEnabledIndex(rows,from,direction){const count=rows.length;if(!count)return 0;let index=Math.min(Math.max(from+direction,0),count-1);for(let steps=0;steps<count;steps+=1){if(!rows[index]?.disabled)return index;if(index+=direction,index<0||index>=count)break}return from>=0&&from<count&&!rows[from]?.disabled?from:this.activeIndex}rowId(index){return`${this._listId}-opt-${index}`}commit(item){if(item.disabled)return;const index=this.items.indexOf(item);if(index<0)return;const relationshipControl=this.anchorRelationship?.control;relationshipControl&&isTextareaAnchor(relationshipControl)&&this.detachAnchorRelationship(),this.emit("lr-mention-select",Object.freeze({suggestionId:item.suggestionId,index,label:item.label})),this._silentClose=!0,this.open=!1}reposition(){this.cleanup?.(),this.cleanup=void 0;const anchorEl=this.resolveAnchorElement(),popup=this.renderRoot.querySelector('[part="listbox"]');if(anchorEl&&popup){const placement=place(anchorEl,popup,{placement:"bottom-start",strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});this.cleanup=placement,placement.ready.then(positioned=>{positioned||this.cleanup!==placement||!this.open||(this._silentClose=!0,this.open=!1)})}}async settleListboxHidden(){const token=++this.listboxHideToken;if(await this.updateComplete,token!==this.listboxHideToken||this.open)return;const listbox=this.renderRoot.querySelector('[part="listbox"]'),view=this.ownerDocument.defaultView;if(listbox&&view&&!prefersReducedMotion(this)){const computed=view.getComputedStyle(listbox),durationMs=maxCssTime(computed.transitionDuration)+maxCssTime(computed.transitionDelay);if(durationMs>0&&(await new Promise(resolve=>{let settled=!1,timeout;const finish=()=>{settled||(settled=!0,timeout!==void 0&&view.clearTimeout(timeout),listbox.removeEventListener("transitionend",onEnd),listbox.removeEventListener("transitioncancel",onEnd),resolve())},onEnd=event=>{event.target===listbox&&finish()};listbox.addEventListener("transitionend",onEnd),listbox.addEventListener("transitioncancel",onEnd),timeout=view.setTimeout(finish,durationMs+50)}),token!==this.listboxHideToken||this.open))return}this.listboxHidden=!0}resolveAnchorElement(){const anchor=this.anchor;if(!anchor)return null;if(isTextControl(anchor)){const rect=caretClientRect(anchor);if(rect){const owner=anchor.ownerDocument;this.virtualAnchor&&this.virtualAnchor.ownerDocument!==owner&&(this.virtualAnchor.remove(),this.virtualAnchor=null);const virtual=this.virtualAnchor??(this.virtualAnchor=owner.createElement("div"));return virtual.style.position="fixed",virtual.style.left=`${rect.left}px`,virtual.style.top=`${rect.top}px`,virtual.style.width="0",virtual.style.height=`${rect.height}px`,virtual.style.pointerEvents="none",virtual.isConnected||owner.body.appendChild(virtual),virtual}}return anchor}get effectiveEmptyText(){return this.emptyText===void 0?this.localize("noMatches"):this.emptyText}get effectiveLabel(){return hostAriaLabel(this)??(this.label===void 0?this.localize("mentionSuggestions"):this.label)}renderRow(item,index,activeId){const id=this.rowId(index),active=id===activeId;return html`
+import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{maxCssTime}from"../../../internal/css-motion-time.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{styles}from"./mention-popover.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{LYRA_DEFAULT_mentionResultCount,LYRA_DEFAULT_mentionResultPosition,LYRA_DEFAULT_mentionSuggestions,LYRA_DEFAULT_noMatches}from"../../../internal/default-strings.generated.js";function isTextControl(el){const view=el.ownerDocument.defaultView;return view?el instanceof view.HTMLTextAreaElement?!0:el instanceof view.HTMLInputElement&&(el.type==="text"||el.type==="search"):!1}function isTextareaAnchor(el){const view=el.ownerDocument.defaultView;return!!(view&&el instanceof view.HTMLTextAreaElement)}const MIRROR_CSS_PROPS=["box-sizing","width","padding-top","padding-right","padding-bottom","padding-left","border-top-width","border-right-width","border-bottom-width","border-left-width","border-style","font-family","font-size","font-style","font-variant","font-weight","font-stretch","letter-spacing","word-spacing","line-height","text-align","text-indent","text-transform","tab-size","direction"];function caretClientRect(el){const owner=el.ownerDocument,view=owner.defaultView;if(!view)return null;const elRect=el.getBoundingClientRect();if(elRect.width===0||elRect.height===0)return null;const computed=view.getComputedStyle(el),mirror=owner.createElement("div");mirror.style.position="absolute",mirror.style.visibility="hidden",mirror.style.top="0",mirror.style.left="-9999px",mirror.style.whiteSpace=el instanceof view.HTMLTextAreaElement?"pre-wrap":"pre",mirror.style.overflowWrap="break-word";for(const prop of MIRROR_CSS_PROPS)mirror.style.setProperty(prop,computed.getPropertyValue(prop));const index=el.selectionStart??el.value.length;mirror.append(owner.createTextNode(el.value.slice(0,index)));const marker=owner.createElement("span");marker.textContent=el.value.slice(index)||"​",mirror.appendChild(marker),owner.body.appendChild(mirror);const mirrorRect=mirror.getBoundingClientRect(),markerRect=marker.getBoundingClientRect();mirror.remove();const lineHeight=parseFloat(computed.lineHeight)||markerRect.height||16;return new view.DOMRect(elRect.left+(markerRect.left-mirrorRect.left)-el.scrollLeft,elRect.top+(markerRect.top-mirrorRect.top)-el.scrollTop,1,lineHeight)}class LyraMentionPopover extends LyraElement{static{this.defaultStrings={...super.defaultStrings,mentionResultCount:LYRA_DEFAULT_mentionResultCount,mentionResultPosition:LYRA_DEFAULT_mentionResultPosition,mentionSuggestions:LYRA_DEFAULT_mentionSuggestions,noMatches:LYRA_DEFAULT_noMatches}}constructor(){super(),this._textareaFocusSessionGeneration=0,this._items=Object.freeze([]),this.query="",this.open=!1,this.filter=null,this.activeIndex=0,this.listboxHidden=!0,this.listboxHideToken=0,this._listId=nextId("mention-popover-listbox"),this.virtualAnchor=null,this._isFirstUpdate=!0,this._silentClose=!1,this._ownsFocus=!1,this._focusTransferGeneration=0,this.onListboxMouseDown=e=>{e.target.closest('[part="option"]')&&e.preventDefault()},this.onListboxClick=e=>{const optionEl=e.target.closest('[part="option"]'),index=Number(optionEl?.dataset.index);if(!Number.isInteger(index)||index<0)return;const item=this.filteredItems[index];item&&this.commit(item)},this.onListboxKeyDown=e=>{e.defaultPrevented||!this._ownsFocus||this.handleKeyDown(e)&&this.open&&this.focusActiveOption()},new GlassScrollLayer(this,'[part="listbox"]',()=>this.open)}static{this.styles=[LyraElement.styles,styles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}requestUpdate(name,oldValue,options){(name==="open"||name==="anchor"||name==="query"||name==="items"||name==="filter")&&this.hasTextareaFocusSession()&&(this._textareaFocusSessionGeneration+=1),super.requestUpdate(name,oldValue,options)}hasTextareaFocusSession(){const relationshipControl=this.anchorRelationship?.control;return this.anchor!==void 0&&isTextareaAnchor(this.anchor)||relationshipControl!==void 0&&isTextareaAnchor(relationshipControl)}get items(){return this._items}set items(next){const previous=this._items,source=Array.isArray(next)?next:[];this._items=Object.freeze(source.map(item=>Object.freeze({...item}))),this.requestUpdate("items",previous)}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.announceResultState()}willUpdate(changed){super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,changed.has("open")&&this.open&&(this.listboxHidden=!1),this._ownsFocus&&!this.fallbackFocusIsStillOwned()&&(this._ownsFocus=!1,this._focusOwnerPredicate=void 0),(changed.has("query")||changed.has("items")||changed.has("filter"))&&(this.activeIndex=0);const candidatesChanged=changed.has("query")||changed.has("items")||changed.has("filter");this._ownsFocus&&changed.has("open")&&!this.open?(this.restoreAnchorFocus(),this._ownsFocus=!1,this._focusOwnerPredicate=void 0):this._ownsFocus&&this.open&&candidatesChanged&&this.filteredItems.length===0&&(this.anchor?.isConnected?this.restoreAnchorFocus():this.renderRoot.querySelector('[part="listbox"]')?.focus({preventScroll:!0}),this._ownsFocus=!1,this._focusOwnerPredicate=void 0),this._ownsFocus&&changed.has("anchor")&&this.anchorRelationship?.control!==this.anchor&&this.detachAnchorRelationship()}updated(changed){if(super.updated(changed),changed.has("open"))if(this.open)this.reposition();else{this.cleanup?.(),this.cleanup=void 0,this.virtualAnchor?.remove(),this.settleListboxHidden();const relationshipControl=this.anchorRelationship?.control;relationshipControl&&isTextareaAnchor(relationshipControl)&&this.detachAnchorRelationship(),!this._isFirstUpdate&&!this._silentClose&&queueMicrotask(()=>this.emit("lr-mention-close")),this._silentClose=!1}else this.open&&(changed.has("anchor")||changed.has("query"))&&this.reposition();if(changed.has("activeIndex")||changed.has("query")||changed.has("items")||changed.has("filter")){const active=this.renderRoot.querySelector('[part="option"][data-active]');active?.scrollIntoView({block:"nearest"}),this._ownsFocus&&(!active&&this.anchor?.isConnected?this.restoreFocus():this.restoreFocus(!0))}this.syncAnchorRelationship(),this.open?this.announceResultState():this.resetResultAnnouncements()}disconnectedCallback(){this._focusTransferGeneration+=1,this.resetResultAnnouncements(),this.announcementSink?.release(),this.announcementSink=void 0,this._ownsFocus&&this.callFocusOwner(this._focusOwnerPredicate)&&this.restoreAnchorFocus(),this._ownsFocus=!1,this._focusOwnerPredicate=void 0,this.detachAnchorRelationship(),super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.virtualAnchor?.remove(),this.listboxHideToken++,this.listboxHidden=!0,this.open=!1}adoptedCallback(){super.adoptedCallback(),this._focusTransferGeneration+=1,this.resetResultAnnouncements(),this.syncAnnouncementSink(),this._ownsFocus&&this.callFocusOwner(this._focusOwnerPredicate)&&this.restoreAnchorFocus(),this._ownsFocus=!1,this._focusOwnerPredicate=void 0,this.detachAnchorRelationship(),this.open=!1}syncAnnouncementSink(){this.announcementSink?.element?.ownerDocument!==this.ownerDocument&&(this.announcementSink?.release(),this.announcementSink=this.isConnected?acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}):void 0)}resetResultAnnouncements(){this.announcedResultCount=void 0,this.announcedResultPosition=void 0}announceResultState(){if(!this.open||!this.announcementSink)return;const rows=this.filteredItems,resultState=rows.length===0?this.localize("noMatches"):this.localize("mentionResultCount",void 0,{count:rows.length}),index=this.clampedIndex(rows),position=index<0?void 0:this.localize("mentionResultPosition",void 0,{current:index+1,total:rows.length});if(this._isFirstUpdate){this.announcedResultCount=resultState,this.announcedResultPosition=position;return}if(resultState!==this.announcedResultCount&&(this.announcementSink.announce(resultState),this.announcedResultCount=resultState),position===void 0){this.announcedResultPosition=void 0;return}position!==this.announcedResultPosition&&(this.announcementSink.announce(position),this.announcedResultPosition=position)}snapshotAttribute(control,name){return{present:control.hasAttribute(name),value:control.getAttribute(name)}}restoreAttribute(control,name,snapshot){snapshot.present?control.setAttribute(name,snapshot.value??""):control.removeAttribute(name)}captureAnchorCaret(relationship=this.anchorRelationship){if(!relationship||!isTextareaAnchor(relationship.control))return;const{control}=relationship;relationship.selectionStart=control.selectionStart,relationship.selectionEnd=control.selectionEnd,relationship.selectionDirection=control.selectionDirection}restoreRelationshipFocus(relationship){const{control}=relationship;if(control.isConnected)try{control.focus({preventScroll:!0}),isTextareaAnchor(control)&&relationship.selectionStart!==null&&relationship.selectionStart!==void 0&&relationship.selectionEnd!==null&&relationship.selectionEnd!==void 0&&control.setSelectionRange(relationship.selectionStart,relationship.selectionEnd,relationship.selectionDirection??void 0)}catch{}}restoreAnchorFocus(){const relationship=this.anchorRelationship;if(relationship){this.restoreRelationshipFocus(relationship);return}const anchor=this.anchor;if(anchor?.isConnected)try{anchor.focus({preventScroll:!0})}catch{}}attachAnchorRelationship(control){const reflected=control,textarea=isTextareaAnchor(control),attributes=new Map((textarea?["role","aria-expanded","aria-haspopup","aria-autocomplete","aria-controls","aria-activedescendant"]:["role","aria-expanded","aria-haspopup","aria-controls","aria-activedescendant"]).map(name=>[name,this.snapshotAttribute(control,name)])),activeElement="ariaActiveDescendantElement"in control?reflected.ariaActiveDescendantElement??null:void 0,controlsElements="ariaControlsElements"in control?reflected.ariaControlsElements??null:void 0,capturedTextareaActiveElement=textarea&&attributes.get("aria-activedescendant")?.present&&attributes.get("aria-activedescendant")?.value===""?activeElement??void 0:void 0,capturedTextareaControlsElements=textarea&&attributes.get("aria-controls")?.present&&attributes.get("aria-controls")?.value===""&&controlsElements?.length?controlsElements:void 0,relationship={control,attributes,activeElement:textarea?capturedTextareaActiveElement:activeElement,controlsElements:textarea?capturedTextareaControlsElements:controlsElements,selectionStart:textarea?control.selectionStart:void 0,selectionEnd:textarea?control.selectionEnd:void 0,selectionDirection:textarea?control.selectionDirection:void 0};return this.anchorRelationship=relationship,relationship}detachAnchorRelationship(){const relationship=this.anchorRelationship;if(!relationship)return;if(this.anchorRelationship=void 0,this._ownsFocus&&(this.restoreRelationshipFocus(relationship),this._ownsFocus=!1,this._focusOwnerPredicate=void 0),!isTextareaAnchor(relationship.control)){const reflected2=relationship.control;if(relationship.activeElement!==void 0)try{reflected2.ariaActiveDescendantElement=relationship.activeElement}catch{}if(relationship.controlsElements!==void 0)try{reflected2.ariaControlsElements=relationship.controlsElements}catch{}for(const[name,snapshot]of relationship.attributes)this.restoreAttribute(relationship.control,name,snapshot);return}for(const[name,snapshot]of relationship.attributes)this.restoreAttribute(relationship.control,name,snapshot);const reflected=relationship.control;if(relationship.activeElement!==void 0)try{reflected.ariaActiveDescendantElement=relationship.activeElement}catch{}if(relationship.controlsElements!==void 0)try{reflected.ariaControlsElements=relationship.controlsElements}catch{}}syncAnchorRelationship(){const next=this.open&&this.anchor&&isTextControl(this.anchor)?this.anchor:void 0;if(this.anchorRelationship?.control!==next&&this.detachAnchorRelationship(),!next)return;const relationship=this.anchorRelationship??this.attachAnchorRelationship(next),control=relationship.control;if(isTextareaAnchor(control)){control.removeAttribute("role"),control.removeAttribute("aria-expanded"),control.removeAttribute("aria-controls"),control.removeAttribute("aria-activedescendant");const reflected2=control;if(relationship.activeElement!==void 0)try{reflected2.ariaActiveDescendantElement=null}catch{}if(relationship.controlsElements!==void 0)try{reflected2.ariaControlsElements=null}catch{}control.removeAttribute("aria-controls"),control.removeAttribute("aria-activedescendant"),control.setAttribute("aria-haspopup","listbox"),control.setAttribute("aria-autocomplete","list");return}relationship.attributes.get("role")?.present||control.setAttribute("role","combobox"),control.setAttribute("aria-expanded","true"),control.setAttribute("aria-haspopup","listbox");const listbox=this.renderRoot.querySelector('[part="listbox"]'),reflected=control;if(listbox&&"ariaControlsElements"in control)try{control.removeAttribute("aria-controls"),reflected.ariaControlsElements=[listbox],reflected.ariaControlsElements?.[0]!==listbox&&(reflected.ariaControlsElements=[this],reflected.ariaControlsElements?.[0]!==this&&control.removeAttribute("aria-controls"))}catch{control.removeAttribute("aria-controls")}else control.removeAttribute("aria-controls");control.removeAttribute("aria-activedescendant"),this.syncActiveDescendant(control)}get filteredItems(){const locale=this.effectiveLocale,q=(this.query??"").trim().toLocaleLowerCase(locale);return this.items.filter(item=>typeof item.label!="string"||item.label.trim().length===0?!1:q?this.filter?this.filter(item,q):item.label.toLocaleLowerCase(locale).includes(q)||(typeof item.description=="string"?item.description:"").toLocaleLowerCase(locale).includes(q):!0)}get activeDescendantId(){if(!this.open)return null;const idx=this.clampedIndex(this.filteredItems);return idx>=0?this.rowId(idx):null}get activeDescendantElement(){const id=this.activeDescendantId,escape=this.ownerDocument.defaultView?.CSS.escape;return id&&escape?this.renderRoot.querySelector(`#${escape(id)}`):null}syncActiveDescendant(_control){if(isTextareaAnchor(_control)||(_control.removeAttribute("aria-activedescendant"),!("ariaActiveDescendantElement"in _control)))return!1;const active=this.activeDescendantElement;try{const reflected=_control;reflected.ariaActiveDescendantElement=active;const accepted=reflected.ariaActiveDescendantElement===active;return accepted||(reflected.ariaActiveDescendantElement=null,_control.removeAttribute("aria-activedescendant")),accepted}catch{return _control.removeAttribute("aria-activedescendant"),!1}}async focusActiveOption(options={}){const ownsFocus=options.ownsFocus??(this._ownsFocus?this._focusOwnerPredicate:void 0);if(!this.open||!this.isConnected||!this.activeDescendantElement||!this.callFocusOwner(ownsFocus))return!1;const generation=++this._focusTransferGeneration,textareaSession=this.anchor!==void 0&&isTextareaAnchor(this.anchor),textareaSessionGeneration=this._textareaFocusSessionGeneration,snapshot={ownerDocument:this.ownerDocument,anchor:this.anchor,items:this.items,query:this.query,filter:this.filter,activeIndex:this.activeIndex};if(await this.updateComplete,await this.cleanup?.ready===!1||generation!==this._focusTransferGeneration||textareaSession&&textareaSessionGeneration!==this._textareaFocusSessionGeneration||!this.isConnected||!this.open||this.ownerDocument!==snapshot.ownerDocument||this.anchor!==snapshot.anchor||this.items!==snapshot.items||this.query!==snapshot.query||this.filter!==snapshot.filter||this.activeIndex!==snapshot.activeIndex||!this.callFocusOwner(ownsFocus))return!1;const active=this.activeDescendantElement;return!active?.isConnected||!this.callFocusOwner(ownsFocus)||(this.captureAnchorCaret(),active.focus({preventScroll:!0}),activeElementIn(this.shadowRoot)!==active)?!1:(this._focusOwnerPredicate=ownsFocus,this._ownsFocus=!0,!0)}async restoreFocus(waitForPlacement=!1){if(waitForPlacement){if(await this.cleanup?.ready===!1||!this._ownsFocus||!this.open)return;if(this.hasTextareaFocusSession()&&!this.fallbackFocusIsStillOwned()){this._ownsFocus=!1,this._focusOwnerPredicate=void 0;return}}const active=this.renderRoot.querySelector('[part="option"][data-active]');active?active.focus({preventScroll:!0}):this.anchor?.isConnected?(this.renderRoot.querySelector('[part="listbox"]')?.setAttribute("tabindex","-1"),this.restoreAnchorFocus(),this.scheduleAfterUpdate(()=>{this._ownsFocus=!1,this._focusOwnerPredicate=void 0})):this.renderRoot.querySelector('[part="listbox"]')?.focus({preventScroll:!0})}callFocusOwner(predicate){try{return predicate?.()??!0}catch{return!1}}fallbackFocusIsStillOwned(){return this.callFocusOwner(this._focusOwnerPredicate)&&activeElementIn(this.shadowRoot)!==null}get listboxId(){return this._listId}handleKeyDown(e){if(!this.open||e.isComposing||e.keyCode===229)return!1;const rows=this.filteredItems;switch(e.key){case"ArrowDown":return rows.length?(e.preventDefault(),this.activeIndex=this.stepEnabledIndex(rows,this.clampedIndex(rows),1),!0):!1;case"ArrowUp":return rows.length?(e.preventDefault(),this.activeIndex=this.stepEnabledIndex(rows,this.clampedIndex(rows),-1),!0):!1;case"Enter":case"Tab":{const idx=this.clampedIndex(rows);return idx<0?!1:(e.preventDefault(),this.commit(rows[idx]),!0)}case"Escape":return e.preventDefault(),this.open=!1,!0;default:return!1}}clampedIndex(rows){const count=rows.length;if(!count)return-1;const clamped=Math.min(Math.max(this.activeIndex,0),count-1);if(!rows[clamped]?.disabled)return clamped;for(let forward=clamped+1;forward<count;forward+=1)if(!rows[forward]?.disabled)return forward;for(let backward=clamped-1;backward>=0;backward-=1)if(!rows[backward]?.disabled)return backward;return-1}stepEnabledIndex(rows,from,direction){const count=rows.length;if(!count)return 0;let index=Math.min(Math.max(from+direction,0),count-1);for(let steps=0;steps<count;steps+=1){if(!rows[index]?.disabled)return index;if(index+=direction,index<0||index>=count)break}return from>=0&&from<count&&!rows[from]?.disabled?from:this.activeIndex}rowId(index){return`${this._listId}-opt-${index}`}commit(item){if(item.disabled)return;const index=this.items.indexOf(item);if(index<0)return;const relationshipControl=this.anchorRelationship?.control;relationshipControl&&isTextareaAnchor(relationshipControl)&&this.detachAnchorRelationship(),this.emit("lr-mention-select",Object.freeze({suggestionId:item.suggestionId,index,label:item.label})),this._silentClose=!0,this.open=!1}reposition(){this.cleanup?.(),this.cleanup=void 0;const anchorEl=this.resolveAnchorElement(),popup=this.renderRoot.querySelector('[part="listbox"]');if(anchorEl&&popup){const placement=place(anchorEl,popup,{placement:"bottom-start",strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});this.cleanup=placement,placement.ready.then(positioned=>{positioned||this.cleanup!==placement||!this.open||(this._silentClose=!0,this.open=!1)})}}async settleListboxHidden(){const token=++this.listboxHideToken;if(await this.updateComplete,token!==this.listboxHideToken||this.open)return;const listbox=this.renderRoot.querySelector('[part="listbox"]'),view=this.ownerDocument.defaultView;if(listbox&&view&&!prefersReducedMotion(this)){const computed=view.getComputedStyle(listbox),durationMs=maxCssTime(computed.transitionDuration)+maxCssTime(computed.transitionDelay);if(durationMs>0&&(await new Promise(resolve=>{let settled=!1,timeout;const finish=()=>{settled||(settled=!0,timeout!==void 0&&view.clearTimeout(timeout),listbox.removeEventListener("transitionend",onEnd),listbox.removeEventListener("transitioncancel",onEnd),resolve())},onEnd=event=>{event.target===listbox&&finish()};listbox.addEventListener("transitionend",onEnd),listbox.addEventListener("transitioncancel",onEnd),timeout=view.setTimeout(finish,durationMs+50)}),token!==this.listboxHideToken||this.open))return}this.listboxHidden=!0}resolveAnchorElement(){const anchor=this.anchor;if(!anchor)return null;if(isTextControl(anchor)){const rect=caretClientRect(anchor);if(rect){const owner=anchor.ownerDocument;this.virtualAnchor&&this.virtualAnchor.ownerDocument!==owner&&(this.virtualAnchor.remove(),this.virtualAnchor=null);const virtual=this.virtualAnchor??(this.virtualAnchor=owner.createElement("div"));return virtual.style.position="fixed",virtual.style.left=`${rect.left}px`,virtual.style.top=`${rect.top}px`,virtual.style.width="0",virtual.style.height=`${rect.height}px`,virtual.style.pointerEvents="none",virtual.isConnected||owner.body.appendChild(virtual),virtual}}return anchor}get effectiveEmptyText(){return this.emptyText===void 0?this.localize("noMatches"):this.emptyText}get effectiveLabel(){return hostAriaLabel(this)??(this.label===void 0?this.localize("mentionSuggestions"):this.label)}renderRow(item,index,activeId){const id=this.rowId(index),active=id===activeId;return html`
       <div
         part="option"
         id=${id}
@@ -28,6 +28,7 @@ import{__decorate}from"tslib";import{maxCssTime}from"../../../internal/css-motio
         @click=${this.onListboxClick}
         @keydown=${this.onListboxKeyDown}
       >
+        <span class="glass-scroll-layer" aria-hidden="true"></span>
         ${rows.length===0?html`<div part="empty" role="option" aria-selected="false" aria-disabled="true">${this.effectiveEmptyText}</div>`:rows.map((item,i)=>this.renderRow(item,i,activeId))}
       </div>
     `}}__decorate([property({attribute:!1})],LyraMentionPopover.prototype,"anchor",void 0),__decorate([property()],LyraMentionPopover.prototype,"query",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraMentionPopover.prototype,"open",void 0),__decorate([property({attribute:!1})],LyraMentionPopover.prototype,"filter",void 0),__decorate([property({attribute:"empty-text"})],LyraMentionPopover.prototype,"emptyText",void 0),__decorate([property()],LyraMentionPopover.prototype,"label",void 0),__decorate([state()],LyraMentionPopover.prototype,"activeIndex",void 0),__decorate([state()],LyraMentionPopover.prototype,"listboxHidden",void 0),__decorate([state()],LyraMentionPopover.prototype,"_ownsFocus",void 0);export{LyraMentionPopover};

package/dist/components/utility/mention-popover/mention-popover.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{overlaySurface,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: contents; } [part='listbox'][hidden] { display: none; } [part='listbox'] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: min(var(--lr-size-16rem), var(--lr-positioner-available-block-size, var(--lr-size-16rem))); overflow-y: auto; overflow-x: clip; inline-size: max-content; min-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-14rem), var(--lr-positioner-available-inline-size, 100vw)); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-24rem), var(--lr-positioner-available-inline-size, 100vw)); padding: var(--lr-space-xs); ${overlaySurface} ${overlaySurfaceControlEdge} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility 0s linear var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s, 0s, 0s; } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-xs) var(--lr-space-s); border-radius: var(--lr-radius); cursor: pointer; } [part='option']:where(:not([aria-disabled='true'])):hover, [part='option'][data-active] { background: var(--lr-mention-popover-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:where(:not([aria-disabled='true'])):active { background: color-mix( in oklab, var(--lr-mention-popover-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-selected='true'] { color: var(--lr-mention-popover-option-active-color, var(--lr-color-brand)); } [part='option'][aria-disabled='true'] { cursor: default; opacity: var(--lr-mention-popover-option-disabled-opacity, 0.5); } [part='option-icon'] { flex: 0 0 auto; line-height: var(--lr-line-height-1-4); } [part='option-label'] { display: flex; flex-direction: column; min-inline-size: 0; line-height: var(--lr-line-height-1-4); } [part='option-label'] span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-description'] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option']:where(:not([aria-disabled='true'])):hover [part='option-description'], [part='option'][data-active] [part='option-description'] { color: var(--lr-color-text); } [part='empty'] { padding: var(--lr-space-s) var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{overlaySurface,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: contents; } [part='listbox'][hidden] { display: none; } [part='listbox'] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: min(var(--lr-size-16rem), var(--lr-positioner-available-block-size, var(--lr-size-16rem))); overflow-y: auto; overflow-x: clip; inline-size: max-content; min-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-14rem), var(--lr-positioner-available-inline-size, 100vw)); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-24rem), var(--lr-positioner-available-inline-size, 100vw)); padding: var(--lr-space-xs); ${overlaySurface} ${overlaySurfaceControlEdge} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility 0s linear var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s, 0s, 0s; } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-xs) var(--lr-space-s); border-radius: var(--lr-radius); cursor: pointer; } [part='option']:where(:not([aria-disabled='true'])):hover, [part='option'][data-active] { background: var(--lr-mention-popover-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:where(:not([aria-disabled='true'])):active { background: color-mix( in oklab, var(--lr-mention-popover-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-selected='true'] { color: var(--lr-mention-popover-option-active-color, var(--lr-color-brand)); } [part='option'][aria-disabled='true'] { cursor: default; opacity: var(--lr-mention-popover-option-disabled-opacity, 0.5); } [part='option-icon'] { flex: 0 0 auto; line-height: var(--lr-line-height-1-4); } [part='option-label'] { display: flex; flex-direction: column; min-inline-size: 0; line-height: var(--lr-line-height-1-4); } [part='option-label'] span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-description'] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option']:where(:not([aria-disabled='true'])):hover [part='option-description'], [part='option'][data-active] [part='option-description'] { color: var(--lr-color-text); } [part='empty'] { padding: var(--lr-space-s) var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); overflow-wrap: anywhere; } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="listbox"]',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};

package/dist/components/viewers/document-compare/document-compare.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);--_lr-document-compare-pane-max-height:var(--lr-size-24rem);display:block;container-type:inline-size}[part=base]{gap:var(--lr-space-m);color:var(--lr-color-text);flex-direction:column;display:flex}[part=diff]{display:block}[part=panes]{gap:var(--lr-space-m);align-items:stretch;display:flex}[part=pane-old],[part=pane-new]{gap:var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);min-inline-size:0;padding:var(--lr-space-m);max-block-size:var(--_lr-document-compare-pane-max-height-attr,var(--lr-document-compare-pane-max-height,var(--_lr-document-compare-pane-max-height)));transition:border-color var(--lr-transition-fast);flex-direction:column;flex:1 1 0;display:flex;overflow:hidden auto}[part=pane-old]:focus-visible,[part=pane-new]:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part=pane-old]:hover,[part=pane-new]:hover{border-color:var(--lr-color-border-strong)}[part=pane-header]{font-weight:var(--lr-font-weight-semibold);font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);text-transform:uppercase;letter-spacing:var(--lr-size-0-02em)}[part=pane-empty]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-sm);margin:0}@container (inline-size<=639.98px){[part=panes]{flex-direction:column}[part=pane-old],[part=pane-new]{flex-basis:auto}}`;export{styles};
+import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);--_lr-document-compare-pane-max-height:var(--lr-size-24rem);display:block;container-type:inline-size}[part=base]{gap:var(--lr-space-m);color:var(--lr-color-text);flex-direction:column;display:flex}[part=diff]{display:block}[part=panes]{gap:var(--lr-space-m);align-items:stretch;display:flex}[part=pane-old],[part=pane-new]{gap:var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);min-inline-size:0;padding:var(--lr-space-m);max-block-size:var(--_lr-document-compare-pane-max-height-attr,var(--lr-document-compare-pane-max-height,var(--_lr-document-compare-pane-max-height)));transition:border-color var(--lr-transition-fast);flex-direction:column;flex:1 1 0;display:flex;overflow:hidden auto}[part=pane-old]:focus-visible,[part=pane-new]:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part=pane-old]:hover,[part=pane-new]:hover{border-color:color-mix(in oklab, var(--lr-color-border-strong), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=pane-header]{font-weight:var(--lr-font-weight-semibold);font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);text-transform:uppercase;letter-spacing:var(--lr-size-0-02em)}[part=pane-empty]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-sm);margin:0}@container (inline-size<=639.98px){[part=panes]{flex-direction:column}[part=pane-old],[part=pane-new]{flex-basis:auto}}`;export{styles};

package/dist/components/viewers/document-preview/document-preview.class.js

@@ -15,7 +15,7 @@ import{__decorate}from"tslib";import{html,nothing,svg}from"lit";import{property,
       aria-hidden="true"
       focusable="false"
     >${paths}</svg>
-  `}class LyraDocumentPreview extends LyraElement{constructor(){super(...arguments),this.src="",this.mimeType="",this.filename="",this.status="idle",this.errorText="",this.maxHeight="",this.zoomable=!1,this.suppressDownload=!1,this._highlights=snapshotLyraHighlights([]),this._regionHighlights=EMPTY_REGION_HIGHLIGHTS,this.activeHighlightId=null,this.anchorKinds=["region"],this.hasUnsupportedSlot=!1,this.textFetch=IDLE_TEXT_FETCH,this.generation=0,this.invalidUrlReportedFor=null,this.announcements=new ViewerAnnouncementController(this),this.onUnsupportedSlotChange=()=>{this.hasUnsupportedSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="unsupported")},this.onDownloadClick=()=>{this.emit("lr-download",{src:this.src,filename:this.filename})}}static{this.defaultStrings={...super.defaultStrings,convertingDocument:LYRA_DEFAULT_convertingDocument,documentPreviewAlt:LYRA_DEFAULT_documentPreviewAlt,documentPreviewEmpty:LYRA_DEFAULT_documentPreviewEmpty,documentPreviewFailedToLoad:LYRA_DEFAULT_documentPreviewFailedToLoad,documentPreviewGenericError:LYRA_DEFAULT_documentPreviewGenericError,documentPreviewGenericFile:LYRA_DEFAULT_documentPreviewGenericFile,documentPreviewNotAvailable:LYRA_DEFAULT_documentPreviewNotAvailable,documentPreviewResourceTooLarge:LYRA_DEFAULT_documentPreviewResourceTooLarge,documentPreviewTypeDocument:LYRA_DEFAULT_documentPreviewTypeDocument,documentPreviewTypeImage:LYRA_DEFAULT_documentPreviewTypeImage,documentPreviewUrlNotAllowed:LYRA_DEFAULT_documentPreviewUrlNotAllowed,download:LYRA_DEFAULT_download,highlightOfTotal:LYRA_DEFAULT_highlightOfTotal,highlightWithLabel:LYRA_DEFAULT_highlightWithLabel,loadingDocument:LYRA_DEFAULT_loadingDocument}}static{this.styles=[LyraElement.styles,styles,srOnly]}get highlights(){return this._highlights}set highlights(value){const previous=this._highlights;this._highlights=snapshotLyraHighlights(value),this._regionHighlights=this.projectRegionHighlights(this._highlights),this.requestUpdate("highlights",previous)}connectedCallback(){super.connectedCallback(),this.announcements.connect(),this.hasUpdated&&this.src&&classifyFormat(this.mimeType)==="text"&&(this.textFetch=IDLE_TEXT_FETCH,this.scheduleAfterUpdate(()=>{const url=safeFetchUrl(this.src);url&&this.status!=="converting"&&this.status!=="error"&&this.fetchText(url)}))}disconnectedCallback(){this.generation++,this.beginAbortableLoad(),this.textFetch=IDLE_TEXT_FETCH,this.announcements.disconnect(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.announcements.adopted()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasUnsupportedSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="unsupported"))}updated(changed){super.updated(changed),this.syncAnnouncementState();const safeTextSrc=safeFetchUrl(this.src);classifyFormat(this.mimeType)==="text"&&safeTextSrc!==null&&this.status!=="converting"&&this.status!=="error"?(changed.has("src")||changed.has("mimeType")||changed.has("status")&&this.textFetch.kind==="idle")&&this.scheduleAfterUpdate(()=>{this.fetchText(safeTextSrc)}):this.textFetch.kind!=="idle"&&(this.generation++,this.beginAbortableLoad(),this.textFetch=IDLE_TEXT_FETCH)}syncAnnouncementState(){if(this.status==="converting"){if(this.progress!=null&&Number.isFinite(this.progress)){this.announcements.transition("preview","progress");return}this.announcements.transition("preview","loading",this.localize("convertingDocument"));return}if(this.status==="error"){this.announcements.transition("preview","error",this.errorText||this.localize("documentPreviewGenericError"));return}if(classifyFormat(this.mimeType)!=="text"||this.src===""){this.announcements.transition("preview","idle");return}if(safeFetchUrl(this.src)===null){this.announcements.transition("preview","error",this.localize("documentPreviewUrlNotAllowed"));return}if(this.textFetch.kind==="error"){this.announcements.transition("preview","error",this.textFetch.message);return}if(this.textFetch.kind==="loaded"){this.announcements.transition("preview","loaded");return}this.announcements.transition("preview","loading",this.localize("loadingDocument"))}async fetchText(url){const generation=++this.generation,signal=this.beginAbortableLoad(),fetchTarget=resolveOwnerFetchTarget(this,url);if(!fetchTarget){const error=new LyraUserFacingError(this.localize("documentPreviewUrlNotAllowed"));this.textFetch={kind:"error",message:error.message},this.emit("lr-render-error",{error});return}this.textFetch={kind:"loading"};try{const response=await fetchTarget.view.fetch(fetchTarget.url,signal?{signal}:void 0);if(!this.isConnected||generation!==this.generation)return;if(!response.ok)throw new Error(`${response.status} ${response.statusText}`);const text=await readResponseText(response);if(!this.isConnected||generation!==this.generation)return;this.textFetch={kind:"loaded",text}}catch(error){if(isAbortError(error)||!this.isConnected||generation!==this.generation)return;const message=this.localize(isResourceLimitError(error)?"documentPreviewResourceTooLarge":"documentPreviewFailedToLoad");this.textFetch={kind:"error",message},this.emit("lr-render-error",{error})}}renderSpinner(label,progressValue){if(progressValue!=null&&Number.isFinite(progressValue)){const clamped=finiteRange(progressValue,0,0,100),rounded=Math.round(clamped),formatted=getNumberFormat(this.effectiveLocale,{style:"percent",maximumFractionDigits:0}).format(clamped/100);return html`
+  `}class LyraDocumentPreview extends LyraElement{constructor(){super(...arguments),this.src="",this.mimeType="",this.filename="",this.status="idle",this.errorText="",this.maxHeight="",this.zoomable=!1,this.suppressDownload=!1,this._highlights=snapshotLyraHighlights([]),this._regionHighlights=EMPTY_REGION_HIGHLIGHTS,this.activeHighlightId=null,this.anchorKinds=["region"],this.hasUnsupportedSlot=!1,this.textFetch=IDLE_TEXT_FETCH,this.generation=0,this.invalidUrlReportedFor=null,this.announcements=new ViewerAnnouncementController(this),this.onUnsupportedSlotChange=()=>{this.hasUnsupportedSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="unsupported")},this.onDownloadClick=()=>{this.emit("lr-download",{src:this.src,filename:this.filename})}}static{this.defaultStrings={...super.defaultStrings,convertingDocument:LYRA_DEFAULT_convertingDocument,documentPreviewAlt:LYRA_DEFAULT_documentPreviewAlt,documentPreviewEmpty:LYRA_DEFAULT_documentPreviewEmpty,documentPreviewFailedToLoad:LYRA_DEFAULT_documentPreviewFailedToLoad,documentPreviewGenericError:LYRA_DEFAULT_documentPreviewGenericError,documentPreviewGenericFile:LYRA_DEFAULT_documentPreviewGenericFile,documentPreviewNotAvailable:LYRA_DEFAULT_documentPreviewNotAvailable,documentPreviewResourceTooLarge:LYRA_DEFAULT_documentPreviewResourceTooLarge,documentPreviewTypeDocument:LYRA_DEFAULT_documentPreviewTypeDocument,documentPreviewTypeImage:LYRA_DEFAULT_documentPreviewTypeImage,documentPreviewUrlNotAllowed:LYRA_DEFAULT_documentPreviewUrlNotAllowed,download:LYRA_DEFAULT_download,highlightOfTotal:LYRA_DEFAULT_highlightOfTotal,highlightWithLabel:LYRA_DEFAULT_highlightWithLabel,loadingDocument:LYRA_DEFAULT_loadingDocument}}static{this.styles=[LyraElement.styles,styles,srOnly]}get highlights(){return this._highlights}set highlights(value){const previous=this._highlights;this._highlights=snapshotLyraHighlights(value),this._regionHighlights=this.projectRegionHighlights(this._highlights),this.requestUpdate("highlights",previous)}connectedCallback(){super.connectedCallback(),this.announcements.connect(),this.hasUpdated&&this.src&&classifyFormat(this.mimeType)==="text"&&(this.textFetch=IDLE_TEXT_FETCH,this.scheduleAfterUpdate(()=>{const url=safeFetchUrl(this.src);url&&this.status!=="converting"&&this.status!=="error"&&this.fetchText(url)}))}disconnectedCallback(){this.generation++,this.beginAbortableLoad(),this.textFetch=IDLE_TEXT_FETCH,this.announcements.disconnect(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.announcements.adopted()}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasUnsupportedSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="unsupported")),this.textFetch.kind!=="idle"&&(classifyFormat(this.mimeType)!=="text"||safeFetchUrl(this.src)===null||this.status==="converting"||this.status==="error")&&(this.generation++,this.beginAbortableLoad(),this.textFetch=IDLE_TEXT_FETCH)}updated(changed){super.updated(changed),this.syncAnnouncementState();const safeTextSrc=safeFetchUrl(this.src);classifyFormat(this.mimeType)==="text"&&safeTextSrc!==null&&this.status!=="converting"&&this.status!=="error"&&(changed.has("src")||changed.has("mimeType")||changed.has("status")&&this.textFetch.kind==="idle")&&this.scheduleAfterUpdate(()=>{this.fetchText(safeTextSrc)})}syncAnnouncementState(){if(this.status==="converting"){if(this.progress!=null&&Number.isFinite(this.progress)){this.announcements.transition("preview","progress");return}this.announcements.transition("preview","loading",this.localize("convertingDocument"));return}if(this.status==="error"){this.announcements.transition("preview","error",this.errorText||this.localize("documentPreviewGenericError"));return}if(classifyFormat(this.mimeType)!=="text"||this.src===""){this.announcements.transition("preview","idle");return}if(safeFetchUrl(this.src)===null){this.announcements.transition("preview","error",this.localize("documentPreviewUrlNotAllowed"));return}if(this.textFetch.kind==="error"){this.announcements.transition("preview","error",this.textFetch.message);return}if(this.textFetch.kind==="loaded"){this.announcements.transition("preview","loaded");return}this.announcements.transition("preview","loading",this.localize("loadingDocument"))}async fetchText(url){const generation=++this.generation,signal=this.beginAbortableLoad(),fetchTarget=resolveOwnerFetchTarget(this,url);if(!fetchTarget){const error=new LyraUserFacingError(this.localize("documentPreviewUrlNotAllowed"));this.textFetch={kind:"error",message:error.message},this.emit("lr-render-error",{error});return}this.textFetch={kind:"loading"};try{const response=await fetchTarget.view.fetch(fetchTarget.url,signal?{signal}:void 0);if(!this.isConnected||generation!==this.generation)return;if(!response.ok)throw new Error(`${response.status} ${response.statusText}`);const text=await readResponseText(response);if(!this.isConnected||generation!==this.generation)return;this.textFetch={kind:"loaded",text}}catch(error){if(isAbortError(error)||!this.isConnected||generation!==this.generation)return;const message=this.localize(isResourceLimitError(error)?"documentPreviewResourceTooLarge":"documentPreviewFailedToLoad");this.textFetch={kind:"error",message},this.emit("lr-render-error",{error})}}renderSpinner(label,progressValue){if(progressValue!=null&&Number.isFinite(progressValue)){const clamped=finiteRange(progressValue,0,0,100),rounded=Math.round(clamped),formatted=getNumberFormat(this.effectiveLocale,{style:"percent",maximumFractionDigits:0}).format(clamped/100);return html`
         <div
           part="spinner"
           role="progressbar"