@aceshooting/lyra-ui 28.1.1 → 28.1.2

package/dist/components/utility/tour/tour.class.js

@@ -1,14 +1,14 @@
-import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{isCrossRealmPlainRecord}from"../../../internal/object-guards.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{cancelDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{nextId,hasRealContent}from"../../../internal/a11y.js";import{deferredPlaceReady as place,deferredTrackRect as trackRect}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteInteger,finiteNumber,finiteRange}from"../../../internal/numbers.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{keyEventOwnedByInnerControl}from"../../../internal/hotkey.js";import{hasTopLayerAncestor,needsTopLayerEscape,promoteToTopLayer,releaseTopLayer}from"../../../internal/top-layer-escape.js";import{styles}from"./tour.styles.js";import{resolveCssLength}from"../../../internal/css-length.js";const DEFAULT_DISTANCE=12,DEFAULT_SPOTLIGHT_PADDING=4,MAX_TOUR_STEPS=256,MAX_STEP_ID_LENGTH=256;import{CSS_NUMBER_SOURCE}from"../../../internal/css-number.js";import{LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings/shared.generated.js";import{LYRA_DEFAULT_tourDone,LYRA_DEFAULT_tourSkip,LYRA_DEFAULT_tourStepOf}from"../../../internal/default-strings/utility.generated.js";const MAX_TARGET_SELECTOR_LENGTH=8192,MAX_HEADING_LENGTH=4096,MAX_CONTENT_LENGTH=65536,MAX_STEP_SPOTLIGHT_PADDING=1e4,SPOTLIGHT_PADDING_LENGTH=new RegExp(`^${CSS_NUMBER_SOURCE}(?:px|rem|em|vw|vh)$`,"i"),spotlightPaddingConverter={fromAttribute:value=>{if(value===null)return value;const trimmed=value.trim();return SPOTLIGHT_PADDING_LENGTH.test(trimmed)?trimmed:Number(value)}},TOUR_PLACEMENTS=new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]);function keyholeClipPath(x,y,width,height){const right=x+width,bottom=y+height;return`polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${x}px ${y}px, ${x}px ${bottom}px, ${right}px ${bottom}px, ${right}px ${y}px, ${x}px ${y}px, 0% 0%)`}function ownDataValue(record,key){try{const descriptor=Object.getOwnPropertyDescriptor(record,key);return descriptor&&"value"in descriptor?descriptor.value:void 0}catch{return}}function safeArrayLength(value){try{if(!Array.isArray(value))return 0;const descriptor=Object.getOwnPropertyDescriptor(value,"length"),length=descriptor&&"value"in descriptor?descriptor.value:0;return typeof length=="number"&&Number.isFinite(length)?Math.min(MAX_TOUR_STEPS,Math.max(0,Math.floor(length))):0}catch{return 0}}function arrayItem(value,index){try{if(!Array.isArray(value))return;const descriptor=Object.getOwnPropertyDescriptor(value,String(index));return descriptor&&"value"in descriptor?descriptor.value:void 0}catch{return}}function boundedString(value,maxLength){return typeof value=="string"?value.slice(0,maxLength):void 0}function normalizeTourTarget(value){if(typeof value=="string"){const selector=value.slice(0,MAX_TARGET_SELECTOR_LENGTH);return selector||void 0}if(typeof value=="function")return value;try{return isHtmlElement(value)?value:void 0}catch{return}}function snapshotTourSteps(value){const normalized=[],length=safeArrayLength(value);for(let index=0;index<length;index+=1){const candidate=arrayItem(value,index);if(!isCrossRealmPlainRecord(candidate))continue;const stepId=boundedString(ownDataValue(candidate,"stepId"),MAX_STEP_ID_LENGTH),target=normalizeTourTarget(ownDataValue(candidate,"target")),heading=boundedString(ownDataValue(candidate,"heading"),MAX_HEADING_LENGTH);if(!stepId||stepId!==stepId.trim()||!target||heading===void 0)continue;const content=boundedString(ownDataValue(candidate,"content"),MAX_CONTENT_LENGTH),rawPlacement=ownDataValue(candidate,"placement"),placement=TOUR_PLACEMENTS.has(rawPlacement)?rawPlacement:void 0,rawPadding=ownDataValue(candidate,"spotlightPadding"),spotlightPadding=typeof rawPadding=="number"&&Number.isFinite(rawPadding)?finiteRange(rawPadding,DEFAULT_SPOTLIGHT_PADDING,0,MAX_STEP_SPOTLIGHT_PADDING):void 0,rawInteractive=ownDataValue(candidate,"interactiveTarget"),interactiveTarget=typeof rawInteractive=="boolean"?rawInteractive:void 0,rawHidePrevious=ownDataValue(candidate,"hidePrevious"),hidePrevious=typeof rawHidePrevious=="boolean"?rawHidePrevious:void 0;normalized.push(Object.freeze({stepId,target,heading,...content!==void 0?{content}:{},...placement!==void 0?{placement}:{},...spotlightPadding!==void 0?{spotlightPadding}:{},...interactiveTarget!==void 0?{interactiveTarget}:{},...hidePrevious!==void 0?{hidePrevious}:{}}))}return Object.freeze(normalized)}class LyraTour extends LyraElement{constructor(){super(...arguments),this._open=!1,this._steps=Object.freeze([]),this.activeIndex=0,this.placement="bottom",this.distance=DEFAULT_DISTANCE,this.spotlightPadding=DEFAULT_SPOTLIGHT_PADDING,this.lightDismiss=!1,this.withoutProgress=!1,this.accessibleLabel=null,this.unanchored=!1,this.hasSlotContent=!1,this.spotlightPositioned=!1,this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlay?.isTopmost()&&this.end("escape")},onUnexpectedClose:()=>{this.end("escape"),this.open&&this.nativeModal.show()}}),this.activeTargetSnapshot=null,this.focusReturnTarget=null,this.maskId=nextId("tour-mask"),this.headingId=nextId("tour-heading"),this.bodyId=nextId("tour-body"),this.progressTextId=nextId("tour-progress-text"),this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onDefaultSlotChange=e=>{this.hasSlotContent=hasRealContent(e.target.assignedNodes({flatten:!0}))},this.onInteractiveScopeKeyDown=event=>{if(event.key!=="Tab"||event.defaultPrevented||!this.open||!this.overlay?.isTopmost())return;const popover=this.renderRoot.querySelector('[part="popover"]');if(!popover)return;const target=this.interactiveKeyboardTarget;if(!target)return;const panelFocusable=collectFocusableElements(popover),targetFocusable=collectFocusableElements(target);if(panelFocusable.length===0&&targetFocusable.length===0){event.preventDefault(),popover.focus();return}const active=deepActiveElement(this.ownerDocument),panelIndex=panelFocusable.findIndex(candidate=>active===candidate||composedContains(candidate,active)),targetIndex=targetFocusable.findIndex(candidate=>active===candidate||composedContains(candidate,active)),destination=panelIndex>=0?event.shiftKey&&panelIndex===0?targetFocusable.at(-1)??panelFocusable.at(-1):!event.shiftKey&&panelIndex===panelFocusable.length-1?targetFocusable[0]??panelFocusable[0]:void 0:targetIndex>=0?event.shiftKey&&targetIndex===0?panelFocusable.at(-1)??targetFocusable.at(-1):!event.shiftKey&&targetIndex===targetFocusable.length-1?panelFocusable[0]??targetFocusable[0]:void 0:active===popover&&!event.shiftKey?void 0:event.shiftKey?targetFocusable.at(-1)??panelFocusable.at(-1):panelFocusable[0]??targetFocusable[0];destination&&(event.preventDefault(),destination.focus())},this.onPopoverKeyDown=event=>{if(event.defaultPrevented||this.ownsDirectionalKeys(event))return;const rtl=this.effectiveDirection==="rtl",forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey&&(event.preventDefault(),this.back())}}static{this.defaultStrings={...super.defaultStrings,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous,tourDone:LYRA_DEFAULT_tourDone,tourSkip:LYRA_DEFAULT_tourSkip,tourStepOf:LYRA_DEFAULT_tourStepOf}}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}static{this.properties={steps:{attribute:!1,noAccessor:!0}}}get open(){return this._open}set open(next){const normalized=!!next;if(normalized!==this._open){if(!this.hasUpdated){this.commitOpen(normalized);return}normalized?this.start(this.activeIndex):this.end("api"),this._open!==normalized&&this.toggleAttribute("open",this._open)}}commitOpen(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}get steps(){return this._steps}set steps(next){const previous=this._steps;this._steps=snapshotTourSteps(next),this.requestUpdate("steps",previous)}willUpdate(changed){if(super.willUpdate(changed),changed.has("activeIndex")||changed.has("steps")){const maxIndex=Math.max(0,this.steps.length-1),normalizedIndex=finiteInteger(this.activeIndex,0,0,maxIndex);normalizedIndex!==this.activeIndex&&(this.activeIndex=normalizedIndex)}if(this.hasUpdated||(this.hasSlotContent=hasRealContent(this.childNodes)),this.open&&(changed.has("open")||changed.has("activeIndex")||changed.has("steps"))){const interactive=!!this.steps[this.activeIndex]?.interactiveTarget;interactive&&this.nativeModal.hide(),this.nativeModal.prepare(!interactive)}if(this.open&&this.steps.length===0)this.commitOpen(!1),this.deactivateOverlayInternal(),this.hasUpdated&&this.emit("lr-tour-end",{reason:"unavailable"});else if(changed.has("open"))if(this.open){const active=deepActiveElement(this.ownerDocument);this.focusReturnTarget=isHtmlElement(active)?active:null,this.activateOverlayInternal()}else this.deactivateOverlayInternal();if(this.open&&(changed.has("open")||changed.has("activeIndex")||changed.has("steps"))){const step=this.steps[this.activeIndex];this.activeTargetSnapshot=step?this.resolveTarget(step):null,this.unanchored=step?!this.activeTargetSnapshot:!1}this.open&&(changed.has("open")||changed.has("activeIndex")||changed.has("steps")||changed.has("placement")||changed.has("distance")||changed.has("spotlightPadding"))&&(this.spotlightPositioned=!1)}updated(changed){super.updated(changed);const activationChanged=changed.has("open")||changed.has("activeIndex")||changed.has("steps"),geometryChanged=changed.has("placement")||changed.has("distance")||changed.has("spotlightPadding");if(this.open&&(activationChanged||geometryChanged)){const preserveInteractiveTargetFocus=changed.has("steps")&&this.canPreserveInteractiveTargetFocus(),overlayChanged=this.activateOverlayInternal();this.nativeModal.show();const shouldFocus=changed.has("open")||changed.has("activeIndex")||overlayChanged||changed.has("steps")&&!preserveInteractiveTargetFocus,placement=this.activateStep({scroll:activationChanged,announceMissing:activationChanged});shouldFocus&&this.focusAfterPlacement(placement)}}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.open&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlayInternal(),queueMicrotask(async()=>{if(!this.isConnected||!this.open)return;const step=this.steps[this.activeIndex];if(this.activeTargetSnapshot=step?this.resolveTarget(step):null,this.unanchored=step?!this.activeTargetSnapshot:!1,await this.updateComplete,!this.isConnected||!this.open)return;this.nativeModal.show();const placement=this.activateStep({scroll:!0,announceMissing:!0});this.focusAfterPlacement(placement)}))}disconnectedCallback(){super.disconnectedCallback(),this.disposePositioning(),this.nativeModal.hide(),this.overlay?.suspend(),cancelDeferredFocusReturn(this),this.open&&queueMicrotask(()=>{!this.isConnected&&this.open&&(this.commitOpen(!1),this.emit("lr-tour-end",{reason:"unmount"}))})}start(index=0){this.steps.length!==0&&(this.activeIndex=this.clampIndex(index),this.commitOpen(!0),this.emit("lr-tour-start",Object.freeze({index:this.activeIndex})))}next(){const total=this.steps.length;if(total!==0){if(this.activeIndex>=total-1){this.end("completed");return}this.transitionTo(this.activeIndex+1,"next")}}back(){this.activeIndex<=0||this.transitionTo(this.activeIndex-1,"back")}goToStep(index){if(this.steps.length===0)return;const clamped=this.clampIndex(index);clamped!==this.activeIndex&&this.transitionTo(clamped,"goto")}skip(){this.end("skip")}end(reason="api"){!this.open||this.emit("lr-tour-end-request",{reason},{cancelable:!0}).defaultPrevented||(this.commitOpen(!1),this.emit("lr-tour-end",{reason}))}clampIndex(index){const total=this.steps.length;return total===0?0:finiteInteger(index,0,0,total-1)}transitionTo(index,via){const previousIndex=this.activeIndex,step=this.steps[index];!step||this.emit("lr-tour-step-change-request",Object.freeze({index,previousIndex,step,via}),{cancelable:!0}).defaultPrevented||(this.activeIndex=index)}resolveTarget(step){try{const{target}=step,resolved=typeof target=="string"?this.ownerDocument.querySelector(target):typeof target=="function"?target():target;return isHtmlElement(resolved)&&resolved.isConnected&&resolved.ownerDocument===this.ownerDocument?resolved:null}catch{return null}}canPreserveInteractiveTargetFocus(){const previousTarget=this.interactiveKeyboardTarget,step=this.steps[this.activeIndex];return!previousTarget?.isConnected||!step?.interactiveTarget?!1:this.activeTargetSnapshot===previousTarget&&composedContains(previousTarget,deepActiveElement(this.ownerDocument))}activateStep(options){this.disposePositioning();const step=this.steps[this.activeIndex];if(!step)return;this.escapeContainingBlock();const target=this.activeTargetSnapshot;if(!target?.isConnected){options.announceMissing&&this.emit("lr-tour-target-missing",Object.freeze({index:this.activeIndex,step}));return}const popover=this.renderRoot.querySelector('[part="popover"]');if(!popover)return;if(options.scroll){const reducedMotion=!target.ownerDocument.defaultView||prefersReducedMotion(this);target.scrollIntoView({block:"center",inline:"nearest",behavior:reducedMotion?"auto":"smooth"})}const placement=rtlAwarePlacement(step.placement??this.placement,this);this.placeCleanup=place(target,popover,{placement,offset:finiteNumber(this.distance,DEFAULT_DISTANCE),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});const interactive=!!step.interactiveTarget;return interactive&&(this.interactiveKeyboardTarget=target,this.interactiveKeyboardDocument=target.ownerDocument,this.interactiveKeyboardDocument.addEventListener("keydown",this.onInteractiveScopeKeyDown,!0)),this.spotlightCleanup=trackRect(target,rect=>this.paintSpotlight(rect,this.spotlightPaddingPx(step),interactive)),this.placeCleanup}spotlightPaddingPx(step){const value=step.spotlightPadding??this.spotlightPadding,px=typeof value=="string"?resolveCssLength(value,{host:this})??Number.NaN:value;return finiteRange(px,DEFAULT_SPOTLIGHT_PADDING,0)}focusAfterPlacement(placement){if(!placement){this.overlay?.focusInitial();return}placement.ready.then(positioned=>{if(!(this.placeCleanup!==placement||!this.open||!this.isConnected)){if(positioned){this.overlay?.focusInitial();return}this.commitOpen(!1),this.deactivateOverlayInternal(),this.emit("lr-tour-end",{reason:"unavailable"})}})}paintSpotlight(rect,padding,interactive){const x=rect.left-padding,y=rect.top-padding,width=Math.max(0,rect.width+padding*2),height=Math.max(0,rect.height+padding*2),backdrop=this.renderRoot.querySelector('[part="backdrop"]'),cutout=this.renderRoot.querySelector('[part="backdrop"] .cutout'),spotlight=this.renderRoot.querySelector('[part="spotlight"]');cutout&&(cutout.setAttribute("x",String(x)),cutout.setAttribute("y",String(y)),cutout.setAttribute("width",String(width)),cutout.setAttribute("height",String(height))),spotlight&&(spotlight.style.left=`${x}px`,spotlight.style.top=`${y}px`,spotlight.style.width=`${width}px`,spotlight.style.height=`${height}px`,spotlight.hidden=!1),backdrop&&(backdrop.style.clipPath=interactive?keyholeClipPath(x,y,width,height):""),this.spotlightPositioned=!0}resetSpotlightGeometry(){this.spotlightPositioned=!1;const cutout=this.renderRoot?.querySelector('[part="backdrop"] .cutout'),spotlight=this.renderRoot?.querySelector('[part="spotlight"]'),backdrop=this.renderRoot?.querySelector('[part="backdrop"]');cutout&&(cutout.setAttribute("x","0"),cutout.setAttribute("y","0"),cutout.setAttribute("width","0"),cutout.setAttribute("height","0")),spotlight&&(spotlight.hidden=!0,spotlight.style.removeProperty("left"),spotlight.style.removeProperty("top"),spotlight.style.removeProperty("width"),spotlight.style.removeProperty("height")),backdrop?.style.removeProperty("clip-path")}escapeContainingBlock(){const target=this.activeTargetSnapshot;if(this.steps[this.activeIndex]?.interactiveTarget&&!needsTopLayerEscape(this)&&!(target&&hasTopLayerAncestor(target))){this.releaseContainingBlockEscape();return}if(promoteToTopLayer(this)&&!this.escapedInset){const previous=["top","right","bottom","left"].map(property2=>({property:property2,value:this.style.getPropertyValue(property2),priority:this.style.getPropertyPriority(property2)}));this.style.setProperty("inset","0"),this.escapedInset={previous,written:this.style.getPropertyValue("top")}}}releaseContainingBlockEscape(){releaseTopLayer(this);const inset=this.escapedInset;if(this.escapedInset=void 0,!!inset)for(const{property:property2,value,priority}of inset.previous)this.style.getPropertyValue(property2)!==inset.written||this.style.getPropertyPriority(property2)!==""||(this.style.removeProperty(property2),value&&this.style.setProperty(property2,value,priority))}disposePositioning(){this.placeCleanup?.(),this.placeCleanup=void 0,this.spotlightCleanup?.(),this.spotlightCleanup=void 0,this.resetSpotlightGeometry(),this.interactiveKeyboardDocument?.removeEventListener("keydown",this.onInteractiveScopeKeyDown,!0),this.interactiveKeyboardDocument=void 0,this.interactiveKeyboardTarget=void 0}activateOverlayInternal(){if(!this.isConnected)return!1;const interactive=!!this.steps[this.activeIndex]?.interactiveTarget;return this.overlay?.isActive()&&this.overlayInteractive===interactive?!1:(this.overlay?.isActive()&&(this.overlay.deactivate({restoreFocus:!1}),this.overlay=void 0),this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="popover"]')??null,onEscape:()=>this.end("escape"),onBackdrop:()=>this.end("skip"),preferredInitialFocus:()=>this.renderRoot.querySelector('[part="popover"]'),restoreFocusTo:()=>{const target=this.focusReturnTarget;return target?.isConnected&&target.ownerDocument===this.ownerDocument?target:null},modal:!interactive,trapFocus:!interactive,lockScroll:!0,suspendWhenUnrendered:!0,deferredReturn:()=>{const trigger=this.focusReturnTarget;if(!(!trigger||!this.isConnected))return{candidates:()=>[trigger.isConnected&&trigger.ownerDocument===this.ownerDocument?trigger:null],isCurrent:()=>!this.open}}}),this.overlayInteractive=interactive,!0)}deactivateOverlayInternal(){this.disposePositioning(),this.releaseContainingBlockEscape(),this.activeTargetSnapshot=null,this.nativeModal.hide(),this.overlay?.deactivate(),this.overlay=void 0,this.overlayInteractive=void 0,this.focusReturnTarget=null}ownsDirectionalKeys(event){return keyEventOwnedByInnerControl(event,{container:this})}formatProgressNumber(value){try{return getNumberFormat(this.effectiveLocale).format(value)}catch{return String(value)}}render(){const step=this.open?this.steps[this.activeIndex]:void 0;if(!step)return html``;const total=this.steps.length,isLastStep=this.activeIndex>=total-1,headingName=(step.heading??"").trim(),authoredName=this.accessibleLabel,useHeading=authoredName===null&&headingName.length>0,suppliedName=authoredName?.trim()??"",fallbackName=this.localize("tourStepOf",void 0,{current:this.formatProgressNumber(this.activeIndex+1),total:this.formatProgressNumber(total)}),panelName=authoredName===null?fallbackName:suppliedName,describedBy=[this.hasSlotContent||!!step.content?this.bodyId:"",this.withoutProgress?"":this.progressTextId].filter(id=>id.length>0).join(" ");return this.nativeModal.render(html`
+import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{isCrossRealmPlainRecord}from"../../../internal/object-guards.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,svg,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{cancelDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{nextId,hasRealContent}from"../../../internal/a11y.js";import{deferredPlaceReady as place,deferredTrackRect as trackRect}from"../../../internal/anchored-overlay-runtime.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteInteger,finiteNumber,finiteRange}from"../../../internal/numbers.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{keyEventOwnedByInnerControl}from"../../../internal/hotkey.js";import{hasTopLayerAncestor,needsTopLayerEscape,promoteToTopLayer,releaseTopLayer}from"../../../internal/top-layer-escape.js";import{styles}from"./tour.styles.js";import{resolveCssLength}from"../../../internal/css-length.js";const DEFAULT_DISTANCE=12,DEFAULT_SPOTLIGHT_PADDING=4,MAX_TOUR_STEPS=256,MAX_STEP_ID_LENGTH=256;import{CSS_NUMBER_SOURCE}from"../../../internal/css-number.js";import{LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings/shared.generated.js";import{LYRA_DEFAULT_tourDone,LYRA_DEFAULT_tourSkip,LYRA_DEFAULT_tourStepOf}from"../../../internal/default-strings/utility.generated.js";const MAX_TARGET_SELECTOR_LENGTH=8192,MAX_HEADING_LENGTH=4096,MAX_CONTENT_LENGTH=65536,MAX_STEP_SPOTLIGHT_PADDING=1e4,SPOTLIGHT_PADDING_LENGTH=new RegExp(`^${CSS_NUMBER_SOURCE}(?:px|rem|em|vw|vh)$`,"i"),spotlightPaddingConverter={fromAttribute:value=>{if(value===null)return value;const trimmed=value.trim();return SPOTLIGHT_PADDING_LENGTH.test(trimmed)?trimmed:Number(value)}},TOUR_PLACEMENTS=new Set(["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"]);function keyholeClipPath(x,y,width,height){const right=x+width,bottom=y+height;return`polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${x}px ${y}px, ${x}px ${bottom}px, ${right}px ${bottom}px, ${right}px ${y}px, ${x}px ${y}px, 0% 0%)`}function ownDataValue(record,key){try{const descriptor=Object.getOwnPropertyDescriptor(record,key);return descriptor&&"value"in descriptor?descriptor.value:void 0}catch{return}}function safeArrayLength(value){try{if(!Array.isArray(value))return 0;const descriptor=Object.getOwnPropertyDescriptor(value,"length"),length=descriptor&&"value"in descriptor?descriptor.value:0;return typeof length=="number"&&Number.isFinite(length)?Math.min(MAX_TOUR_STEPS,Math.max(0,Math.floor(length))):0}catch{return 0}}function arrayItem(value,index){try{if(!Array.isArray(value))return;const descriptor=Object.getOwnPropertyDescriptor(value,String(index));return descriptor&&"value"in descriptor?descriptor.value:void 0}catch{return}}function boundedString(value,maxLength){return typeof value=="string"?value.slice(0,maxLength):void 0}function normalizeTourTarget(value){if(typeof value=="string"){const selector=value.slice(0,MAX_TARGET_SELECTOR_LENGTH);return selector||void 0}if(typeof value=="function")return value;try{return isHtmlElement(value)?value:void 0}catch{return}}function snapshotTourSteps(value){const normalized=[],length=safeArrayLength(value);for(let index=0;index<length;index+=1){const candidate=arrayItem(value,index);if(!isCrossRealmPlainRecord(candidate))continue;const stepId=boundedString(ownDataValue(candidate,"stepId"),MAX_STEP_ID_LENGTH),target=normalizeTourTarget(ownDataValue(candidate,"target")),heading=boundedString(ownDataValue(candidate,"heading"),MAX_HEADING_LENGTH);if(!stepId||stepId!==stepId.trim()||!target||heading===void 0)continue;const content=boundedString(ownDataValue(candidate,"content"),MAX_CONTENT_LENGTH),rawPlacement=ownDataValue(candidate,"placement"),placement=TOUR_PLACEMENTS.has(rawPlacement)?rawPlacement:void 0,rawPadding=ownDataValue(candidate,"spotlightPadding"),spotlightPadding=typeof rawPadding=="number"&&Number.isFinite(rawPadding)?finiteRange(rawPadding,DEFAULT_SPOTLIGHT_PADDING,0,MAX_STEP_SPOTLIGHT_PADDING):void 0,rawInteractive=ownDataValue(candidate,"interactiveTarget"),interactiveTarget=typeof rawInteractive=="boolean"?rawInteractive:void 0,rawHidePrevious=ownDataValue(candidate,"hidePrevious"),hidePrevious=typeof rawHidePrevious=="boolean"?rawHidePrevious:void 0;normalized.push(Object.freeze({stepId,target,heading,...content!==void 0?{content}:{},...placement!==void 0?{placement}:{},...spotlightPadding!==void 0?{spotlightPadding}:{},...interactiveTarget!==void 0?{interactiveTarget}:{},...hidePrevious!==void 0?{hidePrevious}:{}}))}return Object.freeze(normalized)}class LyraTour extends LyraElement{constructor(){super(...arguments),this._open=!1,this._steps=Object.freeze([]),this.activeIndex=0,this.placement="bottom",this.distance=DEFAULT_DISTANCE,this.spotlightPadding=DEFAULT_SPOTLIGHT_PADDING,this.lightDismiss=!1,this.withoutProgress=!1,this.accessibleLabel=null,this.unanchored=!1,this.hasSlotContent=!1,this.spotlightPositioned=!1,this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlay?.isTopmost()&&this.end("escape")},onUnexpectedClose:()=>{this.end("escape"),this.open&&this.nativeModal.show()}}),this.activeTargetSnapshot=null,this.focusReturnTarget=null,this.maskId=nextId("tour-mask"),this.headingId=nextId("tour-heading"),this.bodyId=nextId("tour-body"),this.progressTextId=nextId("tour-progress-text"),this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onDefaultSlotChange=e=>{this.hasSlotContent=hasRealContent(e.target.assignedNodes({flatten:!0}))},this.onInteractiveScopeKeyDown=event=>{if(event.key!=="Tab"||event.defaultPrevented||!this.open||!this.overlay?.isTopmost())return;const popover=this.renderRoot.querySelector('[part="popover"]');if(!popover)return;const target=this.interactiveKeyboardTarget;if(!target)return;const panelFocusable=collectFocusableElements(popover),targetFocusable=collectFocusableElements(target);if(panelFocusable.length===0&&targetFocusable.length===0){event.preventDefault(),popover.focus();return}const active=deepActiveElement(this.ownerDocument),panelIndex=panelFocusable.findIndex(candidate=>active===candidate||composedContains(candidate,active)),targetIndex=targetFocusable.findIndex(candidate=>active===candidate||composedContains(candidate,active)),destination=panelIndex>=0?event.shiftKey&&panelIndex===0?targetFocusable.at(-1)??panelFocusable.at(-1):!event.shiftKey&&panelIndex===panelFocusable.length-1?targetFocusable[0]??panelFocusable[0]:void 0:targetIndex>=0?event.shiftKey&&targetIndex===0?panelFocusable.at(-1)??targetFocusable.at(-1):!event.shiftKey&&targetIndex===targetFocusable.length-1?panelFocusable[0]??targetFocusable[0]:void 0:active===popover&&!event.shiftKey?void 0:event.shiftKey?targetFocusable.at(-1)??panelFocusable.at(-1):panelFocusable[0]??targetFocusable[0];destination&&(event.preventDefault(),destination.focus())},this.onPopoverKeyDown=event=>{if(event.defaultPrevented||this.ownsDirectionalKeys(event))return;const rtl=this.effectiveDirection==="rtl",forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey&&(event.preventDefault(),this.back())}}static{this.defaultStrings={...super.defaultStrings,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous,tourDone:LYRA_DEFAULT_tourDone,tourSkip:LYRA_DEFAULT_tourSkip,tourStepOf:LYRA_DEFAULT_tourStepOf}}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}static{this.properties={steps:{attribute:!1,noAccessor:!0}}}get open(){return this._open}set open(next){const normalized=!!next;if(normalized!==this._open){if(!this.hasUpdated){this.commitOpen(normalized);return}normalized?this.start(this.activeIndex):this.end("api"),this._open!==normalized&&this.toggleAttribute("open",this._open)}}commitOpen(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}get steps(){return this._steps}set steps(next){const previous=this._steps;this._steps=snapshotTourSteps(next),this.requestUpdate("steps",previous)}willUpdate(changed){if(super.willUpdate(changed),changed.has("activeIndex")||changed.has("steps")){const maxIndex=Math.max(0,this.steps.length-1),normalizedIndex=finiteInteger(this.activeIndex,0,0,maxIndex);normalizedIndex!==this.activeIndex&&(this.activeIndex=normalizedIndex)}if(this.hasUpdated||(this.hasSlotContent=hasRealContent(this.childNodes)),this.open&&(changed.has("open")||changed.has("activeIndex")||changed.has("steps"))){const interactive=!!this.steps[this.activeIndex]?.interactiveTarget;interactive&&this.nativeModal.hide(),this.nativeModal.prepare(!interactive)}if(this.open&&this.steps.length===0)this.commitOpen(!1),this.deactivateOverlayInternal(),this.hasUpdated&&this.emit("lr-tour-end",{reason:"unavailable"});else if(changed.has("open"))if(this.open){const active=deepActiveElement(this.ownerDocument);this.focusReturnTarget=isHtmlElement(active)?active:null,this.activateOverlayInternal()}else this.deactivateOverlayInternal();if(this.open&&(changed.has("open")||changed.has("activeIndex")||changed.has("steps"))){const step=this.steps[this.activeIndex];this.activeTargetSnapshot=step?this.resolveTarget(step):null,this.unanchored=step?!this.activeTargetSnapshot:!1}this.open&&(changed.has("open")||changed.has("activeIndex")||changed.has("steps")||changed.has("placement")||changed.has("distance")||changed.has("spotlightPadding"))&&(this.spotlightPositioned=!1)}updated(changed){super.updated(changed);const activationChanged=changed.has("open")||changed.has("activeIndex")||changed.has("steps"),geometryChanged=changed.has("placement")||changed.has("distance")||changed.has("spotlightPadding");if(this.open&&(activationChanged||geometryChanged)){const preserveInteractiveTargetFocus=changed.has("steps")&&this.canPreserveInteractiveTargetFocus(),overlayChanged=this.activateOverlayInternal();this.nativeModal.show();const shouldFocus=changed.has("open")||changed.has("activeIndex")||overlayChanged||changed.has("steps")&&!preserveInteractiveTargetFocus,placement=this.activateStep({scroll:activationChanged,announceMissing:activationChanged});shouldFocus&&this.focusAfterPlacement(placement)}}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.open&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlayInternal(),queueMicrotask(async()=>{if(!this.isConnected||!this.open)return;const step=this.steps[this.activeIndex];if(this.activeTargetSnapshot=step?this.resolveTarget(step):null,this.unanchored=step?!this.activeTargetSnapshot:!1,await this.updateComplete,!this.isConnected||!this.open)return;this.nativeModal.show();const placement=this.activateStep({scroll:!0,announceMissing:!0});this.focusAfterPlacement(placement)}))}disconnectedCallback(){super.disconnectedCallback(),this.disposePositioning(),this.nativeModal.hide(),this.overlay?.suspend(),cancelDeferredFocusReturn(this),this.open&&queueMicrotask(()=>{!this.isConnected&&this.open&&(this.commitOpen(!1),this.emit("lr-tour-end",{reason:"unmount"}))})}start(index=0){this.steps.length!==0&&(this.activeIndex=this.clampIndex(index),this.commitOpen(!0),this.emit("lr-tour-start",Object.freeze({index:this.activeIndex})))}next(){const total=this.steps.length;if(total!==0){if(this.activeIndex>=total-1){this.end("completed");return}this.transitionTo(this.activeIndex+1,"next")}}back(){this.activeIndex<=0||this.transitionTo(this.activeIndex-1,"back")}goToStep(index){if(this.steps.length===0)return;const clamped=this.clampIndex(index);clamped!==this.activeIndex&&this.transitionTo(clamped,"goto")}skip(){this.end("skip")}end(reason="api"){!this.open||this.emit("lr-tour-end-request",{reason},{cancelable:!0}).defaultPrevented||(this.commitOpen(!1),this.emit("lr-tour-end",{reason}))}clampIndex(index){const total=this.steps.length;return total===0?0:finiteInteger(index,0,0,total-1)}transitionTo(index,via){const previousIndex=this.activeIndex,step=this.steps[index];!step||this.emit("lr-tour-step-change-request",Object.freeze({index,previousIndex,step,via}),{cancelable:!0}).defaultPrevented||(this.activeIndex=index)}resolveTarget(step){try{const{target}=step,resolved=typeof target=="string"?this.ownerDocument.querySelector(target):typeof target=="function"?target():target;return isHtmlElement(resolved)&&resolved.isConnected&&resolved.ownerDocument===this.ownerDocument?resolved:null}catch{return null}}canPreserveInteractiveTargetFocus(){const previousTarget=this.interactiveKeyboardTarget,step=this.steps[this.activeIndex];return!previousTarget?.isConnected||!step?.interactiveTarget?!1:this.activeTargetSnapshot===previousTarget&&composedContains(previousTarget,deepActiveElement(this.ownerDocument))}activateStep(options){this.disposePositioning();const step=this.steps[this.activeIndex];if(!step)return;this.escapeContainingBlock();const target=this.activeTargetSnapshot;if(!target?.isConnected){options.announceMissing&&this.emit("lr-tour-target-missing",Object.freeze({index:this.activeIndex,step}));return}const popover=this.renderRoot.querySelector('[part="popover"]');if(!popover)return;if(options.scroll){const reducedMotion=!target.ownerDocument.defaultView||prefersReducedMotion(this);target.scrollIntoView({block:"center",inline:"nearest",behavior:reducedMotion?"auto":"smooth"})}const placement=rtlAwarePlacement(step.placement??this.placement,this);this.placeCleanup=place(target,popover,{placement,offset:finiteNumber(this.distance,DEFAULT_DISTANCE),strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});const interactive=!!step.interactiveTarget;return interactive&&(this.interactiveKeyboardTarget=target,this.interactiveKeyboardDocument=target.ownerDocument,this.interactiveKeyboardDocument.addEventListener("keydown",this.onInteractiveScopeKeyDown,!0)),this.spotlightCleanup=trackRect(target,rect=>this.paintSpotlight(rect,this.spotlightPaddingPx(step),interactive)),this.placeCleanup}spotlightPaddingPx(step){const value=step.spotlightPadding??this.spotlightPadding,px=typeof value=="string"?resolveCssLength(value,{host:this})??Number.NaN:value;return finiteRange(px,DEFAULT_SPOTLIGHT_PADDING,0)}focusAfterPlacement(placement){if(!placement){this.overlay?.focusInitial();return}placement.ready.then(positioned=>{if(!(this.placeCleanup!==placement||!this.open||!this.isConnected)){if(positioned){this.overlay?.focusInitial();return}this.commitOpen(!1),this.deactivateOverlayInternal(),this.emit("lr-tour-end",{reason:"unavailable"})}})}paintSpotlight(rect,padding,interactive){const x=rect.left-padding,y=rect.top-padding,width=Math.max(0,rect.width+padding*2),height=Math.max(0,rect.height+padding*2),backdrop=this.renderRoot.querySelector('[part="backdrop"]'),cutout=backdrop?.querySelector(".cutout"),spotlight=this.renderRoot.querySelector('[part="spotlight"]');cutout&&(cutout.setAttribute("x",String(x)),cutout.setAttribute("y",String(y)),cutout.setAttribute("width",String(width)),cutout.setAttribute("height",String(height))),spotlight&&(spotlight.style.left=`${x}px`,spotlight.style.top=`${y}px`,spotlight.style.width=`${width}px`,spotlight.style.height=`${height}px`,spotlight.hidden=!1),backdrop&&(backdrop.style.clipPath=interactive?keyholeClipPath(x,y,width,height):""),this.spotlightPositioned=!0}resetSpotlightGeometry(){this.spotlightPositioned=!1;const spotlight=this.renderRoot?.querySelector('[part="spotlight"]'),backdrop=this.renderRoot?.querySelector('[part="backdrop"]'),cutout=backdrop?.querySelector(".cutout");if(cutout)for(const attribute of["x","y","width","height"])cutout.setAttribute(attribute,"0");if(spotlight){spotlight.hidden=!0;for(const property2 of["left","top","width","height"])spotlight.style.removeProperty(property2)}backdrop?.style.removeProperty("clip-path")}escapeContainingBlock(){const target=this.activeTargetSnapshot;if(this.steps[this.activeIndex]?.interactiveTarget&&!needsTopLayerEscape(this)&&!(target&&hasTopLayerAncestor(target))){this.releaseContainingBlockEscape();return}if(promoteToTopLayer(this)&&!this.escapedInset){const previous=["top","right","bottom","left"].map(property2=>({property:property2,value:this.style.getPropertyValue(property2),priority:this.style.getPropertyPriority(property2)}));this.style.setProperty("inset","0"),this.escapedInset={previous,written:this.style.getPropertyValue("top")}}}releaseContainingBlockEscape(){releaseTopLayer(this);const inset=this.escapedInset;if(this.escapedInset=void 0,!!inset)for(const{property:property2,value,priority}of inset.previous)this.style.getPropertyValue(property2)!==inset.written||this.style.getPropertyPriority(property2)!==""||(this.style.removeProperty(property2),value&&this.style.setProperty(property2,value,priority))}disposePositioning(){this.placeCleanup?.(),this.placeCleanup=void 0,this.spotlightCleanup?.(),this.spotlightCleanup=void 0,this.resetSpotlightGeometry(),this.interactiveKeyboardDocument?.removeEventListener("keydown",this.onInteractiveScopeKeyDown,!0),this.interactiveKeyboardDocument=void 0,this.interactiveKeyboardTarget=void 0}activateOverlayInternal(){if(!this.isConnected)return!1;const interactive=!!this.steps[this.activeIndex]?.interactiveTarget;return this.overlay?.isActive()&&this.overlayInteractive===interactive?!1:(this.overlay?.isActive()&&(this.overlay.deactivate({restoreFocus:!1}),this.overlay=void 0),this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="popover"]')??null,onEscape:()=>this.end("escape"),onBackdrop:()=>this.end("skip"),preferredInitialFocus:()=>this.renderRoot.querySelector('[part="popover"]'),restoreFocusTo:()=>{const target=this.focusReturnTarget;return target?.isConnected&&target.ownerDocument===this.ownerDocument?target:null},modal:!interactive,trapFocus:!interactive,lockScroll:!0,suspendWhenUnrendered:!0,deferredReturn:()=>{const trigger=this.focusReturnTarget;if(!(!trigger||!this.isConnected))return{candidates:()=>[trigger.isConnected&&trigger.ownerDocument===this.ownerDocument?trigger:null],isCurrent:()=>!this.open}}}),this.overlayInteractive=interactive,!0)}deactivateOverlayInternal(){this.disposePositioning(),this.releaseContainingBlockEscape(),this.activeTargetSnapshot=null,this.nativeModal.hide(),this.overlay?.deactivate(),this.overlay=void 0,this.overlayInteractive=void 0,this.focusReturnTarget=null}ownsDirectionalKeys(event){return keyEventOwnedByInnerControl(event,{container:this})}formatProgressNumber(value){try{return getNumberFormat(this.effectiveLocale).format(value)}catch{return String(value)}}render(){const step=this.open?this.steps[this.activeIndex]:void 0;if(!step)return html``;const total=this.steps.length,isLastStep=this.activeIndex>=total-1,headingName=(step.heading??"").trim(),authoredName=this.accessibleLabel,useHeading=authoredName===null&&headingName.length>0,suppliedName=authoredName?.trim()??"",fallbackName=this.localize("tourStepOf",void 0,{current:this.formatProgressNumber(this.activeIndex+1),total:this.formatProgressNumber(total)}),panelName=authoredName===null?fallbackName:suppliedName,describedBy=[this.hasSlotContent||!!step.content?this.bodyId:"",this.withoutProgress?"":this.progressTextId].filter(id=>id.length>0).join(" ");return this.nativeModal.render(html`
       <svg part="backdrop" aria-hidden="true" @click=${this.onBackdropClick}>
-        ${this.unanchored?html`<rect class="scrim" x="0" y="0" width="100%" height="100%"></rect>`:html`
+        ${this.unanchored?nothing:svg`
               <defs>
                 <mask id=${this.maskId}>
                   <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
                   <rect class="cutout" x="0" y="0" width="0" height="0" fill="black"></rect>
                 </mask>
               </defs>
-              <rect class="scrim" x="0" y="0" width="100%" height="100%" mask="url(#${this.maskId})"></rect>
             `}
+        <rect class="scrim" x="0" y="0" width="100%" height="100%" mask=${this.unanchored?nothing:`url(#${this.maskId})`}></rect>
       </svg>
       <div
         part="spotlight"
@@ -34,7 +34,7 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
             ${this.withoutProgress?nothing:html`
                   <div part="progress">
                     <span part="progress-text" id=${this.progressTextId}>
-                      ${this.localize("tourStepOf",void 0,{current:this.formatProgressNumber(this.activeIndex+1),total:this.formatProgressNumber(total)})}
+                      ${fallbackName}
                     </span>
                     <span class="dots">
                       ${this.steps.map((_s,index)=>html`<span

package/dist/internal/dev-mode-attribute-warning.development.js

@@ -1 +1 @@
-import{devWarnOnce,litDevWarnings}from"./dev-warning.js";import{DOCUMENT_TOKEN_SCOPE_SELECTOR,LAYER_CONSUMED_INPUTS}from"./document-tokens.generated.js";import{foreignLyraTokenLayer,hasLyraTokens,lyraTokenLayerArrivedLate}from"./document-tokens.js";import{flattenedParentElement}from"./composed-tree.js";import{devWarn,devWarnOnce as devWarnOnce2,deprecationWarningKey,warnDeprecatedUsage}from"./dev-warning.js";const GLOBAL_ATTRIBUTE_EXEMPTIONS=new Set(["id","hidden","inert","tabindex","title","role","part","exportparts","is","popover","translate","spellcheck","autocapitalize","autofocus","contenteditable","draggable","enterkeyhint","inputmode","nonce","accesskey","itemid","itemprop","itemref","itemscope","itemtype"]),FRAMEWORK_ATTRIBUTE_EXACT=new Set(["ng-version"]),FRAMEWORK_ATTRIBUTE_PREFIXES=["_ngcontent-","_nghost-","ng-reflect-"];function isFrameworkOwnedAttribute(name){return FRAMEWORK_ATTRIBUTE_EXACT.has(name)||FRAMEWORK_ATTRIBUTE_PREFIXES.some(prefix=>name.startsWith(prefix))}function isExemptAttribute(name){return name.startsWith("data-")||name.startsWith("aria-")||GLOBAL_ATTRIBUTE_EXEMPTIONS.has(name)||isFrameworkOwnedAttribute(name)}function levenshteinDistance(a,b){const rows=a.length+1,cols=b.length+1,distances=Array.from({length:rows},()=>new Array(cols).fill(0));for(let i=0;i<rows;i++)distances[i][0]=i;for(let j=0;j<cols;j++)distances[0][j]=j;for(let i=1;i<rows;i++)for(let j=1;j<cols;j++){const cost=a[i-1]===b[j-1]?0:1;distances[i][j]=Math.min(distances[i-1][j]+1,distances[i][j-1]+1,distances[i-1][j-1]+cost)}return distances[rows-1][cols-1]}const SUGGESTION_MAX_DISTANCE=3;function closestObservedAttribute(name,observed){let best,bestDistance=SUGGESTION_MAX_DISTANCE+1;for(const candidate of observed){const distance=levenshteinDistance(name,candidate);distance<bestDistance&&(bestDistance=distance,best=candidate)}return bestDistance<=SUGGESTION_MAX_DISTANCE?best:void 0}const attributeNamesByClass=new WeakMap;function attributeNamesFor(ctor){let names=attributeNamesByClass.get(ctor);if(!names){const observed=ctor.observedAttributes??[],known=ctor.knownUnobservedAttributes??[];names={observed,all:new Set([...observed,...known])},attributeNamesByClass.set(ctor,names)}return names}function warnUnknownAttributes(host,observedAttributes,knownUnobservedAttributes){const warnings=litDevWarnings();if(!warnings)return;const names=host.getAttributeNames();if(names.length===0)return;let observed,observedSet;if(observedAttributes===void 0&&knownUnobservedAttributes===void 0){const classNames=attributeNamesFor(host.constructor);observed=classNames.observed,observedSet=classNames.all}else observed=observedAttributes??host.constructor.observedAttributes??[],observedSet=new Set([...observed,...knownUnobservedAttributes??host.constructor.knownUnobservedAttributes??[]]);for(const name of names){if(observedSet.has(name)||isExemptAttribute(name))continue;const key=`lyra-unknown-attribute:${host.localName}:${name}`;if(warnings.has(key))continue;warnings.add(key);const suggestion=closestObservedAttribute(name,observed);console.warn(suggestion?`<${host.localName}>: unknown attribute '${name}' — did you mean '${suggestion}'?`:`<${host.localName}>: unknown attribute '${name}'`)}}const checkedScopeChains=new WeakSet,THEME_SCOPE_LIST=`:root,${DOCUMENT_TOKEN_SCOPE_SELECTOR}`,LAYER_INPUTS=new Set(LAYER_CONSUMED_INPUTS);function inlineLayerInputs(element){const style=element.style;if(!style||style.length===0)return[];const found=[];for(let index=0;index<style.length;index++){const name=style.item(index);LAYER_INPUTS.has(name)&&found.push(name)}return found}const layerVerifiedSinceCheckpoint=new WeakSet,glassShareChecked=new WeakSet,GLASS_SHARE="--lr-theme-surface-glass-dark-share";function checkGlassShare(doc){if(glassShareChecked.has(doc)||!doc.documentElement||!doc.defaultView)return;glassShareChecked.add(doc);const value=doc.defaultView.getComputedStyle(doc.documentElement).getPropertyValue(GLASS_SHARE).trim();value&&!CSS.supports("color",`color-mix(in srgb, red clamp(0%, ${value}, 100%), blue)`)&&devWarnOnce("lyra-style:glass-dark-share",`${GLASS_SHARE}: ${value} is not a percentage, so dark Glass chrome loses its fill; use a percentage such as 10% (the default).`)}function warnThemeScopeUsage(host){if(!litDevWarnings())return;host.getAttribute("data-lr-theme-scope")==="false"&&devWarnOnce("lyra-theme-scope:false-marker",`<${host.localName}>: data-lr-theme-scope="false" still marks a theme scope; omit the attribute (or bind it to null) to unmark the element.`);const doc=host.ownerDocument;doc.defaultView&&!layerVerifiedSinceCheckpoint.has(doc)&&(layerVerifiedSinceCheckpoint.add(doc),queueMicrotask(()=>layerVerifiedSinceCheckpoint.delete(doc)),checkGlassShare(doc),hasLyraTokens(doc)||devWarnOnce("lyra-theme-scope:layer-missing",`<${host.localName}>: the Lyra document token layer is not adopted in this document; link @aceshooting/lyra-ui/theme.css (or tokens-root.css) or call adoptLyraTokens(document).`)),lyraTokenLayerArrivedLate(doc)&&devWarnOnce("lyra-theme-scope:late-static-layer","theme.css (or tokens-root.css) was applied after Lyra registered its first element, so Lyra adopted its own copy of the token layer first and withdrew it later. Load the stylesheet before registering Lyra to avoid restyling the page twice.");const foreign=foreignLyraTokenLayer(doc);foreign&&devWarnOnce("lyra-theme-scope:foreign-layer",`A different Lyra token layer (${foreign}) was already present in this document; the later-adopted layer wins where values differ. Load one copy of @aceshooting/lyra-ui per page.`);for(let element=host;element&&!checkedScopeChains.has(element)&&(checkedScopeChains.add(element),!(typeof element.matches!="function"||element.matches(THEME_SCOPE_LIST)));element=flattenedParentElement(element)){const inputs=inlineLayerInputs(element);if(inputs.length){devWarnOnce("lyra-theme-scope:unscoped-input",`<${element.localName}> sets ${inputs.join(", ")} inline but is not a theme scope, so Lyra components below it keep the nearest scope's values. Add data-lr-theme-scope to the element.`);break}}}export{deprecationWarningKey,devWarn,devWarnOnce2 as devWarnOnce,warnDeprecatedUsage,warnThemeScopeUsage,warnUnknownAttributes};
+import{devWarnOnce,litDevWarnings}from"./dev-warning.js";import{DOCUMENT_TOKEN_SCOPE_SELECTOR,LAYER_CONSUMED_INPUTS}from"./document-tokens.generated.js";import{foreignLyraTokenLayer,hasLyraTokens,lyraTokenLayerArrivedLate}from"./document-tokens.js";import{flattenedParentElement}from"./composed-tree.js";import{devWarn,devWarnOnce as devWarnOnce2,deprecationWarningKey,warnDeprecatedUsage}from"./dev-warning.js";const GLOBAL_ATTRIBUTE_EXEMPTIONS=new Set(["id","hidden","inert","tabindex","title","role","part","exportparts","is","popover","translate","spellcheck","autocapitalize","autofocus","contenteditable","draggable","enterkeyhint","inputmode","nonce","accesskey","itemid","itemprop","itemref","itemscope","itemtype"]),FRAMEWORK_ATTRIBUTE_EXACT=new Set(["ng-version"]),FRAMEWORK_ATTRIBUTE_PREFIXES=["_ngcontent-","_nghost-","ng-reflect-"];function isFrameworkOwnedAttribute(name){return FRAMEWORK_ATTRIBUTE_EXACT.has(name)||FRAMEWORK_ATTRIBUTE_PREFIXES.some(prefix=>name.startsWith(prefix))}function isExemptAttribute(name){return name.startsWith("data-")||name.startsWith("aria-")||GLOBAL_ATTRIBUTE_EXEMPTIONS.has(name)||isFrameworkOwnedAttribute(name)}function levenshteinDistance(a,b){const rows=a.length+1,cols=b.length+1,distances=Array.from({length:rows},()=>new Array(cols).fill(0));for(let i=0;i<rows;i++)distances[i][0]=i;for(let j=0;j<cols;j++)distances[0][j]=j;for(let i=1;i<rows;i++)for(let j=1;j<cols;j++){const cost=a[i-1]===b[j-1]?0:1;distances[i][j]=Math.min(distances[i-1][j]+1,distances[i][j-1]+1,distances[i-1][j-1]+cost)}return distances[rows-1][cols-1]}const SUGGESTION_MAX_DISTANCE=3;function closestObservedAttribute(name,observed){let best,bestDistance=SUGGESTION_MAX_DISTANCE+1;for(const candidate of observed){const distance=levenshteinDistance(name,candidate);distance<bestDistance&&(bestDistance=distance,best=candidate)}return bestDistance<=SUGGESTION_MAX_DISTANCE?best:void 0}const attributeNamesByClass=new WeakMap;function attributeNamesFor(ctor){let names=attributeNamesByClass.get(ctor);if(!names){const observed=ctor.observedAttributes??[],known=ctor.knownUnobservedAttributes??[];names={observed,all:new Set([...observed,...known])},attributeNamesByClass.set(ctor,names)}return names}function warnUnknownAttributes(host,observedAttributes,knownUnobservedAttributes){const warnings=litDevWarnings();if(!warnings)return;const names=host.getAttributeNames();if(names.length===0)return;let observed,observedSet;if(observedAttributes===void 0&&knownUnobservedAttributes===void 0){const classNames=attributeNamesFor(host.constructor);observed=classNames.observed,observedSet=classNames.all}else observed=observedAttributes??host.constructor.observedAttributes??[],observedSet=new Set([...observed,...knownUnobservedAttributes??host.constructor.knownUnobservedAttributes??[]]);const isFormAssociated=host.constructor.formAssociated===!0;for(const name of names){if(observedSet.has(name)||name==="form"&&isFormAssociated||isExemptAttribute(name))continue;const key=`lyra-unknown-attribute:${host.localName}:${name}`;if(warnings.has(key))continue;warnings.add(key);const suggestion=closestObservedAttribute(name,observed);console.warn(suggestion?`<${host.localName}>: unknown attribute '${name}' — did you mean '${suggestion}'?`:`<${host.localName}>: unknown attribute '${name}'`)}}const checkedScopeChains=new WeakSet,THEME_SCOPE_LIST=`:root,${DOCUMENT_TOKEN_SCOPE_SELECTOR}`,LAYER_INPUTS=new Set(LAYER_CONSUMED_INPUTS);function inlineLayerInputs(element){const style=element.style;if(!style||style.length===0)return[];const found=[];for(let index=0;index<style.length;index++){const name=style.item(index);LAYER_INPUTS.has(name)&&found.push(name)}return found}const layerVerifiedSinceCheckpoint=new WeakSet,glassShareChecked=new WeakSet,GLASS_SHARE="--lr-theme-surface-glass-dark-share";function checkGlassShare(doc){if(glassShareChecked.has(doc)||!doc.documentElement||!doc.defaultView)return;glassShareChecked.add(doc);const value=doc.defaultView.getComputedStyle(doc.documentElement).getPropertyValue(GLASS_SHARE).trim();value&&!CSS.supports("color",`color-mix(in srgb, red clamp(0%, ${value}, 100%), blue)`)&&devWarnOnce("lyra-style:glass-dark-share",`${GLASS_SHARE}: ${value} is not a percentage, so dark Glass chrome loses its fill; use a percentage such as 10% (the default).`)}function warnThemeScopeUsage(host){if(!litDevWarnings())return;host.getAttribute("data-lr-theme-scope")==="false"&&devWarnOnce("lyra-theme-scope:false-marker",`<${host.localName}>: data-lr-theme-scope="false" still marks a theme scope; omit the attribute (or bind it to null) to unmark the element.`);const doc=host.ownerDocument;doc.defaultView&&!layerVerifiedSinceCheckpoint.has(doc)&&(layerVerifiedSinceCheckpoint.add(doc),queueMicrotask(()=>layerVerifiedSinceCheckpoint.delete(doc)),checkGlassShare(doc),hasLyraTokens(doc)||devWarnOnce("lyra-theme-scope:layer-missing",`<${host.localName}>: the Lyra document token layer is not adopted in this document; link @aceshooting/lyra-ui/theme.css (or tokens-root.css) or call adoptLyraTokens(document).`)),lyraTokenLayerArrivedLate(doc)&&devWarnOnce("lyra-theme-scope:late-static-layer","theme.css (or tokens-root.css) was applied after Lyra registered its first element, so Lyra adopted its own copy of the token layer first and withdrew it later. Load the stylesheet before registering Lyra to avoid restyling the page twice.");const foreign=foreignLyraTokenLayer(doc);foreign&&devWarnOnce("lyra-theme-scope:foreign-layer",`A different Lyra token layer (${foreign}) was already present in this document; the later-adopted layer wins where values differ. Load one copy of @aceshooting/lyra-ui per page.`);for(let element=host;element&&!checkedScopeChains.has(element)&&(checkedScopeChains.add(element),!(typeof element.matches!="function"||element.matches(THEME_SCOPE_LIST)));element=flattenedParentElement(element)){const inputs=inlineLayerInputs(element);if(inputs.length){devWarnOnce("lyra-theme-scope:unscoped-input",`<${element.localName}> sets ${inputs.join(", ")} inline but is not a theme scope, so Lyra components below it keep the nearest scope's values. Add data-lr-theme-scope to the element.`);break}}}export{deprecationWarningKey,devWarn,devWarnOnce2 as devWarnOnce,warnDeprecatedUsage,warnThemeScopeUsage,warnUnknownAttributes};

package/dist/internal/package-metadata.js

@@ -1 +1 @@
-const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="28.1.1";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};
+const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="28.1.2";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};

package/llms/components/lr-push-to-talk.md

@@ -51,6 +51,9 @@ them starts or stops their audio-analysis, deadline, or elapsed-time work immedi
 maximum remains measured from the original recording start rather than granting a fresh duration;
 setting it to `0` removes the deadline.
 
+Audio-level analysis is optional: if its audio context or analysis nodes cannot initialize,
+recording continues without `lr-level` events. Any partially initialized audio context is closed.
+
 **Methods:** `start()`, `stop()`, and `cancel()` drive the capture lifecycle imperatively (mirroring
 the pointer/keyboard gestures).
 

package/llms/peers.md

@@ -38,7 +38,7 @@ for the page.
 | Peer | Range | Needed by |
 |---|---|---|
 | `@aceshooting/lyra-flags` | `^2.3.0` | _(loaded by a shared internal module)_ |
-| `@aceshooting/lyra-translations` | `^28.1.1` | _(not referenced by any component)_ |
+| `@aceshooting/lyra-translations` | `^28.1.2` | _(not referenced by any component)_ |
 | `@aiden0z/pptx-renderer` | `^1.3.0` | `lr-pptx-viewer` |
 | `@sgratzl/chartjs-chart-boxplot` | `^4.0.0` | `lr-box-plot` |
 | `chart.js` | `^4.0.1` | `lr-bar-chart`, `lr-box-plot`, `lr-bubble-chart`, `lr-chart`, `lr-doughnut-chart`, `lr-histogram`, `lr-line-chart`, `lr-pie-chart`, `lr-polar-area-chart`, `lr-radar-chart`, `lr-scatter-chart` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "28.1.1",
+  "version": "28.1.2",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -2598,7 +2598,7 @@
   },
   "peerDependencies": {
     "@aceshooting/lyra-flags": "^2.3.0",
-    "@aceshooting/lyra-translations": "^28.1.1",
+    "@aceshooting/lyra-translations": "^28.1.2",
     "@aiden0z/pptx-renderer": "^1.3.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.0.0",
     "chart.js": "^4.0.1",