@aceshooting/lyra-ui 9.1.1 → 10.0.1

package/dist/components/media/media-card/media-card.styles.js

@@ -2,14 +2,9 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
     max-inline-size: 100%;
-    /* Consumer-tunable cap so one oversized image/video can't blow out a
-       chat bubble -- same naming/contract as lr-document-preview's
-       identical --lr-document-preview-max-height. Width already caps at
-       100% of whatever the host message body allows. */
     --_lr-media-card-max-height: var(--lr-size-20rem);
   }
 
-  /* -- base: shared chrome for every kind's root element (button/div/a/span) */
   [part="base"] {
     display: block;
     box-sizing: border-box;
@@ -22,11 +17,10 @@ import{css}from"lit";const styles=css`
     color: var(--lr-color-text);
     text-decoration: none;
   }
-  /* Reset native button/anchor chrome only where "base" is actually one of
-     those (image and file-with-a-safe-link cases) -- a plain div/span never
-     had any to begin with, so this is harmless there too. */
   button[part="base"],
   a[part="base"] {
+    min-inline-size: var(--lr-size-1-5rem);
+    min-block-size: var(--lr-size-1-5rem);
     cursor: pointer;
     padding: 0;
     -webkit-tap-highlight-color: transparent;
@@ -37,10 +31,6 @@ import{css}from"lit";const styles=css`
   a[part="base"]:hover {
     border-color: var(--lr-color-brand);
   }
-  /* Pressed deepens both the border the hover rule tints and the card's own fill, so the whole-card
-     button reads as depressed rather than merely pointed at. Under frame="plain" the later,
-     higher-specificity chrome reset still wins -- that mode is opting out of card chrome entirely,
-     pressed included. */
   button[part="base"]:active,
   a[part="base"]:active {
     border-color: var(
@@ -64,10 +54,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* Chrome escape hatch for a dense list/feed of cards -- the library-wide
-     :host([frame='plain']) [part='base'] reset. Image/video kinds already render [part='base']
-     with zero padding (see the button[part='base'] rule above), so this only visibly changes
-     padding for the file-chip fallback's span/a[part='base']. */
   :host([frame="plain"]) [part="base"] {
     padding: 0;
     border: 0;
@@ -75,7 +61,6 @@ import{css}from"lit";const styles=css`
     background: transparent;
   }
 
-  /* -- image / video media ------------------------------------------- */
   img[part="media"] {
     display: block;
     max-inline-size: 100%;
@@ -94,9 +79,6 @@ import{css}from"lit";const styles=css`
     );
   }
 
-  /* -- video: base is a plain non-interactive wrapper around the video
-     plus its own separate open-button -- see the class doc for why video
-     doesn't reuse the whole-card-button pattern image/file use. */
   div[part="base"] {
     position: relative;
     display: inline-block;
@@ -108,10 +90,6 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    /* Meets the shared minimum tappable size (--lr-icon-button-size) --
-       previously capped at 2rem/32px for a compact overlay look, but this
-       button floats over the video's own generous canvas (absolutely
-       positioned in a corner), which has ample room for the full floor. */
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
     padding: 0;
@@ -126,8 +104,6 @@ import{css}from"lit";const styles=css`
   [part="open-button"]:hover {
     background: var(--lr-color-surface);
   }
-  /* Hover only finishes opacifying the translucent scrim, which leaves it with nowhere further to
-     go; pressed mixes that now-solid surface toward --lr-color-mix-partner instead. */
   [part="open-button"]:active {
     background: color-mix(
       in oklab,
@@ -143,8 +119,6 @@ import{css}from"lit";const styles=css`
     display: block;
   }
 
-  /* -- file-chip fallback (kind="file", or an image/video src that failed
-     the safe-URL check) ------------------------------------------------ */
   span[part="base"],
   a[part="base"] {
     display: inline-flex;

package/dist/components/media/pan-zoom/pan-zoom.styles.js

@@ -21,7 +21,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* no-pressed-state: the viewport is a focusable scroll surface, not an activation target. */
   [part='viewport']:hover {
     border-color: var(--lr-color-brand);
   }
@@ -32,8 +31,6 @@ import{css}from"lit";const styles=css`
     min-block-size: 100%;
     inline-size: max-content;
     block-size: max-content;
-    /* CSS zoom participates in layout, so scaled content expands the scrollable footprint instead
-       of painting into an unreachable area outside transform-based scroll geometry. */
     zoom: var(--lr-pan-zoom-zoom, 1);
   }
   [part='content'] ::slotted(*) {

package/dist/components/media/qr-code/qr-code.class.d.ts

@@ -98,8 +98,9 @@ export declare class LyraQrCode extends LyraElement {
     get errorCorrection(): LyraQrCodeErrorCorrection;
     set errorCorrection(value: LyraQrCodeErrorCorrection);
     /** The stable canvas used for QR paint. The same node remains reachable across empty, loading,
-     * ready, error, reconnect, and redraw transitions. */
-    canvas: HTMLCanvasElement;
+     * ready, error, reconnect, and redraw transitions. Readonly: an explicit `get` (rather than
+     * `@query`) so the generated manifest marks it non-assignable. */
+    get canvas(): HTMLCanvasElement;
     private loadState;
     private errorAnnouncementSink?;
     private statusAnnouncementSink?;

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,query,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)}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{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`})}>
       <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([query("canvas")],LyraQrCode.prototype,"canvas",void 0),__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),__decorate([state()],LyraQrCode.prototype,"visible",void 0);export{LyraQrCode};

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

@@ -1,9 +1,6 @@
 import{css}from"lit";const styles=css`
   :host {
     display: inline-flex;
-    /* Canvas paint resolves these computed host styles live. The optional
-       aliases deliberately have no token defaults: inherited color and a
-       transparent host background are the mirrored renderer defaults. */
     color: var(--lr-qr-code-fill, inherit);
     background-color: var(--lr-qr-code-background, initial);
   }

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

@@ -106,6 +106,8 @@ export declare class LyraSequencePlayback extends LyraElement<LyraSequencePlayba
     click(): void;
     private onControlFocus;
     private onControlBlur;
+    private keyboardStepDelta;
+    private onSliderKeyDown;
     render(): TemplateResult;
 }
 declare global {

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)}}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()}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{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`
       <div part="base">
         <button
           part="play-button"
@@ -21,6 +21,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
           aria-valuetext=${this.localize("playbackStepPosition",void 0,{index:getNumberFormat(this.effectiveLocale).format(currentIndex+1),total:getNumberFormat(this.effectiveLocale).format(finiteCount(this.itemCount))})}
           ?disabled=${disabled}
           @input=${e=>this.goTo(Number(e.target.value)-1)}
+          @keydown=${this.onSliderKeyDown}
           @focus=${this.onControlFocus}
           @blur=${this.onControlBlur}
         />

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

@@ -3,10 +3,6 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     align-items: center;
     gap: var(--lr-space-s);
-    /* Derived from --lr-icon-button-size (0.35 * 2.5rem = 0.875rem, the
-       prior bare literal) so the rendered play/pause SVG icon (icons render
-       at width/height: 1em, so this font-size directly controls its pixel
-       size) tracks the button's own token instead of drifting from it. */
     --_lr-sequence-playback-icon-size: calc(var(--lr-icon-button-size) * 0.35);
   }
   [part="base"] {
@@ -15,11 +11,6 @@ import{css}from"lit";const styles=css`
     gap: var(--lr-space-s);
   }
   [part="play-button"] {
-    /* Already exactly the shared floor (2.5rem/40px) via inline-size/block-size for
-       this circular button's own shape -- min-inline-size/min-block-size are added
-       alongside (not swapped in) at the same value, so the floor is explicit and this
-       resolves through the shared token like every other icon-button in the library,
-       without disturbing the fixed circle. */
     inline-size: var(--lr-icon-button-size);
     block-size: var(--lr-icon-button-size);
     min-inline-size: var(--lr-icon-button-size);
@@ -66,16 +57,6 @@ import{css}from"lit";const styles=css`
     accent-color: var(--lr-color-brand);
     cursor: pointer;
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself
-     -- (0,1,0) total, functionally identical selection to \`[part='slider']:hover:not(:disabled)\`
-     ((0,3,0)) but now losing (on the pseudo-element tiebreak) to a consumer's own
-     \`::part(slider):hover\` override ((0,1,1)) without that consumer needing !important. Same
-     fix as \`<lr-attachment-trigger>\`'s \`.trigger-button\` hover rule. */
-  /* The visible ink on a native range input is drawn by the UA from accent-color, not from
-     background -- so the interaction states move accent-color. (The old filter: brightness() bought
-     the same visual by multiplying every channel of the whole subtree; it did nothing to a pure
-     white or pure black accent, and it dimmed/lit the input's own focus ring along with the
-     track.) */
   :where([part="slider"]):hover:where(:not(:disabled)) {
     accent-color: color-mix(
       in oklab,

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

@@ -53,8 +53,9 @@ export interface LyraVideoEventMap {
  * @event {Event} pause - Relayed native video event; non-bubbling, non-composed, and non-cancelable.
  * @event {Event} play - Relayed native video event; non-bubbling, non-composed, and non-cancelable.
  * @event {Event} timeupdate - Relayed native video event; non-bubbling, non-composed, and
- *   non-cancelable. Scrubbing the
- *   custom timeline also dispatches this event immediately.
+ *   non-cancelable. Scrubbing the custom timeline, or calling `seek()`, also dispatches this
+ *   event immediately and exactly once -- the corresponding native follow-up event is not
+ *   separately relayed.
  * @event {Event} volumechange - Relayed native video event; non-bubbling, non-composed, and
  *   non-cancelable.
  * @event {FocusEvent} focus - Relayed once from the internal play/pause control as a bubbling,
@@ -135,6 +136,13 @@ export declare class LyraVideo extends LyraElement<LyraVideoEventMap> {
     private thumbnailPosition;
     private wrapperEl?;
     private readonly mediaController;
+    /** One-shot guards against this component's own imperative native mutation echoing back through
+     *  `onNativeMediaEvent()` as if it were an externally-caused change. Each flag is armed
+     *  immediately before the imperative native write that will trigger the corresponding queued
+     *  native event, and consumed (cleared) by the first arrival of that event afterward -- shared
+     *  shape for both the seek() timeupdate dedup and the autoplay-muted volumechange suppression
+     *  below, rather than two independently-invented flags. */
+    private readonly pendingNativeEcho;
     private thumbnailGeneration;
     private thumbnailAbort?;
     private intersectionObserver?;
@@ -159,6 +167,11 @@ export declare class LyraVideo extends LyraElement<LyraVideoEventMap> {
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     private mediaRef;
+    /** Forces the native element muted while `autoplayMuted` is the sole reason (the authored
+     *  `muted` property stays whatever it already was) -- without letting the native
+     *  'volumechange' this triggers overwrite that authored property. See
+     *  `onNativeMediaEvent()`'s 'volumechange' case, guarded by `pendingNativeEcho.muted`. */
+    private forceAutoplayMuted;
     private sourceSignature;
     private syncSources;
     private onSourceSlotChange;
@@ -174,8 +187,16 @@ export declare class LyraVideo extends LyraElement<LyraVideoEventMap> {
     load(): void;
     /** Seeks to a finite time, clamped to the known duration. */
     seek(time: number): void;
+    private dispatchHostTimeupdate;
     /** Sets a finite native playback-rate multiplier. */
     setPlaybackRate(rate: number): void;
+    /** `[data-control="rate"]`'s `<option>` values -- `PLAYBACK_RATES`, plus the current
+     *  `playbackRate` spliced in (numerically sorted) when it isn't already one of them. Mirrors
+     *  av-player's `rateOptions()`: a native `<select>` shows its first option whenever none
+     *  carries `selected`, so a `playbackRate` reached outside the fixed preset list (e.g. a native
+     *  `ratechange` from a platform media key or a picture-in-picture window) would otherwise
+     *  silently misreport the real rate. */
+    private rateSelectOptions;
     /** Sets finite volume in the inclusive zero-to-one range. */
     setVolume(volume: number): void;
     /** Toggles the live native muted state. */

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

@@ -1,8 +1,8 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{ref}from"lit/directives/ref.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{MAX_NATIVE_PLAYBACK_RATE,MIN_NATIVE_PLAYBACK_RATE,NativeMediaController,canExitFullscreen,canRequestFullscreen,canRequestPictureInPicture,safeNativeMediaSource}from"../../../internal/media-controller.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{readResponseText,resolveOwnerFetchTarget}from"../../../internal/resource-loader.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./video.styles.js";import{LYRA_DEFAULT_avPlayerPosition,LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_videoCaptions,LYRA_DEFAULT_videoCaptionsOff,LYRA_DEFAULT_videoEnterFullscreen,LYRA_DEFAULT_videoExitFullscreen,LYRA_DEFAULT_videoExitPictureInPicture,LYRA_DEFAULT_videoMute,LYRA_DEFAULT_videoPictureInPicture,LYRA_DEFAULT_videoPlaybackSpeed,LYRA_DEFAULT_videoPlayerLabel,LYRA_DEFAULT_videoUnmute,LYRA_DEFAULT_videoVolume}from"../../../internal/default-strings.generated.js";const MAX_THUMBNAIL_BYTES=256*1024,MAX_THUMBNAIL_CUES=2e3,PLAYBACK_RATES=[.5,.75,1,1.25,1.5,2];function safeControls(value){return value==="none"||value==="full"?value:"standard"}function safePreload(value){return value==="auto"||value==="none"?value:"metadata"}function parseVttTime(source){const parts=source.trim().split(":").map(Number);if(parts.length<2||parts.length>3||parts.some(part=>!Number.isFinite(part)))return null;const seconds=parts.length===3?parts[0]*3600+parts[1]*60+parts[2]:parts[0]*60+parts[1];return seconds>=0?seconds:null}function parseThumbnailUrl(source,baseUrl,URLCtor){const trimmed=source.trim();if(!trimmed)return null;try{const resolved=new URLCtor(trimmed,baseUrl),sprite=/^#xywh=(\d+),(\d+),(\d+),(\d+)$/u.exec(resolved.hash);resolved.hash="";const src=safeMediaSrc(resolved.href,URLCtor);if(!src)return null;if(!sprite)return{src};const[x,y,width,height]=sprite.slice(1).map(Number);return!Number.isFinite(x)||!Number.isFinite(y)||!Number.isFinite(width)||!Number.isFinite(height)||width<=0||height<=0?null:{src,x,y,width,height}}catch{return null}}function parseThumbnailVtt(source,sourceUrl,URLCtor){const cues=[],normalized=source.replace(/^\uFEFF/u,"").replaceAll(`\r
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{ref}from"lit/directives/ref.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{MAX_NATIVE_PLAYBACK_RATE,MIN_NATIVE_PLAYBACK_RATE,NATIVE_MEDIA_RELAY_EVENTS,NativeMediaController,canExitFullscreen,canRequestFullscreen,canRequestPictureInPicture,safeNativeMediaSource}from"../../../internal/media-controller.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{readResponseText,resolveOwnerFetchTarget}from"../../../internal/resource-loader.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./video.styles.js";import{LYRA_DEFAULT_avPlayerPosition,LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_videoCaptions,LYRA_DEFAULT_videoCaptionsOff,LYRA_DEFAULT_videoEnterFullscreen,LYRA_DEFAULT_videoExitFullscreen,LYRA_DEFAULT_videoExitPictureInPicture,LYRA_DEFAULT_videoMute,LYRA_DEFAULT_videoPictureInPicture,LYRA_DEFAULT_videoPlaybackSpeed,LYRA_DEFAULT_videoPlayerLabel,LYRA_DEFAULT_videoUnmute,LYRA_DEFAULT_videoVolume}from"../../../internal/default-strings.generated.js";const MAX_THUMBNAIL_BYTES=256*1024,MAX_THUMBNAIL_CUES=2e3,PLAYBACK_RATES=[.5,.75,1,1.25,1.5,2];function safeControls(value){return value==="none"||value==="full"?value:"standard"}function safePreload(value){return value==="auto"||value==="none"?value:"metadata"}function parseVttTime(source){const parts=source.trim().split(":").map(Number);if(parts.length<2||parts.length>3||parts.some(part=>!Number.isFinite(part)))return null;const seconds=parts.length===3?parts[0]*3600+parts[1]*60+parts[2]:parts[0]*60+parts[1];return seconds>=0?seconds:null}function parseThumbnailUrl(source,baseUrl,URLCtor){const trimmed=source.trim();if(!trimmed)return null;try{const resolved=new URLCtor(trimmed,baseUrl),sprite=/^#xywh=(\d+),(\d+),(\d+),(\d+)$/u.exec(resolved.hash);resolved.hash="";const src=safeMediaSrc(resolved.href,URLCtor);if(!src)return null;if(!sprite)return{src};const[x,y,width,height]=sprite.slice(1).map(Number);return!Number.isFinite(x)||!Number.isFinite(y)||!Number.isFinite(width)||!Number.isFinite(height)||width<=0||height<=0?null:{src,x,y,width,height}}catch{return null}}function parseThumbnailVtt(source,sourceUrl,URLCtor){const cues=[],normalized=source.replace(/^\uFEFF/u,"").replaceAll(`\r
 `,`
 `).replaceAll("\r",`
 `);for(const block of normalized.split(/\n{2,}/u)){if(cues.length>=MAX_THUMBNAIL_CUES)break;const lines=block.split(`
-`).map(line=>line.trim()).filter(Boolean),timingIndex=lines.findIndex(line=>line.includes("-->"));if(timingIndex<0||!lines[timingIndex+1])continue;const match=/^(\S+)\s+-->\s+(\S+)/u.exec(lines[timingIndex]);if(!match)continue;const start=parseVttTime(match[1]),end=parseVttTime(match[2]),thumbnail=parseThumbnailUrl(lines[timingIndex+1],sourceUrl,URLCtor);start===null||end===null||end<=start||!thumbnail||cues.push({start,end,...thumbnail})}return cues}function textTracks(media){const result=[];if(!media)return result;for(let index=0;index<media.textTracks.length;index+=1){const track=media.textTracks[index];track&&result.push(track)}return result}function formatTime(seconds,locale){const total=Math.floor(finiteRange(seconds,0,0)),hours=Math.floor(total/3600),minutes=Math.floor(total%3600/60),remaining=total%60,regular=getNumberFormat(locale,{maximumFractionDigits:0,useGrouping:!1}),padded=getNumberFormat(locale,{maximumFractionDigits:0,minimumIntegerDigits:2,useGrouping:!1});return hours>0?`${regular.format(hours)}:${padded.format(minutes)}:${padded.format(remaining)}`:`${regular.format(minutes)}:${padded.format(remaining)}`}function unsupportedPromise(host,message){const DOMExceptionConstructor=host.ownerDocument.defaultView?.DOMException??DOMException;return Promise.reject(new DOMExceptionConstructor(message,"NotSupportedError"))}class LyraVideo extends LyraElement{constructor(){super(...arguments),this.autoplay=!1,this.autoplayMuted=!1,this.autoplayOnVisible=!1,this.controls="standard",this.currentTime=0,this.duration=0,this.iconLibrary="system",this.loop=!1,this.muted=!1,this.playing=!1,this.poster="",this.preload="metadata",this.src="",this.thumbnails="",this.title="",this.volume=1,this.playbackRate=1,this.posterVisible=!0,this.captionText="",this.captionTracks=[],this.fullscreen=!1,this.pictureInPicture=!1,this.thumbnailCues=[],this.thumbnailPosition=50,this.mediaController=new NativeMediaController(this,{onEvent:event=>this.onNativeMediaEvent(event)}),this.thumbnailGeneration=0,this.visibilityPaused=!1,this.captionListeners=[],this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.mediaRef=element=>{const video=element?.localName==="video"?element:void 0;this.mediaController.attach(video),video&&(this.mediaController.volume=finiteRange(this.volume,1,0,1),this.mediaController.muted=this.muted||this.autoplayMuted,this.mediaController.playbackRate=this.playbackRate)},this.onSourceSlotChange=()=>this.syncSources(),this.onTimelineInput=event=>{const input=event.currentTarget;this.seek(Number(input.value))},this.onVolumeInput=event=>{this.setVolume(Number(event.currentTarget.value))},this.onRateChange=event=>{this.setPlaybackRate(Number(event.currentTarget.value))},this.onPosterPlay=()=>{this.play().catch(()=>{})},this.onFullscreenButton=()=>{(this.fullscreen?this.exitFullscreen():this.requestFullscreen()).catch(()=>{})},this.onFullscreenChange=()=>{this.fullscreen=this.ownerDocument.fullscreenElement===this.wrapperEl},this.onPictureInPictureChange=()=>{const documentRef=this.ownerDocument;this.pictureInPicture=documentRef.pictureInPictureElement===this.videoEl},this.togglePictureInPicture=()=>{const video=this.videoEl,documentRef=this.ownerDocument;if(!video||!canRequestPictureInPicture(video))return;(documentRef.pictureInPictureElement===video?documentRef.exitPictureInPicture?.():video.requestPictureInPicture().then(()=>{}))?.catch(()=>{})},this.onCaptionChange=event=>{const selected=Number(event.currentTarget.value);this.captionTracks.forEach(({track},index)=>{track.mode=index===selected?"hidden":"disabled"}),this.syncActiveCaption()},this.onTimelinePointerMove=event=>{const rect=event.currentTarget.getBoundingClientRect();if(rect.width<=0||this.duration<=0){this.activeThumbnail=void 0;return}const ratio=finiteRange((event.clientX-rect.left)/rect.width,0,0,1),time=ratio*this.duration;this.activeThumbnail=this.thumbnailCues.find(cue=>time>=cue.start&&time<cue.end),this.thumbnailPosition=ratio*100},this.onTimelinePointerLeave=()=>{this.activeThumbnail=void 0}}static{this.defaultStrings={...super.defaultStrings,avPlayerPosition:LYRA_DEFAULT_avPlayerPosition,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,videoCaptions:LYRA_DEFAULT_videoCaptions,videoCaptionsOff:LYRA_DEFAULT_videoCaptionsOff,videoEnterFullscreen:LYRA_DEFAULT_videoEnterFullscreen,videoExitFullscreen:LYRA_DEFAULT_videoExitFullscreen,videoExitPictureInPicture:LYRA_DEFAULT_videoExitPictureInPicture,videoMute:LYRA_DEFAULT_videoMute,videoPictureInPicture:LYRA_DEFAULT_videoPictureInPicture,videoPlaybackSpeed:LYRA_DEFAULT_videoPlaybackSpeed,videoPlayerLabel:LYRA_DEFAULT_videoPlayerLabel,videoUnmute:LYRA_DEFAULT_videoUnmute,videoVolume:LYRA_DEFAULT_videoVolume}}static{this.styles=[LyraElement.styles,styles,srOnly]}static get observedAttributes(){return[...new Set([...super.observedAttributes,"currenttime","current-time"])]}attributeChangedCallback(name,oldValue,newValue){if(name==="currenttime"||name==="current-time"){oldValue!==newValue&&(this.currentTime=finiteRange(Number(newValue??0),0,0));return}super.attributeChangedCallback(name,oldValue,newValue)}get videoEl(){const media=this.mediaController.element;return media?.localName==="video"?media:void 0}get playControl(){return this.renderRoot.querySelector('[part="poster-play-button"], [data-control="play"]')}focus(options){this.playControl?.focus(options)}blur(){this.playControl?.blur()}click(){this.playControl?.click()}connectedCallback(){super.connectedCallback(),this.mediaController.reconnect(),this.ownerDocument.addEventListener("fullscreenchange",this.onFullscreenChange),this.ownerDocument.addEventListener("enterpictureinpicture",this.onPictureInPictureChange,!0),this.ownerDocument.addEventListener("leavepictureinpicture",this.onPictureInPictureChange,!0),this.hasUpdated&&(this.scheduleAfterUpdate(()=>this.bindCaptionTracks(),"video-caption-reconnect"),this.scheduleAfterUpdate(()=>this.configureVisibilityObserver(),"video-visibility-reconnect"),this.thumbnails&&this.scheduleAfterUpdate(()=>{this.loadThumbnails()},"video-thumbnails-reconnect"))}firstUpdated(changed){super.firstUpdated(changed),this.syncSources(),this.configureVisibilityObserver(),this.loadThumbnails()}disconnectedCallback(){this.mediaController.disconnect(),this.thumbnailGeneration+=1,this.thumbnailAbort?.abort(),this.thumbnailAbort=void 0,this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.unbindCaptionTracks(),this.captionTracks.length&&(this.captionTracks=[]),this.captionText&&(this.captionText=""),this.activeThumbnail&&(this.activeThumbnail=void 0),this.playing&&(this.playing=!1),this.fullscreen&&(this.fullscreen=!1),this.pictureInPicture&&(this.pictureInPicture=!1),this.ownerDocument.removeEventListener("fullscreenchange",this.onFullscreenChange),this.ownerDocument.removeEventListener("enterpictureinpicture",this.onPictureInPictureChange,!0),this.ownerDocument.removeEventListener("leavepictureinpicture",this.onPictureInPictureChange,!0),super.disconnectedCallback()}willUpdate(changed){if(super.willUpdate(changed),changed.has("controls")&&(this.controls=safeControls(this.controls)),changed.has("preload")&&(this.preload=safePreload(this.preload)),changed.has("volume")){const next=finiteRange(this.volume,this.mediaController.volume,0,1);Object.is(next,this.volume)||(this.volume=next),this.mediaController.volume=next}if(changed.has("muted")&&(this.mediaController.muted=this.muted),changed.has("autoplayMuted")&&this.autoplayMuted&&(this.mediaController.muted=!0),changed.has("currentTime")){const max=this.mediaController.duration>0?this.mediaController.duration:Number.POSITIVE_INFINITY,next=finiteRange(this.currentTime,0,0,max);Object.is(next,this.currentTime)||(this.currentTime=next),this.mediaController.currentTime=next}if(changed.has("duration")){const next=finiteRange(this.duration,0,0);Object.is(next,this.duration)||(this.duration=next)}changed.has("src")&&(this.visibilityPaused=!1,this.posterVisible=!0,this.hasUpdated&&(this.playing=!1,this.duration=0,this.currentTime=0,this.scheduleAfterUpdate(()=>this.syncSources(),"video-sources"))),changed.has("thumbnails")&&this.hasUpdated&&this.scheduleAfterUpdate(()=>{this.loadThumbnails()},"video-thumbnails"),changed.has("autoplayOnVisible")&&this.hasUpdated&&this.scheduleAfterUpdate(()=>this.configureVisibilityObserver(),"video-visibility")}sourceSignature(){const nodes=[...this.children].filter(child=>child.localName==="source"||child.localName==="track").map(child=>({tag:child.localName,src:child.getAttribute("src"),type:child.getAttribute("type"),media:child.getAttribute("media"),kind:child.getAttribute("kind"),srclang:child.getAttribute("srclang"),label:child.getAttribute("label"),default:child.hasAttribute("default")}));return JSON.stringify({src:this.src,nodes})}syncSources(force=!1){if(!this.videoEl)return;const signature=this.sourceSignature();!force&&signature===this.lastSourceSignature||(this.lastSourceSignature=signature,this.visibilityPaused=!1,this.unbindCaptionTracks(),this.captionTracks.length&&(this.captionTracks=[]),this.captionText&&(this.captionText=""),this.mediaController.setSources({src:this.src,nodes:this.children}),this.mediaController.currentTime=this.currentTime)}getVideoElement(){return this.videoEl}getState(){const video=this.videoEl;return{playing:!!(video&&!video.paused&&!video.ended),currentTime:this.mediaController.currentTime,duration:this.mediaController.duration,volume:this.mediaController.volume,muted:this.mediaController.muted,playbackRate:this.mediaController.playbackRate}}play(){return this.mediaController.play()}pause(){this.visibilityPaused=!1,this.mediaController.pause()}load(){this.visibilityPaused=!1,this.currentTime=0,this.syncSources(!0)}seek(time){const max=this.mediaController.duration>0?this.mediaController.duration:Number.POSITIVE_INFINITY,next=finiteRange(time,0,0,max);this.mediaController.currentTime=next,this.currentTime=this.mediaController.currentTime;const EventConstructor=this.ownerDocument.defaultView?.Event??Event;this.dispatchEvent(new EventConstructor("timeupdate"))}setPlaybackRate(rate){const next=finiteRange(rate,1,MIN_NATIVE_PLAYBACK_RATE,MAX_NATIVE_PLAYBACK_RATE);this.playbackRate=next,this.mediaController.playbackRate=next}setVolume(volume){const next=finiteRange(volume,this.mediaController.volume,0,1);this.volume=next,this.mediaController.volume=next}toggleMute(){const next=!this.mediaController.muted;this.muted=next,this.mediaController.muted=next}togglePlay(){this.videoEl?.paused??!0?this.play().catch(()=>{}):this.pause()}requestFullscreen(){return canRequestFullscreen(this.wrapperEl)?this.wrapperEl.requestFullscreen():unsupportedPromise(this,"Fullscreen is unavailable for this video.")}exitFullscreen(){return canExitFullscreen(this.ownerDocument)?this.ownerDocument.exitFullscreen():unsupportedPromise(this,"Fullscreen exit is unavailable for this video.")}onNativeMediaEvent(event){if(this.videoEl)switch(event.type){case"loadedmetadata":case"durationchange":this.duration=this.mediaController.duration,this.currentTime=this.mediaController.currentTime,this.bindCaptionTracks();break;case"play":this.playing=!0,this.posterVisible=!1;break;case"pause":case"ended":this.playing=!1;break;case"error":this.playing=!1,this.duration=0,this.currentTime=0;break;case"timeupdate":case"seeked":this.currentTime=this.mediaController.currentTime;break;case"volumechange":this.volume=this.mediaController.volume,this.muted=this.mediaController.muted;break;case"ratechange":this.playbackRate=this.mediaController.playbackRate;break}}canRenderFullscreen(){return typeof this.ownerDocument.defaultView?.HTMLElement.prototype.requestFullscreen=="function"&&this.ownerDocument.fullscreenEnabled!==!1}canRenderPictureInPicture(){const ownerWindow=this.ownerDocument.defaultView,documentRef=this.ownerDocument;return this.controls==="full"&&typeof ownerWindow?.HTMLVideoElement.prototype.requestPictureInPicture=="function"&&documentRef.pictureInPictureEnabled!==!1}pauseForVisibility(){this.visibilityPaused=!0,this.mediaController.pause()}configureVisibilityObserver(){const visibilityOwnedPause=this.visibilityPaused;this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0;const ownerWindow=this.ownerDocument.defaultView,IntersectionObserverCtor=ownerWindow?.IntersectionObserver;if(!this.autoplayOnVisible||!IntersectionObserverCtor){visibilityOwnedPause&&(this.visibilityPaused=!1,this.mediaController.play().catch(()=>{}));return}this.visibilityPaused=visibilityOwnedPause;let observer;observer=new IntersectionObserverCtor(entries=>{if(!observer||!this.isConnected||this.intersectionObserver!==observer||this.ownerDocument.defaultView!==ownerWindow)return;const visible=entries[0]?.isIntersecting??!0,video=this.videoEl;if(video){if(!visible){video.paused||this.pauseForVisibility();return}this.visibilityPaused&&(this.visibilityPaused=!1,this.mediaController.play().catch(()=>{}))}}),this.intersectionObserver=observer,observer.observe(this)}unbindCaptionTracks(){for(const{track,listener}of this.captionListeners)track.removeEventListener("cuechange",listener);this.captionListeners=[]}bindCaptionTracks(){this.unbindCaptionTracks();const selectable=textTracks(this.videoEl).filter(track=>track.kind==="captions"||track.kind==="subtitles");for(const track of selectable)track.mode==="showing"&&(track.mode="hidden");this.captionTracks=selectable.map(track=>({track,label:track.label||track.language||this.localize("videoCaptions"),language:track.language}));for(const track of selectable){const listener=()=>this.syncActiveCaption();track.addEventListener("cuechange",listener),this.captionListeners.push({track,listener})}this.syncActiveCaption()}syncActiveCaption(){const lines=[];for(const{track}of this.captionTracks)if(!(track.mode!=="hidden"||!track.activeCues))for(let index=0;index<track.activeCues.length;index+=1){const cue=track.activeCues[index];cue&&typeof cue.text=="string"&&lines.push(cue.text)}this.captionText=lines.join(`
+`).map(line=>line.trim()).filter(Boolean),timingIndex=lines.findIndex(line=>line.includes("-->"));if(timingIndex<0||!lines[timingIndex+1])continue;const match=/^(\S+)\s+-->\s+(\S+)/u.exec(lines[timingIndex]);if(!match)continue;const start=parseVttTime(match[1]),end=parseVttTime(match[2]),thumbnail=parseThumbnailUrl(lines[timingIndex+1],sourceUrl,URLCtor);start===null||end===null||end<=start||!thumbnail||cues.push({start,end,...thumbnail})}return cues}function textTracks(media){const result=[];if(!media)return result;for(let index=0;index<media.textTracks.length;index+=1){const track=media.textTracks[index];track&&result.push(track)}return result}function formatTime(seconds,locale){const total=Math.floor(finiteRange(seconds,0,0)),hours=Math.floor(total/3600),minutes=Math.floor(total%3600/60),remaining=total%60,regular=getNumberFormat(locale,{maximumFractionDigits:0,useGrouping:!1}),padded=getNumberFormat(locale,{maximumFractionDigits:0,minimumIntegerDigits:2,useGrouping:!1});return hours>0?`${regular.format(hours)}:${padded.format(minutes)}:${padded.format(remaining)}`:`${regular.format(minutes)}:${padded.format(remaining)}`}function unsupportedPromise(host,message){const DOMExceptionConstructor=host.ownerDocument.defaultView?.DOMException??DOMException;return Promise.reject(new DOMExceptionConstructor(message,"NotSupportedError"))}class LyraVideo extends LyraElement{constructor(){super(...arguments),this.autoplay=!1,this.autoplayMuted=!1,this.autoplayOnVisible=!1,this.controls="standard",this.currentTime=0,this.duration=0,this.iconLibrary="system",this.loop=!1,this.muted=!1,this.playing=!1,this.poster="",this.preload="metadata",this.src="",this.thumbnails="",this.title="",this.volume=1,this.playbackRate=1,this.posterVisible=!0,this.captionText="",this.captionTracks=[],this.fullscreen=!1,this.pictureInPicture=!1,this.thumbnailCues=[],this.thumbnailPosition=50,this.mediaController=new NativeMediaController(this,{relayEvents:NATIVE_MEDIA_RELAY_EVENTS.filter(type=>type!=="timeupdate"),onEvent:event=>this.onNativeMediaEvent(event)}),this.pendingNativeEcho={timeupdate:!1,muted:!1},this.thumbnailGeneration=0,this.visibilityPaused=!1,this.captionListeners=[],this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.mediaRef=element=>{const video=element?.localName==="video"?element:void 0;this.mediaController.attach(video),video&&(this.mediaController.volume=finiteRange(this.volume,1,0,1),this.autoplayMuted&&!this.muted?this.forceAutoplayMuted():this.mediaController.muted=this.muted,this.mediaController.playbackRate=this.playbackRate)},this.onSourceSlotChange=()=>this.syncSources(),this.onTimelineInput=event=>{const input=event.currentTarget;this.seek(Number(input.value))},this.onVolumeInput=event=>{this.setVolume(Number(event.currentTarget.value))},this.onRateChange=event=>{this.setPlaybackRate(Number(event.currentTarget.value))},this.onPosterPlay=()=>{this.play().catch(()=>{})},this.onFullscreenButton=()=>{(this.fullscreen?this.exitFullscreen():this.requestFullscreen()).catch(()=>{})},this.onFullscreenChange=()=>{this.fullscreen=this.ownerDocument.fullscreenElement===this.wrapperEl},this.onPictureInPictureChange=()=>{const documentRef=this.ownerDocument;this.pictureInPicture=documentRef.pictureInPictureElement===this.videoEl},this.togglePictureInPicture=()=>{const video=this.videoEl,documentRef=this.ownerDocument;if(!video||!canRequestPictureInPicture(video))return;(documentRef.pictureInPictureElement===video?documentRef.exitPictureInPicture?.():video.requestPictureInPicture().then(()=>{}))?.catch(()=>{})},this.onCaptionChange=event=>{const selected=Number(event.currentTarget.value);this.captionTracks.forEach(({track},index)=>{track.mode=index===selected?"hidden":"disabled"}),this.syncActiveCaption()},this.onTimelinePointerMove=event=>{const rect=event.currentTarget.getBoundingClientRect();if(rect.width<=0||this.duration<=0){this.activeThumbnail=void 0;return}const ratio=finiteRange((event.clientX-rect.left)/rect.width,0,0,1),time=ratio*this.duration;this.activeThumbnail=this.thumbnailCues.find(cue=>time>=cue.start&&time<cue.end),this.thumbnailPosition=ratio*100},this.onTimelinePointerLeave=()=>{this.activeThumbnail=void 0}}static{this.defaultStrings={...super.defaultStrings,avPlayerPosition:LYRA_DEFAULT_avPlayerPosition,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,videoCaptions:LYRA_DEFAULT_videoCaptions,videoCaptionsOff:LYRA_DEFAULT_videoCaptionsOff,videoEnterFullscreen:LYRA_DEFAULT_videoEnterFullscreen,videoExitFullscreen:LYRA_DEFAULT_videoExitFullscreen,videoExitPictureInPicture:LYRA_DEFAULT_videoExitPictureInPicture,videoMute:LYRA_DEFAULT_videoMute,videoPictureInPicture:LYRA_DEFAULT_videoPictureInPicture,videoPlaybackSpeed:LYRA_DEFAULT_videoPlaybackSpeed,videoPlayerLabel:LYRA_DEFAULT_videoPlayerLabel,videoUnmute:LYRA_DEFAULT_videoUnmute,videoVolume:LYRA_DEFAULT_videoVolume}}static{this.styles=[LyraElement.styles,styles,srOnly]}static get observedAttributes(){return[...new Set([...super.observedAttributes,"currenttime","current-time"])]}attributeChangedCallback(name,oldValue,newValue){if(name==="currenttime"||name==="current-time"){oldValue!==newValue&&(this.currentTime=finiteRange(Number(newValue??0),0,0));return}super.attributeChangedCallback(name,oldValue,newValue)}get videoEl(){const media=this.mediaController.element;return media?.localName==="video"?media:void 0}get playControl(){return this.renderRoot.querySelector('[part="poster-play-button"], [data-control="play"]')}focus(options){this.playControl?.focus(options)}blur(){this.playControl?.blur()}click(){this.playControl?.click()}connectedCallback(){super.connectedCallback(),this.mediaController.reconnect(),this.ownerDocument.addEventListener("fullscreenchange",this.onFullscreenChange),this.ownerDocument.addEventListener("enterpictureinpicture",this.onPictureInPictureChange,!0),this.ownerDocument.addEventListener("leavepictureinpicture",this.onPictureInPictureChange,!0),this.hasUpdated&&(this.scheduleAfterUpdate(()=>this.bindCaptionTracks(),"video-caption-reconnect"),this.scheduleAfterUpdate(()=>this.configureVisibilityObserver(),"video-visibility-reconnect"),this.thumbnails&&this.scheduleAfterUpdate(()=>{this.loadThumbnails()},"video-thumbnails-reconnect"))}firstUpdated(changed){super.firstUpdated(changed),this.syncSources(),this.configureVisibilityObserver(),this.loadThumbnails()}disconnectedCallback(){this.mediaController.disconnect(),this.thumbnailGeneration+=1,this.thumbnailAbort?.abort(),this.thumbnailAbort=void 0,this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0,this.unbindCaptionTracks(),this.captionTracks.length&&(this.captionTracks=[]),this.captionText&&(this.captionText=""),this.activeThumbnail&&(this.activeThumbnail=void 0),this.playing&&(this.playing=!1),this.fullscreen&&(this.fullscreen=!1),this.pictureInPicture&&(this.pictureInPicture=!1),this.ownerDocument.removeEventListener("fullscreenchange",this.onFullscreenChange),this.ownerDocument.removeEventListener("enterpictureinpicture",this.onPictureInPictureChange,!0),this.ownerDocument.removeEventListener("leavepictureinpicture",this.onPictureInPictureChange,!0),super.disconnectedCallback()}willUpdate(changed){if(super.willUpdate(changed),changed.has("controls")&&(this.controls=safeControls(this.controls)),changed.has("preload")&&(this.preload=safePreload(this.preload)),changed.has("volume")){const next=finiteRange(this.volume,this.mediaController.volume,0,1);Object.is(next,this.volume)||(this.volume=next),this.mediaController.volume=next}if(changed.has("muted")&&(this.mediaController.muted=this.muted),changed.has("autoplayMuted")&&this.autoplayMuted&&this.forceAutoplayMuted(),changed.has("currentTime")){const max=this.mediaController.duration>0?this.mediaController.duration:Number.POSITIVE_INFINITY,next=finiteRange(this.currentTime,0,0,max);Object.is(next,this.currentTime)||(this.currentTime=next),this.mediaController.currentTime=next}if(changed.has("duration")){const next=finiteRange(this.duration,0,0);Object.is(next,this.duration)||(this.duration=next)}changed.has("src")&&(this.visibilityPaused=!1,this.posterVisible=!0,this.hasUpdated&&(this.playing=!1,this.duration=0,this.currentTime=0,this.scheduleAfterUpdate(()=>this.syncSources(),"video-sources"))),changed.has("thumbnails")&&this.hasUpdated&&this.scheduleAfterUpdate(()=>{this.loadThumbnails()},"video-thumbnails"),changed.has("autoplayOnVisible")&&this.hasUpdated&&this.scheduleAfterUpdate(()=>this.configureVisibilityObserver(),"video-visibility")}forceAutoplayMuted(){this.pendingNativeEcho.muted=!0,this.mediaController.muted=!0}sourceSignature(){const nodes=[...this.children].filter(child=>child.localName==="source"||child.localName==="track").map(child=>({tag:child.localName,src:child.getAttribute("src"),type:child.getAttribute("type"),media:child.getAttribute("media"),kind:child.getAttribute("kind"),srclang:child.getAttribute("srclang"),label:child.getAttribute("label"),default:child.hasAttribute("default")}));return JSON.stringify({src:this.src,nodes})}syncSources(force=!1){if(!this.videoEl)return;const signature=this.sourceSignature();!force&&signature===this.lastSourceSignature||(this.lastSourceSignature=signature,this.visibilityPaused=!1,this.unbindCaptionTracks(),this.captionTracks.length&&(this.captionTracks=[]),this.captionText&&(this.captionText=""),this.mediaController.setSources({src:this.src,nodes:this.children}),this.mediaController.currentTime=this.currentTime)}getVideoElement(){return this.videoEl}getState(){const video=this.videoEl;return{playing:!!(video&&!video.paused&&!video.ended),currentTime:this.mediaController.currentTime,duration:this.mediaController.duration,volume:this.mediaController.volume,muted:this.mediaController.muted,playbackRate:this.mediaController.playbackRate}}play(){return this.mediaController.play()}pause(){this.visibilityPaused=!1,this.mediaController.pause()}load(){this.visibilityPaused=!1,this.currentTime=0,this.syncSources(!0)}seek(time){const max=this.mediaController.duration>0?this.mediaController.duration:Number.POSITIVE_INFINITY,next=finiteRange(time,0,0,max);this.mediaController.currentTime=next,this.currentTime=this.mediaController.currentTime,this.pendingNativeEcho.timeupdate=!0,this.dispatchHostTimeupdate()}dispatchHostTimeupdate(){const EventConstructor=this.ownerDocument.defaultView?.Event??Event;this.dispatchEvent(new EventConstructor("timeupdate"))}setPlaybackRate(rate){const next=finiteRange(rate,1,MIN_NATIVE_PLAYBACK_RATE,MAX_NATIVE_PLAYBACK_RATE);this.playbackRate=next,this.mediaController.playbackRate=next}rateSelectOptions(){const rates=PLAYBACK_RATES;return rates.includes(this.playbackRate)?rates:[...rates,this.playbackRate].sort((a,b)=>a-b)}setVolume(volume){const next=finiteRange(volume,this.mediaController.volume,0,1);this.volume=next,this.mediaController.volume=next}toggleMute(){const next=!this.mediaController.muted;this.muted=next,this.mediaController.muted=next}togglePlay(){this.videoEl?.paused??!0?this.play().catch(()=>{}):this.pause()}requestFullscreen(){return canRequestFullscreen(this.wrapperEl)?this.wrapperEl.requestFullscreen():unsupportedPromise(this,"Fullscreen is unavailable for this video.")}exitFullscreen(){return canExitFullscreen(this.ownerDocument)?this.ownerDocument.exitFullscreen():unsupportedPromise(this,"Fullscreen exit is unavailable for this video.")}onNativeMediaEvent(event){if(this.videoEl)switch(event.type){case"loadedmetadata":case"durationchange":this.duration=this.mediaController.duration,this.currentTime=this.mediaController.currentTime,this.bindCaptionTracks();break;case"play":this.playing=!0,this.posterVisible=!1;break;case"pause":case"ended":this.playing=!1;break;case"error":this.playing=!1,this.duration=0,this.currentTime=0;break;case"timeupdate":this.currentTime=this.mediaController.currentTime,this.pendingNativeEcho.timeupdate?this.pendingNativeEcho.timeupdate=!1:this.dispatchHostTimeupdate();break;case"seeked":this.currentTime=this.mediaController.currentTime,this.pendingNativeEcho.timeupdate=!1;break;case"volumechange":this.volume=this.mediaController.volume,this.pendingNativeEcho.muted?this.pendingNativeEcho.muted=!1:this.muted=this.mediaController.muted;break;case"ratechange":this.playbackRate=this.mediaController.playbackRate;break}}canRenderFullscreen(){return typeof this.ownerDocument.defaultView?.HTMLElement.prototype.requestFullscreen=="function"&&this.ownerDocument.fullscreenEnabled!==!1}canRenderPictureInPicture(){const ownerWindow=this.ownerDocument.defaultView,documentRef=this.ownerDocument;return this.controls==="full"&&typeof ownerWindow?.HTMLVideoElement.prototype.requestPictureInPicture=="function"&&documentRef.pictureInPictureEnabled!==!1}pauseForVisibility(){this.visibilityPaused=!0,this.mediaController.pause()}configureVisibilityObserver(){const visibilityOwnedPause=this.visibilityPaused;this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0;const ownerWindow=this.ownerDocument.defaultView,IntersectionObserverCtor=ownerWindow?.IntersectionObserver;if(!this.autoplayOnVisible||!IntersectionObserverCtor){visibilityOwnedPause&&(this.visibilityPaused=!1,this.mediaController.play().catch(()=>{}));return}this.visibilityPaused=visibilityOwnedPause;let observer;observer=new IntersectionObserverCtor(entries=>{if(!observer||!this.isConnected||this.intersectionObserver!==observer||this.ownerDocument.defaultView!==ownerWindow)return;const visible=entries[0]?.isIntersecting??!0,video=this.videoEl;if(video){if(!visible){video.paused||this.pauseForVisibility();return}this.visibilityPaused&&(this.visibilityPaused=!1,this.mediaController.play().catch(()=>{}))}}),this.intersectionObserver=observer,observer.observe(this)}unbindCaptionTracks(){for(const{track,listener}of this.captionListeners)track.removeEventListener("cuechange",listener);this.captionListeners=[]}bindCaptionTracks(){this.unbindCaptionTracks();const selectable=textTracks(this.videoEl).filter(track=>track.kind==="captions"||track.kind==="subtitles");for(const track of selectable)track.mode==="showing"&&(track.mode="hidden");this.captionTracks=selectable.map(track=>({track,label:track.label||track.language||this.localize("videoCaptions"),language:track.language}));for(const track of selectable){const listener=()=>this.syncActiveCaption();track.addEventListener("cuechange",listener),this.captionListeners.push({track,listener})}this.syncActiveCaption()}syncActiveCaption(){const lines=[];for(const{track}of this.captionTracks)if(!(track.mode!=="hidden"||!track.activeCues))for(let index=0;index<track.activeCues.length;index+=1){const cue=track.activeCues[index];cue&&typeof cue.text=="string"&&lines.push(cue.text)}this.captionText=lines.join(`
 `)}async loadThumbnails(){const generation=++this.thumbnailGeneration;this.thumbnailAbort?.abort(),this.thumbnailAbort=void 0,this.thumbnailCues.length&&(this.thumbnailCues=[]),this.activeThumbnail&&(this.activeThumbnail=void 0);const fetchTarget=resolveOwnerFetchTarget(this,this.thumbnails),AbortControllerCtor=fetchTarget?.view.AbortController;if(!fetchTarget||!AbortControllerCtor)return;const controller=new AbortControllerCtor;this.thumbnailAbort=controller;try{const response=await fetchTarget.view.fetch(fetchTarget.url,{signal:controller.signal});if(generation!==this.thumbnailGeneration||!this.isConnected||this.ownerDocument.defaultView!==fetchTarget.view||!response.ok)return;const text=await readResponseText(response,MAX_THUMBNAIL_BYTES);if(generation!==this.thumbnailGeneration||!this.isConnected||this.ownerDocument.defaultView!==fetchTarget.view)return;this.thumbnailCues=parseThumbnailVtt(text,fetchTarget.url,fetchTarget.view.URL)}catch{if(generation!==this.thumbnailGeneration||!this.isConnected)return;this.thumbnailCues=[],this.activeThumbnail=void 0}finally{generation===this.thumbnailGeneration&&(this.thumbnailAbort=void 0)}}renderIcon(name,path){return html`<lr-icon library=${this.iconLibrary} name=${name} aria-hidden="true">
       <path d=${path}></path>
     </lr-icon>`}renderDecorativeIconLayer(content){return html`<span class="control-icon-layer" aria-hidden="true" inert>${content}</span>`}renderPlaySlots(){return html`
@@ -123,7 +123,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
                   aria-label=${this.localize("videoPlaybackSpeed")}
                   @change=${this.onRateChange}
                 >
-                  ${PLAYBACK_RATES.map(rate=>html`
+                  ${this.rateSelectOptions().map(rate=>html`
                     <option value=${String(rate)} ?selected=${rate===this.playbackRate}>
                       ${getNumberFormat(this.effectiveLocale,{maximumFractionDigits:2}).format(rate)}×
                     </option>

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

@@ -60,6 +60,10 @@ import{css}from"lit";const styles=css`
     color: var(--controls-color, var(--lr-color-on-strong-overlay));
   }
 
+  .icon-button-stack[hidden] {
+    display: none;
+  }
+
   .icon-button-stack > button,
   .icon-button-stack > .control-icon-layer {
     grid-area: 1 / 1;
@@ -256,8 +260,6 @@ import{css}from"lit";const styles=css`
     min-block-size: var(--lr-icon-button-size);
     display: flex;
     align-items: center;
-    /* Elapsed time is a physical media axis, rather than reading-direction navigation: native
-       ArrowRight therefore advances and ArrowLeft rewinds in both LTR and RTL. */
     direction: ltr;
   }
 

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

@@ -81,8 +81,9 @@ export declare class LyraZoomableFrame extends LyraElement<LyraZoomableFrameEven
      * a localized purpose title; a property-only value names the iframe. An explicitly empty host
      * name is preserved as an empty iframe title instead of being replaced through truthiness. */
     accessibleLabel: string | null;
-    /** The internal iframe. Readonly by convention; replaced whenever navigation policy changes. */
-    iframe?: HTMLIFrameElement;
+    /** The internal iframe; replaced whenever navigation policy changes. An explicit `get` (rather
+     *  than `@query`) so the generated manifest marks it readonly, not merely by convention. */
+    get iframe(): HTMLIFrameElement | undefined;
     private cachedZoomLevelsSource;
     private cachedZoomLevels;
     /** Focus the internal iframe when interaction is enabled and a live frame is connected. */

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,query}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]}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{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
       part="controls"
       role="toolbar"
       aria-label=${this.localize("zoomControls")}
@@ -35,4 +35,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       @focusin=${this.onFrameFocus}
       @focusout=${this.onFrameBlur}
       @pointerdown=${this.scheduleFrameFocusReconciliation}
-    ></iframe>`;return html`${keyed(generation,frame)}${this.renderControls()}`}}__decorate([property()],LyraZoomableFrame.prototype,"src",void 0),__decorate([property()],LyraZoomableFrame.prototype,"srcdoc",void 0),__decorate([property({type:Boolean})],LyraZoomableFrame.prototype,"allowfullscreen",void 0),__decorate([property()],LyraZoomableFrame.prototype,"loading",void 0),__decorate([property()],LyraZoomableFrame.prototype,"referrerpolicy",void 0),__decorate([property()],LyraZoomableFrame.prototype,"sandbox",void 0),__decorate([property({type:Number,reflect:!0})],LyraZoomableFrame.prototype,"zoom",void 0),__decorate([property({attribute:"zoom-levels"})],LyraZoomableFrame.prototype,"zoomLevels",void 0),__decorate([property({type:Boolean,attribute:"without-controls",reflect:!0})],LyraZoomableFrame.prototype,"withoutControls",void 0),__decorate([property({type:Boolean,attribute:"without-interaction",reflect:!0})],LyraZoomableFrame.prototype,"withoutInteraction",void 0),__decorate([property({type:Boolean,attribute:"with-theme-sync",reflect:!0})],LyraZoomableFrame.prototype,"withThemeSync",void 0),__decorate([property({attribute:"aria-label"})],LyraZoomableFrame.prototype,"accessibleLabel",void 0),__decorate([query("iframe")],LyraZoomableFrame.prototype,"iframe",void 0);export{LyraZoomableFrame};
+    ></iframe>`;return html`${keyed(generation,frame)}${this.renderControls()}`}}__decorate([property()],LyraZoomableFrame.prototype,"src",void 0),__decorate([property()],LyraZoomableFrame.prototype,"srcdoc",void 0),__decorate([property({type:Boolean})],LyraZoomableFrame.prototype,"allowfullscreen",void 0),__decorate([property()],LyraZoomableFrame.prototype,"loading",void 0),__decorate([property()],LyraZoomableFrame.prototype,"referrerpolicy",void 0),__decorate([property()],LyraZoomableFrame.prototype,"sandbox",void 0),__decorate([property({type:Number,reflect:!0})],LyraZoomableFrame.prototype,"zoom",void 0),__decorate([property({attribute:"zoom-levels"})],LyraZoomableFrame.prototype,"zoomLevels",void 0),__decorate([property({type:Boolean,attribute:"without-controls",reflect:!0})],LyraZoomableFrame.prototype,"withoutControls",void 0),__decorate([property({type:Boolean,attribute:"without-interaction",reflect:!0})],LyraZoomableFrame.prototype,"withoutInteraction",void 0),__decorate([property({type:Boolean,attribute:"with-theme-sync",reflect:!0})],LyraZoomableFrame.prototype,"withThemeSync",void 0),__decorate([property({attribute:"aria-label"})],LyraZoomableFrame.prototype,"accessibleLabel",void 0);export{LyraZoomableFrame};