@aceshooting/lyra-ui 26.0.0 → 28.0.0

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

@@ -1,4 +1,4 @@
-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{maxCssTime}from"../../../internal/css-motion-time.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))";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),total=maxCssTime(style.transitionDuration)+maxCssTime(style.transitionDelay);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,shadowFocusTarget}from"../../../internal/active-element.js";import{deferredPlaceReady,loadAnchoredOverlayRuntime,syncTopLayerRelease,topLayerPlacement,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{maxCssTime}from"../../../internal/css-motion-time.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))";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&&shadowFocusTarget(this)===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=shadowFocusTarget(this),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),total=maxCssTime(style.transitionDuration)+maxCssTime(style.transitionDelay);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

package/dist/components/layout/page/page.class.d.ts

@@ -145,7 +145,7 @@ mobileBreakpoint:string;
 /** Logical edge occupied by desktop navigation and the mobile drawer. */
 navigationPlacement:PageNavigationPlacement;
 /** Hides the default mobile toggle. Slotted `data-toggle-nav` controls remain available. */
-disableNavigationToggle:boolean;private accessibleLabel;private readonly mainId;private readonly navigationId;private readonly drawerId;private readonly skipTargetId;private readonly skipLabelId;private fragmentTargetId;private fragmentTabIndex;private resizeObserver?;private resizeView?;private overlayHandle?;private readonly nativeModal;private navigationTriggerOwner?;private navigationOpener;private readonly deferredFocusReturn;private customToggle?;private customToggles;private readonly customToggleOwnership;private mainElement?;private drawerElement?;connectedCallback():void;disconnectedCallback():void;protected firstUpdated(changed:PropertyValues):void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues<this>):void;private observeAllocation;private readonly onWindowResize;private measureAllocation;private applyMeasuredInlineSize;private syncOverlay;private scheduleDeferredNavigationReturn;private readonly resolveNavigationRestoreTarget;private syncCustomToggle;private releaseCustomToggleA11y;private isUnavailableCustomToggle;private rememberTriggerAndToggle;private readonly onDefaultToggleClick;private readonly onToggleSlotClick;private readonly onPageClick;private readonly onBackdropClick;private readonly onSkipClick;private requestNavOpen;
+disableNavigationToggle:boolean;private accessibleLabel;private readonly mainId;private readonly navigationId;private readonly drawerId;private readonly skipTargetId;private readonly skipLabelId;private fragmentTargetId;private fragmentTabIndex;private resizeObserver?;private resizeView?;private overlayHandle?;private readonly nativeModal;private navigationTriggerOwner?;private navigationOpener;private customToggle?;private customToggles;private readonly customToggleOwnership;private mainElement?;private drawerElement?;connectedCallback():void;disconnectedCallback():void;protected firstUpdated(changed:PropertyValues):void;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues<this>):void;private observeAllocation;private readonly onWindowResize;private measureAllocation;private applyMeasuredInlineSize;private syncOverlay;private readonly navigationDeferredReturn;private readonly resolveNavigationRestoreTarget;private syncCustomToggle;private releaseCustomToggleA11y;private isUnavailableCustomToggle;private rememberTriggerAndToggle;private readonly onDefaultToggleClick;private readonly onToggleSlotClick;private readonly onPageClick;private readonly onBackdropClick;private readonly onSkipClick;private requestNavOpen;
 /** Open mobile navigation. Desktop navigation is already visible, but the state is retained so
 * an open drawer can move through desktop and back without replacing its content. */
 showNavigation():void;

package/dist/components/layout/page/page.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{isAriaTrue}from"../../../internal/accessibility-visibility.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import{resolveCssLength}from"../../../internal/css-length.js";import{DeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{menuIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{activateOverlay,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{styles}from"./page.styles.js";import{LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_skipToContent}from"../../../internal/default-strings.generated.js";const DEFAULT_MOBILE_BREAKPOINT="768px";class LyraPage extends LyraElement{constructor(){super(...arguments),this.view="desktop",this.navOpen=!1,this.mobileBreakpoint="768px",this.navigationPlacement="start",this.disableNavigationToggle=!1,this.accessibleLabel=null,this.mainId=nextId("page-main"),this.navigationId=nextId("page-navigation"),this.drawerId=nextId("page-drawer"),this.skipTargetId=nextId("page-skip-target"),this.skipLabelId=nextId("page-skip-label"),this.fragmentTargetId=this.getAttribute("id")||this.skipTargetId,this.fragmentTabIndex=this.getAttribute("tabindex")??"-1",this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.hideNavigation()},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.hideNavigation(),this.navOpen&&this.view==="mobile"&&this.nativeModal.show()}}),this.navigationOpener=null,this.deferredFocusReturn=new DeferredFocusReturn,this.customToggles=[],this.customToggleOwnership=new Map,this.onWindowResize=()=>this.measureAllocation(),this.resolveNavigationRestoreTarget=()=>{const owner=this.navigationTriggerOwner;if(owner?.isConnected){const accessible=resolveAccessibleTrigger(owner);if(isComposedFocusAvailable(accessible))return accessible}const builtIn=this.disableNavigationToggle?null:this.renderRoot.querySelector('[part~="navigation-toggle"]');return builtIn&&isComposedFocusAvailable(builtIn)?builtIn:this.mainElement&&isComposedFocusAvailable(this.mainElement)?this.mainElement:null},this.onDefaultToggleClick=event=>{this.rememberTriggerAndToggle(event.currentTarget)},this.onToggleSlotClick=event=>{const trigger=event.composedPath().find(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle");trigger&&this.customToggles.includes(trigger)&&!this.isUnavailableCustomToggle(trigger)&&this.rememberTriggerAndToggle(trigger)},this.onPageClick=event=>{const path=event.composedPath();if(path.some(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle"))return;const trigger=path.find(candidate=>candidate?.nodeType===1&&candidate.hasAttribute("data-toggle-nav"));trigger&&this.rememberTriggerAndToggle(trigger)},this.onBackdropClick=event=>{event.target===event.currentTarget&&this.overlayHandle?.dismissBackdrop()},this.onSkipClick=event=>{event.preventDefault(),this.mainElement?.focus(),this.mainElement?.scrollIntoView({block:"start"})}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,skipToContent:LYRA_DEFAULT_skipToContent}}static{this.knownUnobservedAttributes=["disable-sticky"]}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}connectedCallback(){super.connectedCallback(),this.measureAllocation(),this.observeAllocation(),this.hasUpdated&&this.view==="mobile"&&this.navOpen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.syncOverlay(),queueMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&queueMicrotask(()=>this.isConnected&&this.syncCustomToggle())}disconnectedCallback(){this.nativeModal.hide(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.overlayHandle?.suspend(),this.deferredFocusReturn.cancel(),this.releaseCustomToggleA11y(),super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.measureAllocation(),this.observeAllocation()}willUpdate(changed){super.willUpdate(changed),this.view==="mobile"&&this.navOpen&&!this.overlayHandle&&this.nativeModal.prepare(),(this.view!=="mobile"||!this.navOpen)&&(this.nativeModal.hide(),this.nativeModal.prepare(!1)),changed.has("fragmentTargetId")&&!this.fragmentTargetId&&(this.fragmentTargetId=this.skipTargetId),changed.has("fragmentTabIndex")&&this.fragmentTabIndex===null&&(this.fragmentTabIndex="-1")}updated(changed){super.updated(changed),this.view==="mobile"&&this.navOpen&&this.nativeModal.show();const describedBy=this.view==="mobile"&&this.navOpen?this.getAttribute("aria-describedby"):null;for(const dialog of this.renderRoot.querySelectorAll('[part="drawer"], [data-native-modal-carrier]'))syncAriaDescribedByElements(this,dialog,describedBy);changed.has("mobileBreakpoint")&&changed.get("mobileBreakpoint")!==void 0&&this.measureAllocation(),this.overlayHandle!==void 0&&(!this.isConnected||this.view!=="mobile"||!this.navOpen)?(this.syncOverlay(changed),this.syncCustomToggle()):(this.syncCustomToggle(),this.syncOverlay(changed))}observeAllocation(){if(!this.isConnected)return;this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver??=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this)??entries[0],inlineSize=entry?.contentBoxSize?.[0]?.inlineSize??entry?.contentRect.width;inlineSize!==void 0&&view?.requestAnimationFrame(()=>{this.isConnected&&this.applyMeasuredInlineSize(inlineSize)})}),this.resizeObserver.observe(this);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}measureAllocation(){const width=this.getBoundingClientRect().width;width>0&&this.applyMeasuredInlineSize(width)}applyMeasuredInlineSize(width){if(!Number.isFinite(width)||width<0)return;const resolved=resolveCssLength(this.mobileBreakpoint,{host:this}),fallback=resolveCssLength(DEFAULT_MOBILE_BREAKPOINT,{host:this})??768,breakpoint=Math.max(0,resolved!==void 0&&Number.isFinite(resolved)?resolved:fallback),next=width<=breakpoint?"mobile":"desktop";next!==this.view&&(this.view=next)}syncOverlay(changed){if(this.isConnected&&this.view==="mobile"&&this.navOpen){if(this.overlayHandle?.isActive()){this.overlayHandle.resume(),this.navigationTriggerOwner&&this.overlayHandle.updateRestoreFocusTo(this.resolveNavigationRestoreTarget);return}this.deferredFocusReturn.cancel();const active=deepActiveElement(this.ownerDocument);this.navigationOpener=active&&typeof active.focus=="function"&&!(this.drawerElement&&composedContains(this.drawerElement,active))?active:null,this.overlayHandle=activateOverlay({host:this,panel:()=>this.drawerElement??null,modalRoot:()=>this.drawerElement??null,onEscape:()=>this.hideNavigation(),onBackdrop:()=>this.hideNavigation(),...this.navigationTriggerOwner?{restoreFocusTo:this.resolveNavigationRestoreTarget}:{},lockScroll:!0,suspendWhenUnrendered:!0}),this.overlayHandle.focusInitial();return}if(this.overlayHandle){const restoreFocus=!!(changed?.has("navOpen")&&!this.navOpen);this.overlayHandle.deactivate({restoreFocus}),this.overlayHandle=void 0,restoreFocus&&this.scheduleDeferredNavigationReturn()}this.navOpen||(this.navigationTriggerOwner=void 0)}scheduleDeferredNavigationReturn(){const owner=this.navigationTriggerOwner,opener=owner?null:this.navigationOpener;this.navigationOpener=null,!(!owner&&!opener)&&this.deferredFocusReturn.schedule({host:this,candidates:()=>[owner?.isConnected?resolveAccessibleTrigger(owner):null,opener,this.disableNavigationToggle?null:this.renderRoot.querySelector('[part~="navigation-toggle"]'),this.mainElement],stranded:active=>!!this.drawerElement&&composedContains(this.drawerElement,active),isCurrent:()=>!this.navOpen})}syncCustomToggle(){const nextToggles=(this.shadowRoot?.querySelector('slot[name="navigation-toggle"]')?.assignedElements({flatten:!0})??[]).filter(candidate=>candidate.nodeType===1&&candidate.getRootNode()!==this.shadowRoot),previous=this.customToggle;this.customToggles=nextToggles,this.customToggle=nextToggles[0];for(const[host,ownership]of this.customToggleOwnership)nextToggles.includes(host)||(ownership.accessibleAria?.release(),ownership.hostAria.release(),this.customToggleOwnership.delete(host));const localizedLabel=this.localize(this.navOpen?"closeNavigation":"openNavigation"),drawer=this.drawerElement;for(const host of nextToggles){const accessible=resolveAccessibleTrigger(host);let ownership=this.customToggleOwnership.get(host);ownership?accessible!==ownership.accessible&&(ownership.accessibleAria?.release(),ownership.accessibleAria=void 0,ownership.accessible=accessible,ownership.accessibleAuthoredLabel=accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null):(ownership={accessible,accessibleAuthoredLabel:accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null,hostAria:acquireAriaOwnership(null,{}),hostAuthoredLabel:host.hasAttribute("aria-label")?host.getAttribute("aria-label")??"":null},this.customToggleOwnership.set(host,ownership)),ownership.hostAria.update(host,{attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]});const distinctAccessible=accessible===host?null:accessible,accessibleContribution={attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.accessibleAuthoredLabel??ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]};ownership.accessibleAria?ownership.accessibleAria.update(distinctAccessible,accessibleContribution):ownership.accessibleAria=acquireAriaOwnership(distinctAccessible,accessibleContribution)}this.navOpen&&this.navigationTriggerOwner&&!nextToggles.includes(this.navigationTriggerOwner)?(this.navigationTriggerOwner=this.customToggle,this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)):this.navOpen&&previous&&this.navigationTriggerOwner===previous&&this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)}releaseCustomToggleA11y(){for(const ownership of this.customToggleOwnership.values())ownership.accessibleAria?.release(),ownership.hostAria.release();this.customToggleOwnership.clear(),this.customToggle=void 0,this.customToggles=[]}isUnavailableCustomToggle(trigger){const accessible=resolveAccessibleTrigger(trigger);return[trigger,accessible].some(candidate=>candidate.hasAttribute("hidden")||candidate.hasAttribute("inert")||candidate.matches(":disabled")||isAriaTrue(candidate.getAttribute("aria-hidden"))||isAriaTrue(candidate.getAttribute("aria-disabled")))}rememberTriggerAndToggle(trigger){this.syncCustomToggle(),this.navOpen||(this.navigationTriggerOwner=trigger),this.toggleNavigation()}requestNavOpen(next){this.navOpen===next||this.emit("lr-nav-toggle-request",{open:next},{cancelable:!0}).defaultPrevented||(this.navOpen=next,this.emit("lr-nav-open-change",{open:next}))}showNavigation(){this.requestNavOpen(!0)}hideNavigation(){this.requestNavOpen(!1)}toggleNavigation(){this.requestNavOpen(!this.navOpen)}visiblePixelsInViewport(element){if(!element)return 0;const rect=element.getBoundingClientRect();if(!Number.isFinite(rect.top)||!Number.isFinite(rect.bottom))return 0;const candidateHeight=element.ownerDocument.defaultView?.innerHeight??element.ownerDocument.documentElement.clientHeight;if(!Number.isFinite(candidateHeight)||candidateHeight<=0)return 0;const viewportHeight=finiteRange(candidateHeight,0,0),visible=Math.min(rect.bottom,viewportHeight)-Math.max(rect.top,0);return finiteRange(visible,0,0,viewportHeight)}render(){const mobile=this.view==="mobile",overlayOpen=mobile&&this.navOpen,navigationLabel=this.accessibleLabel??this.localize("navigation");return html`
+import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{isAriaTrue}from"../../../internal/accessibility-visibility.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import{resolveCssLength}from"../../../internal/css-length.js";import{cancelDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{menuIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{activateOverlay,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{styles}from"./page.styles.js";import{LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_skipToContent}from"../../../internal/default-strings/layout.generated.js";import{LYRA_DEFAULT_navigation}from"../../../internal/default-strings/shared.generated.js";const DEFAULT_MOBILE_BREAKPOINT="768px";class LyraPage extends LyraElement{constructor(){super(...arguments),this.view="desktop",this.navOpen=!1,this.mobileBreakpoint="768px",this.navigationPlacement="start",this.disableNavigationToggle=!1,this.accessibleLabel=null,this.mainId=nextId("page-main"),this.navigationId=nextId("page-navigation"),this.drawerId=nextId("page-drawer"),this.skipTargetId=nextId("page-skip-target"),this.skipLabelId=nextId("page-skip-label"),this.fragmentTargetId=this.getAttribute("id")||this.skipTargetId,this.fragmentTabIndex=this.getAttribute("tabindex")??"-1",this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.hideNavigation()},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.hideNavigation(),this.navOpen&&this.view==="mobile"&&this.nativeModal.show()}}),this.navigationOpener=null,this.customToggles=[],this.customToggleOwnership=new Map,this.onWindowResize=()=>this.measureAllocation(),this.navigationDeferredReturn=()=>{const owner=this.navigationTriggerOwner,opener=owner?null:this.navigationOpener;if(this.navigationOpener=null,!(!owner&&!opener))return{candidates:()=>[owner?.isConnected?resolveAccessibleTrigger(owner):null,opener,this.disableNavigationToggle?null:this.renderRoot.querySelector('[part~="navigation-toggle"]'),this.mainElement],stranded:active=>!!this.drawerElement&&composedContains(this.drawerElement,active),isCurrent:()=>!this.navOpen}},this.resolveNavigationRestoreTarget=()=>{const owner=this.navigationTriggerOwner;if(owner?.isConnected){const accessible=resolveAccessibleTrigger(owner);if(isComposedFocusAvailable(accessible))return accessible}const builtIn=this.disableNavigationToggle?null:this.renderRoot.querySelector('[part~="navigation-toggle"]');return builtIn&&isComposedFocusAvailable(builtIn)?builtIn:this.mainElement&&isComposedFocusAvailable(this.mainElement)?this.mainElement:null},this.onDefaultToggleClick=event=>{this.rememberTriggerAndToggle(event.currentTarget)},this.onToggleSlotClick=event=>{const trigger=event.composedPath().find(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle");trigger&&this.customToggles.includes(trigger)&&!this.isUnavailableCustomToggle(trigger)&&this.rememberTriggerAndToggle(trigger)},this.onPageClick=event=>{const path=event.composedPath();if(path.some(candidate=>candidate?.nodeType===1&&candidate.getAttribute("slot")==="navigation-toggle"))return;const trigger=path.find(candidate=>candidate?.nodeType===1&&candidate.hasAttribute("data-toggle-nav"));trigger&&this.rememberTriggerAndToggle(trigger)},this.onBackdropClick=event=>{event.target===event.currentTarget&&this.overlayHandle?.dismissBackdrop()},this.onSkipClick=event=>{event.preventDefault(),this.mainElement?.focus(),this.mainElement?.scrollIntoView({block:"start"})}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,skipToContent:LYRA_DEFAULT_skipToContent}}static{this.knownUnobservedAttributes=["disable-sticky"]}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}connectedCallback(){super.connectedCallback(),this.measureAllocation(),this.observeAllocation(),this.hasUpdated&&this.view==="mobile"&&this.navOpen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.syncOverlay(),queueMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&queueMicrotask(()=>this.isConnected&&this.syncCustomToggle())}disconnectedCallback(){this.nativeModal.hide(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.overlayHandle?.suspend(),cancelDeferredFocusReturn(this),this.releaseCustomToggleA11y(),super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.measureAllocation(),this.observeAllocation()}willUpdate(changed){super.willUpdate(changed),this.view==="mobile"&&this.navOpen&&!this.overlayHandle&&this.nativeModal.prepare(),(this.view!=="mobile"||!this.navOpen)&&(this.nativeModal.hide(),this.nativeModal.prepare(!1)),changed.has("fragmentTargetId")&&!this.fragmentTargetId&&(this.fragmentTargetId=this.skipTargetId),changed.has("fragmentTabIndex")&&this.fragmentTabIndex===null&&(this.fragmentTabIndex="-1")}updated(changed){super.updated(changed),this.view==="mobile"&&this.navOpen&&this.nativeModal.show();const describedBy=this.view==="mobile"&&this.navOpen?this.getAttribute("aria-describedby"):null;for(const dialog of this.renderRoot.querySelectorAll('[part="drawer"], [data-native-modal-carrier]'))syncAriaDescribedByElements(this,dialog,describedBy);changed.has("mobileBreakpoint")&&changed.get("mobileBreakpoint")!==void 0&&this.measureAllocation(),this.overlayHandle!==void 0&&(!this.isConnected||this.view!=="mobile"||!this.navOpen)?(this.syncOverlay(changed),this.syncCustomToggle()):(this.syncCustomToggle(),this.syncOverlay(changed))}observeAllocation(){if(!this.isConnected)return;this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver??=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this)??entries[0],inlineSize=entry?.contentBoxSize?.[0]?.inlineSize??entry?.contentRect.width;inlineSize!==void 0&&view?.requestAnimationFrame(()=>{this.isConnected&&this.applyMeasuredInlineSize(inlineSize)})}),this.resizeObserver.observe(this);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}measureAllocation(){const width=this.getBoundingClientRect().width;width>0&&this.applyMeasuredInlineSize(width)}applyMeasuredInlineSize(width){if(!Number.isFinite(width)||width<0)return;const resolved=resolveCssLength(this.mobileBreakpoint,{host:this}),fallback=resolveCssLength(DEFAULT_MOBILE_BREAKPOINT,{host:this})??768,breakpoint=Math.max(0,resolved!==void 0&&Number.isFinite(resolved)?resolved:fallback),next=width<=breakpoint?"mobile":"desktop";next!==this.view&&(this.view=next)}syncOverlay(changed){if(this.isConnected&&this.view==="mobile"&&this.navOpen){if(this.overlayHandle?.isActive()){this.overlayHandle.resume(),this.navigationTriggerOwner&&this.overlayHandle.updateRestoreFocusTo(this.resolveNavigationRestoreTarget);return}const active=deepActiveElement(this.ownerDocument);this.navigationOpener=active&&typeof active.focus=="function"&&!(this.drawerElement&&composedContains(this.drawerElement,active))?active:null,this.overlayHandle=activateOverlay({host:this,panel:()=>this.drawerElement??null,modalRoot:()=>this.drawerElement??null,onEscape:()=>this.hideNavigation(),onBackdrop:()=>this.hideNavigation(),...this.navigationTriggerOwner?{restoreFocusTo:this.resolveNavigationRestoreTarget}:{},lockScroll:!0,suspendWhenUnrendered:!0,deferredReturn:this.navigationDeferredReturn}),this.overlayHandle.focusInitial();return}if(this.overlayHandle){const restoreFocus=!!(changed?.has("navOpen")&&!this.navOpen);this.overlayHandle.deactivate({restoreFocus}),this.overlayHandle=void 0}this.navOpen||(this.navigationTriggerOwner=void 0)}syncCustomToggle(){const nextToggles=(this.shadowRoot?.querySelector('slot[name="navigation-toggle"]')?.assignedElements({flatten:!0})??[]).filter(candidate=>candidate.nodeType===1&&candidate.getRootNode()!==this.shadowRoot),previous=this.customToggle;this.customToggles=nextToggles,this.customToggle=nextToggles[0];for(const[host,ownership]of this.customToggleOwnership)nextToggles.includes(host)||(ownership.accessibleAria?.release(),ownership.hostAria.release(),this.customToggleOwnership.delete(host));const localizedLabel=this.localize(this.navOpen?"closeNavigation":"openNavigation"),drawer=this.drawerElement;for(const host of nextToggles){const accessible=resolveAccessibleTrigger(host);let ownership=this.customToggleOwnership.get(host);ownership?accessible!==ownership.accessible&&(ownership.accessibleAria?.release(),ownership.accessibleAria=void 0,ownership.accessible=accessible,ownership.accessibleAuthoredLabel=accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null):(ownership={accessible,accessibleAuthoredLabel:accessible.hasAttribute("aria-label")?accessible.getAttribute("aria-label")??"":null,hostAria:acquireAriaOwnership(null,{}),hostAuthoredLabel:host.hasAttribute("aria-label")?host.getAttribute("aria-label")??"":null},this.customToggleOwnership.set(host,ownership)),ownership.hostAria.update(host,{attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]});const distinctAccessible=accessible===host?null:accessible,accessibleContribution={attributes:{"aria-haspopup":"dialog","aria-expanded":this.navOpen?"true":"false","aria-label":ownership.accessibleAuthoredLabel??ownership.hostAuthoredLabel??localizedLabel},controls:drawer?[drawer]:[]};ownership.accessibleAria?ownership.accessibleAria.update(distinctAccessible,accessibleContribution):ownership.accessibleAria=acquireAriaOwnership(distinctAccessible,accessibleContribution)}this.navOpen&&this.navigationTriggerOwner&&!nextToggles.includes(this.navigationTriggerOwner)?(this.navigationTriggerOwner=this.customToggle,this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)):this.navOpen&&previous&&this.navigationTriggerOwner===previous&&this.overlayHandle?.updateRestoreFocusTo(this.resolveNavigationRestoreTarget)}releaseCustomToggleA11y(){for(const ownership of this.customToggleOwnership.values())ownership.accessibleAria?.release(),ownership.hostAria.release();this.customToggleOwnership.clear(),this.customToggle=void 0,this.customToggles=[]}isUnavailableCustomToggle(trigger){const accessible=resolveAccessibleTrigger(trigger);return[trigger,accessible].some(candidate=>candidate.hasAttribute("hidden")||candidate.hasAttribute("inert")||candidate.matches(":disabled")||isAriaTrue(candidate.getAttribute("aria-hidden"))||isAriaTrue(candidate.getAttribute("aria-disabled")))}rememberTriggerAndToggle(trigger){this.syncCustomToggle(),this.navOpen||(this.navigationTriggerOwner=trigger),this.toggleNavigation()}requestNavOpen(next){this.navOpen===next||this.emit("lr-nav-toggle-request",{open:next},{cancelable:!0}).defaultPrevented||(this.navOpen=next,this.emit("lr-nav-open-change",{open:next}))}showNavigation(){this.requestNavOpen(!0)}hideNavigation(){this.requestNavOpen(!1)}toggleNavigation(){this.requestNavOpen(!this.navOpen)}visiblePixelsInViewport(element){if(!element)return 0;const rect=element.getBoundingClientRect();if(!Number.isFinite(rect.top)||!Number.isFinite(rect.bottom))return 0;const candidateHeight=element.ownerDocument.defaultView?.innerHeight??element.ownerDocument.documentElement.clientHeight;if(!Number.isFinite(candidateHeight)||candidateHeight<=0)return 0;const viewportHeight=finiteRange(candidateHeight,0,0),visible=Math.min(rect.bottom,viewportHeight)-Math.max(rect.top,0);return finiteRange(visible,0,0,viewportHeight)}render(){const mobile=this.view==="mobile",overlayOpen=mobile&&this.navOpen,navigationLabel=this.accessibleLabel??this.localize("navigation");return html`
       <div part="base page" @click=${this.onPageClick}>
         <a
           part="skip-to-content"

package/dist/components/layout/reorder-list/reorder-item.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{chevronIcon}from"../../../internal/icons.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{styles}from"./reorder-item.styles.js";import{reorderIdentityChange,reorderOwnerUpdate}from"./reorder-owner.js";import{LYRA_DEFAULT_moveDown,LYRA_DEFAULT_moveUp}from"../../../internal/default-strings.generated.js";function isReorderOwnerState(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return typeof candidate.atStart=="boolean"&&typeof candidate.atEnd=="boolean"&&typeof candidate.listDisabled=="boolean"&&typeof candidate.pending=="boolean"&&typeof candidate.busy=="boolean"&&typeof candidate.validIdentity=="boolean"}class LyraReorderItem extends LyraElement{constructor(){super(...arguments),this.reorderInternals=attachInternalsSafely(this),this.moveUpLabelId=nextId("reorder-move-up"),this.moveDownLabelId=nextId("reorder-move-down"),this.itemLabelId=nextId("reorder-item-label"),this.owner=null,this.ownerState={atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1},this.value="",this.hostAccessibleLabel=null,this.disabled=!1,this.onMoveUpClick=()=>{this.moveUpDisabled||this.emit("lr-move-request",{direction:"up"})},this.onMoveDownClick=()=>{this.moveDownDisabled||this.emit("lr-move-request",{direction:"down"})}}static{this.defaultStrings={...super.defaultStrings,moveDown:LYRA_DEFAULT_moveDown,moveUp:LYRA_DEFAULT_moveUp}}static{this.styles=[LyraElement.styles,styles]}get atStart(){return this.ownerState.atStart}get atEnd(){return this.ownerState.atEnd}get listDisabled(){return this.ownerState.listDisabled}get pending(){return this.ownerState.pending}[reorderOwnerUpdate](owner,state){if(!isReorderOwnerState(state)){this.owner===owner&&(this.owner=null,this.setOwnerState({atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1}));return}this.owner=owner,this.setOwnerState(state)}setOwnerState(state){const previous=this.ownerState;previous.atStart===state.atStart&&previous.atEnd===state.atEnd&&previous.listDisabled===state.listDisabled&&previous.pending===state.pending&&previous.busy===state.busy&&previous.validIdentity===state.validIdentity||(this.ownerState=state,setCustomState(this.reorderInternals,"at-start",state.atStart),setCustomState(this.reorderInternals,"at-end",state.atEnd),setCustomState(this.reorderInternals,"list-disabled",state.listDisabled),setCustomState(this.reorderInternals,"pending",state.pending),setCustomState(this.reorderInternals,"busy",state.busy),setCustomState(this.reorderInternals,"invalid-identity",!state.validIdentity),this.requestUpdate())}get moveUpDisabled(){const hasValidIdentity=this.owner===null?(this.value??"").trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atStart}get moveDownDisabled(){const hasValidIdentity=this.owner===null?(this.value??"").trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atEnd}focusMoveButton(direction){if(direction==="up"?this.moveUpDisabled:this.moveDownDisabled)return!1;const part=direction==="up"?"move-up-button":"move-down-button",button=this.shadowRoot?.querySelector(`[part='${part}']`);return!button||button.disabled?!1:(button.focus(),!0)}get resolvedItemLabel(){return this.hostAccessibleLabel!==null?this.hostAccessibleLabel:composedAccessibilityTextResult(this.childNodes,{ancestorBoundary:this,maxCharacters:256,maxDepth:16,maxNodes:128,requireRendered:!1,skipRootAncestorValidation:!0}).text}refreshContentObserver(){this.contentObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.contentObserver=new Observer(()=>this.requestUpdate()),this.contentObserver.observe(this,{attributes:!0,childList:!0,characterData:!0,subtree:!0,attributeFilter:["alt","aria-label","aria-labelledby","hidden","inert","title"]}))}connectedCallback(){super.connectedCallback(),this.refreshContentObserver()}disconnectedCallback(){this.contentObserver?.disconnect(),this.contentObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("value")&&this.owner?.[reorderIdentityChange]?.(this),this.getAttribute("role")!=="listitem"&&this.setAttribute("role","listitem")}render(){const itemLabel=this.resolvedItemLabel;return html`
+import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityTextResult}from"../../../internal/accessibility-visibility.js";import{chevronIcon}from"../../../internal/icons.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{styles}from"./reorder-item.styles.js";import{reorderIdentityChange,reorderOwnerUpdate}from"./reorder-owner.js";import{LYRA_DEFAULT_moveDown,LYRA_DEFAULT_moveUp}from"../../../internal/default-strings/shared.generated.js";function isReorderOwnerState(value){if(typeof value!="object"||value===null)return!1;const candidate=value;return typeof candidate.atStart=="boolean"&&typeof candidate.atEnd=="boolean"&&typeof candidate.listDisabled=="boolean"&&typeof candidate.pending=="boolean"&&typeof candidate.busy=="boolean"&&typeof candidate.validIdentity=="boolean"}class LyraReorderItem extends LyraElement{constructor(){super(...arguments),this.reorderInternals=attachInternalsSafely(this),this.moveUpLabelId=nextId("reorder-move-up"),this.moveDownLabelId=nextId("reorder-move-down"),this.itemLabelId=nextId("reorder-item-label"),this.owner=null,this.ownerState={atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1},this.value="",this.hostAccessibleLabel=null,this.disabled=!1,this.onMoveUpClick=()=>{this.moveUpDisabled||this.emit("lr-move-request",{direction:"up"})},this.onMoveDownClick=()=>{this.moveDownDisabled||this.emit("lr-move-request",{direction:"down"})}}static{this.defaultStrings={...super.defaultStrings,moveDown:LYRA_DEFAULT_moveDown,moveUp:LYRA_DEFAULT_moveUp}}static{this.styles=[LyraElement.styles,styles]}get atStart(){return this.ownerState.atStart}get atEnd(){return this.ownerState.atEnd}get listDisabled(){return this.ownerState.listDisabled}get pending(){return this.ownerState.pending}[reorderOwnerUpdate](owner,state){if(!isReorderOwnerState(state)){this.owner===owner&&(this.owner=null,this.setOwnerState({atStart:!1,atEnd:!1,listDisabled:!1,pending:!1,busy:!1,validIdentity:!1}));return}this.owner=owner,this.setOwnerState(state)}setOwnerState(state){const previous=this.ownerState;previous.atStart===state.atStart&&previous.atEnd===state.atEnd&&previous.listDisabled===state.listDisabled&&previous.pending===state.pending&&previous.busy===state.busy&&previous.validIdentity===state.validIdentity||(this.ownerState=state,setCustomState(this.reorderInternals,"at-start",state.atStart),setCustomState(this.reorderInternals,"at-end",state.atEnd),setCustomState(this.reorderInternals,"list-disabled",state.listDisabled),setCustomState(this.reorderInternals,"pending",state.pending),setCustomState(this.reorderInternals,"busy",state.busy),setCustomState(this.reorderInternals,"invalid-identity",!state.validIdentity),this.requestUpdate())}get moveUpDisabled(){const hasValidIdentity=this.owner===null?(this.value??"").trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atStart}get moveDownDisabled(){const hasValidIdentity=this.owner===null?(this.value??"").trim().length>0:this.ownerState.validIdentity;return this.disabled||this.listDisabled||this.ownerState.busy||!hasValidIdentity||this.atEnd}focusMoveButton(direction){if(direction==="up"?this.moveUpDisabled:this.moveDownDisabled)return!1;const part=direction==="up"?"move-up-button":"move-down-button",button=this.shadowRoot?.querySelector(`[part='${part}']`);return!button||button.disabled?!1:(button.focus(),!0)}get resolvedItemLabel(){return this.hostAccessibleLabel!==null?this.hostAccessibleLabel:composedAccessibilityTextResult(this.childNodes,{ancestorBoundary:this,maxCharacters:256,maxDepth:16,maxNodes:128,requireRendered:!1,skipRootAncestorValidation:!0}).text}refreshContentObserver(){this.contentObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.contentObserver=new Observer(()=>this.requestUpdate()),this.contentObserver.observe(this,{attributes:!0,childList:!0,characterData:!0,subtree:!0,attributeFilter:["alt","aria-label","aria-labelledby","hidden","inert","title"]}))}connectedCallback(){super.connectedCallback(),this.refreshContentObserver()}disconnectedCallback(){this.contentObserver?.disconnect(),this.contentObserver=void 0,super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("value")&&this.owner?.[reorderIdentityChange]?.(this),this.getAttribute("role")!=="listitem"&&this.setAttribute("role","listitem")}render(){const itemLabel=this.resolvedItemLabel;return html`
       <div part="base">
         <span id=${this.moveUpLabelId} hidden>${this.localize("moveUp")}</span>
         <span id=${this.moveDownLabelId} hidden

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{composedContains}from"../../../internal/overlay-stack.js";import{releaseReorderOwnerState,reorderIdentityChange,updateReorderOwnerState}from"./reorder-owner.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{styles}from"./reorder-list.styles.js";import{LYRA_DEFAULT_reorderItemMoved,LYRA_DEFAULT_reorderMoveCancelled,LYRA_DEFAULT_reorderMovePending}from"../../../internal/default-strings.generated.js";function isRowOwnChrome(node,item){let root=node.getRootNode();for(;root instanceof ShadowRoot;){if(root===item.shadowRoot)return!0;root=root.host.getRootNode()}return!1}class LyraReorderList extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.controlled=!1,this.pendingFocusTarget=null,this.focusRestoreGeneration=0,this.stateItems=new Set,this.moveToken=0,this.pendingMove=null,this.pendingReconciliation=null,this.onSlotChange=()=>{this.pendingMove&&this.pendingMove.phase==="held"&&!this.pendingMembershipIsCurrent()&&this.revertPendingMove(),this.pendingReconciliation&&this.tryCompleteControlledReconciliation(),this.syncBoundaryState()},this.identityChangeReconciliationPending=!1,this.onMoveRequest=e=>{const item=e.target?.closest?.(tag("reorder-item"));if(!item||item.parentElement!==this)return;const{direction}=e.detail;e.stopPropagation(),this.moveItem(item,direction)},this.onKeyDown=e=>{if(!(e.ctrlKey||e.metaKey)||e.altKey||e.shiftKey||e.key!=="ArrowUp"&&e.key!=="ArrowDown")return;const path=e.composedPath(),item=path.find(target=>target instanceof Element&&target.localName===tag("reorder-item")&&target.parentElement===this);if(!item)return;const itemIndex=path.indexOf(item);if(path.slice(0,itemIndex).some(target=>{if(!(target instanceof Element)||isRowOwnChrome(target,item))return!1;const name=target.localName;return name==="a"||name==="button"||name==="input"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||name.includes("-")&&target!==item}))return;const items=this.itemElements,fromIndex=items.indexOf(item),toIndex=e.key==="ArrowDown"?fromIndex+1:fromIndex-1;this.disabled||this.pendingMove||this.pendingReconciliation||item.disabled||fromIndex<0||toIndex<0||toIndex>=items.length||(e.preventDefault(),this.moveItem(item,e.key==="ArrowDown"?"down":"up"))}}static{this.defaultStrings={...super.defaultStrings,reorderItemMoved:LYRA_DEFAULT_reorderItemMoved,reorderMoveCancelled:LYRA_DEFAULT_reorderMoveCancelled,reorderMovePending:LYRA_DEFAULT_reorderMovePending}}static{this.styles=[LyraElement.styles,styles]}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-reorder-request"])}get directItemElements(){const itemTag=tag("reorder-item");return[...this.children].filter(element=>element.localName===itemTag)}get itemElements(){const seen=new Set;return this.directItemElements.filter(item=>{const value=item.value;return typeof value!="string"||value.trim()===""||seen.has(value)?!1:(seen.add(value),!0)})}syncBoundaryState(){const directItems=this.directItemElements,items=this.itemElements,indexOf=new Map(items.map((item,index)=>[item,index])),heldMove=this.pendingMove?.phase==="held",reconciliation=this.pendingReconciliation,busy=heldMove||reconciliation!==null,nextStateItems=new Set(directItems);for(const item of this.stateItems)nextStateItems.has(item)||releaseReorderOwnerState(item,this);directItems.forEach(item=>{const i=indexOf.get(item)??-1;updateReorderOwnerState(item,this,{atStart:i===0,atEnd:i>=0&&i===items.length-1,listDisabled:this.disabled,pending:heldMove&&this.pendingMove?.item===item||reconciliation!==null&&item.value===reconciliation.value,busy,validIdentity:indexOf.has(item)})}),this.stateItems=nextStateItems,this.requestUpdate()}tryCompleteControlledReconciliation(){const reconciliation=this.pendingReconciliation;if(!reconciliation)return;const items=this.itemElements,currentValues=items.map(entry=>entry.value);if(!(currentValues.length===reconciliation.expectedValues.length&&currentValues.every((value,index)=>value===reconciliation.expectedValues[index]))){currentValues.includes(reconciliation.value)||(this.pendingReconciliation=null);return}const movedItem=items[reconciliation.toIndex];this.pendingReconciliation=null,movedItem&&this.finishMove(movedItem,reconciliation.direction,reconciliation.toIndex)}[reorderIdentityChange](item){item.parentElement===this&&(this.identityChangeReconciliationPending||(this.identityChangeReconciliationPending=!0,queueMicrotask(()=>{this.identityChangeReconciliationPending=!1,this.onSlotChange()})))}refreshItemObserver(){this.itemObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.itemObserver=new Observer(()=>this.onSlotChange()),this.itemObserver.observe(this,{childList:!0}))}pendingMembershipIsCurrent(){if(!this.pendingMove)return!1;const current=this.itemElements;return!this.disabled&&!this.pendingMove.item.disabled&&!this.pendingMove.target.disabled&&current.length===this.pendingMove.members.length&&current.every((item,index)=>item===this.pendingMove.members[index]&&item.value===this.pendingMove.values[index])&&current[this.pendingMove.toIndex]===this.pendingMove.target}connectedCallback(){super.connectedCallback(),this.refreshItemObserver(),this.syncBoundaryState()}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.syncBoundaryState(),changed.has("controlled")&&this.pendingReconciliation&&(this.pendingReconciliation=null,this.syncBoundaryState())}disconnectedCallback(){this.itemObserver?.disconnect(),this.itemObserver=void 0,this.pendingFocusTarget=null,this.focusRestoreGeneration+=1,this.pendingMove=null,this.pendingReconciliation=null,this.moveToken+=1;for(const item of this.stateItems)releaseReorderOwnerState(item,this);this.stateItems.clear(),super.disconnectedCallback()}orderValues(items){return Object.freeze(items.map(item=>item.value))}scheduleFocusRestore(){this.scheduleAfterUpdate(()=>{const focusTarget=this.pendingFocusTarget;focusTarget&&this.restoreFocusAfterItemUpdate(focusTarget,this.focusRestoreGeneration)},"reorder-focus")}async restoreFocusAfterItemUpdate(focusTarget,generation){if(await focusTarget.item.updateComplete,!this.isConnected||generation!==this.focusRestoreGeneration||this.pendingFocusTarget!==focusTarget)return;this.pendingFocusTarget=null;const captured=focusTarget.preScheduleFocus;captured!=null&&captured!==this.ownerDocument.body&&captured.isConnected&&!composedContains(this,captured)||focusTarget.item.focusMoveButton(focusTarget.direction)}applyMove(item,direction,_fromIndex,toIndex){const target=this.itemElements[toIndex];direction==="up"?this.insertBefore(item,target):this.insertBefore(item,target.nextElementSibling),this.finishMove(item,direction,toIndex)}finishMove(item,direction,toIndex){this.syncBoundaryState();const focusDirection=(direction==="up"?item.atStart:item.atEnd)?direction==="up"?"down":"up":direction;this.pendingFocusTarget={item,direction:focusDirection,preScheduleFocus:deepActiveElementIn(this.ownerDocument)},this.focusRestoreGeneration+=1,this.scheduleFocusRestore();const newItems=this.itemElements,number=getNumberFormat(this.effectiveLocale);this.liveRegion?.announce(this.localize("reorderItemMoved",void 0,{index:number.format(toIndex+1),total:number.format(newItems.length)}),{force:!0})}commitMove(item,direction,fromIndex,toIndex,expectedValues){this.controlled?(this.pendingReconciliation={value:item.value,direction,toIndex,expectedValues},this.syncBoundaryState()):this.applyMove(item,direction,fromIndex,toIndex)}moveItem(item,direction){if(this.disabled||item.disabled||this.pendingMove||this.pendingReconciliation)return;const items=this.itemElements,fromIndex=items.indexOf(item);if(fromIndex<0)return;const toIndex=direction==="up"?fromIndex-1:fromIndex+1;if(toIndex<0||toIndex>=items.length)return;const reordered=items.slice();reordered.splice(fromIndex,1),reordered.splice(toIndex,0,item);const expectedValues=this.orderValues(reordered),transaction={token:++this.moveToken,phase:"dispatching",resolution:null,item,target:items[toIndex],direction,fromIndex,toIndex,members:[...items],values:items.map(member=>member.value),expectedValues};this.pendingMove=transaction;const request=this.emit("lr-reorder-request",Object.freeze({order:expectedValues,fromIndex,toIndex}),{cancelable:!0});if(!(this.pendingMove!==transaction||transaction.token!==this.moveToken)){if(!this.pendingMembershipIsCurrent()){this.pendingMove=null,this.syncBoundaryState();return}if(request.defaultPrevented){if(transaction.resolution==="revert"){this.pendingMove=null,this.syncBoundaryState();return}if(transaction.resolution==="finalize"){this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues);return}this.pendingMove={...transaction,phase:"held"},this.syncBoundaryState(),this.liveRegion?.announce(this.localize("reorderMovePending"),{force:!0});return}this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}}finalizePendingMove(){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="finalize";return}if(!this.pendingMembershipIsCurrent()){this.revertPendingMove();return}const{item,direction,fromIndex,toIndex,expectedValues}=this.pendingMove;this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}revertPendingMove(options){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="revert";return}const wasHeld=this.pendingMove.phase==="held";this.pendingMove=null,this.syncBoundaryState(),wasHeld&&!(options?.silent??!1)&&this.liveRegion?.announce(this.localize("reorderMoveCancelled"),{force:!0})}render(){return html`
+import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{composedContains}from"../../../internal/overlay-stack.js";import{releaseReorderOwnerState,reorderIdentityChange,updateReorderOwnerState}from"./reorder-owner.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{styles}from"./reorder-list.styles.js";import{LYRA_DEFAULT_reorderMoveCancelled,LYRA_DEFAULT_reorderMovePending}from"../../../internal/default-strings/layout.generated.js";import{LYRA_DEFAULT_reorderItemMoved}from"../../../internal/default-strings/shared.generated.js";function isRowOwnChrome(node,item){let root=node.getRootNode();for(;root instanceof ShadowRoot;){if(root===item.shadowRoot)return!0;root=root.host.getRootNode()}return!1}class LyraReorderList extends LyraElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.controlled=!1,this.pendingFocusTarget=null,this.focusRestoreGeneration=0,this.stateItems=new Set,this.moveToken=0,this.pendingMove=null,this.pendingReconciliation=null,this.onSlotChange=()=>{this.pendingMove&&this.pendingMove.phase==="held"&&!this.pendingMembershipIsCurrent()&&this.revertPendingMove(),this.pendingReconciliation&&this.tryCompleteControlledReconciliation(),this.syncBoundaryState()},this.identityChangeReconciliationPending=!1,this.onMoveRequest=e=>{const item=e.target?.closest?.(tag("reorder-item"));if(!item||item.parentElement!==this)return;const{direction}=e.detail;e.stopPropagation(),this.moveItem(item,direction)},this.onKeyDown=e=>{if(!(e.ctrlKey||e.metaKey)||e.altKey||e.shiftKey||e.key!=="ArrowUp"&&e.key!=="ArrowDown")return;const path=e.composedPath(),item=path.find(target=>target instanceof Element&&target.localName===tag("reorder-item")&&target.parentElement===this);if(!item)return;const itemIndex=path.indexOf(item);if(path.slice(0,itemIndex).some(target=>{if(!(target instanceof Element)||isRowOwnChrome(target,item))return!1;const name=target.localName;return name==="a"||name==="button"||name==="input"||name==="select"||name==="textarea"||target.hasAttribute("contenteditable")||name.includes("-")&&target!==item}))return;const items=this.itemElements,fromIndex=items.indexOf(item),toIndex=e.key==="ArrowDown"?fromIndex+1:fromIndex-1;this.disabled||this.pendingMove||this.pendingReconciliation||item.disabled||fromIndex<0||toIndex<0||toIndex>=items.length||(e.preventDefault(),this.moveItem(item,e.key==="ArrowDown"?"down":"up"))}}static{this.defaultStrings={...super.defaultStrings,reorderItemMoved:LYRA_DEFAULT_reorderItemMoved,reorderMoveCancelled:LYRA_DEFAULT_reorderMoveCancelled,reorderMovePending:LYRA_DEFAULT_reorderMovePending}}static{this.styles=[LyraElement.styles,styles]}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-reorder-request"])}get directItemElements(){const itemTag=tag("reorder-item");return[...this.children].filter(element=>element.localName===itemTag)}get itemElements(){const seen=new Set;return this.directItemElements.filter(item=>{const value=item.value;return typeof value!="string"||value.trim()===""||seen.has(value)?!1:(seen.add(value),!0)})}syncBoundaryState(){const directItems=this.directItemElements,items=this.itemElements,indexOf=new Map(items.map((item,index)=>[item,index])),heldMove=this.pendingMove?.phase==="held",reconciliation=this.pendingReconciliation,busy=heldMove||reconciliation!==null,nextStateItems=new Set(directItems);for(const item of this.stateItems)nextStateItems.has(item)||releaseReorderOwnerState(item,this);directItems.forEach(item=>{const i=indexOf.get(item)??-1;updateReorderOwnerState(item,this,{atStart:i===0,atEnd:i>=0&&i===items.length-1,listDisabled:this.disabled,pending:heldMove&&this.pendingMove?.item===item||reconciliation!==null&&item.value===reconciliation.value,busy,validIdentity:indexOf.has(item)})}),this.stateItems=nextStateItems,this.requestUpdate()}tryCompleteControlledReconciliation(){const reconciliation=this.pendingReconciliation;if(!reconciliation)return;const items=this.itemElements,currentValues=items.map(entry=>entry.value);if(!(currentValues.length===reconciliation.expectedValues.length&&currentValues.every((value,index)=>value===reconciliation.expectedValues[index]))){currentValues.includes(reconciliation.value)||(this.pendingReconciliation=null);return}const movedItem=items[reconciliation.toIndex];this.pendingReconciliation=null,movedItem&&this.finishMove(movedItem,reconciliation.direction,reconciliation.toIndex)}[reorderIdentityChange](item){item.parentElement===this&&(this.identityChangeReconciliationPending||(this.identityChangeReconciliationPending=!0,queueMicrotask(()=>{this.identityChangeReconciliationPending=!1,this.onSlotChange()})))}refreshItemObserver(){this.itemObserver?.disconnect();const Observer=this.ownerDocument.defaultView?.MutationObserver;!Observer||!this.isConnected||(this.itemObserver=new Observer(()=>this.onSlotChange()),this.itemObserver.observe(this,{childList:!0}))}pendingMembershipIsCurrent(){if(!this.pendingMove)return!1;const current=this.itemElements;return!this.disabled&&!this.pendingMove.item.disabled&&!this.pendingMove.target.disabled&&current.length===this.pendingMove.members.length&&current.every((item,index)=>item===this.pendingMove.members[index]&&item.value===this.pendingMove.values[index])&&current[this.pendingMove.toIndex]===this.pendingMove.target}connectedCallback(){super.connectedCallback(),this.refreshItemObserver(),this.syncBoundaryState()}willUpdate(changed){super.willUpdate(changed),changed.has("disabled")&&this.syncBoundaryState(),changed.has("controlled")&&this.pendingReconciliation&&(this.pendingReconciliation=null,this.syncBoundaryState())}disconnectedCallback(){this.itemObserver?.disconnect(),this.itemObserver=void 0,this.pendingFocusTarget=null,this.focusRestoreGeneration+=1,this.pendingMove=null,this.pendingReconciliation=null,this.moveToken+=1;for(const item of this.stateItems)releaseReorderOwnerState(item,this);this.stateItems.clear(),super.disconnectedCallback()}orderValues(items){return Object.freeze(items.map(item=>item.value))}scheduleFocusRestore(){this.scheduleAfterUpdate(()=>{const focusTarget=this.pendingFocusTarget;focusTarget&&this.restoreFocusAfterItemUpdate(focusTarget,this.focusRestoreGeneration)},"reorder-focus")}async restoreFocusAfterItemUpdate(focusTarget,generation){if(await focusTarget.item.updateComplete,!this.isConnected||generation!==this.focusRestoreGeneration||this.pendingFocusTarget!==focusTarget)return;this.pendingFocusTarget=null;const captured=focusTarget.preScheduleFocus;captured!=null&&captured!==this.ownerDocument.body&&captured.isConnected&&!composedContains(this,captured)||focusTarget.item.focusMoveButton(focusTarget.direction)}applyMove(item,direction,_fromIndex,toIndex){const target=this.itemElements[toIndex];direction==="up"?this.insertBefore(item,target):this.insertBefore(item,target.nextElementSibling),this.finishMove(item,direction,toIndex)}finishMove(item,direction,toIndex){this.syncBoundaryState();const focusDirection=(direction==="up"?item.atStart:item.atEnd)?direction==="up"?"down":"up":direction;this.pendingFocusTarget={item,direction:focusDirection,preScheduleFocus:deepActiveElementIn(this.ownerDocument)},this.focusRestoreGeneration+=1,this.scheduleFocusRestore();const newItems=this.itemElements,number=getNumberFormat(this.effectiveLocale);this.liveRegion?.announce(this.localize("reorderItemMoved",void 0,{index:number.format(toIndex+1),total:number.format(newItems.length)}),{force:!0})}commitMove(item,direction,fromIndex,toIndex,expectedValues){this.controlled?(this.pendingReconciliation={value:item.value,direction,toIndex,expectedValues},this.syncBoundaryState()):this.applyMove(item,direction,fromIndex,toIndex)}moveItem(item,direction){if(this.disabled||item.disabled||this.pendingMove||this.pendingReconciliation)return;const items=this.itemElements,fromIndex=items.indexOf(item);if(fromIndex<0)return;const toIndex=direction==="up"?fromIndex-1:fromIndex+1;if(toIndex<0||toIndex>=items.length)return;const reordered=items.slice();reordered.splice(fromIndex,1),reordered.splice(toIndex,0,item);const expectedValues=this.orderValues(reordered),transaction={token:++this.moveToken,phase:"dispatching",resolution:null,item,target:items[toIndex],direction,fromIndex,toIndex,members:[...items],values:items.map(member=>member.value),expectedValues};this.pendingMove=transaction;const request=this.emit("lr-reorder-request",Object.freeze({order:expectedValues,fromIndex,toIndex}),{cancelable:!0});if(!(this.pendingMove!==transaction||transaction.token!==this.moveToken)){if(!this.pendingMembershipIsCurrent()){this.pendingMove=null,this.syncBoundaryState();return}if(request.defaultPrevented){if(transaction.resolution==="revert"){this.pendingMove=null,this.syncBoundaryState();return}if(transaction.resolution==="finalize"){this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues);return}this.pendingMove={...transaction,phase:"held"},this.syncBoundaryState(),this.liveRegion?.announce(this.localize("reorderMovePending"),{force:!0});return}this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}}finalizePendingMove(){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="finalize";return}if(!this.pendingMembershipIsCurrent()){this.revertPendingMove();return}const{item,direction,fromIndex,toIndex,expectedValues}=this.pendingMove;this.pendingMove=null,this.syncBoundaryState(),this.commitMove(item,direction,fromIndex,toIndex,expectedValues)}revertPendingMove(options){if(!this.pendingMove)return;if(this.pendingMove.phase==="dispatching"){this.pendingMove.resolution="revert";return}const wasHeld=this.pendingMove.phase==="held";this.pendingMove=null,this.syncBoundaryState(),wasHeld&&!(options?.silent??!1)&&this.liveRegion?.announce(this.localize("reorderMoveCancelled"),{force:!0})}render(){return html`
       <div
         part="base"
         role="list"

package/dist/components/layout/responsive-panel/responsive-panel.class.d.ts

@@ -116,7 +116,7 @@ shape:LyraResponsivePanelShape;
 label:string;
 /** CSS length compared with this element's allocated inline size in `mode="auto"`.
 * At or below the breakpoint, the effective presentation is `'overlay'`. */
-overlayBreakpoint:string;private accessibleLabel;private belowBreakpoint;private resolvedMode;private readonly slotPresence;private headingText?;private resizeObserver?;private resizeView?;private lastTrigger?;private readonly deferredFocusReturn;private overlayHandle?;private readonly nativeModal;private headerObserver?;private headerObserverDocument?;private headerObserverGeneration;private ownerRealmGeneration;private overlayChromeActive;private focusOverlayAfterUpdate;private isFirstUpdate;
+overlayBreakpoint:string;private accessibleLabel;private belowBreakpoint;private resolvedMode;private readonly slotPresence;private headingText?;private resizeObserver?;private resizeView?;private lastTrigger?;private overlayHandle?;private readonly nativeModal;private headerObserver?;private headerObserverDocument?;private headerObserverGeneration;private ownerRealmGeneration;private overlayChromeActive;private focusOverlayAfterUpdate;private isFirstUpdate;
 /** The currently resolved presentation. Composition/measurement is the sole write authority. */
 get effectiveMode():LyraResponsivePanelEffectiveMode;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private resetOwnerRealmWork;private queueOwnerMicrotask;private activateOverlayChrome;private deactivateOverlayChrome;private observeAllocation;private readonly onWindowResize;private measureAllocation;private applyMeasuredInlineSize;private onHeaderSlotChange;private syncHeaderSlot;private resetHeaderObserver;private detectHeadingText;
 /**

package/dist/components/layout/responsive-panel/responsive-panel.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{resolveCssLength}from"../../../internal/css-length.js";import{DeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{LyraElement}from"../../../internal/lyra-element.js";import{literalSetConverter}from"../../../internal/converters.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{activateOverlay,deepActiveElement}from"../../../internal/overlay-manager.js";import{styles}from"./responsive-panel.styles.js";import{resolveResponsivePanelEffectiveMode}from"./responsive-panel-mode.js";import{LYRA_DEFAULT_responsivePanel}from"../../../internal/default-strings.generated.js";import{resolveResponsivePanelEffectiveMode as resolveResponsivePanelEffectiveMode2}from"./responsive-panel-mode.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]',DEFAULT_OVERLAY_BREAKPOINT="768px",RESPONSIVE_PANEL_MODE=literalSetConverter(["inline","overlay","auto"],"auto");class LyraResponsivePanel extends LyraElement{constructor(){super(...arguments),this.open=!1,this._mode="auto",this.shape="fullscreen",this.label="",this.overlayBreakpoint=DEFAULT_OVERLAY_BREAKPOINT,this.accessibleLabel=null,this.belowBreakpoint=!1,this.resolvedMode="inline",this.slotPresence=new SlotPresenceController(this),this.deferredFocusReturn=new DeferredFocusReturn,this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.close("escape")},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.close("escape"),this.open&&this.nativeModal.show()}}),this.headerObserverGeneration=0,this.ownerRealmGeneration=0,this.overlayChromeActive=!1,this.focusOverlayAfterUpdate=!1,this.isFirstUpdate=!0,this.onWindowResize=()=>this.measureAllocation(),this.onHeaderSlotChange=e=>{this.syncHeaderSlot(e.target.assignedElements({flatten:!0}))},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()}}static{this.defaultStrings={...super.defaultStrings,responsivePanel:LYRA_DEFAULT_responsivePanel}}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}get mode(){return this._mode}set mode(next){const normalized=RESPONSIVE_PANEL_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}get effectiveMode(){return this.resolvedMode}willUpdate(changed){if(super.willUpdate(changed),this.isFirstUpdate=!this.hasUpdated,this.isFirstUpdate&&(this.headingText=this.detectHeadingText()),!this.isFirstUpdate&&changed.has("overlayBreakpoint")&&this.isConnected&&this.measureAllocation(),(this.isFirstUpdate||changed.has("mode")||changed.has("belowBreakpoint"))&&(this.resolvedMode=resolveResponsivePanelEffectiveMode(this.mode,this.belowBreakpoint)),changed.has("open")&&this.open){const active=deepActiveElement(this.ownerDocument);this.lastTrigger=active&&typeof active.focus=="function"?active:void 0}const overlayOpen=this.resolvedMode==="overlay"&&this.open;if(overlayOpen!==this.overlayChromeActive)if(this.overlayChromeActive=overlayOpen,overlayOpen)this.activateOverlayChrome(),this.focusOverlayAfterUpdate=!0;else{const restoreFocus=changed.has("open")&&!this.open;this.deactivateOverlayChrome(restoreFocus);const opener=this.lastTrigger;restoreFocus&&opener&&this.deferredFocusReturn.schedule({host:this,candidates:()=>[opener],isCurrent:()=>!this.open})}changed.has("open")&&!this.open&&(this.lastTrigger=void 0)}updated(changed){super.updated(changed),this.open&&this.nativeModal.show(),!this.isFirstUpdate&&changed.has("resolvedMode")&&this.emit("lr-mode-change",{mode:this.resolvedMode}),this.focusOverlayAfterUpdate&&(this.focusOverlayAfterUpdate=!1,this.overlayHandle?.focusInitial())}connectedCallback(){super.connectedCallback(),this.measureAllocation(),this.observeAllocation();const overlayOpen=resolveResponsivePanelEffectiveMode(this.mode,this.belowBreakpoint)==="overlay"&&this.open;this.hasUpdated&&overlayOpen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateOverlayChrome(),this.queueOwnerMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&this.queueOwnerMicrotask(()=>{const slot=this.shadowRoot?.querySelector('slot[name="header"]');slot&&this.syncHeaderSlot(slot.assignedElements({flatten:!0}))})}disconnectedCallback(){this.nativeModal.hide(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.overlayHandle?.suspend(),this.deferredFocusReturn.cancel(),this.resetOwnerRealmWork(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.resetOwnerRealmWork(),this.isConnected&&(this.measureAllocation(),this.observeAllocation())}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.resetHeaderObserver()}queueOwnerMicrotask(callback,nextFrame=!1){const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration,run=()=>{this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||callback()};nextFrame?ownerWindow.requestAnimationFrame(run):ownerWindow.queueMicrotask(run)}activateOverlayChrome(){this.nativeModal.prepare(),this.deferredFocusReturn.cancel(),this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.close("escape"),onBackdrop:()=>this.close("backdrop"),restoreFocusTo:this.lastTrigger??null,lockScroll:!0,suspendWhenUnrendered:!0})}deactivateOverlayChrome(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1),this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0}observeAllocation(){if(!this.isConnected)return;this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver??=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this)??entries[0],inlineSize=entry?.contentBoxSize?.[0]?.inlineSize??entry?.contentRect.width;inlineSize!==void 0&&this.queueOwnerMicrotask(()=>this.applyMeasuredInlineSize(inlineSize),!0)}),this.resizeObserver.observe(this);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}measureAllocation(){const inlineSize=this.getBoundingClientRect().width;inlineSize>0&&this.applyMeasuredInlineSize(inlineSize)}applyMeasuredInlineSize(inlineSize){if(!Number.isFinite(inlineSize)||inlineSize<0)return;const resolved=resolveCssLength(this.overlayBreakpoint,{host:this}),fallback=resolveCssLength(DEFAULT_OVERLAY_BREAKPOINT,{host:this})??768,breakpoint=Math.max(0,resolved!==void 0&&Number.isFinite(resolved)?resolved:fallback);this.belowBreakpoint=inlineSize<=breakpoint}syncHeaderSlot(assigned){if(this.headingText=this.detectHeadingText(),this.resetHeaderObserver(),assigned.length===0||!this.isConnected)return;const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headerObserverGeneration,observer=new MutationObserverCtor(()=>{this.headerObserver!==observer||this.headerObserverDocument!==ownerDocument||this.headerObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.headingText=this.detectHeadingText())});this.headerObserver=observer,this.headerObserverDocument=ownerDocument;for(const element of assigned)observer.observe(element,{childList:!0,characterData:!0,subtree:!0})}resetHeaderObserver(){this.headerObserverGeneration+=1,this.headerObserver?.disconnect(),this.headerObserver=void 0,this.headerObserverDocument=void 0}detectHeadingText(){const headerChildren=Array.from(this.children).filter(el=>el.getAttribute("slot")==="header");if(headerChildren.length===0)return;const heading=headerChildren.find(el=>el.matches(HEADING_SELECTOR));return heading?heading.textContent?.trim()||void 0:headerChildren.map(el=>el.textContent?.trim()).filter(Boolean).join(" ")||void 0}close(reason="api"){this.open&&(this.emit("lr-close-request",{reason},{cancelable:!0}).defaultPrevented||(this.open=!1,this.emit("lr-close",{reason})))}show(){this.open=!0}hide(){this.close()}render(){const overlay=this.effectiveMode==="overlay",accessibleName=this.accessibleLabel??(this.label||this.headingText||this.localize("responsivePanel"));return this.nativeModal.render(html`
+import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{resolveCssLength}from"../../../internal/css-length.js";import{cancelDeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{LyraElement}from"../../../internal/lyra-element.js";import{literalSetConverter}from"../../../internal/converters.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{activateOverlay,deepActiveElement}from"../../../internal/overlay-manager.js";import{styles}from"./responsive-panel.styles.js";import{resolveResponsivePanelEffectiveMode}from"./responsive-panel-mode.js";import{LYRA_DEFAULT_responsivePanel}from"../../../internal/default-strings/layout.generated.js";import{resolveResponsivePanelEffectiveMode as resolveResponsivePanelEffectiveMode2}from"./responsive-panel-mode.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]',DEFAULT_OVERLAY_BREAKPOINT="768px",RESPONSIVE_PANEL_MODE=literalSetConverter(["inline","overlay","auto"],"auto");class LyraResponsivePanel extends LyraElement{constructor(){super(...arguments),this.open=!1,this._mode="auto",this.shape="fullscreen",this.label="",this.overlayBreakpoint=DEFAULT_OVERLAY_BREAKPOINT,this.accessibleLabel=null,this.belowBreakpoint=!1,this.resolvedMode="inline",this.slotPresence=new SlotPresenceController(this),this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.close("escape")},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.close("escape"),this.open&&this.nativeModal.show()}}),this.headerObserverGeneration=0,this.ownerRealmGeneration=0,this.overlayChromeActive=!1,this.focusOverlayAfterUpdate=!1,this.isFirstUpdate=!0,this.onWindowResize=()=>this.measureAllocation(),this.onHeaderSlotChange=e=>{this.syncHeaderSlot(e.target.assignedElements({flatten:!0}))},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()}}static{this.defaultStrings={...super.defaultStrings,responsivePanel:LYRA_DEFAULT_responsivePanel}}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}get mode(){return this._mode}set mode(next){const normalized=RESPONSIVE_PANEL_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}get effectiveMode(){return this.resolvedMode}willUpdate(changed){if(super.willUpdate(changed),this.isFirstUpdate=!this.hasUpdated,this.isFirstUpdate&&(this.headingText=this.detectHeadingText()),!this.isFirstUpdate&&changed.has("overlayBreakpoint")&&this.isConnected&&this.measureAllocation(),(this.isFirstUpdate||changed.has("mode")||changed.has("belowBreakpoint"))&&(this.resolvedMode=resolveResponsivePanelEffectiveMode(this.mode,this.belowBreakpoint)),changed.has("open")&&this.open){const active=deepActiveElement(this.ownerDocument);this.lastTrigger=active&&typeof active.focus=="function"?active:void 0}const overlayOpen=this.resolvedMode==="overlay"&&this.open;if(overlayOpen!==this.overlayChromeActive)if(this.overlayChromeActive=overlayOpen,overlayOpen)this.activateOverlayChrome(),this.focusOverlayAfterUpdate=!0;else{const restoreFocus=changed.has("open")&&!this.open;this.deactivateOverlayChrome(restoreFocus)}changed.has("open")&&!this.open&&(this.lastTrigger=void 0)}updated(changed){super.updated(changed),this.open&&this.nativeModal.show(),!this.isFirstUpdate&&changed.has("resolvedMode")&&this.emit("lr-mode-change",{mode:this.resolvedMode}),this.focusOverlayAfterUpdate&&(this.focusOverlayAfterUpdate=!1,this.overlayHandle?.focusInitial())}connectedCallback(){super.connectedCallback(),this.measureAllocation(),this.observeAllocation();const overlayOpen=resolveResponsivePanelEffectiveMode(this.mode,this.belowBreakpoint)==="overlay"&&this.open;this.hasUpdated&&overlayOpen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateOverlayChrome(),this.queueOwnerMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&this.queueOwnerMicrotask(()=>{const slot=this.shadowRoot?.querySelector('slot[name="header"]');slot&&this.syncHeaderSlot(slot.assignedElements({flatten:!0}))})}disconnectedCallback(){this.nativeModal.hide(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.overlayHandle?.suspend(),cancelDeferredFocusReturn(this),this.resetOwnerRealmWork(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,this.resetOwnerRealmWork(),this.isConnected&&(this.measureAllocation(),this.observeAllocation())}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.resetHeaderObserver()}queueOwnerMicrotask(callback,nextFrame=!1){const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration,run=()=>{this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||callback()};nextFrame?ownerWindow.requestAnimationFrame(run):ownerWindow.queueMicrotask(run)}activateOverlayChrome(){this.nativeModal.prepare(),this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.close("escape"),onBackdrop:()=>this.close("backdrop"),restoreFocusTo:this.lastTrigger??null,lockScroll:!0,suspendWhenUnrendered:!0,deferredReturn:()=>{const opener=this.lastTrigger;return opener?{candidates:()=>[opener],isCurrent:()=>!this.open}:void 0}})}deactivateOverlayChrome(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1),this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0}observeAllocation(){if(!this.isConnected)return;this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver??=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this)??entries[0],inlineSize=entry?.contentBoxSize?.[0]?.inlineSize??entry?.contentRect.width;inlineSize!==void 0&&this.queueOwnerMicrotask(()=>this.applyMeasuredInlineSize(inlineSize),!0)}),this.resizeObserver.observe(this);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}measureAllocation(){const inlineSize=this.getBoundingClientRect().width;inlineSize>0&&this.applyMeasuredInlineSize(inlineSize)}applyMeasuredInlineSize(inlineSize){if(!Number.isFinite(inlineSize)||inlineSize<0)return;const resolved=resolveCssLength(this.overlayBreakpoint,{host:this}),fallback=resolveCssLength(DEFAULT_OVERLAY_BREAKPOINT,{host:this})??768,breakpoint=Math.max(0,resolved!==void 0&&Number.isFinite(resolved)?resolved:fallback);this.belowBreakpoint=inlineSize<=breakpoint}syncHeaderSlot(assigned){if(this.headingText=this.detectHeadingText(),this.resetHeaderObserver(),assigned.length===0||!this.isConnected)return;const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headerObserverGeneration,observer=new MutationObserverCtor(()=>{this.headerObserver!==observer||this.headerObserverDocument!==ownerDocument||this.headerObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.headingText=this.detectHeadingText())});this.headerObserver=observer,this.headerObserverDocument=ownerDocument;for(const element of assigned)observer.observe(element,{childList:!0,characterData:!0,subtree:!0})}resetHeaderObserver(){this.headerObserverGeneration+=1,this.headerObserver?.disconnect(),this.headerObserver=void 0,this.headerObserverDocument=void 0}detectHeadingText(){const headerChildren=Array.from(this.children).filter(el=>el.getAttribute("slot")==="header");if(headerChildren.length===0)return;const heading=headerChildren.find(el=>el.matches(HEADING_SELECTOR));return heading?heading.textContent?.trim()||void 0:headerChildren.map(el=>el.textContent?.trim()).filter(Boolean).join(" ")||void 0}close(reason="api"){this.open&&(this.emit("lr-close-request",{reason},{cancelable:!0}).defaultPrevented||(this.open=!1,this.emit("lr-close",{reason})))}show(){this.open=!0}hide(){this.close()}render(){const overlay=this.effectiveMode==="overlay",accessibleName=this.accessibleLabel??(this.label||this.headingText||this.localize("responsivePanel"));return this.nativeModal.render(html`
       <div part="base" class=${overlay?"overlay":"inline"}>
         ${overlay?html`<div part="backdrop" @click=${this.onBackdropClick}></div>`:nothing}
         <div

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{styles}from"./scroller.styles.js";import{LYRA_DEFAULT_scrollNext,LYRA_DEFAULT_scrollPrevious,LYRA_DEFAULT_scrollerLabel}from"../../../internal/default-strings.generated.js";class LyraScroller extends LyraElement{constructor(){super(...arguments),this.orientation="horizontal",this.controls=!1,this.withoutScrollbar=!1,this.withoutShadow=!1,this.scrollStep=0,this.label="",this.atStart=!1,this.atEnd=!1,this.measured=!1,this.ownerRealmGeneration=0,this.updateEdges=()=>this.syncEdges(!1),this.onScroll=()=>{if(this.scrollFrame!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration,handle=ownerWindow.requestAnimationFrame(()=>{this.scrollFrame!==handle||this.scrollFrameWindow!==ownerWindow||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.scrollFrame=void 0,this.scrollFrameWindow=void 0,this.syncEdges(!0))});this.scrollFrame=handle,this.scrollFrameWindow=ownerWindow},this.onSlotChange=()=>{this.content&&this.resizeObserver?.observe(this.content),this.scheduleEdgeUpdate()}}static{this.defaultStrings={...super.defaultStrings,scrollNext:LYRA_DEFAULT_scrollNext,scrollPrevious:LYRA_DEFAULT_scrollPrevious,scrollerLabel:LYRA_DEFAULT_scrollerLabel}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.armResizeObserver()}firstUpdated(changed){super.firstUpdated(changed),this.armResizeObserver(),this.scheduleEdgeUpdate()}disconnectedCallback(){this.resetOwnerRealmWork(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetOwnerRealmWork()}armResizeObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected)return;if(this.resizeObserver&&this.resizeObserverDocument===ownerDocument){this.viewport&&this.resizeObserver.observe(this.viewport),this.content&&this.resizeObserver.observe(this.content);return}this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeObserverDocument=void 0;const ResizeObserverCtor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const generation=this.ownerRealmGeneration,observer=new ResizeObserverCtor(()=>{this.resizeObserver!==observer||this.resizeObserverDocument!==ownerDocument||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.updateEdges()});this.resizeObserver=observer,this.resizeObserverDocument=ownerDocument,observer.observe(this),this.viewport&&observer.observe(this.viewport),this.content&&observer.observe(this.content)}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.cancelScrollFrame(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeObserverDocument=void 0,this.measured=!1}scheduleEdgeUpdate(){const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration;ownerWindow.queueMicrotask(()=>{this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.updateEdges()})}willUpdate(changed){super.willUpdate(changed);const active=this.hasUpdated?this.renderRoot.activeElement:null;(active?.matches('[part~="previous"]')?this.atStart:active?.matches('[part~="next"]')&&this.atEnd)&&this.viewport?.focus()}updated(changed){super.updated(changed),(changed.has("orientation")||changed.has("controls"))&&this.scheduleEdgeUpdate()}edgeDetail(){const viewport=this.viewport;if(!viewport)return{scrollStart:!1,scrollEnd:!1,scrollLeft:0,scrollTop:0};const horizontal=this.orientation==="horizontal",max=horizontal?Math.max(0,viewport.scrollWidth-viewport.clientWidth):Math.max(0,viewport.scrollHeight-viewport.clientHeight),position=horizontal?viewport.scrollLeft:viewport.scrollTop,startPosition=horizontal&&this.effectiveDirection==="rtl"?-position:position;return{scrollStart:startPosition<=1,scrollEnd:startPosition>=max-1,scrollLeft:viewport.scrollLeft,scrollTop:viewport.scrollTop}}syncEdges(emitForPositionChange){const detail=this.edgeDetail(),changed=!this.measured||detail.scrollStart!==this.atStart||detail.scrollEnd!==this.atEnd;this.measured=!0,this.atStart=detail.scrollStart,this.atEnd=detail.scrollEnd,(changed||emitForPositionChange)&&this.emit("lr-scroll",detail)}cancelScrollFrame(){this.scrollFrame!==void 0&&this.scrollFrameWindow?.cancelAnimationFrame(this.scrollFrame),this.scrollFrame=void 0,this.scrollFrameWindow=void 0}get safeScrollStep(){return finiteRange(this.scrollStep,0,0)}scrollByDirection(direction){const viewport=this.viewport;if(!viewport)return;const horizontal=this.orientation==="horizontal",step=this.safeScrollStep,amount=step>0?step:horizontal?Math.max(1,viewport.clientWidth*.8):Math.max(1,viewport.clientHeight*.8),physicalDirection=horizontal&&this.effectiveDirection==="rtl"?-direction:direction;viewport.scrollBy(horizontal?{left:amount*physicalDirection}:{top:amount*direction})}scrollToEdge(edge){const viewport=this.viewport;if(!viewport)return;if(this.orientation==="horizontal"){const max=Math.max(0,viewport.scrollWidth-viewport.clientWidth),rtl=this.effectiveDirection==="rtl";viewport.scrollTo({left:edge==="start"?0:rtl?-max:max})}else viewport.scrollTo({top:edge==="start"?0:viewport.scrollHeight})}render(){const label=this.getAttribute("aria-label")??(this.label||this.localize("scrollerLabel")),vertical=this.orientation==="vertical";return html`<div part="base">
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{finiteRange}from"../../../internal/numbers.js";import{styles}from"./scroller.styles.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{LYRA_DEFAULT_scrollNext,LYRA_DEFAULT_scrollPrevious,LYRA_DEFAULT_scrollerLabel}from"../../../internal/default-strings/layout.generated.js";class LyraScroller extends LyraElement{constructor(){super(...arguments),this.orientation="horizontal",this.controls=!1,this.withoutScrollbar=!1,this.withoutShadow=!1,this.scrollStep=0,this.label="",this.atStart=!1,this.atEnd=!1,this.measured=!1,this.ownerRealmGeneration=0,this.updateEdges=()=>this.syncEdges(!1),this.onScroll=()=>{if(this.scrollFrame!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration,handle=ownerWindow.requestAnimationFrame(()=>{this.scrollFrame!==handle||this.scrollFrameWindow!==ownerWindow||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.scrollFrame=void 0,this.scrollFrameWindow=void 0,this.syncEdges(!0))});this.scrollFrame=handle,this.scrollFrameWindow=ownerWindow},this.onSlotChange=()=>{this.content&&this.resizeObserver?.observe(this.content),this.scheduleEdgeUpdate()}}static{this.defaultStrings={...super.defaultStrings,scrollNext:LYRA_DEFAULT_scrollNext,scrollPrevious:LYRA_DEFAULT_scrollPrevious,scrollerLabel:LYRA_DEFAULT_scrollerLabel}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.armResizeObserver()}firstUpdated(changed){super.firstUpdated(changed),this.armResizeObserver(),this.scheduleEdgeUpdate()}disconnectedCallback(){this.resetOwnerRealmWork(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetOwnerRealmWork()}armResizeObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected)return;if(this.resizeObserver&&this.resizeObserverDocument===ownerDocument){this.viewport&&this.resizeObserver.observe(this.viewport),this.content&&this.resizeObserver.observe(this.content);return}this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeObserverDocument=void 0;const ResizeObserverCtor=ownerDocument.defaultView?.ResizeObserver;if(!ResizeObserverCtor)return;const generation=this.ownerRealmGeneration,observer=new ResizeObserverCtor(()=>{this.resizeObserver!==observer||this.resizeObserverDocument!==ownerDocument||this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.updateEdges()});this.resizeObserver=observer,this.resizeObserverDocument=ownerDocument,observer.observe(this),this.viewport&&observer.observe(this.viewport),this.content&&observer.observe(this.content)}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.cancelScrollFrame(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeObserverDocument=void 0,this.measured=!1}scheduleEdgeUpdate(){const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration;ownerWindow.queueMicrotask(()=>{this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.updateEdges()})}willUpdate(changed){super.willUpdate(changed);const active=this.hasUpdated?shadowFocusTarget(this):null;(active?.matches('[part~="previous"]')?this.atStart:active?.matches('[part~="next"]')&&this.atEnd)&&this.viewport?.focus()}updated(changed){super.updated(changed),(changed.has("orientation")||changed.has("controls"))&&this.scheduleEdgeUpdate()}edgeDetail(){const viewport=this.viewport;if(!viewport)return{scrollStart:!1,scrollEnd:!1,scrollLeft:0,scrollTop:0};const horizontal=this.orientation==="horizontal",max=horizontal?Math.max(0,viewport.scrollWidth-viewport.clientWidth):Math.max(0,viewport.scrollHeight-viewport.clientHeight),position=horizontal?viewport.scrollLeft:viewport.scrollTop,startPosition=horizontal&&this.effectiveDirection==="rtl"?-position:position;return{scrollStart:startPosition<=1,scrollEnd:startPosition>=max-1,scrollLeft:viewport.scrollLeft,scrollTop:viewport.scrollTop}}syncEdges(emitForPositionChange){const detail=this.edgeDetail(),changed=!this.measured||detail.scrollStart!==this.atStart||detail.scrollEnd!==this.atEnd;this.measured=!0,this.atStart=detail.scrollStart,this.atEnd=detail.scrollEnd,(changed||emitForPositionChange)&&this.emit("lr-scroll",detail)}cancelScrollFrame(){this.scrollFrame!==void 0&&this.scrollFrameWindow?.cancelAnimationFrame(this.scrollFrame),this.scrollFrame=void 0,this.scrollFrameWindow=void 0}get safeScrollStep(){return finiteRange(this.scrollStep,0,0)}scrollByDirection(direction){const viewport=this.viewport;if(!viewport)return;const horizontal=this.orientation==="horizontal",step=this.safeScrollStep,amount=step>0?step:horizontal?Math.max(1,viewport.clientWidth*.8):Math.max(1,viewport.clientHeight*.8),physicalDirection=horizontal&&this.effectiveDirection==="rtl"?-direction:direction;viewport.scrollBy(horizontal?{left:amount*physicalDirection}:{top:amount*direction})}scrollToEdge(edge){const viewport=this.viewport;if(!viewport)return;if(this.orientation==="horizontal"){const max=Math.max(0,viewport.scrollWidth-viewport.clientWidth),rtl=this.effectiveDirection==="rtl";viewport.scrollTo({left:edge==="start"?0:rtl?-max:max})}else viewport.scrollTo({top:edge==="start"?0:viewport.scrollHeight})}render(){const label=this.getAttribute("aria-label")??(this.label||this.localize("scrollerLabel")),vertical=this.orientation==="vertical";return html`<div part="base">
       ${this.controls?html`<button
             part="control previous"
             type="button"

package/dist/components/layout/segmented/segmented.class.d.ts

@@ -47,10 +47,13 @@ icon?:unknown;disabled?:boolean;}export interface LyraSegmentedEventMap{'lr-chan
 *   `size` tier (sets both `block-size` and `min-block-size`) so the row can sit flush beside a
 *   hard-sized toolbar control. **Genuinely unset by default** — while unset each tier keeps its
 *   own `--lr-segmented-track-min-height` floor and the track grows with its content.
-* @cssprop [--lr-segmented-selected-bg=var(--lr-color-surface)] - Background of the checked
-*   segment. Scoped to `[aria-checked='true']` only, so it never repaints a hovered unselected
-*   segment (which is what hijacking `--lr-color-surface` library-wide used to do).
-* @cssprop [--lr-segmented-selected-color=var(--lr-color-text)] - Text color of the checked segment.
+* @cssprop [--lr-segmented-selected-bg=var(--lr-color-text)] - Background of the checked
+*   segment. The default is the inverse of the surface, so the state stays at least 3:1 against its
+*   container in every look and mode; when you override it, also set
+*   `--lr-segmented-selected-color` to a label colour that contrasts with your fill. Scoped to `[aria-checked='true']` only, so it never
+*   repaints a hovered unselected segment (which is what hijacking `--lr-color-surface` library-wide used to do).
+* @cssprop [--lr-segmented-selected-color=var(--lr-color-surface)] - Text color of the checked segment,
+*   paired with the default `--lr-segmented-selected-bg` fill.
 * @cssprop [--lr-segmented-selected-font-weight=var(--lr-font-weight-semibold)] - Font weight of the
 *   checked segment.
 * @cssprop [--lr-segmented-selected-shadow=var(--lr-shadow-xs)] - Box shadow lifting the checked

package/dist/components/layout/segmented/segmented.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./segmented.styles.js";import{activeElementIn}from"../../../internal/active-element.js";const MAX_SEGMENTED_ITEMS=256;function snapshotSegmentedItems(value){try{if(!Array.isArray(value))return Object.freeze([])}catch{return Object.freeze([])}const seenValues=new Set,normalized=[];let length=0;try{length=Math.min(value.length,MAX_SEGMENTED_ITEMS)}catch{return Object.freeze(normalized)}for(let index=0;index<length;index+=1)try{const candidate=value[index];if(!candidate||typeof candidate!="object")continue;const record=candidate,itemValue=record.value,label=record.label,disabled=record.disabled,icon=record.icon;if(typeof itemValue!="string"||itemValue.length===0||itemValue!==itemValue.trim()||seenValues.has(itemValue)||typeof label!="string"||label.trim()===""||disabled!==void 0&&typeof disabled!="boolean")continue;seenValues.add(itemValue),normalized.push(Object.freeze({value:itemValue,label,...icon!==void 0?{icon}:{},...disabled!==void 0?{disabled}:{}}))}catch{}return Object.freeze(normalized)}class LyraSegmented extends LyraElement{constructor(){super(...arguments),this.effectiveItems=Object.freeze([]),this.value="",this.label="",this.disabled=!1,this.size="m",this.rehomeSegmentFocus=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]')),this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items.map((item,index)=>({item,index})).filter(({item})=>!item.disabled);if(navigable.length===0)return;const focusedIndex=this.keyboardOriginIndex(e),selectedIndex=this.items.indexOf(this.selectedItem),originIndex=focusedIndex>=0?focusedIndex:selectedIndex,currentIndex=selectedIndex<0&&this.segmentButtonAt(originIndex)?.tabIndex===0?-1:navigable.findIndex(({index})=>index===originIndex),targetIndex=resolveListMove(e,{count:navigable.length,current:currentIndex,orientation:"both",direction:this.effectiveDirection});if(targetIndex===null)return;e.preventDefault();const target=navigable[targetIndex];this.select(target.item),this.focusItem(target.index)}}static{this.styles=[LyraElement.styles,sizes,scrollOverflowFadeStyles,styles]}get items(){return this.effectiveItems}set items(value){if(value===this.itemsSource||value===this.effectiveItems)return;this.itemsSource=value;const previous=this.effectiveItems;this.effectiveItems=snapshotSegmentedItems(value),this.requestUpdate("items",previous)}select(item){if(!(item.disabled||this.disabled)){if(item!==this.selectedItem){const valueChanged=item.value!==this.value;this.selectedItem=item,valueChanged&&(this.value=item.value,this.emit("lr-change",{value:item.value}))}this.emit("lr-activate",{value:item.value})}}segmentButtonAt(index){return this.renderRoot.querySelector(`[part="segment"][data-index="${index}"]`)}focusItem(index){this.segmentButtonAt(index)?.focus()}scrollToValue(value){const base=this.renderRoot.querySelector('[part="base"]'),segment=this.segmentButtonAt(this.items.findIndex(item=>item.value===value));if(!base||!segment)return;const track=base.getBoundingClientRect(),rect=segment.getBoundingClientRect(),left=rect.left<track.left?rect.left-track.left:Math.max(0,rect.right-track.right);left&&base.scrollBy({left,behavior:prefersReducedMotion(this)?"auto":"smooth"})}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="segment"]')),this.rehomeSegmentFocus&&(this.rehomeSegmentFocus=!1,this.renderRoot.querySelector('[part="segment"][tabindex="0"]')?.focus()),changed.has("value")&&changed.get("value")!==void 0&&this.value&&this.scrollToValue(this.value)}willUpdate(changed){super.willUpdate(changed),changed.has("items")&&activeElementIn(this.renderRoot)?.getAttribute("part")==="segment"&&(this.rehomeSegmentFocus=!0),(changed.has("value")||changed.has("items")&&(!this.selectedItem||!this.items.includes(this.selectedItem)||this.selectedItem.value!==this.value||this.selectedItem.disabled))&&(this.selectedItem=this.items.find(item=>item.value===this.value&&!item.disabled))}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="segment"&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.renderRoot),candidate=fromEvent??(focused?.getAttribute("part")==="segment"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:-1}render(){const ariaLabel=hostAriaLabel(this)??(this.label||nothing),selectedIndex=this.items.indexOf(this.selectedItem),fallbackSelectedIndex=selectedIndex>=0?selectedIndex:this.items.findIndex(item=>item.value===this.value&&!item.disabled),tabbableIndex=fallbackSelectedIndex!==-1?fallbackSelectedIndex:this.items.findIndex(item=>!item.disabled);return html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sizes}from"../../../internal/sizes.styles.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{styles}from"./segmented.styles.js";import{shadowFocusTarget}from"../../../internal/active-element.js";const MAX_SEGMENTED_ITEMS=256;function snapshotSegmentedItems(value){try{if(!Array.isArray(value))return Object.freeze([])}catch{return Object.freeze([])}const seenValues=new Set,normalized=[];let length=0;try{length=Math.min(value.length,MAX_SEGMENTED_ITEMS)}catch{return Object.freeze(normalized)}for(let index=0;index<length;index+=1)try{const candidate=value[index];if(!candidate||typeof candidate!="object")continue;const record=candidate,itemValue=record.value,label=record.label,disabled=record.disabled,icon=record.icon;if(typeof itemValue!="string"||itemValue.length===0||itemValue!==itemValue.trim()||seenValues.has(itemValue)||typeof label!="string"||label.trim()===""||disabled!==void 0&&typeof disabled!="boolean")continue;seenValues.add(itemValue),normalized.push(Object.freeze({value:itemValue,label,...icon!==void 0?{icon}:{},...disabled!==void 0?{disabled}:{}}))}catch{}return Object.freeze(normalized)}class LyraSegmented extends LyraElement{constructor(){super(...arguments),this.effectiveItems=Object.freeze([]),this.value="",this.label="",this.disabled=!1,this.size="m",this.rehomeSegmentFocus=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="base"]')),this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items.map((item,index)=>({item,index})).filter(({item})=>!item.disabled);if(navigable.length===0)return;const focusedIndex=this.keyboardOriginIndex(e),selectedIndex=this.items.indexOf(this.selectedItem),originIndex=focusedIndex>=0?focusedIndex:selectedIndex,currentIndex=selectedIndex<0&&this.segmentButtonAt(originIndex)?.tabIndex===0?-1:navigable.findIndex(({index})=>index===originIndex),targetIndex=resolveListMove(e,{count:navigable.length,current:currentIndex,orientation:"both",direction:this.effectiveDirection});if(targetIndex===null)return;e.preventDefault();const target=navigable[targetIndex];this.select(target.item),this.focusItem(target.index)}}static{this.styles=[LyraElement.styles,sizes,scrollOverflowFadeStyles,styles]}get items(){return this.effectiveItems}set items(value){if(value===this.itemsSource||value===this.effectiveItems)return;this.itemsSource=value;const previous=this.effectiveItems;this.effectiveItems=snapshotSegmentedItems(value),this.requestUpdate("items",previous)}select(item){if(!(item.disabled||this.disabled)){if(item!==this.selectedItem){const valueChanged=item.value!==this.value;this.selectedItem=item,valueChanged&&(this.value=item.value,this.emit("lr-change",{value:item.value}))}this.emit("lr-activate",{value:item.value})}}segmentButtonAt(index){return this.renderRoot.querySelector(`[part="segment"][data-index="${index}"]`)}focusItem(index){this.segmentButtonAt(index)?.focus()}scrollToValue(value){const base=this.renderRoot.querySelector('[part="base"]'),segment=this.segmentButtonAt(this.items.findIndex(item=>item.value===value));if(!base||!segment)return;const track=base.getBoundingClientRect(),rect=segment.getBoundingClientRect(),left=rect.left<track.left?rect.left-track.left:Math.max(0,rect.right-track.right);left&&base.scrollBy({left,behavior:prefersReducedMotion(this)?"auto":"smooth"})}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="segment"]')),this.rehomeSegmentFocus&&(this.rehomeSegmentFocus=!1,this.renderRoot.querySelector('[part="segment"][tabindex="0"]')?.focus()),changed.has("value")&&changed.get("value")!==void 0&&this.value&&this.scrollToValue(this.value)}willUpdate(changed){super.willUpdate(changed),changed.has("items")&&shadowFocusTarget(this)?.getAttribute("part")==="segment"&&(this.rehomeSegmentFocus=!0),(changed.has("value")||changed.has("items")&&(!this.selectedItem||!this.items.includes(this.selectedItem)||this.selectedItem.value!==this.value||this.selectedItem.disabled))&&(this.selectedItem=this.items.find(item=>item.value===this.value&&!item.disabled))}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="segment"&&candidate2.getRootNode()===this.renderRoot),focused=shadowFocusTarget(this),candidate=fromEvent??(focused?.getAttribute("part")==="segment"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:-1}render(){const ariaLabel=hostAriaLabel(this)??(this.label||nothing),selectedIndex=this.items.indexOf(this.selectedItem),fallbackSelectedIndex=selectedIndex>=0?selectedIndex:this.items.findIndex(item=>item.value===this.value&&!item.disabled),tabbableIndex=fallbackSelectedIndex!==-1?fallbackSelectedIndex:this.items.findIndex(item=>!item.disabled);return html`
       <div
         part="base"
         role="radiogroup"

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

@@ -1 +1 @@
-import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; --_lr-segmented-track-min-height: var(--lr-form-control-height); --_lr-segmented-segment-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-segmented-font-size: var(--lr-form-control-font-size); } [part="base"] { display: inline-flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-inline-size: 0; min-block-size: var( --lr-segmented-track-height, var( --lr-segmented-track-min-height, var(--_lr-segmented-track-min-height) ) ); block-size: var(--lr-segmented-track-height, auto); box-sizing: border-box; background: var(--lr-segmented-track-bg, transparent); border: var(--lr-border-width-thin) solid var(--lr-segmented-track-border-color, var(--lr-color-border)); border-radius: var(--lr-segmented-track-radius, var(--lr-radius)); padding: var(--lr-segmented-track-padding, var(--lr-size-0-125rem)); gap: var(--lr-segmented-track-gap, var(--lr-size-0-125rem)); } [part="segment"] { min-inline-size: 0; border: none; border-radius: var( --lr-segmented-segment-radius, calc(var(--lr-form-control-radius) * 0.7) ); background: transparent; color: var(--lr-color-text-quiet); font: inherit; font-size: var(--lr-segmented-font-size, var(--_lr-segmented-font-size)); padding: var( --lr-segmented-segment-padding, var(--_lr-segmented-segment-padding) ); cursor: pointer; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } :host([size="2xs"]) [part="segment"], :host([size="xs"]) [part="segment"] { min-inline-size: var(--lr-size-1-5rem); min-block-size: var(--lr-size-1-5rem); } [part="segment-icon"] { display: inline-flex; align-items: center; margin-inline-end: var(--lr-space-xs); block-size: var(--lr-size-1em); max-inline-size: var(--lr-size-2-5rem); } [part="segment"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :where([part="segment"]):hover:where( :not([aria-disabled="true"]):not([aria-checked="true"]) ) { color: var(--lr-segmented-hover-color, var(--lr-color-text)); background: var(--lr-segmented-hover-bg, transparent); box-shadow: var(--lr-segmented-hover-shadow, none); } :where([part="segment"]):active:where( :not([aria-disabled="true"]):not([aria-checked="true"]) ) { background: var( --lr-segmented-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var( --lr-segmented-active-color, var(--lr-segmented-hover-color, var(--lr-color-text)) ); } [part="segment"]:focus-visible { ${focusRing} } [part="segment"][aria-checked="true"] { background: var(--lr-segmented-selected-bg, var(--lr-color-surface)); color: var(--lr-segmented-selected-color, var(--lr-color-text)); font-weight: var( --lr-segmented-selected-font-weight, var(--lr-font-weight-semibold) ); box-shadow: var(--lr-segmented-selected-shadow, var(--lr-shadow-xs)); } `;export{styles};
+import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; --_lr-segmented-track-min-height: var(--lr-form-control-height); --_lr-segmented-segment-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-segmented-font-size: var(--lr-form-control-font-size); } [part="base"] { display: inline-flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-inline-size: 0; min-block-size: var( --lr-segmented-track-height, var( --lr-segmented-track-min-height, var(--_lr-segmented-track-min-height) ) ); block-size: var(--lr-segmented-track-height, auto); box-sizing: border-box; background: var(--lr-segmented-track-bg, transparent); border: var(--lr-border-width-thin) solid var(--lr-segmented-track-border-color, var(--lr-color-border)); border-radius: var(--lr-segmented-track-radius, var(--lr-radius)); padding: var(--lr-segmented-track-padding, var(--lr-size-0-125rem)); gap: var(--lr-segmented-track-gap, var(--lr-size-0-125rem)); } [part="segment"] { min-inline-size: 0; border: none; border-radius: var( --lr-segmented-segment-radius, calc(var(--lr-form-control-radius) * 0.7) ); background: transparent; color: var(--lr-color-text-quiet); font: inherit; font-size: var(--lr-segmented-font-size, var(--_lr-segmented-font-size)); padding: var( --lr-segmented-segment-padding, var(--_lr-segmented-segment-padding) ); cursor: pointer; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } :host([size="2xs"]) [part="segment"], :host([size="xs"]) [part="segment"] { min-inline-size: var(--lr-size-1-5rem); min-block-size: var(--lr-size-1-5rem); } [part="segment-icon"] { display: inline-flex; align-items: center; margin-inline-end: var(--lr-space-xs); block-size: var(--lr-size-1em); max-inline-size: var(--lr-size-2-5rem); } [part="segment"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } :where([part="segment"]):hover:where( :not([aria-disabled="true"]):not([aria-checked="true"]) ) { color: var(--lr-segmented-hover-color, var(--lr-color-text)); background: var(--lr-segmented-hover-bg, transparent); box-shadow: var(--lr-segmented-hover-shadow, none); } :where([part="segment"]):active:where( :not([aria-disabled="true"]):not([aria-checked="true"]) ) { background: var( --lr-segmented-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var( --lr-segmented-active-color, var(--lr-segmented-hover-color, var(--lr-color-text)) ); } [part="segment"]:focus-visible { ${focusRing} } [part="segment"][aria-checked="true"] { background: var(--lr-segmented-selected-bg, var(--lr-color-text)); color: var(--lr-segmented-selected-color, var(--lr-color-surface)); font-weight: var( --lr-segmented-selected-font-weight, var(--lr-font-weight-semibold) ); box-shadow: var(--lr-segmented-selected-shadow, var(--lr-shadow-xs)); } `;export{styles};

package/dist/components/layout/split-panel/split-panel.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{SeparatorDragController,separatorArrowDirection,separatorCoordinate,separatorDelta}from"../../../internal/separator-drag.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./split-panel.styles.js";import{LYRA_DEFAULT_resizeDivider,LYRA_DEFAULT_resizeValuePercent}from"../../../internal/default-strings.generated.js";const DEFAULT_POSITION=50,DEFAULT_SNAP_THRESHOLD=12,KEYBOARD_STEP_PERCENT=1,MAX_SNAP_SOURCE_CODE_UNITS=16384,MAX_SNAP_TOKENS=256,POSITION_EPSILON=1e-4;import{SNAP_NONE}from"./split-panel-snap.js";const snapConverter={fromAttribute(value){return value??""},toAttribute(value){return typeof value=="string"&&value!==""?value:null}};function isAsciiDigit(code){return code>=48&&code<=57}function matchesAsciiToken(source,index,token){if(index+token.length>source.length)return!1;for(let offset=0;offset<token.length;offset+=1){const sourceCode=source.charCodeAt(index+offset);if((sourceCode>=65&&sourceCode<=90?sourceCode+32:sourceCode)!==token.charCodeAt(offset))return!1}return!0}function isSnapWhitespace(code){return code>=9&&code<=13||code===32||code===160||code===5760||code>=8192&&code<=8202||code===8232||code===8233||code===8239||code===8287||code===12288||code===65279}function skipSnapWhitespace(source,start){let cursor=start;for(;cursor<source.length&&isSnapWhitespace(source.charCodeAt(cursor));)cursor+=1;return cursor}function scanSnapLength(source,start){let cursor=start;if(isAsciiDigit(source.charCodeAt(cursor))){for(;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1}else if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;else return{end:start+1,recognized:!1};const numberEnd=cursor;let unit;if(source.charCodeAt(cursor)===37?(unit="%",cursor+=1):matchesAsciiToken(source,cursor,"px")&&(unit="px",cursor+=2),unit===void 0)return{end:Math.max(start+1,numberEnd),recognized:!1};const numericValue=Number(source.slice(start,numberEnd));return{end:cursor,recognized:!0,token:Number.isFinite(numericValue)?Object.freeze({value:numericValue,unit}):void 0}}function normalizeSnapTokens(value){const source=value.slice(0,MAX_SNAP_SOURCE_CODE_UNITS),tokens=[];let index=0;for(;index<source.length&&tokens.length<MAX_SNAP_TOKENS;){if(matchesAsciiToken(source,index,"repeat(")){const innerStart=skipSnapWhitespace(source,index+7),scanned2=scanSnapLength(source,innerStart);if(scanned2.recognized){const close=skipSnapWhitespace(source,scanned2.end);if(source.charCodeAt(close)===41){scanned2.token&&tokens.push(Object.freeze({repeated:!0,...scanned2.token})),index=close+1;continue}scanned2.token&&tokens.push(Object.freeze({repeated:!1,...scanned2.token}))}index=Math.max(index+7,scanned2.end);continue}const scanned=scanSnapLength(source,index);scanned.recognized&&scanned.token&&tokens.push(Object.freeze({repeated:!1,...scanned.token})),index=Math.max(index+1,scanned.end)}return Object.freeze(tokens)}function nearlyEqual(left,right){return left===right?!0:left==null||right==null?!1:Math.abs(left-right)<=POSITION_EPSILON}class LyraSplitPanel extends LyraElement{constructor(){super(...arguments),this._startPosition=DEFAULT_POSITION,this._orientation="horizontal",this._snapThreshold=DEFAULT_SNAP_THRESHOLD,this.availableSize=0,this.measuredConstraintBounds={min:0,max:0},this.resizeWriteGuard=new VetoWriteGuard,this.resizeRequestSequence=0,this.dragController=new SeparatorDragController(this,event=>this.onPointerMove(event),event=>this.onPointerEnd(event)),this.dividerSourceSnapshots=new Map,this.dividerSourceObserverGeneration=0,this.cachedNormalizedSnapTokens=Object.freeze([]),this.disabled=!1,this._snap="",this.onWindowResize=()=>{this.measureAndSynchronize(!1)},this.onDividerSlotChange=()=>{this.syncDividerSources()},this.onPointerMove=event=>{const drag=this.drag;if(!drag||event.pointerId!==drag.pointerId)return;if(this.disabled||this.effectiveDirection==="rtl"!==drag.rtl||this.effectiveOrientation!==drag.orientation||this.primary!==drag.primary||!nearlyEqual(this.availableSize,drag.size)){this.stopDragging();return}let delta=separatorDelta(drag.startCoordinate,event,this.effectiveOrientation==="vertical"?"block":"inline",drag.rtl);this.primary==="end"&&(delta*=-1),this.requestReposition(drag.startPrimaryPixels+delta,!0,drag.bounds)&&(drag.acceptedResize=!0)},this.onPointerEnd=event=>{const drag=this.drag;if(!drag||event.pointerId!==drag.pointerId)return;const bounds=this.constraintBounds(),shouldSettle=event.type==="pointerup"&&drag.acceptedResize&&!this.disabled&&this.effectiveOrientation===drag.orientation&&this.primary===drag.primary&&this.effectiveDirection==="rtl"===drag.rtl&&nearlyEqual(this.availableSize,drag.size)&&nearlyEqual(bounds.min,drag.bounds.min)&&nearlyEqual(bounds.max,drag.bounds.max);this.stopDragging(),shouldSettle&&this.emitResizeChange()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider,resizeValuePercent:LYRA_DEFAULT_resizeValuePercent}}static{this.styles=[LyraElement.styles,styles]}get position(){const start=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);return this.primary==="end"?100-start:start}set position(value){markVetoGuardWrite(this.resizeWriteGuard);const oldPosition=this.position,oldPixels=this.positionInPixels,next=finiteRange(value,DEFAULT_POSITION,0,100);this.pendingPositionInPixels=void 0;const layoutSize=this.measuredLayoutSize();if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next/100*layoutSize,!1,oldPosition,oldPixels);return}this._startPosition=this.primary==="end"?100-next:next,this.preservedPrimaryPixels=void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get positionInPixels(){return this.pendingPositionInPixels!=null?this.pendingPositionInPixels:this.availableSize<=0?0:this.position/100*this.availableSize}set positionInPixels(value){markVetoGuardWrite(this.resizeWriteGuard);const oldPosition=this.position,oldPixels=this.positionInPixels;if(value==null){this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=this.availableSize>0?this.positionInPixels:void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels);return}const fallback=this.positionInPixels??DEFAULT_POSITION/100*this.availableSize,layoutSize=this.measuredLayoutSize(),next=finiteRange(value,fallback,0,layoutSize>0?layoutSize:Number.MAX_VALUE);if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next,!1,oldPosition,oldPixels);return}this.pendingPositionInPixels=next,this.preservedPrimaryPixels=next,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get orientation(){return this._orientation}set orientation(value){const next=value==="vertical"?"vertical":"horizontal";if(next===this._orientation)return;const old=this._orientation,oldVertical=this.vertical;this._orientation=next,this.requestUpdate("orientation",old),this.requestUpdate("vertical",oldVertical)}get vertical(){return this.orientation==="vertical"}set vertical(value){this.orientation=value?"vertical":"horizontal"}get primary(){return this._primary}set primary(value){const next=value==="start"||value==="end"?value:void 0;if(next===this._primary)return;this.stopDragging();const oldPrimary=this._primary,oldPosition=this.position,oldPixels=this.positionInPixels,layoutSize=this.measuredLayoutSize(),referencePixels=layoutSize>0&&!oldPrimary?oldPosition/100*layoutSize:oldPixels;this._primary=next,layoutSize>0?(this.availableSize=layoutSize,this.applyPrimaryPixels(referencePixels,!1,oldPosition,oldPixels)):(this._startPosition=next==="end"?100-oldPosition:oldPosition,this.preservedPrimaryPixels=this.pendingPositionInPixels??oldPixels),this.requestUpdate("primary",oldPrimary)}get snap(){return this._snap}set snap(value){const old=this._snap;this._snap=value??"",this.requestUpdate("snap",old)}get snapThreshold(){return this._snapThreshold}set snapThreshold(value){const old=this._snapThreshold;this._snapThreshold=finiteRange(value,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE),this.requestUpdate("snapThreshold",old)}get effectiveOrientation(){return this.orientation}measuredLayoutSize(){return this.isConnected?this.axisSize(this.baseElement):0}connectedCallback(){const authoredOrientation=this.getAttribute("orientation");super.connectedCallback(),authoredOrientation!==null&&(this.orientation=authoredOrientation==="vertical"?"vertical":"horizontal"),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncDividerSources(),this.observeSize(),this.measureAndSynchronize(!1))})}disconnectedCallback(){this.stopDragging(),this.resetDividerSourceObserver(),this.restoreDividerSources(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.syncDividerSources(),this.measureAndSynchronize(!0),this.observeSize()}updated(changed){super.updated(changed),changed.has("disabled")&&this.disabled&&this.stopDragging(),(changed.has("orientation")||changed.has("vertical"))&&(this.stopDragging(),this.measureAndSynchronize(!1))}requestSynchronizedUpdate(oldPosition,oldPixels){nearlyEqual(oldPosition,this.position)||this.requestUpdate("position",oldPosition),nearlyEqual(oldPixels,this.positionInPixels)||this.requestUpdate("positionInPixels",oldPixels)}axisSize(element){if(!element)return 0;const rect=element.getBoundingClientRect(),measured=this.effectiveOrientation==="vertical"?rect.height:rect.width;return finiteRange(measured,0,0,Number.MAX_VALUE)}constraintBounds(){const size=this.availableSize,min=finiteRange(this.axisSize(this.minProbe),0,0,size),rawMax=this.maxProbe?this.axisSize(this.maxProbe):size,max=finiteRange(rawMax,size,min,size);return{min,max}}resolvePrimaryPixels(requestedPixels,useSnap,fallbackPixels,bounds=this.constraintBounds()){const size=this.availableSize,proposed=finiteRange(requestedPixels,fallbackPixels??DEFAULT_POSITION/100*size,0,size),snapped=useSnap?this.applySnap(proposed,size):proposed,{min,max}=bounds;return finiteRange(snapped,proposed,min,max)}applyPrimaryPixels(requestedPixels,useSnap,oldPosition=this.position,oldPixels=this.positionInPixels,scheduleUpdate=!0,resolvedPrimaryPixels){const size=this.availableSize;if(size<=0)return this.pendingPositionInPixels=finiteRange(requestedPixels,0,0,Number.MAX_VALUE),this.preservedPrimaryPixels=this.pendingPositionInPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!1;const primaryPixels=resolvedPrimaryPixels??this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels),primaryPercent=primaryPixels/size*100;return this._startPosition=this.primary==="end"?100-primaryPercent:primaryPercent,this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=primaryPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!nearlyEqual(oldPosition,this.position)||!nearlyEqual(oldPixels,this.positionInPixels)}requestReposition(requestedPixels,useSnap,bounds=this.constraintBounds()){if(this.availableSize<=0)return!1;const oldPosition=this.position,oldPixels=this.positionInPixels,primaryPixels=this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels,bounds),position=primaryPixels/this.availableSize*100;if(nearlyEqual(oldPosition,position)&&nearlyEqual(oldPixels,primaryPixels))return!1;const detail=Object.freeze({position,positionInPixels:primaryPixels}),snapshot={drag:this.drag,disabled:this.disabled,primary:this.primary,orientation:this.effectiveOrientation,direction:this.effectiveDirection,size:this.availableSize,snap:this.snap,snapThreshold:this.snapThreshold},requestSequence=++this.resizeRequestSequence;this.resizeWriteGuard.open();const resizeRequest=this.emit("lr-resize-request",detail,{cancelable:!0}),request=this.emit("lr-reposition-request",detail,{cancelable:!0});if(resizeRequest.defaultPrevented||request.defaultPrevented||this.resizeWriteGuard.touched)return!1;const currentBounds=this.constraintBounds();return this.drag!==snapshot.drag||this.resizeRequestSequence!==requestSequence||this.disabled||this.disabled!==snapshot.disabled||this.primary!==snapshot.primary||this.effectiveOrientation!==snapshot.orientation||this.effectiveDirection!==snapshot.direction||!nearlyEqual(this.availableSize,snapshot.size)||this.snap!==snapshot.snap||this.snapThreshold!==snapshot.snapThreshold||!nearlyEqual(this.position,oldPosition)||!nearlyEqual(this.positionInPixels,oldPixels)||!nearlyEqual(currentBounds.min,bounds.min)||!nearlyEqual(currentBounds.max,bounds.max)?(snapshot.drag&&this.drag===snapshot.drag&&this.stopDragging(),!1):this.applyPrimaryPixels(requestedPixels,useSnap,oldPosition,oldPixels,!0,primaryPixels)?(this.emit("lr-resize",Object.freeze({position:this.position,positionInPixels:this.positionInPixels})),this.emit("lr-reposition",null),!0):!1}measureAndSynchronize(initial){const nextSize=this.axisSize(this.baseElement);if(nextSize<=0)return;const oldPosition=this.position,oldPixels=this.positionInPixels,pending=this.pendingPositionInPixels,preserved=this.preservedPrimaryPixels,sizeChanged=!nearlyEqual(this.availableSize,nextSize);this.availableSize=nextSize;const nextBounds=this.constraintBounds();this.drag&&(sizeChanged||!nearlyEqual(nextBounds.min,this.drag.bounds.min)||!nearlyEqual(nextBounds.max,this.drag.bounds.max))&&this.stopDragging(),this.measuredConstraintBounds=nextBounds,pending!=null?this.applyPrimaryPixels(pending,!1,oldPosition,oldPixels,!1):!initial&&sizeChanged&&this.primary&&preserved!=null?this.applyPrimaryPixels(preserved,!1,oldPosition,oldPixels,!1):this.applyPrimaryPixels(this.position/100*nextSize,!1,oldPosition,oldPixels,!1),this.synchronizeMeasuredDom()}synchronizeMeasuredDom(){const startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);if(this.baseElement?.style.setProperty("--_lr-split-panel-start-position",`${startPosition}%`),this.dividerElement){const bounds=this.ariaBounds,position=Math.round(this.position);this.dividerElement.setAttribute("aria-valuenow",String(position)),this.dividerElement.setAttribute("aria-valuetext",this.resizeValueText(position)),this.dividerElement.setAttribute("aria-valuemin",String(Math.round(bounds.min))),this.dividerElement.setAttribute("aria-valuemax",String(Math.round(bounds.max)))}const reflectedPosition=String(this.position);this.getAttribute("position")!==reflectedPosition&&this.setAttribute("position",reflectedPosition)}observeSize(){if(this.resizeObserver||this.resizeView||!this.isConnected)return;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver=new ResizeObserverConstructor(()=>this.measureAndSynchronize(!1)),this.baseElement&&this.resizeObserver.observe(this.baseElement),this.minProbe&&this.resizeObserver.observe(this.minProbe),this.maxProbe&&this.resizeObserver.observe(this.maxProbe);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}snapshotDividerSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert}}adoptDividerSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current)}makeDividerSourceInert(source,snapshot){source.hasAttribute("inert")||source.setAttribute("inert",""),snapshot.appliedInert=source.getAttribute("inert")}restoreDividerSource(source,snapshot){this.adoptDividerSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreDividerSources(){for(const[source,snapshot]of this.dividerSourceSnapshots)this.restoreDividerSource(source,snapshot);this.dividerSourceSnapshots.clear()}resetDividerSourceObserver(){this.dividerSourceObserverGeneration+=1,this.dividerSourceObserver?.disconnect(),this.dividerSourceObserver=void 0,this.dividerSourceObserverDocument=void 0}observeDividerSources(){this.resetDividerSourceObserver();const MutationObserverConstructor=this.ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.dividerSourceSnapshots.size===0)return;const generation=this.dividerSourceObserverGeneration,observer=new MutationObserverConstructor(records=>{this.dividerSourceObserver!==observer||this.dividerSourceObserverDocument!==this.ownerDocument||this.dividerSourceObserverGeneration!==generation||!this.isConnected||records.some(record=>this.dividerSourceSnapshots.has(record.target))&&this.syncDividerSources()});this.dividerSourceObserver=observer,this.dividerSourceObserverDocument=this.ownerDocument;for(const source of this.dividerSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}syncDividerSources(){const assigned=new Set(this.dividerSlot?.assignedElements({flatten:!0})??[]);for(const[source,snapshot]of this.dividerSourceSnapshots)this.adoptDividerSourceInert(source,snapshot),assigned.has(source)||(this.restoreDividerSource(source,snapshot),this.dividerSourceSnapshots.delete(source));for(const source of assigned){const snapshot=this.dividerSourceSnapshots.get(source)??this.snapshotDividerSource(source);this.dividerSourceSnapshots.set(source,snapshot),this.adoptDividerSourceInert(source,snapshot),this.makeDividerSourceInert(source,snapshot)}this.observeDividerSources()}resolveNormalizedSnapLength(token,size){const resolved=token.unit==="%"?token.value/100*size:token.value;return Number.isFinite(resolved)&&resolved>=0?resolved:void 0}get normalizedSnapTokens(){const source=typeof this.snap=="string"?this.snap:"";return source===this.normalizedSnapSource?this.cachedNormalizedSnapTokens:(this.normalizedSnapSource=source,this.cachedNormalizedSnapTokens=normalizeSnapTokens(source),this.cachedNormalizedSnapTokens)}applySnap(position,size){const threshold=finiteRange(this.snapThreshold,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE);if(typeof this.snap=="function")try{return finiteRange(this.snap({pos:position,size,snapThreshold:threshold}),position,0,size)}catch{return position}const tokens=this.normalizedSnapTokens;if(tokens.length===0)return position;let nearest=position,nearestDistance=Number.POSITIVE_INFINITY;for(const token of tokens){const point=this.resolveNormalizedSnapLength(token,size);if(point==null||point<0)continue;const candidates=token.repeated?[Math.floor(position/point)*point,Math.round(position/point)*point,Math.ceil(position/point)*point]:[point];for(const candidate of candidates){if(!Number.isFinite(candidate)||candidate<0||candidate>size)continue;const distance=Math.abs(position-candidate);distance<nearestDistance&&(nearest=candidate,nearestDistance=distance)}}return nearestDistance<=threshold?nearest:position}pointerCoordinate(event){return separatorCoordinate(event,this.effectiveOrientation==="vertical"?"block":"inline")}onPointerDown(event){if(this.disabled||this.drag||event.button!==0)return;const primaryPixels=this.positionInPixels;primaryPixels==null||this.availableSize<=0||this.dragController.start(event,event.currentTarget)&&(event.preventDefault(),this.drag={pointerId:event.pointerId,startCoordinate:this.pointerCoordinate(event),startPrimaryPixels:primaryPixels,bounds:this.constraintBounds(),rtl:this.effectiveDirection==="rtl",orientation:this.effectiveOrientation,primary:this.primary,size:this.availableSize,acceptedResize:!1},this.dividerElement?.setAttribute("data-dragging",""))}stopDragging(){const pointerId=this.drag?.pointerId;this.drag=void 0,this.dividerElement?.removeAttribute("data-dragging"),pointerId!=null&&this.dragController.end(pointerId)}emitResizeChange(){const positionInPixels=this.positionInPixels;positionInPixels!=null&&this.emit("lr-resize-change",Object.freeze({position:this.position,positionInPixels}))}onKeyDown(event){if(this.disabled||this.availableSize<=0||event.altKey||event.ctrlKey||event.metaKey||event.isComposing)return;const current=this.positionInPixels;if(current==null)return;let next;const{min,max}=this.constraintBounds();if(event.key==="Home")next=min;else if(event.key==="End")next=max;else{const physicalDirection=separatorArrowDirection(event,this.effectiveOrientation==="vertical"?"block":"inline",this.effectiveDirection==="rtl");if(physicalDirection!==0){const primaryDirection=this.primary==="end"?-physicalDirection:physicalDirection;next=current+primaryDirection*KEYBOARD_STEP_PERCENT*this.availableSize/100}}next!=null&&(event.preventDefault(),this.requestReposition(next,!1)&&this.emitResizeChange())}get separatorLabel(){const hostLabel=this.getAttribute("aria-label");if(hostLabel!==null)return hostLabel;const number=getNumberFormat(this.effectiveLocale);return this.localize("resizeDivider",void 0,{a:number.format(1),b:number.format(2)})}resizeValueText(position){return this.localize("resizeValuePercent",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(position))})}get ariaBounds(){if(this.availableSize<=0)return{min:0,max:100};const bounds=this.measuredConstraintBounds;return{min:bounds.min/this.availableSize*100,max:bounds.max/this.availableSize*100}}render(){const orientation=this.effectiveOrientation,startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100),ariaBounds=this.ariaBounds,position=Math.round(this.position);return html`
+import{__decorate}from"tslib";import{html}from"lit";import{property,query}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteRange}from"../../../internal/numbers.js";import{SeparatorDragController,separatorArrowDirection,separatorCoordinate,separatorDelta}from"../../../internal/separator-drag.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./split-panel.styles.js";import{LYRA_DEFAULT_resizeDivider,LYRA_DEFAULT_resizeValuePercent}from"../../../internal/default-strings/layout.generated.js";const DEFAULT_POSITION=50,DEFAULT_SNAP_THRESHOLD=12,KEYBOARD_STEP_PERCENT=1,MAX_SNAP_SOURCE_CODE_UNITS=16384,MAX_SNAP_TOKENS=256,POSITION_EPSILON=1e-4;import{SNAP_NONE}from"./split-panel-snap.js";const snapConverter={fromAttribute(value){return value??""},toAttribute(value){return typeof value=="string"&&value!==""?value:null}};function isAsciiDigit(code){return code>=48&&code<=57}function matchesAsciiToken(source,index,token){if(index+token.length>source.length)return!1;for(let offset=0;offset<token.length;offset+=1){const sourceCode=source.charCodeAt(index+offset);if((sourceCode>=65&&sourceCode<=90?sourceCode+32:sourceCode)!==token.charCodeAt(offset))return!1}return!0}function isSnapWhitespace(code){return code>=9&&code<=13||code===32||code===160||code===5760||code>=8192&&code<=8202||code===8232||code===8233||code===8239||code===8287||code===12288||code===65279}function skipSnapWhitespace(source,start){let cursor=start;for(;cursor<source.length&&isSnapWhitespace(source.charCodeAt(cursor));)cursor+=1;return cursor}function scanSnapLength(source,start){let cursor=start;if(isAsciiDigit(source.charCodeAt(cursor))){for(;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1}else if(source.charCodeAt(cursor)===46&&isAsciiDigit(source.charCodeAt(cursor+1)))for(cursor+=2;isAsciiDigit(source.charCodeAt(cursor));)cursor+=1;else return{end:start+1,recognized:!1};const numberEnd=cursor;let unit;if(source.charCodeAt(cursor)===37?(unit="%",cursor+=1):matchesAsciiToken(source,cursor,"px")&&(unit="px",cursor+=2),unit===void 0)return{end:Math.max(start+1,numberEnd),recognized:!1};const numericValue=Number(source.slice(start,numberEnd));return{end:cursor,recognized:!0,token:Number.isFinite(numericValue)?Object.freeze({value:numericValue,unit}):void 0}}function normalizeSnapTokens(value){const source=value.slice(0,MAX_SNAP_SOURCE_CODE_UNITS),tokens=[];let index=0;for(;index<source.length&&tokens.length<MAX_SNAP_TOKENS;){if(matchesAsciiToken(source,index,"repeat(")){const innerStart=skipSnapWhitespace(source,index+7),scanned2=scanSnapLength(source,innerStart);if(scanned2.recognized){const close=skipSnapWhitespace(source,scanned2.end);if(source.charCodeAt(close)===41){scanned2.token&&tokens.push(Object.freeze({repeated:!0,...scanned2.token})),index=close+1;continue}scanned2.token&&tokens.push(Object.freeze({repeated:!1,...scanned2.token}))}index=Math.max(index+7,scanned2.end);continue}const scanned=scanSnapLength(source,index);scanned.recognized&&scanned.token&&tokens.push(Object.freeze({repeated:!1,...scanned.token})),index=Math.max(index+1,scanned.end)}return Object.freeze(tokens)}function nearlyEqual(left,right){return left===right?!0:left==null||right==null?!1:Math.abs(left-right)<=POSITION_EPSILON}class LyraSplitPanel extends LyraElement{constructor(){super(...arguments),this._startPosition=DEFAULT_POSITION,this._orientation="horizontal",this._snapThreshold=DEFAULT_SNAP_THRESHOLD,this.availableSize=0,this.measuredConstraintBounds={min:0,max:0},this.resizeWriteGuard=new VetoWriteGuard,this.resizeRequestSequence=0,this.dragController=new SeparatorDragController(this,event=>this.onPointerMove(event),event=>this.onPointerEnd(event)),this.dividerSourceSnapshots=new Map,this.dividerSourceObserverGeneration=0,this.cachedNormalizedSnapTokens=Object.freeze([]),this.disabled=!1,this._snap="",this.onWindowResize=()=>{this.measureAndSynchronize(!1)},this.onDividerSlotChange=()=>{this.syncDividerSources()},this.onPointerMove=event=>{const drag=this.drag;if(!drag||event.pointerId!==drag.pointerId)return;if(this.disabled||this.effectiveDirection==="rtl"!==drag.rtl||this.effectiveOrientation!==drag.orientation||this.primary!==drag.primary||!nearlyEqual(this.availableSize,drag.size)){this.stopDragging();return}let delta=separatorDelta(drag.startCoordinate,event,this.effectiveOrientation==="vertical"?"block":"inline",drag.rtl);this.primary==="end"&&(delta*=-1),this.requestReposition(drag.startPrimaryPixels+delta,!0,drag.bounds)&&(drag.acceptedResize=!0)},this.onPointerEnd=event=>{const drag=this.drag;if(!drag||event.pointerId!==drag.pointerId)return;const bounds=this.constraintBounds(),shouldSettle=event.type==="pointerup"&&drag.acceptedResize&&!this.disabled&&this.effectiveOrientation===drag.orientation&&this.primary===drag.primary&&this.effectiveDirection==="rtl"===drag.rtl&&nearlyEqual(this.availableSize,drag.size)&&nearlyEqual(bounds.min,drag.bounds.min)&&nearlyEqual(bounds.max,drag.bounds.max);this.stopDragging(),shouldSettle&&this.emitResizeChange()}}static{this.defaultStrings={...super.defaultStrings,resizeDivider:LYRA_DEFAULT_resizeDivider,resizeValuePercent:LYRA_DEFAULT_resizeValuePercent}}static{this.styles=[LyraElement.styles,styles]}get position(){const start=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);return this.primary==="end"?100-start:start}set position(value){markVetoGuardWrite(this.resizeWriteGuard);const oldPosition=this.position,oldPixels=this.positionInPixels,next=finiteRange(value,DEFAULT_POSITION,0,100);this.pendingPositionInPixels=void 0;const layoutSize=this.measuredLayoutSize();if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next/100*layoutSize,!1,oldPosition,oldPixels);return}this._startPosition=this.primary==="end"?100-next:next,this.preservedPrimaryPixels=void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get positionInPixels(){return this.pendingPositionInPixels!=null?this.pendingPositionInPixels:this.availableSize<=0?0:this.position/100*this.availableSize}set positionInPixels(value){markVetoGuardWrite(this.resizeWriteGuard);const oldPosition=this.position,oldPixels=this.positionInPixels;if(value==null){this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=this.availableSize>0?this.positionInPixels:void 0,this.requestSynchronizedUpdate(oldPosition,oldPixels);return}const fallback=this.positionInPixels??DEFAULT_POSITION/100*this.availableSize,layoutSize=this.measuredLayoutSize(),next=finiteRange(value,fallback,0,layoutSize>0?layoutSize:Number.MAX_VALUE);if(layoutSize>0){this.availableSize=layoutSize,this.applyPrimaryPixels(next,!1,oldPosition,oldPixels);return}this.pendingPositionInPixels=next,this.preservedPrimaryPixels=next,this.requestSynchronizedUpdate(oldPosition,oldPixels)}get orientation(){return this._orientation}set orientation(value){const next=value==="vertical"?"vertical":"horizontal";if(next===this._orientation)return;const old=this._orientation,oldVertical=this.vertical;this._orientation=next,this.requestUpdate("orientation",old),this.requestUpdate("vertical",oldVertical)}get vertical(){return this.orientation==="vertical"}set vertical(value){this.orientation=value?"vertical":"horizontal"}get primary(){return this._primary}set primary(value){const next=value==="start"||value==="end"?value:void 0;if(next===this._primary)return;this.stopDragging();const oldPrimary=this._primary,oldPosition=this.position,oldPixels=this.positionInPixels,layoutSize=this.measuredLayoutSize(),referencePixels=layoutSize>0&&!oldPrimary?oldPosition/100*layoutSize:oldPixels;this._primary=next,layoutSize>0?(this.availableSize=layoutSize,this.applyPrimaryPixels(referencePixels,!1,oldPosition,oldPixels)):(this._startPosition=next==="end"?100-oldPosition:oldPosition,this.preservedPrimaryPixels=this.pendingPositionInPixels??oldPixels),this.requestUpdate("primary",oldPrimary)}get snap(){return this._snap}set snap(value){const old=this._snap;this._snap=value??"",this.requestUpdate("snap",old)}get snapThreshold(){return this._snapThreshold}set snapThreshold(value){const old=this._snapThreshold;this._snapThreshold=finiteRange(value,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE),this.requestUpdate("snapThreshold",old)}get effectiveOrientation(){return this.orientation}measuredLayoutSize(){return this.isConnected?this.axisSize(this.baseElement):0}connectedCallback(){const authoredOrientation=this.getAttribute("orientation");super.connectedCallback(),authoredOrientation!==null&&(this.orientation=authoredOrientation==="vertical"?"vertical":"horizontal"),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncDividerSources(),this.observeSize(),this.measureAndSynchronize(!1))})}disconnectedCallback(){this.stopDragging(),this.resetDividerSourceObserver(),this.restoreDividerSources(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.resizeView?.removeEventListener("resize",this.onWindowResize),this.resizeView=void 0,super.disconnectedCallback()}firstUpdated(changed){super.firstUpdated(changed),this.syncDividerSources(),this.measureAndSynchronize(!0),this.observeSize()}updated(changed){super.updated(changed),changed.has("disabled")&&this.disabled&&this.stopDragging(),(changed.has("orientation")||changed.has("vertical"))&&(this.stopDragging(),this.measureAndSynchronize(!1))}requestSynchronizedUpdate(oldPosition,oldPixels){nearlyEqual(oldPosition,this.position)||this.requestUpdate("position",oldPosition),nearlyEqual(oldPixels,this.positionInPixels)||this.requestUpdate("positionInPixels",oldPixels)}axisSize(element){if(!element)return 0;const rect=element.getBoundingClientRect(),measured=this.effectiveOrientation==="vertical"?rect.height:rect.width;return finiteRange(measured,0,0,Number.MAX_VALUE)}constraintBounds(){const size=this.availableSize,min=finiteRange(this.axisSize(this.minProbe),0,0,size),rawMax=this.maxProbe?this.axisSize(this.maxProbe):size,max=finiteRange(rawMax,size,min,size);return{min,max}}resolvePrimaryPixels(requestedPixels,useSnap,fallbackPixels,bounds=this.constraintBounds()){const size=this.availableSize,proposed=finiteRange(requestedPixels,fallbackPixels??DEFAULT_POSITION/100*size,0,size),snapped=useSnap?this.applySnap(proposed,size):proposed,{min,max}=bounds;return finiteRange(snapped,proposed,min,max)}applyPrimaryPixels(requestedPixels,useSnap,oldPosition=this.position,oldPixels=this.positionInPixels,scheduleUpdate=!0,resolvedPrimaryPixels){const size=this.availableSize;if(size<=0)return this.pendingPositionInPixels=finiteRange(requestedPixels,0,0,Number.MAX_VALUE),this.preservedPrimaryPixels=this.pendingPositionInPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!1;const primaryPixels=resolvedPrimaryPixels??this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels),primaryPercent=primaryPixels/size*100;return this._startPosition=this.primary==="end"?100-primaryPercent:primaryPercent,this.pendingPositionInPixels=void 0,this.preservedPrimaryPixels=primaryPixels,scheduleUpdate&&this.requestSynchronizedUpdate(oldPosition,oldPixels),!nearlyEqual(oldPosition,this.position)||!nearlyEqual(oldPixels,this.positionInPixels)}requestReposition(requestedPixels,useSnap,bounds=this.constraintBounds()){if(this.availableSize<=0)return!1;const oldPosition=this.position,oldPixels=this.positionInPixels,primaryPixels=this.resolvePrimaryPixels(requestedPixels,useSnap,oldPixels,bounds),position=primaryPixels/this.availableSize*100;if(nearlyEqual(oldPosition,position)&&nearlyEqual(oldPixels,primaryPixels))return!1;const detail=Object.freeze({position,positionInPixels:primaryPixels}),snapshot={drag:this.drag,disabled:this.disabled,primary:this.primary,orientation:this.effectiveOrientation,direction:this.effectiveDirection,size:this.availableSize,snap:this.snap,snapThreshold:this.snapThreshold},requestSequence=++this.resizeRequestSequence;this.resizeWriteGuard.open();const resizeRequest=this.emit("lr-resize-request",detail,{cancelable:!0}),request=this.emit("lr-reposition-request",detail,{cancelable:!0});if(resizeRequest.defaultPrevented||request.defaultPrevented||this.resizeWriteGuard.touched)return!1;const currentBounds=this.constraintBounds();return this.drag!==snapshot.drag||this.resizeRequestSequence!==requestSequence||this.disabled||this.disabled!==snapshot.disabled||this.primary!==snapshot.primary||this.effectiveOrientation!==snapshot.orientation||this.effectiveDirection!==snapshot.direction||!nearlyEqual(this.availableSize,snapshot.size)||this.snap!==snapshot.snap||this.snapThreshold!==snapshot.snapThreshold||!nearlyEqual(this.position,oldPosition)||!nearlyEqual(this.positionInPixels,oldPixels)||!nearlyEqual(currentBounds.min,bounds.min)||!nearlyEqual(currentBounds.max,bounds.max)?(snapshot.drag&&this.drag===snapshot.drag&&this.stopDragging(),!1):this.applyPrimaryPixels(requestedPixels,useSnap,oldPosition,oldPixels,!0,primaryPixels)?(this.emit("lr-resize",Object.freeze({position:this.position,positionInPixels:this.positionInPixels})),this.emit("lr-reposition",null),!0):!1}measureAndSynchronize(initial){const nextSize=this.axisSize(this.baseElement);if(nextSize<=0)return;const oldPosition=this.position,oldPixels=this.positionInPixels,pending=this.pendingPositionInPixels,preserved=this.preservedPrimaryPixels,sizeChanged=!nearlyEqual(this.availableSize,nextSize);this.availableSize=nextSize;const nextBounds=this.constraintBounds();this.drag&&(sizeChanged||!nearlyEqual(nextBounds.min,this.drag.bounds.min)||!nearlyEqual(nextBounds.max,this.drag.bounds.max))&&this.stopDragging(),this.measuredConstraintBounds=nextBounds,pending!=null?this.applyPrimaryPixels(pending,!1,oldPosition,oldPixels,!1):!initial&&sizeChanged&&this.primary&&preserved!=null?this.applyPrimaryPixels(preserved,!1,oldPosition,oldPixels,!1):this.applyPrimaryPixels(this.position/100*nextSize,!1,oldPosition,oldPixels,!1),this.synchronizeMeasuredDom()}synchronizeMeasuredDom(){const startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100);if(this.baseElement?.style.setProperty("--_lr-split-panel-start-position",`${startPosition}%`),this.dividerElement){const bounds=this.ariaBounds,position=Math.round(this.position);this.dividerElement.setAttribute("aria-valuenow",String(position)),this.dividerElement.setAttribute("aria-valuetext",this.resizeValueText(position)),this.dividerElement.setAttribute("aria-valuemin",String(Math.round(bounds.min))),this.dividerElement.setAttribute("aria-valuemax",String(Math.round(bounds.max)))}const reflectedPosition=String(this.position);this.getAttribute("position")!==reflectedPosition&&this.setAttribute("position",reflectedPosition)}observeSize(){if(this.resizeObserver||this.resizeView||!this.isConnected)return;const view=this.ownerDocument.defaultView,ResizeObserverConstructor=view?.ResizeObserver;if(ResizeObserverConstructor){this.resizeObserver=new ResizeObserverConstructor(()=>this.measureAndSynchronize(!1)),this.baseElement&&this.resizeObserver.observe(this.baseElement),this.minProbe&&this.resizeObserver.observe(this.minProbe),this.maxProbe&&this.resizeObserver.observe(this.maxProbe);return}view&&(this.resizeView=view,view.addEventListener("resize",this.onWindowResize))}snapshotDividerSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert}}adoptDividerSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current)}makeDividerSourceInert(source,snapshot){source.hasAttribute("inert")||source.setAttribute("inert",""),snapshot.appliedInert=source.getAttribute("inert")}restoreDividerSource(source,snapshot){this.adoptDividerSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreDividerSources(){for(const[source,snapshot]of this.dividerSourceSnapshots)this.restoreDividerSource(source,snapshot);this.dividerSourceSnapshots.clear()}resetDividerSourceObserver(){this.dividerSourceObserverGeneration+=1,this.dividerSourceObserver?.disconnect(),this.dividerSourceObserver=void 0,this.dividerSourceObserverDocument=void 0}observeDividerSources(){this.resetDividerSourceObserver();const MutationObserverConstructor=this.ownerDocument.defaultView?.MutationObserver;if(!MutationObserverConstructor||!this.isConnected||this.dividerSourceSnapshots.size===0)return;const generation=this.dividerSourceObserverGeneration,observer=new MutationObserverConstructor(records=>{this.dividerSourceObserver!==observer||this.dividerSourceObserverDocument!==this.ownerDocument||this.dividerSourceObserverGeneration!==generation||!this.isConnected||records.some(record=>this.dividerSourceSnapshots.has(record.target))&&this.syncDividerSources()});this.dividerSourceObserver=observer,this.dividerSourceObserverDocument=this.ownerDocument;for(const source of this.dividerSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}syncDividerSources(){const assigned=new Set(this.dividerSlot?.assignedElements({flatten:!0})??[]);for(const[source,snapshot]of this.dividerSourceSnapshots)this.adoptDividerSourceInert(source,snapshot),assigned.has(source)||(this.restoreDividerSource(source,snapshot),this.dividerSourceSnapshots.delete(source));for(const source of assigned){const snapshot=this.dividerSourceSnapshots.get(source)??this.snapshotDividerSource(source);this.dividerSourceSnapshots.set(source,snapshot),this.adoptDividerSourceInert(source,snapshot),this.makeDividerSourceInert(source,snapshot)}this.observeDividerSources()}resolveNormalizedSnapLength(token,size){const resolved=token.unit==="%"?token.value/100*size:token.value;return Number.isFinite(resolved)&&resolved>=0?resolved:void 0}get normalizedSnapTokens(){const source=typeof this.snap=="string"?this.snap:"";return source===this.normalizedSnapSource?this.cachedNormalizedSnapTokens:(this.normalizedSnapSource=source,this.cachedNormalizedSnapTokens=normalizeSnapTokens(source),this.cachedNormalizedSnapTokens)}applySnap(position,size){const threshold=finiteRange(this.snapThreshold,DEFAULT_SNAP_THRESHOLD,0,Number.MAX_VALUE);if(typeof this.snap=="function")try{return finiteRange(this.snap({pos:position,size,snapThreshold:threshold}),position,0,size)}catch{return position}const tokens=this.normalizedSnapTokens;if(tokens.length===0)return position;let nearest=position,nearestDistance=Number.POSITIVE_INFINITY;for(const token of tokens){const point=this.resolveNormalizedSnapLength(token,size);if(point==null||point<0)continue;const candidates=token.repeated?[Math.floor(position/point)*point,Math.round(position/point)*point,Math.ceil(position/point)*point]:[point];for(const candidate of candidates){if(!Number.isFinite(candidate)||candidate<0||candidate>size)continue;const distance=Math.abs(position-candidate);distance<nearestDistance&&(nearest=candidate,nearestDistance=distance)}}return nearestDistance<=threshold?nearest:position}pointerCoordinate(event){return separatorCoordinate(event,this.effectiveOrientation==="vertical"?"block":"inline")}onPointerDown(event){if(this.disabled||this.drag||event.button!==0)return;const primaryPixels=this.positionInPixels;primaryPixels==null||this.availableSize<=0||this.dragController.start(event,event.currentTarget)&&(event.preventDefault(),this.drag={pointerId:event.pointerId,startCoordinate:this.pointerCoordinate(event),startPrimaryPixels:primaryPixels,bounds:this.constraintBounds(),rtl:this.effectiveDirection==="rtl",orientation:this.effectiveOrientation,primary:this.primary,size:this.availableSize,acceptedResize:!1},this.dividerElement?.setAttribute("data-dragging",""))}stopDragging(){const pointerId=this.drag?.pointerId;this.drag=void 0,this.dividerElement?.removeAttribute("data-dragging"),pointerId!=null&&this.dragController.end(pointerId)}emitResizeChange(){const positionInPixels=this.positionInPixels;positionInPixels!=null&&this.emit("lr-resize-change",Object.freeze({position:this.position,positionInPixels}))}onKeyDown(event){if(this.disabled||this.availableSize<=0||event.altKey||event.ctrlKey||event.metaKey||event.isComposing)return;const current=this.positionInPixels;if(current==null)return;let next;const{min,max}=this.constraintBounds();if(event.key==="Home")next=min;else if(event.key==="End")next=max;else{const physicalDirection=separatorArrowDirection(event,this.effectiveOrientation==="vertical"?"block":"inline",this.effectiveDirection==="rtl");if(physicalDirection!==0){const primaryDirection=this.primary==="end"?-physicalDirection:physicalDirection;next=current+primaryDirection*KEYBOARD_STEP_PERCENT*this.availableSize/100}}next!=null&&(event.preventDefault(),this.requestReposition(next,!1)&&this.emitResizeChange())}get separatorLabel(){const hostLabel=this.getAttribute("aria-label");if(hostLabel!==null)return hostLabel;const number=getNumberFormat(this.effectiveLocale);return this.localize("resizeDivider",void 0,{a:number.format(1),b:number.format(2)})}resizeValueText(position){return this.localize("resizeValuePercent",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(position))})}get ariaBounds(){if(this.availableSize<=0)return{min:0,max:100};const bounds=this.measuredConstraintBounds;return{min:bounds.min/this.availableSize*100,max:bounds.max/this.availableSize*100}}render(){const orientation=this.effectiveOrientation,startPosition=finiteRange(this._startPosition,DEFAULT_POSITION,0,100),ariaBounds=this.ariaBounds,position=Math.round(this.position);return html`
       <div
         part="base"
         data-orientation=${orientation}