@aceshooting/lyra-ui 9.1.0 → 10.0.1

package/dist/components/overlays/overlay/tooltip.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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisibilityHidden,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{place,virtualAnchorFromRect}from"../../../internal/positioner.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{omittedEmptyStringConverter,trueDefaultBooleanConverter}from"../../../internal/converters.js";import{activateOverlay,composedContains}from"../../../internal/overlay-manager.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,observeOverlayAnchorIdentity,OverlayTransitionGate,resolveOverlayAnchor}from"./overlay-shared.js";import{tooltipStyles}from"./overlay.styles.js";import{LYRA_DEFAULT_popover}from"../../../internal/default-strings.generated.js";const DEFAULT_SHOW_DELAY=150,DEFAULT_HIDE_DELAY=0,DEFAULT_DISTANCE=8,MAX_SHADOW_CONTENT_SCAN_FRAMES=4;class LyraTooltip extends LyraElement{constructor(){super(...arguments),this._open=!1,this.trigger="hover focus",this.manual=!1,this.showDelay=150,this.hideDelay=0,this.placement="top",this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.disabled=!1,this.hoist=!1,this.arrow=!0,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this.content="",this.accessibleLabel="",this.namedTriggerMode=!0,this.interactiveContent=!1,this.resolvedSide="top",this.anchorPositioned=!1,this.observedDirectAnchorWasConnected=!1,this.restoreFocusOnClose=!1,this.suppressTriggerFocusOpen=!1,this.tooltipId=nextId("tooltip"),this.descriptionId=nextId("tooltip-description"),this.contentSlotListeners=new Set,this.shadowContentScanAttempts=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.onTriggerSlotChange=event=>{this.syncNamedTriggerMode();const slot=event.target;this.slottedTriggerElement=slot.assignedElements({flatten:!0})[0],this.syncInteractionTrigger()},this.onEnter=event=>{if(!this.disabled){if(this.syncTriggerA11y(),event.type==="focusin"){if(this.suppressTriggerFocusOpen||!this.opensOn("focus"))return}else if(!this.opensOn("hover"))return;this.requestTransition(!0)}},this.onLeave=event=>{if(event.type==="focusout"?!this.opensOn("focus"):!this.opensOn("hover"))return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&this.triggerElement&&composedContains(this.triggerElement,next)||this.interactiveContent&&this.isPopupTarget(next)||this.requestTransition(!1)},this.onTriggerClick=()=>{this.disabled||this.opensOn("click")&&(this.syncTriggerA11y(),this._open?this.hide():this.show())},this.onPopupEnter=()=>{!this.interactiveContent||this.isManual||(this.cancelPendingTransition(),this.show())},this.onPopupLeave=event=>{if(!this.interactiveContent||this.isManual)return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&(this.triggerElement&&composedContains(this.triggerElement,next)||this.isPopupTarget(next))||this.requestTransition(!1)},this.onContentSlotChange=event=>{event.target?.localName==="slot"&&this.updateInteractiveContent()},this.onTriggerKeyDown=event=>{this.isManual||!this.open||event.key!=="Escape"||!this.overlayHandle?.isTopmost()||(event.preventDefault(),this.hide())}}static{this.defaultStrings={...super.defaultStrings,popover:LYRA_DEFAULT_popover}}static{this.styles=[LyraElement.styles,tooltipStyles]}get open(){return this._open}set open(next){const normalized=!!next;if(normalized||this.cancelPendingTransition(),normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.hide()}}get for(){return this._for}set for(next){this._for=next??""}get rendersArrow(){return this.arrow&&!this.withoutArrow}get activeContentSlot(){const selector=this.namedTriggerMode?'[part~="body"] slot:not([name])':'[part~="body"] slot[name="content"]';return(this.renderRoot??this.shadowRoot)?.querySelector(selector)??null}syncNamedTriggerMode(schedule=!0){const children=Array.from(this.children),hasNamedTrigger=children.some(child=>child.getAttribute("slot")==="trigger"),hasShoelaceContent=this.content.length>0||children.some(child=>child.getAttribute("slot")==="content"),next=hasNamedTrigger||!hasShoelaceContent;if(next===this.namedTriggerMode)return;const old=this.namedTriggerMode;this.namedTriggerMode=next,schedule&&this.hasUpdated&&this.requestUpdate("namedTriggerMode",old)}get triggerKeywords(){return new Set(String(this.trigger??"").trim().split(/\s+/).filter(Boolean))}get isManual(){const keywords=this.triggerKeywords;return this.manual||keywords.size===0||keywords.has("manual")}opensOn(keyword){return!this.isManual&&this.triggerKeywords.has(keyword)}willUpdate(changed){super.willUpdate(changed),this.syncNamedTriggerMode(!1),(changed.has("manual")||changed.has("trigger"))&&this.isManual&&this.cancelPendingTransition(),changed.has("disabled")&&this.disabled&&(this.cancelPendingTransition(),this._open&&(this.hasUpdated?this.hide():this.applyOpenState(!1))),changed.has("anchor")&&changed.get("anchor")===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.anchor?.isConnected!==!0&&this.open&&!this.resolveAnchor()&&this.forceClose(),changed.has("showDelay")&&this.pendingDirection==="show"&&this.requestTransition(!0),changed.has("hideDelay")&&this.pendingDirection==="hide"&&this.requestTransition(!1),changed.has("for")&&this.syncInteractionTrigger()}updated(changed){if(super.updated(changed),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),changed.has("open")||changed.has("placement")||changed.has("distance")||changed.has("skidding")||changed.has("for")||changed.has("anchor")||changed.has("hoist")||changed.has("arrow")||changed.has("withoutArrow")||changed.has("arrowPlacement")||changed.has("arrowPadding")||changed.has("interactiveContent")){if(this.cleanup?.(),this.cleanup=void 0,this.open&&this.isConnected&&this.position(),changed.has("open"))if(this.open)this.updateInteractiveContent(),this.isConnected&&this.requiresOverlayManager&&this.activateTooltipOverlay();else{this.positionedAnchor=void 0,this.anchorPositioned=!1;const restoreFocus=this.restoreFocusOnClose;this.suppressTriggerFocusOpen=restoreFocus;try{this.overlayHandle?.deactivate({restoreFocus})}finally{this.suppressTriggerFocusOpen=!1}this.overlayHandle=void 0,this.restoreFocusOnClose=!1,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.syncInteractionTrigger()}else changed.has("interactiveContent")&&this.open&&this.isConnected&&(this.requiresOverlayManager?this.activateTooltipOverlay():(this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0));this.syncTriggerA11y()}(changed.has("content")||changed.has("accessibleLabel"))&&this.updateDescriptionProxy()}connectedCallback(){super.connectedCallback(),this.syncAnchorIdentityObservation(),this.ensureDescriptionProxy(),this.contentObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.contentObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.syncNamedTriggerMode(),this.updateInteractiveContent()}):void 0,this.updateInteractiveContent(),this.syncInteractionTrigger(),this.hasUpdated&&this.open&&(this.position(),this.requiresOverlayManager&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateTooltipOverlay()))}disconnectedCallback(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.cancelPendingTransition(),this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.suspend(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.releaseTriggerA11y(),this.triggerElement=void 0,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.cancelShadowContentScan(),this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.cancelPendingTransition(),this.cancelShadowContentScan(),this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0;const directAnchor=this.open?this.anchor??void 0:void 0;if(this.observedDirectAnchor=directAnchor,this.observedDirectAnchorWasConnected=directAnchor?.isConnected===!0,!this.isConnected||!this.for&&!directAnchor)return;const onIdentityChange=()=>{const directAnchorRemoved=this.anchor===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.observedDirectAnchor?.isConnected===!1;if(this.observedDirectAnchorWasConnected=this.observedDirectAnchor?.isConnected===!0,this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose();return}nextAnchor!==this.positionedAnchor&&this.position()},observedRoots=new Set([this]);directAnchor&&directAnchor.getRootNode()!==this.getRootNode()&&observedRoots.add(directAnchor.isConnected?directAnchor:directAnchor.ownerDocument);const cleanups=[...observedRoots].map(root=>observeOverlayAnchorIdentity(root,onIdentityChange));this.stopAnchorIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}resolveForTrigger(){if(!this.for)return;const target=this.getRootNode().getElementById?.(this.for)??null,HTMLElementCtor=target?.ownerDocument.defaultView?.HTMLElement;return target&&HTMLElementCtor&&target instanceof HTMLElementCtor?target:void 0}syncInteractionTrigger(){const next=this.virtualAnchor?void 0:this.slottedTriggerElement??this.resolveForTrigger();this.adoptTrigger(next)}activateTooltipOverlay(){if(!this.isConnected)return;const restoreFocusTarget=this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger;if(this.overlayHandle?.isActive()){this.overlayHandle.updateRestoreFocusTo(restoreFocusTarget);return}this.overlayHandle=activateOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>this.hide({restoreFocus:this.shouldRestoreFocusAfterEscape()}),restoreFocusTo:restoreFocusTarget,modal:!1,trapFocus:!1}),this.overlayHandle.focusAutofocus()}shouldRestoreFocusAfterEscape(){if(this.virtualAnchor)return this.returnFocusTo!==void 0;const active=this.ownerDocument.activeElement;return active!==null&&composedContains(this,active)}get requiresOverlayManager(){return this.open}showAt(rect,options){const normalizedRect=normalizeVirtualRect(rect);if(!normalizedRect)return;const previousAnchor=this.virtualAnchor,previousReturnFocusTo=this.returnFocusTo;if(this.virtualAnchor=virtualAnchorFromRect(normalizedRect),this.returnFocusTo=options?.returnFocusTo,this.syncInteractionTrigger(),this.open){this.activateTooltipOverlay(),this.position();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.syncInteractionTrigger())}show(){return this.cancelPendingTransition(),this.disabled||this._open?Promise.resolve():this.transitionGate.request(!0,()=>{if(this.emit("lr-show",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show")})}hide(options){return this.cancelPendingTransition(),this._open?this.transitionGate.request(!1,()=>{if(this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return options?.restoreFocus&&(this.restoreFocusOnClose=!0),this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")}):Promise.resolve()}forceClose(){return this.cancelPendingTransition(),this._open?(this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")):Promise.resolve()}applyOpenState(next){const old=this._open;this._open=next,next||this.cancelShadowContentScan(),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}cancelTransitionAnimation(){this.transitionAnimation?.cancel(),this.transitionAnimation=void 0}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const popup=this.renderRoot.querySelector('[part~="popup"]'),showing=event==="lr-after-show",animation=popup?animateRegistered(this,popup,`tooltip.${showing?"show":"hide"}`,this.effectiveDirection,{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:["--lr-transition-fast","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}):void 0;if(this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken!==token)return;this.cancelTransitionAnimation()}event==="lr-after-hide"&&this.removeAttribute("data-closing"),this.emit(event)}}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.triggerElement})}position(){this.cleanup?.(),this.cleanup=void 0;const popup=this.renderRoot.querySelector('[part~="popup"]'),arrowElement=this.renderRoot.querySelector('[part~="arrow"]'),anchor=this.resolveAnchor();if(!this.open||!anchor||!popup){this.positionedAnchor=void 0,this.anchorPositioned=!1,popup?.setAttribute("data-hidden","");return}if(anchor!==this.positionedAnchor&&(this.anchorPositioned=!1,popup.setAttribute("data-hidden","")),this.open&&anchor&&popup){const arrowPadding=Math.max(0,finiteNumber(this.arrowPadding,0));this.cleanup=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute",offset:finiteNumber(this.distance,DEFAULT_DISTANCE),skidding:finiteNumber(this.skidding,0),arrow:this.rendersArrow&&arrowElement?arrowElement:void 0,arrowPadding,onPlaced:({placement,arrow})=>{this.positionedAnchor=anchor,this.anchorPositioned=!0,this.open&&this.resolveAnchor()===anchor&&popup.removeAttribute("data-hidden");const side=applyOverlayArrow(arrowElement,{placement,coords:arrow,enabled:this.rendersArrow,arrowPlacement:this.arrowPlacement,arrowPadding,rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-tooltip-arrow-size"});side!==this.resolvedSide&&(this.resolvedSide=side)}})}}syncTriggerA11y(){const trigger=this.triggerElement??null,proxy=this.open?this.descriptionProxy:void 0,contribution={descriptions:proxy?[proxy]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution);const accessibleTrigger=this.accessibleTrigger,distinctAccessibleTrigger=accessibleTrigger!==trigger?accessibleTrigger:null;this.accessibleTriggerAria?this.accessibleTriggerAria.update(distinctAccessibleTrigger,contribution):this.accessibleTriggerAria=acquireAriaOwnership(distinctAccessibleTrigger,contribution),this.overlayHandle?.isActive()&&!this.virtualAnchor&&this.overlayHandle.updateRestoreFocusTo(accessibleTrigger)}get accessibleTrigger(){return this.triggerElement?resolveAccessibleTrigger(this.triggerElement):null}releaseTriggerA11y(){this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0,this.triggerAria?.release(),this.triggerAria=void 0}requestTransition(next){if(this.cancelPendingTransition(),this.disabled)return;const delay=this.interactionDelay(next);if(delay<=0){next?this.show():this.hide();return}this.pendingDirection=next?"show":"hide";const view=this.ownerDocument.defaultView;if(!view){this.pendingDirection=void 0;return}this.timerView=view;const timer=view.setTimeout(()=>{this.timerView!==view||this.timer!==timer||(this.timer=void 0,this.timerView=void 0,this.pendingDirection=void 0,next?this.show():this.hide())},delay);this.timer=timer}interactionDelay(showing){const value=showing?this.showDelay:this.hideDelay,fallback=showing?DEFAULT_SHOW_DELAY:DEFAULT_HIDE_DELAY,attribute=showing?"show-delay":"hide-delay";if(this.hasAttribute(attribute)||value!==fallback)return finiteDuration(value,fallback);const property2=showing?"--show-delay":"--hide-delay",match=(this.ownerDocument.defaultView?.getComputedStyle(this).getPropertyValue(property2).trim()??"").match(/^(-?(?:\d+\.?\d*|\.\d+))(ms|s)$/i);if(!match)return fallback;const amount=Number(match[1]),milliseconds=match[2]?.toLowerCase()==="s"?amount*1e3:amount;return finiteDuration(milliseconds,fallback)}cancelPendingTransition(){this.timer!==void 0&&this.timerView?.clearTimeout(this.timer),this.timer=void 0,this.timerView=void 0,this.pendingDirection=void 0}bindTrigger(trigger){trigger.addEventListener("mouseenter",this.onEnter),trigger.addEventListener("mouseleave",this.onLeave),trigger.addEventListener("focusin",this.onEnter),trigger.addEventListener("focusout",this.onLeave),trigger.addEventListener("click",this.onTriggerClick),trigger.addEventListener("keydown",this.onTriggerKeyDown)}unbindTrigger(trigger){trigger.removeEventListener("mouseenter",this.onEnter),trigger.removeEventListener("mouseleave",this.onLeave),trigger.removeEventListener("focusin",this.onEnter),trigger.removeEventListener("focusout",this.onLeave),trigger.removeEventListener("click",this.onTriggerClick),trigger.removeEventListener("keydown",this.onTriggerKeyDown)}adoptTrigger(next){if(next===this.triggerElement){this.syncTriggerA11y();return}const hadTrigger=this.triggerElement!==void 0;if(this.cancelPendingTransition(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.triggerElement=next,!this.triggerElement){this.syncTriggerA11y(),hadTrigger&&this.open&&!this.resolveAnchor()&&this.forceClose();return}this.bindTrigger(this.triggerElement),this.syncTriggerA11y(),this.open&&this.position(),this.open&&this.interactiveContent&&this.activateTooltipOverlay()}isPopupTarget(target){if(target===null||target.nodeType!==1)return!1;const element=target,slot=this.activeContentSlot;return this.renderRoot.querySelector('[part~="popup"]')?.contains(element)===!0||slot?.assignedElements({flatten:!0}).some(root=>composedContains(root,element))===!0}clearContentSlotListeners(){for(const slot of this.contentSlotListeners)slot.removeEventListener("slotchange",this.onContentSlotChange);this.contentSlotListeners.clear()}syncContentSlotListeners(slots){const activeSlot=this.activeContentSlot;for(const slot of this.contentSlotListeners)slots.has(slot)&&slot!==activeSlot||(slot.removeEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.delete(slot));for(const slot of slots)slot===activeSlot||this.contentSlotListeners.has(slot)||(slot.addEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.add(slot))}inspectContent(){const snapshot={actionable:!1,assigned:!1,awaitingShadowRoot:!1,labelReferenceRoots:new Set,text:"",externalRoots:new Set,shadowRoots:new Set,forwardingSlots:new Set,composedAncestors:new Set},activeSlot=this.activeContentSlot;if(!activeSlot)return snapshot;snapshot.assigned=activeSlot.assignedNodes().length>0;const popup=this.renderRoot.querySelector('[part~="popup"]'),bypassClosedVisibility=popup?.hasAttribute("data-hidden")===!0,previousVisibility=popup?.style.getPropertyValue("visibility")??"",previousVisibilityPriority=popup?.style.getPropertyPriority("visibility")??"";if(popup&&bypassClosedVisibility){const hostVisibility=this.ownerDocument.defaultView?.getComputedStyle(this).visibility??"visible";popup.style.setProperty("visibility",hostVisibility)}try{const visitedContentElements=new Set,accessibilityText=composedAccessibilityTextResult(activeSlot,{shouldPruneNode:node=>{if(node.getRootNode()!==this.renderRoot&&!this.contains(node)&&snapshot.externalRoots.add(node),node.nodeType!==1)return!1;const element=node;return visitedContentElements.add(element),!isAccessibilitySubtreeExcluded(element)&&!isAccessibilityVisibilityHidden(element)&&isActionableElement(element)&&(snapshot.actionable=!0),element.localName==="slot"&&snapshot.forwardingSlots.add(element),element.shadowRoot?snapshot.shadowRoots.add(element.shadowRoot):element.localName.includes("-")&&(snapshot.awaitingShadowRoot=!0),!1},isSubtreeExcluded:element=>(!visitedContentElements.has(element)&&element!==this&&snapshot.composedAncestors.add(element),isAccessibilitySubtreeExcluded(element))});snapshot.text=accessibilityText.text.replace(/\s+/g," ").trim();for(const root of accessibilityText.labelReferenceRoots)snapshot.labelReferenceRoots.add(root);for(const reference of accessibilityText.referencedElements)snapshot.externalRoots.add(reference)}finally{popup&&bypassClosedVisibility&&(previousVisibility?popup.style.setProperty("visibility",previousVisibility,previousVisibilityPriority):popup.style.removeProperty("visibility"))}return snapshot}observeContentNode(node){if(this.contentObserver){if(node.nodeType===3){this.contentObserver.observe(node,{characterData:!0});return}node.nodeType!==1&&node.nodeType!==11||this.contentObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","contenteditable","hidden","href","inert","open","role","slot","style","tabindex"],childList:!0,characterData:!0,subtree:!0})}}bindContentObservation(snapshot){if(this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.isConnected&&snapshot.labelReferenceRoots.size>0){const cleanups=[...snapshot.labelReferenceRoots].map(root=>observeOverlayAnchorIdentity(root,()=>this.updateInteractiveContent()));this.stopLabelReferenceIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}if(this.contentObserver){this.contentObserver.disconnect();for(const ancestor of snapshot.composedAncestors)ancestor===this||ancestor.getRootNode()===this.renderRoot||snapshot.externalRoots.has(ancestor)||this.contentObserver.observe(ancestor,{attributes:!0,attributeFilter:["aria-hidden","class","hidden","inert","style"]});this.observeContentNode(this);for(const root of snapshot.externalRoots)this.observeContentNode(root);for(const root of snapshot.shadowRoots)this.observeContentNode(root)}}updateInteractiveContent(fromShadowContentScan=!1){fromShadowContentScan||(this.shadowContentScanAttempts=0);const snapshot=this.inspectContent();this.interactiveContent=snapshot.actionable,this.syncContentSlotListeners(snapshot.forwardingSlots),this.bindContentObservation(snapshot),this.scheduleShadowContentScan(snapshot.awaitingShadowRoot),this.updateDescriptionProxy(snapshot.text,snapshot.assigned)}scheduleShadowContentScan(awaitingShadowRoot){if(this.cancelShadowContentScan(!1),!awaitingShadowRoot||!this.open||!this.isConnected||this.shadowContentScanAttempts>=MAX_SHADOW_CONTENT_SCAN_FRAMES)return;const view=this.ownerDocument.defaultView;view&&(this.shadowContentScanView=view,this.shadowContentScanFrame=view.requestAnimationFrame(()=>{this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,this.shadowContentScanAttempts++,this.updateInteractiveContent(!0)}))}cancelShadowContentScan(resetAttempts=!0){this.shadowContentScanFrame!==void 0&&this.shadowContentScanView?.cancelAnimationFrame(this.shadowContentScanFrame),this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,resetAttempts&&(this.shadowContentScanAttempts=0)}ensureDescriptionProxy(){this.descriptionProxy||(this.descriptionProxy=this.ownerDocument.createElement("span"),this.descriptionProxy.id=this.descriptionId,this.descriptionProxy.slot="__lr-tooltip-description",this.descriptionProxy.hidden=!0,this.descriptionProxy.dataset.lyraTooltipDescription=""),this.descriptionProxy.parentElement!==this&&this.append(this.descriptionProxy),this.updateDescriptionProxy()}updateDescriptionProxy(contentText,assigned){if(!this.descriptionProxy)return;const hostLabel=this.getAttribute("aria-label"),snapshot=contentText===void 0||assigned===void 0?this.inspectContent():void 0,visibleContent=contentText??snapshot?.text??"",hasAssignment=assigned??snapshot?.assigned??!1,description=hostLabel!==null?hostLabel.trim():(this.accessibleLabel||visibleContent||(hasAssignment?"":this.content)).trim();this.descriptionProxy.textContent!==description&&(this.descriptionProxy.textContent=description)}render(){const hostLabel=this.getAttribute("aria-label"),propertyLabel=this.accessibleLabel??"",hasExplicitLabel=hostLabel!==null||propertyLabel.length>0,label=hostLabel!==null?hostLabel:propertyLabel,popupLabel=this.interactiveContent?hasExplicitLabel?label:this.localize("popover"):hasExplicitLabel?label: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,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{isAccessibilitySubtreeExcluded,isAccessibilityVisibilityHidden,nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{isActionableElement}from"../../../internal/focus-navigation.js";import{place,virtualAnchorFromRect}from"../../../internal/positioner.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteDuration,finiteNumber}from"../../../internal/numbers.js";import{omittedEmptyStringConverter,trueDefaultBooleanConverter}from"../../../internal/converters.js";import{activateOverlay,composedContains}from"../../../internal/overlay-manager.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{applyOverlayArrow}from"./overlay-arrow.js";import{normalizeVirtualRect,observeOverlayAnchorIdentity,OverlayTransitionGate,resolveOverlayAnchor}from"./overlay-shared.js";import{tooltipStyles}from"./overlay.styles.js";import{LYRA_DEFAULT_popover}from"../../../internal/default-strings.generated.js";const DEFAULT_SHOW_DELAY=150,DEFAULT_HIDE_DELAY=0,DEFAULT_DISTANCE=8,MAX_SHADOW_CONTENT_SCAN_FRAMES=4;class LyraTooltip extends LyraElement{constructor(){super(...arguments),this._open=!1,this.trigger="hover focus",this.manual=!1,this.showDelay=150,this.hideDelay=0,this.placement="top",this.distance=8,this.skidding=0,this._for="",this.anchor=null,this.disabled=!1,this.hoist=!1,this.arrow=!0,this.withoutArrow=!1,this.arrowPlacement="anchor",this.arrowPadding=0,this.content="",this.accessibleLabel="",this.namedTriggerMode=!0,this.interactiveContent=!1,this.resolvedSide="top",this.anchorPositioned=!1,this.observedDirectAnchorWasConnected=!1,this.restoreFocusOnClose=!1,this.suppressTriggerFocusOpen=!1,this.openedByPointer=!1,this.tooltipId=nextId("tooltip"),this.descriptionId=nextId("tooltip-description"),this.contentSlotListeners=new Set,this.shadowContentScanAttempts=0,this.transitionToken=0,this.transitionGate=new OverlayTransitionGate,this.onTriggerSlotChange=event=>{this.syncNamedTriggerMode();const slot=event.target;this.slottedTriggerElement=slot.assignedElements({flatten:!0})[0],this.syncInteractionTrigger()},this.onEnter=event=>{if(!this.disabled){if(this.syncTriggerA11y(),event.type==="focusin"){if(this.suppressTriggerFocusOpen||!this.opensOn("focus"))return}else if(!this.opensOn("hover"))return;event.type!=="focusin"&&(this.openedByPointer=!0),this.requestTransition(!0)}},this.onLeave=event=>{if(event.type==="focusout"?!this.opensOn("focus"):!this.opensOn("hover"))return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&this.triggerElement&&composedContains(this.triggerElement,next)||this.interactiveContent&&this.isPopupTarget(next)||this.requestTransition(!1)},this.onTriggerClick=()=>{this.disabled||this.opensOn("click")&&(this.syncTriggerA11y(),this._open?this.hide():this.show())},this.onPopupEnter=()=>{!this.interactiveContent||this.isManual||(this.cancelPendingTransition(),this.show())},this.onPopupLeave=event=>{if(!this.interactiveContent||this.isManual)return;const next=event.relatedTarget;next!==null&&next.nodeType===1&&(this.triggerElement&&composedContains(this.triggerElement,next)||this.isPopupTarget(next))||this.requestTransition(!1)},this.onContentSlotChange=event=>{event.target?.localName==="slot"&&this.updateInteractiveContent()},this.onTriggerKeyDown=event=>{this.isManual||!this.open||event.key!=="Escape"||!this.overlayHandle?.isTopmost()||(event.preventDefault(),this.hide())}}static{this.defaultStrings={...super.defaultStrings,popover:LYRA_DEFAULT_popover}}static{this.styles=[LyraElement.styles,tooltipStyles]}get open(){return this._open}set open(next){const normalized=!!next;if(normalized||this.cancelPendingTransition(),normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.hide()}}get for(){return this._for}set for(next){this._for=next??""}get rendersArrow(){return this.arrow&&!this.withoutArrow}get activeContentSlot(){const selector=this.namedTriggerMode?'[part~="body"] slot:not([name])':'[part~="body"] slot[name="content"]';return(this.renderRoot??this.shadowRoot)?.querySelector(selector)??null}syncNamedTriggerMode(schedule=!0){const children=Array.from(this.children),hasNamedTrigger=children.some(child=>child.getAttribute("slot")==="trigger"),hasShoelaceContent=this.content.length>0||children.some(child=>child.getAttribute("slot")==="content"),next=hasNamedTrigger||!hasShoelaceContent;if(next===this.namedTriggerMode)return;const old=this.namedTriggerMode;this.namedTriggerMode=next,schedule&&this.hasUpdated&&this.requestUpdate("namedTriggerMode",old)}get triggerKeywords(){return new Set(String(this.trigger??"").trim().split(/\s+/).filter(Boolean))}get isManual(){const keywords=this.triggerKeywords;return this.manual||keywords.size===0||keywords.has("manual")}opensOn(keyword){return!this.isManual&&this.triggerKeywords.has(keyword)}willUpdate(changed){super.willUpdate(changed),this.syncNamedTriggerMode(!1),(changed.has("manual")||changed.has("trigger"))&&this.isManual&&this.cancelPendingTransition(),changed.has("disabled")&&this.disabled&&(this.cancelPendingTransition(),this._open&&(this.hasUpdated?this.hide():this.applyOpenState(!1))),changed.has("anchor")&&changed.get("anchor")===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.anchor?.isConnected!==!0&&this.open&&!this.resolveAnchor()&&this.forceClose(),changed.has("showDelay")&&this.pendingDirection==="show"&&this.requestTransition(!0),changed.has("hideDelay")&&this.pendingDirection==="hide"&&this.requestTransition(!1),changed.has("for")&&this.syncInteractionTrigger(),changed.has("open")&&!this.open&&(this.anchorPositioned=!1),(changed.has("anchor")||changed.has("for"))&&(this.anchorPositioned=!1)}updated(changed){if(super.updated(changed),(changed.has("for")||changed.has("anchor")||changed.has("open"))&&this.syncAnchorIdentityObservation(),changed.has("open")||changed.has("placement")||changed.has("distance")||changed.has("skidding")||changed.has("for")||changed.has("anchor")||changed.has("hoist")||changed.has("arrow")||changed.has("withoutArrow")||changed.has("arrowPlacement")||changed.has("arrowPadding")||changed.has("interactiveContent")){if(this.cleanup?.(),this.cleanup=void 0,this.open&&this.isConnected&&this.position(),changed.has("open"))if(this.open)this.updateInteractiveContent(),this.isConnected&&this.requiresOverlayManager&&this.activateTooltipOverlay();else{this.positionedAnchor=void 0;const restoreFocus=this.restoreFocusOnClose;this.suppressTriggerFocusOpen=restoreFocus;try{this.overlayHandle?.deactivate({restoreFocus})}finally{this.suppressTriggerFocusOpen=!1}this.overlayHandle=void 0,this.restoreFocusOnClose=!1,this.virtualAnchor=void 0,this.returnFocusTo=void 0,this.syncInteractionTrigger()}else changed.has("interactiveContent")&&this.open&&this.isConnected&&(this.requiresOverlayManager?this.activateTooltipOverlay():(this.overlayHandle?.deactivate({restoreFocus:!1}),this.overlayHandle=void 0));this.syncTriggerA11y()}(changed.has("content")||changed.has("accessibleLabel"))&&this.updateDescriptionProxy()}connectedCallback(){super.connectedCallback(),this.syncAnchorIdentityObservation(),this.ensureDescriptionProxy(),this.contentObserver?.disconnect();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;this.contentObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.syncNamedTriggerMode(),this.updateInteractiveContent()}):void 0,this.updateInteractiveContent(),this.syncInteractionTrigger(),this.hasUpdated&&this.open&&(this.position(),this.requiresOverlayManager&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateTooltipOverlay()))}disconnectedCallback(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.cancelPendingTransition(),this.cleanup?.(),this.cleanup=void 0,this.overlayHandle?.suspend(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.releaseTriggerA11y(),this.triggerElement=void 0,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.cancelShadowContentScan(),this.transitionToken++,this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.cancelPendingTransition(),this.cancelShadowContentScan(),this.contentObserver?.disconnect(),this.contentObserver=void 0,this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.clearContentSlotListeners(),this.releaseTriggerA11y()}syncAnchorIdentityObservation(){this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0;const directAnchor=this.open?this.anchor??void 0:void 0;if(this.observedDirectAnchor=directAnchor,this.observedDirectAnchorWasConnected=directAnchor?.isConnected===!0,!this.isConnected||!this.for&&!directAnchor)return;const onIdentityChange=()=>{const directAnchorRemoved=this.anchor===this.observedDirectAnchor&&this.observedDirectAnchorWasConnected&&this.observedDirectAnchor?.isConnected===!1;if(this.observedDirectAnchorWasConnected=this.observedDirectAnchor?.isConnected===!0,this.syncInteractionTrigger(),!this.open)return;const nextAnchor=this.resolveAnchor();if(directAnchorRemoved&&!nextAnchor){this.forceClose();return}nextAnchor!==this.positionedAnchor&&this.position()},observedRoots=new Set([this]);directAnchor&&directAnchor.getRootNode()!==this.getRootNode()&&observedRoots.add(directAnchor.isConnected?directAnchor:directAnchor.ownerDocument);const cleanups=[...observedRoots].map(root=>observeOverlayAnchorIdentity(root,onIdentityChange));this.stopAnchorIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}resolveForTrigger(){if(!this.for)return;const target=this.getRootNode().getElementById?.(this.for)??null,HTMLElementCtor=target?.ownerDocument.defaultView?.HTMLElement;return target&&HTMLElementCtor&&target instanceof HTMLElementCtor?target:void 0}syncInteractionTrigger(){const next=this.virtualAnchor?void 0:this.slottedTriggerElement??this.resolveForTrigger();this.adoptTrigger(next)}activateTooltipOverlay(){if(!this.isConnected)return;const restoreFocusTarget=this.virtualAnchor?this.returnFocusTo??null:this.accessibleTrigger;if(this.overlayHandle?.isActive()){this.overlayHandle.updateRestoreFocusTo(restoreFocusTarget);return}this.overlayHandle=activateOverlay({host:this,panel:()=>this.renderRoot.querySelector('[part~="popup"]'),onEscape:()=>this.hide({restoreFocus:this.shouldRestoreFocusAfterEscape()}),restoreFocusTo:restoreFocusTarget,modal:!1,trapFocus:!1}),this.overlayHandle.focusAutofocus()}shouldRestoreFocusAfterEscape(){if(this.virtualAnchor)return this.returnFocusTo!==void 0;const active=this.ownerDocument.activeElement;return active!==null&&composedContains(this,active)}get requiresOverlayManager(){return this.open}showAt(rect,options){const normalizedRect=normalizeVirtualRect(rect);if(!normalizedRect)return;const previousAnchor=this.virtualAnchor,previousReturnFocusTo=this.returnFocusTo;if(this.virtualAnchor=virtualAnchorFromRect(normalizedRect),this.returnFocusTo=options?.returnFocusTo,this.syncInteractionTrigger(),this.open){this.activateTooltipOverlay(),this.position();return}this.show(),!this.open&&(this.virtualAnchor=previousAnchor,this.returnFocusTo=previousReturnFocusTo,this.syncInteractionTrigger())}show(){return this.cancelPendingTransition(),this.disabled||this._open?Promise.resolve():this.transitionGate.request(!0,()=>{if(this.emit("lr-show",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return this.cancelTransitionAnimation(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show")})}hide(options){return this.cancelPendingTransition(),this._open?this.transitionGate.request(!1,()=>{if(this.emit("lr-hide",null,{cancelable:!0}).defaultPrevented){this.syncOpenAttribute();return}return options?.restoreFocus&&(this.restoreFocusOnClose=!0),this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")}):Promise.resolve()}forceClose(){return this.cancelPendingTransition(),this._open?(this.cancelTransitionAnimation(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")):Promise.resolve()}applyOpenState(next){const old=this._open;this._open=next,next||this.cancelShadowContentScan(),next||(this.openedByPointer=!1),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}cancelTransitionAnimation(){this.transitionAnimation?.cancel(),this.transitionAnimation=void 0}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const popup=this.renderRoot.querySelector('[part~="popup"]'),showing=event==="lr-after-show",animation=popup?animateRegistered(this,popup,`tooltip.${showing?"show":"hide"}`,this.effectiveDirection,{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:["--lr-transition-fast","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}):void 0;if(this.transitionAnimation=animation,await animation?.finished.catch(()=>{}),this.transitionToken!==token)return;this.cancelTransitionAnimation()}event==="lr-after-hide"&&this.removeAttribute("data-closing"),this.emit(event)}}resolveAnchor(){return resolveOverlayAnchor(this,{virtualAnchor:this.virtualAnchor,anchor:this.anchor,for:this.for,trigger:this.triggerElement})}position(){this.cleanup?.(),this.cleanup=void 0;const popup=this.renderRoot.querySelector('[part~="popup"]'),arrowElement=this.renderRoot.querySelector('[part~="arrow"]'),anchor=this.resolveAnchor();if(!this.open||!anchor||!popup){this.positionedAnchor=void 0,this.anchorPositioned=!1;return}if(anchor!==this.positionedAnchor&&(this.anchorPositioned=!1),this.open&&anchor&&popup){const arrowPadding=Math.max(0,finiteNumber(this.arrowPadding,0));this.cleanup=place(anchor,popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.hoist?"fixed":"absolute",offset:finiteNumber(this.distance,DEFAULT_DISTANCE),skidding:finiteNumber(this.skidding,0),arrow:this.rendersArrow&&arrowElement?arrowElement:void 0,arrowPadding,onPlaced:({placement,arrow})=>{this.positionedAnchor=anchor,this.anchorPositioned=!0;const side=applyOverlayArrow(arrowElement,{placement,coords:arrow,enabled:this.rendersArrow,arrowPlacement:this.arrowPlacement,arrowPadding,rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-tooltip-arrow-size"});side!==this.resolvedSide&&(this.resolvedSide=side)}})}}syncTriggerA11y(){const trigger=this.triggerElement??null,proxy=this.open?this.descriptionProxy:void 0,contribution={descriptions:proxy?[proxy]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution);const accessibleTrigger=this.accessibleTrigger,distinctAccessibleTrigger=accessibleTrigger!==trigger?accessibleTrigger:null;this.accessibleTriggerAria?this.accessibleTriggerAria.update(distinctAccessibleTrigger,contribution):this.accessibleTriggerAria=acquireAriaOwnership(distinctAccessibleTrigger,contribution),this.overlayHandle?.isActive()&&!this.virtualAnchor&&this.overlayHandle.updateRestoreFocusTo(accessibleTrigger)}get accessibleTrigger(){return this.triggerElement?resolveAccessibleTrigger(this.triggerElement):null}releaseTriggerA11y(){this.accessibleTriggerAria?.release(),this.accessibleTriggerAria=void 0,this.triggerAria?.release(),this.triggerAria=void 0}requestTransition(next){if(this.cancelPendingTransition(),this.disabled)return;const delay=this.interactionDelay(next);if(delay<=0){next?this.show():this.hide();return}this.pendingDirection=next?"show":"hide";const view=this.ownerDocument.defaultView;if(!view){this.pendingDirection=void 0;return}this.timerView=view;const timer=view.setTimeout(()=>{this.timerView!==view||this.timer!==timer||(this.timer=void 0,this.timerView=void 0,this.pendingDirection=void 0,next?this.show():this.hide())},delay);this.timer=timer}interactionDelay(showing){const value=showing?this.showDelay:this.hideDelay,fallback=showing?DEFAULT_SHOW_DELAY:DEFAULT_HIDE_DELAY,attribute=showing?"show-delay":"hide-delay";if(this.hasAttribute(attribute)||value!==fallback)return finiteDuration(value,fallback);const property2=showing?"--show-delay":"--hide-delay",match=(this.ownerDocument.defaultView?.getComputedStyle(this).getPropertyValue(property2).trim()??"").match(/^(-?(?:\d+\.?\d*|\.\d+))(ms|s)$/i);if(!match)return fallback;const amount=Number(match[1]),milliseconds=match[2]?.toLowerCase()==="s"?amount*1e3:amount;return finiteDuration(milliseconds,fallback)}cancelPendingTransition(){this.timer!==void 0&&this.timerView?.clearTimeout(this.timer),this.timer=void 0,this.timerView=void 0,this.pendingDirection=void 0}bindTrigger(trigger){trigger.addEventListener("mouseenter",this.onEnter),trigger.addEventListener("mouseleave",this.onLeave),trigger.addEventListener("focusin",this.onEnter),trigger.addEventListener("focusout",this.onLeave),trigger.addEventListener("click",this.onTriggerClick),trigger.addEventListener("keydown",this.onTriggerKeyDown)}unbindTrigger(trigger){trigger.removeEventListener("mouseenter",this.onEnter),trigger.removeEventListener("mouseleave",this.onLeave),trigger.removeEventListener("focusin",this.onEnter),trigger.removeEventListener("focusout",this.onLeave),trigger.removeEventListener("click",this.onTriggerClick),trigger.removeEventListener("keydown",this.onTriggerKeyDown)}isTriggerHeld(trigger){try{if(trigger.matches(":hover"))return!0}catch{}const active=trigger.ownerDocument.activeElement;return active!==null&&composedContains(trigger,active)}adoptTrigger(next){if(next===this.triggerElement){this.syncTriggerA11y();return}const hadTrigger=this.triggerElement!==void 0;if(this.cancelPendingTransition(),this.triggerElement&&this.unbindTrigger(this.triggerElement),this.triggerElement=next,!this.triggerElement){this.syncTriggerA11y(),hadTrigger&&this.open&&!this.resolveAnchor()&&this.forceClose();return}this.bindTrigger(this.triggerElement),this.syncTriggerA11y(),hadTrigger&&this._open&&this.openedByPointer&&!this.isTriggerHeld(this.triggerElement)&&this.forceClose(),this.open&&this.position(),this.open&&this.interactiveContent&&this.activateTooltipOverlay()}isPopupTarget(target){if(target===null||target.nodeType!==1)return!1;const element=target,slot=this.activeContentSlot;return this.renderRoot.querySelector('[part~="popup"]')?.contains(element)===!0||slot?.assignedElements({flatten:!0}).some(root=>composedContains(root,element))===!0}clearContentSlotListeners(){for(const slot of this.contentSlotListeners)slot.removeEventListener("slotchange",this.onContentSlotChange);this.contentSlotListeners.clear()}syncContentSlotListeners(slots){const activeSlot=this.activeContentSlot;for(const slot of this.contentSlotListeners)slots.has(slot)&&slot!==activeSlot||(slot.removeEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.delete(slot));for(const slot of slots)slot===activeSlot||this.contentSlotListeners.has(slot)||(slot.addEventListener("slotchange",this.onContentSlotChange),this.contentSlotListeners.add(slot))}inspectContent(){const snapshot={actionable:!1,assigned:!1,awaitingShadowRoot:!1,labelReferenceRoots:new Set,text:"",externalRoots:new Set,shadowRoots:new Set,forwardingSlots:new Set,composedAncestors:new Set},activeSlot=this.activeContentSlot;if(!activeSlot)return snapshot;snapshot.assigned=activeSlot.assignedNodes().length>0;const popup=this.renderRoot.querySelector('[part~="popup"]'),bypassClosedVisibility=popup?.hasAttribute("data-hidden")===!0,previousVisibility=popup?.style.getPropertyValue("visibility")??"",previousVisibilityPriority=popup?.style.getPropertyPriority("visibility")??"";if(popup&&bypassClosedVisibility){const hostVisibility=this.ownerDocument.defaultView?.getComputedStyle(this).visibility??"visible";popup.style.setProperty("visibility",hostVisibility)}try{const visitedContentElements=new Set,accessibilityText=composedAccessibilityTextResult(activeSlot,{shouldPruneNode:node=>{if(node.getRootNode()!==this.renderRoot&&!this.contains(node)&&snapshot.externalRoots.add(node),node.nodeType!==1)return!1;const element=node;return visitedContentElements.add(element),!isAccessibilitySubtreeExcluded(element)&&!isAccessibilityVisibilityHidden(element)&&isActionableElement(element)&&(snapshot.actionable=!0),element.localName==="slot"&&snapshot.forwardingSlots.add(element),element.shadowRoot?snapshot.shadowRoots.add(element.shadowRoot):element.localName.includes("-")&&(snapshot.awaitingShadowRoot=!0),!1},isSubtreeExcluded:element=>(!visitedContentElements.has(element)&&element!==this&&snapshot.composedAncestors.add(element),isAccessibilitySubtreeExcluded(element))});snapshot.text=accessibilityText.text.replace(/\s+/g," ").trim();for(const root of accessibilityText.labelReferenceRoots)snapshot.labelReferenceRoots.add(root);for(const reference of accessibilityText.referencedElements)snapshot.externalRoots.add(reference)}finally{popup&&bypassClosedVisibility&&(previousVisibility?popup.style.setProperty("visibility",previousVisibility,previousVisibilityPriority):popup.style.removeProperty("visibility"))}return snapshot}observeContentNode(node){if(this.contentObserver){if(node.nodeType===3){this.contentObserver.observe(node,{characterData:!0});return}node.nodeType!==1&&node.nodeType!==11||this.contentObserver.observe(node,{attributes:!0,attributeFilter:["aria-hidden","aria-label","aria-labelledby","alt","class","contenteditable","hidden","href","inert","open","role","slot","style","tabindex"],childList:!0,characterData:!0,subtree:!0})}}bindContentObservation(snapshot){if(this.stopLabelReferenceIdentityObservation?.(),this.stopLabelReferenceIdentityObservation=void 0,this.isConnected&&snapshot.labelReferenceRoots.size>0){const cleanups=[...snapshot.labelReferenceRoots].map(root=>observeOverlayAnchorIdentity(root,()=>this.updateInteractiveContent()));this.stopLabelReferenceIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}if(this.contentObserver){this.contentObserver.disconnect();for(const ancestor of snapshot.composedAncestors)ancestor===this||ancestor.getRootNode()===this.renderRoot||snapshot.externalRoots.has(ancestor)||this.contentObserver.observe(ancestor,{attributes:!0,attributeFilter:["aria-hidden","class","hidden","inert","style"]});this.observeContentNode(this);for(const root of snapshot.externalRoots)this.observeContentNode(root);for(const root of snapshot.shadowRoots)this.observeContentNode(root)}}updateInteractiveContent(fromShadowContentScan=!1){fromShadowContentScan||(this.shadowContentScanAttempts=0);const snapshot=this.inspectContent();this.interactiveContent=snapshot.actionable,this.syncContentSlotListeners(snapshot.forwardingSlots),this.bindContentObservation(snapshot),this.scheduleShadowContentScan(snapshot.awaitingShadowRoot),this.updateDescriptionProxy(snapshot.text,snapshot.assigned)}scheduleShadowContentScan(awaitingShadowRoot){if(this.cancelShadowContentScan(!1),!awaitingShadowRoot||!this.open||!this.isConnected||this.shadowContentScanAttempts>=MAX_SHADOW_CONTENT_SCAN_FRAMES)return;const view=this.ownerDocument.defaultView;view&&(this.shadowContentScanView=view,this.shadowContentScanFrame=view.requestAnimationFrame(()=>{this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,this.shadowContentScanAttempts++,this.updateInteractiveContent(!0)}))}cancelShadowContentScan(resetAttempts=!0){this.shadowContentScanFrame!==void 0&&this.shadowContentScanView?.cancelAnimationFrame(this.shadowContentScanFrame),this.shadowContentScanFrame=void 0,this.shadowContentScanView=void 0,resetAttempts&&(this.shadowContentScanAttempts=0)}ensureDescriptionProxy(){this.descriptionProxy||(this.descriptionProxy=this.ownerDocument.createElement("span"),this.descriptionProxy.id=this.descriptionId,this.descriptionProxy.slot="__lr-tooltip-description",this.descriptionProxy.hidden=!0,this.descriptionProxy.dataset.lyraTooltipDescription=""),this.descriptionProxy.parentElement!==this&&this.append(this.descriptionProxy),this.updateDescriptionProxy()}updateDescriptionProxy(contentText,assigned){if(!this.descriptionProxy)return;const hostLabel=this.getAttribute("aria-label"),snapshot=contentText===void 0||assigned===void 0?this.inspectContent():void 0,visibleContent=contentText??snapshot?.text??"",hasAssignment=assigned??snapshot?.assigned??!1,description=hostLabel!==null?hostLabel.trim():(this.accessibleLabel||visibleContent||(hasAssignment?"":this.content)).trim();this.descriptionProxy.textContent!==description&&(this.descriptionProxy.textContent=description)}render(){const hostLabel=this.getAttribute("aria-label"),propertyLabel=this.accessibleLabel??"",hasExplicitLabel=hostLabel!==null||propertyLabel.length>0,label=hostLabel!==null?hostLabel:propertyLabel,popupLabel=this.interactiveContent?hasExplicitLabel?label:this.localize("popover"):hasExplicitLabel?label:nothing;return html`
       <span part="trigger">
         ${this.namedTriggerMode?html`<slot name="trigger" @slotchange=${this.onTriggerSlotChange}></slot>`:html`<slot @slotchange=${this.onTriggerSlotChange}></slot>`}
       </span>
@@ -14,4 +14,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         </span>
         ${this.rendersArrow?html`<span part="arrow base__arrow arrow-${this.resolvedSide}"></span>`:nothing}
       </div>
-    `}}__decorate([property({type:Boolean,reflect:!0})],LyraTooltip.prototype,"open",null),__decorate([property()],LyraTooltip.prototype,"trigger",void 0),__decorate([property({type:Boolean})],LyraTooltip.prototype,"manual",void 0),__decorate([property({type:Number,attribute:"show-delay"})],LyraTooltip.prototype,"showDelay",void 0),__decorate([property({type:Number,attribute:"hide-delay"})],LyraTooltip.prototype,"hideDelay",void 0),__decorate([property({reflect:!0})],LyraTooltip.prototype,"placement",void 0),__decorate([property({type:Number})],LyraTooltip.prototype,"distance",void 0),__decorate([property({type:Number})],LyraTooltip.prototype,"skidding",void 0),__decorate([property({reflect:!0,converter:omittedEmptyStringConverter})],LyraTooltip.prototype,"for",null),__decorate([property({attribute:!1})],LyraTooltip.prototype,"anchor",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTooltip.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTooltip.prototype,"hoist",void 0),__decorate([property({type:Boolean,converter:trueDefaultBooleanConverter,reflect:!0})],LyraTooltip.prototype,"arrow",void 0),__decorate([property({type:Boolean,attribute:"without-arrow",reflect:!0})],LyraTooltip.prototype,"withoutArrow",void 0),__decorate([property({attribute:"arrow-placement"})],LyraTooltip.prototype,"arrowPlacement",void 0),__decorate([property({type:Number,attribute:"arrow-padding"})],LyraTooltip.prototype,"arrowPadding",void 0),__decorate([property()],LyraTooltip.prototype,"content",void 0),__decorate([property({attribute:"aria-label"})],LyraTooltip.prototype,"accessibleLabel",void 0),__decorate([state()],LyraTooltip.prototype,"interactiveContent",void 0),__decorate([state()],LyraTooltip.prototype,"resolvedSide",void 0);export{LyraTooltip};
+    `}}__decorate([property({type:Boolean,reflect:!0})],LyraTooltip.prototype,"open",null),__decorate([property()],LyraTooltip.prototype,"trigger",void 0),__decorate([property({type:Boolean})],LyraTooltip.prototype,"manual",void 0),__decorate([property({type:Number,attribute:"show-delay"})],LyraTooltip.prototype,"showDelay",void 0),__decorate([property({type:Number,attribute:"hide-delay"})],LyraTooltip.prototype,"hideDelay",void 0),__decorate([property({reflect:!0})],LyraTooltip.prototype,"placement",void 0),__decorate([property({type:Number})],LyraTooltip.prototype,"distance",void 0),__decorate([property({type:Number})],LyraTooltip.prototype,"skidding",void 0),__decorate([property({reflect:!0,converter:omittedEmptyStringConverter})],LyraTooltip.prototype,"for",null),__decorate([property({attribute:!1})],LyraTooltip.prototype,"anchor",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTooltip.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraTooltip.prototype,"hoist",void 0),__decorate([property({type:Boolean,converter:trueDefaultBooleanConverter,reflect:!0})],LyraTooltip.prototype,"arrow",void 0),__decorate([property({type:Boolean,attribute:"without-arrow",reflect:!0})],LyraTooltip.prototype,"withoutArrow",void 0),__decorate([property({attribute:"arrow-placement"})],LyraTooltip.prototype,"arrowPlacement",void 0),__decorate([property({type:Number,attribute:"arrow-padding"})],LyraTooltip.prototype,"arrowPadding",void 0),__decorate([property()],LyraTooltip.prototype,"content",void 0),__decorate([property({attribute:"aria-label"})],LyraTooltip.prototype,"accessibleLabel",void 0),__decorate([state()],LyraTooltip.prototype,"interactiveContent",void 0),__decorate([state()],LyraTooltip.prototype,"resolvedSide",void 0),__decorate([state()],LyraTooltip.prototype,"anchorPositioned",void 0);export{LyraTooltip};

package/dist/components/overlays/popup/popup.class.d.ts

@@ -167,6 +167,7 @@ export declare class LyraPopup extends LyraElement<LyraPopupEventMap> {
     private resolvedPlacement;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** Recomputes the position now. Rarely needed — the popup already tracks scroll, resize and
      *  layout change — but a consumer that moved a virtual anchor imperatively can force a pass. */

package/dist/components/overlays/popup/popup.class.js

@@ -1,8 +1,8 @@
-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}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{place,virtualAnchorFromRect}from"../../../internal/positioner.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteNumber}from"../../../internal/numbers.js";import{applyOverlayArrow}from"../overlay/overlay-arrow.js";import{observeOverlayAnchorIdentity}from"../overlay/overlay-shared.js";import{styles}from"./popup.styles.js";const PLACEMENTS=new Set(["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"]),AUTO_SIZE_AXES=new Set(["horizontal","vertical","both"]),SYNC_AXES=new Set(["width","height","both"]);class LyraPopup extends LyraElement{constructor(){super(...arguments),this.active=!1,this.for="",this.anchor=null,this.placement="top",this.strategy="absolute",this.distance=0,this.skidding=0,this.flip=!1,this.flipFallbackPlacements="",this.flipFallbackStrategy="best-fit",this.boundary="viewport",this.flipBoundary=null,this.flipPadding=0,this.shift=!1,this.shiftBoundary=null,this.shiftPadding=0,this.padding=0,this.autoSize=null,this.autoSizeBoundary=null,this.autoSizePadding=0,this.sync=null,this.hoverBridge=!1,this.arrow=!1,this.arrowPlacement="anchor",this.arrowPadding=10,this.virtualAnchor=null,this.anchorPositioned=!1,this.resolvedPlacement="top",this.onAnchorSlotChange=()=>{if(!this.active)return;const nextIdentity=this.resolveAnchor()?.identity,currentIdentity=this.placingAnchorIdentity??this.positionedAnchorIdentity;nextIdentity!==currentIdentity&&this.reposition()},this.onForwardedAnchorSlotChange=event=>{event.target?.localName==="slot"&&this.onAnchorSlotChange()}}static{this.styles=[LyraElement.styles,styles]}get popup(){return this.renderRoot?.querySelector('[part~="popup"]')}set popup(_next){}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedAnchorSlotChange),this.syncAnchorIdentityObservation(),this.hasUpdated&&this.active&&this.reposition()}disconnectedCallback(){this.removeEventListener("slotchange",this.onForwardedAnchorSlotChange),this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.teardown(),this.positionedAnchorIdentity=void 0,this.setPositioned(!1),super.disconnectedCallback()}updated(changed){super.updated(changed),this.reposition()}reposition(){this.syncAnchorIdentityObservation();const anchor=this.isConnected&&this.active?this.resolveAnchor():null,previousIdentity=this.placingAnchorIdentity??this.positionedAnchorIdentity;if(this.teardown(),!this.isConnected||!this.active||!this.popup||!anchor){this.positionedAnchorIdentity=void 0,this.setPositioned(!1);return}anchor.identity!==previousIdentity&&(this.positionedAnchorIdentity=void 0,this.setPositioned(!1)),this.placingAnchorIdentity=anchor.identity;const arrowPadding=Math.max(0,finiteNumber(this.arrowPadding,0));this.stopPlacing=place(anchor.target,this.popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.strategy==="absolute"?"absolute":"fixed",offset:finiteNumber(this.distance,0),skidding:finiteNumber(this.skidding,0),boundary:this.boundary==="scroll"?void 0:[],flip:this.flip,flipFallbackPlacements:this.parsedFlipFallbackPlacements,flipFallbackStrategy:this.flipFallbackStrategy==="initial"||this.flipFallbackStrategy==="initial-placement"?"initial-placement":"best-fit",flipBoundary:this.flipBoundary??void 0,flipPadding:Math.max(0,finiteNumber(this.flipPadding,0)),shift:this.shift,shiftBoundary:this.shiftBoundary??void 0,shiftPadding:Math.max(0,finiteNumber(this.shiftPadding,0)),padding:Math.max(0,finiteNumber(this.padding,0)),autoSize:AUTO_SIZE_AXES.has(this.autoSize)?this.autoSize:void 0,autoSizeBoundary:this.autoSizeBoundary??void 0,autoSizePadding:Math.max(0,finiteNumber(this.autoSizePadding,0)),sync:SYNC_AXES.has(this.sync)?this.sync:void 0,arrow:this.arrow?this.arrowElement:void 0,arrowPadding,hoverBridge:this.hoverBridge?this.hoverBridgeElement:void 0,onPlaced:({placement,arrow})=>{const currentAnchor=this.resolveAnchor();if(!this.isConnected||!this.active||currentAnchor?.identity!==anchor.identity){this.setPositioned(!1);return}this.placingAnchorIdentity=void 0,this.positionedAnchorIdentity=anchor.identity,this.setPositioned(!0),this.popup.style.setProperty("--auto-size-available-width",this.popup.style.getPropertyValue("--lr-positioner-available-inline-size")),this.popup.style.setProperty("--auto-size-available-height",this.popup.style.getPropertyValue("--lr-positioner-available-block-size"));const side=applyOverlayArrow(this.arrowElement??null,{placement,coords:arrow,enabled:this.arrow,arrowPlacement:this.arrowPlacement,arrowPadding,rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-popup-arrow-size"});this.applyArrowSidePart(side),placement!==this.resolvedPlacement&&(this.resolvedPlacement=placement,this.applySidePart(placement)),this.emit("lr-reposition",{placement})}})}get parsedFlipFallbackPlacements(){const raw=(this.flipFallbackPlacements??"").trim();if(!raw)return;const parsed=raw.split(/[\s,]+/).filter(token=>PLACEMENTS.has(token));return parsed.length?parsed:void 0}teardown(){this.stopPlacing?.(),this.stopPlacing=void 0,this.placingAnchorIdentity=void 0}resolveAnchor(){if(this.virtualAnchor){const candidate=this.virtualAnchor;if(typeof candidate.getBoundingClientRect=="function")return{target:candidate,identity:candidate};const rect=this.virtualAnchor,width=rect.width??0,height=rect.height??0;return[rect.x,rect.y,width,height].every(Number.isFinite)?{target:virtualAnchorFromRect({x:rect.x,y:rect.y,width:Math.max(0,width),height:Math.max(0,height)}),identity:rect}:null}if(this.anchor){if(typeof this.anchor=="string"){const target2=this.getRootNode().getElementById?.(this.anchor)??null;if(target2)return{target:target2,identity:target2}}else if(typeof this.anchor.getBoundingClientRect=="function"&&(!this.isElementAnchor(this.anchor)||this.anchor.isConnected))return{target:this.anchor,identity:this.anchor}}if(this.for){const target2=this.getRootNode().getElementById?.(this.for)??null;if(target2)return{target:target2,identity:target2}}const target=this.anchorSlotWrapper?.querySelector("slot")?.assignedElements({flatten:!0})[0]??null;return target?.isConnected?{target,identity:target}:null}isElementAnchor(anchor){const candidate=anchor,ElementCtor=candidate.ownerDocument?.defaultView?.Element;return ElementCtor?candidate instanceof ElementCtor:candidate.nodeType===1}syncAnchorIdentityObservation(){if(this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,!this.isConnected||!this.active||this.virtualAnchor)return;const directAnchor=this.anchor&&typeof this.anchor!="string"&&this.isElementAnchor(this.anchor)?this.anchor:void 0;if(!(typeof this.anchor=="string"||!!this.for||!!directAnchor))return;const onIdentityChange=()=>{const nextIdentity=this.resolveAnchor()?.identity,currentIdentity=this.placingAnchorIdentity??this.positionedAnchorIdentity;nextIdentity!==currentIdentity&&this.reposition()},observedRoots=new Set([this]);directAnchor&&directAnchor.getRootNode()!==this.getRootNode()&&observedRoots.add(directAnchor.isConnected?directAnchor:directAnchor.ownerDocument);const cleanups=[...observedRoots].map(root=>observeOverlayAnchorIdentity(root,onIdentityChange));this.stopAnchorIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}setPositioned(positioned){this.anchorPositioned=positioned;const paints=this.active&&positioned,awaitsPosition=this.active&&!positioned;this.popup?.toggleAttribute("data-active",paints),this.popup?.toggleAttribute("data-awaits-position",awaitsPosition),this.hoverBridgeElement?.toggleAttribute("data-active",paints)}applySidePart(placement){const side=placement.split("-")[0]??"bottom";this.popup?.setAttribute("part",`popup ${side}`)}applyArrowSidePart(side){this.arrowElement?.setAttribute("part",`arrow arrow-${side}`)}render(){const side=this.resolvedPlacement.split("-")[0],paints=this.active&&this.anchorPositioned,awaitsPosition=this.active&&!this.anchorPositioned;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{LyraElement}from"../../../internal/lyra-element.js";import{place,virtualAnchorFromRect}from"../../../internal/positioner.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{finiteNumber}from"../../../internal/numbers.js";import{applyOverlayArrow}from"../overlay/overlay-arrow.js";import{observeOverlayAnchorIdentity}from"../overlay/overlay-shared.js";import{styles}from"./popup.styles.js";const PLACEMENTS=new Set(["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"]),AUTO_SIZE_AXES=new Set(["horizontal","vertical","both"]),SYNC_AXES=new Set(["width","height","both"]);class LyraPopup extends LyraElement{constructor(){super(...arguments),this.active=!1,this.for="",this.anchor=null,this.placement="top",this.strategy="absolute",this.distance=0,this.skidding=0,this.flip=!1,this.flipFallbackPlacements="",this.flipFallbackStrategy="best-fit",this.boundary="viewport",this.flipBoundary=null,this.flipPadding=0,this.shift=!1,this.shiftBoundary=null,this.shiftPadding=0,this.padding=0,this.autoSize=null,this.autoSizeBoundary=null,this.autoSizePadding=0,this.sync=null,this.hoverBridge=!1,this.arrow=!1,this.arrowPlacement="anchor",this.arrowPadding=10,this.virtualAnchor=null,this.anchorPositioned=!1,this.resolvedPlacement="top",this.onAnchorSlotChange=()=>{if(!this.active)return;const nextIdentity=this.resolveAnchor()?.identity,currentIdentity=this.placingAnchorIdentity??this.positionedAnchorIdentity;nextIdentity!==currentIdentity&&this.reposition()},this.onForwardedAnchorSlotChange=event=>{event.target?.localName==="slot"&&this.onAnchorSlotChange()}}static{this.styles=[LyraElement.styles,styles]}get popup(){return this.renderRoot?.querySelector('[part~="popup"]')}set popup(_next){}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedAnchorSlotChange),this.syncAnchorIdentityObservation(),this.hasUpdated&&this.active&&this.reposition()}disconnectedCallback(){this.removeEventListener("slotchange",this.onForwardedAnchorSlotChange),this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,this.teardown(),this.positionedAnchorIdentity=void 0,this.setPositioned(!1),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("active")&&!this.active&&this.setPositioned(!1),(changed.has("anchor")||changed.has("for")||changed.has("virtualAnchor"))&&this.setPositioned(!1)}updated(changed){super.updated(changed),this.reposition()}reposition(){this.syncAnchorIdentityObservation();const anchor=this.isConnected&&this.active?this.resolveAnchor():null,previousIdentity=this.placingAnchorIdentity??this.positionedAnchorIdentity;if(this.teardown(),!this.isConnected||!this.active||!this.popup||!anchor){this.positionedAnchorIdentity=void 0,this.setPositioned(!1);return}anchor.identity!==previousIdentity&&(this.positionedAnchorIdentity=void 0,this.setPositioned(!1)),this.placingAnchorIdentity=anchor.identity;const arrowPadding=Math.max(0,finiteNumber(this.arrowPadding,0));this.stopPlacing=place(anchor.target,this.popup,{placement:rtlAwarePlacement(this.placement,this),strategy:this.strategy==="absolute"?"absolute":"fixed",offset:finiteNumber(this.distance,0),skidding:finiteNumber(this.skidding,0),boundary:this.boundary==="scroll"?void 0:[],flip:this.flip,flipFallbackPlacements:this.parsedFlipFallbackPlacements,flipFallbackStrategy:this.flipFallbackStrategy==="initial"||this.flipFallbackStrategy==="initial-placement"?"initial-placement":"best-fit",flipBoundary:this.flipBoundary??void 0,flipPadding:Math.max(0,finiteNumber(this.flipPadding,0)),shift:this.shift,shiftBoundary:this.shiftBoundary??void 0,shiftPadding:Math.max(0,finiteNumber(this.shiftPadding,0)),padding:Math.max(0,finiteNumber(this.padding,0)),autoSize:AUTO_SIZE_AXES.has(this.autoSize)?this.autoSize:void 0,autoSizeBoundary:this.autoSizeBoundary??void 0,autoSizePadding:Math.max(0,finiteNumber(this.autoSizePadding,0)),sync:SYNC_AXES.has(this.sync)?this.sync:void 0,arrow:this.arrow?this.arrowElement:void 0,arrowPadding,hoverBridge:this.hoverBridge?this.hoverBridgeElement:void 0,onPlaced:({placement,arrow})=>{const currentAnchor=this.resolveAnchor();if(!this.isConnected||!this.active||currentAnchor?.identity!==anchor.identity){this.setPositioned(!1);return}this.placingAnchorIdentity=void 0,this.positionedAnchorIdentity=anchor.identity,this.setPositioned(!0),this.popup.style.setProperty("--auto-size-available-width",this.popup.style.getPropertyValue("--lr-positioner-available-inline-size")),this.popup.style.setProperty("--auto-size-available-height",this.popup.style.getPropertyValue("--lr-positioner-available-block-size"));const side=applyOverlayArrow(this.arrowElement??null,{placement,coords:arrow,enabled:this.arrow,arrowPlacement:this.arrowPlacement,arrowPadding,rtl:this.effectiveDirection==="rtl",sizeProperty:"--arrow-size",fallbackSizeProperty:"--lr-popup-arrow-size"});this.applyArrowSidePart(side),placement!==this.resolvedPlacement&&(this.resolvedPlacement=placement,this.applySidePart(placement)),this.emit("lr-reposition",{placement})}})}get parsedFlipFallbackPlacements(){const raw=(this.flipFallbackPlacements??"").trim();if(!raw)return;const parsed=raw.split(/[\s,]+/).filter(token=>PLACEMENTS.has(token));return parsed.length?parsed:void 0}teardown(){this.stopPlacing?.(),this.stopPlacing=void 0,this.placingAnchorIdentity=void 0}resolveAnchor(){if(this.virtualAnchor){const candidate=this.virtualAnchor;if(typeof candidate.getBoundingClientRect=="function")return{target:candidate,identity:candidate};const rect=this.virtualAnchor,width=rect.width??0,height=rect.height??0;return[rect.x,rect.y,width,height].every(Number.isFinite)?{target:virtualAnchorFromRect({x:rect.x,y:rect.y,width:Math.max(0,width),height:Math.max(0,height)}),identity:rect}:null}if(this.anchor){if(typeof this.anchor=="string"){const target2=this.getRootNode().getElementById?.(this.anchor)??null;if(target2)return{target:target2,identity:target2}}else if(typeof this.anchor.getBoundingClientRect=="function"&&(!this.isElementAnchor(this.anchor)||this.anchor.isConnected))return{target:this.anchor,identity:this.anchor}}if(this.for){const target2=this.getRootNode().getElementById?.(this.for)??null;if(target2)return{target:target2,identity:target2}}const target=this.anchorSlotWrapper?.querySelector("slot")?.assignedElements({flatten:!0})[0]??null;return target?.isConnected?{target,identity:target}:null}isElementAnchor(anchor){const candidate=anchor,ElementCtor=candidate.ownerDocument?.defaultView?.Element;return ElementCtor?candidate instanceof ElementCtor:candidate.nodeType===1}syncAnchorIdentityObservation(){if(this.stopAnchorIdentityObservation?.(),this.stopAnchorIdentityObservation=void 0,!this.isConnected||!this.active||this.virtualAnchor)return;const directAnchor=this.anchor&&typeof this.anchor!="string"&&this.isElementAnchor(this.anchor)?this.anchor:void 0;if(!(typeof this.anchor=="string"||!!this.for||!!directAnchor))return;const onIdentityChange=()=>{const nextIdentity=this.resolveAnchor()?.identity,currentIdentity=this.placingAnchorIdentity??this.positionedAnchorIdentity;nextIdentity!==currentIdentity&&this.reposition()},observedRoots=new Set([this]);directAnchor&&directAnchor.getRootNode()!==this.getRootNode()&&observedRoots.add(directAnchor.isConnected?directAnchor:directAnchor.ownerDocument);const cleanups=[...observedRoots].map(root=>observeOverlayAnchorIdentity(root,onIdentityChange));this.stopAnchorIdentityObservation=()=>{for(const cleanup of cleanups)cleanup()}}setPositioned(positioned){this.anchorPositioned=positioned}applySidePart(placement){const side=placement.split("-")[0]??"bottom";this.popup?.setAttribute("part",`popup ${side}`)}applyArrowSidePart(side){this.arrowElement?.setAttribute("part",`arrow arrow-${side}`)}render(){const side=this.resolvedPlacement.split("-")[0],paints=this.active&&this.anchorPositioned,awaitsPosition=this.active&&!this.anchorPositioned;return html`
       ${this.hoverBridge?html`<span part="hover-bridge" ?data-active=${paints}></span>`:nothing}
       <span part="anchor"><slot name="anchor" @slotchange=${this.onAnchorSlotChange}></slot></span>
       <div part="popup ${side}" ?data-active=${paints} ?data-awaits-position=${awaitsPosition}>
         <slot></slot>
         ${this.arrow?html`<span part="arrow arrow-${side}"></span>`:nothing}
       </div>
-    `}}__decorate([property({type:Boolean,reflect:!0})],LyraPopup.prototype,"active",void 0),__decorate([property({reflect:!0})],LyraPopup.prototype,"for",void 0),__decorate([property()],LyraPopup.prototype,"anchor",void 0),__decorate([property({reflect:!0})],LyraPopup.prototype,"placement",void 0),__decorate([property({reflect:!0})],LyraPopup.prototype,"strategy",void 0),__decorate([property({type:Number})],LyraPopup.prototype,"distance",void 0),__decorate([property({type:Number})],LyraPopup.prototype,"skidding",void 0),__decorate([property({type:Boolean})],LyraPopup.prototype,"flip",void 0),__decorate([property({attribute:"flip-fallback-placements"})],LyraPopup.prototype,"flipFallbackPlacements",void 0),__decorate([property({attribute:"flip-fallback-strategy"})],LyraPopup.prototype,"flipFallbackStrategy",void 0),__decorate([property()],LyraPopup.prototype,"boundary",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"flipBoundary",void 0),__decorate([property({type:Number,attribute:"flip-padding"})],LyraPopup.prototype,"flipPadding",void 0),__decorate([property({type:Boolean})],LyraPopup.prototype,"shift",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"shiftBoundary",void 0),__decorate([property({type:Number,attribute:"shift-padding"})],LyraPopup.prototype,"shiftPadding",void 0),__decorate([property({type:Number})],LyraPopup.prototype,"padding",void 0),__decorate([property({attribute:"auto-size"})],LyraPopup.prototype,"autoSize",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"autoSizeBoundary",void 0),__decorate([property({type:Number,attribute:"auto-size-padding"})],LyraPopup.prototype,"autoSizePadding",void 0),__decorate([property()],LyraPopup.prototype,"sync",void 0),__decorate([property({type:Boolean,attribute:"hover-bridge"})],LyraPopup.prototype,"hoverBridge",void 0),__decorate([property({type:Boolean})],LyraPopup.prototype,"arrow",void 0),__decorate([property({attribute:"arrow-placement"})],LyraPopup.prototype,"arrowPlacement",void 0),__decorate([property({type:Number,attribute:"arrow-padding"})],LyraPopup.prototype,"arrowPadding",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"virtualAnchor",void 0),__decorate([query('[part~="arrow"]')],LyraPopup.prototype,"arrowElement",void 0),__decorate([query('[part~="hover-bridge"]')],LyraPopup.prototype,"hoverBridgeElement",void 0),__decorate([query('[part="anchor"]')],LyraPopup.prototype,"anchorSlotWrapper",void 0);export{LyraPopup};
+    `}}__decorate([property({type:Boolean,reflect:!0})],LyraPopup.prototype,"active",void 0),__decorate([property({reflect:!0})],LyraPopup.prototype,"for",void 0),__decorate([property()],LyraPopup.prototype,"anchor",void 0),__decorate([property({reflect:!0})],LyraPopup.prototype,"placement",void 0),__decorate([property({reflect:!0})],LyraPopup.prototype,"strategy",void 0),__decorate([property({type:Number})],LyraPopup.prototype,"distance",void 0),__decorate([property({type:Number})],LyraPopup.prototype,"skidding",void 0),__decorate([property({type:Boolean})],LyraPopup.prototype,"flip",void 0),__decorate([property({attribute:"flip-fallback-placements"})],LyraPopup.prototype,"flipFallbackPlacements",void 0),__decorate([property({attribute:"flip-fallback-strategy"})],LyraPopup.prototype,"flipFallbackStrategy",void 0),__decorate([property()],LyraPopup.prototype,"boundary",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"flipBoundary",void 0),__decorate([property({type:Number,attribute:"flip-padding"})],LyraPopup.prototype,"flipPadding",void 0),__decorate([property({type:Boolean})],LyraPopup.prototype,"shift",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"shiftBoundary",void 0),__decorate([property({type:Number,attribute:"shift-padding"})],LyraPopup.prototype,"shiftPadding",void 0),__decorate([property({type:Number})],LyraPopup.prototype,"padding",void 0),__decorate([property({attribute:"auto-size"})],LyraPopup.prototype,"autoSize",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"autoSizeBoundary",void 0),__decorate([property({type:Number,attribute:"auto-size-padding"})],LyraPopup.prototype,"autoSizePadding",void 0),__decorate([property()],LyraPopup.prototype,"sync",void 0),__decorate([property({type:Boolean,attribute:"hover-bridge"})],LyraPopup.prototype,"hoverBridge",void 0),__decorate([property({type:Boolean})],LyraPopup.prototype,"arrow",void 0),__decorate([property({attribute:"arrow-placement"})],LyraPopup.prototype,"arrowPlacement",void 0),__decorate([property({type:Number,attribute:"arrow-padding"})],LyraPopup.prototype,"arrowPadding",void 0),__decorate([property({attribute:!1})],LyraPopup.prototype,"virtualAnchor",void 0),__decorate([query('[part~="arrow"]')],LyraPopup.prototype,"arrowElement",void 0),__decorate([query('[part~="hover-bridge"]')],LyraPopup.prototype,"hoverBridgeElement",void 0),__decorate([query('[part="anchor"]')],LyraPopup.prototype,"anchorSlotWrapper",void 0),__decorate([state()],LyraPopup.prototype,"anchorPositioned",void 0);export{LyraPopup};

package/dist/components/overlays/popup/popup.styles.js

@@ -6,15 +6,8 @@ import{css}from"lit";const styles=css`
     display: contents;
   }
   [part~='popup'] {
-    /* Positioned by internal/positioner.ts, which writes physical position/left/top itself. The
-       baseline must use those same physical properties: inset-inline-start becomes right under
-       RTL and would remain active beside the JS-written left, stretching or pinning the popup.
-       The element must still be laid out (not display:none) while inactive is expressed by hiding
-       it, or the first measurement would read a zero rect. */
     position: absolute;
     top: 0;
-    /* policy-allow(physical-css): positioner.ts overwrites this exact physical property; a
-       logical right baseline under RTL would over-constrain the positioned box. */
     left: 0;
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover));
     max-inline-size: var(--lr-positioner-available-inline-size, none);
@@ -32,16 +25,10 @@ import{css}from"lit";const styles=css`
     transition-duration: var(--hide-duration, var(--lr-duration-fast));
   }
   [part~='popup'][data-awaits-position] {
-    /* An active request without a live, placed anchor is not a hide transition: letting the old
-       surface fade at stale coordinates would paint unattached chrome for another frame. */
     transition: none;
   }
 
   [part~='hover-bridge'] {
-    /* A viewport-sized transparent box clipped down to the quad internal/positioner.ts writes
-       between the anchor and the popup, so a pointer crossing the distance gap never leaves
-       both at once. The coordinates are physical viewport pixels — a polygon spanning two
-       different boxes has no logical-property spelling — and land here as custom properties. */
     position: fixed;
     inset: 0;
     z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-popover)) - 1);
@@ -63,8 +50,6 @@ import{css}from"lit";const styles=css`
     rotate: 45deg;
     background: var(--arrow-color, var(--lr-color-surface-raised));
     border: var(--popup-border-width, var(--lr-border-width-thin)) solid var(--lr-color-border);
-    /* Only the two outward-facing edges of the rotated square should read as the popup's border;
-       the other two sit under the panel. */
     clip-path: polygon(100% 0, 100% 100%, 0 100%);
   }
   @media (prefers-reduced-motion: reduce) {

package/dist/components/overlays/progress/progress-ring.class.d.ts

@@ -9,7 +9,9 @@ import type { LyraProgressVariant } from './progress-bar.class.js';
  * @customElement lr-progress-ring
  * @slot - Optional center label whose visible accessible text names the progressbar unless an
  * explicit accessible label overrides it; live mutations stay synchronized through forwarding
- * slots.
+ * slots. When nothing is slotted, the fallback content is the formatted percentage while
+ * determinate and `show-value` is set (`''` otherwise, and always `''` while `indeterminate`) --
+ * the same value contract as `<lr-progress-bar>`'s `showValue`.
  * @csspart base - Compatibility name for the progress wrapper; use `progress-ring`.
  * @csspart progress-ring - The progress wrapper. It is the same node as `base`.
  * @csspart track - The SVG track.
@@ -44,6 +46,12 @@ export declare class LyraProgressRing extends LyraElement {
     /** Selects the indicator's semantic palette from the shared semantic grid, matching sibling
      *  `<lr-progress-bar>`'s `variant`. */
     variant: LyraProgressVariant;
+    /** Shows the formatted percentage as the default slot's fallback content while determinate.
+     *  `false` by default, matching sibling `<lr-progress-bar>`'s `showValue`/`show-value` exactly --
+     *  a determinate ring with no `show-value` renders no percentage text. Only the fallback is
+     *  gated: a consumer who slots their own content always sees that content instead, with or
+     *  without `show-value` (native `<slot>` projection semantics, unaffected by this property). */
+    showValue: boolean;
     /** Mapped accessible-label property. */
     label: string;
     /** Explicit accessible name, on the library-wide `accessibleLabel`/`accessible-label` convention

package/dist/components/overlays/progress/progress-ring.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}from"lit/decorators.js";import{bindAccessibleTextObserver}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{variants}from"../../../internal/variants.styles.js";import{formatProgressPercent,joinAccessibleVisibleText,progressPercent,progressSafeMax,progressSafeValue,resolveProgressLabel}from"./progress-shared.js";import{ringStyles}from"./progress.styles.js";import{LYRA_DEFAULT_progress}from"../../../internal/default-strings.generated.js";class LyraProgressRing extends LyraElement{constructor(){super(...arguments),this.value=0,this.max=100,this.indeterminate=!1,this.variant="brand",this.label="",this.accessibleLabel="",this.cachedVisibleLabelText="",this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||(this.bindLabelObserverTargets(),this.recomputeVisibleLabelText())}}static{this.defaultStrings={...super.defaultStrings,progress:LYRA_DEFAULT_progress}}static{this.styles=[LyraElement.styles,variants,ringStyles]}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.rebuildLabelObserver(),this.hasUpdated?this.recomputeVisibleLabelText():this.seedFirstRenderState(()=>this.recomputeVisibleLabelText())}adoptedCallback(){super.adoptedCallback(),this.rebuildLabelObserver()}rebuildLabelObserver(){this.labelObserver?.disconnect();const MutationObserverCtor=this.ownerDocument?.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeVisibleLabelText()}):void 0,this.bindLabelObserverTargets()}bindLabelObserverTargets(){bindAccessibleTextObserver(this.labelObserver,this)}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}computeVisibleLabelText(){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,nodes=slot?slot.assignedNodes().length>0?slot.assignedNodes({flatten:!0}):[]:Array.from(lightDomNodes??[]).filter(node=>node.nodeType!==1||(node.getAttribute("slot")??"")==="");return joinAccessibleVisibleText(nodes)}recomputeVisibleLabelText(){const next=this.computeVisibleLabelText();next!==this.cachedVisibleLabelText&&(this.cachedVisibleLabelText=next,this.requestUpdate())}get safeMax(){return progressSafeMax(this.max)}get safeValue(){return progressSafeValue(this.value,this.safeMax)}get percent(){return progressPercent(this.safeValue,this.safeMax)}get formattedPercent(){return formatProgressPercent(this.effectiveLocale,this.percent)}get indicator(){return this.renderRoot.querySelector('[part="indicator"]')}get indicatorOffset(){const circumference=2*Math.PI*42;return this.indeterminate?circumference*.65:circumference*(1-this.percent/100)}render(){const circumference=2*Math.PI*42,offset=this.indicatorOffset,label=resolveProgressLabel(this,{label:this.label,accessibleLabel:this.accessibleLabel,visibleText:this.cachedVisibleLabelText,localizedFallback:this.localize("progress")});return html`<div part="base progress-ring" role="progressbar" aria-label=${label}
+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}from"lit/decorators.js";import{bindAccessibleTextObserver}from"../../../internal/accessibility-visibility.js";import{LyraElement}from"../../../internal/lyra-element.js";import{variants}from"../../../internal/variants.styles.js";import{formatProgressPercent,joinAccessibleVisibleText,progressPercent,progressSafeMax,progressSafeValue,resolveProgressLabel}from"./progress-shared.js";import{ringStyles}from"./progress.styles.js";import{LYRA_DEFAULT_progress}from"../../../internal/default-strings.generated.js";class LyraProgressRing extends LyraElement{constructor(){super(...arguments),this.value=0,this.max=100,this.indeterminate=!1,this.variant="brand",this.showValue=!1,this.label="",this.accessibleLabel="",this.cachedVisibleLabelText="",this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||(this.bindLabelObserverTargets(),this.recomputeVisibleLabelText())}}static{this.defaultStrings={...super.defaultStrings,progress:LYRA_DEFAULT_progress}}static{this.styles=[LyraElement.styles,variants,ringStyles]}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.rebuildLabelObserver(),this.hasUpdated?this.recomputeVisibleLabelText():this.seedFirstRenderState(()=>this.recomputeVisibleLabelText())}adoptedCallback(){super.adoptedCallback(),this.rebuildLabelObserver()}rebuildLabelObserver(){this.labelObserver?.disconnect();const MutationObserverCtor=this.ownerDocument?.defaultView?.MutationObserver;this.labelObserver=MutationObserverCtor?new MutationObserverCtor(()=>{this.bindLabelObserverTargets(),this.recomputeVisibleLabelText()}):void 0,this.bindLabelObserverTargets()}bindLabelObserverTargets(){bindAccessibleTextObserver(this.labelObserver,this)}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.labelObserver?.disconnect(),this.labelObserver=void 0,super.disconnectedCallback()}computeVisibleLabelText(){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,nodes=slot?slot.assignedNodes().length>0?slot.assignedNodes({flatten:!0}):[]:Array.from(lightDomNodes??[]).filter(node=>node.nodeType!==1||(node.getAttribute("slot")??"")==="");return joinAccessibleVisibleText(nodes)}recomputeVisibleLabelText(){const next=this.computeVisibleLabelText();next!==this.cachedVisibleLabelText&&(this.cachedVisibleLabelText=next,this.requestUpdate())}get safeMax(){return progressSafeMax(this.max)}get safeValue(){return progressSafeValue(this.value,this.safeMax)}get percent(){return progressPercent(this.safeValue,this.safeMax)}get formattedPercent(){return formatProgressPercent(this.effectiveLocale,this.percent)}get indicator(){return this.renderRoot.querySelector('[part="indicator"]')}get indicatorOffset(){const circumference=2*Math.PI*42;return this.indeterminate?circumference*.65:circumference*(1-this.percent/100)}render(){const circumference=2*Math.PI*42,offset=this.indicatorOffset,label=resolveProgressLabel(this,{label:this.label,accessibleLabel:this.accessibleLabel,visibleText:this.cachedVisibleLabelText,localizedFallback:this.localize("progress")});return html`<div part="base progress-ring" role="progressbar" aria-label=${label}
       aria-valuemin="0" aria-valuemax=${this.safeMax} aria-valuenow=${this.indeterminate?nothing:this.safeValue}
       aria-valuetext=${this.indeterminate?nothing:this.formattedPercent}>
       <svg viewBox="0 0 100 100" aria-hidden="true">
@@ -6,5 +6,5 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         <circle part="indicator" cx="50" cy="50" r=${42} stroke-width="10"
           stroke-dasharray=${circumference} stroke-dashoffset=${offset}></circle>
       </svg>
-      <span part="label"><slot @slotchange=${this.onLabelSlotChange}>${this.indeterminate?"":this.formattedPercent}</slot></span>
-    </div>`}}__decorate([property({type:Number,reflect:!0})],LyraProgressRing.prototype,"value",void 0),__decorate([property({type:Number})],LyraProgressRing.prototype,"max",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraProgressRing.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],LyraProgressRing.prototype,"variant",void 0),__decorate([property()],LyraProgressRing.prototype,"label",void 0),__decorate([property({attribute:"accessible-label"})],LyraProgressRing.prototype,"accessibleLabel",void 0);export{LyraProgressRing};
+      <span part="label"><slot @slotchange=${this.onLabelSlotChange}>${this.indeterminate||!this.showValue?"":this.formattedPercent}</slot></span>
+    </div>`}}__decorate([property({type:Number,reflect:!0})],LyraProgressRing.prototype,"value",void 0),__decorate([property({type:Number})],LyraProgressRing.prototype,"max",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraProgressRing.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],LyraProgressRing.prototype,"variant",void 0),__decorate([property({type:Boolean,attribute:"show-value"})],LyraProgressRing.prototype,"showValue",void 0),__decorate([property()],LyraProgressRing.prototype,"label",void 0),__decorate([property({attribute:"accessible-label"})],LyraProgressRing.prototype,"accessibleLabel",void 0);export{LyraProgressRing};

package/dist/components/overlays/progress/progress.styles.js

@@ -2,16 +2,8 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     color: var(--lr-color-brand);
-    /* Palette slot: which color the active 'variant' contributes to the indicator, read from the
-       shared semantic grid's loud fill (imported alongside this sheet as 'variants' in the class
-       file's static styles). It sits *inside* the two consumer-facing override names below in the
-       fallback chain -- an explicit --lr-progress-indicator-color or the upstream --indicator-color
-       alias still wins outright, exactly as before this token existed. The standalone default here
-       (brand) matches the value this indicator always rendered before variant support existed. */
     --_lr-progress-indicator-variant-color: var(--lr-color-brand);
   }
-  /* [variant] is always present -- 'variant' reflects its 'brand' property default on first
-     render -- but the bare :host default above still guards a not-yet-updated element. */
   :host([variant]) {
     --_lr-progress-indicator-variant-color: var(--lr-color-fill-loud);
   }
@@ -79,10 +71,6 @@ import{css}from"lit";const styles=css`
       transform: translateX(250%);
     }
   }
-  /* The determinate fill mirrors for free (a block box anchors to the inline-start edge, the
-     physical right under RTL), but translateX is physical, so the indeterminate sweep needs
-     mirrored keyframes to travel end-to-start under RTL: the indicator's static position is
-     right-anchored there, so just-off-screen is +100% (right) through -250% (left). */
   :host([indeterminate]:dir(rtl)) [part="indicator"] {
     animation-name: lr-progress-slide-rtl;
   }
@@ -104,17 +92,8 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
     color: var(--lr-color-brand);
-    /* Palette slot: which color the active 'variant' contributes to the indicator, read from the
-       shared semantic grid's loud fill (imported alongside this sheet as 'variants' in the class
-       file's static styles). It sits *inside* the two consumer-facing override names below in the
-       fallback chain -- an explicit --lr-progress-ring-indicator-color or the upstream
-       --indicator-color alias still wins outright, exactly as before this token existed. The
-       standalone default here (brand) matches the value this indicator always rendered before
-       variant support existed. */
     --_lr-progress-ring-indicator-variant-color: var(--lr-color-brand);
   }
-  /* [variant] is always present -- 'variant' reflects its 'brand' property default on first
-     render -- but the bare :host default above still guards a not-yet-updated element. */
   :host([variant]) {
     --_lr-progress-ring-indicator-variant-color: var(--lr-color-fill-loud);
   }

package/dist/components/overlays/rating/rating.styles.js

@@ -2,12 +2,6 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
     color: var(--lr-color-warning);
-    /* The 'm' step reproduces exactly the fixed symbol size this component had before the size
-       property existed; every other step of the library's shared six-step ladder changes this
-       private default below. An unset size and size="m" therefore resolve identically, while an
-       inherited or direct public size remains authoritative. The steps are a type ramp rather than the shared
-       --lr-form-control-* ladder: a rating has no control box to fit text inside, only glyphs
-       whose size IS the control. */
     --_lr-rating-size: var(--symbol-size, var(--lr-font-size-xl));
   }
   :host([data-effective-size="2xs"]) {
@@ -28,10 +22,6 @@ import{css}from"lit";const styles=css`
   :host([data-effective-size="xl"]) {
     --_lr-rating-size: var(--symbol-size, var(--lr-font-size-3xl));
   }
-  /* justify-content pairs with the min-inline-size hit-area floor below: a low-max rating (a
-     single star, say) is narrower than that floor, and the default justify-content
-     (normal => flex-start) would push the stars against the leading edge of an otherwise
-     centred control. A no-op once the stars already fill the floor. */
   [part~="base"] {
     display: inline-flex;
     justify-content: center;
@@ -41,11 +31,6 @@ import{css}from"lit";const styles=css`
     max-inline-size: 100%;
     min-block-size: var(--lr-icon-button-size);
   }
-  /* Pointer cursor only while the rating is actually settable -- a readonly or disabled rating is
-     not editable via click/drag, so an unconditional cursor: pointer here would misleadingly cue
-     an interaction that setValue() (rating.class.ts) refuses to apply. :disabled rather than
-     [disabled] because only the former also tracks an ancestor <fieldset disabled>, which
-     formDisabledCallback() honours but never writes to the host's own attribute. */
   :host(:not(:disabled):not([readonly])) [part~="base"] {
     cursor: pointer;
   }
@@ -53,20 +38,12 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Gives mouse users the same 'this is interactive' cue the :focus-visible outline above already
-     gives keyboard users -- mirrors lr-checkbox's/lr-radio's [part~='base']:hover pattern, gated via
-     :host(:not(:disabled):not([readonly])) (matching the pointer-cursor rule above -- a readonly
-     rating is still focusable, see rating.class.ts's tabindex, but neither settable nor "hoverable"
-     as an affordance) rather than a same-selector [part='star']:hover:not(:disabled) (which would
-     exceed a consumer's ::part(star):hover specificity). */
   :host(:not(:disabled):not([readonly])) [part~="base"]:hover [part="star"] {
     color: var(
       --lr-rating-empty-color,
       var(--symbol-color, var(--lr-color-border-strong))
     );
   }
-  /* Pressing commits a value, so the pressed cue is on the star the pointer is over rather than
-     the whole row -- the row-wide hover cue says "settable", this says "this one". */
   :host(:not(:disabled):not([readonly])) [part~="base"]:active [part="star"] {
     color: var(
       --lr-rating-active-color,
@@ -107,8 +84,6 @@ import{css}from"lit";const styles=css`
   [part="star"] [aria-hidden="true"] > * {
     max-inline-size: 100%;
   }
-  /* white-space keeps a consumer getSymbol() glyph at its natural width inside the percentage-wide
-     overlay, so overflow: hidden clips it mid-symbol (the partial fill) instead of reflowing it. */
   [part="star-fill"] {
     position: absolute;
     inset-block-start: 0;

package/dist/components/overlays/skeleton/skeleton.styles.js

@@ -27,10 +27,6 @@ import{css}from"lit";const styles=css`
     background-size: 200% 100%;
     animation: lr-skeleton-sheen var(--lr-transition-ambient) infinite;
   }
-  /* background-position percentages are physical, so the sheen highlight always travels
-     left-to-right; play the same keyframes backwards under RTL so it sweeps in the reading
-     direction. animation-direction (not a second animation-name) leaves the reduced-motion
-     'animation: none !important' below fully in charge of disabling it. */
   :host(:dir(rtl)) [part~='indicator'][data-effect='sheen'] {
     animation-direction: reverse;
   }

package/dist/components/overlays/spinner/spinner.styles.js

@@ -10,11 +10,8 @@ import{css}from"lit";const styles=css`
     border-radius: var(--lr-radius-pill);
     animation: lr-spin var(--lr-spinner-duration, var(--speed, var(--lr-transition-ambient))) infinite;
   }
-  /* 'after' renders the slotted label in flow next to the spinner; 'none' keeps it sr-only
-     (still hit by the [hidden] attribute set in spinner.class.ts, but scoping the clip here too
-     keeps this rule self-consistent if that attribute is ever dropped). */
-  :host([label-placement='after']) [part='label'] { display: inline-flex; flex: 1 1 auto; align-items: center; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; overflow-wrap: anywhere; margin-inline-start: var(--lr-space-2xs); color: var(--lr-color-text); font-size: var(--lr-font-size-sm); }
-  :host([label-placement='after']) [part='label'] ::slotted(*) { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
+  :host([label-placement='after']) [part='label'] { display: inline-flex; flex: 1 1 auto; align-items: center; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; overflow-wrap: break-word; margin-inline-start: var(--lr-space-2xs); color: var(--lr-color-text); font-size: var(--lr-font-size-sm); }
+  :host([label-placement='after']) [part='label'] ::slotted(*) { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: break-word; }
   :host([label-placement='none']) [part='label'] { position: absolute; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); overflow: hidden; clip-path: inset(50%); }
   @keyframes lr-spin { to { transform: rotate(1turn); } }
   @media (prefers-reduced-motion: reduce) { [part~='spinner-indicator'] { animation: none; } }

package/dist/components/overlays/toast/toast-item.styles.js

@@ -14,13 +14,6 @@ import{css}from"lit";const styles=css`
     --_lr-toast-font-size: var(--lr-font-size-m);
     --_lr-toast-accent-color: var(--lr-color-border);
   }
-  /* One rule for all four non-neutral variants, in place of the four one-declaration blocks that
-     stood here: the shared variants sheet has already re-pointed --lr-color-fill-* at the active
-     variant's row of the semantic grid, so the toast reads a generic slot and never names a
-     variant. Neutral is excluded rather than mapped, so its private default keeps the plain
-     --lr-color-border accent -- an ordinary informational toast must not read as a grey
-     status bar. Matching [variant] as well as :not([variant='neutral']) keeps a host that has not
-     yet reflected its default attribute on that same neutral value. */
   :host([variant]:not([variant="neutral"])) {
     --_lr-toast-accent-color: var(--lr-color-fill-loud);
   }
@@ -61,15 +54,10 @@ import{css}from"lit";const styles=css`
         var(--lr-toast-accent-width, var(--_lr-toast-accent-width))
     );
     font-size: var(--lr-toast-font-size, var(--_lr-toast-font-size));
-    /* Modal-layer surface: a toast floats over arbitrary page content at the toast layer, so it
-       must not share the page surface token -- in dark mode both resolve to the same near-black
-       and the toast loses its edges against whatever it covers. */
     background: var(--lr-color-surface-overlay);
     color: var(--lr-color-text);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-toast-item-radius, var(--lr-radius));
-    /* Modal layer, but a small unscrimmed float rather than a page-blocking panel -- the lower of
-       the two modal steps. */
     box-shadow: var(--lr-shadow-l);
     opacity: 0;
     transform: translateY(var(--lr-size-neg-8px));
@@ -119,33 +107,10 @@ import{css}from"lit";const styles=css`
     flex: 1 1 auto;
     min-inline-size: 0;
     overflow-wrap: anywhere;
-    /* Resolve each slotted message from its own first strong character. dir="auto" on the
-       shadow wrapper cannot inspect assigned light-DOM text in every browser, while plaintext
-       participates in the flattened text run and keeps an English message/action ordered inside
-       an RTL page (and vice versa for Arabic content in LTR). */
     unicode-bidi: plaintext;
   }
-  /* toaster.ts's action option (and the WithIcon/Triggers stories) append a
-     plain light-DOM button as a sibling of the message text -- without
-     this, it renders with the browser's unstyled default button chrome,
-     clashing with the rest of the token-driven design. Styled as an inline
-     text action (matching the toast's own accent color) rather than a
-     boxed button, since it sits directly after the message inside the
-     content part rather than in its own layout slot. */
   ::slotted(button) {
     display: inline-block;
-    /* Symmetric logical spacing remains on the correct side when plaintext bidi resolution makes
-       the slotted content's reading direction differ from the page direction.
-       !important is deliberate and load-bearing here, not stylistic: this button is a plain
-       light-DOM node toaster.ts appends as a sibling of the message text (see the comment below),
-       so a consumer's own page-level CSS -- not just this component's shadow root -- can also
-       select it directly. A ::slotted() rule from this shadow root loses the cascade to an
-       unrelated global reset placed in a CSS layer (e.g. Tailwind Preflight's own
-       margin-zeroing universal selector inside its base layer), even though that reset never
-       named this button and the rule here is unlayered -- confirmed against Storybook's own
-       tailwind.css bundle, which collapses this exact gap to 0 and renders "Item deletedUndo"
-       with no visible separator. Without !important, any consumer whose global stylesheet resets
-       margins inside a layer silently loses this spacing. */
     margin-inline: var(--lr-space-s) !important;
     padding: 0;
     border: none;
@@ -163,6 +128,9 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
+  ::slotted([hidden]:not([hidden="until-found" i])) {
+    display: none;
+  }
   [part="close-button"] {
     position: relative;
     display: inline-grid;
@@ -216,8 +184,6 @@ import{css}from"lit";const styles=css`
   :host([data-visible]) [part="progress-ring__indicator"] {
     animation-name: lr-toast-progress;
   }
-  /* no-pressed-state: :hover and :focus-within only mirror the timer's paused state on its
-     decorative progress indicator; the close button owns the actual press treatment below. */
   :host(:hover) [part="progress-ring__indicator"],
   :host(:focus-within) [part="progress-ring__indicator"] {
     animation-play-state: paused;
@@ -231,18 +197,10 @@ import{css}from"lit";const styles=css`
   [part="close-icon__svg"] {
     display: block;
   }
-  /* Keep each pointer-state value as an inline fallback: inherited hooks then retheme only the
-     close control without changing the toast surface or the region's stack spacing. */
   [part="close-button"]:where(:hover):where(:not([aria-disabled="true"])) {
     background: var(--lr-toast-close-button-hover-bg, transparent);
     color: var(--lr-toast-close-button-hover-color, var(--lr-color-text));
   }
-  /* Pressed adds the fill the hover deliberately withholds: the resting button is background:none,
-     so mixing that transparent base toward --lr-color-mix-partner lands the partner colour at the
-     active share -- a scrim that darkens on a light toast and lightens on a dark one, following
-     the text colour either way. The ink change is restated because keyboard activation raises
-     :active with no :hover, and the disabled guard is carried over so a dismiss-blocked toast
-     stays visibly inert under a click. */
   [part="close-button"]:where(:active):where(:not([aria-disabled="true"])) {
     color: var(--lr-toast-close-button-active-color, var(--lr-color-text));
     background: var(