@aceshooting/lyra-ui 28.1.1 → 28.1.3

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.3";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};

package/llms/components/lr-code-block-core.md

@@ -123,8 +123,8 @@ for the full rationale, including why `<lr-markdown>`/`<lr-markdown-core>` must
 fallback separately. `base` is a flex column and `body` grows to fill whatever block space a
 explicitly sized host gives it too, identically to `<lr-code-block>` above.
 
-**Optional peer deps:** `shiki` (specifically its `shiki/core`, `shiki/engine/oniguruma`, the binary
-`shiki/onig.wasm` asset (the default; select `shiki/engine/javascript` instead via
+**Optional peer deps:** `shiki` (specifically its `shiki/core`, `shiki/engine/oniguruma`, Lyra’s packaged
+Oniguruma binary (the default; select `shiki/engine/javascript` instead via
 `setShikiCoreEngine('javascript')`), and `shiki/themes/github-{light,dark}.mjs` subpaths — never
 `shiki`'s main entry point, which is what carries the ~200-language table this component exists to
 avoid). Building the

package/llms/components/lr-diff-view.md

@@ -129,8 +129,8 @@ shared tokens `--lr-color-border`/`-border-subtle`/`-surface`/`-success`/`-succe
 `-danger-quiet`/`-text`, `--lr-radius`, `--lr-space-xs`/`-s`, `--lr-font-size-sm`,
 `--lr-line-height-snug`, `--lr-focus-ring-*`.
 
-**Optional peer deps:** `shiki` (the same fine-grained `shiki/core`/`shiki/engine/oniguruma`/binary
-`shiki/onig.wasm` subset `lr-code-block-core` uses by default, never `shiki`'s full ~200-language
+**Optional peer deps:** `shiki` (the same fine-grained `shiki/core`/`shiki/engine/oniguruma` subset and packaged Oniguruma
+binary `lr-code-block-core` uses by default, never `shiki`'s full ~200-language
 main entry point) — only loaded once both `language` and a matching `languages` entry are set;
 unset/unmatched leaves the plain unhighlighted diff text untouched.
 

package/llms/components/lr-heatmap.md

@@ -380,7 +380,9 @@ color?: string; label?: string; partOfRamp?: boolean }`: a discrete legend key r
 **Getters/methods:** `exportData('csv'|'png')` returns a spreadsheet-safe CSV snapshot of the
 underlying matrix/calendar values or a PNG data URL for the most recently completed canvas paint.
 The CSV form reads `data` directly (not any bounded render cache) and omits no-data cells — one
-`row,column,value` row per real matrix cell, or `date,value` per real calendar day. The PNG form
+`row,column,value` row per real matrix cell, or `date,value` per real calendar day. Finite numeric
+values retain their precision without display rounding or locale formatting; text cells remain
+guarded against spreadsheet formulas. The PNG form
 includes the painted axes, cells, focus/selection/annotation overlays, and frozen
 label bands while `stickyLabels` is enabled; the DOM legend, tooltip, and accessible-cell buttons
 are deliberately excluded. It returns `''` before a completed paint, while rendering is deferred or

package/llms/components/lr-markdown-core.md

@@ -110,7 +110,7 @@ rendered code and defaults to `var(--lr-font-mono)`.
 
 **Optional peer deps:** `marked`, `dompurify` (both lazy-loaded, same as `<lr-markdown>`), `katex`
 (for `math`). Does _not_ depend on the full `shiki` package's default entry point — only
-`shiki/core`, `shiki/engine/oniguruma`, the binary `shiki/onig.wasm` asset (the default; select
+`shiki/core`, `shiki/engine/oniguruma`, Lyra’s packaged Oniguruma binary (the default; select
 `shiki/engine/javascript` instead via `setShikiCoreEngine('javascript')`), and
 `shiki/themes/github-{light,dark}.mjs`, the same fine-grained subset `<lr-code-block-core>` depends
 on.

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.3` | _(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.3",
   "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.3",
     "@aiden0z/pptx-renderer": "^1.3.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.0.0",
     "chart.js": "^4.0.1",
@@ -2766,7 +2766,7 @@
     "mammoth": "^1.13.0",
     "maplibre-gl": "^6.14.0",
     "marked": "^18.1.1",
-    "oxc-parser": "^0.153.0",
+    "oxc-parser": "^0.154.0",
     "papaparse": "^5.7.0",
     "pdfjs-dist": "^6.4.299",
     "pixelmatch": "^8.0.0",
@@ -2778,13 +2778,13 @@
     "shiki": "^4.5.0",
     "svelte": "^5.57.2",
     "typescript": "^7.0.2",
-    "vue": "^3.5.43",
+    "vue": "^3.5.44",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "scripts": {
     "build": "node scripts/build.mjs && pnpm run check:build-artifacts && pnpm run check:theme-bootstrap",
     "regen": "pnpm run archive-changelog && pnpm run package-metadata && pnpm run default-string-slices && pnpm run translation-slices && pnpm run translation-review-fixture && pnpm run locale-manifest && pnpm run manifest && pnpm run component-inventory && pnpm run tag-aliases && pnpm run manifest && pnpm run component-metadata && pnpm run registrations && pnpm run manifest && pnpm run component-inventory && pnpm run visual-manifest && pnpm run framework-types && pnpm run events && pnpm run testing-event-registry && pnpm run autoloader-manifest && pnpm run registration-graph && pnpm run scoped-definitions && pnpm run palette && pnpm run chart-palette && pnpm run terminal-palette && pnpm run style-axes && pnpm run option-presets && pnpm run design-tokens && pnpm run theme-scopes && pnpm run generate-reservation-styles && pnpm run generate-editor-data && pnpm run llms",
-    "check:build-artifacts": "node scripts/check-build-artifacts.mjs && node scripts/check-host-token-declarations.mjs && node --test scripts/ai-compile-contract.test.mjs && node --test scripts/theme-bootstrap-build-check.test.mjs",
+    "check:build-artifacts": "node scripts/generate-shiki-wasm.mjs --check && node --test scripts/generate-shiki-wasm.test.mjs && node scripts/check-build-artifacts.mjs && node scripts/check-host-token-declarations.mjs && node --test scripts/ai-compile-contract.test.mjs && node --test scripts/theme-bootstrap-build-check.test.mjs",
     "pretest": "pnpm run build",
     "test": "wtr",
     "test:ssr": "node --test scripts/ssr-fixture.test.mjs && node scripts/check-ssr.mjs && node scripts/check-ssr-tokens.mjs && node --conditions=browser scripts/check-jsdom.mjs && node --conditions=browser scripts/check-happy-dom.mjs",