@aceshooting/lyra-ui 24.2.0 → 25.1.0

package/dist/components/layout/navigation-menu-item/navigation-menu-item.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{activeElementIn}from"../../../internal/active-element.js";import{deferredPlaceReady,loadAnchoredOverlayRuntime,syncTopLayerRelease,topLayerPlacement,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{chevronIcon}from"../../../internal/icons.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{LyraElement}from"../../../internal/lyra-element.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{activateNonmodalOverlay,composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{navigationMenuOwner,registerNavigationMenuItemController}from"../navigation-menu/navigation-menu-owner.js";import{styles}from"./navigation-menu-item.styles.js";const PLACEMENT_STYLE_PROPERTIES=["position","margin","left","top","--lr-positioner-available-inline-size","--lr-positioner-available-block-size"],SHOW_OFFSET="translateY(var(--lr-size-neg-0-25rem))";function parseTimeList(value){return value.split(",").map(entry=>{const match=/^\s*(-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(ms|s)\s*$/i.exec(entry);if(!match)return 0;const amount=Number(match[1]);return Number.isFinite(amount)?match[2]?.toLowerCase()==="s"?amount*1e3:amount:0})}class LyraNavigationMenuItem extends LyraElement{static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const value=!!next;if(value===this._open)return;const source=this.hasUpdated?"programmatic":null;value?this.openPanel("programmatic",source):this.closePanel(source)}constructor(){super(),this.href="",this.target="",this.rel="",this.current=!1,this._open=!1,this.browserResolved=!1,this.closing=!1,this.slotPresence=new SlotPresenceController(this),this.panelId=nextId("navigation-menu-panel"),this.liveOpen=!1,this.placementKey="",this.pendingShow=!1,this.hideAnimationStarted=!1,this.transitionToken=0,this.focusInPanel=!1,this.onFocusIn=event=>{const panel=this.panelElement,target=event.composedPath()[0];this.focusInPanel=panel!==null&&target!==void 0&&composedContains(panel,target)},this.onFocusOut=event=>{const next=event.relatedTarget;if(next===null)return;const panel=this.panelElement;(!panel||!composedContains(panel,next))&&(this.focusInPanel=!1)},this.onBaseClick=()=>{if(this.isLink)return;const context=this.ownerContext;if(context){context.activate(this);return}this.isTrigger&&(this._open?this.closePanel("user"):this.openPanel("programmatic","user"))},this.onHostKeyDown=event=>{event.key!=="Escape"||event.defaultPrevented||!this._open||this.ownerContext||(event.preventDefault(),this.onOverlayEscape())},registerNavigationMenuItemController(this,{isTrigger:()=>this.isTrigger,isLink:()=>this.isLink,isOpen:()=>this._open,mode:()=>this._open?this.interactionMode:void 0,pin:()=>{this._open&&(this.interactionMode="pinned")},base:()=>this.baseElement,panel:()=>this.panelElement,open:(mode,source)=>this.openPanel(mode,source),close:(source,options)=>this.closePanel(source,options),isTopmost:()=>this.overlayHandle?.isTopmost()??!1,placementReady:()=>this.placementReady(),reposition:()=>{this.placementKey="",this.requestUpdate()}})}get ownerContext(){return navigationMenuOwner(this)}get isLink(){return!!safeLinkHref(this.href)}get isTrigger(){return!this.isLink&&this.slotPresence.has("panel")}get floatingLayout(){return this.ownerContext?.layout()==="bar"}get baseElement(){return this.renderRoot?.querySelector('[part~="base"]')??null}get panelElement(){return this.renderRoot?.querySelector('[part~="panel"]')??null}get canDisclose(){return this.isLink?!1:!this.browserResolved||this.slotPresence.has("panel")}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.addEventListener("keydown",this.onHostKeyDown),this.updateBrowserDerivedState(()=>{this.browserResolved=!0}),this.hasUpdated&&this._open&&(this.interactionMode="programmatic",this.requestUpdate())}disconnectedCallback(){this.removeEventListener("focusin",this.onFocusIn),this.removeEventListener("focusout",this.onFocusOut),this.removeEventListener("keydown",this.onHostKeyDown),this.cancelMorph(),this.stopPlacement(),this.releaseOverlay(!1),this.cancelHideAnimation(),this.closing=!1,this.focusInPanel=!1,this.semanticFocusOrigin=void 0,this._open&&this.interactionMode==="hover"?(this._open=!1,this.liveOpen=!1,this.interactionMode=void 0,this.requestUpdate("open",!0)):this._open&&(this.interactionMode="programmatic"),super.disconnectedCallback()}focus(options){const base=this.baseElement;base?base.focus(options):super.focus(options)}click(){this.baseElement?.click()}willUpdate(changed){if(super.willUpdate(changed),this._open&&!this.canDisclose&&(this.liveOpen?this.closePanel("programmatic",{repairFocus:!0,instant:!0}):(this._open=!1,this.interactionMode=void 0,this.pendingShow=!1,this.pendingMorph=void 0,this.requestUpdate("open",!0))),changed.has("href")){const previous=this.baseElement,nextKind=this.isLink?"a":"button";this.semanticFocusOrigin=previous&&previous.localName!==nextKind&&activeElementIn(this.shadowRoot)===previous?previous:void 0}}updated(changed){super.updated(changed),this.isConnected&&this.hasAttribute("open")!==this._open&&this.toggleAttribute("open",this._open),this.syncFloating(),this.syncHideAnimation();const focusOrigin=this.semanticFocusOrigin;if(this.semanticFocusOrigin=void 0,focusOrigin){const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument);(internalActive===null||internalActive===focusOrigin)&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body)&&this.baseElement?.focus()}}openPanel(mode,source){if(this._open)return mode==="pinned"&&this.interactionMode==="hover"&&(this.interactionMode="pinned"),!0;if(!this.canDisclose)return this.requestUpdate("open",!0),!1;const context=this.ownerContext,morph=context?.willOpen(this);return this.cancelHideAnimation(),this.closing=!1,this.interactionMode=mode,this.pendingMorph=morph,this.pendingShow=source!==null&&!morph,this._open=!0,this.requestUpdate("open",!1),this.queueToggle(!0,source),context?.changed(this,!0,source),!0}closePanel(source,options={}){if(!this._open)return;options.repairFocus!==!1&&this.panelHoldsFocus()&&(options.focusTarget??this.baseElement)?.focus({preventScroll:!0});const wasFloating=this.placement!==void 0||this.overlayHandle!==void 0;this.cancelMorph(),this.stopPlacement(),this.releaseOverlay(options.restoreFocus===!0);const animate=!options.instant&&wasFloating&&this.liveOpen&&this.isConnected&&this.floatingLayout;this.cancelHideAnimation(),this.closing=animate,this.pendingMorph=void 0,this.pendingShow=!1,this.interactionMode=void 0,this.liveOpen=!1,this.focusInPanel=!1,this._open=!1,this.requestUpdate("open",!0),this.queueToggle(!1,source),this.ownerContext?.changed(this,!1,source)}queueToggle(open,source){source!==null&&this.updateComplete.then(()=>{this.emit("lr-toggle",{expanded:open,source})})}panelHoldsFocus(){const panel=this.panelElement;if(!panel)return!1;const active=deepActiveElement(this.ownerDocument);return active&&composedContains(panel,active)?!0:this.focusInPanel&&(active===null||active===this.ownerDocument.body)}syncFloating(){const panel=this.panelElement,visible=this.isTrigger&&this.browserResolved&&this._open;if(visible&&(this.liveOpen=!0),!(visible&&this.isConnected&&this.floatingLayout)){this.stopPlacement(),this.overlayHandle&&this.releaseOverlay(!1),panel&&!this.closing&&(this.clearPlacementStyles(panel),visible&&panel.hasAttribute("data-lr-top-layer")&&loadAnchoredOverlayRuntime().then(runtime=>runtime.releaseTopLayer?.(panel),()=>{})),visible&&(this.pendingShow=!1,this.pendingMorph=void 0);return}if(!panel)return;const context=this.ownerContext,anchor=context.anchor(this);if(!anchor)return;const key=[anchor===this.baseElement?"item":"menu",context.distance(),context.topLayer(),this.effectiveDirection].join("|");(!this.placement||key!==this.placementKey)&&this.startPlacement(anchor,panel,key),this.overlayHandle?.isActive()||(this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelElement,onEscape:()=>this.onOverlayEscape(),restoreFocusTo:()=>this.baseElement}));const morph=this.pendingMorph,show=this.pendingShow;if(this.pendingMorph=void 0,this.pendingShow=!1,!morph&&!show)return;const handle=this.placement;handle?.ready.then(placed=>{!placed||handle!==this.placement||!this._open||(morph?this.runMorph(morph):this.runShowAnimation())})}startPlacement(anchor,panel,key){this.stopPlacement();const context=this.ownerContext,bridge=this.renderRoot.querySelector(".hover-bridge");this.placementKey=key;const topLayer=context.topLayer();this.placedTopLayer=syncTopLayerRelease(panel,this.placedTopLayer,topLayer),this.placement=deferredPlaceReady(anchor,panel,{placement:rtlAwarePlacement("bottom-start",this),...topLayerPlacement(topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed")),offset:context.distance(),hoverBridge:bridge??void 0})}stopPlacement(){const handle=this.placement;this.placement=void 0,this.placementKey="",handle?.()}releaseOverlay(restoreFocus){const handle=this.overlayHandle;this.overlayHandle=void 0,handle?.deactivate({restoreFocus})}clearPlacementStyles(panel){for(const property2 of PLACEMENT_STYLE_PROPERTIES)panel.style.removeProperty(property2)}onOverlayEscape(){const context=this.ownerContext;if(context){context.escape(this);return}const within=composedContains(this,deepActiveElement(this.ownerDocument));this.closePanel("user",{restoreFocus:within})}async placementReady(){return await this.updateComplete,this.placement?waitForDeferredPlacement(()=>this.placement):this._open}get registryHost(){return this.ownerContext?.owner??this}runShowAnimation(){const panel=this.panelElement;panel&&animateRegistered(this.registryHost,panel,"navigation-menu.show",this.effectiveDirection,{keyframes:[{opacity:0,transform:SHOW_OFFSET},{opacity:1,transform:"translateY(0)"}],durationProperties:["--lr-navigation-menu-show-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]})}syncHideAnimation(){if(!this.closing||this.hideAnimationStarted)return;this.hideAnimationStarted=!0;const token=this.transitionToken,panel=this.panelElement,animation=panel?animateRegistered(this.registryHost,panel,"navigation-menu.hide",this.effectiveDirection,{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:SHOW_OFFSET}],durationProperties:["--lr-navigation-menu-hide-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}):void 0;this.hideAnimation=animation;const settle=()=>{token===this.transitionToken&&(this.hideAnimation?.cancel(),this.hideAnimation=void 0,this.hideAnimationStarted=!1,this.closing=!1)};animation?animation.finished.then(settle,settle):queueMicrotask(settle)}cancelHideAnimation(){this.transitionToken++,this.hideAnimation?.cancel(),this.hideAnimation=void 0,this.hideAnimationStarted=!1}runMorph(morph){const panel=this.panelElement,content=panel?.querySelector(".panel-content");if(!panel||!content)return;const travel="var(--lr-size-1rem)",reversed=`calc(-1 * ${travel})`,from=morph.direction==="end"?travel:reversed,mirrored=morph.direction==="end"?reversed:travel;animateRegistered(this.registryHost,content,`navigation-menu.enter-from-${morph.direction}`,this.effectiveDirection,{keyframes:[{opacity:0,transform:`translateX(${from})`},{opacity:1,transform:"translateX(0)"}],rtlKeyframes:[{opacity:0,transform:`translateX(${mirrored})`},{opacity:1,transform:"translateX(0)"}],durationProperties:["--lr-navigation-menu-switch-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]});const view=this.ownerDocument.defaultView;if(!view||prefersReducedMotion(this))return;const to=panel.getBoundingClientRect();if(Math.abs(to.width-morph.from.width)<1&&Math.abs(to.height-morph.from.height)<1)return;this.cancelMorph();const natural=content.getBoundingClientRect().width;panel.setAttribute("data-morphing",""),panel.style.inlineSize=`${morph.from.width}px`,panel.style.blockSize=`${morph.from.height}px`,content.style.inlineSize=`${natural}px`;const style=view.getComputedStyle(panel),durations=parseTimeList(style.transitionDuration),delays=parseTimeList(style.transitionDelay),total=Math.max(0,...durations.map((duration,index)=>duration+(delays[index%Math.max(1,delays.length)]??0)));let frame,timer;const onEnd=event=>{event.target===panel&&["inline-size","block-size","width","height"].includes(event.propertyName)&&cleanup()},cleanup=()=>{this.morphCleanup===cleanup&&(this.morphCleanup=void 0,frame!==void 0&&view.cancelAnimationFrame(frame),timer!==void 0&&view.clearTimeout(timer),panel.removeEventListener("transitionend",onEnd),panel.removeAttribute("data-morphing"),panel.style.removeProperty("inline-size"),panel.style.removeProperty("block-size"),content.style.removeProperty("inline-size"))};this.morphCleanup=cleanup,panel.addEventListener("transitionend",onEnd),frame=view.requestAnimationFrame(()=>{frame=void 0,this.morphCleanup===cleanup&&(panel.style.inlineSize=`${to.width}px`,panel.style.blockSize=`${to.height}px`,timer=view.setTimeout(cleanup,total+50))})}cancelMorph(){this.morphCleanup?.()}render(){const isLink=this.isLink,isTrigger=this.isTrigger,floating=this.floatingLayout,stacked=this.ownerContext?.layout()==="stacked",expanded=this._open&&this.browserResolved,panelVisible=isTrigger&&this.browserResolved&&(this._open||this.closing),ariaLabel=hostAriaLabel(this),parts=["base"];this.current&&parts.push("base-current"),isTrigger&&expanded&&parts.push("base-open");const label=html`<span part="start" ?hidden=${!this.slotPresence.has("start")}
+import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{activeElementIn}from"../../../internal/active-element.js";import{deferredPlaceReady,loadAnchoredOverlayRuntime,syncTopLayerRelease,topLayerPlacement,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{chevronIcon}from"../../../internal/icons.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{LyraElement}from"../../../internal/lyra-element.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{activateNonmodalOverlay,composedContains,deepActiveElement}from"../../../internal/nonmodal-overlay-manager.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{navigationMenuOwner,registerNavigationMenuItemController}from"../navigation-menu/navigation-menu-owner.js";import{styles}from"./navigation-menu-item.styles.js";const PLACEMENT_STYLE_PROPERTIES=["position","margin","left","top","--lr-positioner-available-inline-size","--lr-positioner-available-block-size"],SHOW_OFFSET="translateY(var(--lr-size-neg-0-25rem))";function parseTimeList(value){return value.split(",").map(entry=>{const match=/^\s*(-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(ms|s)\s*$/i.exec(entry);if(!match)return 0;const amount=Number(match[1]);return Number.isFinite(amount)?match[2]?.toLowerCase()==="s"?amount*1e3:amount:0})}class LyraNavigationMenuItem extends LyraElement{static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const value=!!next;if(value===this._open)return;const source=this.hasUpdated?"programmatic":null;value?this.openPanel("programmatic",source):this.closePanel(source)}constructor(){super(),this.href="",this.target="",this.rel="",this.current=!1,this._open=!1,this.browserResolved=!1,this.closing=!1,this.slotPresence=new SlotPresenceController(this),this.panelId=nextId("navigation-menu-panel"),this.liveOpen=!1,this.placementKey="",this.pendingShow=!1,this.hideAnimationStarted=!1,this.transitionToken=0,this.focusInPanel=!1,this.onFocusIn=event=>{const panel=this.panelElement,target=event.composedPath()[0];this.focusInPanel=panel!==null&&target!==void 0&&composedContains(panel,target)},this.onFocusOut=event=>{const next=event.relatedTarget;if(next===null)return;const panel=this.panelElement;(!panel||!composedContains(panel,next))&&(this.focusInPanel=!1)},this.onBaseClick=()=>{if(this.isLink)return;const context=this.ownerContext;if(context){context.activate(this);return}this.isTrigger&&(this._open?this.closePanel("user"):this.openPanel("programmatic","user"))},this.onHostKeyDown=event=>{event.key!=="Escape"||event.defaultPrevented||!this._open||this.ownerContext||(event.preventDefault(),this.onOverlayEscape())},new GlassScrollLayer(this,'[part="panel"]',()=>this.open),registerNavigationMenuItemController(this,{isTrigger:()=>this.isTrigger,isLink:()=>this.isLink,isOpen:()=>this._open,mode:()=>this._open?this.interactionMode:void 0,pin:()=>{this._open&&(this.interactionMode="pinned")},base:()=>this.baseElement,panel:()=>this.panelElement,open:(mode,source)=>this.openPanel(mode,source),close:(source,options)=>this.closePanel(source,options),isTopmost:()=>this.overlayHandle?.isTopmost()??!1,placementReady:()=>this.placementReady(),reposition:()=>{this.placementKey="",this.requestUpdate()}})}get ownerContext(){return navigationMenuOwner(this)}get isLink(){return!!safeLinkHref(this.href)}get isTrigger(){return!this.isLink&&this.slotPresence.has("panel")}get floatingLayout(){return this.ownerContext?.layout()==="bar"}get baseElement(){return this.renderRoot?.querySelector('[part~="base"]')??null}get panelElement(){return this.renderRoot?.querySelector('[part~="panel"]')??null}get canDisclose(){return this.isLink?!1:!this.browserResolved||this.slotPresence.has("panel")}connectedCallback(){super.connectedCallback(),this.addEventListener("focusin",this.onFocusIn),this.addEventListener("focusout",this.onFocusOut),this.addEventListener("keydown",this.onHostKeyDown),this.updateBrowserDerivedState(()=>{this.browserResolved=!0}),this.hasUpdated&&this._open&&(this.interactionMode="programmatic",this.requestUpdate())}disconnectedCallback(){this.removeEventListener("focusin",this.onFocusIn),this.removeEventListener("focusout",this.onFocusOut),this.removeEventListener("keydown",this.onHostKeyDown),this.cancelMorph(),this.stopPlacement(),this.releaseOverlay(!1),this.cancelHideAnimation(),this.closing=!1,this.focusInPanel=!1,this.semanticFocusOrigin=void 0,this._open&&this.interactionMode==="hover"?(this._open=!1,this.liveOpen=!1,this.interactionMode=void 0,this.requestUpdate("open",!0)):this._open&&(this.interactionMode="programmatic"),super.disconnectedCallback()}focus(options){const base=this.baseElement;base?base.focus(options):super.focus(options)}click(){this.baseElement?.click()}willUpdate(changed){if(super.willUpdate(changed),this._open&&!this.canDisclose&&(this.liveOpen?this.closePanel("programmatic",{repairFocus:!0,instant:!0}):(this._open=!1,this.interactionMode=void 0,this.pendingShow=!1,this.pendingMorph=void 0,this.requestUpdate("open",!0))),changed.has("href")){const previous=this.baseElement,nextKind=this.isLink?"a":"button";this.semanticFocusOrigin=previous&&previous.localName!==nextKind&&activeElementIn(this.shadowRoot)===previous?previous:void 0}}updated(changed){super.updated(changed),this.isConnected&&this.hasAttribute("open")!==this._open&&this.toggleAttribute("open",this._open),this.syncFloating(),this.syncHideAnimation();const focusOrigin=this.semanticFocusOrigin;if(this.semanticFocusOrigin=void 0,focusOrigin){const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument);(internalActive===null||internalActive===focusOrigin)&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body)&&this.baseElement?.focus()}}openPanel(mode,source){if(this._open)return mode==="pinned"&&this.interactionMode==="hover"&&(this.interactionMode="pinned"),!0;if(!this.canDisclose)return this.requestUpdate("open",!0),!1;const context=this.ownerContext,morph=context?.willOpen(this);return this.cancelHideAnimation(),this.closing=!1,this.interactionMode=mode,this.pendingMorph=morph,this.pendingShow=source!==null&&!morph,this._open=!0,this.requestUpdate("open",!1),this.queueToggle(!0,source),context?.changed(this,!0,source),!0}closePanel(source,options={}){if(!this._open)return;options.repairFocus!==!1&&this.panelHoldsFocus()&&(options.focusTarget??this.baseElement)?.focus({preventScroll:!0});const wasFloating=this.placement!==void 0||this.overlayHandle!==void 0;this.cancelMorph(),this.stopPlacement(),this.releaseOverlay(options.restoreFocus===!0);const animate=!options.instant&&wasFloating&&this.liveOpen&&this.isConnected&&this.floatingLayout;this.cancelHideAnimation(),this.closing=animate,this.pendingMorph=void 0,this.pendingShow=!1,this.interactionMode=void 0,this.liveOpen=!1,this.focusInPanel=!1,this._open=!1,this.requestUpdate("open",!0),this.queueToggle(!1,source),this.ownerContext?.changed(this,!1,source)}queueToggle(open,source){source!==null&&this.updateComplete.then(()=>{this.emit("lr-toggle",{expanded:open,source})})}panelHoldsFocus(){const panel=this.panelElement;if(!panel)return!1;const active=deepActiveElement(this.ownerDocument);return active&&composedContains(panel,active)?!0:this.focusInPanel&&(active===null||active===this.ownerDocument.body)}syncFloating(){const panel=this.panelElement,visible=this.isTrigger&&this.browserResolved&&this._open;if(visible&&(this.liveOpen=!0),!(visible&&this.isConnected&&this.floatingLayout)){this.stopPlacement(),this.overlayHandle&&this.releaseOverlay(!1),panel&&!this.closing&&(this.clearPlacementStyles(panel),visible&&panel.hasAttribute("data-lr-top-layer")&&loadAnchoredOverlayRuntime().then(runtime=>runtime.releaseTopLayer?.(panel),()=>{})),visible&&(this.pendingShow=!1,this.pendingMorph=void 0);return}if(!panel)return;const context=this.ownerContext,anchor=context.anchor(this);if(!anchor)return;const key=[anchor===this.baseElement?"item":"menu",context.distance(),context.topLayer(),this.effectiveDirection].join("|");(!this.placement||key!==this.placementKey)&&this.startPlacement(anchor,panel,key),this.overlayHandle?.isActive()||(this.overlayHandle=activateNonmodalOverlay({host:this,panel:()=>this.panelElement,onEscape:()=>this.onOverlayEscape(),restoreFocusTo:()=>this.baseElement}));const morph=this.pendingMorph,show=this.pendingShow;if(this.pendingMorph=void 0,this.pendingShow=!1,!morph&&!show)return;const handle=this.placement;handle?.ready.then(placed=>{!placed||handle!==this.placement||!this._open||(morph?this.runMorph(morph):this.runShowAnimation())})}startPlacement(anchor,panel,key){this.stopPlacement();const context=this.ownerContext,bridge=this.renderRoot.querySelector(".hover-bridge");this.placementKey=key;const topLayer=context.topLayer();this.placedTopLayer=syncTopLayerRelease(panel,this.placedTopLayer,topLayer),this.placement=deferredPlaceReady(anchor,panel,{placement:rtlAwarePlacement("bottom-start",this),...topLayerPlacement(topLayer,resolveEffectivePositioningStrategy(this,void 0,"fixed")),offset:context.distance(),hoverBridge:bridge??void 0})}stopPlacement(){const handle=this.placement;this.placement=void 0,this.placementKey="",handle?.()}releaseOverlay(restoreFocus){const handle=this.overlayHandle;this.overlayHandle=void 0,handle?.deactivate({restoreFocus})}clearPlacementStyles(panel){for(const property2 of PLACEMENT_STYLE_PROPERTIES)panel.style.removeProperty(property2)}onOverlayEscape(){const context=this.ownerContext;if(context){context.escape(this);return}const within=composedContains(this,deepActiveElement(this.ownerDocument));this.closePanel("user",{restoreFocus:within})}async placementReady(){return await this.updateComplete,this.placement?waitForDeferredPlacement(()=>this.placement):this._open}get registryHost(){return this.ownerContext?.owner??this}runShowAnimation(){const panel=this.panelElement;panel&&animateRegistered(this.registryHost,panel,"navigation-menu.show",this.effectiveDirection,{keyframes:[{opacity:0,transform:SHOW_OFFSET},{opacity:1,transform:"translateY(0)"}],durationProperties:["--lr-navigation-menu-show-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]})}syncHideAnimation(){if(!this.closing||this.hideAnimationStarted)return;this.hideAnimationStarted=!0;const token=this.transitionToken,panel=this.panelElement,animation=panel?animateRegistered(this.registryHost,panel,"navigation-menu.hide",this.effectiveDirection,{keyframes:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:SHOW_OFFSET}],durationProperties:["--lr-navigation-menu-hide-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}):void 0;this.hideAnimation=animation;const settle=()=>{token===this.transitionToken&&(this.hideAnimation?.cancel(),this.hideAnimation=void 0,this.hideAnimationStarted=!1,this.closing=!1)};animation?animation.finished.then(settle,settle):queueMicrotask(settle)}cancelHideAnimation(){this.transitionToken++,this.hideAnimation?.cancel(),this.hideAnimation=void 0,this.hideAnimationStarted=!1}runMorph(morph){const panel=this.panelElement,content=panel?.querySelector(".panel-content");if(!panel||!content)return;const travel="var(--lr-size-1rem)",reversed=`calc(-1 * ${travel})`,from=morph.direction==="end"?travel:reversed,mirrored=morph.direction==="end"?reversed:travel;animateRegistered(this.registryHost,content,`navigation-menu.enter-from-${morph.direction}`,this.effectiveDirection,{keyframes:[{opacity:0,transform:`translateX(${from})`},{opacity:1,transform:"translateX(0)"}],rtlKeyframes:[{opacity:0,transform:`translateX(${mirrored})`},{opacity:1,transform:"translateX(0)"}],durationProperties:["--lr-navigation-menu-switch-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]});const view=this.ownerDocument.defaultView;if(!view||prefersReducedMotion(this))return;const to=panel.getBoundingClientRect();if(Math.abs(to.width-morph.from.width)<1&&Math.abs(to.height-morph.from.height)<1)return;this.cancelMorph();const natural=content.getBoundingClientRect().width;panel.setAttribute("data-morphing",""),panel.style.inlineSize=`${morph.from.width}px`,panel.style.blockSize=`${morph.from.height}px`,content.style.inlineSize=`${natural}px`;const style=view.getComputedStyle(panel),durations=parseTimeList(style.transitionDuration),delays=parseTimeList(style.transitionDelay),total=Math.max(0,...durations.map((duration,index)=>duration+(delays[index%Math.max(1,delays.length)]??0)));let frame,timer;const onEnd=event=>{event.target===panel&&["inline-size","block-size","width","height"].includes(event.propertyName)&&cleanup()},cleanup=()=>{this.morphCleanup===cleanup&&(this.morphCleanup=void 0,frame!==void 0&&view.cancelAnimationFrame(frame),timer!==void 0&&view.clearTimeout(timer),panel.removeEventListener("transitionend",onEnd),panel.removeAttribute("data-morphing"),panel.style.removeProperty("inline-size"),panel.style.removeProperty("block-size"),content.style.removeProperty("inline-size"))};this.morphCleanup=cleanup,panel.addEventListener("transitionend",onEnd),frame=view.requestAnimationFrame(()=>{frame=void 0,this.morphCleanup===cleanup&&(panel.style.inlineSize=`${to.width}px`,panel.style.blockSize=`${to.height}px`,timer=view.setTimeout(cleanup,total+50))})}cancelMorph(){this.morphCleanup?.()}render(){const isLink=this.isLink,isTrigger=this.isTrigger,floating=this.floatingLayout,stacked=this.ownerContext?.layout()==="stacked",expanded=this._open&&this.browserResolved,panelVisible=isTrigger&&this.browserResolved&&(this._open||this.closing),ariaLabel=hostAriaLabel(this),parts=["base"];this.current&&parts.push("base-current"),isTrigger&&expanded&&parts.push("base-open");const label=html`<span part="start" ?hidden=${!this.slotPresence.has("start")}
         ><slot name="start"></slot></span
       ><span part="label"><slot></slot></span
       ><span part="end" ?hidden=${!this.slotPresence.has("end")}><slot name="end"></slot></span
@@ -26,5 +26,5 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,stat
         id=${this.panelId}
         ?hidden=${!panelVisible}
         data-layout=${floating?"floating":"flow"}
-      ><div class="panel-content"><slot name="panel"></slot></div></div
+      ><span class="glass-scroll-layer" aria-hidden="true"></span><div class="panel-content"><slot name="panel"></slot></div></div
       >${floating&&this._open&&panelVisible?html`<span class="hover-bridge" aria-hidden="true"></span>`:nothing}`}}__decorate([property({attribute:"aria-label"})],LyraNavigationMenuItem.prototype,"accessibleLabel",void 0),__decorate([property({useDefault:!0})],LyraNavigationMenuItem.prototype,"href",void 0),__decorate([property({useDefault:!0})],LyraNavigationMenuItem.prototype,"target",void 0),__decorate([property({useDefault:!0})],LyraNavigationMenuItem.prototype,"rel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraNavigationMenuItem.prototype,"current",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraNavigationMenuItem.prototype,"open",null),__decorate([state()],LyraNavigationMenuItem.prototype,"browserResolved",void 0),__decorate([state()],LyraNavigationMenuItem.prototype,"closing",void 0);export{LyraNavigationMenuItem};

package/dist/components/layout/navigation-menu-item/navigation-menu-item.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; } [part~='base'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); box-sizing: border-box; max-inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: max( var( --lr-navigation-menu-item-min-block-size, var(--lr-form-control-height-m, var(--lr-theme-form-control-height-m, var(--lr-size-2-5rem))) ), var(--lr-icon-button-size) ); margin: 0; padding-block: 0; padding-inline: var(--lr-navigation-menu-item-padding-inline, var(--lr-space-l)); border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); font: inherit; font-size: var(--lr-navigation-menu-item-font-size, var(--lr-font-size-m)); font-weight: var(--lr-navigation-menu-item-font-weight, var(--lr-font-weight-medium)); text-align: start; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; transition: var(--lr-transition-interactive); } [part~='base']:where([data-layout='stacked']) { display: flex; inline-size: 100%; justify-content: flex-start; } [part~='base']:where([data-layout='stacked']) [part='expand-icon'] { margin-inline-start: auto; } [part~='base']:where(:hover) { background: var(--lr-navigation-menu-item-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-navigation-menu-item-hover-color, var(--lr-color-brand)); } [part~='base']:where(:active) { background: var( --lr-navigation-menu-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); color: var(--lr-navigation-menu-item-active-color, var(--lr-color-text)); } [part~='base']:where(:focus-visible) { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part~='base-current'] { color: var(--lr-navigation-menu-item-current-color, var(--lr-color-brand)); font-weight: var(--lr-navigation-menu-item-current-font-weight, var(--lr-font-weight-semibold)); transition: var(--lr-transition-interactive); } [part~='base-current']:where(:hover) { background: var(--lr-navigation-menu-item-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-navigation-menu-item-hover-color, var(--lr-color-brand)); } [part~='base-current']:where(:active) { background: var( --lr-navigation-menu-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); color: var(--lr-navigation-menu-item-active-color, var(--lr-color-text)); } [part~='base-open'] { background: var(--lr-navigation-menu-item-open-bg, var(--lr-color-brand-quiet)); transition: var(--lr-transition-interactive); } [part~='base-open']:where(:hover) { background: var(--lr-navigation-menu-item-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-navigation-menu-item-hover-color, var(--lr-color-brand)); } [part~='base-open']:where(:active) { background: var( --lr-navigation-menu-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); color: var(--lr-navigation-menu-item-active-color, var(--lr-color-text)); } [part='start'], [part='end'] { display: inline-flex; align-items: center; flex: none; } [part='label'] { min-inline-size: 0; overflow-wrap: anywhere; } [part='start'][hidden], [part='end'][hidden], [part='expand-icon'][hidden] { display: none; } [part='expand-icon'] { display: inline-flex; align-items: center; justify-content: center; flex: none; rotate: 90deg; transition: rotate var(--lr-transition-base); } [part~='base-open'] [part='expand-icon'] { rotate: 270deg; } [part='panel'] { box-sizing: border-box; color: var(--lr-color-text); } [part='panel'][hidden] { display: none; } [part='panel']:where([data-layout='floating']) { position: fixed; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); padding: var(--lr-navigation-menu-panel-padding, var(--lr-space-s)); max-inline-size: min( var(--lr-navigation-menu-panel-max-inline-size, var(--lr-size-48rem)), var(--lr-positioner-available-inline-size, var(--lr-size-48rem)) ); max-block-size: var(--lr-positioner-available-block-size, var(--lr-size-48rem)); overflow: auto; overscroll-behavior: contain; } [part='panel']:where([data-layout='floating'][data-morphing]) { overflow: hidden; transition: inline-size var(--lr-navigation-menu-switch-duration, var(--lr-duration-base)) var(--lr-easing-standard), block-size var(--lr-navigation-menu-switch-duration, var(--lr-duration-base)) var(--lr-easing-standard); } [part='panel']:where([data-layout='flow']) { position: static; margin-inline-start: var(--lr-navigation-menu-panel-indent, var(--lr-space-l)); padding: var(--lr-navigation-menu-panel-padding, var(--lr-space-s)); border-inline-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } .panel-content { min-inline-size: 0; } .hover-bridge { position: fixed; inset: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); clip-path: polygon( var(--lr-positioner-hover-bridge-top-left-x, 0) var(--lr-positioner-hover-bridge-top-left-y, 0), var(--lr-positioner-hover-bridge-top-right-x, 0) var(--lr-positioner-hover-bridge-top-right-y, 0), var(--lr-positioner-hover-bridge-bottom-right-x, 0) var(--lr-positioner-hover-bridge-bottom-right-y, 0), var(--lr-positioner-hover-bridge-bottom-left-x, 0) var(--lr-positioner-hover-bridge-bottom-left-y, 0) ); } @media (forced-colors: active) { [part='panel'] { border-color: CanvasText; } [part~='base-current'] { text-decoration: underline; } } `;export{styles};
+import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; } [part~='base'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); box-sizing: border-box; max-inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: max( var( --lr-navigation-menu-item-min-block-size, var(--lr-form-control-height-m, var(--lr-theme-form-control-height-m, var(--lr-size-2-5rem))) ), var(--lr-icon-button-size) ); margin: 0; padding-block: 0; padding-inline: var(--lr-navigation-menu-item-padding-inline, var(--lr-space-l)); border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); font: inherit; font-size: var(--lr-navigation-menu-item-font-size, var(--lr-font-size-m)); font-weight: var(--lr-navigation-menu-item-font-weight, var(--lr-font-weight-medium)); text-align: start; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; transition: var(--lr-transition-interactive); } [part~='base']:where([data-layout='stacked']) { display: flex; inline-size: 100%; justify-content: flex-start; } [part~='base']:where([data-layout='stacked']) [part='expand-icon'] { margin-inline-start: auto; } [part~='base']:where(:hover) { background: var(--lr-navigation-menu-item-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-navigation-menu-item-hover-color, var(--lr-color-brand)); } [part~='base']:where(:active) { background: var( --lr-navigation-menu-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); color: var(--lr-navigation-menu-item-active-color, var(--lr-color-text)); } [part~='base']:where(:focus-visible) { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part~='base-current'] { color: var(--lr-navigation-menu-item-current-color, var(--lr-color-brand)); font-weight: var(--lr-navigation-menu-item-current-font-weight, var(--lr-font-weight-semibold)); transition: var(--lr-transition-interactive); } [part~='base-current']:where(:hover) { background: var(--lr-navigation-menu-item-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-navigation-menu-item-hover-color, var(--lr-color-brand)); } [part~='base-current']:where(:active) { background: var( --lr-navigation-menu-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); color: var(--lr-navigation-menu-item-active-color, var(--lr-color-text)); } [part~='base-open'] { background: var(--lr-navigation-menu-item-open-bg, var(--lr-color-brand-quiet)); transition: var(--lr-transition-interactive); } [part~='base-open']:where(:hover) { background: var(--lr-navigation-menu-item-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-navigation-menu-item-hover-color, var(--lr-color-brand)); } [part~='base-open']:where(:active) { background: var( --lr-navigation-menu-item-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)) ); color: var(--lr-navigation-menu-item-active-color, var(--lr-color-text)); } [part='start'], [part='end'] { display: inline-flex; align-items: center; flex: none; } [part='label'] { min-inline-size: 0; overflow-wrap: anywhere; } [part='start'][hidden], [part='end'][hidden], [part='expand-icon'][hidden] { display: none; } [part='expand-icon'] { display: inline-flex; align-items: center; justify-content: center; flex: none; rotate: 90deg; transition: rotate var(--lr-transition-base); } [part~='base-open'] [part='expand-icon'] { rotate: 270deg; } [part='panel'] { box-sizing: border-box; color: var(--lr-color-text); } [part='panel'][hidden] { display: none; } [part='panel']:where([data-layout='floating']) { position: fixed; top: 0; left: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); padding: var(--lr-navigation-menu-panel-padding, var(--lr-space-s)); max-inline-size: min( var(--lr-navigation-menu-panel-max-inline-size, var(--lr-size-48rem)), var(--lr-positioner-available-inline-size, var(--lr-size-48rem)) ); max-block-size: var(--lr-positioner-available-block-size, var(--lr-size-48rem)); overflow: auto; overscroll-behavior: contain; } [part='panel']:where([data-layout='floating'][data-morphing]) { overflow: hidden; transition: inline-size var(--lr-navigation-menu-switch-duration, var(--lr-duration-base)) var(--lr-easing-standard), block-size var(--lr-navigation-menu-switch-duration, var(--lr-duration-base)) var(--lr-easing-standard); } [part='panel']:where([data-layout='flow']) { position: static; margin-inline-start: var(--lr-navigation-menu-panel-indent, var(--lr-space-l)); padding: var(--lr-navigation-menu-panel-padding, var(--lr-space-s)); border-inline-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } .panel-content { min-inline-size: 0; } .hover-bridge { position: fixed; inset: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); clip-path: polygon( var(--lr-positioner-hover-bridge-top-left-x, 0) var(--lr-positioner-hover-bridge-top-left-y, 0), var(--lr-positioner-hover-bridge-top-right-x, 0) var(--lr-positioner-hover-bridge-top-right-y, 0), var(--lr-positioner-hover-bridge-bottom-right-x, 0) var(--lr-positioner-hover-bridge-bottom-right-y, 0), var(--lr-positioner-hover-bridge-bottom-left-x, 0) var(--lr-positioner-hover-bridge-bottom-left-y, 0) ); } @media (forced-colors: active) { [part='panel'] { border-color: CanvasText; } [part~='base-current'] { text-decoration: underline; } } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="panel"]:where([data-layout="floating"])',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};

package/dist/components/layout/scroller/scroller.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-scroller-effective-shadow-color:var(--lr-scroller-shadow-color,var(--shadow-color,var(--lr-color-surface)));--_lr-scroller-effective-shadow-size:var(--lr-scroller-shadow-size,var(--shadow-size,var(--lr-size-2rem)));min-inline-size:0;max-inline-size:100%;display:block}[part=base]{align-items:center;gap:var(--lr-space-xs);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;display:grid}[part=viewport]{overscroll-behavior-inline:contain;scroll-behavior:var(--_lr-motion-scroll,smooth);scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);min-inline-size:0;overflow:auto}:host([without-scrollbar]) [part=viewport]{scrollbar-width:none}:host([without-scrollbar]) [part=viewport]::-webkit-scrollbar{display:none}.viewport-wrap{min-block-size:0;min-inline-size:0;position:relative}[part=start-shadow],[part=end-shadow]{z-index:var(--lr-layer-content);inline-size:var(--_lr-scroller-effective-shadow-size);pointer-events:none;position:absolute;inset-block:0}[part=start-shadow][hidden],[part=end-shadow][hidden]{display:none}[part=start-shadow]{background:linear-gradient(to right, var(--_lr-scroller-effective-shadow-color), transparent);inset-inline-start:0}[part=end-shadow]{background:linear-gradient(to left, var(--_lr-scroller-effective-shadow-color), transparent);inset-inline-end:0}:host(:dir(rtl)) [part=start-shadow]{background:linear-gradient(to left, var(--_lr-scroller-effective-shadow-color), transparent)}:host(:dir(rtl)) [part=end-shadow]{background:linear-gradient(to right, var(--_lr-scroller-effective-shadow-color), transparent)}[part=content]{gap:var(--lr-space-s);min-inline-size:max-content;display:flex}:host([orientation=vertical]){grid-template-rows:minmax(0,1fr);block-size:100%;min-block-size:0;display:grid}:host([orientation=vertical]) [part=base]{block-size:100%;min-block-size:min(var(--lr-scroller-min-block-size,var(--lr-size-10rem)), 100%);grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);max-block-size:100%}:host([orientation=vertical]) [part=viewport],:host([orientation=vertical]) [part=content],:host([orientation=vertical]) .viewport-wrap{block-size:100%}:host([orientation=vertical]) [part=content]{flex-direction:column;min-block-size:max-content;min-inline-size:100%}:host([orientation=vertical]) [part=start-shadow],:host([orientation=vertical]) [part=end-shadow]{inline-size:auto;block-size:var(--_lr-scroller-effective-shadow-size);inset-inline:0}:host([orientation=vertical]) [part=start-shadow]{background:linear-gradient(to bottom, var(--_lr-scroller-effective-shadow-color), transparent);inset-block:0 auto}:host([orientation=vertical]) [part=end-shadow]{background:linear-gradient(to top, var(--_lr-scroller-effective-shadow-color), transparent);inset-block:auto 0}[part~=control]{font:inherit;inline-size:var(--lr-scroller-control-size,var(--lr-size-2rem));block-size:var(--lr-scroller-control-size,var(--lr-size-2rem));min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;transition:background-color var(--lr-transition-fast);place-items:center;padding:0;display:inline-grid}[part~=control]:hover:not(:disabled){background:var(--lr-color-brand-quiet)}[part~=control]:active:not(:disabled){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=viewport]:hover{outline-width:var(--lr-scroller-hover-outline-width,var(--lr-border-width-thin));outline-style:var(--lr-scroller-hover-outline-style,solid);outline-color:var(--lr-scroller-hover-outline-color,var(--lr-color-border));outline-offset:var(--lr-scroller-hover-outline-offset,var(--lr-focus-ring-offset))}[part~=previous],[part~=next]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size)}[part~=control]:disabled{cursor:default;opacity:var(--lr-opacity-disabled)}[part~=control]:focus-visible,[part=viewport]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:dir(rtl)) [part=previous-glyph],:host(:dir(rtl)) [part=next-glyph]{transform:scaleX(-1)}:host([orientation=vertical]) [part~=previous]{grid-row:1}:host([orientation=vertical]) [part~=next]{grid-row:3}@media (prefers-reduced-motion:reduce){[part=viewport]{scroll-behavior:var(--_lr-motion-scroll,auto)}}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-scroller-effective-shadow-color:var(--lr-scroller-shadow-color,var(--shadow-color,var(--lr-color-surface)));--_lr-scroller-effective-shadow-size:var(--lr-scroller-shadow-size,var(--shadow-size,var(--lr-size-2rem)));min-inline-size:0;max-inline-size:100%;display:block}[part=base]{align-items:center;gap:var(--lr-space-xs);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;display:grid}[part=viewport]{overscroll-behavior-inline:contain;scroll-behavior:var(--_lr-motion-scroll,smooth);scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);min-inline-size:0;overflow:auto}:host([without-scrollbar]) [part=viewport]{scrollbar-width:none}:host([without-scrollbar]) [part=viewport]::-webkit-scrollbar{display:none}.viewport-wrap{min-block-size:0;min-inline-size:0;position:relative}[part=start-shadow],[part=end-shadow]{z-index:var(--lr-layer-content);inline-size:var(--_lr-scroller-effective-shadow-size);pointer-events:none;position:absolute;inset-block:0}[part=start-shadow][hidden],[part=end-shadow][hidden]{display:none}[part=start-shadow]{background:linear-gradient(to right, var(--_lr-scroller-effective-shadow-color), transparent);inset-inline-start:0}[part=end-shadow]{background:linear-gradient(to left, var(--_lr-scroller-effective-shadow-color), transparent);inset-inline-end:0}:host(:dir(rtl)) [part=start-shadow]{background:linear-gradient(to left, var(--_lr-scroller-effective-shadow-color), transparent)}:host(:dir(rtl)) [part=end-shadow]{background:linear-gradient(to right, var(--_lr-scroller-effective-shadow-color), transparent)}[part=content]{gap:var(--lr-space-s);min-inline-size:max-content;display:flex}:host([orientation=vertical]){grid-template-rows:minmax(0,1fr);block-size:100%;min-block-size:0;display:grid}:host([orientation=vertical]) [part=base]{block-size:100%;min-block-size:min(var(--lr-scroller-min-block-size,var(--lr-size-10rem)), 100%);grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);max-block-size:100%}:host([orientation=vertical]) [part=viewport],:host([orientation=vertical]) .viewport-wrap{block-size:100%}:host([orientation=vertical]) [part=content]{flex-direction:column;min-block-size:max-content;min-inline-size:100%}:host([orientation=vertical]) [part=start-shadow],:host([orientation=vertical]) [part=end-shadow]{inline-size:auto;block-size:var(--_lr-scroller-effective-shadow-size);inset-inline:0}:host([orientation=vertical]) [part=start-shadow]{background:linear-gradient(to bottom, var(--_lr-scroller-effective-shadow-color), transparent);inset-block:0 auto}:host([orientation=vertical]) [part=end-shadow]{background:linear-gradient(to top, var(--_lr-scroller-effective-shadow-color), transparent);inset-block:auto 0}[part~=control]{font:inherit;inline-size:var(--lr-scroller-control-size,var(--lr-size-2rem));block-size:var(--lr-scroller-control-size,var(--lr-size-2rem));min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;transition:background-color var(--lr-transition-fast);place-items:center;padding:0;display:inline-grid}[part~=control]:hover:not(:disabled){background:var(--lr-color-brand-quiet)}[part~=control]:active:not(:disabled){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=viewport]:hover{outline-width:var(--lr-scroller-hover-outline-width,var(--lr-border-width-thin));outline-style:var(--lr-scroller-hover-outline-style,solid);outline-color:var(--lr-scroller-hover-outline-color,var(--lr-color-border));outline-offset:var(--lr-scroller-hover-outline-offset,var(--lr-focus-ring-offset))}[part~=previous],[part~=next]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size)}[part~=control]:disabled{cursor:default;opacity:var(--lr-opacity-disabled)}[part~=control]:focus-visible,[part=viewport]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:dir(rtl)) [part=previous-glyph],:host(:dir(rtl)) [part=next-glyph]{transform:scaleX(-1)}:host([orientation=vertical]) [part~=previous]{grid-row:1}:host([orientation=vertical]) [part~=next]{grid-row:3}@media (prefers-reduced-motion:reduce){[part=viewport]{scroll-behavior:var(--_lr-motion-scroll,auto)}}`;export{styles};

package/dist/components/layout/virtual-list/virtual-list.class.d.ts

@@ -443,6 +443,11 @@ private get spacerElement();
 * it, which over-renders slightly at the edges and never under-renders.
 */
 private readScrollMetrics;
+/** Visual CSS pixels per layout block pixel, retaining fractional CSS sizes that offsetHeight
+*  rounds away. Computed block size is resolved before transforms and zoom are painted. */
+private visualBlockScale;
+/** Positive block-axis scale contributed inside, but not by, an external scroll element. */
+private relativeBlockScale;
 /** Moves whichever element is scrolling so this list's own offset space lands at `top`. Omit
 *  `behavior` for the direct `scrollTop` write the measurement-anchoring paths need. */
 private applyScrollPosition;

package/dist/components/layout/virtual-list/virtual-list.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing,render}from"lit";import{html as staticHtml,unsafeStatic}from"lit/static-html.js";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{literalSetConverter}from"../../../internal/converters.js";import{tag}from"../../../internal/prefix.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{nativePopoverSupported}from"../../../internal/native-popover.js";import{finiteAdd,finiteCount,finiteInteger,finiteNumber}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{styles}from"./virtual-list.styles.js";const DEFAULT_ROW_ESTIMATE_PX=48,DEFAULT_GROUP_ESTIMATE_PX=32,DEFAULT_OVERSCAN_ROWS=6,MAX_OVERSCAN_ROWS=100,MAX_VIRTUAL_LIST_GROUPS=1e4,EMPTY_VIRTUAL_LIST_GROUPS=Object.freeze([]);function normalizeOverscan(value){if(value===null)return DEFAULT_OVERSCAN_ROWS;const numeric=typeof value=="number"?value:Number(value);return Number.isFinite(numeric)?Math.min(MAX_OVERSCAN_ROWS,Math.max(0,Math.floor(numeric))):DEFAULT_OVERSCAN_ROWS}const overscanConverter={fromAttribute(value){return normalizeOverscan(value)}};function virtualListGroupsChanged(value,oldValue){if(value===oldValue)return!1;const next=value,previous=oldValue;if(next==null||previous==null)return next!==previous;if(next.length!==previous.length)return!0;for(let index=0;index<next.length;index+=1){const a=next[index],b=previous[index];if(a.key!==b.key||a.label!==b.label||a.startIndex!==b.startIndex)return!0}return!1}const ROW_PROJECTION=literalSetConverter(["shadow","light"],"shadow"),VIRTUAL_LIST_ROW_ATTRIBUTE=`data-${tag("virtual-list-row")}`,VIRTUAL_LIST_STICKY_ATTRIBUTE=`data-${tag("virtual-list-sticky")}`,ROW_ATTRIBUTE_STATIC=unsafeStatic(VIRTUAL_LIST_ROW_ATTRIBUTE),PROJECTION_ANCHOR_MARKER=`${tag("virtual-list")}-projection`;function normalizeRowHeight(value){if(value==="auto")return"auto";const numeric=typeof value=="number"?value:Number(value);return Number.isFinite(numeric)&&numeric>0?numeric:"auto"}const rowHeightConverter={fromAttribute(value){return value===null?"auto":normalizeRowHeight(value)}};function isIndexedSource(source){return!Array.isArray(source)}const ELEMENT_NODE_TYPE=1;function isWindowScroller(target){return target.window===target}function domKeyToken(key){if(typeof key=="number"){if(Number.isNaN(key))return"number:NaN";if(Object.is(key,-0))return"number:-0"}return`${typeof key}:${String(key)}`}class LyraVirtualList extends LyraElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>nothing,this.rowHeight="auto",this.itemRole="listitem",this._rowProjection="shadow",this.rowIndexOffset=0,this.overscan=DEFAULT_OVERSCAN_ROWS,this.activeItemId="",this.loading=!1,this.hasMore=!1,this.containerScrollTop=0,this.viewportHeight=0,this.renderUnmeasuredWindow=!0,this.offsets=[0],this.rowIdentities=[],this.fixedRowHeight=null,this.measuredHeights=new Map,this.measuredIndices=new Map,this.indexedMeasurementIndices=[],this.indexedMeasurementDeltaPrefix=[0],this.indexedMeasurementIndexDirty=!0,this.offsetsDirty=!0,this.itemsChangedPendingPrune=!1,this.renderStart=0,this.renderEnd=-1,this.renderedWindow=[],this.projectionDeferred=!0,this.releaseRowProjection=()=>{this.projectionDeferred=!1,this.requestUpdate()},this.visibleStart=0,this.visibleEnd=-1,this.lastEmittedStart=-1,this.lastEmittedEnd=-1,this.loadMoreArmed=!0,this.measurementGeneration=0,this.isFirstUpdate=!0,this.stickyHeight=0,this.noTopLayer=!1,this.observedRows=new Map,this.observedRowKeys=new WeakMap,this.observedRowIndices=new WeakMap,this.observedGroups=new Map,this.observedGroupIndices=new WeakMap,this.externalMetricsPending=!1,this.ownerRealmGeneration=0,this.inResizeDelivery=!1,this.pendingRowMeasurements=new Map,this.pendingGroupMeasurements=new Map,this.deferredRowObservations=new Map,this.deferredGroupObservations=new Map,this.activeIndexForLength=-1,this.activeIndexForId="",this.activeIndexCache=-1,this.pendingScrollTop=null,this.normalizedGroups=EMPTY_VIRTUAL_LIST_GROUPS,this.normalizedGroupByIndex=new Map,this.measuredGroupHeights=new Map,this.groupHeightPrefix=[0],this.onExternalViewportResize=()=>{this.syncExternalScrollMetrics()},this.onUserScrollIntent=event=>{event instanceof KeyboardEvent&&!new Set(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "]).has(event.key)||(this.pendingScrollCorrection=void 0)},this.onScroll=e=>{if(this.externalScroller?(this.pendingScrollTop=null,this.externalMetricsPending=!0):this.pendingScrollTop=e.currentTarget.scrollTop,this.scrollRafId!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration,handle=ownerWindow.requestAnimationFrame(()=>{if(!(this.scrollRafId!==handle||this.scrollRafOwner!==ownerWindow||this.scrollRafDocument!==ownerDocument||!this.isCurrentOwnerWork(ownerDocument,generation))){if(this.scrollRafId=void 0,this.scrollRafOwner=void 0,this.scrollRafDocument=void 0,this.externalMetricsPending){this.externalMetricsPending=!1;const metrics=this.readScrollMetrics();metrics&&(this.pendingScrollTop=metrics.scrollTop,this.viewportHeight!==metrics.viewportHeight&&(this.viewportHeight=metrics.viewportHeight))}if(this.pendingScrollTop!==null){const scrollTop=this.pendingScrollTop;this.pendingScrollTop=null;const moved=this.containerScrollTop!==scrollTop;this.containerScrollTop=scrollTop,moved&&this.emit("lr-virtual-scroll",{scrollTop,viewportHeight:this.viewportHeight})}}});this.scrollRafId=handle,this.scrollRafOwner=ownerWindow,this.scrollRafDocument=ownerDocument},this.onRowsResized=entries=>{if(this.beginResizeDelivery(),this.fixedRowHeight==null){for(const entry of entries){const row=entry.target,key=this.observedRowKeys.get(row),index=this.observedRowIndices.get(row);if(key===void 0||index===void 0)continue;const height=entry.borderBoxSize?.[0]?.blockSize??entry.target.getBoundingClientRect().height;this.pendingRowMeasurements.set(key,{index,height})}this.defersMeasurementApplication||this.applyPendingRowMeasurements()}},this.onGroupsResized=entries=>{this.beginResizeDelivery();for(const entry of entries){const marker=entry.target,index=this.observedGroupIndices.get(marker);if(index===void 0||!this.normalizedGroupByIndex.has(index))continue;const height=entry.borderBoxSize?.[0]?.blockSize??entry.target.getBoundingClientRect().height;!Number.isFinite(height)||height<0||this.pendingGroupMeasurements.set(index,height)}this.defersMeasurementApplication||this.applyPendingGroupMeasurements()},this.onStickyResized=entries=>{this.beginResizeDelivery();const entry=entries[0];if(!entry)return;const height=entry.borderBoxSize?.[0]?.blockSize??entry.contentRect.height;Math.abs(this.stickyHeight-height)>.5&&(this.stickyHeight=height)}}static{this.collectionSupport=collectionSupport}static{this.ownedCollectionProperties=Object.freeze(["items","source","groups"])}static{this.identityCollectionProperties=Object.freeze(["items","source"])}static{this.identityCollectionObjectProperties=Object.freeze(["source"])}static{this.styles=[LyraElement.styles,styles]}get rowProjection(){return this._rowProjection}set rowProjection(next){const normalized=ROW_PROJECTION.normalize(next),previous=this._rowProjection;previous!==normalized&&(this._rowProjection=normalized,this.requestUpdate("rowProjection",previous))}get scrollContainer(){return this.renderRoot?.querySelector('[part="base"]')??void 0}get renderedRows(){const root=this.renderRoot;return root?[...root.querySelectorAll('[part="row"]')]:[]}get projectedRows(){const rows=[];for(const child of this.children)child.hasAttribute(VIRTUAL_LIST_ROW_ATTRIBUTE)&&rows.push(child);return rows}get externalScroller(){const target=this.scrollElement;if(target!=null)return isWindowScroller(target)||target.nodeType===ELEMENT_NODE_TYPE?target:void 0}get spacerElement(){return this.renderRoot?.querySelector('[part="spacer"]')??void 0}readScrollMetrics(){const base=this.scrollContainer;if(!base)return null;const external=this.externalScroller;if(!external)return{scrollTop:base.scrollTop,rawScrollTop:base.scrollTop,viewportHeight:base.clientHeight};const spacerTop=(this.spacerElement??base).getBoundingClientRect().top;if(isWindowScroller(external)){const documentHeight=finiteNumber(external.document?.documentElement?.clientHeight??0,0),rawScrollTop2=finiteNumber(-spacerTop,0);return{scrollTop:Math.max(0,rawScrollTop2),rawScrollTop:rawScrollTop2,viewportHeight:documentHeight>0?documentHeight:finiteNumber(external.innerHeight,0)}}const scrollerTop=external.getBoundingClientRect().top,rawScrollTop=finiteNumber(scrollerTop-spacerTop,0);return{scrollTop:Math.max(0,rawScrollTop),rawScrollTop,viewportHeight:finiteNumber(external.clientHeight,0)}}applyScrollPosition(top,behavior){const external=this.externalScroller;if(!external){const base=this.scrollContainer;if(!base)return;const next2=Math.max(0,finiteNumber(top,0));behavior===void 0?base.scrollTop=next2:base.scrollTo({top:next2,behavior});return}const metrics=this.readScrollMetrics();if(!metrics)return;const delta=finiteNumber(top,metrics.rawScrollTop)-metrics.rawScrollTop;if(isWindowScroller(external)){const options={top:Math.max(0,finiteNumber(external.scrollY+delta,0))};behavior!==void 0&&(options.behavior=behavior),external.scrollTo(options);return}const next=Math.max(0,finiteNumber(external.scrollTop+delta,0));behavior===void 0?external.scrollTop=next:external.scrollTo({top:next,behavior})}syncExternalScrollMetrics(){const metrics=this.readScrollMetrics();metrics&&(this.viewportHeight!==metrics.viewportHeight&&(this.viewportHeight=metrics.viewportHeight),this.containerScrollTop!==metrics.scrollTop&&(this.containerScrollTop=metrics.scrollTop))}get safeRowIndexOffset(){return finiteCount(this.rowIndexOffset)}computedAriaRowIndex(index){return finiteInteger(finiteAdd(index+1,this.safeRowIndexOffset),1,1,Number.MAX_SAFE_INTEGER)}get activeIndex(){if(this.activeItemId==="")return-1;const source=this.effectiveSource,count=this.itemCount;if(this.activeIndexFor===source&&this.activeIndexForLength===count&&Object.is(this.activeIndexForId,this.activeItemId)&&this.activeIndexForKeyFn===this.keyFunction)return this.activeIndexCache;if(this.activeIndexFor=source,this.activeIndexForLength=count,this.activeIndexForId=this.activeItemId,this.activeIndexForKeyFn=this.keyFunction,this.activeIndexCache=-1,isIndexedSource(source)){if(!this.keyFunction&&source.indexOfKey){const candidate=source.indexOfKey(this.activeItemId);Number.isInteger(candidate)&&candidate>=0&&candidate<count&&(this.activeIndexCache=candidate)}return this.activeIndexCache}for(let index=0;index<count;index++){const item=this.itemAt(index);if(Object.is(this.keyOf(item,index),this.activeItemId)){this.activeIndexCache=index;break}}return this.activeIndexCache}connectedCallback(){super.connectedCallback(),this.ownerDocument.defaultView&&(this.seedFirstRenderState(()=>{this.renderUnmeasuredWindow=!1,this.requestUpdate()}),this.seedFirstRenderState(this.releaseRowProjection),this.hasUpdated&&(this.projectionDeferred=!1)),this.resetOwnerRealmWork();const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView,generation=this.ownerRealmGeneration,ResizeObserverCtor=ownerWindow?.ResizeObserver;if(ResizeObserverCtor){const rowObserver=new ResizeObserverCtor(entries=>{this.rowResizeObserver!==rowObserver||!this.isCurrentOwnerWork(ownerDocument,generation)||this.onRowsResized(entries)}),groupObserver=new ResizeObserverCtor(entries=>{this.groupResizeObserver!==groupObserver||!this.isCurrentOwnerWork(ownerDocument,generation)||this.onGroupsResized(entries)}),stickyObserver=new ResizeObserverCtor(entries=>{this.stickyResizeObserver!==stickyObserver||!this.isCurrentOwnerWork(ownerDocument,generation)||this.onStickyResized(entries)});this.rowResizeObserver=rowObserver,this.groupResizeObserver=groupObserver,this.stickyResizeObserver=stickyObserver}this.hasUpdated&&(this.syncRowProjection(),this.attachContainerListeners(),this.syncRowObservers(),this.syncGroupObservers(),this.syncStickyOverlay())}disconnectedCallback(){this.teardownRowProjection(),this.resetOwnerRealmWork(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.teardownRowProjection(),this.resetOwnerRealmWork()}isCurrentOwnerWork(ownerDocument,generation){return this.ownerRealmGeneration===generation&&this.isConnected&&this.ownerDocument===ownerDocument}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.rowResizeObserver?.disconnect(),this.rowResizeObserver=void 0,this.groupResizeObserver?.disconnect(),this.groupResizeObserver=void 0,this.observedRows.clear(),this.observedGroups.clear(),this.deferredRowObservations.clear(),this.deferredGroupObservations.clear(),this.inResizeDelivery=!1,this.pendingRowMeasurements.clear(),this.pendingGroupMeasurements.clear(),this.rowObserveRafId!==void 0&&this.rowObserveRafOwner?.cancelAnimationFrame(this.rowObserveRafId),this.rowObserveRafId=void 0,this.rowObserveRafOwner=void 0,this.rowObserveRafDocument=void 0,this.containerResizeObserver?.disconnect(),this.containerResizeObserver=void 0,this.stickyResizeObserver?.disconnect(),this.stickyResizeObserver=void 0,this.observedSticky=void 0,this.scrollRafId!==void 0&&this.scrollRafOwner?.cancelAnimationFrame(this.scrollRafId),this.scrollRafId=void 0,this.scrollRafOwner=void 0,this.scrollRafDocument=void 0,this.pendingScrollTop=null,this.externalMetricsPending=!1,this.pendingScrollCorrection=void 0,this.detachContainerListeners(),this.scrollListenerTarget=void 0}firstUpdated(changed){super.firstUpdated(changed),this.attachContainerListeners(),queueMicrotask(()=>{this.isConnected&&(this.noTopLayer=!nativePopoverSupported())})}willUpdate(changed){if(super.willUpdate(changed),this.projectionDeferred&&!this.hasUpdated&&this.ownerDocument?.defaultView&&this.seedFirstRenderState(this.releaseRowProjection),this.isFirstUpdate=!this.hasUpdated,this.hasUpdated&&(this.noTopLayer=!nativePopoverSupported()),(changed.has("items")||changed.has("source")||changed.has("keyFunction")||changed.has("rowHeight")||changed.has("groups")||changed.has("activeItemId")||changed.has("scrollElement"))&&(this.pendingScrollCorrection=void 0),(changed.has("items")||changed.has("source")||changed.has("rowHeight")||changed.has("keyFunction")||changed.has("groups"))&&(this.offsetsDirty=!0),(changed.has("items")||changed.has("source"))&&(this.itemsChangedPendingPrune=!0),changed.has("keyFunction")||isIndexedSource(this.effectiveSource)&&(changed.has("items")||changed.has("source"))){this.measuredHeights.clear(),this.measuredIndices.clear(),this.pendingRowMeasurements.clear(),this.indexedMeasurementIndexDirty=!0;for(const row of this.observedRows.values())this.rowResizeObserver?.unobserve(row);this.observedRows.clear(),this.deferredRowObservations.clear()}if(changed.has("groups")){this.measuredGroupHeights.clear(),this.pendingGroupMeasurements.clear();for(const marker of this.observedGroups.values())this.groupResizeObserver?.unobserve(marker);this.observedGroups.clear(),this.deferredGroupObservations.clear()}(changed.has("items")||changed.has("source")||changed.has("groups"))&&this.recomputeGroups(),changed.has("rowHeight")&&(this.fixedRowHeight=this.parseRowHeight(this.rowHeight),this.fixedRowHeight!=null&&(this.measuredHeights.clear(),this.measuredIndices.clear(),this.pendingRowMeasurements.clear(),this.indexedMeasurementIndexDirty=!0)),this.offsetsDirty&&(this.recomputeOffsets(),this.offsetsDirty=!1),this.computeRange()}updated(changed){super.updated(changed),this.syncRowProjection(),this.syncRowObservers(),this.syncGroupObservers(),this.syncStickyOverlay(),changed.has("scrollElement")&&!this.isFirstUpdate&&this.attachContainerListeners(),changed.has("activeItemId")&&!this.isFirstUpdate&&this.scrollActiveIntoView(),this.emitRangeChangeIfNeeded(),this.maybeFireLoadMore(),this.maybeCorrectPendingScroll()}parseRowHeight(value){const normalized=normalizeRowHeight(value);return normalized==="auto"?null:normalized}get effectiveSource(){return this.source??this.items}get itemCount(){const source=this.effectiveSource;return isIndexedSource(source)?finiteCount(source.count):source.length}itemAt(index){const source=this.effectiveSource;return isIndexedSource(source)?source.itemAt(index):source[index]}keyOf(item,index){const source=this.effectiveSource,key=this.keyFunction?this.keyFunction(item,index):isIndexedSource(source)?source.keyAt?.(index)??index:index;return typeof key=="string"||typeof key=="number"?key:index}rowIdentity(key,occurrence){const token=domKeyToken(key);return`${token.length}:${token}:${occurrence}`}identityAt(index,item=this.itemAt(index)){return isIndexedSource(this.effectiveSource)?this.rowIdentity(this.keyOf(item,index),index):this.rowIdentities[index]??this.rowIdentity(this.keyOf(item,index),index)}groupHeightAt(index){const group=this.normalizedGroupByIndex.get(index);return!group||group.label===""?0:this.measuredGroupHeights.get(index)??DEFAULT_GROUP_ESTIMATE_PX}rowHeightAt(index){return this.fixedRowHeight!=null?this.fixedRowHeight:this.measuredHeights.get(this.identityAt(index))??DEFAULT_ROW_ESTIMATE_PX}groupContributionThrough(index){let low=0,high=this.normalizedGroups.length;for(;low<high;){const middle=low+high>>1;this.normalizedGroups[middle].startIndex<=index?low=middle+1:high=middle}return this.groupHeightPrefix[low]??0}recomputeGroupHeightPrefix(){const prefix=new Array(this.normalizedGroups.length+1);prefix[0]=0;for(let index=0;index<this.normalizedGroups.length;index++){const group=this.normalizedGroups[index],height=group.label===""?0:this.measuredGroupHeights.get(group.startIndex)??DEFAULT_GROUP_ESTIMATE_PX;prefix[index+1]=finiteAdd(prefix[index],height)}this.groupHeightPrefix=prefix}indexedOffsetForIndex(index){const baseHeight=this.fixedRowHeight??DEFAULT_ROW_ESTIMATE_PX;let offset=index>Number.MAX_VALUE/baseHeight?Number.MAX_VALUE:index*baseHeight;if(this.fixedRowHeight==null){this.rebuildIndexedMeasurementIndex();let low=0,high=this.indexedMeasurementIndices.length;for(;low<high;){const middle=low+high>>1;this.indexedMeasurementIndices[middle]<index?low=middle+1:high=middle}offset=finiteAdd(offset,this.indexedMeasurementDeltaPrefix[low]??0)}return Math.max(0,finiteAdd(offset,this.groupContributionThrough(index)))}rebuildIndexedMeasurementIndex(){if(!this.indexedMeasurementIndexDirty)return;const retained=[];for(const[identity,index]of this.measuredIndices){const height=this.measuredHeights.get(identity);height!==void 0&&retained.push({index,delta:height-DEFAULT_ROW_ESTIMATE_PX})}retained.sort((a,b)=>a.index-b.index);const indices=new Array(retained.length),prefix=new Array(retained.length+1);prefix[0]=0;for(let position=0;position<retained.length;position++){const measurement=retained[position];indices[position]=measurement.index,prefix[position+1]=finiteAdd(prefix[position],measurement.delta)}this.indexedMeasurementIndices=indices,this.indexedMeasurementDeltaPrefix=prefix,this.indexedMeasurementIndexDirty=!1}pruneIndexedMeasurements(){if(!isIndexedSource(this.effectiveSource)||this.fixedRowHeight!=null||this.renderEnd<this.renderStart)return!1;const renderedCount=this.renderEnd-this.renderStart+1,retentionRows=Math.max(renderedCount,normalizeOverscan(this.overscan)*4),firstRetained=Math.max(0,this.renderStart-retentionRows),lastRetained=Math.min(this.itemCount-1,this.renderEnd+retentionRows);let removedDeltaBeforeWindow=0,pruned=!1;for(const[identity,measuredIndex]of this.measuredIndices)if(measuredIndex<firstRetained||measuredIndex>lastRetained){const height=this.measuredHeights.get(identity);height!==void 0&&measuredIndex<firstRetained&&(removedDeltaBeforeWindow=finiteAdd(removedDeltaBeforeWindow,height-DEFAULT_ROW_ESTIMATE_PX)),this.measuredIndices.delete(identity),this.measuredHeights.delete(identity),pruned=!0}if(pruned&&(this.indexedMeasurementIndexDirty=!0,removedDeltaBeforeWindow!==0)){const nextScrollTop=(this.readScrollMetrics()?.rawScrollTop??this.containerScrollTop)-removedDeltaBeforeWindow;this.applyScrollPosition(nextScrollTop),this.containerScrollTop=Math.max(0,nextScrollTop),this.pendingScrollTop=null}return pruned}offsetAt(index){return isIndexedSource(this.effectiveSource)?this.indexedOffsetForIndex(index):this.offsets[index]??0}recomputeOffsets(){const n=this.itemCount;if(this.recomputeGroupHeightPrefix(),isIndexedSource(this.effectiveSource)){this.offsets=[0],this.rowIdentities=[],this.itemsChangedPendingPrune=!1;return}const offsets=new Array(n+1);let cursor=0;const liveKeys=this.itemsChangedPendingPrune&&this.fixedRowHeight==null?new Set:null,occurrences=new Map,identities=new Array(n);for(let i=0;i<n;i++){cursor=finiteAdd(cursor,this.groupHeightAt(i)),offsets[i]=cursor;const key=this.keyOf(this.itemAt(i),i),token=domKeyToken(key),occurrence=occurrences.get(token)??0;occurrences.set(token,occurrence+1);const identity=this.rowIdentity(key,occurrence);identities[i]=identity;let h;this.fixedRowHeight!=null?h=this.fixedRowHeight:(liveKeys?.add(identity),h=this.measuredHeights.get(identity)??DEFAULT_ROW_ESTIMATE_PX),cursor=finiteAdd(cursor,h)}if(offsets[n]=cursor,this.offsets=offsets,this.rowIdentities=identities,this.itemsChangedPendingPrune=!1,liveKeys){for(const key of this.measuredHeights.keys())liveKeys.has(key)||(this.measuredHeights.delete(key),this.measuredIndices.delete(key),this.indexedMeasurementIndexDirty=!0);for(const key of this.measuredIndices.keys())liveKeys.has(key)||(this.measuredIndices.delete(key),this.indexedMeasurementIndexDirty=!0)}}groupTopAt(index){return Math.max(0,this.offsetAt(index)-this.groupHeightAt(index))}rowBottomAt(index){return finiteAdd(this.offsetAt(index),this.rowHeightAt(index))}entryTopAt(index){return this.groupTopAt(index)}findIndexAtOrAfter(offset){let lo=0,hi=this.itemCount-1;for(;lo<hi;){const mid=lo+Math.floor((hi-lo)/2);this.rowBottomAt(mid)<=offset?lo=mid+1:hi=mid}return lo}findIndexAtOrBefore(offset){let lo=0,hi=this.itemCount-1;for(;lo<hi;){const mid=lo+Math.ceil((hi-lo)/2);this.entryTopAt(mid)<offset?lo=mid:hi=mid-1}return lo}offsetForIndex(index){const clamped=Math.min(this.itemCount,Math.max(0,Math.trunc(index)||0));return this.offsetAt(clamped)}indexAtOffset(px){const n=this.itemCount;return n===0?-1:Number.isFinite(px)?Math.min(n-1,Math.max(0,this.findIndexAtOrAfter(px))):px>0?n-1:0}computeRange(){const n=this.itemCount;if(n===0){this.visibleStart=0,this.visibleEnd=-1,this.renderStart=0,this.renderEnd=-1;return}if(this.viewportHeight<=0){if(!this.renderUnmeasuredWindow){this.visibleStart=0,this.visibleEnd=-1,this.renderStart=0,this.renderEnd=-1;return}this.visibleStart=0,this.visibleEnd=0,this.renderStart=0,this.renderEnd=Math.min(n-1,normalizeOverscan(this.overscan));return}const viewTop=this.containerScrollTop,viewBottom=viewTop+this.viewportHeight;this.visibleStart=this.findIndexAtOrAfter(viewTop),this.visibleEnd=this.findIndexAtOrBefore(viewBottom);const overscan=normalizeOverscan(this.overscan);this.renderStart=Math.max(0,this.visibleStart-overscan),this.renderEnd=Math.min(n-1,this.visibleEnd+overscan),this.pruneIndexedMeasurements()&&this.computeRange()}attachContainerListeners(){const base=this.scrollContainer,ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!base||!this.isConnected||!ownerWindow)return;this.containerResizeObserver?.disconnect(),this.containerResizeObserver=void 0,this.detachContainerListeners();const external=this.externalScroller,scrollTarget=external??base,generation=this.ownerRealmGeneration,ResizeObserverCtor=ownerWindow.ResizeObserver;if(ResizeObserverCtor){const observer=new ResizeObserverCtor(entries=>{if(this.containerResizeObserver!==observer||this.scrollListenerTarget!==scrollTarget||!this.isCurrentOwnerWork(ownerDocument,generation))return;if(this.beginResizeDelivery(),external){this.syncExternalScrollMetrics();return}const entry=entries[0];entry&&(this.viewportHeight=entry.borderBoxSize?.[0]?.blockSize??entry.contentRect.height)});this.containerResizeObserver=observer,observer.observe(base),external&&!isWindowScroller(external)&&observer.observe(external)}scrollTarget.addEventListener("scroll",this.onScroll,{passive:!0}),scrollTarget.addEventListener("wheel",this.onUserScrollIntent,{passive:!0}),scrollTarget.addEventListener("pointerdown",this.onUserScrollIntent,{passive:!0}),scrollTarget.addEventListener("touchstart",this.onUserScrollIntent,{passive:!0}),scrollTarget.addEventListener("keydown",this.onUserScrollIntent),this.scrollListenerTarget=scrollTarget,external&&isWindowScroller(external)&&(external.addEventListener("resize",this.onExternalViewportResize,{passive:!0}),this.viewportResizeTarget=external),ownerWindow.queueMicrotask(()=>{if(this.scrollListenerTarget!==scrollTarget||this.scrollContainer!==base||!this.isCurrentOwnerWork(ownerDocument,generation))return;const metrics=this.readScrollMetrics();metrics&&(this.viewportHeight!==metrics.viewportHeight&&(this.viewportHeight=metrics.viewportHeight),this.containerScrollTop!==metrics.scrollTop&&(this.containerScrollTop=metrics.scrollTop))})}detachContainerListeners(){const viewportTarget=this.viewportResizeTarget;viewportTarget&&(viewportTarget.removeEventListener("resize",this.onExternalViewportResize),this.viewportResizeTarget=void 0);const target=this.scrollListenerTarget;target&&(target.removeEventListener("scroll",this.onScroll),target.removeEventListener("wheel",this.onUserScrollIntent),target.removeEventListener("pointerdown",this.onUserScrollIntent),target.removeEventListener("touchstart",this.onUserScrollIntent),target.removeEventListener("keydown",this.onUserScrollIntent))}applyPendingRowMeasurements(){if(this.pendingRowMeasurements.size===0)return;const observations=[...this.pendingRowMeasurements];if(this.pendingRowMeasurements.clear(),this.fixedRowHeight!=null)return;const base=this.scrollContainer,oldScrollTop=this.readScrollMetrics()?.rawScrollTop??this.containerScrollTop;let scrollAdjustment=0,changed=!1;for(const[key,{index,height}]of observations){const prev=this.measuredHeights.get(key);if(prev===void 0||Math.abs(prev-height)>.5){const oldBottom=this.rowBottomAt(index);this.measuredHeights.set(key,height),this.measuredIndices.set(key,index);const oldHeight=prev??DEFAULT_ROW_ESTIMATE_PX;oldBottom<=oldScrollTop&&(scrollAdjustment+=height-oldHeight),changed=!0}}if(changed){if(this.indexedMeasurementIndexDirty=!0,base&&scrollAdjustment!==0){const nextScrollTop=oldScrollTop+scrollAdjustment;this.applyScrollPosition(nextScrollTop),this.containerScrollTop=Math.max(0,nextScrollTop),this.pendingScrollTop=null}this.offsetsDirty=!0,this.measurementGeneration+=1,this.requestUpdate()}}applyPendingGroupMeasurements(){if(this.pendingGroupMeasurements.size===0)return;const observations=[...this.pendingGroupMeasurements];this.pendingGroupMeasurements.clear();const base=this.scrollContainer,oldScrollTop=this.readScrollMetrics()?.rawScrollTop??this.containerScrollTop;let scrollAdjustment=0,changed=!1;for(const[index,height]of observations){if(!this.normalizedGroupByIndex.has(index))continue;const previous=this.measuredGroupHeights.get(index)??DEFAULT_GROUP_ESTIMATE_PX;if(Math.abs(previous-height)<=.5)continue;const oldRowTop=this.offsetAt(index);this.measuredGroupHeights.set(index,height),oldRowTop<=oldScrollTop&&(scrollAdjustment+=height-previous),changed=!0}if(changed){if(base&&scrollAdjustment!==0){const nextScrollTop=oldScrollTop+scrollAdjustment;this.applyScrollPosition(nextScrollTop),this.containerScrollTop=Math.max(0,nextScrollTop),this.pendingScrollTop=null}this.offsetsDirty=!0,this.measurementGeneration+=1,this.requestUpdate()}}get defersMeasurementApplication(){return this.inResizeDelivery&&this.externalScroller!==void 0}beginResizeDelivery(){if(this.inResizeDelivery=!0,this.rowObserveRafId!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected){this.inResizeDelivery=!1;return}const generation=this.ownerRealmGeneration,handle=ownerWindow.requestAnimationFrame(()=>{if(this.rowObserveRafId!==handle||this.rowObserveRafOwner!==ownerWindow||this.rowObserveRafDocument!==ownerDocument||!this.isCurrentOwnerWork(ownerDocument,generation))return;this.rowObserveRafId=void 0,this.rowObserveRafOwner=void 0,this.rowObserveRafDocument=void 0,this.inResizeDelivery=!1;const ro=this.rowResizeObserver;for(const[identity,el]of this.deferredRowObservations)ro&&this.observedRows.get(identity)===el&&ro.observe(el);this.deferredRowObservations.clear();const groupObserver=this.groupResizeObserver;for(const[index,el]of this.deferredGroupObservations)groupObserver&&this.observedGroups.get(index)===el&&groupObserver.observe(el);this.deferredGroupObservations.clear(),this.applyPendingRowMeasurements(),this.applyPendingGroupMeasurements()});this.rowObserveRafId=handle,this.rowObserveRafOwner=ownerWindow,this.rowObserveRafDocument=ownerDocument}syncRowObservers(){const ro=this.rowResizeObserver;if(!ro)return;if(this.fixedRowHeight!=null){for(const el of this.observedRows.values())ro.unobserve(el);this.observedRows.clear(),this.deferredRowObservations.clear();return}const current=new Map;this.renderRoot.querySelectorAll('[part="row"]').forEach(el=>{const index=Number(el.getAttribute("data-row-index"));if(!Number.isInteger(index)||index<0||index>=this.itemCount)return;const identity=this.identityAt(index);current.set(identity,el),this.observedRowKeys.set(el,identity),this.observedRowIndices.set(el,index)});for(const[identity,el]of this.observedRows)current.get(identity)!==el&&(ro.unobserve(el),this.observedRows.delete(identity),this.deferredRowObservations.delete(identity));for(const[identity,el]of current)this.observedRows.has(identity)||(this.observedRows.set(identity,el),this.inResizeDelivery?this.deferredRowObservations.set(identity,el):ro.observe(el))}syncGroupObservers(){const observer=this.groupResizeObserver;if(!observer)return;const current=new Map;this.renderRoot.querySelectorAll('[part="group"][data-group-index]').forEach(marker=>{const index=Number(marker.dataset.groupIndex);!Number.isInteger(index)||!this.normalizedGroupByIndex.has(index)||(current.set(index,marker),this.observedGroupIndices.set(marker,index))});for(const[index,marker]of this.observedGroups)current.get(index)!==marker&&(observer.unobserve(marker),this.observedGroups.delete(index),this.deferredGroupObservations.delete(index));for(const[index,marker]of current)this.observedGroups.has(index)||(this.observedGroups.set(index,marker),this.inResizeDelivery?this.deferredGroupObservations.set(index,marker):observer.observe(marker))}get stickyInset(){return this.renderStickyGroup?this.stickyHeight:0}scrollActiveIntoView(){const index=this.activeIndex;if(index<0)return;const behavior=prefersReducedMotion(this)?"auto":"smooth";this.performScrollTo(index,"auto",behavior)&&this.beginPendingScrollCorrection(index,"auto",behavior,this.activeItemId)}scrollToIndex(index,options){const n=this.itemCount;if(n===0)return;const clamped=finiteInteger(index,0,0,n-1),align=options?.align??"auto",behavior=prefersReducedMotion(this)?"auto":options?.behavior??"smooth";this.performScrollTo(clamped,align,behavior)?this.beginPendingScrollCorrection(clamped,align,behavior):this.pendingScrollCorrection=void 0}hasUnmeasuredGroupThrough(index){return this.normalizedGroups.some(group=>group.startIndex<=index&&group.label!==""&&!this.measuredGroupHeights.has(group.startIndex))}beginPendingScrollCorrection(index,align,behavior,activeItemId){if(this.fixedRowHeight!=null&&!this.hasUnmeasuredGroupThrough(index)){this.pendingScrollCorrection=void 0;return}this.pendingScrollCorrection={identity:this.identityAt(index),index,align,behavior,source:this.effectiveSource,keyFunction:this.keyFunction,activeItemId:activeItemId===""?void 0:activeItemId,lastMeasurementGeneration:this.measurementGeneration}}performScrollTo(index,align,behavior){const metrics=this.readScrollMetrics();if(!metrics)return!1;const inset=this.stickyInset,top=this.offsetAt(index),bottom=this.rowBottomAt(index),viewTop=metrics.rawScrollTop,viewBottom=viewTop+metrics.viewportHeight;let target=null;return align==="start"?target=top-inset:align==="end"?target=bottom-metrics.viewportHeight:top-inset<viewTop?target=top-inset:bottom>viewBottom&&(target=bottom-metrics.viewportHeight),target===null?!1:(this.applyScrollPosition(target,behavior),!0)}maybeCorrectPendingScroll(){const pending=this.pendingScrollCorrection;if(!pending||pending.lastMeasurementGeneration>=this.measurementGeneration)return;if(pending.source!==this.effectiveSource||pending.keyFunction!==this.keyFunction||pending.activeItemId!==void 0&&!Object.is(pending.activeItemId,this.activeItemId)){this.pendingScrollCorrection=void 0;return}const index=pending.activeItemId!==void 0?this.activeIndex:isIndexedSource(this.effectiveSource)?pending.index:this.rowIdentities.indexOf(pending.identity);if(index<0||index>=this.itemCount||this.identityAt(index)!==pending.identity){this.pendingScrollCorrection=void 0;return}this.performScrollTo(index,pending.align,pending.behavior),pending.index=index,pending.lastMeasurementGeneration=this.measurementGeneration,(this.fixedRowHeight!=null||this.measuredHeights.has(pending.identity))&&!this.hasUnmeasuredGroupThrough(index)&&(this.pendingScrollCorrection=void 0)}emitRangeChangeIfNeeded(){if(this.visibleEnd<this.visibleStart){this.lastEmittedStart=-1,this.lastEmittedEnd=-1;return}this.visibleStart===this.lastEmittedStart&&this.visibleEnd===this.lastEmittedEnd||(this.lastEmittedStart=this.visibleStart,this.lastEmittedEnd=this.visibleEnd,this.emit("lr-visible-range-change",{start:this.visibleStart,end:this.visibleEnd}))}maybeFireLoadMore(){const n=this.itemCount;if(!(n>0&&this.visibleEnd>=n-1)){this.loadMoreArmed=!0;return}!this.hasMore||this.loading||!this.loadMoreArmed||(this.loadMoreArmed=!1,this.emit("lr-load-more"))}get projectionActive(){return!this.projectionDeferred&&this.rowProjection==="light"}rowSlotName(identity){return`${tag("virtual-list")}-row-${identity}`}syncRowProjection(){if(!this.projectionActive||!this.isConnected){this.projectionAnchor!==void 0&&this.teardownRowProjection();return}const anchor=this.ensureProjectionAnchor();this.projectionPart=render(this.renderProjectedRows(),this,{renderBefore:anchor,host:this})}ensureProjectionAnchor(){const existing=this.projectionAnchor;if(existing!==void 0&&existing.parentNode===this&&existing.ownerDocument===this.ownerDocument)return existing;existing!==void 0&&this.teardownRowProjection();const anchor=this.ownerDocument.createComment(PROJECTION_ANCHOR_MARKER);return this.append(anchor),this.projectionAnchor=anchor,this.projectionPart=void 0,anchor}teardownRowProjection(){const anchor=this.projectionAnchor,part=this.projectionPart;if(this.projectionAnchor=void 0,this.projectionPart=void 0,anchor!==void 0){if(part!==void 0){const container=anchor.parentNode;container!==null&&render(nothing,container,{renderBefore:anchor,host:this});const start=part.startNode;start?.parentNode?.removeChild(start)}anchor.parentNode?.removeChild(anchor)}}renderProjectedRows(){return repeat(this.renderedWindow,w=>w.identity,w=>staticHtml`<div
+import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing,render}from"lit";import{html as staticHtml,unsafeStatic}from"lit/static-html.js";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{literalSetConverter}from"../../../internal/converters.js";import{tag}from"../../../internal/prefix.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{nativePopoverSupported}from"../../../internal/native-popover.js";import{finiteAdd,finiteCount,finiteInteger,finiteNumber}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{styles}from"./virtual-list.styles.js";const DEFAULT_ROW_ESTIMATE_PX=48,DEFAULT_GROUP_ESTIMATE_PX=32,DEFAULT_OVERSCAN_ROWS=6,MAX_OVERSCAN_ROWS=100,MAX_VIRTUAL_LIST_GROUPS=1e4,EMPTY_VIRTUAL_LIST_GROUPS=Object.freeze([]);function normalizeOverscan(value){if(value===null)return DEFAULT_OVERSCAN_ROWS;const numeric=typeof value=="number"?value:Number(value);return Number.isFinite(numeric)?Math.min(MAX_OVERSCAN_ROWS,Math.max(0,Math.floor(numeric))):DEFAULT_OVERSCAN_ROWS}const overscanConverter={fromAttribute(value){return normalizeOverscan(value)}};function virtualListGroupsChanged(value,oldValue){if(value===oldValue)return!1;const next=value,previous=oldValue;if(next==null||previous==null)return next!==previous;if(next.length!==previous.length)return!0;for(let index=0;index<next.length;index+=1){const a=next[index],b=previous[index];if(a.key!==b.key||a.label!==b.label||a.startIndex!==b.startIndex)return!0}return!1}const ROW_PROJECTION=literalSetConverter(["shadow","light"],"shadow"),VIRTUAL_LIST_ROW_ATTRIBUTE=`data-${tag("virtual-list-row")}`,VIRTUAL_LIST_STICKY_ATTRIBUTE=`data-${tag("virtual-list-sticky")}`,ROW_ATTRIBUTE_STATIC=unsafeStatic(VIRTUAL_LIST_ROW_ATTRIBUTE),PROJECTION_ANCHOR_MARKER=`${tag("virtual-list")}-projection`;function normalizeRowHeight(value){if(value==="auto")return"auto";const numeric=typeof value=="number"?value:Number(value);return Number.isFinite(numeric)&&numeric>0?numeric:"auto"}const rowHeightConverter={fromAttribute(value){return value===null?"auto":normalizeRowHeight(value)}};function isIndexedSource(source){return!Array.isArray(source)}const ELEMENT_NODE_TYPE=1;function isWindowScroller(target){return target.window===target}function domKeyToken(key){if(typeof key=="number"){if(Number.isNaN(key))return"number:NaN";if(Object.is(key,-0))return"number:-0"}return`${typeof key}:${String(key)}`}class LyraVirtualList extends LyraElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>nothing,this.rowHeight="auto",this.itemRole="listitem",this._rowProjection="shadow",this.rowIndexOffset=0,this.overscan=DEFAULT_OVERSCAN_ROWS,this.activeItemId="",this.loading=!1,this.hasMore=!1,this.containerScrollTop=0,this.viewportHeight=0,this.renderUnmeasuredWindow=!0,this.offsets=[0],this.rowIdentities=[],this.fixedRowHeight=null,this.measuredHeights=new Map,this.measuredIndices=new Map,this.indexedMeasurementIndices=[],this.indexedMeasurementDeltaPrefix=[0],this.indexedMeasurementIndexDirty=!0,this.offsetsDirty=!0,this.itemsChangedPendingPrune=!1,this.renderStart=0,this.renderEnd=-1,this.renderedWindow=[],this.projectionDeferred=!0,this.releaseRowProjection=()=>{this.projectionDeferred=!1,this.requestUpdate()},this.visibleStart=0,this.visibleEnd=-1,this.lastEmittedStart=-1,this.lastEmittedEnd=-1,this.loadMoreArmed=!0,this.measurementGeneration=0,this.isFirstUpdate=!0,this.stickyHeight=0,this.noTopLayer=!1,this.observedRows=new Map,this.observedRowKeys=new WeakMap,this.observedRowIndices=new WeakMap,this.observedGroups=new Map,this.observedGroupIndices=new WeakMap,this.externalMetricsPending=!1,this.ownerRealmGeneration=0,this.inResizeDelivery=!1,this.pendingRowMeasurements=new Map,this.pendingGroupMeasurements=new Map,this.deferredRowObservations=new Map,this.deferredGroupObservations=new Map,this.activeIndexForLength=-1,this.activeIndexForId="",this.activeIndexCache=-1,this.pendingScrollTop=null,this.normalizedGroups=EMPTY_VIRTUAL_LIST_GROUPS,this.normalizedGroupByIndex=new Map,this.measuredGroupHeights=new Map,this.groupHeightPrefix=[0],this.onExternalViewportResize=()=>{this.syncExternalScrollMetrics()},this.onUserScrollIntent=event=>{event instanceof KeyboardEvent&&!new Set(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "]).has(event.key)||(this.pendingScrollCorrection=void 0)},this.onScroll=e=>{if(this.externalScroller?(this.pendingScrollTop=null,this.externalMetricsPending=!0):this.pendingScrollTop=e.currentTarget.scrollTop,this.scrollRafId!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration,handle=ownerWindow.requestAnimationFrame(()=>{if(!(this.scrollRafId!==handle||this.scrollRafOwner!==ownerWindow||this.scrollRafDocument!==ownerDocument||!this.isCurrentOwnerWork(ownerDocument,generation))){if(this.scrollRafId=void 0,this.scrollRafOwner=void 0,this.scrollRafDocument=void 0,this.externalMetricsPending){this.externalMetricsPending=!1;const metrics=this.readScrollMetrics();metrics&&(this.pendingScrollTop=metrics.scrollTop,this.viewportHeight!==metrics.viewportHeight&&(this.viewportHeight=metrics.viewportHeight))}if(this.pendingScrollTop!==null){const scrollTop=this.pendingScrollTop;this.pendingScrollTop=null;const moved=this.containerScrollTop!==scrollTop;this.containerScrollTop=scrollTop,moved&&this.emit("lr-virtual-scroll",{scrollTop,viewportHeight:this.viewportHeight})}}});this.scrollRafId=handle,this.scrollRafOwner=ownerWindow,this.scrollRafDocument=ownerDocument},this.onRowsResized=entries=>{if(this.beginResizeDelivery(),this.fixedRowHeight==null){for(const entry of entries){const row=entry.target,key=this.observedRowKeys.get(row),index=this.observedRowIndices.get(row);if(key===void 0||index===void 0)continue;const height=entry.borderBoxSize?.[0]?.blockSize??entry.target.getBoundingClientRect().height;this.pendingRowMeasurements.set(key,{index,height})}this.defersMeasurementApplication||this.applyPendingRowMeasurements()}},this.onGroupsResized=entries=>{this.beginResizeDelivery();for(const entry of entries){const marker=entry.target,index=this.observedGroupIndices.get(marker);if(index===void 0||!this.normalizedGroupByIndex.has(index))continue;const height=entry.borderBoxSize?.[0]?.blockSize??entry.target.getBoundingClientRect().height;!Number.isFinite(height)||height<0||this.pendingGroupMeasurements.set(index,height)}this.defersMeasurementApplication||this.applyPendingGroupMeasurements()},this.onStickyResized=entries=>{this.beginResizeDelivery();const entry=entries[0];if(!entry)return;const height=entry.borderBoxSize?.[0]?.blockSize??entry.contentRect.height;Math.abs(this.stickyHeight-height)>.5&&(this.stickyHeight=height)}}static{this.collectionSupport=collectionSupport}static{this.ownedCollectionProperties=Object.freeze(["items","source","groups"])}static{this.identityCollectionProperties=Object.freeze(["items","source"])}static{this.identityCollectionObjectProperties=Object.freeze(["source"])}static{this.styles=[LyraElement.styles,styles]}get rowProjection(){return this._rowProjection}set rowProjection(next){const normalized=ROW_PROJECTION.normalize(next),previous=this._rowProjection;previous!==normalized&&(this._rowProjection=normalized,this.requestUpdate("rowProjection",previous))}get scrollContainer(){return this.renderRoot?.querySelector('[part="base"]')??void 0}get renderedRows(){const root=this.renderRoot;return root?[...root.querySelectorAll('[part="row"]')]:[]}get projectedRows(){const rows=[];for(const child of this.children)child.hasAttribute(VIRTUAL_LIST_ROW_ATTRIBUTE)&&rows.push(child);return rows}get externalScroller(){const target=this.scrollElement;if(target!=null)return isWindowScroller(target)||target.nodeType===ELEMENT_NODE_TYPE?target:void 0}get spacerElement(){return this.renderRoot?.querySelector('[part="spacer"]')??void 0}readScrollMetrics(){const base=this.scrollContainer;if(!base)return null;const external=this.externalScroller;if(!external)return{scrollTop:base.scrollTop,rawScrollTop:base.scrollTop,viewportHeight:base.clientHeight,scrollDeltaScale:1};const spacer=this.spacerElement??base,spacerRect=spacer.getBoundingClientRect(),spacerScale=this.visualBlockScale(spacer,spacerRect),spacerTop=spacerRect.top;if(isWindowScroller(external)){const documentHeight=finiteNumber(external.document?.documentElement?.clientHeight??0,0),rawScrollTop2=finiteNumber(-spacerTop/spacerScale,0);return{scrollTop:Math.max(0,rawScrollTop2),rawScrollTop:rawScrollTop2,viewportHeight:(documentHeight>0?documentHeight:finiteNumber(external.innerHeight,0))/spacerScale,scrollDeltaScale:spacerScale}}const scrollerRect=external.getBoundingClientRect(),relativeScale=this.relativeBlockScale(spacer,external),inferredScrollerScale=relativeScale===null?0:spacerScale/relativeScale,scrollerScale=Number.isFinite(inferredScrollerScale)&&inferredScrollerScale>0?inferredScrollerScale:this.visualBlockScale(external,scrollerRect),scrollerStyle=external.ownerDocument.defaultView?.getComputedStyle(external),borderTop=Number.parseFloat(scrollerStyle?.borderTopWidth??""),scrollerTop=scrollerRect.top+(Number.isFinite(borderTop)?borderTop:external.clientTop)*scrollerScale,rawScrollTop=finiteNumber((scrollerTop-spacerTop)/spacerScale,0);return{scrollTop:Math.max(0,rawScrollTop),rawScrollTop,viewportHeight:finiteNumber(external.clientHeight*scrollerScale/spacerScale,0),scrollDeltaScale:spacerScale/scrollerScale}}visualBlockScale(element,rect){const style=element.ownerDocument.defaultView?.getComputedStyle(element);if(!style)return 1;const borderBoxHeight=Number.parseFloat(style.height)+(style.boxSizing==="border-box"?0:Number.parseFloat(style.paddingTop)+Number.parseFloat(style.paddingBottom)+Number.parseFloat(style.borderTopWidth)+Number.parseFloat(style.borderBottomWidth)),layoutHeight=borderBoxHeight>0&&Number.isFinite(borderBoxHeight)?borderBoxHeight:"offsetHeight"in element&&typeof element.offsetHeight=="number"?element.offsetHeight:0,scale=rect.height/layoutHeight;return scale>0&&Number.isFinite(scale)?scale:1}relativeBlockScale(descendant,ancestor){let scale=1,current=descendant;for(;current&&current!==ancestor;){const style=current.ownerDocument.defaultView?.getComputedStyle(current);if(!style)return null;const zoom=style.zoom?style.zoom.endsWith("%")?Number.parseFloat(style.zoom)/100:Number.parseFloat(style.zoom):1;if(!Number.isFinite(zoom)||zoom<=0)return null;scale*=zoom;const transformable=style.display!=="contents"&&style.display!=="inline";if(transformable&&style.scale&&style.scale!=="none"){const values=style.scale.split(/\s+/).map(Number),blockScale=values[1]??values[0]??Number.NaN;if(!Number.isFinite(blockScale)||blockScale<=0)return null;scale*=blockScale}if(transformable&&style.rotate&&style.rotate!=="none"&&style.rotate!=="0deg")return null;if(transformable&&style.transform!=="none"){const Matrix=current.ownerDocument.defaultView?.DOMMatrixReadOnly;if(!Matrix)return null;const matrix=new Matrix(style.transform);if(matrix.m12!==0||matrix.m13!==0||matrix.m14!==0||matrix.m21!==0||matrix.m23!==0||matrix.m24!==0||matrix.m31!==0||matrix.m32!==0||matrix.m34!==0||matrix.m44!==1||matrix.m22<=0)return null;scale*=matrix.m22}const parent=current.assignedSlot??current.parentNode;current=parent?.nodeType===Node.ELEMENT_NODE?parent:parent?.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in parent?parent.host:null}return current===ancestor&&Number.isFinite(scale)&&scale>0?scale:null}applyScrollPosition(top,behavior){const external=this.externalScroller;if(!external){const base=this.scrollContainer;if(!base)return;const next2=Math.max(0,finiteNumber(top,0));behavior===void 0?base.scrollTop=next2:base.scrollTo({top:next2,behavior});return}const metrics=this.readScrollMetrics();if(!metrics)return;const delta=(finiteNumber(top,metrics.rawScrollTop)-metrics.rawScrollTop)*metrics.scrollDeltaScale;if(isWindowScroller(external)){const options={top:Math.max(0,finiteNumber(external.scrollY+delta,0))};behavior!==void 0&&(options.behavior=behavior),external.scrollTo(options);return}const next=Math.max(0,finiteNumber(external.scrollTop+delta,0));behavior===void 0?external.scrollTop=next:external.scrollTo({top:next,behavior})}syncExternalScrollMetrics(){const metrics=this.readScrollMetrics();metrics&&(this.viewportHeight!==metrics.viewportHeight&&(this.viewportHeight=metrics.viewportHeight),this.containerScrollTop!==metrics.scrollTop&&(this.containerScrollTop=metrics.scrollTop))}get safeRowIndexOffset(){return finiteCount(this.rowIndexOffset)}computedAriaRowIndex(index){return finiteInteger(finiteAdd(index+1,this.safeRowIndexOffset),1,1,Number.MAX_SAFE_INTEGER)}get activeIndex(){if(this.activeItemId==="")return-1;const source=this.effectiveSource,count=this.itemCount;if(this.activeIndexFor===source&&this.activeIndexForLength===count&&Object.is(this.activeIndexForId,this.activeItemId)&&this.activeIndexForKeyFn===this.keyFunction)return this.activeIndexCache;if(this.activeIndexFor=source,this.activeIndexForLength=count,this.activeIndexForId=this.activeItemId,this.activeIndexForKeyFn=this.keyFunction,this.activeIndexCache=-1,isIndexedSource(source)){if(!this.keyFunction&&source.indexOfKey){const candidate=source.indexOfKey(this.activeItemId);Number.isInteger(candidate)&&candidate>=0&&candidate<count&&(this.activeIndexCache=candidate)}return this.activeIndexCache}for(let index=0;index<count;index++){const item=this.itemAt(index);if(Object.is(this.keyOf(item,index),this.activeItemId)){this.activeIndexCache=index;break}}return this.activeIndexCache}connectedCallback(){super.connectedCallback(),this.ownerDocument.defaultView&&(this.seedFirstRenderState(()=>{this.renderUnmeasuredWindow=!1,this.requestUpdate()}),this.seedFirstRenderState(this.releaseRowProjection),this.hasUpdated&&(this.projectionDeferred=!1)),this.resetOwnerRealmWork();const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView,generation=this.ownerRealmGeneration,ResizeObserverCtor=ownerWindow?.ResizeObserver;if(ResizeObserverCtor){const rowObserver=new ResizeObserverCtor(entries=>{this.rowResizeObserver!==rowObserver||!this.isCurrentOwnerWork(ownerDocument,generation)||this.onRowsResized(entries)}),groupObserver=new ResizeObserverCtor(entries=>{this.groupResizeObserver!==groupObserver||!this.isCurrentOwnerWork(ownerDocument,generation)||this.onGroupsResized(entries)}),stickyObserver=new ResizeObserverCtor(entries=>{this.stickyResizeObserver!==stickyObserver||!this.isCurrentOwnerWork(ownerDocument,generation)||this.onStickyResized(entries)});this.rowResizeObserver=rowObserver,this.groupResizeObserver=groupObserver,this.stickyResizeObserver=stickyObserver}this.hasUpdated&&(this.syncRowProjection(),this.attachContainerListeners(),this.syncRowObservers(),this.syncGroupObservers(),this.syncStickyOverlay())}disconnectedCallback(){this.teardownRowProjection(),this.resetOwnerRealmWork(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.teardownRowProjection(),this.resetOwnerRealmWork()}isCurrentOwnerWork(ownerDocument,generation){return this.ownerRealmGeneration===generation&&this.isConnected&&this.ownerDocument===ownerDocument}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.rowResizeObserver?.disconnect(),this.rowResizeObserver=void 0,this.groupResizeObserver?.disconnect(),this.groupResizeObserver=void 0,this.observedRows.clear(),this.observedGroups.clear(),this.deferredRowObservations.clear(),this.deferredGroupObservations.clear(),this.inResizeDelivery=!1,this.pendingRowMeasurements.clear(),this.pendingGroupMeasurements.clear(),this.rowObserveRafId!==void 0&&this.rowObserveRafOwner?.cancelAnimationFrame(this.rowObserveRafId),this.rowObserveRafId=void 0,this.rowObserveRafOwner=void 0,this.rowObserveRafDocument=void 0,this.containerResizeObserver?.disconnect(),this.containerResizeObserver=void 0,this.stickyResizeObserver?.disconnect(),this.stickyResizeObserver=void 0,this.observedSticky=void 0,this.scrollRafId!==void 0&&this.scrollRafOwner?.cancelAnimationFrame(this.scrollRafId),this.scrollRafId=void 0,this.scrollRafOwner=void 0,this.scrollRafDocument=void 0,this.pendingScrollTop=null,this.externalMetricsPending=!1,this.pendingScrollCorrection=void 0,this.detachContainerListeners(),this.scrollListenerTarget=void 0}firstUpdated(changed){super.firstUpdated(changed),this.attachContainerListeners(),queueMicrotask(()=>{this.isConnected&&(this.noTopLayer=!nativePopoverSupported())})}willUpdate(changed){if(super.willUpdate(changed),this.projectionDeferred&&!this.hasUpdated&&this.ownerDocument?.defaultView&&this.seedFirstRenderState(this.releaseRowProjection),this.isFirstUpdate=!this.hasUpdated,this.hasUpdated&&(this.noTopLayer=!nativePopoverSupported()),(changed.has("items")||changed.has("source")||changed.has("keyFunction")||changed.has("rowHeight")||changed.has("groups")||changed.has("activeItemId")||changed.has("scrollElement"))&&(this.pendingScrollCorrection=void 0),(changed.has("items")||changed.has("source")||changed.has("rowHeight")||changed.has("keyFunction")||changed.has("groups"))&&(this.offsetsDirty=!0),(changed.has("items")||changed.has("source"))&&(this.itemsChangedPendingPrune=!0),changed.has("keyFunction")||isIndexedSource(this.effectiveSource)&&(changed.has("items")||changed.has("source"))){this.measuredHeights.clear(),this.measuredIndices.clear(),this.pendingRowMeasurements.clear(),this.indexedMeasurementIndexDirty=!0;for(const row of this.observedRows.values())this.rowResizeObserver?.unobserve(row);this.observedRows.clear(),this.deferredRowObservations.clear()}if(changed.has("groups")){this.measuredGroupHeights.clear(),this.pendingGroupMeasurements.clear();for(const marker of this.observedGroups.values())this.groupResizeObserver?.unobserve(marker);this.observedGroups.clear(),this.deferredGroupObservations.clear()}(changed.has("items")||changed.has("source")||changed.has("groups"))&&this.recomputeGroups(),changed.has("rowHeight")&&(this.fixedRowHeight=this.parseRowHeight(this.rowHeight),this.fixedRowHeight!=null&&(this.measuredHeights.clear(),this.measuredIndices.clear(),this.pendingRowMeasurements.clear(),this.indexedMeasurementIndexDirty=!0)),this.offsetsDirty&&(this.recomputeOffsets(),this.offsetsDirty=!1),this.computeRange()}updated(changed){super.updated(changed),this.syncRowProjection(),this.syncRowObservers(),this.syncGroupObservers(),this.syncStickyOverlay(),changed.has("scrollElement")&&!this.isFirstUpdate&&this.attachContainerListeners(),changed.has("activeItemId")&&!this.isFirstUpdate&&this.scrollActiveIntoView(),this.emitRangeChangeIfNeeded(),this.maybeFireLoadMore(),this.maybeCorrectPendingScroll()}parseRowHeight(value){const normalized=normalizeRowHeight(value);return normalized==="auto"?null:normalized}get effectiveSource(){return this.source??this.items}get itemCount(){const source=this.effectiveSource;return isIndexedSource(source)?finiteCount(source.count):source.length}itemAt(index){const source=this.effectiveSource;return isIndexedSource(source)?source.itemAt(index):source[index]}keyOf(item,index){const source=this.effectiveSource,key=this.keyFunction?this.keyFunction(item,index):isIndexedSource(source)?source.keyAt?.(index)??index:index;return typeof key=="string"||typeof key=="number"?key:index}rowIdentity(key,occurrence){const token=domKeyToken(key);return`${token.length}:${token}:${occurrence}`}identityAt(index,item=this.itemAt(index)){return isIndexedSource(this.effectiveSource)?this.rowIdentity(this.keyOf(item,index),index):this.rowIdentities[index]??this.rowIdentity(this.keyOf(item,index),index)}groupHeightAt(index){const group=this.normalizedGroupByIndex.get(index);return!group||group.label===""?0:this.measuredGroupHeights.get(index)??DEFAULT_GROUP_ESTIMATE_PX}rowHeightAt(index){return this.fixedRowHeight!=null?this.fixedRowHeight:this.measuredHeights.get(this.identityAt(index))??DEFAULT_ROW_ESTIMATE_PX}groupContributionThrough(index){let low=0,high=this.normalizedGroups.length;for(;low<high;){const middle=low+high>>1;this.normalizedGroups[middle].startIndex<=index?low=middle+1:high=middle}return this.groupHeightPrefix[low]??0}recomputeGroupHeightPrefix(){const prefix=new Array(this.normalizedGroups.length+1);prefix[0]=0;for(let index=0;index<this.normalizedGroups.length;index++){const group=this.normalizedGroups[index],height=group.label===""?0:this.measuredGroupHeights.get(group.startIndex)??DEFAULT_GROUP_ESTIMATE_PX;prefix[index+1]=finiteAdd(prefix[index],height)}this.groupHeightPrefix=prefix}indexedOffsetForIndex(index){const baseHeight=this.fixedRowHeight??DEFAULT_ROW_ESTIMATE_PX;let offset=index>Number.MAX_VALUE/baseHeight?Number.MAX_VALUE:index*baseHeight;if(this.fixedRowHeight==null){this.rebuildIndexedMeasurementIndex();let low=0,high=this.indexedMeasurementIndices.length;for(;low<high;){const middle=low+high>>1;this.indexedMeasurementIndices[middle]<index?low=middle+1:high=middle}offset=finiteAdd(offset,this.indexedMeasurementDeltaPrefix[low]??0)}return Math.max(0,finiteAdd(offset,this.groupContributionThrough(index)))}rebuildIndexedMeasurementIndex(){if(!this.indexedMeasurementIndexDirty)return;const retained=[];for(const[identity,index]of this.measuredIndices){const height=this.measuredHeights.get(identity);height!==void 0&&retained.push({index,delta:height-DEFAULT_ROW_ESTIMATE_PX})}retained.sort((a,b)=>a.index-b.index);const indices=new Array(retained.length),prefix=new Array(retained.length+1);prefix[0]=0;for(let position=0;position<retained.length;position++){const measurement=retained[position];indices[position]=measurement.index,prefix[position+1]=finiteAdd(prefix[position],measurement.delta)}this.indexedMeasurementIndices=indices,this.indexedMeasurementDeltaPrefix=prefix,this.indexedMeasurementIndexDirty=!1}pruneIndexedMeasurements(){if(!isIndexedSource(this.effectiveSource)||this.fixedRowHeight!=null||this.renderEnd<this.renderStart)return!1;const renderedCount=this.renderEnd-this.renderStart+1,retentionRows=Math.max(renderedCount,normalizeOverscan(this.overscan)*4),firstRetained=Math.max(0,this.renderStart-retentionRows),lastRetained=Math.min(this.itemCount-1,this.renderEnd+retentionRows);let removedDeltaBeforeWindow=0,pruned=!1;for(const[identity,measuredIndex]of this.measuredIndices)if(measuredIndex<firstRetained||measuredIndex>lastRetained){const height=this.measuredHeights.get(identity);height!==void 0&&measuredIndex<firstRetained&&(removedDeltaBeforeWindow=finiteAdd(removedDeltaBeforeWindow,height-DEFAULT_ROW_ESTIMATE_PX)),this.measuredIndices.delete(identity),this.measuredHeights.delete(identity),pruned=!0}if(pruned&&(this.indexedMeasurementIndexDirty=!0,removedDeltaBeforeWindow!==0)){const nextScrollTop=(this.readScrollMetrics()?.rawScrollTop??this.containerScrollTop)-removedDeltaBeforeWindow;this.applyScrollPosition(nextScrollTop),this.containerScrollTop=Math.max(0,nextScrollTop),this.pendingScrollTop=null}return pruned}offsetAt(index){return isIndexedSource(this.effectiveSource)?this.indexedOffsetForIndex(index):this.offsets[index]??0}recomputeOffsets(){const n=this.itemCount;if(this.recomputeGroupHeightPrefix(),isIndexedSource(this.effectiveSource)){this.offsets=[0],this.rowIdentities=[],this.itemsChangedPendingPrune=!1;return}const offsets=new Array(n+1);let cursor=0;const liveKeys=this.itemsChangedPendingPrune&&this.fixedRowHeight==null?new Set:null,occurrences=new Map,identities=new Array(n);for(let i=0;i<n;i++){cursor=finiteAdd(cursor,this.groupHeightAt(i)),offsets[i]=cursor;const key=this.keyOf(this.itemAt(i),i),token=domKeyToken(key),occurrence=occurrences.get(token)??0;occurrences.set(token,occurrence+1);const identity=this.rowIdentity(key,occurrence);identities[i]=identity;let h;this.fixedRowHeight!=null?h=this.fixedRowHeight:(liveKeys?.add(identity),h=this.measuredHeights.get(identity)??DEFAULT_ROW_ESTIMATE_PX),cursor=finiteAdd(cursor,h)}if(offsets[n]=cursor,this.offsets=offsets,this.rowIdentities=identities,this.itemsChangedPendingPrune=!1,liveKeys){for(const key of this.measuredHeights.keys())liveKeys.has(key)||(this.measuredHeights.delete(key),this.measuredIndices.delete(key),this.indexedMeasurementIndexDirty=!0);for(const key of this.measuredIndices.keys())liveKeys.has(key)||(this.measuredIndices.delete(key),this.indexedMeasurementIndexDirty=!0)}}groupTopAt(index){return Math.max(0,this.offsetAt(index)-this.groupHeightAt(index))}rowBottomAt(index){return finiteAdd(this.offsetAt(index),this.rowHeightAt(index))}entryTopAt(index){return this.groupTopAt(index)}findIndexAtOrAfter(offset){let lo=0,hi=this.itemCount-1;for(;lo<hi;){const mid=lo+Math.floor((hi-lo)/2);this.rowBottomAt(mid)<=offset?lo=mid+1:hi=mid}return lo}findIndexAtOrBefore(offset){let lo=0,hi=this.itemCount-1;for(;lo<hi;){const mid=lo+Math.ceil((hi-lo)/2);this.entryTopAt(mid)<offset?lo=mid:hi=mid-1}return lo}offsetForIndex(index){const clamped=Math.min(this.itemCount,Math.max(0,Math.trunc(index)||0));return this.offsetAt(clamped)}indexAtOffset(px){const n=this.itemCount;return n===0?-1:Number.isFinite(px)?Math.min(n-1,Math.max(0,this.findIndexAtOrAfter(px))):px>0?n-1:0}computeRange(){const n=this.itemCount;if(n===0){this.visibleStart=0,this.visibleEnd=-1,this.renderStart=0,this.renderEnd=-1;return}if(this.viewportHeight<=0){if(!this.renderUnmeasuredWindow){this.visibleStart=0,this.visibleEnd=-1,this.renderStart=0,this.renderEnd=-1;return}this.visibleStart=0,this.visibleEnd=0,this.renderStart=0,this.renderEnd=Math.min(n-1,normalizeOverscan(this.overscan));return}const viewTop=this.containerScrollTop,viewBottom=viewTop+this.viewportHeight;this.visibleStart=this.findIndexAtOrAfter(viewTop),this.visibleEnd=this.findIndexAtOrBefore(viewBottom);const overscan=normalizeOverscan(this.overscan);this.renderStart=Math.max(0,this.visibleStart-overscan),this.renderEnd=Math.min(n-1,this.visibleEnd+overscan),this.pruneIndexedMeasurements()&&this.computeRange()}attachContainerListeners(){const base=this.scrollContainer,ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!base||!this.isConnected||!ownerWindow)return;this.containerResizeObserver?.disconnect(),this.containerResizeObserver=void 0,this.detachContainerListeners();const external=this.externalScroller,scrollTarget=external??base,generation=this.ownerRealmGeneration,ResizeObserverCtor=ownerWindow.ResizeObserver;if(ResizeObserverCtor){const observer=new ResizeObserverCtor(entries=>{if(this.containerResizeObserver!==observer||this.scrollListenerTarget!==scrollTarget||!this.isCurrentOwnerWork(ownerDocument,generation))return;if(this.beginResizeDelivery(),external){this.syncExternalScrollMetrics();return}const entry=entries[0];entry&&(this.viewportHeight=entry.borderBoxSize?.[0]?.blockSize??entry.contentRect.height)});this.containerResizeObserver=observer,observer.observe(base),external&&!isWindowScroller(external)&&observer.observe(external)}scrollTarget.addEventListener("scroll",this.onScroll,{passive:!0}),scrollTarget.addEventListener("wheel",this.onUserScrollIntent,{passive:!0}),scrollTarget.addEventListener("pointerdown",this.onUserScrollIntent,{passive:!0}),scrollTarget.addEventListener("touchstart",this.onUserScrollIntent,{passive:!0}),scrollTarget.addEventListener("keydown",this.onUserScrollIntent),this.scrollListenerTarget=scrollTarget,external&&isWindowScroller(external)&&(external.addEventListener("resize",this.onExternalViewportResize,{passive:!0}),this.viewportResizeTarget=external),ownerWindow.queueMicrotask(()=>{if(this.scrollListenerTarget!==scrollTarget||this.scrollContainer!==base||!this.isCurrentOwnerWork(ownerDocument,generation))return;const metrics=this.readScrollMetrics();metrics&&(this.viewportHeight!==metrics.viewportHeight&&(this.viewportHeight=metrics.viewportHeight),this.containerScrollTop!==metrics.scrollTop&&(this.containerScrollTop=metrics.scrollTop))})}detachContainerListeners(){const viewportTarget=this.viewportResizeTarget;viewportTarget&&(viewportTarget.removeEventListener("resize",this.onExternalViewportResize),this.viewportResizeTarget=void 0);const target=this.scrollListenerTarget;target&&(target.removeEventListener("scroll",this.onScroll),target.removeEventListener("wheel",this.onUserScrollIntent),target.removeEventListener("pointerdown",this.onUserScrollIntent),target.removeEventListener("touchstart",this.onUserScrollIntent),target.removeEventListener("keydown",this.onUserScrollIntent))}applyPendingRowMeasurements(){if(this.pendingRowMeasurements.size===0)return;const observations=[...this.pendingRowMeasurements];if(this.pendingRowMeasurements.clear(),this.fixedRowHeight!=null)return;const base=this.scrollContainer,oldScrollTop=this.readScrollMetrics()?.rawScrollTop??this.containerScrollTop;let scrollAdjustment=0,changed=!1;for(const[key,{index,height}]of observations){const prev=this.measuredHeights.get(key);if(prev===void 0||Math.abs(prev-height)>.5){const oldBottom=this.rowBottomAt(index);this.measuredHeights.set(key,height),this.measuredIndices.set(key,index);const oldHeight=prev??DEFAULT_ROW_ESTIMATE_PX;oldBottom<=oldScrollTop&&(scrollAdjustment+=height-oldHeight),changed=!0}}if(changed){if(this.indexedMeasurementIndexDirty=!0,base&&scrollAdjustment!==0){const nextScrollTop=oldScrollTop+scrollAdjustment;this.applyScrollPosition(nextScrollTop),this.containerScrollTop=Math.max(0,nextScrollTop),this.pendingScrollTop=null}this.offsetsDirty=!0,this.measurementGeneration+=1,this.requestUpdate()}}applyPendingGroupMeasurements(){if(this.pendingGroupMeasurements.size===0)return;const observations=[...this.pendingGroupMeasurements];this.pendingGroupMeasurements.clear();const base=this.scrollContainer,oldScrollTop=this.readScrollMetrics()?.rawScrollTop??this.containerScrollTop;let scrollAdjustment=0,changed=!1;for(const[index,height]of observations){if(!this.normalizedGroupByIndex.has(index))continue;const previous=this.measuredGroupHeights.get(index)??DEFAULT_GROUP_ESTIMATE_PX;if(Math.abs(previous-height)<=.5)continue;const oldRowTop=this.offsetAt(index);this.measuredGroupHeights.set(index,height),oldRowTop<=oldScrollTop&&(scrollAdjustment+=height-previous),changed=!0}if(changed){if(base&&scrollAdjustment!==0){const nextScrollTop=oldScrollTop+scrollAdjustment;this.applyScrollPosition(nextScrollTop),this.containerScrollTop=Math.max(0,nextScrollTop),this.pendingScrollTop=null}this.offsetsDirty=!0,this.measurementGeneration+=1,this.requestUpdate()}}get defersMeasurementApplication(){return this.inResizeDelivery&&this.externalScroller!==void 0}beginResizeDelivery(){if(this.inResizeDelivery=!0,this.rowObserveRafId!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected){this.inResizeDelivery=!1;return}const generation=this.ownerRealmGeneration,handle=ownerWindow.requestAnimationFrame(()=>{if(this.rowObserveRafId!==handle||this.rowObserveRafOwner!==ownerWindow||this.rowObserveRafDocument!==ownerDocument||!this.isCurrentOwnerWork(ownerDocument,generation))return;this.rowObserveRafId=void 0,this.rowObserveRafOwner=void 0,this.rowObserveRafDocument=void 0,this.inResizeDelivery=!1;const ro=this.rowResizeObserver;for(const[identity,el]of this.deferredRowObservations)ro&&this.observedRows.get(identity)===el&&ro.observe(el);this.deferredRowObservations.clear();const groupObserver=this.groupResizeObserver;for(const[index,el]of this.deferredGroupObservations)groupObserver&&this.observedGroups.get(index)===el&&groupObserver.observe(el);this.deferredGroupObservations.clear(),this.applyPendingRowMeasurements(),this.applyPendingGroupMeasurements()});this.rowObserveRafId=handle,this.rowObserveRafOwner=ownerWindow,this.rowObserveRafDocument=ownerDocument}syncRowObservers(){const ro=this.rowResizeObserver;if(!ro)return;if(this.fixedRowHeight!=null){for(const el of this.observedRows.values())ro.unobserve(el);this.observedRows.clear(),this.deferredRowObservations.clear();return}const current=new Map;this.renderRoot.querySelectorAll('[part="row"]').forEach(el=>{const index=Number(el.getAttribute("data-row-index"));if(!Number.isInteger(index)||index<0||index>=this.itemCount)return;const identity=this.identityAt(index);current.set(identity,el),this.observedRowKeys.set(el,identity),this.observedRowIndices.set(el,index)});for(const[identity,el]of this.observedRows)current.get(identity)!==el&&(ro.unobserve(el),this.observedRows.delete(identity),this.deferredRowObservations.delete(identity));for(const[identity,el]of current)this.observedRows.has(identity)||(this.observedRows.set(identity,el),this.inResizeDelivery?this.deferredRowObservations.set(identity,el):ro.observe(el))}syncGroupObservers(){const observer=this.groupResizeObserver;if(!observer)return;const current=new Map;this.renderRoot.querySelectorAll('[part="group"][data-group-index]').forEach(marker=>{const index=Number(marker.dataset.groupIndex);!Number.isInteger(index)||!this.normalizedGroupByIndex.has(index)||(current.set(index,marker),this.observedGroupIndices.set(marker,index))});for(const[index,marker]of this.observedGroups)current.get(index)!==marker&&(observer.unobserve(marker),this.observedGroups.delete(index),this.deferredGroupObservations.delete(index));for(const[index,marker]of current)this.observedGroups.has(index)||(this.observedGroups.set(index,marker),this.inResizeDelivery?this.deferredGroupObservations.set(index,marker):observer.observe(marker))}get stickyInset(){return this.renderStickyGroup?this.stickyHeight:0}scrollActiveIntoView(){const index=this.activeIndex;if(index<0)return;const behavior=prefersReducedMotion(this)?"auto":"smooth";this.performScrollTo(index,"auto",behavior)&&this.beginPendingScrollCorrection(index,"auto",behavior,this.activeItemId)}scrollToIndex(index,options){const n=this.itemCount;if(n===0)return;const clamped=finiteInteger(index,0,0,n-1),align=options?.align??"auto",behavior=prefersReducedMotion(this)?"auto":options?.behavior??"smooth";this.performScrollTo(clamped,align,behavior)?this.beginPendingScrollCorrection(clamped,align,behavior):this.pendingScrollCorrection=void 0}hasUnmeasuredGroupThrough(index){return this.normalizedGroups.some(group=>group.startIndex<=index&&group.label!==""&&!this.measuredGroupHeights.has(group.startIndex))}beginPendingScrollCorrection(index,align,behavior,activeItemId){if(this.fixedRowHeight!=null&&!this.hasUnmeasuredGroupThrough(index)){this.pendingScrollCorrection=void 0;return}this.pendingScrollCorrection={identity:this.identityAt(index),index,align,behavior,source:this.effectiveSource,keyFunction:this.keyFunction,activeItemId:activeItemId===""?void 0:activeItemId,lastMeasurementGeneration:this.measurementGeneration}}performScrollTo(index,align,behavior){const metrics=this.readScrollMetrics();if(!metrics)return!1;const inset=this.stickyInset,top=this.offsetAt(index),bottom=this.rowBottomAt(index),viewTop=metrics.rawScrollTop,viewBottom=viewTop+metrics.viewportHeight;let target=null;return align==="start"?target=top-inset:align==="end"?target=bottom-metrics.viewportHeight:top-inset<viewTop?target=top-inset:bottom>viewBottom&&(target=bottom-metrics.viewportHeight),target===null?!1:(this.applyScrollPosition(target,behavior),!0)}maybeCorrectPendingScroll(){const pending=this.pendingScrollCorrection;if(!pending||pending.lastMeasurementGeneration>=this.measurementGeneration)return;if(pending.source!==this.effectiveSource||pending.keyFunction!==this.keyFunction||pending.activeItemId!==void 0&&!Object.is(pending.activeItemId,this.activeItemId)){this.pendingScrollCorrection=void 0;return}const index=pending.activeItemId!==void 0?this.activeIndex:isIndexedSource(this.effectiveSource)?pending.index:this.rowIdentities.indexOf(pending.identity);if(index<0||index>=this.itemCount||this.identityAt(index)!==pending.identity){this.pendingScrollCorrection=void 0;return}this.performScrollTo(index,pending.align,pending.behavior),pending.index=index,pending.lastMeasurementGeneration=this.measurementGeneration,(this.fixedRowHeight!=null||this.measuredHeights.has(pending.identity))&&!this.hasUnmeasuredGroupThrough(index)&&(this.pendingScrollCorrection=void 0)}emitRangeChangeIfNeeded(){if(this.visibleEnd<this.visibleStart){this.lastEmittedStart=-1,this.lastEmittedEnd=-1;return}this.visibleStart===this.lastEmittedStart&&this.visibleEnd===this.lastEmittedEnd||(this.lastEmittedStart=this.visibleStart,this.lastEmittedEnd=this.visibleEnd,this.emit("lr-visible-range-change",{start:this.visibleStart,end:this.visibleEnd}))}maybeFireLoadMore(){const n=this.itemCount;if(!(n>0&&this.visibleEnd>=n-1)){this.loadMoreArmed=!0;return}!this.hasMore||this.loading||!this.loadMoreArmed||(this.loadMoreArmed=!1,this.emit("lr-load-more"))}get projectionActive(){return!this.projectionDeferred&&this.rowProjection==="light"}rowSlotName(identity){return`${tag("virtual-list")}-row-${identity}`}syncRowProjection(){if(!this.projectionActive||!this.isConnected){this.projectionAnchor!==void 0&&this.teardownRowProjection();return}const anchor=this.ensureProjectionAnchor();this.projectionPart=render(this.renderProjectedRows(),this,{renderBefore:anchor,host:this})}ensureProjectionAnchor(){const existing=this.projectionAnchor;if(existing!==void 0&&existing.parentNode===this&&existing.ownerDocument===this.ownerDocument)return existing;existing!==void 0&&this.teardownRowProjection();const anchor=this.ownerDocument.createComment(PROJECTION_ANCHOR_MARKER);return this.append(anchor),this.projectionAnchor=anchor,this.projectionPart=void 0,anchor}teardownRowProjection(){const anchor=this.projectionAnchor,part=this.projectionPart;if(this.projectionAnchor=void 0,this.projectionPart=void 0,anchor!==void 0){if(part!==void 0){const container=anchor.parentNode;container!==null&&render(nothing,container,{renderBefore:anchor,host:this});const start=part.startNode;start?.parentNode?.removeChild(start)}anchor.parentNode?.removeChild(anchor)}}renderProjectedRows(){return repeat(this.renderedWindow,w=>w.identity,w=>staticHtml`<div
           ${ROW_ATTRIBUTE_STATIC}
           slot=${this.rowSlotName(w.identity)}
           data-row-index=${w.index}

package/dist/components/media/av-player/av-player.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";const styles=css` :host { display: block; min-inline-size: 0; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-av-player-transcript-height: var(--lr-size-16rem); } [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-s); min-inline-size: 0; max-inline-size: 100%; } [part='media'] { inline-size: 100%; border-radius: var(--lr-radius); background: var(--lr-color-surface-raised); } [part='toolbar'] { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-space-xs); } .rate-select-wrapper { position: relative; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; } [part='rate-select'] { min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; appearance: none; padding-inline: var(--lr-space-s) var(--lr-space-l); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; transition: background-color var(--lr-transition-fast); } @container (max-inline-size: 20rem) { [part='rate-select'] { max-inline-size: var(--lr-size-8rem); } } [part='rate-select'] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part='rate-select']:hover { background: var(--lr-color-brand-quiet); } [part='rate-select']:active { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='rate-select']:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } .rate-select-chevron { position: absolute; inset-inline-end: var(--lr-space-xs); display: inline-flex; color: var(--lr-color-text-quiet); line-height: var(--lr-line-height-none); pointer-events: none; } .rate-select-chevron svg { transform: rotate(90deg); } .timeline-positioner { position: relative; min-inline-size: 0; max-inline-size: 100%; } [part='timeline'] { block-size: var(--lr-size-3rem); direction: ltr; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface-raised); cursor: pointer; transition: border-color var(--lr-transition-fast), background-color var(--lr-transition-fast); } [part='timeline']:hover:where(:not([aria-disabled='true'])) { border-color: var(--lr-color-brand); } [part='timeline']:active:where(:not([aria-disabled='true'])) { border-color: var(--lr-color-brand); background: color-mix(in oklab, var(--lr-color-surface-raised), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='timeline']:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part='timeline'][aria-disabled='true'] { cursor: default; } [part='timeline'] canvas { display: block; inline-size: 100%; block-size: 100%; } [part='timeline-marker'] { position: absolute; inset-block: 0; border: none; padding: 0; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; --_lr-av-player-marker-fill: var(--lr-av-player-marker-bg, color-mix(in srgb, var(--lr-color-brand) 35%, transparent)); background: var(--lr-av-player-marker-fill, var(--_lr-av-player-marker-fill)); transition: background-color var(--lr-transition-fast); } .timeline-markers { position: absolute; inset: 0; direction: ltr; pointer-events: none; } .timeline-markers [part='timeline-marker'] { pointer-events: auto; } [part='timeline-marker']:hover { background: color-mix(in oklab, var(--lr-av-player-marker-fill, var(--_lr-av-player-marker-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)); } [part='timeline-marker']:active { background: color-mix(in oklab, var(--lr-av-player-marker-fill, var(--_lr-av-player-marker-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='timeline-marker'][data-tone='success'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-success-bg, color-mix(in srgb, var(--lr-color-success) 35%, transparent)); } [part='timeline-marker'][data-tone='warning'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-warning-bg, color-mix(in srgb, var(--lr-color-warning) 35%, transparent)); } [part='timeline-marker'][data-tone='danger'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-danger-bg, color-mix(in srgb, var(--lr-color-danger) 35%, transparent)); } [part='timeline-marker'][data-tone='neutral'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-neutral-bg, color-mix(in srgb, var(--lr-color-text) 25%, transparent)); } [part='timeline-marker'][data-active] { outline: var(--lr-border-width-medium) solid var(--lr-av-player-marker-active-color, var(--lr-color-brand)); outline-offset: calc(-1 * var(--lr-border-width-medium)); } [part='timeline-marker']:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part='transcript'] { --lr-virtual-list-height: var(--lr-av-player-transcript-height, var(--_lr-av-player-transcript-height)); } lr-virtual-list::part(cue) { display: block; inline-size: 100%; text-align: start; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: transparent; cursor: pointer; color: var(--lr-color-text); font: inherit; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; transition: background-color var(--lr-transition-fast); } lr-virtual-list::part(cue):hover { background: var(--lr-av-player-cue-hover-bg, var(--lr-color-brand-quiet)); } lr-virtual-list::part(cue):active { background: color-mix(in oklab, var(--lr-av-player-cue-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } lr-virtual-list::part(cue-current) { background: var(--lr-av-player-cue-current-bg, var(--lr-color-brand-quiet)); } lr-virtual-list::part(cue-match) { outline: var(--lr-border-width-thin) dashed var(--lr-color-warning); } lr-virtual-list::part(cue-active-match) { outline: var(--lr-border-width-medium) solid var(--lr-av-player-cue-active-match-color, var(--lr-color-warning)); } lr-virtual-list::part(cue):focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } lr-virtual-list::part(cue-time) { color: var(--lr-color-text); font-size: var(--lr-font-size-xs); margin-inline-end: var(--lr-space-2xs); } lr-virtual-list::part(cue-speaker) { font-weight: var(--lr-font-weight-semibold); margin-inline-end: var(--lr-space-2xs); } lr-virtual-list::part(cue-speaker), lr-virtual-list::part(cue-text) { min-inline-size: 0; overflow-wrap: anywhere; } [part='error'] { color: var(--lr-color-danger); padding: var(--lr-space-l); text-align: center; } @media (forced-colors: active) { [part='rate-select']:hover { border-style: double; outline: var(--lr-border-width-thin) solid Highlight; } [part='timeline-marker'] { border: var(--lr-border-width-thin) solid CanvasText; forced-color-adjust: auto; } [part='timeline-marker'][data-tone='success'] { border-style: double; } [part='timeline-marker'][data-tone='warning'] { border-style: dashed; } [part='timeline-marker'][data-tone='danger'] { border-style: dotted; } [part='timeline-marker'][data-tone='neutral'] { border-style: solid; outline: var(--lr-border-width-thin) dashed CanvasText; outline-offset: calc(-1 * var(--lr-border-width-medium)); } [part='timeline-marker'][data-active] { outline: var(--lr-border-width-medium) solid Highlight; } } ${glassSurface("[part='toolbar']",css`var(--lr-color-surface)`,css`transparent`)} :host([controls-surface='clear']) [part='toolbar'] { background-image: linear-gradient( color-mix(in srgb, var(--lr-mask-opaque) calc(max(var(--_lr-media-clear-scrim-start, 1), var(--_lr-preference-glass-opacity, 0)) * 100%), transparent), color-mix(in srgb, var(--lr-mask-opaque) calc(max(var(--_lr-media-clear-scrim-end, 1), var(--_lr-preference-glass-opacity, 0)) * 100%), transparent) ); background-color: var(--_lr-media-clear-fill, transparent); border-radius: var(--lr-radius); padding: var(--lr-space-s); color: var(--_lr-media-clear-text, var(--lr-color-on-strong-overlay)); --lr-focus-ring-color: var(--_lr-media-clear-text, var(--lr-color-on-strong-overlay)); --lr-focus-ring: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); } :host([controls-surface='clear']) [part='rate-select'] { color: inherit; background: transparent; border-color: var(--_lr-media-clear-text, var(--lr-color-border)); } :host([controls-surface='clear']) .rate-select-chevron { color: inherit; } :host([controls-surface='clear']) [part='rate-select']:where(:hover, :active) { background: var(--_lr-media-clear-fill, var(--lr-color-brand-quiet)); } :host([controls-surface='clear']) [part='rate-select'] option { color: var(--lr-color-text); background: var(--lr-color-surface); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { :host([controls-surface='clear']) [part='toolbar'] { background: Canvas; color: CanvasText; --lr-focus-ring-color: Highlight; } :host([controls-surface='clear']) [part='rate-select'] { border-color: ButtonText; } } `;export{styles};
+import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";const styles=css` :host { display: block; min-inline-size: 0; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-av-player-transcript-height: var(--lr-size-16rem); } [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-s); min-inline-size: 0; max-inline-size: 100%; } [part='media'] { inline-size: 100%; border-radius: var(--lr-radius); background: var(--lr-color-surface-raised); } [part='toolbar'] { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-space-xs); } .rate-select-wrapper { position: relative; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; } [part='rate-select'] { min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; appearance: none; padding-inline: var(--lr-space-s) var(--lr-space-l); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; transition: background-color var(--lr-transition-fast); } @container (max-inline-size: 20rem) { [part='rate-select'] { max-inline-size: var(--lr-size-8rem); } } [part='rate-select'] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part='rate-select']:hover { background: var(--lr-color-brand-quiet); } [part='rate-select']:active { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='rate-select']:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } .rate-select-chevron { position: absolute; inset-inline-end: var(--lr-space-xs); display: inline-flex; color: var(--lr-color-text-quiet); line-height: var(--lr-line-height-none); pointer-events: none; } .rate-select-chevron svg { transform: rotate(90deg); } .timeline-positioner { position: relative; min-inline-size: 0; max-inline-size: 100%; } [part='timeline'] { block-size: var(--lr-size-3rem); direction: ltr; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface-raised); cursor: pointer; transition: border-color var(--lr-transition-fast), background-color var(--lr-transition-fast); } [part='timeline']:hover:where(:not([aria-disabled='true'])) { border-color: var(--lr-color-brand); } [part='timeline']:active:where(:not([aria-disabled='true'])) { border-color: var(--lr-color-brand); background: color-mix(in oklab, var(--lr-color-surface-raised), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='timeline']:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part='timeline'][aria-disabled='true'] { cursor: default; } [part='timeline'] canvas { display: block; inline-size: 100%; block-size: 100%; } [part='timeline-marker'] { position: absolute; inset-block: 0; border: none; padding: 0; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; --_lr-av-player-marker-fill: var(--lr-av-player-marker-bg, color-mix(in srgb, var(--lr-color-brand) 35%, transparent)); background: var(--lr-av-player-marker-fill, var(--_lr-av-player-marker-fill)); transition: background-color var(--lr-transition-fast); } .timeline-markers { position: absolute; inset: 0; direction: ltr; pointer-events: none; } .timeline-markers [part='timeline-marker'] { pointer-events: auto; } [part='timeline-marker']:hover { background: color-mix(in oklab, var(--lr-av-player-marker-fill, var(--_lr-av-player-marker-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-hover)); } [part='timeline-marker']:active { background: color-mix(in oklab, var(--lr-av-player-marker-fill, var(--_lr-av-player-marker-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='timeline-marker'][data-tone='success'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-success-bg, color-mix(in srgb, var(--lr-color-success) 35%, transparent)); } [part='timeline-marker'][data-tone='warning'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-warning-bg, color-mix(in srgb, var(--lr-color-warning) 35%, transparent)); } [part='timeline-marker'][data-tone='danger'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-danger-bg, color-mix(in srgb, var(--lr-color-danger) 35%, transparent)); } [part='timeline-marker'][data-tone='neutral'] { --_lr-av-player-marker-fill: var(--lr-av-player-marker-neutral-bg, color-mix(in srgb, var(--lr-color-text) 25%, transparent)); } [part='timeline-marker'][data-active] { outline: var(--lr-border-width-medium) solid var(--lr-av-player-marker-active-color, var(--lr-color-brand)); outline-offset: calc(-1 * var(--lr-border-width-medium)); } [part='timeline-marker']:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part='transcript'] { --lr-virtual-list-height: var(--lr-av-player-transcript-height, var(--_lr-av-player-transcript-height)); } lr-virtual-list::part(cue) { display: block; inline-size: 100%; text-align: start; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: transparent; cursor: pointer; color: var(--lr-color-text); font: inherit; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; transition: background-color var(--lr-transition-fast); } lr-virtual-list::part(cue):hover { background: var(--lr-av-player-cue-hover-bg, var(--lr-color-brand-quiet)); } lr-virtual-list::part(cue):active { background: color-mix(in oklab, var(--lr-av-player-cue-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } lr-virtual-list::part(cue-current) { background: var(--lr-av-player-cue-current-bg, var(--lr-color-brand-quiet)); } lr-virtual-list::part(cue-match) { outline: var(--lr-border-width-thin) dashed var(--lr-color-warning); } lr-virtual-list::part(cue-active-match) { outline: var(--lr-border-width-medium) solid var(--lr-av-player-cue-active-match-color, var(--lr-color-warning)); } lr-virtual-list::part(cue):focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * max(var(--lr-focus-ring-width), var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))); } lr-virtual-list::part(cue-time) { color: var(--lr-color-text); font-size: var(--lr-font-size-xs); margin-inline-end: var(--lr-space-2xs); } lr-virtual-list::part(cue-speaker) { font-weight: var(--lr-font-weight-semibold); margin-inline-end: var(--lr-space-2xs); } lr-virtual-list::part(cue-speaker), lr-virtual-list::part(cue-text) { min-inline-size: 0; overflow-wrap: anywhere; } [part='error'] { color: var(--lr-color-danger); padding: var(--lr-space-l); text-align: center; } @media (forced-colors: active) { [part='rate-select']:hover { border-style: double; outline: var(--lr-border-width-thin) solid Highlight; } [part='timeline-marker'] { border: var(--lr-border-width-thin) solid CanvasText; forced-color-adjust: auto; } [part='timeline-marker'][data-tone='success'] { border-style: double; } [part='timeline-marker'][data-tone='warning'] { border-style: dashed; } [part='timeline-marker'][data-tone='danger'] { border-style: dotted; } [part='timeline-marker'][data-tone='neutral'] { border-style: solid; outline: var(--lr-border-width-thin) dashed CanvasText; outline-offset: calc(-1 * var(--lr-border-width-medium)); } [part='timeline-marker'][data-active] { outline: var(--lr-border-width-medium) solid Highlight; } } ${glassSurface("[part='toolbar']",css`var(--lr-color-surface)`,css`transparent`)} :host([controls-surface='clear']) [part='toolbar'] { background-image: linear-gradient( color-mix(in srgb, var(--lr-mask-opaque) calc(max(var(--_lr-media-clear-scrim-start, 1), var(--_lr-preference-glass-opacity, 0)) * 100%), transparent), color-mix(in srgb, var(--lr-mask-opaque) calc(max(var(--_lr-media-clear-scrim-end, 1), var(--_lr-preference-glass-opacity, 0)) * 100%), transparent) ); background-color: var(--_lr-media-clear-fill, transparent); border-radius: var(--lr-radius); padding: var(--lr-space-s); color: var(--_lr-media-clear-text, var(--lr-color-on-strong-overlay)); --lr-focus-ring-color: var(--_lr-media-clear-text, var(--lr-color-on-strong-overlay)); --lr-focus-ring: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); } :host([controls-surface='clear']) [part='rate-select'] { color: inherit; background: transparent; border-color: var(--_lr-media-clear-text, var(--lr-color-border)); } :host([controls-surface='clear']) .rate-select-chevron { color: inherit; } :host([controls-surface='clear']) [part='rate-select']:where(:hover, :active) { background: var(--_lr-media-clear-fill, var(--lr-color-brand-quiet)); } :host([controls-surface='clear']) [part='rate-select'] option { color: var(--lr-color-text); background: var(--lr-color-surface); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { :host([controls-surface='clear']) [part='toolbar'] { background: Canvas; color: CanvasText; --lr-focus-ring-color: Highlight; } :host([controls-surface='clear']) [part='rate-select'] { border-color: ButtonText; } } `;export{styles};

package/dist/components/media/image-viewer/image-viewer.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{min-inline-size:0;display:block}[part=base]{gap:var(--lr-space-s);flex-direction:column;min-inline-size:0;max-inline-size:100%;display:flex}[part=toolbar]{align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;display:flex}.fit-control-wrapper{align-items:center;min-inline-size:0;max-inline-size:100%;display:inline-flex;position:relative}[part=fit-control],[part=rotate-button],[part=annotate-toggle]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;cursor:pointer}[part=fit-control]:disabled,[part=rotate-button]:disabled,[part=annotate-toggle]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=fit-control]{appearance:none;max-inline-size:100%;padding-inline:var(--lr-space-s) var(--lr-space-l);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=fit-control] option{background:var(--lr-color-surface);color:var(--lr-color-text)}[part=fit-control]:where(:not(:disabled)):hover,[part=rotate-button]:where(:not(:disabled)):hover,[part=annotate-toggle]:where(:not(:disabled)):hover{background:var(--lr-color-brand-quiet)}[part=fit-control]:where(:not(:disabled)):active,[part=rotate-button]:where(:not(:disabled)):active,[part=annotate-toggle]:where(:not(:disabled)):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=fit-control]:focus-visible,[part=rotate-button]:focus-visible,[part=annotate-toggle]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}.fit-control-chevron{color:var(--lr-color-text-quiet);line-height:var(--lr-line-height-none);pointer-events:none;display:inline-flex;position:absolute;inset-inline-end:var(--lr-space-xs)}.fit-control-chevron svg{transform:rotate(90deg)}[part=annotate-toggle][aria-pressed=true]{background:var(--lr-image-viewer-annotate-active-bg,var(--lr-color-brand-quiet));border-color:var(--lr-image-viewer-annotate-active-border,var(--lr-color-brand))}[part=annotate-toggle][aria-pressed=true]:where(:not(:disabled)):active{background:color-mix(in oklab, var(--lr-image-viewer-annotate-active-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=rotation-frame]{max-inline-size:100%;display:inline-block;position:relative}:host([fit=actual]) [part=rotation-frame]{max-inline-size:none}[part=rotation-frame][data-measured] [part=image-wrapper]{position:absolute;top:50%;left:50%}[part=image-wrapper]{max-inline-size:100%;transition:transform var(--lr-transition-base);outline:none;display:inline-block;position:relative}[part=image-wrapper]:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), var(--lr-focus-ring-width) + var(--lr-focus-ring-offset)))}:host([fit=actual]) [part=image-wrapper]{max-inline-size:none}@media (prefers-reduced-motion:reduce){[part=image-wrapper]{transition:none}}:host([fit=contain]) [part=frame]::part(content),:host([fit=width]) [part=frame]::part(content){inline-size:100%}[part=image]{display:block}:host(:not([fit=actual])) [part=image]{max-inline-size:100%}:host([fit=width]) [part=image]{block-size:auto;inline-size:100%}:host([fit=contain]) [part=image]{max-block-size:var(--lr-pan-zoom-min-block-size,var(--lr-size-10rem));object-fit:contain;block-size:auto}[part=highlight-layer]{position:absolute;inset:0}[part=highlight]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-medium) solid var(--lr-image-viewer-highlight-border,var(--lr-color-brand));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-bg,color-mix(in srgb, var(--lr-color-brand) 20%, transparent));background:var(--lr-image-viewer-highlight-fill,var(--_lr-image-viewer-highlight-fill));cursor:pointer;padding:0;position:absolute}[part=highlight]:where([data-tone=success]){border-style:double;border-color:var(--lr-image-viewer-highlight-success-border,var(--lr-color-success));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-success-bg,color-mix(in srgb, var(--lr-color-success) 20%, transparent))}[part=highlight]:where([data-tone=warning]){border-style:dashed;border-color:var(--lr-image-viewer-highlight-warning-border,var(--lr-color-warning));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-warning-bg,color-mix(in srgb, var(--lr-color-warning) 20%, transparent))}[part=highlight]:where([data-tone=danger]){border-style:dotted;border-color:var(--lr-image-viewer-highlight-danger-border,var(--lr-color-danger));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-danger-bg,color-mix(in srgb, var(--lr-color-danger) 20%, transparent))}[part=highlight]:where([data-tone=neutral]){border-style:groove;border-color:var(--lr-image-viewer-highlight-neutral-border,var(--lr-color-border));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-neutral-bg,color-mix(in srgb, var(--lr-color-text) 12%, transparent))}[part=highlight]:where([data-active]){border-width:var(--lr-image-viewer-highlight-active-border-width,var(--lr-border-width-thick));outline:var(--lr-image-viewer-highlight-active-outline-width,var(--lr-focus-ring-width)) solid var(--lr-image-viewer-highlight-active-color,var(--lr-color-brand));outline-offset:var(--lr-image-viewer-highlight-active-outline-offset,var(--lr-focus-ring-offset))}[part=highlight]:hover{background:color-mix(in oklab, var(--lr-image-viewer-highlight-fill,var(--_lr-image-viewer-highlight-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=highlight]:active{background:color-mix(in oklab, var(--lr-image-viewer-highlight-fill,var(--_lr-image-viewer-highlight-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=highlight]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=highlight-label]{inset-block-start:calc(var(--lr-size-1-5em) * -1);font-size:var(--lr-font-size-xs);color:var(--lr-color-text);background:var(--lr-color-surface);padding-inline:var(--lr-space-2xs);max-inline-size:min(var(--lr-size-16rem), 100%);white-space:normal;overflow-wrap:anywhere;position:absolute;left:0}[part=annotation-box]{border:var(--lr-border-width-medium) dashed var(--lr-image-viewer-annotation-box-border,var(--lr-color-brand));background:var(--lr-image-viewer-annotation-box-bg,color-mix(in srgb, var(--lr-color-brand) 15%, transparent));pointer-events:none;position:absolute}.reveal-target{pointer-events:none;position:absolute}@media (forced-colors:active){[part=fit-control]:hover:not(:disabled),[part=rotate-button]:hover:not(:disabled),[part=annotate-toggle]:hover:not(:disabled){outline:var(--lr-border-width-thin) dashed Highlight;outline-offset:calc(-1 * var(--lr-border-width-thin))}[part=fit-control]:active:not(:disabled),[part=rotate-button]:active:not(:disabled),[part=annotate-toggle]:active:not(:disabled){outline-style:double;outline-width:var(--lr-border-width-medium)}[part=annotate-toggle][aria-pressed=true]{border-style:double;border-color:highlight}[part=highlight]{forced-color-adjust:none;background:0 0;border-color:canvastext}[part=highlight]:where([data-active]){outline-color:highlight}}.empty-note,[part=error]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-md-sm);text-align:center;padding:var(--lr-space-l);margin:0}[part=error]{color:var(--lr-color-danger)}`;export{styles};
+import{css}from"lit";const styles=css`:host{min-inline-size:0;display:block}[part=base]{gap:var(--lr-space-s);flex-direction:column;min-inline-size:0;max-inline-size:100%;display:flex}[part=toolbar]{align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;display:flex}.fit-control-wrapper{align-items:center;min-inline-size:0;max-inline-size:100%;display:inline-flex;position:relative}[part=fit-control],[part=rotate-button],[part=annotate-toggle]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;cursor:pointer}[part=fit-control]:disabled,[part=rotate-button]:disabled,[part=annotate-toggle]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=fit-control]{appearance:none;max-inline-size:100%;padding-inline:var(--lr-space-s) var(--lr-space-l);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=fit-control] option{background:var(--lr-color-surface);color:var(--lr-color-text)}[part=fit-control]:where(:not(:disabled)):hover,[part=rotate-button]:where(:not(:disabled)):hover,[part=annotate-toggle]:where(:not(:disabled)):hover{background:var(--lr-color-brand-quiet)}[part=fit-control]:where(:not(:disabled)):active,[part=rotate-button]:where(:not(:disabled)):active,[part=annotate-toggle]:where(:not(:disabled)):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=fit-control]:focus-visible,[part=rotate-button]:focus-visible,[part=annotate-toggle]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}.fit-control-chevron{color:var(--lr-color-text-quiet);line-height:var(--lr-line-height-none);pointer-events:none;display:inline-flex;position:absolute;inset-inline-end:var(--lr-space-xs)}.fit-control-chevron svg{transform:rotate(90deg)}[part=annotate-toggle][aria-pressed=true]{background:var(--lr-image-viewer-annotate-active-bg,var(--lr-color-brand-quiet));border-color:var(--lr-image-viewer-annotate-active-border,var(--lr-color-brand))}[part=annotate-toggle][aria-pressed=true]:where(:not(:disabled)):active{background:color-mix(in oklab, var(--lr-image-viewer-annotate-active-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=rotation-frame]{max-inline-size:100%;display:inline-block;position:relative}:host([fit=actual]) [part=rotation-frame]{max-inline-size:none}[part=rotation-frame][data-measured] [part=image-wrapper]{position:absolute;top:50%;left:50%}[part=image-wrapper]{max-inline-size:100%;transition:transform var(--lr-transition-base);outline:none;display:inline-block;position:relative}[part=image-wrapper]:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * max(var(--lr-focus-ring-width) + 2 * var(--lr-border-width-thin), var(--lr-focus-ring-width) + var(--lr-focus-ring-offset)))}:host([fit=actual]) [part=image-wrapper]{max-inline-size:none}@media (prefers-reduced-motion:reduce){[part=image-wrapper]{transition:none}}:host([fit=contain]) [part=frame]::part(content),:host([fit=width]) [part=frame]::part(content){inline-size:100%}[part=image]{display:block}:host(:not([fit=actual])) [part=image]{max-inline-size:100%}:host([fit=width]) [part=image]{block-size:auto;inline-size:100%}:host([fit=contain]) [part=image]{max-block-size:var(--lr-pan-zoom-min-block-size,var(--lr-size-10rem));object-fit:contain;block-size:auto}[part=highlight-layer]{position:absolute;inset:0}[part=highlight]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-medium) solid var(--lr-image-viewer-highlight-border,var(--lr-color-brand));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-bg,color-mix(in srgb, var(--lr-color-brand) 20%, transparent));background:var(--lr-image-viewer-highlight-fill,var(--_lr-image-viewer-highlight-fill));cursor:pointer;padding:0;position:absolute}[part=highlight]:where([data-tone=success]){border-style:double;border-color:var(--lr-image-viewer-highlight-success-border,var(--lr-color-success));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-success-bg,color-mix(in srgb, var(--lr-color-success) 20%, transparent))}[part=highlight]:where([data-tone=warning]){border-style:dashed;border-color:var(--lr-image-viewer-highlight-warning-border,var(--lr-color-warning));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-warning-bg,color-mix(in srgb, var(--lr-color-warning) 20%, transparent))}[part=highlight]:where([data-tone=danger]){border-style:dotted;border-color:var(--lr-image-viewer-highlight-danger-border,var(--lr-color-danger));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-danger-bg,color-mix(in srgb, var(--lr-color-danger) 20%, transparent))}[part=highlight]:where([data-tone=neutral]){border-style:groove;border-color:var(--lr-image-viewer-highlight-neutral-border,var(--lr-color-border));--_lr-image-viewer-highlight-fill:var(--lr-image-viewer-highlight-neutral-bg,color-mix(in srgb, var(--lr-color-text) 12%, transparent))}[part=highlight]:where([data-active]){border-width:var(--lr-image-viewer-highlight-active-border-width,var(--lr-border-width-thick));outline:var(--lr-image-viewer-highlight-active-outline-width,var(--lr-focus-ring-width)) solid var(--lr-image-viewer-highlight-active-color,var(--lr-color-brand));outline-offset:var(--lr-image-viewer-highlight-active-outline-offset,var(--lr-focus-ring-offset))}[part=highlight]:hover{background:color-mix(in oklab, var(--lr-image-viewer-highlight-fill,var(--_lr-image-viewer-highlight-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=highlight]:active{background:color-mix(in oklab, var(--lr-image-viewer-highlight-fill,var(--_lr-image-viewer-highlight-fill)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=highlight]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=highlight-label]{inset-block-start:calc(var(--lr-size-1-5em) * -1);font-size:var(--lr-font-size-xs);color:var(--lr-color-text);background:var(--lr-color-surface);padding-inline:var(--lr-space-2xs);max-inline-size:min(var(--lr-size-16rem), 100%);white-space:normal;overflow-wrap:anywhere;position:absolute;left:0}[part=annotation-box]{border:var(--lr-border-width-medium) dashed var(--lr-image-viewer-annotation-box-border,var(--lr-color-brand));background:var(--lr-image-viewer-annotation-box-bg,color-mix(in srgb, var(--lr-color-brand) 15%, transparent));pointer-events:none;position:absolute}.reveal-target{pointer-events:none;position:absolute}@media (forced-colors:active){[part=fit-control]:hover:not(:disabled),[part=rotate-button]:hover:not(:disabled),[part=annotate-toggle]:hover:not(:disabled){outline:var(--lr-border-width-thin) dashed Highlight;outline-offset:calc(-1 * var(--lr-border-width-thin))}[part=fit-control]:active:not(:disabled),[part=rotate-button]:active:not(:disabled),[part=annotate-toggle]:active:not(:disabled){outline-style:double;outline-width:var(--lr-border-width-medium)}[part=annotate-toggle][aria-pressed=true]{border-style:double;border-color:highlight}[part=highlight]{forced-color-adjust:none;background:0 0;border-color:canvastext}[part=highlight]:where([data-active]){outline-color:highlight}}.empty-note,[part=error]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-md-sm);text-align:center;padding:var(--lr-space-l);margin:0}[part=error]{color:var(--lr-color-danger)}`;export{styles};

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

@@ -588,6 +588,9 @@ readonly sourceId:string|undefined;}>;}
 *
 * No style or tile provider is selected implicitly. Set `mapStyle` explicitly before connection;
 * this prevents a bare component from making an undeclared third-party request.
+* Navigation, scale, attribution and the legend follow the surrounding Glass or Solid treatment.
+* The legend material remains stationary while its public surface scrolls. Opaque accessibility
+* fallbacks preserve native peer controls and map data paint.
 * @status stable
 * @since 4.0.0
 */
@@ -832,7 +835,7 @@ private _appliedGeoJson;private _nextDataLayerId;private nextPointIconId;private
 *  circle and point-icon layers mute independently on different fields. */
 private appliedPointMuting;private appliedPointIcons;private _maplibreModule?;
 /** True only after WebGL2 has been proved in the current owner-document realm. */
-private _webglReady;private _markerInstances;private _markerLabels;private _markerPopupIds;private readonly markerActivationDetails;private _configuredPopups;private _nextPopupId;private peerChromeObserver?;private observedPeerContainer?;private mapResizeObserver?;private observedMapContainer?;private _markerColors;private _connectGeneration;
+private _webglReady;private _markerInstances;private _markerLabels;private _markerPopupIds;private readonly markerActivationDetails;private _configuredPopups;private _nextPopupId;private peerChromeObserver?;private observedPeerContainer?;private mapResizeObserver?;private observedMapContainer?;private _markerColors;private _connectGeneration;private _styleGeneration;
 /** The underlying runtime `maplibregl.Map`, declared through Lyra's peer-neutral common-method
 * subset so consumers do not acquire a mandatory `maplibre-gl` type dependency. Consumers that
 * install the optional peer may explicitly narrow this value to its full `Map` type. */
@@ -1036,7 +1039,7 @@ private resolveDataLayerSourceId;
 /** Removes one previously-applied `dataLayers` entry's source/layers, if present. */
 private removeDataLayer;private applyMarkers;private readonly configuredMarkerElements;private configureMarkerInteraction;private emitMarkerActivation;private get effectiveMapLabel();private popupId;private configurePopupSemantics;private stopObservingMapAllocation;
 /** Keeps MapLibre's canvas allocation synchronized with this component's live container. */
-private observeMapAllocation;private stopObservingPeerChrome;private peerControlsResizeObserver?;private measurePeerControlInsets;
+private observeMapAllocation;private stopObservingPeerChrome;private peerControlsResizeObserver?;private peerControlsResizeFrame?;private schedulePeerControlInsets;private measurePeerControlInsets;
 /** Projects stable Lyra parts onto peer-owned nodes without erasing existing part tokens. */
 private syncPeerChromeParts;private observePeerChrome;private syncPopupSemantics;private syncMapSemantics;private formatCount;private legendLimitText;private onLegendSlotChange;
 /**