@aceshooting/lyra-ui 13.0.1 → 14.1.0

package/dist/components/media/qr-code/qr-code.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{resolveBoundedCanvasAllocation}from"../../../internal/canvas.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadQrCodeCached}from"./qr-code-loader.js";import{styles}from"./qr-code.styles.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_loading,LYRA_DEFAULT_noData,LYRA_DEFAULT_qrCodeGenerationFailed,LYRA_DEFAULT_qrCodeMissingLibrary}from"../../../internal/default-strings.generated.js";const DEFAULT_SIZE=128,MIN_SIZE=1,MAX_SIZE=2048,QR_BACKING_SCALE=2,MAX_CANVAS_DIMENSION=4096,MAX_CANVAS_PIXELS=8388608,MAX_QR_MODULE_COUNT=177,DEFAULT_RADIUS=0,MIN_RADIUS=0,MAX_RADIUS=.5,DEFAULT_IMAGE_COVERAGE=.5,DEFAULT_IMAGE_PADDING=0,DEFAULT_ERROR_CORRECTION="H",ERROR_CORRECTION_LEVELS=new Set(["L","M","Q","H"]),FALLBACK_FILL="#000000",FALLBACK_BACKGROUND="transparent";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function normalizeQrModules(result){if(!isObjectLike(result))throw new TypeError("QR result must be an object.");const modules=result.modules;if(!isObjectLike(modules))throw new TypeError("QR result has no module matrix.");const size=modules.size,get=modules.get;if(!Number.isSafeInteger(size)||size<1||size>MAX_QR_MODULE_COUNT)throw new TypeError("QR module count is invalid.");if(typeof get!="function")throw new TypeError("QR module reader is invalid.");const moduleCount=size,bits=new Uint8Array(moduleCount*moduleCount);for(let row=0;row<moduleCount;row++)for(let col=0;col<moduleCount;col++){const value=Reflect.apply(get,modules,[row,col]);if(value!==0&&value!==1&&value!==!1&&value!==!0)throw new TypeError("QR module value is invalid.");bits[row*moduleCount+col]=value===1||value===!0?1:0}return Object.freeze({size:moduleCount,get(row,col){return!Number.isInteger(row)||!Number.isInteger(col)||row<0||col<0||row>=moduleCount||col>=moduleCount?0:bits[row*moduleCount+col]===1?1:0}})}function normalizeErrorCorrection(value){const upper=value.toUpperCase();return ERROR_CORRECTION_LEVELS.has(upper)?upper:DEFAULT_ERROR_CORRECTION}const errorCorrectionConverter={fromAttribute(value){return value===null?DEFAULT_ERROR_CORRECTION:normalizeErrorCorrection(value)}},warnedInvalidColors=new Set;function warnInvalidColor(value){warnedInvalidColors.has(value)||(warnedInvalidColors.add(value),console.warn(`<lr-qr-code> could not parse "${value}" as a CSS color; falling back to the default.`))}function resolveQrColor(value,fallbackHex,ctx){for(const sentinel of["rgb(1, 2, 3)","rgb(4, 5, 6)"]){ctx.fillStyle=sentinel;const sentinelNormalized=ctx.fillStyle;if(ctx.fillStyle=value,ctx.fillStyle!==sentinelNormalized)return value}return warnInvalidColor(value),fallbackHex}class LyraQrCode extends LyraElement{static{this.defaultStrings={...super.defaultStrings,loading:LYRA_DEFAULT_loading,noData:LYRA_DEFAULT_noData,qrCodeGenerationFailed:LYRA_DEFAULT_qrCodeGenerationFailed,qrCodeMissingLibrary:LYRA_DEFAULT_qrCodeMissingLibrary}}static{this.styles=[LyraElement.styles,styles]}static preload(){return loadQrCodeCached().then(api=>api!==null)}get size(){return this._size}set size(value){const oldValue=this._size;this._size=finiteRange(value,DEFAULT_SIZE,MIN_SIZE,MAX_SIZE),this.requestUpdate("size",oldValue)}get radius(){return this._radius}set radius(value){const oldValue=this._radius;this._radius=finiteRange(value,DEFAULT_RADIUS,MIN_RADIUS,MAX_RADIUS),this.requestUpdate("radius",oldValue)}get errorCorrection(){return this._errorCorrection}set errorCorrection(value){const oldValue=this._errorCorrection;this._errorCorrection=normalizeErrorCorrection(value),this.requestUpdate("errorCorrection",oldValue)}get canvas(){return this.renderRoot?.querySelector("canvas")}constructor(){super(),this.value="",this.label="",this.fill="",this.background="",this.image=null,this.imageBackground=null,this.imageCoverage=null,this.imagePadding=null,this._size=DEFAULT_SIZE,this._radius=DEFAULT_RADIUS,this._errorCorrection=DEFAULT_ERROR_CORRECTION,this.loadState={kind:"empty"},this.pendingLoadingAnnouncement=!1,this.visible=!0,this.loadLibrary=loadQrCodeCached,this.generation=0;try{this.accessibilityInternals=this.attachInternals()}catch{this.accessibilityInternals=void 0}this.syncSemanticOwner(),new ThemeWatcher(this,()=>this.refreshTheme())}connectedCallback(){this.value&&this.loadState.kind==="empty"?this.transitionTo({kind:"loading"}):this.setAttribute("aria-busy",this.loadState.kind==="loading"?"true":"false"),super.connectedCallback(),this.syncAnnouncementSinks();const IntersectionObserverCtor=this.ownerDocument.defaultView?.IntersectionObserver;IntersectionObserverCtor?(this.intersectionObserver=new IntersectionObserverCtor(entries=>{const wasVisible=this.visible;this.visible=entries[0]?.isIntersecting??!0,this.visible&&!wasVisible&&this.draw()}),this.intersectionObserver.observe(this)):this.visible||(this.visible=!0,this.draw()),this.hasUpdated&&this.value&&(this.loadState.kind==="loading"||this.image&&this.loadState.kind==="ready"&&!this.loadState.image)&&this.generate()}disconnectedCallback(){this.generation++,this.pendingLoadingAnnouncement=!1,this.releaseAnnouncementSinks(),super.disconnectedCallback(),this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0}adoptedCallback(){super.adoptedCallback(),this.releaseAnnouncementSinks(),this.syncAnnouncementSinks()}syncAnnouncementSinks(){this.isConnected&&(this.errorAnnouncementSink?.element.ownerDocument===this.ownerDocument&&this.statusAnnouncementSink?.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSinks(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}),this.statusAnnouncementSink=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this})))}releaseAnnouncementSinks(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0,this.statusAnnouncementSink?.release(),this.statusAnnouncementSink=void 0}transitionTo(next){const announcesLoading=next.kind==="loading"&&this.loadState.kind!=="loading"&&this.hasUpdated&&this.isConnected;this.loadState=next,this.setAttribute("aria-busy",next.kind==="loading"?"true":"false"),this.syncSemanticOwner(),announcesLoading&&(this.pendingLoadingAnnouncement=!0)}syncSemanticOwner(){const semantic=this.loadState.kind==="loading"||this.loadState.kind==="ready";this.accessibilityInternals&&(this.accessibilityInternals.role=semantic?"img":null,this.accessibilityInternals.ariaLabel=semantic?this.label||this.value:null)}updated(changed){if(super.updated(changed),this.syncSemanticOwner(),this.pendingLoadingAnnouncement&&(this.pendingLoadingAnnouncement=!1,this.statusAnnouncementSink?.announce(this.localize("loading"))),changed.has("value")||changed.has("errorCorrection")||changed.has("image")||!this.hasUpdated){this.scheduleAfterUpdate(()=>{this.generate()});return}this.loadState.kind==="ready"&&(changed.has("size")||changed.has("radius")||changed.has("fill")||changed.has("background")||changed.has("imageBackground")||changed.has("imageCoverage")||changed.has("imagePadding")||changed.has("loadState"))&&this.draw()}willUpdate(changed){super.willUpdate(changed),(changed.has("value")||changed.has("errorCorrection")||changed.has("image"))&&this.transitionTo(this.value?{kind:"loading"}:{kind:"empty"})}generate(){this.generateCurrentValue()}async generateCurrentValue(){const generation=++this.generation;if(!this.value){this.transitionTo({kind:"empty"});return}this.transitionTo({kind:"loading"});try{const api=await this.loadLibrary();if(generation!==this.generation||!this.isConnected)return;if(!api){const message=this.localize("qrCodeMissingLibrary");this.transitionTo({kind:"error",message}),this.errorAnnouncementSink?.announce(message);return}const imageSource=safeMediaSrc(this.image),result=api.create(this.value,{errorCorrectionLevel:imageSource?"H":this.errorCorrection}),modules=normalizeQrModules(result);if(generation!==this.generation)return;if(this.transitionTo({kind:"ready",modules}),imageSource){const image=await this.loadEmbeddedImage(imageSource);if(generation!==this.generation||!this.isConnected||!image)return;this.transitionTo({kind:"ready",modules,image})}}catch{if(generation!==this.generation||!this.isConnected)return;const message=this.localize("qrCodeGenerationFailed");this.transitionTo({kind:"error",message}),this.errorAnnouncementSink?.announce(message)}}async loadEmbeddedImage(src){const ImageCtor=this.ownerDocument.defaultView?.Image;if(!ImageCtor)return;const image=new ImageCtor;return image.decoding="async",await new Promise(resolve=>{image.addEventListener("load",()=>resolve(!0),{once:!0}),image.addEventListener("error",()=>resolve(!1),{once:!0}),image.src=src})&&image.naturalWidth>0&&image.naturalHeight>0?image:void 0}refreshTheme(){this.draw()}fillColor(ctx){const computed=this.ownerDocument.defaultView?.getComputedStyle(this),raw=this.fill.trim()||computed?.color?.trim()||FALLBACK_FILL;return resolveQrColor(raw,FALLBACK_FILL,ctx)}backgroundColor(ctx){const computed=this.ownerDocument.defaultView?.getComputedStyle(this),raw=this.background.trim()||computed?.backgroundColor?.trim()||FALLBACK_BACKGROUND;return resolveQrColor(raw,FALLBACK_BACKGROUND,ctx)}draw(){if(this.loadState.kind!=="ready"||!this.visible)return;const canvas=this.canvas;if(!canvas)return;const{modules}=this.loadState,size=this.size,allocation=LyraQrCode.canvasAllocation(size);canvas.width=allocation.pixelWidth,canvas.height=allocation.pixelHeight,canvas.style.width=`${size}px`,canvas.style.height=`${size}px`;const ctx=canvas.getContext("2d");if(!ctx)return;ctx.scale(allocation.scaleX,allocation.scaleY);const background=this.backgroundColor(ctx),fill=this.fillColor(ctx);ctx.fillStyle=background,ctx.fillRect(0,0,size,size);const moduleCount=modules.size,moduleSize=size/moduleCount,radiusPx=this.radius*moduleSize,canRoundRect=typeof ctx.roundRect=="function";ctx.fillStyle=fill;for(let row=0;row<moduleCount;row++)for(let col=0;col<moduleCount;col++){if(!modules.get(row,col))continue;const x=col*moduleSize,y=row*moduleSize;this.radius>0&&canRoundRect?(ctx.beginPath(),ctx.roundRect(x,y,moduleSize,moduleSize,radiusPx),ctx.fill()):ctx.fillRect(x,y,moduleSize,moduleSize)}this.loadState.image&&this.drawEmbeddedImage(ctx,this.loadState.image,size)}static canvasAllocation(cssSize){return resolveBoundedCanvasAllocation({cssWidth:cssSize,cssHeight:cssSize,desiredScale:QR_BACKING_SCALE,maxDimension:MAX_CANVAS_DIMENSION,maxPixels:MAX_CANVAS_PIXELS})}drawEmbeddedImage(ctx,image,size){const coverage=finiteRange(this.imageCoverage??DEFAULT_IMAGE_COVERAGE,DEFAULT_IMAGE_COVERAGE,0,1),boxSize=size*coverage;if(boxSize<=0)return;const padding=finiteRange(this.imagePadding??DEFAULT_IMAGE_PADDING,DEFAULT_IMAGE_PADDING,0,boxSize/2),contentSize=boxSize-padding*2,boxStart=(size-boxSize)/2;if(this.imageBackground?.trim()&&(ctx.fillStyle=resolveQrColor(this.imageBackground.trim(),this.backgroundColor(ctx),ctx),ctx.fillRect(boxStart,boxStart,boxSize,boxSize)),contentSize<=0)return;const scale=Math.min(contentSize/image.naturalWidth,contentSize/image.naturalHeight),width=image.naturalWidth*scale,height=image.naturalHeight*scale;ctx.drawImage(image,(size-width)/2,(size-height)/2,width,height)}accessibleName(){return this.getAttribute("aria-label")??(this.label||this.value)}renderBody(){switch(this.loadState.kind){case"empty":return html`<div part="empty">${this.localize("noData")}</div>`;case"loading":return html`<div part="loading">${this.localize("loading")}</div>`;case"error":return html`<div part="error">${this.loadState.message}</div>`;case"ready":return nothing}}render(){const ready=this.loadState.kind==="ready",fallbackSemantics=!this.accessibilityInternals&&ready;return html`<div part="base qr-code" style=${styleMap({inlineSize:`${this.size}px`,blockSize:`${this.size}px`})}>
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{resolveBoundedCanvasAllocation}from"../../../internal/canvas.js";import{LyraElement}from"../../../internal/lyra-element.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{finiteRange}from"../../../internal/numbers.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadQrCodeCached}from"./qr-code-loader.js";import{styles}from"./qr-code.styles.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_loading,LYRA_DEFAULT_noData,LYRA_DEFAULT_qrCodeGenerationFailed,LYRA_DEFAULT_qrCodeMissingLibrary}from"../../../internal/default-strings.generated.js";const DEFAULT_SIZE=128,MIN_SIZE=1,MAX_SIZE=2048,QR_BACKING_SCALE=2,MAX_CANVAS_DIMENSION=4096,MAX_CANVAS_PIXELS=8388608,MAX_QR_MODULE_COUNT=177,DEFAULT_RADIUS=0,MIN_RADIUS=0,MAX_RADIUS=.5,DEFAULT_IMAGE_COVERAGE=.5,DEFAULT_IMAGE_PADDING=0,DEFAULT_ERROR_CORRECTION="H",ERROR_CORRECTION_LEVELS=new Set(["L","M","Q","H"]),FALLBACK_FILL="#000000",FALLBACK_BACKGROUND="transparent",INVALID_COLOR_WARNING_KEY="lyra-qr-code-invalid-color",INVALID_COLOR_WARNING="<lr-qr-code> received an invalid color and used its fallback color.";function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function readIntersectionState(entries,target){try{if(!Array.isArray(entries))return;for(const candidate of entries)if(isObjectLike(candidate))try{const entry=candidate;if(entry.target!==target)continue;const isIntersecting=entry.isIntersecting;if(typeof isIntersecting=="boolean")return isIntersecting}catch{}}catch{}}function normalizeQrModules(result){if(!isObjectLike(result))throw new TypeError("QR result must be an object.");const modules=result.modules;if(!isObjectLike(modules))throw new TypeError("QR result has no module matrix.");const size=modules.size,get=modules.get;if(!Number.isSafeInteger(size)||size<1||size>MAX_QR_MODULE_COUNT)throw new TypeError("QR module count is invalid.");if(typeof get!="function")throw new TypeError("QR module reader is invalid.");const moduleCount=size,bits=new Uint8Array(moduleCount*moduleCount);for(let row=0;row<moduleCount;row++)for(let col=0;col<moduleCount;col++){const value=Reflect.apply(get,modules,[row,col]);if(value!==0&&value!==1&&value!==!1&&value!==!0)throw new TypeError("QR module value is invalid.");bits[row*moduleCount+col]=value===1||value===!0?1:0}return Object.freeze({size:moduleCount,get(row,col){return!Number.isInteger(row)||!Number.isInteger(col)||row<0||col<0||row>=moduleCount||col>=moduleCount?0:bits[row*moduleCount+col]===1?1:0}})}function normalizeErrorCorrection(value){const upper=value.toUpperCase();return ERROR_CORRECTION_LEVELS.has(upper)?upper:DEFAULT_ERROR_CORRECTION}const errorCorrectionConverter={fromAttribute(value){return value===null?DEFAULT_ERROR_CORRECTION:normalizeErrorCorrection(value)}};function warnInvalidColor(){devWarnOnce(INVALID_COLOR_WARNING_KEY,INVALID_COLOR_WARNING)}function resolveQrColor(value,fallbackHex,ctx){for(const sentinel of["rgb(1, 2, 3)","rgb(4, 5, 6)"]){ctx.fillStyle=sentinel;const sentinelNormalized=ctx.fillStyle;if(ctx.fillStyle=value,ctx.fillStyle!==sentinelNormalized)return value}return warnInvalidColor(),fallbackHex}class LyraQrCode extends LyraElement{static{this.defaultStrings={...super.defaultStrings,loading:LYRA_DEFAULT_loading,noData:LYRA_DEFAULT_noData,qrCodeGenerationFailed:LYRA_DEFAULT_qrCodeGenerationFailed,qrCodeMissingLibrary:LYRA_DEFAULT_qrCodeMissingLibrary}}static{this.styles=[LyraElement.styles,styles]}static preload(){return loadQrCodeCached().then(api=>api!==null)}get size(){return this._size}set size(value){const oldValue=this._size;this._size=finiteRange(value,DEFAULT_SIZE,MIN_SIZE,MAX_SIZE),this.requestUpdate("size",oldValue)}get radius(){return this._radius}set radius(value){const oldValue=this._radius;this._radius=finiteRange(value,DEFAULT_RADIUS,MIN_RADIUS,MAX_RADIUS),this.requestUpdate("radius",oldValue)}get errorCorrection(){return this._errorCorrection}set errorCorrection(value){const oldValue=this._errorCorrection;this._errorCorrection=normalizeErrorCorrection(value),this.requestUpdate("errorCorrection",oldValue)}get canvas(){return this.renderRoot?.querySelector("canvas")}constructor(){super(),this.value="",this.label="",this.fill="",this.background="",this.image=null,this.imageBackground=null,this.imageCoverage=null,this.imagePadding=null,this._size=DEFAULT_SIZE,this._radius=DEFAULT_RADIUS,this._errorCorrection=DEFAULT_ERROR_CORRECTION,this.loadState={kind:"empty"},this.pendingLoadingAnnouncement=!1,this.visible=!0,this.visibilityKnown=!0,this.intersectionGeneration=0,this.loadLibrary=loadQrCodeCached,this.generation=0;try{this.accessibilityInternals=this.attachInternals()}catch{this.accessibilityInternals=void 0}this.syncSemanticOwner(),new ThemeWatcher(this,()=>this.refreshTheme())}connectedCallback(){this.value&&this.loadState.kind==="empty"?this.transitionTo({kind:"loading"}):this.setAttribute("aria-busy",this.loadState.kind==="loading"?"true":"false"),super.connectedCallback(),this.syncAnnouncementSinks(),this.bindVisibilityObserver(),this.hasUpdated&&this.value&&(this.loadState.kind==="loading"||this.image&&this.loadState.kind==="ready"&&!this.loadState.image)&&this.generate()}disconnectedCallback(){this.generation++,this.clearVisibilityObserver(),this.visible=!1,this.visibilityKnown=!1,this.pendingLoadingAnnouncement=!1,this.releaseAnnouncementSinks(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.clearVisibilityObserver(),this.visible=!1,this.visibilityKnown=!1,this.releaseAnnouncementSinks(),this.syncAnnouncementSinks()}bindVisibilityObserver(){this.clearVisibilityObserver();const owner=this.ownerDocument.defaultView;if(!owner){this.restoreImmediateVisibility();return}let IntersectionObserverCtor;try{IntersectionObserverCtor=owner.IntersectionObserver}catch{this.restoreImmediateVisibility();return}if(typeof IntersectionObserverCtor!="function"){this.restoreImmediateVisibility();return}this.visible=!1,this.visibilityKnown=!1;const generation=++this.intersectionGeneration;let observer;try{observer=new IntersectionObserverCtor(entries=>{if(generation!==this.intersectionGeneration||!this.isConnected||this.ownerDocument.defaultView!==owner||this.intersectionObserver!==observer)return;const isIntersecting=readIntersectionState(entries,this);if(isIntersecting===void 0)return;const wasPaintable=this.visibilityKnown&&this.visible;this.visibilityKnown=!0,this.visible=isIntersecting,this.visible&&!wasPaintable&&this.draw()}),this.intersectionObserver=observer,observer.observe(this)}catch{try{observer?.disconnect()}catch{}if(generation!==this.intersectionGeneration)return;this.intersectionObserver=void 0,this.intersectionGeneration++,this.restoreImmediateVisibility()}}clearVisibilityObserver(){this.intersectionGeneration++;try{this.intersectionObserver?.disconnect()}catch{}this.intersectionObserver=void 0}restoreImmediateVisibility(){this.visible=!0,this.visibilityKnown=!0,this.isConnected&&this.draw()}syncAnnouncementSinks(){this.isConnected&&(this.errorAnnouncementSink?.element.ownerDocument===this.ownerDocument&&this.statusAnnouncementSink?.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSinks(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}),this.statusAnnouncementSink=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this})))}releaseAnnouncementSinks(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0,this.statusAnnouncementSink?.release(),this.statusAnnouncementSink=void 0}transitionTo(next){const announcesLoading=next.kind==="loading"&&this.loadState.kind!=="loading"&&this.hasUpdated&&this.isConnected;this.loadState=next,this.setAttribute("aria-busy",next.kind==="loading"?"true":"false"),this.syncSemanticOwner(),announcesLoading&&(this.pendingLoadingAnnouncement=!0)}syncSemanticOwner(){const semantic=this.loadState.kind==="loading"||this.loadState.kind==="ready";this.accessibilityInternals&&(this.accessibilityInternals.role=semantic?"img":null,this.accessibilityInternals.ariaLabel=semantic?this.label||this.value:null)}updated(changed){if(super.updated(changed),this.syncSemanticOwner(),this.pendingLoadingAnnouncement&&(this.pendingLoadingAnnouncement=!1,this.statusAnnouncementSink?.announce(this.localize("loading"))),changed.has("value")||changed.has("errorCorrection")||changed.has("image")||!this.hasUpdated){this.scheduleAfterUpdate(()=>{this.generate()});return}this.loadState.kind==="ready"&&(changed.has("size")||changed.has("radius")||changed.has("fill")||changed.has("background")||changed.has("imageBackground")||changed.has("imageCoverage")||changed.has("imagePadding")||changed.has("loadState"))&&this.draw()}willUpdate(changed){super.willUpdate(changed),(changed.has("value")||changed.has("errorCorrection")||changed.has("image"))&&this.transitionTo(this.value?{kind:"loading"}:{kind:"empty"})}generate(){this.generateCurrentValue()}async generateCurrentValue(){const generation=++this.generation;if(!this.value){this.transitionTo({kind:"empty"});return}this.transitionTo({kind:"loading"});try{const api=await this.loadLibrary();if(generation!==this.generation||!this.isConnected)return;if(!api){const message=this.localize("qrCodeMissingLibrary");this.transitionTo({kind:"error",message}),this.errorAnnouncementSink?.announce(message);return}const imageSource=safeMediaSrc(this.image),result=api.create(this.value,{errorCorrectionLevel:imageSource?"H":this.errorCorrection}),modules=normalizeQrModules(result);if(generation!==this.generation)return;if(this.transitionTo({kind:"ready",modules}),imageSource){const image=await this.loadEmbeddedImage(imageSource);if(generation!==this.generation||!this.isConnected||!image)return;this.transitionTo({kind:"ready",modules,image})}}catch{if(generation!==this.generation||!this.isConnected)return;const message=this.localize("qrCodeGenerationFailed");this.transitionTo({kind:"error",message}),this.errorAnnouncementSink?.announce(message)}}async loadEmbeddedImage(src){const ImageCtor=this.ownerDocument.defaultView?.Image;if(!ImageCtor)return;const image=new ImageCtor;return image.decoding="async",await new Promise(resolve=>{image.addEventListener("load",()=>resolve(!0),{once:!0}),image.addEventListener("error",()=>resolve(!1),{once:!0}),image.src=src})&&image.naturalWidth>0&&image.naturalHeight>0?image:void 0}refreshTheme(){this.draw()}fillColor(ctx){const computed=this.ownerDocument.defaultView?.getComputedStyle(this),raw=this.fill.trim()||computed?.color?.trim()||FALLBACK_FILL;return resolveQrColor(raw,FALLBACK_FILL,ctx)}backgroundColor(ctx){const computed=this.ownerDocument.defaultView?.getComputedStyle(this),raw=this.background.trim()||computed?.backgroundColor?.trim()||FALLBACK_BACKGROUND;return resolveQrColor(raw,FALLBACK_BACKGROUND,ctx)}draw(){if(this.loadState.kind!=="ready"||!this.visibilityKnown||!this.visible)return;const canvas=this.canvas;if(!canvas)return;const{modules}=this.loadState,size=this.size,allocation=LyraQrCode.canvasAllocation(size);canvas.width=allocation.pixelWidth,canvas.height=allocation.pixelHeight,canvas.style.width=`${size}px`,canvas.style.height=`${size}px`;const ctx=canvas.getContext("2d");if(!ctx)return;ctx.scale(allocation.scaleX,allocation.scaleY);const background=this.backgroundColor(ctx),fill=this.fillColor(ctx);ctx.fillStyle=background,ctx.fillRect(0,0,size,size);const moduleCount=modules.size,moduleSize=size/moduleCount,radiusPx=this.radius*moduleSize,canRoundRect=typeof ctx.roundRect=="function";ctx.fillStyle=fill;for(let row=0;row<moduleCount;row++)for(let col=0;col<moduleCount;col++){if(!modules.get(row,col))continue;const x=col*moduleSize,y=row*moduleSize;this.radius>0&&canRoundRect?(ctx.beginPath(),ctx.roundRect(x,y,moduleSize,moduleSize,radiusPx),ctx.fill()):ctx.fillRect(x,y,moduleSize,moduleSize)}this.loadState.image&&this.drawEmbeddedImage(ctx,this.loadState.image,size)}static canvasAllocation(cssSize){return resolveBoundedCanvasAllocation({cssWidth:cssSize,cssHeight:cssSize,desiredScale:QR_BACKING_SCALE,maxDimension:MAX_CANVAS_DIMENSION,maxPixels:MAX_CANVAS_PIXELS})}drawEmbeddedImage(ctx,image,size){const coverage=finiteRange(this.imageCoverage??DEFAULT_IMAGE_COVERAGE,DEFAULT_IMAGE_COVERAGE,0,1),boxSize=size*coverage;if(boxSize<=0)return;const padding=finiteRange(this.imagePadding??DEFAULT_IMAGE_PADDING,DEFAULT_IMAGE_PADDING,0,boxSize/2),contentSize=boxSize-padding*2,boxStart=(size-boxSize)/2;if(this.imageBackground?.trim()&&(ctx.fillStyle=resolveQrColor(this.imageBackground.trim(),this.backgroundColor(ctx),ctx),ctx.fillRect(boxStart,boxStart,boxSize,boxSize)),contentSize<=0)return;const scale=Math.min(contentSize/image.naturalWidth,contentSize/image.naturalHeight),width=image.naturalWidth*scale,height=image.naturalHeight*scale;ctx.drawImage(image,(size-width)/2,(size-height)/2,width,height)}accessibleName(){return this.getAttribute("aria-label")??(this.label||this.value)}renderBody(){switch(this.loadState.kind){case"empty":return html`<div part="empty">${this.localize("noData")}</div>`;case"loading":return html`<div part="loading">${this.localize("loading")}</div>`;case"error":return html`<div part="error">${this.loadState.message}</div>`;case"ready":return nothing}}render(){const ready=this.loadState.kind==="ready",fallbackSemantics=!this.accessibilityInternals&&ready;return html`<div part="base qr-code" style=${styleMap({inlineSize:`${this.size}px`,blockSize:`${this.size}px`})}>
       <canvas
         part="canvas"
         ?hidden=${!ready}
@@ -7,4 +7,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         aria-label=${fallbackSemantics?this.accessibleName():nothing}
       ></canvas>
       ${this.renderBody()}
-    </div>`}}__decorate([property()],LyraQrCode.prototype,"value",void 0),__decorate([property()],LyraQrCode.prototype,"label",void 0),__decorate([property()],LyraQrCode.prototype,"fill",void 0),__decorate([property()],LyraQrCode.prototype,"background",void 0),__decorate([property()],LyraQrCode.prototype,"image",void 0),__decorate([property({attribute:"image-background"})],LyraQrCode.prototype,"imageBackground",void 0),__decorate([property({type:Number,attribute:"image-coverage"})],LyraQrCode.prototype,"imageCoverage",void 0),__decorate([property({type:Number,attribute:"image-padding"})],LyraQrCode.prototype,"imagePadding",void 0),__decorate([property({type:Number})],LyraQrCode.prototype,"size",null),__decorate([property({type:Number})],LyraQrCode.prototype,"radius",null),__decorate([property({attribute:"error-correction",converter:errorCorrectionConverter})],LyraQrCode.prototype,"errorCorrection",null),__decorate([state()],LyraQrCode.prototype,"loadState",void 0),__decorate([state()],LyraQrCode.prototype,"visible",void 0);export{LyraQrCode};
+    </div>`}}__decorate([property()],LyraQrCode.prototype,"value",void 0),__decorate([property()],LyraQrCode.prototype,"label",void 0),__decorate([property()],LyraQrCode.prototype,"fill",void 0),__decorate([property()],LyraQrCode.prototype,"background",void 0),__decorate([property()],LyraQrCode.prototype,"image",void 0),__decorate([property({attribute:"image-background"})],LyraQrCode.prototype,"imageBackground",void 0),__decorate([property({type:Number,attribute:"image-coverage"})],LyraQrCode.prototype,"imageCoverage",void 0),__decorate([property({type:Number,attribute:"image-padding"})],LyraQrCode.prototype,"imagePadding",void 0),__decorate([property({type:Number})],LyraQrCode.prototype,"size",null),__decorate([property({type:Number})],LyraQrCode.prototype,"radius",null),__decorate([property({attribute:"error-correction",converter:errorCorrectionConverter})],LyraQrCode.prototype,"errorCorrection",null),__decorate([state()],LyraQrCode.prototype,"loadState",void 0);export{LyraQrCode};

package/dist/components/media/sequence-playback/sequence-playback.class.d.ts

@@ -13,7 +13,7 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 * @event {FocusEvent} focus - Relayed once from an internal playback control as a bubbling,
 *   composed native event.
 * @csspart base - The playback controls wrapper.
-* @csspart play-button - The play/pause button.
+* @csspart play-button - The play/pause button; disabled resting paint is retained under hover and press.
 * @csspart slider - The playback position slider.
 * @cssprop [--lr-sequence-playback-icon-size=calc(var(--lr-icon-button-size) * 0.35)] - Font size of the
 *   play/pause glyph, derived from the shared icon-button hit-target size.
@@ -29,8 +29,8 @@ export declare class LyraSequencePlayback extends LyraElement<LyraSequencePlayba
 itemCount:number;
 /** The current sequence item, in `[0, itemCount)`. */
 currentIndex:number;
-/** Delay between ticks, in milliseconds, while playing. Clamped to
-*  `[MIN_INTERVAL_MS, MAX_TIMEOUT_MS]` — see `scheduleTick()`. */
+/** Delay between ticks, in milliseconds, while playing. Clamped to the timer-safe range in
+*  `scheduleTick()`. */
 intervalMs:number;loop:boolean;
 /**
 * Re-declared as a Lit reactive property (shadowing the inherited plain

package/dist/components/media/sequence-playback/sequence-playback.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{finiteCount,finiteDuration,MAX_TIMEOUT_MS}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./sequence-playback.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_playbackStepPosition}from"../../../internal/default-strings.generated.js";const MIN_INTERVAL_MS=16,warnedInvalidIntervals=new Set;function warnInvalidInterval(value,normalized){if(warnedInvalidIntervals.has(value))return;warnedInvalidIntervals.add(value);const reason=Number.isFinite(value)?value<MIN_INTERVAL_MS?`below the ${MIN_INTERVAL_MS}ms floor`:`above the ${MAX_TIMEOUT_MS}ms ceiling`:"non-finite";console.warn(`<lr-sequence-playback> interval-ms (${value}) is ${reason}; clamping to ${normalized}ms.`)}class LyraSequencePlayback extends LyraElement{constructor(){super(...arguments),this.itemCount=0,this.currentIndex=0,this.intervalMs=900,this.loop=!0,this.hidden=!1,this._playing=!1,this.running=!1,this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.onSliderKeyDown=event=>{const delta=this.keyboardStepDelta(event.key);delta!==void 0&&(event.preventDefault(),this.goTo(finiteCount(this.currentIndex,0,this.maxIndex)+delta))}}static{this.defaultStrings={...super.defaultStrings,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,playbackStepPosition:LYRA_DEFAULT_playbackStepPosition}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={playing:{type:Boolean,reflect:!0,noAccessor:!0},loop:{type:Boolean,converter:trueDefaultBooleanConverter}}}get playing(){return this._playing}set playing(next){if(next&&this.hasUpdated&&finiteCount(this.itemCount)<=1){this.hasAttribute("playing")&&this.removeAttribute("playing");return}const old=this._playing,requested=!!next;requested!==old&&(this._playing=requested,this.requestUpdate("playing",old),requested?this.startIfPossible():this.stopRunning())}startIfPossible(){this.running||!this._playing||finiteCount(this.itemCount)<=1||(this.running=!0,this.emit("lr-play"),this.running&&this._playing&&this.scheduleTick())}stopRunning(){this.clearTimer(),this.running&&(this.running=!1,this.emit("lr-pause"))}rejectInvalidPlayingRequest(){if(!this._playing)return;const old=this._playing;this._playing=!1,this.stopRunning(),this.requestUpdate("playing",old)}get maxIndex(){return Math.max(0,finiteCount(this.itemCount)-1)}disconnectedCallback(){this.pause(),this.clearTimer(),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("hidden")&&this.hidden&&this.pause();const itemCount=finiteCount(this.itemCount),currentIndex=finiteCount(this.currentIndex);itemCount!==this.itemCount&&(this.itemCount=itemCount),currentIndex!==this.currentIndex&&(this.currentIndex=currentIndex),(changed.has("itemCount")||changed.has("playing"))&&(this.itemCount<=1?this.rejectInvalidPlayingRequest():this.startIfPossible(),this.currentIndex>this.maxIndex&&(this.currentIndex=this.maxIndex))}play(){this.playing||finiteCount(this.itemCount)<=1||(this.playing=!0)}pause(){this.playing&&(this.playing=!1)}toggle(){this.playing=!this.playing}scheduleTick(){const rawDelay=this.intervalMs,delay=finiteDuration(rawDelay,MIN_INTERVAL_MS,MIN_INTERVAL_MS);delay!==rawDelay&&warnInvalidInterval(rawDelay,delay);const timerWindow=this.ownerDocument.defaultView;if(!timerWindow)return;const id=timerWindow.setTimeout(()=>{this.timer!==id||this.timerWindow!==timerWindow||(this.tick(),this.running&&this.playing&&this.timer===id&&this.timerWindow===timerWindow&&this.scheduleTick())},delay);this.timer=id,this.timerWindow=timerWindow}clearTimer(){this.timer!==void 0&&this.timerWindow?.clearTimeout(this.timer),this.timer=void 0,this.timerWindow=void 0}tick(){const itemCount=finiteCount(this.itemCount),next=finiteCount(this.currentIndex)+1;next>=itemCount?this.loop?this.setIndex(0):(this.setIndex(itemCount-1),this.pause()):this.setIndex(next)}setIndex(i){this.currentIndex=finiteCount(i,0,this.maxIndex),this.emit("lr-sequence-step",{currentIndex:this.currentIndex})}next(){const currentIndex=finiteCount(this.currentIndex);currentIndex+1<finiteCount(this.itemCount)&&this.setIndex(currentIndex+1)}previous(){const currentIndex=finiteCount(this.currentIndex);currentIndex>0&&this.setIndex(currentIndex-1)}goTo(currentIndex){this.pause(),this.setIndex(finiteCount(currentIndex,0,this.maxIndex))}focus(options){this.playButton?.focus(options)}blur(){this.playButton?.blur()}click(){this.playButton?.click()}keyboardStepDelta(key){const rtl=this.effectiveDirection==="rtl";if(key==="ArrowLeft")return rtl?1:-1;if(key==="ArrowRight")return rtl?-1:1}render(){const maxIndex=this.maxIndex,currentIndex=finiteCount(this.currentIndex,0,maxIndex),disabled=finiteCount(this.itemCount)<=1;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./sequence-playback.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_playbackStepPosition}from"../../../internal/default-strings.generated.js";const MIN_INTERVAL_MS=16,INVALID_INTERVAL_WARNING_KEY="lyra-sequence-playback-invalid-interval",INVALID_INTERVAL_WARNING="<lr-sequence-playback>: interval-ms is outside the supported timer range and the timer delay was clamped.";function warnInvalidInterval(){devWarnOnce(INVALID_INTERVAL_WARNING_KEY,INVALID_INTERVAL_WARNING)}class LyraSequencePlayback extends LyraElement{constructor(){super(...arguments),this.itemCount=0,this.currentIndex=0,this.intervalMs=900,this.loop=!0,this.hidden=!1,this._playing=!1,this.running=!1,this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.onSliderKeyDown=event=>{const delta=this.keyboardStepDelta(event.key);delta!==void 0&&(event.preventDefault(),this.goTo(finiteCount(this.currentIndex,0,this.maxIndex)+delta))}}static{this.defaultStrings={...super.defaultStrings,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,playbackStepPosition:LYRA_DEFAULT_playbackStepPosition}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={playing:{type:Boolean,reflect:!0,noAccessor:!0},loop:{type:Boolean,converter:trueDefaultBooleanConverter}}}get playing(){return this._playing}set playing(next){if(next&&this.hasUpdated&&finiteCount(this.itemCount)<=1){this.hasAttribute("playing")&&this.removeAttribute("playing");return}const old=this._playing,requested=!!next;requested!==old&&(this._playing=requested,this.requestUpdate("playing",old),requested?this.startIfPossible():this.stopRunning())}startIfPossible(){this.running||!this._playing||finiteCount(this.itemCount)<=1||(this.running=!0,this.emit("lr-play"),this.running&&this._playing&&this.scheduleTick())}stopRunning(){this.clearTimer(),this.running&&(this.running=!1,this.emit("lr-pause"))}rejectInvalidPlayingRequest(){if(!this._playing)return;const old=this._playing;this._playing=!1,this.stopRunning(),this.requestUpdate("playing",old)}get maxIndex(){return Math.max(0,finiteCount(this.itemCount)-1)}disconnectedCallback(){this.pause(),this.clearTimer(),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("hidden")&&this.hidden&&this.pause();const itemCount=finiteCount(this.itemCount),currentIndex=finiteCount(this.currentIndex);itemCount!==this.itemCount&&(this.itemCount=itemCount),currentIndex!==this.currentIndex&&(this.currentIndex=currentIndex),(changed.has("itemCount")||changed.has("playing"))&&(this.itemCount<=1?this.rejectInvalidPlayingRequest():this.startIfPossible(),this.currentIndex>this.maxIndex&&(this.currentIndex=this.maxIndex))}play(){this.playing||finiteCount(this.itemCount)<=1||(this.playing=!0)}pause(){this.playing&&(this.playing=!1)}toggle(){this.playing=!this.playing}scheduleTick(){const rawDelay=this.intervalMs,delay=finiteDuration(rawDelay,MIN_INTERVAL_MS,MIN_INTERVAL_MS);delay!==rawDelay&&warnInvalidInterval();const timerWindow=this.ownerDocument.defaultView;if(!timerWindow)return;const id=timerWindow.setTimeout(()=>{this.timer!==id||this.timerWindow!==timerWindow||(this.tick(),this.running&&this.playing&&this.timer===id&&this.timerWindow===timerWindow&&this.scheduleTick())},delay);this.timer=id,this.timerWindow=timerWindow}clearTimer(){this.timer!==void 0&&this.timerWindow?.clearTimeout(this.timer),this.timer=void 0,this.timerWindow=void 0}tick(){const itemCount=finiteCount(this.itemCount),next=finiteCount(this.currentIndex)+1;next>=itemCount?this.loop?this.setIndex(0):(this.setIndex(itemCount-1),this.pause()):this.setIndex(next)}setIndex(i){this.currentIndex=finiteCount(i,0,this.maxIndex),this.emit("lr-sequence-step",{currentIndex:this.currentIndex})}next(){const currentIndex=finiteCount(this.currentIndex);currentIndex+1<finiteCount(this.itemCount)&&this.setIndex(currentIndex+1)}previous(){const currentIndex=finiteCount(this.currentIndex);currentIndex>0&&this.setIndex(currentIndex-1)}goTo(currentIndex){this.pause(),this.setIndex(finiteCount(currentIndex,0,this.maxIndex))}focus(options){this.playButton?.focus(options)}blur(){this.playButton?.blur()}click(){this.playButton?.click()}keyboardStepDelta(key){const rtl=this.effectiveDirection==="rtl";if(key==="ArrowLeft")return rtl?1:-1;if(key==="ArrowRight")return rtl?-1:1}render(){const maxIndex=this.maxIndex,currentIndex=finiteCount(this.currentIndex,0,maxIndex),disabled=finiteCount(this.itemCount)<=1;return html`
       <div part="base">
         <button
           part="play-button"

package/dist/components/media/sequence-playback/sequence-playback.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{align-items:center;gap:var(--lr-space-s);--_lr-sequence-playback-icon-size:calc(var(--lr-icon-button-size) * .35);display:inline-flex}[part=base]{align-items:center;gap:var(--lr-space-s);display:flex}[part=play-button]{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;font-size:var(--lr-sequence-playback-icon-size,var(--_lr-sequence-playback-icon-size));border-radius:50%;justify-content:center;align-items:center;display:inline-flex}[part=play-button]:hover{border-color:var(--lr-color-brand)}[part=play-button]:active{border-color:var(--lr-sequence-playback-play-button-active-border-color,var(--lr-color-brand));background:var(--lr-sequence-playback-play-button-active-bg,color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=play-button]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=play-button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=slider]{accent-color:var(--lr-color-brand);cursor:pointer}:where([part=slider]):hover:where(:not(:disabled)){accent-color:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}:where([part=slider]):active:where(:not(:disabled)){accent-color:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=slider]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=slider]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};
+import{css}from"lit";const styles=css`:host{align-items:center;gap:var(--lr-space-s);--_lr-sequence-playback-icon-size:calc(var(--lr-icon-button-size) * .35);display:inline-flex}[part=base]{align-items:center;gap:var(--lr-space-s);display:flex}[part=play-button]{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;font-size:var(--lr-sequence-playback-icon-size,var(--_lr-sequence-playback-icon-size));border-radius:50%;justify-content:center;align-items:center;display:inline-flex}[part=play-button]:hover:where(:not(:disabled)){border-color:var(--lr-color-brand)}[part=play-button]:active:where(:not(:disabled)){border-color:var(--lr-sequence-playback-play-button-active-border-color,var(--lr-color-brand));background:var(--lr-sequence-playback-play-button-active-bg,color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=play-button]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=play-button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=slider]{accent-color:var(--lr-color-brand);cursor:pointer}:where([part=slider]):hover:where(:not(:disabled)){accent-color:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}:where([part=slider]):active:where(:not(:disabled)){accent-color:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=slider]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=slider]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};

package/dist/components/media/video/video.class.d.ts

@@ -47,7 +47,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @csspart controls-overlay - Bottom controls positioning layer.
 * @csspart poster-overlay - Poster positioning layer.
 * @csspart poster-play-button - Poster play action.
-* @csspart progress - Native range input used to scrub.
+* @csspart progress - Native range input used to scrub. When disabled, its timeline track retains resting paint.
 * @csspart thumbnail - Active WebVTT thumbnail preview.
 * @csspart timeline - Timeline wrapper.
 * @csspart timeline-indicator - Played portion of the timeline.
@@ -59,6 +59,7 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @cssprop [--controls-background=var(--lr-color-overlay-strong)] - Controls, captions, and title
 *   overlay background.
 * @cssprop [--controls-color=var(--lr-color-on-strong-overlay)] - Custom-control foreground color.
+*   The poster play action defaults to `var(--lr-color-text)` against its surface background.
 * @cssprop [--poster-play-button-background=var(--lr-color-surface-overlay)] - Poster play-button
 *   background.
 * @cssprop [--lr-video-poster-play-button-hover-background=color-mix(...)] - Poster play-button

package/dist/components/media/video/video.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{color:var(--controls-color,var(--lr-color-on-strong-overlay));contain-intrinsic-inline-size:var(--lr-size-20rem);display:block;container-type:inline-size}:host([hidden]){display:none}[part~=video-wrapper]{isolation:isolate;aspect-ratio:16/9;border-radius:var(--lr-radius);background:var(--lr-color-overlay-strong);inline-size:100%;position:relative;overflow:hidden}[part=video]{object-fit:contain;background:var(--lr-color-overlay-strong);block-size:100%;inline-size:100%;display:block}[part=poster-overlay],[part=caption-overlay],[part=controls-overlay],[part=video-title-overlay]{pointer-events:none;position:absolute;inset-inline:0}[part=poster-overlay]{z-index:var(--lr-layer-content);background:var(--lr-color-overlay-strong);place-items:center;display:grid;inset-block:0}[part=poster-overlay] img{object-fit:cover;block-size:100%;inline-size:100%;position:absolute;inset:0}.icon-button-stack{color:var(--controls-color,var(--lr-color-on-strong-overlay));place-items:center;display:inline-grid;position:relative}.icon-button-stack[hidden]{display:none}.icon-button-stack>button,.icon-button-stack>.control-icon-layer{grid-area:1/1}.control-icon-layer{z-index:var(--lr-layer-content);line-height:var(--lr-line-height-none);pointer-events:none;place-items:center;display:inline-grid}[part=poster-play-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);background:var(--poster-play-button-background,var(--lr-color-surface-overlay));color:var(--controls-color,var(--lr-color-on-strong-overlay));box-shadow:var(--lr-shadow-m);cursor:pointer;pointer-events:auto;place-items:center;display:inline-grid;position:relative}[part=poster-play-button]:hover{border-color:var(--lr-video-poster-play-button-hover-border-color,var(--lr-color-brand));background:var(--lr-video-poster-play-button-hover-background,color-mix(in oklab, var(--poster-play-button-background,var(--lr-color-surface-overlay)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}[part=poster-play-button]:active{background:color-mix(in oklab, var(--poster-play-button-background,var(--lr-color-surface-overlay)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=poster-play-button]:focus-visible,[part=controls] button:focus-visible,[part=controls] select:focus-visible,[data-control=volume]:focus-visible,[part=progress]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=video-title-overlay]{z-index:var(--lr-layer-content);padding:var(--lr-space-m);color:var(--controls-color,var(--lr-color-on-strong-overlay));font-size:var(--lr-font-size-sm);font-weight:var(--lr-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(to bottom, var(--controls-background,var(--lr-color-overlay-strong)), transparent);inset-block-start:0;overflow:hidden}[part=caption-overlay]{z-index:var(--lr-layer-content);padding-inline:var(--lr-space-l);justify-content:center;display:flex;inset-block-end:calc(var(--lr-icon-button-size) + var(--lr-space-l) + var(--lr-space-m))}:host([controls=none]) [part=caption-overlay]{inset-block-end:var(--lr-space-l)}[part=caption]{max-inline-size:min(90%, var(--lr-size-36rem));padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius-xs);background:var(--controls-background,var(--lr-color-overlay-strong));color:var(--controls-color,var(--lr-color-on-strong-overlay));font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-1-4);text-align:center;white-space:pre-line}[part=controls-overlay]{z-index:var(--lr-layer-content);padding:var(--lr-space-s);background:linear-gradient(to top, var(--controls-background,var(--lr-color-overlay-strong)), transparent);pointer-events:auto;inset-block-end:0}[part=controls]{align-items:center;gap:var(--lr-space-xs);color:var(--controls-color,var(--lr-color-on-strong-overlay));flex-wrap:wrap;display:flex}[part=controls] button,[part=controls] select{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid transparent;border-radius:var(--lr-radius-xs);color:inherit;cursor:pointer;background:0 0}[part=controls] button{place-items:center;display:inline-grid}.select-control{align-items:center;display:inline-grid;position:relative}.select-control>select{appearance:none;padding-inline-start:var(--lr-space-s);padding-inline-end:var(--lr-space-l)}.select-control-icon{inline-size:var(--lr-font-size-sm);block-size:var(--lr-font-size-sm);pointer-events:none;position:absolute;inset-inline-end:var(--lr-space-xs)}.select-control>select option{background:var(--controls-background,var(--lr-color-overlay-strong));color:var(--controls-color,var(--lr-color-on-strong-overlay))}[data-control=volume]{min-block-size:var(--lr-icon-button-size);accent-color:var(--lr-color-brand);cursor:pointer}[part=controls] button:hover,[part=controls] select:hover,[data-control=volume]:hover{border-color:var(--lr-color-border-strong);background:color-mix(in oklab, var(--controls-background,var(--lr-color-overlay-strong)), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=controls] button:active,[part=controls] select:active,[data-control=volume]:active{background:color-mix(in oklab, var(--controls-background,var(--lr-color-overlay-strong)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=timeline]{flex:1 1 var(--lr-size-10rem);min-inline-size:var(--lr-size-5rem);min-block-size:var(--lr-icon-button-size);direction:ltr;align-items:center;display:flex;position:relative}[part=timeline-track]{block-size:var(--lr-size-0-25rem);border-radius:var(--lr-radius-pill);background:var(--lr-color-border-strong);pointer-events:none;position:absolute;inset-inline:0;overflow:hidden}[part=timeline-indicator]{background:var(--lr-color-brand);block-size:100%;inline-size:0%;display:block}[part=timeline-thumb]{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);border-radius:var(--lr-radius-pill);background:var(--lr-color-brand);pointer-events:none;position:absolute;inset-inline-start:0%;transform:translate(-50%)}[part=progress]{opacity:.001;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}[part=progress]:disabled{cursor:not-allowed}[part=progress]:hover~[part=timeline-track],[part=progress]:focus-visible~[part=timeline-track]{background:color-mix(in oklab, var(--lr-color-border-strong), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=progress]:active~[part=timeline-track]{background:color-mix(in oklab, var(--lr-color-border-strong), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=thumbnail]{z-index:var(--lr-layer-popover);max-inline-size:var(--lr-size-16rem);border:var(--lr-border-width-thin) solid var(--lr-color-border-strong);border-radius:var(--lr-radius-xs);background:var(--lr-color-overlay-strong);box-shadow:var(--lr-shadow-m);pointer-events:none;position:absolute;inset-block-end:calc(100% + var(--lr-space-xs));inset-inline-start:50%;overflow:hidden;transform:translate(-50%)}[part=thumbnail] img{max-inline-size:none;display:block}[data-time]{min-inline-size:var(--lr-size-6ch);color:inherit;font-variant-numeric:tabular-nums;font-size:var(--lr-font-size-xs);text-align:center}lr-icon{pointer-events:none}@container (inline-size<=20rem){:host(:not([controls=none])) [part~=video-wrapper]{aspect-ratio:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"media""controls";display:grid}:host(:not([controls=none])) [part=video]{aspect-ratio:16/9;grid-area:media;block-size:auto}:host(:not([controls=none])) [part=poster-overlay]{grid-area:media;position:relative;inset:auto}:host(:not([controls=none])) [part=caption-overlay]{grid-area:media;align-self:end;margin-block-end:var(--lr-space-m);position:relative;inset:auto}:host(:not([controls=none])) [part=controls-overlay]{grid-area:controls;position:relative;inset:auto}[part=controls-overlay]{padding:var(--lr-space-xs)}[part=timeline]{flex-basis:100%;order:-1}[part=controls] select{max-inline-size:var(--lr-size-8rem)}}@media (prefers-reduced-motion:reduce){[part=poster-play-button],[part=controls] button,[part=controls] select,[part=timeline-thumb]{transition:none}}`;export{styles};
+import{css}from"lit";const styles=css`:host{color:var(--controls-color,var(--lr-color-on-strong-overlay));contain-intrinsic-inline-size:var(--lr-size-20rem);display:block;container-type:inline-size}:host([hidden]){display:none}[part~=video-wrapper]{isolation:isolate;aspect-ratio:16/9;border-radius:var(--lr-radius);background:var(--lr-color-overlay-strong);inline-size:100%;position:relative;overflow:hidden}[part=video]{object-fit:contain;background:var(--lr-color-overlay-strong);block-size:100%;inline-size:100%;display:block}[part=poster-overlay],[part=caption-overlay],[part=controls-overlay],[part=video-title-overlay]{pointer-events:none;position:absolute;inset-inline:0}[part=poster-overlay]{z-index:var(--lr-layer-content);background:var(--lr-color-overlay-strong);place-items:center;display:grid;inset-block:0}[part=poster-overlay] img{object-fit:cover;block-size:100%;inline-size:100%;position:absolute;inset:0}.icon-button-stack{color:var(--controls-color,var(--lr-color-on-strong-overlay));place-items:center;display:inline-grid;position:relative}.icon-button-stack[hidden]{display:none}.icon-button-stack>button,.icon-button-stack>.control-icon-layer{grid-area:1/1}.control-icon-layer{z-index:var(--lr-layer-content);line-height:var(--lr-line-height-none);pointer-events:none;place-items:center;display:inline-grid}[part=poster-overlay] .icon-button-stack,[part=poster-play-button]{color:var(--controls-color,var(--lr-color-text))}[part=poster-play-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);background:var(--poster-play-button-background,var(--lr-color-surface-overlay));box-shadow:var(--lr-shadow-m);cursor:pointer;pointer-events:auto;place-items:center;display:inline-grid;position:relative}[part=poster-play-button]:hover{border-color:var(--lr-video-poster-play-button-hover-border-color,var(--lr-color-brand));background:var(--lr-video-poster-play-button-hover-background,color-mix(in oklab, var(--poster-play-button-background,var(--lr-color-surface-overlay)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}[part=poster-play-button]:active{background:color-mix(in oklab, var(--poster-play-button-background,var(--lr-color-surface-overlay)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=poster-play-button]:focus-visible,[part=controls] button:focus-visible,[part=controls] select:focus-visible,[data-control=volume]:focus-visible,[part=progress]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=video-title-overlay]{z-index:var(--lr-layer-content);padding:var(--lr-space-m);color:var(--controls-color,var(--lr-color-on-strong-overlay));font-size:var(--lr-font-size-sm);font-weight:var(--lr-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(to bottom, var(--controls-background,var(--lr-color-overlay-strong)), transparent);inset-block-start:0;overflow:hidden}[part=caption-overlay]{z-index:var(--lr-layer-content);padding-inline:var(--lr-space-l);justify-content:center;display:flex;inset-block-end:calc(var(--lr-icon-button-size) + var(--lr-space-l) + var(--lr-space-m))}:host([controls=none]) [part=caption-overlay]{inset-block-end:var(--lr-space-l)}[part=caption]{max-inline-size:min(90%, var(--lr-size-36rem));padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius-xs);background:var(--controls-background,var(--lr-color-overlay-strong));color:var(--controls-color,var(--lr-color-on-strong-overlay));font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-1-4);text-align:center;white-space:pre-line}[part=controls-overlay]{z-index:var(--lr-layer-content);padding:var(--lr-space-s);background:linear-gradient(to top, var(--controls-background,var(--lr-color-overlay-strong)), transparent);pointer-events:auto;inset-block-end:0}[part=controls]{align-items:center;gap:var(--lr-space-xs);color:var(--controls-color,var(--lr-color-on-strong-overlay));flex-wrap:wrap;display:flex}[part=controls] button,[part=controls] select{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid transparent;border-radius:var(--lr-radius-xs);color:inherit;cursor:pointer;background:0 0}[part=controls] button{place-items:center;display:inline-grid}.select-control{align-items:center;display:inline-grid;position:relative}.select-control>select{appearance:none;padding-inline-start:var(--lr-space-s);padding-inline-end:var(--lr-space-l)}.select-control-icon{inline-size:var(--lr-font-size-sm);block-size:var(--lr-font-size-sm);pointer-events:none;position:absolute;inset-inline-end:var(--lr-space-xs)}.select-control>select option{background:var(--controls-background,var(--lr-color-overlay-strong));color:var(--controls-color,var(--lr-color-on-strong-overlay))}[data-control=volume]{min-block-size:var(--lr-icon-button-size);accent-color:var(--lr-color-brand);cursor:pointer}[part=controls] button:hover,[part=controls] select:hover,[data-control=volume]:hover{border-color:var(--lr-color-border-strong);background:color-mix(in oklab, var(--controls-background,var(--lr-color-overlay-strong)), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=controls] button:active,[part=controls] select:active,[data-control=volume]:active{background:color-mix(in oklab, var(--controls-background,var(--lr-color-overlay-strong)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=timeline]{flex:1 1 var(--lr-size-10rem);min-inline-size:var(--lr-size-5rem);min-block-size:var(--lr-icon-button-size);direction:ltr;align-items:center;display:flex;position:relative}[part=timeline-track]{block-size:var(--lr-size-0-25rem);border-radius:var(--lr-radius-pill);background:var(--lr-color-border-strong);pointer-events:none;position:absolute;inset-inline:0;overflow:hidden}[part=timeline-indicator]{background:var(--lr-color-brand);block-size:100%;inline-size:0%;display:block}[part=timeline-thumb]{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);border-radius:var(--lr-radius-pill);background:var(--lr-color-brand);pointer-events:none;position:absolute;inset-inline-start:0%;transform:translate(-50%)}[part=progress]{opacity:.001;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}[part=progress]:disabled{cursor:not-allowed}[part=progress]:hover:where(:not(:disabled))~[part=timeline-track],[part=progress]:focus-visible~[part=timeline-track]{background:color-mix(in oklab, var(--lr-color-border-strong), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=progress]:active:where(:not(:disabled))~[part=timeline-track]{background:color-mix(in oklab, var(--lr-color-border-strong), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=thumbnail]{z-index:var(--lr-layer-popover);max-inline-size:var(--lr-size-16rem);border:var(--lr-border-width-thin) solid var(--lr-color-border-strong);border-radius:var(--lr-radius-xs);background:var(--lr-color-overlay-strong);box-shadow:var(--lr-shadow-m);pointer-events:none;position:absolute;inset-block-end:calc(100% + var(--lr-space-xs));inset-inline-start:50%;overflow:hidden;transform:translate(-50%)}[part=thumbnail] img{max-inline-size:none;display:block}[data-time]{min-inline-size:var(--lr-size-6ch);color:inherit;font-variant-numeric:tabular-nums;font-size:var(--lr-font-size-xs);text-align:center}lr-icon{pointer-events:none}@container (inline-size<=20rem){:host(:not([controls=none])) [part~=video-wrapper]{aspect-ratio:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"media""controls";display:grid}:host(:not([controls=none])) [part=video]{aspect-ratio:16/9;grid-area:media;block-size:auto}:host(:not([controls=none])) [part=poster-overlay]{grid-area:media;position:relative;inset:auto}:host(:not([controls=none])) [part=caption-overlay]{grid-area:media;align-self:end;margin-block-end:var(--lr-space-m);position:relative;inset:auto}:host(:not([controls=none])) [part=controls-overlay]{grid-area:controls;position:relative;inset:auto}[part=controls-overlay]{padding:var(--lr-space-xs)}[part=timeline]{flex-basis:100%;order:-1}[part=controls] select{max-inline-size:var(--lr-size-8rem)}}@media (prefers-reduced-motion:reduce){[part=poster-play-button],[part=controls] button,[part=controls] select,[part=timeline-thumb]{transition:none}}`;export{styles};

package/dist/components/media/zoomable-frame/zoomable-frame.class.d.ts

@@ -18,7 +18,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * `inert`, leaves sequential focus, refuses pointer and programmatic activation, and carries no
 * unsupported `aria-disabled` claim. Focus entry through Tab, pointer, or `focus()` is tracked on
 * the host as `data-frame-focused` so the shared focus ring remains visible across the browsing-
-* context boundary.
+* context boundary. Zoom-control focus does not enter that browsing context; transitions between
+* a zoom control and the iframe retain one balanced native focus/blur relay pair.
 *
 * @customElement lr-zoomable-frame
 * @slot zoom-in-icon - Override for the decorative zoom-in glyph. Its flattened subtree is inert
@@ -78,7 +79,7 @@ accessibleLabel:string|null;
 get iframe():HTMLIFrameElement|undefined;private cachedZoomLevelsSource;private cachedZoomLevels;
 /** Focus the internal iframe when interaction is enabled and a live frame is connected. */
 focus(options?:FocusOptions):void;
-/** Blur the internal iframe. */
+/** Blur the internal iframe. Does not blur a focused zoom control. */
 blur():void;
 /** Activate the internal iframe only while interaction is enabled. */
 click():void;

package/dist/components/media/zoomable-frame/zoomable-frame.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{safeDownloadHref}from"../../../internal/safe-url.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{styles}from"./zoomable-frame.styles.js";import{LYRA_DEFAULT_zoomControls,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut,LYRA_DEFAULT_zoomableFrameLabel}from"../../../internal/default-strings.generated.js";const DEFAULT_ZOOM_LEVELS="25% 50% 75% 100% 125% 150% 175% 200%",DEFAULT_IFRAME_SANDBOX="allow-same-origin",DEFAULT_ZOOM_LEVEL_VALUES=[.25,.5,.75,1,1.25,1.5,1.75,2],MIN_ZOOM=.01,MAX_ZOOM=1e3,MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS=16384,MAX_ZOOM_LEVEL_TOKENS=256,SANDBOX_TOKENS=new Set(["allow-downloads","allow-forms","allow-modals","allow-orientation-lock","allow-pointer-lock","allow-popups","allow-popups-to-escape-sandbox","allow-presentation","allow-same-origin","allow-scripts","allow-storage-access-by-user-activation","allow-top-navigation","allow-top-navigation-by-user-activation","allow-top-navigation-to-custom-protocols"]),REFERRER_POLICIES=new Set(["no-referrer","no-referrer-when-downgrade","origin","origin-when-cross-origin","same-origin","strict-origin","strict-origin-when-cross-origin","unsafe-url"]),THEME_ATTRIBUTES=["data-lr-theme","data-theme","data-color-scheme"];function isLyraThemeClass(value){return value==="lr-light"||value==="lr-dark"||value.startsWith("lr-theme-")||value.startsWith("lr-brand-")||value.startsWith("lr-palette-")}function safeZoomableFrameSrc(value){return typeof value=="string"&&value.trim().toLowerCase()==="about:blank"?value.trim():safeDownloadHref(value)}function safeZoomableFrameSandbox(value){if(typeof value!="string")return"";const tokens=[...new Set(value.toLowerCase().split(/\s+/).filter(token=>SANDBOX_TOKENS.has(token)))];return tokens.includes("allow-scripts")&&tokens.includes("allow-same-origin")?tokens.filter(token=>token!=="allow-same-origin").join(" "):tokens.join(" ")}function safeLoading(value){return value==="lazy"?"lazy":"eager"}function safeReferrerPolicy(value){return value===""||value==null?null:typeof value=="string"&&REFERRER_POLICIES.has(value)?value:"no-referrer"}function parseZoomLevels(value){if(typeof value!="string")return DEFAULT_ZOOM_LEVEL_VALUES;const source=value.slice(0,MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS),finalTokenContinues=value.length>MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS&&/\S/u.test(source.at(-1)??"")&&/\S/u.test(value[MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS]??""),tokenPattern=/\S+/g,unique=new Set;let tokenCount=0,match;for(;tokenCount<MAX_ZOOM_LEVEL_TOKENS&&(match=tokenPattern.exec(source))!==null&&!(finalTokenContinues&&tokenPattern.lastIndex===source.length);){tokenCount+=1;const token=match[0],percent=token.endsWith("%"),parsed=Number(percent?token.slice(0,-1):token),level=percent?parsed/100:parsed;Number.isFinite(level)&&level>=MIN_ZOOM&&level<=MAX_ZOOM&&unique.add(level)}return unique.size===0?DEFAULT_ZOOM_LEVEL_VALUES:Object.freeze([...unique].sort((left,right)=>left-right))}class LyraZoomableFrame extends LyraElement{static{this.defaultStrings={...super.defaultStrings,zoomControls:LYRA_DEFAULT_zoomControls,zoomIn:LYRA_DEFAULT_zoomIn,zoomOut:LYRA_DEFAULT_zoomOut,zoomableFrameLabel:LYRA_DEFAULT_zoomableFrameLabel}}static{this.styles=[LyraElement.styles,styles]}get iframe(){return this.renderRoot?.querySelector("iframe")??void 0}focus(options){const frame=this.iframe;if(!frame||!this.isConnected||this.withoutInteraction||frame.inert)return;const previous=this.ownerDocument.activeElement,wasFocused=this.frameOwnsFocus(frame);frame.focus(options),!wasFocused&&this.frameOwnsFocus(frame)&&this.emitHostFocus(void 0,previous)}blur(){const frame=this.iframe;!frame||!this.frameOwnsFocus(frame)||(frame.blur(),this.frameOwnsFocus(frame)||this.emitHostBlur(void 0,this.ownerDocument.activeElement))}click(){this.isConnected&&!this.withoutInteraction&&!this.iframe?.inert&&this.iframe?.click()}frameIsActive(frame=this.iframe){return!!(frame&&this.isConnected&&(this.shadowRoot?.activeElement===frame||this.ownerDocument.activeElement===this))}frameOwnsFocus(frame=this.iframe){return!!(frame&&!frame.inert&&!this.withoutInteraction&&this.frameIsActive(frame))}setFrameFocused(focused){this.toggleAttribute("data-frame-focused",focused)}dispatchHostFocusEvent(type,source,relatedTarget=null){const view=this.ownerDocument.defaultView;if(!view)return;const nativeSource=new view.FocusEvent(type,{relatedTarget:source?.relatedTarget??relatedTarget,view,detail:source?.detail??0});relayNativeEvent(this,nativeSource)}emitHostFocus(source,relatedTarget=null){this.hasEmittedFocus||(this.hasEmittedFocus=!0,this.setFrameFocused(!0),this.dispatchHostFocusEvent("focus",source,relatedTarget))}emitHostBlur(source,relatedTarget=null){this.hasEmittedFocus&&(this.hasEmittedFocus=!1,this.setFrameFocused(!1),this.dispatchHostFocusEvent("blur",source,relatedTarget))}resetFocusBoundaryDocument(){this.focusBoundaryDocument?.removeEventListener("keydown",this.onFocusBoundaryKeyDown,!0),this.focusBoundaryDocument?.removeEventListener("pointerdown",this.scheduleFrameFocusReconciliation,!0),this.focusBoundaryDocument=void 0}bindFocusBoundaryDocument(){let target=null;try{target=this.contentDocument}catch{}!target||target===this.focusBoundaryDocument||(this.resetFocusBoundaryDocument(),this.focusBoundaryDocument=target,target.addEventListener("keydown",this.onFocusBoundaryKeyDown,!0),target.addEventListener("pointerdown",this.scheduleFrameFocusReconciliation,!0))}constructor(){super(),this.src="",this.srcdoc="",this.allowfullscreen=!1,this.loading="eager",this.referrerpolicy="",this.sandbox=DEFAULT_IFRAME_SANDBOX,this.zoom=1,this.zoomLevels=DEFAULT_ZOOM_LEVELS,this.withoutControls=!1,this.withoutInteraction=!1,this.withThemeSync=!1,this.accessibleLabel=null,this.cachedZoomLevelsSource=Symbol("uncached zoom levels"),this.cachedZoomLevels=DEFAULT_ZOOM_LEVEL_VALUES,this.hasEmittedFocus=!1,this.onFrameFocus=event=>{event.stopPropagation(),this.frameOwnsFocus(event.currentTarget)&&this.emitHostFocus(event)},this.onFrameBlur=event=>{event.stopPropagation(),!this.frameOwnsFocus(event.currentTarget)&&this.emitHostBlur(event)},this.focusReconciliationGeneration=0,this.scheduleFrameFocusReconciliation=()=>{const view=this.ownerDocument.defaultView;if(!view)return;const generation=++this.focusReconciliationGeneration;view.setTimeout(()=>{generation!==this.focusReconciliationGeneration||!this.isConnected||(this.frameOwnsFocus()?this.emitHostFocus():this.emitHostBlur(void 0,this.ownerDocument.activeElement))},0)},this.onFocusBoundaryKeyDown=event=>{event.key==="Tab"&&this.scheduleFrameFocusReconciliation()},this.navigationGeneration=0,this.needsReconnectFrame=!1,this.syncedThemeClasses=new Set,this.syncedThemeProperties=new Set,this.onControlsKeyDown=event=>{event.altKey||event.ctrlKey||event.metaKey||(event.key==="+"||event.key==="="?(event.preventDefault(),this.zoomIn()):(event.key==="-"||event.key==="_")&&(event.preventDefault(),this.zoomOut()))},new ThemeWatcher(this,()=>this.syncTheme())}connectedCallback(){super.connectedCallback(),this.ownerDocument.addEventListener("focusin",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.addEventListener("focusout",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.addEventListener("keydown",this.onFocusBoundaryKeyDown,!0),this.ownerDocument.defaultView?.addEventListener("focus",this.scheduleFrameFocusReconciliation),this.ownerDocument.defaultView?.addEventListener("blur",this.scheduleFrameFocusReconciliation);const Observer=this.ownerDocument.defaultView?.MutationObserver;Observer&&(this.lyraThemeObserver?.disconnect(),this.lyraThemeObserver=new Observer(()=>this.syncTheme()),this.lyraThemeObserver.observe(this.ownerDocument.documentElement,{attributes:!0,attributeFilter:["data-lr-theme"]})),this.needsReconnectFrame&&(this.needsReconnectFrame=!1,this.requestUpdate())}disconnectedCallback(){this.focusReconciliationGeneration++,this.ownerDocument.removeEventListener("focusin",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.removeEventListener("focusout",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.removeEventListener("keydown",this.onFocusBoundaryKeyDown,!0),this.ownerDocument.defaultView?.removeEventListener("focus",this.scheduleFrameFocusReconciliation),this.ownerDocument.defaultView?.removeEventListener("blur",this.scheduleFrameFocusReconciliation),this.navigationGeneration++,this.needsReconnectFrame=!0,this.hasEmittedFocus=!1,this.setFrameFocused(!1),this.resetFocusBoundaryDocument(),this.lyraThemeObserver?.disconnect(),this.lyraThemeObserver=void 0,this.resetThemeSyncState(),super.disconnectedCallback()}attributeChangedCallback(name,oldValue,value){super.attributeChangedCallback(name,oldValue,value),name==="srcdoc"&&oldValue===null!=(value===null)&&(this.navigationGeneration++,this.requestUpdate())}willUpdate(changed){if(super.willUpdate(changed),changed.has("src")||changed.has("srcdoc")||changed.has("allowfullscreen")||changed.has("loading")||changed.has("referrerpolicy")||changed.has("sandbox")){const frame=this.iframe,wasFocused=this.frameIsActive(frame);frame?.blur(),wasFocused&&!this.frameIsActive(frame)&&this.emitHostBlur(void 0,this.ownerDocument.activeElement),this.setFrameFocused(!1),this.resetFocusBoundaryDocument(),this.navigationGeneration++}if(changed.has("withoutInteraction")&&this.withoutInteraction){const frame=this.iframe,wasFocused=this.frameIsActive(frame);frame?.blur(),wasFocused&&this.emitHostBlur(void 0,this.ownerDocument.activeElement),this.setFrameFocused(!1)}}updated(changed){super.updated(changed),changed.has("withThemeSync")&&(this.withThemeSync?this.syncTheme():this.restoreTheme())}get contentWindow(){return this.isConnected?this.iframe?.contentWindow??null:null}get contentDocument(){if(!this.isConnected)return null;try{return this.iframe?.contentDocument??null}catch{return null}}get safeZoom(){return finiteRange(this.zoom,1,MIN_ZOOM,MAX_ZOOM)}get availableZoomLevels(){const source=this.zoomLevels;return source===this.cachedZoomLevelsSource?this.cachedZoomLevels:(this.cachedZoomLevelsSource=source,this.cachedZoomLevels=parseZoomLevels(source),this.cachedZoomLevels)}get hasInlineDocument(){return this.hasAttribute("srcdoc")||typeof this.srcdoc=="string"&&this.srcdoc!==""}get hasNavigation(){return this.hasInlineDocument||safeZoomableFrameSrc(this.src)!==null}navigationSignature(){const inline=this.hasInlineDocument;return JSON.stringify([inline,inline?this.srcdoc:safeZoomableFrameSrc(this.src),this.allowfullscreen,safeLoading(this.loading),safeReferrerPolicy(this.referrerpolicy),safeZoomableFrameSandbox(this.sandbox)])}zoomIn(){const current=this.safeZoom,next=this.availableZoomLevels.find(level=>level>current);next!==void 0&&(this.zoom=next)}zoomOut(){const current=this.safeZoom,levels=this.availableZoomLevels;for(let index=levels.length-1;index>=0;index--){const previous=levels[index];if(previous!==void 0&&previous<current){this.zoom=previous;return}}}isZoomInDisabled(){return!this.availableZoomLevels.some(level=>level>this.safeZoom)}isZoomOutDisabled(){return!this.availableZoomLevels.some(level=>level<this.safeZoom)}dispatchFrameEvent(type){const EventConstructor=this.ownerDocument.defaultView?.Event??Event;type==="load"?this.dispatchEvent(new EventConstructor("load",{bubbles:!1,composed:!1})):this.dispatchEvent(new EventConstructor("error",{bubbles:!1,composed:!1}))}onFrameEvent(type,source,generation,navigationSignature){source.stopPropagation(),!(!this.isConnected||!this.hasNavigation||generation!==this.navigationGeneration||navigationSignature!==this.navigationSignature()||source.currentTarget!==this.iframe)&&(type==="load"&&(this.bindFocusBoundaryDocument(),this.syncTheme()),this.dispatchFrameEvent(type))}syncTheme(){if(!this.withThemeSync||!this.isConnected)return;const target=this.contentDocument?.documentElement,source=this.ownerDocument.documentElement;if(!(!target||!source))try{const state=this.themeStateFor(target),nextClasses=new Set([...source.classList].filter(isLyraThemeClass));for(const className of this.syncedThemeClasses)nextClasses.has(className)||this.setSyncedThemeClass(state,className,!1);for(const className of nextClasses)this.setSyncedThemeClass(state,className,!0);this.syncedThemeClasses=nextClasses;for(const attribute of THEME_ATTRIBUTES){const value=source.getAttribute(attribute);this.setSyncedThemeAttribute(state,attribute,value)}const computed=this.ownerDocument.defaultView?.getComputedStyle(this);if(!computed)return;const nextProperties=new Set;for(let index=0;index<computed.length;index++){const property2=computed.item(index);property2.startsWith("--lr-theme-")&&(this.setSyncedThemeProperty(state,property2,computed.getPropertyValue(property2)),nextProperties.add(property2))}for(const property2 of this.syncedThemeProperties)nextProperties.has(property2)||this.setSyncedThemeProperty(state,property2,null);this.syncedThemeProperties=nextProperties,this.setSyncedThemeProperty(state,"color-scheme",computed.colorScheme)}catch{}}themeStateFor(target){if(this.themeSyncState?.target===target)return this.themeSyncState;this.resetThemeSyncState();const state={target,classes:new Map,attributes:new Map,properties:new Map};return this.themeSyncState=state,state}setSyncedThemeClass(state,className,present){let mutation=state.classes.get(className);mutation||(mutation={original:state.target.classList.contains(className),applied:state.target.classList.contains(className)},state.classes.set(className,mutation)),state.target.classList.toggle(className,present),mutation.applied=state.target.classList.contains(className)}setSyncedThemeAttribute(state,attribute,value){let mutation=state.attributes.get(attribute);if(!mutation){const original=state.target.getAttribute(attribute);mutation={original,applied:original},state.attributes.set(attribute,mutation)}value===null?state.target.removeAttribute(attribute):state.target.setAttribute(attribute,value),mutation.applied=state.target.getAttribute(attribute)}setSyncedThemeProperty(state,property2,value){let mutation=state.properties.get(property2);mutation||(mutation={original:state.target.style.getPropertyValue(property2),originalPriority:state.target.style.getPropertyPriority(property2),applied:state.target.style.getPropertyValue(property2),appliedPriority:state.target.style.getPropertyPriority(property2)},state.properties.set(property2,mutation)),value===null?state.target.style.removeProperty(property2):state.target.style.setProperty(property2,value),mutation.applied=state.target.style.getPropertyValue(property2),mutation.appliedPriority=state.target.style.getPropertyPriority(property2)}restoreTheme(){const state=this.themeSyncState;if(state)try{if(this.contentDocument?.documentElement!==state.target)return;for(const[className,mutation]of state.classes)state.target.classList.contains(className)===mutation.applied&&state.target.classList.toggle(className,mutation.original);for(const[attribute,mutation]of state.attributes)state.target.getAttribute(attribute)===mutation.applied&&(mutation.original===null?state.target.removeAttribute(attribute):state.target.setAttribute(attribute,mutation.original));for(const[property2,mutation]of state.properties)state.target.style.getPropertyValue(property2)!==mutation.applied||state.target.style.getPropertyPriority(property2)!==mutation.appliedPriority||(mutation.original?state.target.style.setProperty(property2,mutation.original,mutation.originalPriority):state.target.style.removeProperty(property2))}catch{}finally{this.resetThemeSyncState()}}resetThemeSyncState(){this.themeSyncState=void 0,this.syncedThemeClasses.clear(),this.syncedThemeProperties.clear()}renderControls(){return this.withoutControls?nothing:html`<div
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{safeDownloadHref}from"../../../internal/safe-url.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{styles}from"./zoomable-frame.styles.js";import{LYRA_DEFAULT_zoomControls,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut,LYRA_DEFAULT_zoomableFrameLabel}from"../../../internal/default-strings.generated.js";const DEFAULT_ZOOM_LEVELS="25% 50% 75% 100% 125% 150% 175% 200%",DEFAULT_IFRAME_SANDBOX="allow-same-origin",DEFAULT_ZOOM_LEVEL_VALUES=[.25,.5,.75,1,1.25,1.5,1.75,2],MIN_ZOOM=.01,MAX_ZOOM=1e3,MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS=16384,MAX_ZOOM_LEVEL_TOKENS=256,SANDBOX_TOKENS=new Set(["allow-downloads","allow-forms","allow-modals","allow-orientation-lock","allow-pointer-lock","allow-popups","allow-popups-to-escape-sandbox","allow-presentation","allow-same-origin","allow-scripts","allow-storage-access-by-user-activation","allow-top-navigation","allow-top-navigation-by-user-activation","allow-top-navigation-to-custom-protocols"]),REFERRER_POLICIES=new Set(["no-referrer","no-referrer-when-downgrade","origin","origin-when-cross-origin","same-origin","strict-origin","strict-origin-when-cross-origin","unsafe-url"]),THEME_ATTRIBUTES=["data-lr-theme","data-theme","data-color-scheme"];function isLyraThemeClass(value){return value==="lr-light"||value==="lr-dark"||value.startsWith("lr-theme-")||value.startsWith("lr-brand-")||value.startsWith("lr-palette-")}function safeZoomableFrameSrc(value){return typeof value=="string"&&value.trim().toLowerCase()==="about:blank"?value.trim():safeDownloadHref(value)}function safeZoomableFrameSandbox(value){if(typeof value!="string")return"";const tokens=[...new Set(value.toLowerCase().split(/\s+/).filter(token=>SANDBOX_TOKENS.has(token)))];return tokens.includes("allow-scripts")&&tokens.includes("allow-same-origin")?tokens.filter(token=>token!=="allow-same-origin").join(" "):tokens.join(" ")}function safeLoading(value){return value==="lazy"?"lazy":"eager"}function safeReferrerPolicy(value){return value===""||value==null?null:typeof value=="string"&&REFERRER_POLICIES.has(value)?value:"no-referrer"}function parseZoomLevels(value){if(typeof value!="string")return DEFAULT_ZOOM_LEVEL_VALUES;const source=value.slice(0,MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS),finalTokenContinues=value.length>MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS&&/\S/u.test(source.at(-1)??"")&&/\S/u.test(value[MAX_ZOOM_LEVEL_SOURCE_CODE_UNITS]??""),tokenPattern=/\S+/g,unique=new Set;let tokenCount=0,match;for(;tokenCount<MAX_ZOOM_LEVEL_TOKENS&&(match=tokenPattern.exec(source))!==null&&!(finalTokenContinues&&tokenPattern.lastIndex===source.length);){tokenCount+=1;const token=match[0],percent=token.endsWith("%"),parsed=Number(percent?token.slice(0,-1):token),level=percent?parsed/100:parsed;Number.isFinite(level)&&level>=MIN_ZOOM&&level<=MAX_ZOOM&&unique.add(level)}return unique.size===0?DEFAULT_ZOOM_LEVEL_VALUES:Object.freeze([...unique].sort((left,right)=>left-right))}class LyraZoomableFrame extends LyraElement{static{this.defaultStrings={...super.defaultStrings,zoomControls:LYRA_DEFAULT_zoomControls,zoomIn:LYRA_DEFAULT_zoomIn,zoomOut:LYRA_DEFAULT_zoomOut,zoomableFrameLabel:LYRA_DEFAULT_zoomableFrameLabel}}static{this.styles=[LyraElement.styles,styles]}get iframe(){return this.renderRoot?.querySelector("iframe")??void 0}focus(options){const frame=this.iframe;if(!frame||!this.isConnected||this.withoutInteraction||frame.inert)return;const previous=this.ownerDocument.activeElement,wasFocused=this.frameOwnsFocus(frame);frame.focus(options),!wasFocused&&this.frameOwnsFocus(frame)&&this.emitHostFocus(void 0,previous)}blur(){const frame=this.iframe;!frame||!this.frameOwnsFocus(frame)||(frame.blur(),this.frameOwnsFocus(frame)||this.emitHostBlur(void 0,this.ownerDocument.activeElement))}click(){this.isConnected&&!this.withoutInteraction&&!this.iframe?.inert&&this.iframe?.click()}frameIsActive(frame=this.iframe){return!!(frame&&this.isConnected&&this.shadowRoot?.activeElement===frame)}frameOwnsFocus(frame=this.iframe){return!!(frame&&!frame.inert&&!this.withoutInteraction&&this.frameIsActive(frame))}setFrameFocused(focused){this.toggleAttribute("data-frame-focused",focused)}dispatchHostFocusEvent(type,source,relatedTarget=null){const view=this.ownerDocument.defaultView;if(!view)return;const related=source?.relatedTarget??relatedTarget,relatedNode=related,internalRelated=related===this||relatedNode?.nodeType!==void 0&&this.shadowRoot?.contains(relatedNode),nativeSource=new view.FocusEvent(type,{relatedTarget:internalRelated?null:related,view,detail:source?.detail??0});relayNativeEvent(this,nativeSource)}emitHostFocus(source,relatedTarget=null){this.hasEmittedFocus||(this.hasEmittedFocus=!0,this.setFrameFocused(!0),this.dispatchHostFocusEvent("focus",source,relatedTarget))}emitHostBlur(source,relatedTarget=null){this.hasEmittedFocus&&(this.hasEmittedFocus=!1,this.setFrameFocused(!1),this.dispatchHostFocusEvent("blur",source,relatedTarget))}resetFocusBoundaryDocument(){this.focusBoundaryDocument?.removeEventListener("keydown",this.onFocusBoundaryKeyDown,!0),this.focusBoundaryDocument?.removeEventListener("pointerdown",this.scheduleFrameFocusReconciliation,!0),this.focusBoundaryDocument=void 0}bindFocusBoundaryDocument(){let target=null;try{target=this.contentDocument}catch{}!target||target===this.focusBoundaryDocument||(this.resetFocusBoundaryDocument(),this.focusBoundaryDocument=target,target.addEventListener("keydown",this.onFocusBoundaryKeyDown,!0),target.addEventListener("pointerdown",this.scheduleFrameFocusReconciliation,!0))}constructor(){super(),this.src="",this.srcdoc="",this.allowfullscreen=!1,this.loading="eager",this.referrerpolicy="",this.sandbox=DEFAULT_IFRAME_SANDBOX,this.zoom=1,this.zoomLevels=DEFAULT_ZOOM_LEVELS,this.withoutControls=!1,this.withoutInteraction=!1,this.withThemeSync=!1,this.accessibleLabel=null,this.cachedZoomLevelsSource=Symbol("uncached zoom levels"),this.cachedZoomLevels=DEFAULT_ZOOM_LEVEL_VALUES,this.hasEmittedFocus=!1,this.onFrameFocus=event=>{event.stopPropagation(),this.frameOwnsFocus(event.currentTarget)&&this.emitHostFocus(event)},this.onFrameBlur=event=>{event.stopPropagation(),!this.frameOwnsFocus(event.currentTarget)&&this.emitHostBlur(event)},this.focusReconciliationGeneration=0,this.scheduleFrameFocusReconciliation=()=>{const view=this.ownerDocument.defaultView;if(!view)return;const generation=++this.focusReconciliationGeneration;view.setTimeout(()=>{generation!==this.focusReconciliationGeneration||!this.isConnected||(this.frameOwnsFocus()?this.emitHostFocus():this.emitHostBlur(void 0,this.ownerDocument.activeElement))},0)},this.onFocusBoundaryKeyDown=event=>{event.key==="Tab"&&this.scheduleFrameFocusReconciliation()},this.navigationGeneration=0,this.needsReconnectFrame=!1,this.syncedThemeClasses=new Set,this.syncedThemeProperties=new Set,this.onControlsKeyDown=event=>{event.altKey||event.ctrlKey||event.metaKey||(event.key==="+"||event.key==="="?(event.preventDefault(),this.zoomIn()):(event.key==="-"||event.key==="_")&&(event.preventDefault(),this.zoomOut()))},new ThemeWatcher(this,()=>this.syncTheme())}connectedCallback(){super.connectedCallback(),this.ownerDocument.addEventListener("focusin",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.addEventListener("focusout",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.addEventListener("keydown",this.onFocusBoundaryKeyDown,!0),this.ownerDocument.defaultView?.addEventListener("focus",this.scheduleFrameFocusReconciliation),this.ownerDocument.defaultView?.addEventListener("blur",this.scheduleFrameFocusReconciliation);const Observer=this.ownerDocument.defaultView?.MutationObserver;Observer&&(this.lyraThemeObserver?.disconnect(),this.lyraThemeObserver=new Observer(()=>this.syncTheme()),this.lyraThemeObserver.observe(this.ownerDocument.documentElement,{attributes:!0,attributeFilter:["data-lr-theme"]})),this.needsReconnectFrame&&(this.needsReconnectFrame=!1,this.requestUpdate())}disconnectedCallback(){this.focusReconciliationGeneration++,this.ownerDocument.removeEventListener("focusin",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.removeEventListener("focusout",this.scheduleFrameFocusReconciliation,!0),this.ownerDocument.removeEventListener("keydown",this.onFocusBoundaryKeyDown,!0),this.ownerDocument.defaultView?.removeEventListener("focus",this.scheduleFrameFocusReconciliation),this.ownerDocument.defaultView?.removeEventListener("blur",this.scheduleFrameFocusReconciliation),this.navigationGeneration++,this.needsReconnectFrame=!0,this.hasEmittedFocus=!1,this.setFrameFocused(!1),this.resetFocusBoundaryDocument(),this.lyraThemeObserver?.disconnect(),this.lyraThemeObserver=void 0,this.resetThemeSyncState(),super.disconnectedCallback()}attributeChangedCallback(name,oldValue,value){super.attributeChangedCallback(name,oldValue,value),name==="srcdoc"&&oldValue===null!=(value===null)&&(this.navigationGeneration++,this.requestUpdate())}willUpdate(changed){if(super.willUpdate(changed),changed.has("src")||changed.has("srcdoc")||changed.has("allowfullscreen")||changed.has("loading")||changed.has("referrerpolicy")||changed.has("sandbox")){const frame=this.iframe,wasFocused=this.frameIsActive(frame);frame?.blur(),wasFocused&&!this.frameIsActive(frame)&&this.emitHostBlur(void 0,this.ownerDocument.activeElement),this.setFrameFocused(!1),this.resetFocusBoundaryDocument(),this.navigationGeneration++}if(changed.has("withoutInteraction")&&this.withoutInteraction){const frame=this.iframe,wasFocused=this.frameIsActive(frame);frame?.blur(),wasFocused&&this.emitHostBlur(void 0,this.ownerDocument.activeElement),this.setFrameFocused(!1)}}updated(changed){super.updated(changed),changed.has("withThemeSync")&&(this.withThemeSync?this.syncTheme():this.restoreTheme())}get contentWindow(){return this.isConnected?this.iframe?.contentWindow??null:null}get contentDocument(){if(!this.isConnected)return null;try{return this.iframe?.contentDocument??null}catch{return null}}get safeZoom(){return finiteRange(this.zoom,1,MIN_ZOOM,MAX_ZOOM)}get availableZoomLevels(){const source=this.zoomLevels;return source===this.cachedZoomLevelsSource?this.cachedZoomLevels:(this.cachedZoomLevelsSource=source,this.cachedZoomLevels=parseZoomLevels(source),this.cachedZoomLevels)}get hasInlineDocument(){return this.hasAttribute("srcdoc")||typeof this.srcdoc=="string"&&this.srcdoc!==""}get hasNavigation(){return this.hasInlineDocument||safeZoomableFrameSrc(this.src)!==null}navigationSignature(){const inline=this.hasInlineDocument;return JSON.stringify([inline,inline?this.srcdoc:safeZoomableFrameSrc(this.src),this.allowfullscreen,safeLoading(this.loading),safeReferrerPolicy(this.referrerpolicy),safeZoomableFrameSandbox(this.sandbox)])}zoomIn(){const current=this.safeZoom,next=this.availableZoomLevels.find(level=>level>current);next!==void 0&&(this.zoom=next)}zoomOut(){const current=this.safeZoom,levels=this.availableZoomLevels;for(let index=levels.length-1;index>=0;index--){const previous=levels[index];if(previous!==void 0&&previous<current){this.zoom=previous;return}}}isZoomInDisabled(){return!this.availableZoomLevels.some(level=>level>this.safeZoom)}isZoomOutDisabled(){return!this.availableZoomLevels.some(level=>level<this.safeZoom)}dispatchFrameEvent(type){const EventConstructor=this.ownerDocument.defaultView?.Event??Event;type==="load"?this.dispatchEvent(new EventConstructor("load",{bubbles:!1,composed:!1})):this.dispatchEvent(new EventConstructor("error",{bubbles:!1,composed:!1}))}onFrameEvent(type,source,generation,navigationSignature){source.stopPropagation(),!(!this.isConnected||!this.hasNavigation||generation!==this.navigationGeneration||navigationSignature!==this.navigationSignature()||source.currentTarget!==this.iframe)&&(type==="load"&&(this.bindFocusBoundaryDocument(),this.syncTheme()),this.dispatchFrameEvent(type))}syncTheme(){if(!this.withThemeSync||!this.isConnected)return;const target=this.contentDocument?.documentElement,source=this.ownerDocument.documentElement;if(!(!target||!source))try{const state=this.themeStateFor(target),nextClasses=new Set([...source.classList].filter(isLyraThemeClass));for(const className of this.syncedThemeClasses)nextClasses.has(className)||this.setSyncedThemeClass(state,className,!1);for(const className of nextClasses)this.setSyncedThemeClass(state,className,!0);this.syncedThemeClasses=nextClasses;for(const attribute of THEME_ATTRIBUTES){const value=source.getAttribute(attribute);this.setSyncedThemeAttribute(state,attribute,value)}const computed=this.ownerDocument.defaultView?.getComputedStyle(this);if(!computed)return;const nextProperties=new Set;for(let index=0;index<computed.length;index++){const property2=computed.item(index);property2.startsWith("--lr-theme-")&&(this.setSyncedThemeProperty(state,property2,computed.getPropertyValue(property2)),nextProperties.add(property2))}for(const property2 of this.syncedThemeProperties)nextProperties.has(property2)||this.setSyncedThemeProperty(state,property2,null);this.syncedThemeProperties=nextProperties,this.setSyncedThemeProperty(state,"color-scheme",computed.colorScheme)}catch{}}themeStateFor(target){if(this.themeSyncState?.target===target)return this.themeSyncState;this.resetThemeSyncState();const state={target,classes:new Map,attributes:new Map,properties:new Map};return this.themeSyncState=state,state}setSyncedThemeClass(state,className,present){let mutation=state.classes.get(className);mutation||(mutation={original:state.target.classList.contains(className),applied:state.target.classList.contains(className)},state.classes.set(className,mutation)),state.target.classList.toggle(className,present),mutation.applied=state.target.classList.contains(className)}setSyncedThemeAttribute(state,attribute,value){let mutation=state.attributes.get(attribute);if(!mutation){const original=state.target.getAttribute(attribute);mutation={original,applied:original},state.attributes.set(attribute,mutation)}value===null?state.target.removeAttribute(attribute):state.target.setAttribute(attribute,value),mutation.applied=state.target.getAttribute(attribute)}setSyncedThemeProperty(state,property2,value){let mutation=state.properties.get(property2);mutation||(mutation={original:state.target.style.getPropertyValue(property2),originalPriority:state.target.style.getPropertyPriority(property2),applied:state.target.style.getPropertyValue(property2),appliedPriority:state.target.style.getPropertyPriority(property2)},state.properties.set(property2,mutation)),value===null?state.target.style.removeProperty(property2):state.target.style.setProperty(property2,value),mutation.applied=state.target.style.getPropertyValue(property2),mutation.appliedPriority=state.target.style.getPropertyPriority(property2)}restoreTheme(){const state=this.themeSyncState;if(state)try{if(this.contentDocument?.documentElement!==state.target)return;for(const[className,mutation]of state.classes)state.target.classList.contains(className)===mutation.applied&&state.target.classList.toggle(className,mutation.original);for(const[attribute,mutation]of state.attributes)state.target.getAttribute(attribute)===mutation.applied&&(mutation.original===null?state.target.removeAttribute(attribute):state.target.setAttribute(attribute,mutation.original));for(const[property2,mutation]of state.properties)state.target.style.getPropertyValue(property2)!==mutation.applied||state.target.style.getPropertyPriority(property2)!==mutation.appliedPriority||(mutation.original?state.target.style.setProperty(property2,mutation.original,mutation.originalPriority):state.target.style.removeProperty(property2))}catch{}finally{this.resetThemeSyncState()}}resetThemeSyncState(){this.themeSyncState=void 0,this.syncedThemeClasses.clear(),this.syncedThemeProperties.clear()}renderControls(){return this.withoutControls?nothing:html`<div
       part="controls"
       role="group"
       aria-label=${this.localize("zoomControls")}
@@ -18,7 +18,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         ?disabled=${this.isZoomInDisabled()}
         @click=${()=>this.zoomIn()}
       ><span aria-hidden="true" inert><slot name="zoom-in-icon">+</slot></span></button>
-    </div>`}render(){const generation=this.navigationGeneration,navigationSignature=this.navigationSignature(),inline=this.hasInlineDocument,src=inline?null:safeZoomableFrameSrc(this.src),referrerPolicy=safeReferrerPolicy(this.referrerpolicy),explicitHostLabel=hostAriaLabel(this),label=explicitHostLabel===""?"":explicitHostLabel!==null?this.localize("zoomableFrameLabel"):this.accessibleLabel??this.localize("zoomableFrameLabel"),zoom=this.safeZoom,frame=html`<iframe
+    </div>`}render(){const generation=this.navigationGeneration,navigationSignature=this.navigationSignature(),inline=this.hasInlineDocument,src=inline?null:safeZoomableFrameSrc(this.src),referrerPolicy=safeReferrerPolicy(this.referrerpolicy),explicitHostLabel=this.getAttribute("aria-label"),label=explicitHostLabel===""?"":explicitHostLabel!==null?this.localize("zoomableFrameLabel"):this.accessibleLabel??this.localize("zoomableFrameLabel"),zoom=this.safeZoom,frame=html`<iframe
       part="iframe"
       title=${label}
       src=${src??nothing}

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;display:none}:host([open]),:host([data-alert-showing]),:host([data-alert-hiding]){display:block}:host([variant=primary]){--lr-color-fill-quiet:var(--lr-color-brand-fill-quiet);--lr-color-fill-normal:var(--lr-color-brand-fill-normal);--lr-color-fill-loud:var(--lr-color-brand-fill-loud);--lr-color-border-quiet:var(--lr-color-brand-border-quiet);--lr-color-border-normal:var(--lr-color-brand-border-normal);--lr-color-border-loud:var(--lr-color-brand-border-loud);--lr-color-on-quiet:var(--lr-color-brand-on-quiet);--lr-color-on-normal:var(--lr-color-brand-on-normal);--lr-color-on-loud:var(--lr-color-brand-on-loud)}[part=base]{align-items:start;gap:var(--lr-space-s);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border-normal);border-radius:var(--lr-radius);background:var(--lr-color-fill-quiet);color:var(--lr-color-on-quiet);box-shadow:var(--lr-shadow-s);opacity:1;transition:opacity var(--lr-duration-fast) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-standard);grid-template-columns:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;transform:none}[part=base][hidden]{display:none}:host([data-alert-showing]) [part=base],:host([data-alert-hiding]) [part=base]{opacity:0;transform:translateY(var(--lr-size-neg-8px))}[part=icon]{color:var(--lr-color-fill-loud);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);min-inline-size:0;max-inline-size:var(--lr-icon-button-size);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden]{display:none}[part=message]{overflow-wrap:anywhere;unicode-bidi:plaintext;grid-column:2;min-inline-size:0}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);margin-block:calc(-1 * var(--lr-space-xs));padding:var(--lr-space-xs);border-radius:var(--lr-radius-pill);color:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--lr-space-xs));display:inline-flex}[part~=close-button]:where(:hover){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part~=close-button]:where(:active){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part~=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}.countdown{block-size:var(--lr-size-4px);background:var(--lr-color-fill-loud);position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(1)}@media (prefers-reduced-motion:reduce){[part=base]{transition:none}.countdown{display:none}}`;export{styles};
+import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;display:none}:host([open]),:host([data-alert-showing]),:host([data-alert-hiding]){display:block}:host([variant=primary]){--lr-color-fill-quiet:var(--lr-color-brand-fill-quiet);--lr-color-fill-normal:var(--lr-color-brand-fill-normal);--lr-color-fill-loud:var(--lr-color-brand-fill-loud);--lr-color-border-quiet:var(--lr-color-brand-border-quiet);--lr-color-border-normal:var(--lr-color-brand-border-normal);--lr-color-border-loud:var(--lr-color-brand-border-loud);--lr-color-on-quiet:var(--lr-color-brand-on-quiet);--lr-color-on-normal:var(--lr-color-brand-on-normal);--lr-color-on-loud:var(--lr-color-brand-on-loud)}[part=base]{align-items:start;gap:var(--lr-space-s);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border-normal);border-radius:var(--lr-radius);background:var(--lr-color-fill-quiet);color:var(--lr-color-on-quiet);box-shadow:var(--lr-shadow-s);opacity:1;transition:opacity var(--lr-duration-fast) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-standard);grid-template-columns:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;transform:none}[part=base][hidden]{display:none}:host([data-alert-showing]) [part=base],:host([data-alert-hiding]) [part=base]{opacity:0;transform:translateY(var(--lr-size-neg-8px))}[part=icon]{color:var(--lr-color-fill-loud);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);min-inline-size:0;max-inline-size:var(--lr-icon-button-size);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden]{display:none}[part=message]{overflow-wrap:anywhere;unicode-bidi:plaintext;grid-column:2;min-inline-size:0}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);margin-block:calc(-1 * var(--lr-space-xs));padding:var(--lr-space-xs);border-radius:var(--lr-radius-pill);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--lr-space-xs));display:inline-flex}[part~=close-button]:where(:hover){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part~=close-button]:where(:active){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part~=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}.countdown{block-size:var(--lr-size-4px);background:var(--lr-color-fill-loud);position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(1)}@media (prefers-reduced-motion:reduce){[part=base]{transition:none}.countdown{display:none}}`;export{styles};

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{box-sizing:border-box;--_lr-callout-close-hover-bg:var(--lr-color-brand-quiet);--_lr-callout-background:var(--lr-color-fill-quiet,var(--lr-color-brand-fill-quiet));--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-font-size:var(--lr-form-control-font-size,var(--lr-font-size-m));--_lr-callout-padding:var(--lr-form-control-padding-inline,var(--lr-space-m));--_lr-callout-gap:var(--lr-space-s);max-inline-size:100%;padding:var(--lr-callout-padding,var(--_lr-callout-padding));border:var(--lr-border-width-thin) solid var(--lr-callout-border,var(--_lr-callout-border));border-radius:var(--lr-radius-xs);background:var(--lr-callout-background,var(--_lr-callout-background));color:var(--lr-callout-color,var(--_lr-callout-color));font-size:var(--lr-callout-font-size,var(--_lr-callout-font-size));display:block}[part=base]{box-sizing:border-box;align-items:start;gap:var(--lr-callout-gap,var(--_lr-callout-gap));max-inline-size:100%;color:inherit;font-size:inherit;background:0 0;border:0;border-radius:0;grid-template-columns:auto minmax(0,1fr) auto;padding:0;display:grid}:host([appearance=filled-outlined]){--_lr-callout-background:var(--lr-color-fill-quiet,var(--lr-color-brand-fill-quiet));--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}:host([appearance=filled]){--_lr-callout-background:var(--lr-color-fill-quiet,var(--lr-color-brand-fill-quiet));--_lr-callout-border:transparent;--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}:host([appearance=outlined]){--_lr-callout-background:transparent;--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}:host([appearance=accent]){--_lr-callout-background:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-on-loud,var(--lr-color-brand-on-loud))}:host([appearance=plain]){--_lr-callout-background:transparent;--_lr-callout-border:transparent;--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}[part=icon]{min-inline-size:0;max-inline-size:var(--lr-icon-button-size);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden],[part=close-button][hidden]{display:none}[part=heading]{font-weight:var(--lr-font-weight-semibold);margin-block-end:var(--lr-space-xs)}[part=content]{overflow-wrap:break-word;grid-column:2;min-inline-size:0}[part=message]{overflow-wrap:break-word;min-inline-size:0}[part=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);color:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;display:inline-flex}[part=close-button]:where(:hover){background:var(--lr-callout-close-hover-bg,var(--_lr-callout-close-hover-bg))}[part=close-button]:where(:active){background:color-mix(in oklab, var(--lr-callout-close-hover-bg,var(--_lr-callout-close-hover-bg)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:where([inline])){background:0 0;border:0;border-radius:0;padding:0}:host(:where([inline])) [part=base]{gap:var(--lr-space-xs)}:host(:where([inline])) [part=icon]{font-size:var(--lr-font-size-m)}:host(:where([inline])) [part=heading]{margin-block-end:0}:host(:where([inline])) [part=close-icon]{inline-size:var(--lr-size-1-5rem);block-size:var(--lr-size-1-5rem);justify-content:center;align-items:center;display:inline-flex}:host(:where(:not([open]))){display:none}`;export{styles};
+import{css}from"lit";const styles=css`:host{box-sizing:border-box;--_lr-callout-close-hover-bg:var(--lr-color-brand-quiet);--_lr-callout-background:var(--lr-color-fill-quiet,var(--lr-color-brand-fill-quiet));--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-font-size:var(--lr-form-control-font-size,var(--lr-font-size-m));--_lr-callout-padding:var(--lr-form-control-padding-inline,var(--lr-space-m));--_lr-callout-gap:var(--lr-space-s);max-inline-size:100%;padding:var(--lr-callout-padding,var(--_lr-callout-padding));border:var(--lr-border-width-thin) solid var(--lr-callout-border,var(--_lr-callout-border));border-radius:var(--lr-radius-xs);background:var(--lr-callout-background,var(--_lr-callout-background));color:var(--lr-callout-color,var(--_lr-callout-color));font-size:var(--lr-callout-font-size,var(--_lr-callout-font-size));display:block}[part=base]{box-sizing:border-box;align-items:start;gap:var(--lr-callout-gap,var(--_lr-callout-gap));max-inline-size:100%;color:inherit;font-size:inherit;background:0 0;border:0;border-radius:0;grid-template-columns:auto minmax(0,1fr) auto;padding:0;display:grid}:host([appearance=filled-outlined]){--_lr-callout-background:var(--lr-color-fill-quiet,var(--lr-color-brand-fill-quiet));--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}:host([appearance=filled]){--_lr-callout-background:var(--lr-color-fill-quiet,var(--lr-color-brand-fill-quiet));--_lr-callout-border:transparent;--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}:host([appearance=outlined]){--_lr-callout-background:transparent;--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}:host([appearance=accent]){--_lr-callout-background:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-border:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud));--_lr-callout-color:var(--lr-color-on-loud,var(--lr-color-brand-on-loud))}:host([appearance=plain]){--_lr-callout-background:transparent;--_lr-callout-border:transparent;--_lr-callout-color:var(--lr-color-fill-loud,var(--lr-color-brand-fill-loud))}[part=icon]{min-inline-size:0;max-inline-size:var(--lr-icon-button-size);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden],[part=close-button][hidden]{display:none}[part=heading]{font-weight:var(--lr-font-weight-semibold);margin-block-end:var(--lr-space-xs)}[part=content]{overflow-wrap:break-word;grid-column:2;min-inline-size:0}[part=message]{overflow-wrap:break-word;min-inline-size:0}[part=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;display:inline-flex}[part=close-button]:where(:hover){background:var(--lr-callout-close-hover-bg,var(--_lr-callout-close-hover-bg))}[part=close-button]:where(:active){background:color-mix(in oklab, var(--lr-callout-close-hover-bg,var(--_lr-callout-close-hover-bg)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:where([inline])){background:0 0;border:0;border-radius:0;padding:0}:host(:where([inline])) [part=base]{gap:var(--lr-space-xs)}:host(:where([inline])) [part=icon]{font-size:var(--lr-font-size-m)}:host(:where([inline])) [part=heading]{margin-block-end:0}:host(:where([inline])) [part=close-icon]{inline-size:var(--lr-size-1-5rem);block-size:var(--lr-size-1-5rem);justify-content:center;align-items:center;display:inline-flex}:host(:where(:not([open]))){display:none}`;export{styles};

package/dist/components/overlays/chip/chip-group.class.d.ts

@@ -22,6 +22,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * state is restored when a child leaves or the group disconnects, and reconnecting reapplies the
 * current collapsed state.
 *
+* Collapsed groups reapply max-visible when assigned children are replaced or reordered at the same count, preserving authored hidden/inert state and releasing departed visibility leases.
+*
 * @customElement lr-chip-group
 * @slot - `<lr-chip>` elements (or any content, though the chip pairing is
 * the intended usage).

package/dist/components/overlays/chip/chip-group.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{composedContains}from"../../../internal/overlay-manager.js";import{styles}from"./chip-group.styles.js";import{LYRA_DEFAULT_showLess,LYRA_DEFAULT_showMoreCollapsed,LYRA_DEFAULT_showMoreCount}from"../../../internal/default-strings.generated.js";class LyraChipGroup extends LyraElement{constructor(){super(...arguments),this.accessibleLabel="",this.childCount=0,this.expanded=!1,this.authorHidden=new Map,this.observedChildren=new Set,this.pendingHiddenWrites=new Map,this.visibilityObserverGeneration=0,this.onSlotChange=e=>{const slot=e.target;this.updateBrowserDerivedState(()=>{this.isConnected&&(this.childCount=slot.assignedElements({flatten:!0}).length)})},this.onFocusIn=()=>{const active=deepActiveElementIn(this.ownerDocument),children=this.assignedChildren(),index=children.findIndex(child2=>composedContains(child2,active)),base=this.renderRoot.querySelector('[part="base"]');if(index<0||!base){this.trackedChipFocus=void 0;return}const child=children[index];if(!("focus"in child)){this.trackedChipFocus=void 0;return}const repair=captureComposedFocusRepair(child,base);this.trackedChipFocus=repair?{child,index,repair}:void 0},this.onFocusOut=()=>{const tracked=this.trackedChipFocus;tracked&&queueMicrotask(()=>{if(this.trackedChipFocus!==tracked)return;const active=deepActiveElementIn(this.ownerDocument);if(active!==null&&composedContains(tracked.child,active))return;!tracked.child.isConnected&&(active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement)||(this.trackedChipFocus=void 0)})},this.onToggleOverflow=()=>{this.expanded=!this.expanded,this.emit("lr-overflow-toggle",{expanded:this.expanded})}}static{this.defaultStrings={...super.defaultStrings,showLess:LYRA_DEFAULT_showLess,showMoreCollapsed:LYRA_DEFAULT_showMoreCollapsed,showMoreCount:LYRA_DEFAULT_showMoreCount}}static{this.styles=[LyraElement.styles,styles]}get maxVisible(){return this._maxVisible}set maxVisible(next){const old=this._maxVisible;this._maxVisible=next==null?void 0:finiteCount(next),this.requestUpdate("maxVisible",old)}connectedCallback(){super.connectedCallback(),this.armVisibilityObserver(),this.hasUpdated&&this.reconcileChildVisibilityAndFocus()}armVisibilityObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.visibilityObserver&&this.visibilityObserverDocument===ownerDocument)return;this.resetVisibilityObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.visibilityObserverGeneration,observer=new MutationObserverCtor(records=>{this.visibilityObserver!==observer||this.visibilityObserverDocument!==ownerDocument||this.visibilityObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.processHiddenMutations(records)&&(this.reconcileChildVisibilityAndFocus(),this.requestUpdate())});this.visibilityObserver=observer,this.visibilityObserverDocument=ownerDocument}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||this.seedFirstRenderState(()=>{this.childCount=this.children.length}),this.expanded&&!this.hasOverflow&&(this.expanded=!1)}firstUpdated(changed){super.firstUpdated(changed);const slot=this.shadowRoot.querySelector("slot");queueMicrotask(()=>{this.isConnected&&this.updateBrowserDerivedState(()=>{this.childCount=slot.assignedElements({flatten:!0}).length})})}updated(changed){super.updated(changed),this.reconcileChildVisibilityAndFocus()}disconnectedCallback(){this.resetVisibilityObserver(),this.observedChildren.clear(),this.pendingHiddenWrites.clear(),this.trackedChipFocus=void 0,this.restoreChildVisibility(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetVisibilityObserver(),this.observedChildren.clear(),this.pendingHiddenWrites.clear(),this.trackedChipFocus=void 0}resetVisibilityObserver(){this.visibilityObserverGeneration+=1,this.visibilityObserver?.disconnect(),this.visibilityObserver=void 0,this.visibilityObserverDocument=void 0}get hasOverflow(){const max=this.maxVisible;return max!=null&&this.childCount>0&&this.eligibleChildren().length>max}assignedChildren(){return this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??Array.from(this.children)}isAuthorHidden(child){return this.authorHidden.get(child)??child.hasAttribute("hidden")}isCapacityEligible(child){return!this.isAuthorHidden(child)&&!child.hasAttribute("inert")}eligibleChildren(children=this.assignedChildren()){return children.filter(child=>this.isCapacityEligible(child))}childWillBeVisible(child,assignedChildren){if(!this.isCapacityEligible(child))return!this.isAuthorHidden(child);const eligibleIndex=this.eligibleChildren(assignedChildren).indexOf(child);return!(this.hasOverflow&&!this.expanded&&eligibleIndex>=this.maxVisible)}focusRepairBeforeVisibility(assignedChildren){const tracked=this.trackedChipFocus;if(!tracked)return null;const currentIndex=assignedChildren.indexOf(tracked.child);if(currentIndex>=0&&this.childWillBeVisible(tracked.child,assignedChildren))return tracked.index=currentIndex,null;const active=deepActiveElementIn(this.ownerDocument),stillOwnsFocus=active!==null&&composedContains(tracked.child,active),focusWasLostWithRemovedBranch=currentIndex<0&&(active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement),focusWasLostWithAlreadyHiddenBranch=tracked.child.hasAttribute("hidden")&&(active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement);return!stillOwnsFocus&&!focusWasLostWithRemovedBranch&&!focusWasLostWithAlreadyHiddenBranch?null:{index:currentIndex>=0?currentIndex:tracked.index,repair:tracked.repair}}focusTargetAfterVisibility(assignedChildren,originIndex){const chipTargets=assignedChildren.map((child,index)=>({index,target:collectComposedFocusTargets(child,{includeRoot:!1,mode:"programmatic"}).elements[0]})).filter(entry=>entry.target!==void 0).sort((first,second)=>Math.abs(first.index-originIndex)-Math.abs(second.index-originIndex)||first.index-second.index);if(chipTargets[0])return chipTargets[0].target;const disclosure=this.renderRoot.querySelector('[part="overflow-indicator"]');if(disclosure){const available=collectComposedFocusTargets(disclosure,{mode:"programmatic"}).elements[0];if(available)return available}const base=this.renderRoot.querySelector('[part="base"]');return base?collectComposedFocusTargets(base,{mode:"programmatic"}).elements.find(target=>target===base)??null:null}reconcileChildVisibilityAndFocus(){const assignedChildren=this.assignedChildren(),focusRepair=this.focusRepairBeforeVisibility(assignedChildren);if(this.syncChildVisibility(assignedChildren),!focusRepair)return;const candidate=this.focusTargetAfterVisibility(assignedChildren,focusRepair.index);this.trackedChipFocus=void 0,candidate&&applyComposedFocusRepair(focusRepair.repair,candidate)}syncChildVisibility(assignedChildren=this.assignedChildren()){const max=this.maxVisible,overflowing=this.hasOverflow;this.observeChildren(assignedChildren);const current=new Set(assignedChildren);for(const[child,hidden]of this.authorHidden)current.has(child)||(child.toggleAttribute("hidden",hidden),this.authorHidden.delete(child));let eligibleIndex=0;assignedChildren.forEach(element=>{this.authorHidden.has(element)||this.authorHidden.set(element,element.hasAttribute("hidden"));const authored=this.authorHidden.get(element)??!1,eligible=!authored&&!element.hasAttribute("inert"),managed=eligible&&overflowing&&!this.expanded&&eligibleIndex>=max;this.setManagedHidden(element,authored||managed),eligible&&(eligibleIndex+=1)})}observeChildren(children){const next=new Set(children);if(next.size===this.observedChildren.size&&[...next].every(child=>this.observedChildren.has(child)))return;const queued=this.visibilityObserver?.takeRecords()??[];queued.length>0&&this.processHiddenMutations(queued),this.visibilityObserver?.disconnect(),this.observedChildren.clear();for(const child of children)this.visibilityObserver?.observe(child,{attributes:!0,attributeFilter:["hidden","inert"],attributeOldValue:!0}),this.observedChildren.add(child)}processHiddenMutations(records){let authorChanged=!1;for(let index=0;index<records.length;index++){const record=records[index];if(!record||record.type!=="attributes")continue;const child=record.target;if(!this.authorHidden.has(child))continue;if(record.attributeName==="inert"){authorChanged=!0;continue}if(record.attributeName!=="hidden")continue;let nextRecord;for(let nextIndex=index+1;nextIndex<records.length;nextIndex++){const candidate=records[nextIndex];if(candidate?.type==="attributes"&&candidate.attributeName==="hidden"&&candidate.target===child){nextRecord=candidate;break}}const hidden=nextRecord?nextRecord.oldValue!==null:child.hasAttribute("hidden"),pending=this.pendingHiddenWrites.get(child);if(pending?.[0]===hidden){pending.shift(),pending.length===0&&this.pendingHiddenWrites.delete(child);continue}this.authorHidden.set(child,hidden),authorChanged=!0}return authorChanged}setManagedHidden(child,hidden){if(child.hasAttribute("hidden")===hidden)return;let pending=this.pendingHiddenWrites.get(child);pending||(pending=[],this.pendingHiddenWrites.set(child,pending)),pending.push(hidden),child.toggleAttribute("hidden",hidden)}restoreChildVisibility(){for(const[child,hidden]of this.authorHidden)child.toggleAttribute("hidden",hidden);this.authorHidden.clear()}render(){const hasAccessibleLabel=this.hasAttribute("aria-label")||!!this.accessibleLabel,overflowing=this.hasOverflow,hiddenCount=overflowing?this.eligibleChildren().length-this.maxVisible:0,formattedHiddenCount=getNumberFormat(this.effectiveLocale).format(hiddenCount);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{composedContains}from"../../../internal/overlay-manager.js";import{styles}from"./chip-group.styles.js";import{LYRA_DEFAULT_showLess,LYRA_DEFAULT_showMoreCollapsed,LYRA_DEFAULT_showMoreCount}from"../../../internal/default-strings.generated.js";class LyraChipGroup extends LyraElement{constructor(){super(...arguments),this.accessibleLabel="",this.childCount=0,this.expanded=!1,this.authorHidden=new Map,this.observedChildren=new Set,this.pendingHiddenWrites=new Map,this.visibilityObserverGeneration=0,this.onSlotChange=e=>{const slot=e.target;this.updateBrowserDerivedState(()=>{this.isConnected&&(this.childCount=slot.assignedElements({flatten:!0}).length,this.requestUpdate())})},this.onFocusIn=()=>{const active=deepActiveElementIn(this.ownerDocument),children=this.assignedChildren(),index=children.findIndex(child2=>composedContains(child2,active)),base=this.renderRoot.querySelector('[part="base"]');if(index<0||!base){this.trackedChipFocus=void 0;return}const child=children[index];if(!("focus"in child)){this.trackedChipFocus=void 0;return}const repair=captureComposedFocusRepair(child,base);this.trackedChipFocus=repair?{child,index,repair}:void 0},this.onFocusOut=()=>{const tracked=this.trackedChipFocus;tracked&&queueMicrotask(()=>{if(this.trackedChipFocus!==tracked)return;const active=deepActiveElementIn(this.ownerDocument);if(active!==null&&composedContains(tracked.child,active))return;!tracked.child.isConnected&&(active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement)||(this.trackedChipFocus=void 0)})},this.onToggleOverflow=()=>{this.expanded=!this.expanded,this.emit("lr-overflow-toggle",{expanded:this.expanded})}}static{this.defaultStrings={...super.defaultStrings,showLess:LYRA_DEFAULT_showLess,showMoreCollapsed:LYRA_DEFAULT_showMoreCollapsed,showMoreCount:LYRA_DEFAULT_showMoreCount}}static{this.styles=[LyraElement.styles,styles]}get maxVisible(){return this._maxVisible}set maxVisible(next){const old=this._maxVisible;this._maxVisible=next==null?void 0:finiteCount(next),this.requestUpdate("maxVisible",old)}connectedCallback(){super.connectedCallback(),this.armVisibilityObserver(),this.hasUpdated&&this.reconcileChildVisibilityAndFocus()}armVisibilityObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.visibilityObserver&&this.visibilityObserverDocument===ownerDocument)return;this.resetVisibilityObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.visibilityObserverGeneration,observer=new MutationObserverCtor(records=>{this.visibilityObserver!==observer||this.visibilityObserverDocument!==ownerDocument||this.visibilityObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.processHiddenMutations(records)&&(this.reconcileChildVisibilityAndFocus(),this.requestUpdate())});this.visibilityObserver=observer,this.visibilityObserverDocument=ownerDocument}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||this.seedFirstRenderState(()=>{this.childCount=this.children.length}),this.expanded&&!this.hasOverflow&&(this.expanded=!1)}firstUpdated(changed){super.firstUpdated(changed);const slot=this.shadowRoot.querySelector("slot");queueMicrotask(()=>{this.isConnected&&this.updateBrowserDerivedState(()=>{this.childCount=slot.assignedElements({flatten:!0}).length})})}updated(changed){super.updated(changed),this.reconcileChildVisibilityAndFocus()}disconnectedCallback(){this.resetVisibilityObserver(),this.observedChildren.clear(),this.pendingHiddenWrites.clear(),this.trackedChipFocus=void 0,this.restoreChildVisibility(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetVisibilityObserver(),this.observedChildren.clear(),this.pendingHiddenWrites.clear(),this.trackedChipFocus=void 0}resetVisibilityObserver(){this.visibilityObserverGeneration+=1,this.visibilityObserver?.disconnect(),this.visibilityObserver=void 0,this.visibilityObserverDocument=void 0}get hasOverflow(){const max=this.maxVisible;return max!=null&&this.childCount>0&&this.eligibleChildren().length>max}assignedChildren(){return this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??Array.from(this.children)}isAuthorHidden(child){return this.authorHidden.get(child)??child.hasAttribute("hidden")}isCapacityEligible(child){return!this.isAuthorHidden(child)&&!child.hasAttribute("inert")}eligibleChildren(children=this.assignedChildren()){return children.filter(child=>this.isCapacityEligible(child))}childWillBeVisible(child,assignedChildren){if(!this.isCapacityEligible(child))return!this.isAuthorHidden(child);const eligibleIndex=this.eligibleChildren(assignedChildren).indexOf(child);return!(this.hasOverflow&&!this.expanded&&eligibleIndex>=this.maxVisible)}focusRepairBeforeVisibility(assignedChildren){const tracked=this.trackedChipFocus;if(!tracked)return null;const currentIndex=assignedChildren.indexOf(tracked.child);if(currentIndex>=0&&this.childWillBeVisible(tracked.child,assignedChildren))return tracked.index=currentIndex,null;const active=deepActiveElementIn(this.ownerDocument),stillOwnsFocus=active!==null&&composedContains(tracked.child,active),focusWasLostWithRemovedBranch=currentIndex<0&&(active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement),focusWasLostWithAlreadyHiddenBranch=tracked.child.hasAttribute("hidden")&&(active===null||active===this.ownerDocument.body||active===this.ownerDocument.documentElement);return!stillOwnsFocus&&!focusWasLostWithRemovedBranch&&!focusWasLostWithAlreadyHiddenBranch?null:{index:currentIndex>=0?currentIndex:tracked.index,repair:tracked.repair}}focusTargetAfterVisibility(assignedChildren,originIndex){const chipTargets=assignedChildren.map((child,index)=>({index,target:collectComposedFocusTargets(child,{includeRoot:!1,mode:"programmatic"}).elements[0]})).filter(entry=>entry.target!==void 0).sort((first,second)=>Math.abs(first.index-originIndex)-Math.abs(second.index-originIndex)||first.index-second.index);if(chipTargets[0])return chipTargets[0].target;const disclosure=this.renderRoot.querySelector('[part="overflow-indicator"]');if(disclosure){const available=collectComposedFocusTargets(disclosure,{mode:"programmatic"}).elements[0];if(available)return available}const base=this.renderRoot.querySelector('[part="base"]');return base?collectComposedFocusTargets(base,{mode:"programmatic"}).elements.find(target=>target===base)??null:null}reconcileChildVisibilityAndFocus(){const assignedChildren=this.assignedChildren(),focusRepair=this.focusRepairBeforeVisibility(assignedChildren);if(this.syncChildVisibility(assignedChildren),!focusRepair)return;const candidate=this.focusTargetAfterVisibility(assignedChildren,focusRepair.index);this.trackedChipFocus=void 0,candidate&&applyComposedFocusRepair(focusRepair.repair,candidate)}syncChildVisibility(assignedChildren=this.assignedChildren()){const max=this.maxVisible,overflowing=this.hasOverflow;this.observeChildren(assignedChildren);const current=new Set(assignedChildren);for(const[child,hidden]of this.authorHidden)current.has(child)||(child.toggleAttribute("hidden",hidden),this.authorHidden.delete(child));let eligibleIndex=0;assignedChildren.forEach(element=>{this.authorHidden.has(element)||this.authorHidden.set(element,element.hasAttribute("hidden"));const authored=this.authorHidden.get(element)??!1,eligible=!authored&&!element.hasAttribute("inert"),managed=eligible&&overflowing&&!this.expanded&&eligibleIndex>=max;this.setManagedHidden(element,authored||managed),eligible&&(eligibleIndex+=1)})}observeChildren(children){const next=new Set(children);if(next.size===this.observedChildren.size&&[...next].every(child=>this.observedChildren.has(child)))return;const queued=this.visibilityObserver?.takeRecords()??[];queued.length>0&&this.processHiddenMutations(queued),this.visibilityObserver?.disconnect(),this.observedChildren.clear();for(const child of children)this.visibilityObserver?.observe(child,{attributes:!0,attributeFilter:["hidden","inert"],attributeOldValue:!0}),this.observedChildren.add(child)}processHiddenMutations(records){let authorChanged=!1;for(let index=0;index<records.length;index++){const record=records[index];if(!record||record.type!=="attributes")continue;const child=record.target;if(!this.authorHidden.has(child))continue;if(record.attributeName==="inert"){authorChanged=!0;continue}if(record.attributeName!=="hidden")continue;let nextRecord;for(let nextIndex=index+1;nextIndex<records.length;nextIndex++){const candidate=records[nextIndex];if(candidate?.type==="attributes"&&candidate.attributeName==="hidden"&&candidate.target===child){nextRecord=candidate;break}}const hidden=nextRecord?nextRecord.oldValue!==null:child.hasAttribute("hidden"),pending=this.pendingHiddenWrites.get(child);if(pending?.[0]===hidden){pending.shift(),pending.length===0&&this.pendingHiddenWrites.delete(child);continue}this.authorHidden.set(child,hidden),authorChanged=!0}return authorChanged}setManagedHidden(child,hidden){if(child.hasAttribute("hidden")===hidden)return;let pending=this.pendingHiddenWrites.get(child);pending||(pending=[],this.pendingHiddenWrites.set(child,pending)),pending.push(hidden),child.toggleAttribute("hidden",hidden)}restoreChildVisibility(){for(const[child,hidden]of this.authorHidden)child.toggleAttribute("hidden",hidden);this.authorHidden.clear()}render(){const hasAccessibleLabel=this.hasAttribute("aria-label")||!!this.accessibleLabel,overflowing=this.hasOverflow,hiddenCount=overflowing?this.eligibleChildren().length-this.maxVisible:0,formattedHiddenCount=getNumberFormat(this.effectiveLocale).format(hiddenCount);return html`
       <div
         part="base"
         tabindex="-1"

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

@@ -71,6 +71,8 @@ export interface LyraDialogModalController{activateExternal():void;deactivateExt
 * Escape and the Tab focus trap only ever act on the topmost open dialog, so
 * dialogs beneath it stay open and untouched until the one on top closes.
 *
+* Removing label safely omits its fallback title. Open dialog and drawer names follow supported name and exclusion attribute changes on direct unslotted headings, while host naming retains precedence; nested and slot-empty headings remain outside automatic discovery.
+*
 * @customElement lr-dialog
 * @slot - The dialog body.
 * @slot label - Rich header content, rendered in the header row and used as the panel's

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{activateOverlay,collectFocusableElements}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{closeIcon}from"../../../internal/icons.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{styles}from"./dialog.styles.js";import{LYRA_DEFAULT_close}from"../../../internal/default-strings.generated.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]';class LyraDialog extends LyraElement{constructor(){super(...arguments),this._open=!1,this.label="",this.headingLevel="3",this.closable=!0,this.withoutHeader=!1,this.noHeader=!1,this.withFooter=!1,this.accessibleLabel="",this.hostAriaLabel=null,this.lightDismiss=!1,this.hasFooterSlot=!1,this.hasLabelSlot=!1,this.hasHeaderActionsSlot=!1,this.headingObserverGeneration=0,this.transitionToken=0,this.transitionAnimations=[],this.headingId=nextId("dialog-heading"),this.externalModalDepth=0,this.modal={activateExternal:()=>{this.externalModalDepth++,this.externalModalDepth===1&&this.overlay?.suspend()},deactivateExternal:()=>{this.externalModalDepth!==0&&(this.externalModalDepth--,this.externalModalDepth===0&&this.open&&this.modalSurface&&(this.overlay?.resume(),queueMicrotask(()=>this.focusInitial())))}},this.onDefaultSlotChange=()=>{this.detectLightDomChrome()},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part~="close-button"]')??this;this.requestClose("close-button","close-button",button)}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close}}static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get modalSurface(){return!0}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.detectLightDomChrome()),changed.has("open")&&(this.flushPendingScrollLockRelease(),this.open?this.isConnected&&this.modalSurface&&this.activateOverlay():this.pendingScrollLockRelease=this.deactivateOverlay({deferScrollLockRelease:!0}))}flushPendingScrollLockRelease(){const release=this.pendingScrollLockRelease;this.pendingScrollLockRelease=void 0,release?.()}updated(changed){super.updated(changed),changed.has("open")&&this.open&&this.isConnected&&this.modalSurface&&(this.enterTopLayer(),this.focusInitial())}connectedCallback(){super.connectedCallback(),this.armHeadingObserver(),this.hasUpdated&&this.open&&this.modalSurface&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),this.enterTopLayer(),queueMicrotask(()=>this.focusInitial()))}disconnectedCallback(){this.resetHeadingObserver(),super.disconnectedCallback(),this.overlay?.suspend(),this.transitionToken++,this.flushPendingScrollLockRelease(),this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.open&&queueMicrotask(()=>{if(!this.isConnected&&this.open){if(this.emit("lr-hide",{source:this},{cancelable:this.disconnectHideCancelable}).defaultPrevented){this.syncOpenAttribute();return}this.applyOpenState(!1),this.emit("lr-close","unmount"),this.emit("lr-after-hide")}})}adoptedCallback(){super.adoptedCallback(),this.resetHeadingObserver()}armHeadingObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.headingObserver&&this.headingObserverDocument===ownerDocument)return;this.resetHeadingObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headingObserverGeneration,observer=new MutationObserverCtor(()=>{this.headingObserver!==observer||this.headingObserverDocument!==ownerDocument||this.headingObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.detectLightDomChrome()});this.headingObserver=observer,this.headingObserverDocument=ownerDocument,observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}resetHeadingObserver(){this.headingObserverGeneration+=1,this.headingObserver?.disconnect(),this.headingObserver=void 0,this.headingObserverDocument=void 0}get disconnectHideCancelable(){return!1}detectLightDomChrome(){const children=Array.from(this.children),heading=children.find(el=>el.getAttribute("slot")===null&&el.matches(HEADING_SELECTOR));!heading||isAccessibilitySubtreeExcluded(heading)?this.headingText=void 0:heading.hasAttribute("aria-label")?this.headingText=heading.getAttribute("aria-label")??"":heading.hasAttribute("aria-labelledby")?this.headingText=composedAccessibilityText(heading,{ancestorBoundary:this}).trim()||void 0:this.headingText=composedAccessibilityText(Array.from(heading.childNodes),{ancestorBoundary:heading}).trim()||void 0,this.hasLabelSlot=children.some(el=>el.getAttribute("slot")==="label"),this.hasHeaderActionsSlot=children.some(el=>el.getAttribute("slot")==="header-actions")}show(){if(this.coalesceOpenRequest(!0)||this._open)return Promise.resolve();this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);return this.finishOpenRequest(),prevented||superseded?(this.syncOpenAttribute(),Promise.resolve()):(this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show"))}hide(){return this.close("api")}close(reason="api"){return this.closeFrom(reason,this)}closeFrom(reason,source){return this.coalesceOpenRequest(!1)||!this._open?Promise.resolve():(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):this.emit("lr-close",reason,{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):(this.finishOpenRequest(),this.cancelTransitionAnimations(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")))}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,next&&(this.initialFocusDecision=void 0),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}panelAnimationName(showing){return showing?"dialog.show":"dialog.hide"}overlayAnimationName(showing){return showing?"dialog.overlay.show":"dialog.overlay.hide"}panelAnimationSpec(showing){const offset="translateY(calc(-1 * var(--lr-size-0-5rem)))";return{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-panel-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]}}overlayAnimationSpec(showing){return{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-backdrop-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}}cancelTransitionAnimations(){for(const animation of this.transitionAnimations)animation.cancel();this.transitionAnimations=[]}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const root=this.renderRoot,panel=root.querySelector('[part~="panel"]'),backdrop=root.querySelector('[part~="backdrop"]'),showing=event==="lr-after-show",animations=[panel?animateRegistered(this,panel,this.panelAnimationName(showing),this.effectiveDirection,this.panelAnimationSpec(showing)):void 0,this.modalSurface&&backdrop?animateRegistered(this,backdrop,this.overlayAnimationName(showing),this.effectiveDirection,this.overlayAnimationSpec(showing)):void 0].filter(animation=>animation!==void 0);if(this.transitionAnimations=animations,await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return;this.cancelTransitionAnimations()}event==="lr-after-hide"&&(this.removeAttribute("data-closing"),this.leaveTopLayer(),this.flushPendingScrollLockRelease()),this.emit(event)}}enterTopLayer(){if(!(!this.isConnected||typeof this.showPopover!="function")){this.getAttribute("popover")!=="manual"&&this.setAttribute("popover","manual");try{this.isTopLayer()||this.showPopover()}catch{}}}leaveTopLayer(){if(typeof this.hidePopover=="function")try{this.isTopLayer()&&this.hidePopover()}catch{}}isTopLayer(){try{return this.matches(":popover-open")}catch{return!1}}requestClose(source,reason,sourceElement){this.emit("lr-request-close",{source},{cancelable:!0}).defaultPrevented||this.closeFrom(reason,sourceElement)}focusInitial(){this.overlay?.focusInitial()}activateOverlay(){!this.isConnected||this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part~="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part~="backdrop"]')??this;this.requestClose("overlay","backdrop",backdrop)},preferredInitialFocus:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]'),body=this.renderRoot.querySelector('[part="body"]'),stops=body?collectFocusableElements(body):[];return stops.find(stop=>stop!==body)??stops[0]??panel},beforeInitialFocus:()=>(this.initialFocusDecision===void 0&&(this.initialFocusDecision=!this.emit("lr-initial-focus",null,{cancelable:!0}).defaultPrevented),this.initialFocusDecision),lockScroll:!0,suspendWhenUnrendered:!0}),this.externalModalDepth>0&&this.overlay.suspend())}deactivateOverlay(options){const overlay=this.overlay;return this.overlay=void 0,overlay?.deactivate(options)}render(){const suppressHeader=this.withoutHeader||this.noHeader,renderHeading=!suppressHeader&&!this.headingText&&(this.hasLabelSlot||this.label.length>0||!!this.heading),hasHostName=this.hostAriaLabel!==null,explicitName=hasHostName?this.hostAriaLabel:this.accessibleLabel||this.headingText,hasExplicitName=hasHostName||!!explicitName,useHeadingForName=!hasExplicitName&&renderHeading,showHeader=!suppressHeader&&(renderHeading||this.hasHeaderActionsSlot||this.closable),headingLevel=resolveHeadingLevel(this.headingLevel);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{activateOverlay,collectFocusableElements}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{closeIcon}from"../../../internal/icons.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{styles}from"./dialog.styles.js";import{LYRA_DEFAULT_close}from"../../../internal/default-strings.generated.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]';class LyraDialog extends LyraElement{constructor(){super(...arguments),this._open=!1,this.label="",this.headingLevel="3",this.closable=!0,this.withoutHeader=!1,this.noHeader=!1,this.withFooter=!1,this.accessibleLabel="",this.hostAriaLabel=null,this.lightDismiss=!1,this.hasFooterSlot=!1,this.hasLabelSlot=!1,this.hasHeaderActionsSlot=!1,this.headingObserverGeneration=0,this.transitionToken=0,this.transitionAnimations=[],this.headingId=nextId("dialog-heading"),this.externalModalDepth=0,this.modal={activateExternal:()=>{this.externalModalDepth++,this.externalModalDepth===1&&this.overlay?.suspend()},deactivateExternal:()=>{this.externalModalDepth!==0&&(this.externalModalDepth--,this.externalModalDepth===0&&this.open&&this.modalSurface&&(this.overlay?.resume(),queueMicrotask(()=>this.focusInitial())))}},this.onDefaultSlotChange=()=>{this.detectLightDomChrome()},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part~="close-button"]')??this;this.requestClose("close-button","close-button",button)}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close}}static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get modalSurface(){return!0}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.detectLightDomChrome()),changed.has("open")&&(this.flushPendingScrollLockRelease(),this.open?this.isConnected&&this.modalSurface&&this.activateOverlay():this.pendingScrollLockRelease=this.deactivateOverlay({deferScrollLockRelease:!0}))}flushPendingScrollLockRelease(){const release=this.pendingScrollLockRelease;this.pendingScrollLockRelease=void 0,release?.()}updated(changed){super.updated(changed),changed.has("open")&&this.open&&this.isConnected&&this.modalSurface&&(this.enterTopLayer(),this.focusInitial())}connectedCallback(){super.connectedCallback(),this.armHeadingObserver(),this.hasUpdated&&this.open&&this.modalSurface&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),this.enterTopLayer(),queueMicrotask(()=>this.focusInitial()))}disconnectedCallback(){this.resetHeadingObserver(),super.disconnectedCallback(),this.overlay?.suspend(),this.transitionToken++,this.flushPendingScrollLockRelease(),this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.open&&queueMicrotask(()=>{if(!this.isConnected&&this.open){if(this.emit("lr-hide",{source:this},{cancelable:this.disconnectHideCancelable}).defaultPrevented){this.syncOpenAttribute();return}this.applyOpenState(!1),this.emit("lr-close","unmount"),this.emit("lr-after-hide")}})}adoptedCallback(){super.adoptedCallback(),this.resetHeadingObserver()}armHeadingObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.headingObserver&&this.headingObserverDocument===ownerDocument)return;this.resetHeadingObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headingObserverGeneration,observer=new MutationObserverCtor(()=>{this.headingObserver!==observer||this.headingObserverDocument!==ownerDocument||this.headingObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.detectLightDomChrome()});this.headingObserver=observer,this.headingObserverDocument=ownerDocument,observer.observe(this,{childList:!0,characterData:!0,subtree:!0,attributes:!0,attributeFilter:["aria-label","aria-labelledby","aria-hidden","hidden","inert","class","style","slot"]})}resetHeadingObserver(){this.headingObserverGeneration+=1,this.headingObserver?.disconnect(),this.headingObserver=void 0,this.headingObserverDocument=void 0}get disconnectHideCancelable(){return!1}detectLightDomChrome(){const children=Array.from(this.children),heading=children.find(el=>el.getAttribute("slot")===null&&el.matches(HEADING_SELECTOR));!heading||isAccessibilitySubtreeExcluded(heading)?this.headingText=void 0:heading.hasAttribute("aria-label")?this.headingText=heading.getAttribute("aria-label")??"":heading.hasAttribute("aria-labelledby")?this.headingText=composedAccessibilityText(heading,{ancestorBoundary:this}).trim()||void 0:this.headingText=composedAccessibilityText(Array.from(heading.childNodes),{ancestorBoundary:heading}).trim()||void 0,this.hasLabelSlot=children.some(el=>el.getAttribute("slot")==="label"),this.hasHeaderActionsSlot=children.some(el=>el.getAttribute("slot")==="header-actions")}show(){if(this.coalesceOpenRequest(!0)||this._open)return Promise.resolve();this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);return this.finishOpenRequest(),prevented||superseded?(this.syncOpenAttribute(),Promise.resolve()):(this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show"))}hide(){return this.close("api")}close(reason="api"){return this.closeFrom(reason,this)}closeFrom(reason,source){return this.coalesceOpenRequest(!1)||!this._open?Promise.resolve():(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):this.emit("lr-close",reason,{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):(this.finishOpenRequest(),this.cancelTransitionAnimations(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")))}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,next&&(this.initialFocusDecision=void 0),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}panelAnimationName(showing){return showing?"dialog.show":"dialog.hide"}overlayAnimationName(showing){return showing?"dialog.overlay.show":"dialog.overlay.hide"}panelAnimationSpec(showing){const offset="translateY(calc(-1 * var(--lr-size-0-5rem)))";return{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-panel-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]}}overlayAnimationSpec(showing){return{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-backdrop-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}}cancelTransitionAnimations(){for(const animation of this.transitionAnimations)animation.cancel();this.transitionAnimations=[]}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const root=this.renderRoot,panel=root.querySelector('[part~="panel"]'),backdrop=root.querySelector('[part~="backdrop"]'),showing=event==="lr-after-show",animations=[panel?animateRegistered(this,panel,this.panelAnimationName(showing),this.effectiveDirection,this.panelAnimationSpec(showing)):void 0,this.modalSurface&&backdrop?animateRegistered(this,backdrop,this.overlayAnimationName(showing),this.effectiveDirection,this.overlayAnimationSpec(showing)):void 0].filter(animation=>animation!==void 0);if(this.transitionAnimations=animations,await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return;this.cancelTransitionAnimations()}event==="lr-after-hide"&&(this.removeAttribute("data-closing"),this.leaveTopLayer(),this.flushPendingScrollLockRelease()),this.emit(event)}}enterTopLayer(){if(!(!this.isConnected||typeof this.showPopover!="function")){this.getAttribute("popover")!=="manual"&&this.setAttribute("popover","manual");try{this.isTopLayer()||this.showPopover()}catch{}}}leaveTopLayer(){if(typeof this.hidePopover=="function")try{this.isTopLayer()&&this.hidePopover()}catch{}}isTopLayer(){try{return this.matches(":popover-open")}catch{return!1}}requestClose(source,reason,sourceElement){this.emit("lr-request-close",{source},{cancelable:!0}).defaultPrevented||this.closeFrom(reason,sourceElement)}focusInitial(){this.overlay?.focusInitial()}activateOverlay(){!this.isConnected||this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part~="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part~="backdrop"]')??this;this.requestClose("overlay","backdrop",backdrop)},preferredInitialFocus:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]'),body=this.renderRoot.querySelector('[part="body"]'),stops=body?collectFocusableElements(body):[];return stops.find(stop=>stop!==body)??stops[0]??panel},beforeInitialFocus:()=>(this.initialFocusDecision===void 0&&(this.initialFocusDecision=!this.emit("lr-initial-focus",null,{cancelable:!0}).defaultPrevented),this.initialFocusDecision),lockScroll:!0,suspendWhenUnrendered:!0}),this.externalModalDepth>0&&this.overlay.suspend())}deactivateOverlay(options){const overlay=this.overlay;return this.overlay=void 0,overlay?.deactivate(options)}render(){const suppressHeader=this.withoutHeader||this.noHeader,renderHeading=!suppressHeader&&!this.headingText&&(this.hasLabelSlot||(this.label??"").length>0||!!this.heading),hasHostName=this.hostAriaLabel!==null,explicitName=hasHostName?this.hostAriaLabel:this.accessibleLabel||this.headingText,hasExplicitName=hasHostName||!!explicitName,useHeadingForName=!hasExplicitName&&renderHeading,showHeader=!suppressHeader&&(renderHeading||this.hasHeaderActionsSlot||this.closable),headingLevel=resolveHeadingLevel(this.headingLevel);return html`
       <div part="base">
         <div part="backdrop overlay" @click=${this.onBackdropClick}></div>
         <div

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-dialog-overlay-color:var(--lr-color-overlay);z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));block-size:auto;inline-size:auto;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));padding-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));padding-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));padding-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end));display:none;position:fixed;inset:0;overflow:visible}:host([open]){display:flex}:host([data-closing]){pointer-events:none;display:flex}[part~=base]{display:contents}[part~=backdrop]{background:var(--lr-dialog-overlay-color,var(--_lr-dialog-overlay-color));backdrop-filter:var(--backdrop-filter,var(--lr-dialog-backdrop-filter,none));position:absolute;inset:0}[part~=panel]{min-inline-size:0;inline-size:var(--width,var(--lr-dialog-width,auto));max-inline-size:min(var(--lr-dialog-max-width,var(--width,var(--lr-dialog-width,var(--lr-size-32rem)))), 100%);background:var(--lr-color-surface-overlay);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);max-block-size:100%;box-shadow:var(--lr-shadow-xl);flex-direction:column;display:flex;position:relative;overflow:auto}[part=header]{align-items:center;gap:var(--lr-space-s);min-inline-size:0;max-inline-size:100%;padding:var(--header-spacing,var(--spacing,var(--lr-dialog-spacing-block,var(--lr-space-m)) var(--lr-dialog-spacing,var(--lr-space-l))));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border);flex-wrap:wrap;display:flex}[part~=heading]{min-inline-size:0;font-weight:var(--lr-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap;flex:auto;margin:0;overflow:hidden}[part=header-actions]{overflow-wrap:anywhere;justify-content:flex-end;align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;flex:auto;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;display:flex}[part=header-actions] ::slotted(*){overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:var(--lr-color-text-quiet);border-radius:var(--lr-radius);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-start:auto;display:inline-flex}[part=header-actions]+[part~=close-button]{margin-inline-start:0}[part~=close-button]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part~=close-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part~=close-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part~=close-button] svg{display:block}[part=body]{min-inline-size:0;max-inline-size:100%;padding:var(--body-spacing,var(--spacing,var(--lr-dialog-spacing,var(--lr-space-l))));overflow-wrap:anywhere;overflow:auto}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=footer]{justify-content:flex-end;align-items:center;gap:var(--lr-space-s);min-inline-size:0;max-inline-size:100%;padding:var(--footer-spacing,var(--spacing,var(--lr-dialog-spacing-block,var(--lr-space-m)) var(--lr-dialog-spacing,var(--lr-space-l))));border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);overflow-wrap:anywhere;flex-wrap:wrap;display:flex}[part=footer] ::slotted(*){overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part=footer][hidden]{display:none}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-dialog-overlay-color:var(--lr-color-overlay);z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));block-size:auto;inline-size:auto;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));padding-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));padding-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));padding-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end));display:none;position:fixed;inset:0;overflow:visible}:host([open]){display:flex}:host([data-closing]){pointer-events:none;display:flex}[part~=base]{display:contents}[part~=backdrop]{background:var(--lr-dialog-overlay-color,var(--_lr-dialog-overlay-color));backdrop-filter:var(--backdrop-filter,var(--lr-dialog-backdrop-filter,none));position:absolute;inset:0}[part~=panel]{min-inline-size:0;inline-size:var(--width,var(--lr-dialog-width,auto));max-inline-size:min(var(--lr-dialog-max-width,var(--width,var(--lr-dialog-width,var(--lr-size-32rem)))), 100%);background:var(--lr-color-surface-overlay);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);max-block-size:100%;box-shadow:var(--lr-shadow-xl);flex-direction:column;display:flex;position:relative;overflow:auto}[part=header]{align-items:center;gap:var(--lr-space-s);min-inline-size:0;max-inline-size:100%;padding:var(--header-spacing,var(--spacing,var(--lr-dialog-spacing-block,var(--lr-space-m)) var(--lr-dialog-spacing,var(--lr-space-l))));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border);flex-wrap:wrap;display:flex}[part~=heading]{min-inline-size:0;font-weight:var(--lr-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap;flex:auto;margin:0;overflow:hidden}[part=header-actions]{overflow-wrap:anywhere;justify-content:flex-end;align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;flex:auto;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;display:flex}[part=header-actions] ::slotted(*){overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:var(--lr-color-text-quiet);border-radius:var(--lr-radius);font:inherit;cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin-inline-start:auto;display:inline-flex}[part=header-actions]+[part~=close-button]{margin-inline-start:0}[part~=close-button]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part~=close-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part~=close-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part~=close-button] svg{display:block}[part=body]{min-inline-size:0;max-inline-size:100%;padding:var(--body-spacing,var(--spacing,var(--lr-dialog-spacing,var(--lr-space-l))));overflow-wrap:anywhere;overflow:auto}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=footer]{justify-content:flex-end;align-items:center;gap:var(--lr-space-s);min-inline-size:0;max-inline-size:100%;padding:var(--footer-spacing,var(--spacing,var(--lr-dialog-spacing-block,var(--lr-space-m)) var(--lr-dialog-spacing,var(--lr-space-l))));border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);overflow-wrap:anywhere;flex-wrap:wrap;display:flex}[part=footer] ::slotted(*){overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part=footer][hidden]{display:none}`;export{styles};

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

@@ -14,6 +14,8 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * headings default to semantic level 3; set `heading-level` from `1`–`6` to fit the surrounding
 * outline, or `none` for visual-only heading text.
 *
+* Removing heading or description safely omits that text; explicit empty values remain empty and later values restore the corresponding content.
+*
 * @customElement lr-empty
 * @slot - Custom icon or illustration (defaults to none).
 * @slot heading - Rich heading content (overrides the `heading` attribute) inside the configured

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{hasRealContent}from"../../../internal/a11y.js";import{styles}from"./empty.styles.js";class LyraEmpty extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel="3",this.description="",this.compact=!1,this.slotPresence=new SlotPresenceController(this),this.announcementsArmed=!1,this.announcementGeneration=0,this.lastAnnouncementText="",this.onForwardedSlotChange=event=>{const slot=event.target;this.announcementForwardingSlots().includes(slot)&&(this.observeAnnouncementContent(),this.scheduleAnnouncement())}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.lastAnnouncementText="";const generation=++this.announcementGeneration,MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.contentObserver=new MutationObserverCtor(()=>{this.observeAnnouncementContent(),this.scheduleAnnouncement()}),this.observeAnnouncementContent()),this.updateComplete.then(()=>{!this.isConnected||generation!==this.announcementGeneration||(this.lastAnnouncementText=this.announcementText(),this.announcementsArmed=!0)})}disconnectedCallback(){this.announcementGeneration+=1,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.removeEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.lastAnnouncementText="",super.disconnectedCallback()}updated(changed){super.updated(changed),this.announcementsArmed&&(changed.has("heading")||changed.has("description"))&&this.announceCurrentContent()}firstUpdated(changed){super.firstUpdated(changed),this.updateBrowserDerivedState(()=>{this.reconcileSlotHidden(this.shadowRoot.querySelector("slot:not([name])"),this.shadowRoot.querySelector('[part="icon"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="actions"]'),this.shadowRoot.querySelector('[part="actions"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="heading"]'),this.shadowRoot.querySelector('[part="heading"]'),this.heading.length>0),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="description"]'),this.shadowRoot.querySelector('[part="description"]'),this.description.length>0)})}reconcileSlotHidden(slot,wrapper,hasFallbackContent=!1){wrapper.toggleAttribute("hidden",!hasFallbackContent&&!hasRealContent(slot.assignedNodes({flatten:!0})))}announcementObservationOptions(){return{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","class","hidden","inert","open","slot","style"],childList:!0,characterData:!0,subtree:!0}}announcementForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;if(top.parentNode!==this||top.nodeType!==1)return!1;const slotName=top.getAttribute("slot");return slotName==="heading"||slotName==="description"})}observeAnnouncementContent(){const observer=this.contentObserver;if(!observer)return;observer.disconnect();const options=this.announcementObservationOptions();observer.observe(this,options);for(const slot of this.announcementForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))observer.observe(assigned,options)}scheduleAnnouncement(){if(!this.announcementsArmed)return;const headingSlot=this.shadowRoot?.querySelector('slot[name="heading"]'),headingWrapper=this.shadowRoot?.querySelector('[part="heading"]');headingSlot&&headingWrapper&&this.reconcileSlotHidden(headingSlot,headingWrapper,this.heading.length>0);const descriptionSlot=this.shadowRoot?.querySelector('slot[name="description"]'),descriptionWrapper=this.shadowRoot?.querySelector('[part="description"]');descriptionSlot&&descriptionWrapper&&this.reconcileSlotHidden(descriptionSlot,descriptionWrapper,this.description.length>0),this.announceCurrentContent()}slotContent(name){const selector=name?`slot[name="${name}"]`:"slot:not([name])",slot=this.shadowRoot?.querySelector(selector);return{assigned:(slot?.assignedNodes()??[]).length>0,text:(slot?.assignedNodes({flatten:!0})??[]).map(node=>composedAccessibilityText(node)).join(" ")}}announcementText(){if(!isAccessibilityVisible(this))return"";const headingSlot=this.slotContent("heading"),descriptionSlot=this.slotContent("description");return[headingSlot.assigned?headingSlot.text:this.heading,descriptionSlot.assigned?descriptionSlot.text:this.description].join(" ").replace(/\s+/g," ").trim()}announceCurrentContent(){if(!this.announcementsArmed||!this.isConnected)return;const text=this.announcementText();text!==this.lastAnnouncementText&&(this.lastAnnouncementText=text,text&&this.announcementSink?.announce(text))}render(){const hasHeading=this.slotPresence.has("heading")||this.heading.length>0,hasDescription=this.slotPresence.has("description")||this.description.length>0,headingLevel=resolveHeadingLevel(this.headingLevel);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{hasRealContent}from"../../../internal/a11y.js";import{styles}from"./empty.styles.js";class LyraEmpty extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel="3",this.description="",this.compact=!1,this.slotPresence=new SlotPresenceController(this),this.announcementsArmed=!1,this.announcementGeneration=0,this.lastAnnouncementText="",this.onForwardedSlotChange=event=>{const slot=event.target;this.announcementForwardingSlots().includes(slot)&&(this.observeAnnouncementContent(),this.scheduleAnnouncement())}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.lastAnnouncementText="";const generation=++this.announcementGeneration,MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.contentObserver=new MutationObserverCtor(()=>{this.observeAnnouncementContent(),this.scheduleAnnouncement()}),this.observeAnnouncementContent()),this.updateComplete.then(()=>{!this.isConnected||generation!==this.announcementGeneration||(this.lastAnnouncementText=this.announcementText(),this.announcementsArmed=!0)})}disconnectedCallback(){this.announcementGeneration+=1,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.removeEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.lastAnnouncementText="",super.disconnectedCallback()}updated(changed){super.updated(changed),this.announcementsArmed&&(changed.has("heading")||changed.has("description"))&&this.announceCurrentContent()}firstUpdated(changed){super.firstUpdated(changed),this.updateBrowserDerivedState(()=>{this.reconcileSlotHidden(this.shadowRoot.querySelector("slot:not([name])"),this.shadowRoot.querySelector('[part="icon"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="actions"]'),this.shadowRoot.querySelector('[part="actions"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="heading"]'),this.shadowRoot.querySelector('[part="heading"]'),this.heading.length>0),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="description"]'),this.shadowRoot.querySelector('[part="description"]'),this.description.length>0)})}reconcileSlotHidden(slot,wrapper,hasFallbackContent=!1){wrapper.toggleAttribute("hidden",!hasFallbackContent&&!hasRealContent(slot.assignedNodes({flatten:!0})))}announcementObservationOptions(){return{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","class","hidden","inert","open","slot","style"],childList:!0,characterData:!0,subtree:!0}}announcementForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;if(top.parentNode!==this||top.nodeType!==1)return!1;const slotName=top.getAttribute("slot");return slotName==="heading"||slotName==="description"})}observeAnnouncementContent(){const observer=this.contentObserver;if(!observer)return;observer.disconnect();const options=this.announcementObservationOptions();observer.observe(this,options);for(const slot of this.announcementForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))observer.observe(assigned,options)}scheduleAnnouncement(){if(!this.announcementsArmed)return;const headingSlot=this.shadowRoot?.querySelector('slot[name="heading"]'),headingWrapper=this.shadowRoot?.querySelector('[part="heading"]');headingSlot&&headingWrapper&&this.reconcileSlotHidden(headingSlot,headingWrapper,this.heading.length>0);const descriptionSlot=this.shadowRoot?.querySelector('slot[name="description"]'),descriptionWrapper=this.shadowRoot?.querySelector('[part="description"]');descriptionSlot&&descriptionWrapper&&this.reconcileSlotHidden(descriptionSlot,descriptionWrapper,this.description.length>0),this.announceCurrentContent()}slotContent(name){const selector=name?`slot[name="${name}"]`:"slot:not([name])",slot=this.shadowRoot?.querySelector(selector);return{assigned:(slot?.assignedNodes()??[]).length>0,text:(slot?.assignedNodes({flatten:!0})??[]).map(node=>composedAccessibilityText(node)).join(" ")}}announcementText(){if(!isAccessibilityVisible(this))return"";const headingSlot=this.slotContent("heading"),descriptionSlot=this.slotContent("description");return[headingSlot.assigned?headingSlot.text:this.heading,descriptionSlot.assigned?descriptionSlot.text:this.description].join(" ").replace(/\s+/g," ").trim()}announceCurrentContent(){if(!this.announcementsArmed||!this.isConnected)return;const text=this.announcementText();text!==this.lastAnnouncementText&&(this.lastAnnouncementText=text,text&&this.announcementSink?.announce(text))}render(){const hasHeading=this.slotPresence.has("heading")||(this.heading??"").length>0,hasDescription=this.slotPresence.has("description")||(this.description??"").length>0,headingLevel=resolveHeadingLevel(this.headingLevel);return html`
       <div part="base">
         <div part="icon" ?hidden=${!this.slotPresence.has()}><slot></slot></div>
         <p