@aceshooting/lyra-ui 25.3.1 → 25.4.0

package/dist/components/layout/app-rail/app-rail.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{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{DeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{resolveCssLength}from"../../../internal/css-length.js";import{focusFirstAvailable}from"../../../internal/focus-navigation.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{detectPlatform}from"../../../internal/platform.js";import{parseHotkey,hasNonShiftModifier,matchesHotkey,hotkeyAriaKeyShortcuts,isIgnorableKeyEvent,isEditableKeyEventTarget,registerHotkeyOwner,unregisterHotkeyOwner,resolveHotkeyOwner}from"../../../internal/hotkey.js";import{nextId,isAccessibilityVisible}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{chevronIcon,closeIcon,menuIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_appRailCollapse,LYRA_DEFAULT_appRailExpand,LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings.generated.js";const APP_RAIL_FRAME=optionalLiteralSetConverter(["card","plain"]),RAIL_WIDTH_CONVERTER={fromAttribute:value=>{if(value===null)return value;const number=Number(value);return Number.isNaN(number)?value:number}},APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);function computeAppRailMode(iconOnlyMatches,mobileMatches,preferredMode){return mobileMatches?"mobile":preferredMode||(iconOnlyMatches?"icon-only":"full")}class LyraAppRail extends LyraElement{static{this.defaultStrings={...super.defaultStrings,appRailCollapse:LYRA_DEFAULT_appRailCollapse,appRailExpand:LYRA_DEFAULT_appRailExpand,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels}}constructor(){super(),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.triggerCollapses=!1,this.hotkey="",this.accessibleLabel=null,this.withoutToggle=!1,this.collapsible=!1,this.topLayer=!1,this.trigger=null,this.for="",this.focusFallback=null,this.resizable=!1,this.persist="open width",this.minRailWidth=190,this.maxRailWidth=440,this._dragging=!1,this.hasHeaderSlot=!1,this.hasFooterSlot=!1,this.persistReady=!1,this._mode="full",this.forced=!1,this.iconOnlyMatches=!1,this.mobileMatches=!1,this.overlayActive=!1,this.justOpened=!1,this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1)},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1),this.overlayActive&&this.nativeModal.show()}}),this.overlayReturnTarget=null,this.overlayOpener=null,this.overlayReturnIsExplicit=!1,this.deferredFocusReturn=new DeferredFocusReturn,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.navRegionId=nextId("app-rail-nav-region"),this.resizeStartX=0,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.onIconOnlyChange=e=>{this.iconOnlyMatches=e.matches,this.forced||this.applyComputedMode()},this.onMobileChange=e=>{this.mobileMatches=e.matches,this.forced||this.applyComputedMode()},this.onToggleClick=e=>{this.open||(this.explicitTrigger=e.currentTarget),this.setOpen(!this.open)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.acceptsHotkey=event=>{const parsed=parseHotkey(this.hotkey);return this.isConnected&&!this.forced&&parsed!==null&&hasNonShiftModifier(parsed)&&matchesHotkey(parsed,event,detectPlatform(this.hotkeyWindow?.navigator)==="mac")&&!isEditableKeyEventTarget(event)&&isAccessibilityVisible(this)},this.onHotkeyKeyDown=event=>{if(event.defaultPrevented||isIgnorableKeyEvent(event)||!this.hotkeyWindow)return;const keyboard=event;!this.acceptsHotkey(keyboard)||resolveHotkeyOwner(this.hotkeyWindow,keyboard)!==this||(event.preventDefault(),this.toggle())},this.onPanelTransition=event=>{event.target===event.currentTarget&&event.propertyName==="transform"&&this.baseEl?.removeAttribute("data-sliding")},this.onCollapseToggleClick=()=>{this.toggleCollapse()},this.onNavItemClick=()=>{this.overlayActive&&this.setOpen(!1)},this.onHeaderSlotChange=()=>{this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header")},this.onFooterSlotChange=()=>{this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer")},this.onNavSlotChange=()=>{this.syncSlottedItems()},this.onResizerPointerDown=e=>{if(!e.isPrimary||e.button!==0||!this.resizable||this._mode!=="full"||this.resizePointerId!==void 0)return;const resizer=e.currentTarget,ownerWindow=resizer.ownerDocument.defaultView;ownerWindow&&(this.resizePointerId=e.pointerId,this.resizeOwnerWindow=ownerWindow,this.resizeStartX=e.clientX,this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,resizer.setPointerCapture(e.pointerId),ownerWindow.addEventListener("pointermove",this.onResizerPointerMove),ownerWindow.addEventListener("pointerup",this.onResizerPointerUp),ownerWindow.addEventListener("pointercancel",this.onResizerPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onResizerPointerUp),this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"){this.endResizerGesture();return}let delta=e.clientX-this.resizeStartX;isRtl(this)&&(delta=-delta);const next=Math.min(this.safeMaxRailWidthPx,Math.max(this.safeMinRailWidthPx,this.resizeStartWidth+delta));this.requestRailResize(next,!1)},this.onResizerPointerUp=e=>{e.pointerId===this.resizePointerId&&this.endResizerGesture(e.type==="pointerup")},this.onResizerKeyDown=e=>{const rtl=this.getAttribute("dir")==="rtl"||isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",step=8;if(e.key===forwardKey){const next=Math.min(this.safeMaxRailWidthPx,this.effectiveRailWidthPx+step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}else if(e.key===backwardKey){const next=Math.max(this.safeMinRailWidthPx,this.effectiveRailWidthPx-step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}},new GlassScrollLayer(this,'[part="base"], [part="panel"]')}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}get frame(){return this._frame}set frame(next){const value=APP_RAIL_FRAME.normalizeReflected(this,"frame",next),old=this._frame;value!==old&&(this._frame=value,this.requestUpdate("frame",old))}get forceMode(){return this._forceMode}set forceMode(next){if(next!=null&&next!=="auto"&&next!=="full"&&next!=="icon-only")return;const old=this._forceMode;if(this._forceMode=next??void 0,this.requestUpdate("forceMode",old),next==null||next==="auto"){if(!this.forced)return;this.forced=!1,this.applyComputedMode();return}this.forced=!0,this.setEffectiveMode(next)}static{definePersistedProperty(this.prototype,"open",{initial:!1,attribute:!0,type:Boolean,reflect:!0}),definePersistedProperty(this.prototype,"preferredMode",{initial:void 0,attribute:"preferred-mode"}),definePersistedProperty(this.prototype,"railWidth",{initial:void 0,attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER})}pixelsOf(value){return typeof value=="number"?value:typeof value=="string"?resolveCssLength(value,{host:this}):void 0}get railWidthInPixels(){const width=this.railWidth;return typeof width=="string"?this.pixelsOf(width):width}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),groupTag=tag("app-rail-group"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag||item.localName===groupTag));for(const item of this.managedItems){if(next.has(item))continue;const newOwner=item.closest(railTag);newOwner&&newOwner!==this&&item.parentElement===newOwner&&!item.hasAttribute("slot")?item.toggleAttribute("icon-only",newOwner.mode==="icon-only"):item.removeAttribute("icon-only")}for(const item of next)item.toggleAttribute("icon-only",this._mode==="icon-only");this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.pixelsOf(this.minRailWidth)??Number.NaN,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.pixelsOf(this.maxRailWidth)??Number.NaN,440,0))}get effectiveRailWidthPx(){return this.railWidth!=null?finiteRange(this.railWidthInPixels??Number.NaN,this.safeMinRailWidthPx,this.safeMinRailWidthPx,this.safeMaxRailWidthPx):this.baseEl?.getBoundingClientRect().width??240}resizeValueText(widthPx){return this.localize("resizeValuePixels",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(widthPx))})}get storageFullKey(){return this.storageKey?`lr-app-rail:${this.storageKey}`:void 0}get persistFields(){const persist=typeof this.persist=="string"?this.persist:"";return new Set(persist.split(/\s+/).filter(field=>APP_RAIL_PERSIST_FIELDS.has(field)))}loadPersisted(){const restored={open:!1,preferredMode:!1},parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return restored;const fields=this.persistFields;return fields.has("open")&&!isPersistedPropertyExplicitlySet(this,"open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open,restored.open=!0),fields.has("width")&&!isPersistedPropertyExplicitlySet(this,"railWidth")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidth=parsed.railWidthPx),fields.has("preferred-mode")&&!isPersistedPropertyExplicitlySet(this,"preferredMode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")&&(this.preferredMode=parsed.preferredMode,restored.preferredMode=!0),restored}persistState(){const fields=this.persistFields;if(fields.size===0)return;const state2={};fields.has("open")&&(state2.open=this.open),fields.has("width")&&(state2.railWidthPx=this.railWidthInPixels),fields.has("preferred-mode")&&(state2.preferredMode=this.preferredMode??null),writePersistedState(this.storageFullKey,state2)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("resizable")||changed.has("mode"))&&(!this.resizable||this._mode!=="full")&&this.endResizerGesture(),!this.hasUpdated){this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header"),this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer");const restored=this.loadPersisted();if(restored.preferredMode&&!this.forced){const restoredMode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode);restoredMode!==this._mode&&(this._mode=restoredMode,this.pendingInitialModeAnnouncement=restoredMode)}restored.open&&this.open&&this._mode!=="mobile"&&(this.open=!1)}if(this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.hasUpdated&&this._mode==="mobile"&&!prefersReducedMotion(this)&&this.baseEl?.toggleAttribute("data-sliding",!0),this.overlayActive=next,this.placeToggle(next),next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this.overlayActive&&this.nativeModal.show(),changed.has("topLayer"))for(const item of this.querySelectorAll(tag("app-rail-item")))item.syncRailTopLayer?.();if(this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.pendingInitialModeAnnouncement!==void 0){const mode=this.pendingInitialModeAnnouncement;this.pendingInitialModeAnnouncement=void 0,this.emit("lr-mode-change",{mode})}if(this.syncSlottedItems(),this.placeToggle(this.overlayActive),this.syncExternalTriggerA11y(),this.syncBuiltInKeyShortcuts(),this.baseEl&&(this._mode!=="mobile"||!this.baseEl.getAnimations().some(animation=>"transitionProperty"in animation&&animation.transitionProperty==="transform"))&&this.baseEl.removeAttribute("data-sliding"),this.recoverInlineFocusAfterResponsiveClose){this.recoverInlineFocusAfterResponsiveClose=!1;const active=deepActiveElement(this.ownerDocument);this.baseEl&&!composedContains(this.baseEl,active)&&this.baseEl.focus()}this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial()),this.persistReady&&(changed.has("open")||changed.has("railWidth")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,this.baseEl&&(this.resizable&&this.railWidth!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size")),this.syncResizerPosition()}connectedCallback(){super.connectedCallback(),this.hotkeyWindow=this.ownerDocument.defaultView??void 0,this.hotkeyWindow&&(registerHotkeyOwner(this.hotkeyWindow,this,this.acceptsHotkey),this.hotkeyWindow.addEventListener("keydown",this.onHotkeyKeyDown)),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncSlottedItems(),this.syncExternalTriggerA11y())})}disconnectedCallback(){this.nativeModal.hide(),this.hotkeyWindow&&(this.hotkeyWindow.removeEventListener("keydown",this.onHotkeyKeyDown),unregisterHotkeyOwner(this.hotkeyWindow,this),this.hotkeyWindow=void 0),this.baseEl?.removeAttribute("data-sliding"),this.deferredFocusReturn.cancel(),super.disconnectedCallback(),this.restoreFallbackTabIndex?.(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture(),this.releaseExternalTriggerA11y()}adoptedCallback(){super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}resolveExternalTrigger(){if(this.trigger)return this.trigger;if(!this.for)return null;const found=this.getRootNode().getElementById?.(this.for);return found instanceof HTMLElement?found:null}resolveFocusFallback(){const value=this.focusFallback;if(!value)return null;const target=typeof value=="string"?this.getRootNode().getElementById?.(value)??null:value;return isHtmlElement(target)&&target.ownerDocument===this.ownerDocument?target:null}activateMobileOverlay(){this.nativeModal.prepare();const explicitTrigger=this.explicitTrigger;this.explicitTrigger=void 0;const restoreFocusTo=explicitTrigger??this.resolveExternalTrigger()??void 0;this.overlayReturnIsExplicit=explicitTrigger!==void 0,this.deferredFocusReturn.cancel();const active=deepActiveElement(this.ownerDocument);this.overlayOpener=active&&typeof active.focus=="function"&&!composedContains(this,active)?active:null,this.overlayReturnTarget=restoreFocusTo??this.overlayOpener,this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo,preferredInitialFocus:()=>{const panel=this.shadowRoot?.querySelector('[part="panel"]')??null;if(!panel)return null;const toggle=this.toggleEl??null;return collectFocusableElements(panel).filter(stop=>stop!==toggle)[0]??panel},lockScroll:!0,suspendWhenUnrendered:!0})}deactivateMobileOverlay(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1);const handle=this.overlayHandle;if(this.overlayHandle=void 0,this.deferredFocusReturn.cancel(),handle&&restoreFocus&&!this.overlayReturnIsExplicit){const external=this.resolveExternalTrigger();external&&external!==this.overlayReturnTarget&&(this.overlayReturnTarget=external,handle.updateRestoreFocusTo(external))}handle?.deactivate({restoreFocus}),handle&&restoreFocus&&this.scheduleDeferredFocusReturn()}scheduleDeferredFocusReturn(){const candidates=[this.overlayReturnTarget,this.overlayOpener];this.deferredFocusReturn.schedule({host:this,candidates:()=>[...candidates,this.toggleEl],isCurrent:()=>!this.overlayActive,fallback:()=>{this.focusHostFallback()||focusFirstAvailable([this.resolveFocusFallback()])}})}focusHostFallback(){if(!this.hasAttribute("tabindex")){this.setAttribute("tabindex","-1");const view=this.ownerDocument.defaultView,onFocusChange=()=>{deepActiveElement(this.ownerDocument)!==this&&restore()},restore=()=>{this.removeEventListener("blur",onFocusChange),view?.removeEventListener("focus",onFocusChange),this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.restoreFallbackTabIndex=void 0};this.restoreFallbackTabIndex=restore,this.addEventListener("blur",onFocusChange),view?.addEventListener("focus",onFocusChange)}return focusFirstAvailable(this)?!0:(this.restoreFallbackTabIndex?.(),!1)}placeToggle(insidePanel){const toggle=this.toggleEl,panel=this.baseEl;if(!(!toggle||!panel)){if(insidePanel){panel.firstChild!==toggle&&panel.insertBefore(toggle,panel.firstChild);return}toggle.nextSibling!==panel&&panel.parentNode?.insertBefore(toggle,panel)}}setupMediaQueries(){if(!this.isConnected)return;const view=this.ownerDocument.defaultView;if(!view?.matchMedia)return;const iconOnlyQuery=view.matchMedia(`(max-width: ${this.iconOnlyBreakpoint})`),mobileQuery=view.matchMedia(`(max-width: ${this.mobileBreakpoint})`),iconOnlyListener=event=>{this.mqIconOnly!==iconOnlyQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onIconOnlyChange(event)},mobileListener=event=>{this.mqMobile!==mobileQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onMobileChange(event)};this.mqIconOnly=iconOnlyQuery,this.mqMobile=mobileQuery,this.mqIconOnlyListener=iconOnlyListener,this.mqMobileListener=mobileListener,iconOnlyQuery.addEventListener("change",iconOnlyListener),mobileQuery.addEventListener("change",mobileListener),this.iconOnlyMatches=iconOnlyQuery.matches,this.mobileMatches=mobileQuery.matches,!this.forced&&this.applyComputedMode(this.hasUpdated?void 0:{silent:!0})}teardownMediaQueries(){this.mqIconOnly&&this.mqIconOnlyListener&&this.mqIconOnly.removeEventListener("change",this.mqIconOnlyListener),this.mqMobile&&this.mqMobileListener&&this.mqMobile.removeEventListener("change",this.mqMobileListener),this.mqIconOnly=void 0,this.mqMobile=void 0,this.mqIconOnlyListener=void 0,this.mqMobileListener=void 0}applyComputedMode(options){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode),options)}setEffectiveMode(next,options){if(this._mode===next)return;const old=this._mode,resizer=this.renderRoot?.querySelector('[part="resizer"]');old==="full"&&next==="icon-only"&&resizer&&composedContains(resizer,deepActiveElement(this.ownerDocument))&&(this.recoverInlineFocusAfterResponsiveClose=!0),next!=="mobile"&&this.baseEl?.removeAttribute("data-sliding"),old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.baseEl&&(this.resizable&&this.railWidth!=null&&next==="full"||this.baseEl.style.removeProperty("inline-size")),this.requestUpdate("mode",old),options?.silent?this.pendingInitialModeAnnouncement=next:this.emit("lr-mode-change",{mode:next}),next!=="mobile"&&this.open&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(this.open===next)return;if(options?.force){this.open=next,this.emit("lr-toggle",{expanded:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle-request",{expanded:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next,this.emit("lr-toggle",{expanded:next}))}toggleCollapse(){this._mode!=="mobile"&&(this.preferredMode=(this.preferredMode??this._mode)==="icon-only"?"full":"icon-only")}toggle(){this.isConnected&&(this._mode==="mobile"?this.setOpen(!this.open):this.toggleCollapse())}get resolvedHotkeyShortcuts(){const parsed=parseHotkey(this.hotkey);return hotkeyAriaKeyShortcuts(parsed&&hasNonShiftModifier(parsed)?parsed:null,detectPlatform(this.ownerDocument.defaultView?.navigator)==="mac")}syncBuiltInKeyShortcuts(){const value=this.resolvedHotkeyShortcuts;for(const control of[this.toggleEl,this.renderRoot.querySelector('[part="collapse-toggle"]')])!control||control.getAttribute("aria-keyshortcuts")===value||(value===null?control.removeAttribute("aria-keyshortcuts"):control.setAttribute("aria-keyshortcuts",value))}syncExternalTriggerA11y(){const mobile=this._mode==="mobile",trigger=mobile||this.triggerCollapses?this.resolveExternalTrigger():null;if(!trigger){this.releaseExternalTriggerA11y();return}const panel=this.baseEl??null,contribution={attributes:{"aria-expanded":(mobile?this.open:this._mode==="full")?"true":"false","aria-keyshortcuts":this.resolvedHotkeyShortcuts},controls:panel?[panel]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution)}releaseExternalTriggerA11y(){this.triggerAria?.release(),this.triggerAria=void 0}endResizerGesture(commit=!1){const ownerWindow=this.resizeOwnerWindow,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeOwnerWindow=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),ownerWindow?.removeEventListener("pointermove",this.onResizerPointerMove),ownerWindow?.removeEventListener("pointerup",this.onResizerPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onResizerPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onResizerPointerUp),commit&&changed&&(this.emit("lr-rail-resize",{widthPx}),this.persistReady&&this.persistState())}requestRailResize(next,commit=!0){if(!this.resizable||this._mode!=="full"||!this.isConnected||next===this.effectiveRailWidthPx)return!1;const event=this.emit("lr-rail-resize-request",{widthPx:next},{cancelable:!0});return!this.resizable||this._mode!=="full"||!this.isConnected?(this.endResizerGesture(),!1):event.defaultPrevented?!1:(this.railWidth=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}syncResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!resizer||!this.baseEl||this._mode!=="full"||!this.resizable)return;const hostRect=this.getBoundingClientRect(),baseRect=this.baseEl.getBoundingClientRect(),half=resizer.getBoundingClientRect().width/2,offset=this.getAttribute("dir")==="rtl"||isRtl(this)?hostRect.right-baseRect.left:baseRect.right-hostRect.left;resizer.style.setProperty("inset-inline-start",`${offset-half}px`),resizer.style.removeProperty("inset-inline-end")}render(){const mobile=this._mode==="mobile",railWidthPx=this.effectiveRailWidthPx,showCollapse=this.collapsible&&!mobile,expanded=this._mode!=="icon-only";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{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,collectFocusableElements,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{DeferredFocusReturn}from"../../../internal/deferred-focus-return.js";import{resolveCssLength}from"../../../internal/css-length.js";import{focusFirstAvailable}from"../../../internal/focus-navigation.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{detectPlatform}from"../../../internal/platform.js";import{parseHotkey,hasNonShiftModifier,matchesHotkey,hotkeyAriaKeyShortcuts,isIgnorableKeyEvent,isEditableKeyEventTarget,registerHotkeyOwner,unregisterHotkeyOwner,resolveHotkeyOwner}from"../../../internal/hotkey.js";import{nextId,isAccessibilityVisible}from"../../../internal/a11y.js";import{acquireAriaOwnership}from"../../../internal/aria-ownership.js";import{chevronIcon,closeIcon,menuIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_appRailCollapse,LYRA_DEFAULT_appRailExpand,LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings.generated.js";const APP_RAIL_FRAME=optionalLiteralSetConverter(["card","plain"]),RAIL_WIDTH_CONVERTER={fromAttribute:value=>{if(value===null)return value;const number=Number(value);return Number.isNaN(number)?value:number}},APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);function computeAppRailMode(iconOnlyMatches,mobileMatches,preferredMode){return mobileMatches?"mobile":preferredMode||(iconOnlyMatches?"icon-only":"full")}class LyraAppRail extends LyraElement{static{this.defaultStrings={...super.defaultStrings,appRailCollapse:LYRA_DEFAULT_appRailCollapse,appRailExpand:LYRA_DEFAULT_appRailExpand,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels}}constructor(){super(),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.triggerCollapses=!1,this.hotkey="",this.accessibleLabel=null,this.withoutToggle=!1,this.collapsible=!1,this.topLayer=!1,this.trigger=null,this.for="",this.focusFallback=null,this.resizable=!1,this.persist="open width",this.minRailWidth=190,this.maxRailWidth=440,this._dragging=!1,this.hasHeaderSlot=!1,this.hasFooterSlot=!1,this.persistReady=!1,this._mode="full",this.forced=!1,this.iconOnlyMatches=!1,this.mobileMatches=!1,this.overlayActive=!1,this.justOpened=!1,this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1)},onUnexpectedClose:()=>{this.overlayHandle?.isTopmost()&&this.setOpen(!1),this.overlayActive&&this.nativeModal.show()}}),this.overlayReturnTarget=null,this.overlayOpener=null,this.overlayReturnIsExplicit=!1,this.deferredFocusReturn=new DeferredFocusReturn,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.navRegionId=nextId("app-rail-nav-region"),this.resizeStartX=0,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.onIconOnlyChange=e=>{this.iconOnlyMatches=e.matches,this.forced||this.applyComputedMode()},this.onMobileChange=e=>{this.mobileMatches=e.matches,this.forced||this.applyComputedMode()},this.onToggleClick=e=>{this.open||(this.explicitTrigger=e.currentTarget),this.setOpen(!this.open)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.acceptsHotkey=event=>{const parsed=parseHotkey(this.hotkey);return this.isConnected&&!this.forced&&parsed!==null&&hasNonShiftModifier(parsed)&&matchesHotkey(parsed,event,detectPlatform(this.hotkeyWindow?.navigator)==="mac")&&!isEditableKeyEventTarget(event)&&isAccessibilityVisible(this)},this.onHotkeyKeyDown=event=>{if(event.defaultPrevented||isIgnorableKeyEvent(event)||!this.hotkeyWindow)return;const keyboard=event;!this.acceptsHotkey(keyboard)||resolveHotkeyOwner(this.hotkeyWindow,keyboard)!==this||(event.preventDefault(),this.toggle())},this.onPanelTransition=event=>{event.target===event.currentTarget&&event.propertyName==="transform"&&this.baseEl?.removeAttribute("data-sliding")},this.onCollapseToggleClick=()=>{this.toggleCollapse()},this.onNavItemClick=()=>{this.overlayActive&&this.setOpen(!1)},this.onHeaderSlotChange=()=>{this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header")},this.onFooterSlotChange=()=>{this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer")},this.onNavSlotChange=()=>{this.syncSlottedItems()},this.onResizerPointerDown=e=>{if(!e.isPrimary||e.button!==0||!this.resizable||this._mode!=="full"||this.resizePointerId!==void 0)return;const resizer=e.currentTarget,ownerWindow=resizer.ownerDocument.defaultView;ownerWindow&&(this.resizePointerId=e.pointerId,this.resizeOwnerWindow=ownerWindow,this.resizeStartX=e.clientX,this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,resizer.setPointerCapture(e.pointerId),ownerWindow.addEventListener("pointermove",this.onResizerPointerMove),ownerWindow.addEventListener("pointerup",this.onResizerPointerUp),ownerWindow.addEventListener("pointercancel",this.onResizerPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onResizerPointerUp),this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"){this.endResizerGesture();return}let delta=e.clientX-this.resizeStartX;isRtl(this)&&(delta=-delta);const next=Math.min(this.safeMaxRailWidthPx,Math.max(this.safeMinRailWidthPx,this.resizeStartWidth+delta));this.requestRailResize(next,!1)},this.onResizerPointerUp=e=>{e.pointerId===this.resizePointerId&&this.endResizerGesture(e.type==="pointerup")},this.onResizerKeyDown=e=>{const rtl=this.getAttribute("dir")==="rtl"||isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",step=8;if(e.key===forwardKey){const next=Math.min(this.safeMaxRailWidthPx,this.effectiveRailWidthPx+step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}else if(e.key===backwardKey){const next=Math.max(this.safeMinRailWidthPx,this.effectiveRailWidthPx-step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}},new GlassScrollLayer(this,'[part="base"], [part="panel"]')}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,styles]}get frame(){return this._frame}set frame(next){const value=APP_RAIL_FRAME.normalizeReflected(this,"frame",next),old=this._frame;value!==old&&(this._frame=value,this.requestUpdate("frame",old))}get forceMode(){return this._forceMode}set forceMode(next){if(next!=null&&next!=="auto"&&next!=="full"&&next!=="icon-only")return;const old=this._forceMode;if(this._forceMode=next??void 0,this.requestUpdate("forceMode",old),next==null||next==="auto"){if(!this.forced)return;this.forced=!1,this.applyComputedMode();return}this.forced=!0,this.setEffectiveMode(next)}static{definePersistedProperty(this.prototype,"open",{initial:!1,attribute:!0,type:Boolean,reflect:!0}),definePersistedProperty(this.prototype,"preferredMode",{initial:void 0,attribute:"preferred-mode"}),definePersistedProperty(this.prototype,"railWidth",{initial:void 0,attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER})}pixelsOf(value){return typeof value=="number"?value:typeof value=="string"?resolveCssLength(value,{host:this}):void 0}get railWidthInPixels(){const width=this.railWidth;return typeof width=="string"?this.pixelsOf(width):width}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),groupTag=tag("app-rail-group"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag||item.localName===groupTag));for(const item of this.managedItems){if(next.has(item))continue;const newOwner=item.closest(railTag);newOwner&&newOwner!==this&&item.parentElement===newOwner&&!item.hasAttribute("slot")?item.toggleAttribute("icon-only",newOwner.mode==="icon-only"):item.removeAttribute("icon-only")}for(const item of next)item.toggleAttribute("icon-only",this._mode==="icon-only");this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.pixelsOf(this.minRailWidth)??Number.NaN,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.pixelsOf(this.maxRailWidth)??Number.NaN,440,0))}get effectiveRailWidthPx(){return this.railWidth!=null?finiteRange(this.railWidthInPixels??Number.NaN,this.safeMinRailWidthPx,this.safeMinRailWidthPx,this.safeMaxRailWidthPx):this.baseEl?.getBoundingClientRect().width??240}resizeValueText(widthPx){return this.localize("resizeValuePixels",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(widthPx))})}get storageFullKey(){return this.storageKey?`lr-app-rail:${this.storageKey}`:void 0}get persistFields(){const persist=typeof this.persist=="string"?this.persist:"";return new Set(persist.split(/\s+/).filter(field=>APP_RAIL_PERSIST_FIELDS.has(field)))}loadPersisted(){const restored={open:!1,preferredMode:!1},parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return restored;const fields=this.persistFields;return fields.has("open")&&!isPersistedPropertyExplicitlySet(this,"open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open,restored.open=!0),fields.has("width")&&!isPersistedPropertyExplicitlySet(this,"railWidth")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidth=parsed.railWidthPx),fields.has("preferred-mode")&&!isPersistedPropertyExplicitlySet(this,"preferredMode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")&&(this.preferredMode=parsed.preferredMode,restored.preferredMode=!0),restored}persistState(){const fields=this.persistFields;if(fields.size===0)return;const state2={};fields.has("open")&&(state2.open=this.open),fields.has("width")&&(state2.railWidthPx=this.railWidthInPixels),fields.has("preferred-mode")&&(state2.preferredMode=this.preferredMode??null),writePersistedState(this.storageFullKey,state2)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("resizable")||changed.has("mode"))&&(!this.resizable||this._mode!=="full")&&this.endResizerGesture(),!this.hasUpdated){this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header"),this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer");const restored=this.loadPersisted();if(restored.preferredMode&&!this.forced){const restoredMode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode);restoredMode!==this._mode&&(this._mode=restoredMode,this.pendingInitialModeAnnouncement=restoredMode)}restored.open&&this.open&&this._mode!=="mobile"&&(this.open=!1)}if(this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.hasUpdated&&this._mode==="mobile"&&!prefersReducedMotion(this)&&this.baseEl?.toggleAttribute("data-sliding",!0),this.overlayActive=next,this.placeToggle(next),next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this.overlayActive&&this.nativeModal.show(),changed.has("topLayer"))for(const item of this.querySelectorAll(tag("app-rail-item")))item.syncRailTopLayer?.();if(this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.pendingInitialModeAnnouncement!==void 0){const mode=this.pendingInitialModeAnnouncement;this.pendingInitialModeAnnouncement=void 0,this.emit("lr-mode-change",{mode})}if(this.syncSlottedItems(),this.placeToggle(this.overlayActive),this.syncExternalTriggerA11y(),this.syncBuiltInKeyShortcuts(),this.baseEl&&(this._mode!=="mobile"||!this.baseEl.getAnimations().some(animation=>"transitionProperty"in animation&&animation.transitionProperty==="transform"))&&this.baseEl.removeAttribute("data-sliding"),this.recoverInlineFocusAfterResponsiveClose){this.recoverInlineFocusAfterResponsiveClose=!1;const active=deepActiveElement(this.ownerDocument);this.baseEl&&!composedContains(this.baseEl,active)&&this.baseEl.focus()}this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial()),this.persistReady&&(changed.has("open")||changed.has("railWidth")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,this.baseEl&&(this.resizable&&this.railWidth!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size")),this.observeResizerPosition(),this.syncResizerPosition()}connectedCallback(){super.connectedCallback(),this.hotkeyWindow=this.ownerDocument.defaultView??void 0,this.hotkeyWindow&&(registerHotkeyOwner(this.hotkeyWindow,this,this.acceptsHotkey),this.hotkeyWindow.addEventListener("keydown",this.onHotkeyKeyDown)),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>{this.nativeModal.show(),this.overlayHandle?.focusInitial()})),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&(this.syncSlottedItems(),this.observeResizerPosition(),this.syncResizerPosition(),this.syncExternalTriggerA11y())})}disconnectedCallback(){this.disconnectResizerPosition(),this.nativeModal.hide(),this.hotkeyWindow&&(this.hotkeyWindow.removeEventListener("keydown",this.onHotkeyKeyDown),unregisterHotkeyOwner(this.hotkeyWindow,this),this.hotkeyWindow=void 0),this.baseEl?.removeAttribute("data-sliding"),this.deferredFocusReturn.cancel(),super.disconnectedCallback(),this.restoreFallbackTabIndex?.(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture(),this.releaseExternalTriggerA11y()}adoptedCallback(){this.disconnectResizerPosition(),super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}resolveExternalTrigger(){if(this.trigger)return this.trigger;if(!this.for)return null;const found=this.getRootNode().getElementById?.(this.for);return found instanceof HTMLElement?found:null}resolveFocusFallback(){const value=this.focusFallback;if(!value)return null;const target=typeof value=="string"?this.getRootNode().getElementById?.(value)??null:value;return isHtmlElement(target)&&target.ownerDocument===this.ownerDocument?target:null}activateMobileOverlay(){this.nativeModal.prepare();const explicitTrigger=this.explicitTrigger;this.explicitTrigger=void 0;const restoreFocusTo=explicitTrigger??this.resolveExternalTrigger()??void 0;this.overlayReturnIsExplicit=explicitTrigger!==void 0,this.deferredFocusReturn.cancel();const active=deepActiveElement(this.ownerDocument);this.overlayOpener=active&&typeof active.focus=="function"&&!composedContains(this,active)?active:null,this.overlayReturnTarget=restoreFocusTo??this.overlayOpener,this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo,preferredInitialFocus:()=>{const panel=this.shadowRoot?.querySelector('[part="panel"]')??null;if(!panel)return null;const toggle=this.toggleEl??null;return collectFocusableElements(panel).filter(stop=>stop!==toggle)[0]??panel},lockScroll:!0,suspendWhenUnrendered:!0})}deactivateMobileOverlay(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1);const handle=this.overlayHandle;if(this.overlayHandle=void 0,this.deferredFocusReturn.cancel(),handle&&restoreFocus&&!this.overlayReturnIsExplicit){const external=this.resolveExternalTrigger();external&&external!==this.overlayReturnTarget&&(this.overlayReturnTarget=external,handle.updateRestoreFocusTo(external))}handle?.deactivate({restoreFocus}),handle&&restoreFocus&&this.scheduleDeferredFocusReturn()}scheduleDeferredFocusReturn(){const candidates=[this.overlayReturnTarget,this.overlayOpener];this.deferredFocusReturn.schedule({host:this,candidates:()=>[...candidates,this.toggleEl],isCurrent:()=>!this.overlayActive,fallback:()=>{this.focusHostFallback()||focusFirstAvailable([this.resolveFocusFallback()])}})}focusHostFallback(){if(!this.hasAttribute("tabindex")){this.setAttribute("tabindex","-1");const view=this.ownerDocument.defaultView,onFocusChange=()=>{deepActiveElement(this.ownerDocument)!==this&&restore()},restore=()=>{this.removeEventListener("blur",onFocusChange),view?.removeEventListener("focus",onFocusChange),this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.restoreFallbackTabIndex=void 0};this.restoreFallbackTabIndex=restore,this.addEventListener("blur",onFocusChange),view?.addEventListener("focus",onFocusChange)}return focusFirstAvailable(this)?!0:(this.restoreFallbackTabIndex?.(),!1)}placeToggle(insidePanel){const toggle=this.toggleEl,panel=this.baseEl;if(!(!toggle||!panel)){if(insidePanel){panel.firstChild!==toggle&&panel.insertBefore(toggle,panel.firstChild);return}toggle.nextSibling!==panel&&panel.parentNode?.insertBefore(toggle,panel)}}setupMediaQueries(){if(!this.isConnected)return;const view=this.ownerDocument.defaultView;if(!view?.matchMedia)return;const iconOnlyQuery=view.matchMedia(`(max-width: ${this.iconOnlyBreakpoint})`),mobileQuery=view.matchMedia(`(max-width: ${this.mobileBreakpoint})`),iconOnlyListener=event=>{this.mqIconOnly!==iconOnlyQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onIconOnlyChange(event)},mobileListener=event=>{this.mqMobile!==mobileQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onMobileChange(event)};this.mqIconOnly=iconOnlyQuery,this.mqMobile=mobileQuery,this.mqIconOnlyListener=iconOnlyListener,this.mqMobileListener=mobileListener,iconOnlyQuery.addEventListener("change",iconOnlyListener),mobileQuery.addEventListener("change",mobileListener),this.iconOnlyMatches=iconOnlyQuery.matches,this.mobileMatches=mobileQuery.matches,!this.forced&&this.applyComputedMode(this.hasUpdated?void 0:{silent:!0})}teardownMediaQueries(){this.mqIconOnly&&this.mqIconOnlyListener&&this.mqIconOnly.removeEventListener("change",this.mqIconOnlyListener),this.mqMobile&&this.mqMobileListener&&this.mqMobile.removeEventListener("change",this.mqMobileListener),this.mqIconOnly=void 0,this.mqMobile=void 0,this.mqIconOnlyListener=void 0,this.mqMobileListener=void 0}applyComputedMode(options){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode),options)}setEffectiveMode(next,options){if(this._mode===next)return;const old=this._mode,resizer=this.renderRoot?.querySelector('[part="resizer"]');old==="full"&&next==="icon-only"&&resizer&&composedContains(resizer,deepActiveElement(this.ownerDocument))&&(this.recoverInlineFocusAfterResponsiveClose=!0),next!=="mobile"&&this.baseEl?.removeAttribute("data-sliding"),old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.baseEl&&(this.resizable&&this.railWidth!=null&&next==="full"||this.baseEl.style.removeProperty("inline-size")),this.requestUpdate("mode",old),options?.silent?this.pendingInitialModeAnnouncement=next:this.emit("lr-mode-change",{mode:next}),next!=="mobile"&&this.open&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(this.open===next)return;if(options?.force){this.open=next,this.emit("lr-toggle",{expanded:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle-request",{expanded:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next,this.emit("lr-toggle",{expanded:next}))}toggleCollapse(){this._mode!=="mobile"&&(this.preferredMode=(this.preferredMode??this._mode)==="icon-only"?"full":"icon-only")}toggle(){this.isConnected&&(this._mode==="mobile"?this.setOpen(!this.open):this.toggleCollapse())}get resolvedHotkeyShortcuts(){const parsed=parseHotkey(this.hotkey);return hotkeyAriaKeyShortcuts(parsed&&hasNonShiftModifier(parsed)?parsed:null,detectPlatform(this.ownerDocument.defaultView?.navigator)==="mac")}syncBuiltInKeyShortcuts(){const value=this.resolvedHotkeyShortcuts;for(const control of[this.toggleEl,this.renderRoot.querySelector('[part="collapse-toggle"]')])!control||control.getAttribute("aria-keyshortcuts")===value||(value===null?control.removeAttribute("aria-keyshortcuts"):control.setAttribute("aria-keyshortcuts",value))}syncExternalTriggerA11y(){const mobile=this._mode==="mobile",trigger=mobile||this.triggerCollapses?this.resolveExternalTrigger():null;if(!trigger){this.releaseExternalTriggerA11y();return}const panel=this.baseEl??null,contribution={attributes:{"aria-expanded":(mobile?this.open:this._mode==="full")?"true":"false","aria-keyshortcuts":this.resolvedHotkeyShortcuts},controls:panel?[panel]:[]};this.triggerAria?this.triggerAria.update(trigger,contribution):this.triggerAria=acquireAriaOwnership(trigger,contribution)}releaseExternalTriggerA11y(){this.triggerAria?.release(),this.triggerAria=void 0}endResizerGesture(commit=!1){const ownerWindow=this.resizeOwnerWindow,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeOwnerWindow=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),ownerWindow?.removeEventListener("pointermove",this.onResizerPointerMove),ownerWindow?.removeEventListener("pointerup",this.onResizerPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onResizerPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onResizerPointerUp),commit&&changed&&(this.emit("lr-rail-resize",{widthPx}),this.persistReady&&this.persistState())}requestRailResize(next,commit=!0){if(!this.resizable||this._mode!=="full"||!this.isConnected||next===this.effectiveRailWidthPx)return!1;const event=this.emit("lr-rail-resize-request",{widthPx:next},{cancelable:!0});return!this.resizable||this._mode!=="full"||!this.isConnected?(this.endResizerGesture(),!1):event.defaultPrevented?!1:(this.railWidth=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}observeResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!this.isConnected||!resizer||!this.baseEl||this._mode!=="full"||!this.resizable){this.disconnectResizerPosition();return}if(this.observedResizer===resizer)return;this.disconnectResizerPosition();const ResizeObserverConstructor=this.ownerDocument.defaultView?.ResizeObserver;ResizeObserverConstructor&&(this.resizerPositionObserver=new ResizeObserverConstructor(()=>this.syncResizerPosition()),this.resizerPositionObserver.observe(this,{box:"border-box"}),this.resizerPositionObserver.observe(this.baseEl,{box:"border-box"}),this.resizerPositionObserver.observe(resizer,{box:"border-box"}),this.observedResizer=resizer)}disconnectResizerPosition(){this.resizerPositionObserver?.disconnect(),this.resizerPositionObserver=void 0,this.observedResizer=void 0}syncResizerPosition(){const resizer=this.renderRoot.querySelector('[part="resizer"]');if(!resizer||!this.baseEl||this._mode!=="full"||!this.resizable)return;const hostRect=this.getBoundingClientRect(),baseRect=this.baseEl.getBoundingClientRect(),half=resizer.getBoundingClientRect().width/2,offset=this.getAttribute("dir")==="rtl"||isRtl(this)?hostRect.right-baseRect.left:baseRect.right-hostRect.left;resizer.style.setProperty("inset-inline-start",`${offset-half}px`),resizer.style.setProperty("inset-inline-end","auto")}render(){const mobile=this._mode==="mobile",railWidthPx=this.effectiveRailWidthPx,showCollapse=this.collapsible&&!mobile,expanded=this._mode!=="icon-only";return this.nativeModal.render(html`
       <button
         part="toggle"
         type="button"

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);--_lr-card-radius:var(--border-radius,var(--lr-radius-container));min-inline-size:0;display:block;container-type:inline-size}[part=base]{border:var(--border-width,var(--lr-border-width-thin)) solid var(--border-color,var(--lr-color-border-subtle));border-radius:var(--_lr-card-radius);background:var(--lr-card-outlined-bg,var(--lr-color-surface-container-low));box-sizing:border-box;block-size:100%;color:inherit;box-shadow:var(--lr-card-shadow,none);flex-direction:column;text-decoration:none;display:flex;position:relative;overflow:hidden}.linked-shell{block-size:100%;min-inline-size:0;max-inline-size:100%;position:relative}.linked-shell>[part=base]{z-index:var(--lr-layer-base);position:absolute;inset:0;border-radius:var(--_lr-card-radius)!important}.linked-content{z-index:var(--lr-layer-content);box-sizing:border-box;block-size:100%;min-inline-size:0;max-inline-size:100%;color:inherit;border-radius:var(--_lr-card-radius);pointer-events:none;flex-direction:column;text-decoration:none;display:flex;position:relative;overflow:hidden}.linked-content slot,.linked-content [title]{pointer-events:auto}:host([appearance=filled]) [part=base]{background:var(--lr-card-filled-bg,var(--lr-color-brand-quiet));border-color:#0000}:host([appearance=filled-outlined]) [part=base]{background:var(--lr-card-filled-outlined-bg,var(--lr-color-brand-quiet))}:host([appearance=accent]) [part=base]{border-color:#0000;border-inline-start:var(--lr-border-width-thick) solid var(--lr-card-accent-border-color,var(--lr-color-brand))}:host([appearance=plain]) [part=base]{background:0 0;border-color:#0000}[part=base][data-actionable=true]{border-color:var(--border-color,var(--lr-color-border));cursor:pointer;transition:border-color var(--lr-transition-fast)}[part=base][data-actionable=true]:not([data-disabled]):hover,.linked-shell:hover>[part=base][data-actionable=true]:not([data-disabled]){border-color:var(--lr-card-interactive-hover-border-color,var(--lr-color-brand));box-shadow:var(--lr-card-interactive-hover-shadow,var(--lr-card-shadow,none))}[part=base][data-actionable=true]:not([data-disabled]):active,.linked-shell:active>[part=base][data-actionable=true]:not([data-disabled]){border-color:var(--lr-card-interactive-active-border-color,var(--lr-color-brand));background-image:linear-gradient(var(--lr-card-interactive-active-overlay,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active))), var(--lr-card-interactive-active-overlay,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active))))}:host(:disabled) [part=base],[part=base][data-disabled],.linked-content[data-disabled]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=activation-button]{z-index:var(--lr-layer-content);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:inherit;pointer-events:none;background:0 0;border:0;padding:0;position:absolute;inset:0}[part=activation-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-offset) * -1)}[part=base][href]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part~=media][hidden],[part=header][hidden],[part=footer][hidden]{display:none}[part~=media] ::slotted(*){box-sizing:border-box;inline-size:100%;display:block}[part~=media] ::slotted([hidden]:not([hidden=until-found i])){display:none}[part=header]{align-items:center;gap:var(--spacing,var(--padding,var(--lr-space-m)));min-inline-size:0;padding:var(--spacing,var(--padding,var(--lr-space-m)));border-block-end:var(--border-width,var(--lr-border-width-thin)) solid var(--border-color,var(--lr-color-border-subtle));flex-wrap:wrap;display:flex}::slotted([slot=header]){overflow-wrap:break-word;flex:auto;min-inline-size:0}[part=actions]{align-items:center;gap:var(--spacing,var(--padding,var(--lr-space-m)));flex:none;margin-inline-start:auto;display:flex}[part=actions][hidden]{display:none}[part=body]{padding:var(--spacing,var(--padding,var(--lr-space-m)));overflow-wrap:break-word;flex:auto;min-inline-size:0}[part=footer]{align-items:center;gap:var(--spacing,var(--padding,var(--lr-space-m)));padding:var(--spacing,var(--padding,var(--lr-space-m)));border-block-start:var(--border-width,var(--lr-border-width-thin)) solid var(--border-color,var(--lr-color-border-subtle));flex-wrap:wrap;display:flex}.footer-actions{align-items:center;gap:var(--spacing,var(--padding,var(--lr-space-m)));margin-inline-start:auto;display:inline-flex}.footer-actions[hidden]{display:none}:host([orientation=horizontal]) [part=base],:host([orientation=horizontal]) .linked-content{flex-direction:row;align-items:stretch}:host([orientation=horizontal]) [part~=media]{flex:0 auto;min-inline-size:0}:host([orientation=horizontal]) [part=header]:not([hidden]){display:contents}:host([orientation=horizontal]) [part=header]>slot[name=header],:host([orientation=horizontal]) [part=header]>[part=actions]>slot[name=header-actions],:host([orientation=horizontal]) [part=footer]{display:none}:host([orientation=horizontal]) [part=body]{order:2}:host([orientation=horizontal]) [part=actions]{padding:var(--spacing,var(--padding,var(--lr-space-m)));order:3;margin-inline-start:0}@container (inline-size<=30rem){:host([orientation=horizontal]) [part=base],:host([orientation=horizontal]) .linked-content{flex-direction:column}:host([orientation=horizontal]) [part~=media]{inline-size:100%}}`;export{styles};
+import{css}from"lit";import{opaqueContentBorders}from"../../../internal/opaque-content-border.styles.js";const styles=css` ${opaqueContentBorders(':host(:not([appearance="plain"]):not([appearance="filled"]):not([appearance="filled-outlined"])) :is([part="body"], [part="header"], [part="footer"], .linked-content)')} :host { display: block; min-inline-size: 0; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-card-radius: var(--border-radius, var(--lr-radius-container)); } [part="base"] { position: relative; display: flex; flex-direction: column; border: var(--border-width, var(--lr-border-width-thin)) solid var(--border-color, var(--lr-color-border-subtle)); border-radius: var(--_lr-card-radius); background: var(--lr-card-outlined-bg, var(--lr-color-surface-container-low)); block-size: 100%; box-sizing: border-box; color: inherit; text-decoration: none; overflow: hidden; box-shadow: var(--lr-card-shadow, none); } .linked-shell { position: relative; min-inline-size: 0; max-inline-size: 100%; block-size: 100%; } .linked-shell > [part="base"] { position: absolute; inset: 0; z-index: var(--lr-layer-base); border-radius: var(--_lr-card-radius) !important; } .linked-content { position: relative; z-index: var(--lr-layer-content); display: flex; min-inline-size: 0; max-inline-size: 100%; flex-direction: column; block-size: 100%; box-sizing: border-box; color: inherit; text-decoration: none; overflow: hidden; border-radius: var(--_lr-card-radius); pointer-events: none; } .linked-content slot, .linked-content [title] { pointer-events: auto; } :host([appearance="filled"]) [part="base"] { border-color: transparent; background: var(--lr-card-filled-bg, var(--lr-color-brand-quiet)); } :host([appearance="filled-outlined"]) [part="base"] { background: var(--lr-card-filled-outlined-bg, var(--lr-color-brand-quiet)); } :host([appearance="accent"]) [part="base"] { border-color: transparent; border-inline-start: var(--lr-border-width-thick) solid var(--lr-card-accent-border-color, var(--lr-color-brand)); } :host([appearance="plain"]) [part="base"] { border-color: transparent; background: transparent; } [part="base"][data-actionable="true"] { border-color: var(--border-color, var(--lr-color-border)); cursor: pointer; transition: border-color var(--lr-transition-fast); } [part="base"][data-actionable="true"]:not([data-disabled]):hover, .linked-shell:hover > [part="base"][data-actionable="true"]:not([data-disabled]) { border-color: var(--lr-card-interactive-hover-border-color, var(--lr-color-brand)); box-shadow: var(--lr-card-interactive-hover-shadow, var(--lr-card-shadow, none)); } [part="base"][data-actionable="true"]:not([data-disabled]):active, .linked-shell:active > [part="base"][data-actionable="true"]:not([data-disabled]) { border-color: var(--lr-card-interactive-active-border-color, var(--lr-color-brand)); background-image: linear-gradient( var( --lr-card-interactive-active-overlay, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ), var( --lr-card-interactive-active-overlay, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ) ); } :host(:disabled) [part="base"], [part="base"][data-disabled], .linked-content[data-disabled] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="activation-button"] { position: absolute; inset: 0; z-index: var(--lr-layer-content); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: 0; border: 0; border-radius: inherit; background: transparent; pointer-events: none; } [part="activation-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); } [part="base"][href]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="media"][hidden], [part="header"][hidden], [part="footer"][hidden] { display: none; } [part~="media"] ::slotted(*) { display: block; inline-size: 100%; box-sizing: border-box; } [part~="media"] ::slotted([hidden]:not([hidden="until-found" i])) { display: none; } [part="header"] { display: flex; flex-wrap: wrap; align-items: center; min-inline-size: 0; gap: var(--spacing, var(--padding, var(--lr-space-m))); padding: var(--spacing, var(--padding, var(--lr-space-m))); border-block-end: var(--border-width, var(--lr-border-width-thin)) solid var(--border-color, var(--lr-color-border-subtle)); } ::slotted([slot="header"]) { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: break-word; } [part="actions"] { display: flex; align-items: center; gap: var(--spacing, var(--padding, var(--lr-space-m))); flex: 0 0 auto; margin-inline-start: auto; } [part="actions"][hidden] { display: none; } [part="body"] { padding: var(--spacing, var(--padding, var(--lr-space-m))); flex: 1 1 auto; min-inline-size: 0; overflow-wrap: break-word; } [part="footer"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing, var(--padding, var(--lr-space-m))); padding: var(--spacing, var(--padding, var(--lr-space-m))); border-block-start: var(--border-width, var(--lr-border-width-thin)) solid var(--border-color, var(--lr-color-border-subtle)); } .footer-actions { display: inline-flex; align-items: center; gap: var(--spacing, var(--padding, var(--lr-space-m))); margin-inline-start: auto; } .footer-actions[hidden] { display: none; } :host([orientation="horizontal"]) [part="base"], :host([orientation="horizontal"]) .linked-content { flex-direction: row; align-items: stretch; } :host([orientation="horizontal"]) [part~="media"] { flex: 0 1 auto; min-inline-size: 0; } :host([orientation="horizontal"]) [part="header"]:not([hidden]) { display: contents; } :host([orientation="horizontal"]) [part="header"] > slot[name="header"], :host([orientation="horizontal"]) [part="header"] > [part="actions"] > slot[name="header-actions"], :host([orientation="horizontal"]) [part="footer"] { display: none; } :host([orientation="horizontal"]) [part="body"] { order: 2; } :host([orientation="horizontal"]) [part="actions"] { order: 3; margin-inline-start: 0; padding: var(--spacing, var(--padding, var(--lr-space-m))); } @container (max-inline-size: 30rem) { :host([orientation="horizontal"]) [part="base"], :host([orientation="horizontal"]) .linked-content { flex-direction: column; } :host([orientation="horizontal"]) [part~="media"] { inline-size: 100%; } } `;export{styles};

package/dist/components/layout/details/accordion-item.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-accordion-item-spacing:var(--lr-form-control-padding-inline);--_lr-accordion-item-show-duration:var(--lr-duration-base);--_lr-accordion-item-hide-duration:var(--lr-duration-base);--_lr-accordion-item-easing:var(--lr-easing-standard);min-inline-size:0;color:var(--lr-color-text);display:block}[part~=accordion-item]{min-inline-size:0;font-size:var(--lr-form-control-font-size);background:0 0}[part~=accordion-item][data-appearance=outlined]{background:var(--lr-accordion-item-outlined-bg,var(--lr-color-surface))}[part~=accordion-item][data-appearance=filled]{background:var(--lr-accordion-item-filled-bg,var(--lr-color-surface-raised))}[part~=accordion-item][data-appearance=filled-outlined]{background:var(--lr-accordion-item-filled-outlined-bg,var(--lr-color-surface-raised))}[part~=heading]{font:inherit;font-family:var(--lr-font-heading);margin:0}[part~=button]{align-items:center;gap:var(--spacing,var(--lr-accordion-item-spacing,var(--_lr-accordion-item-spacing)));inline-size:100%;min-block-size:var(--lr-icon-button-size);box-sizing:border-box;padding-block:var(--spacing,var(--lr-accordion-item-summary-padding-block,var(--lr-accordion-item-spacing,var(--_lr-accordion-item-spacing))));padding-inline:var(--spacing,var(--lr-accordion-item-summary-padding-inline,var(--lr-accordion-item-spacing,var(--_lr-accordion-item-spacing))));color:inherit;font:inherit;font-weight:var(--lr-font-weight-semibold);text-align:start;cursor:pointer;background:0 0;border:none;border-radius:0;display:flex}[part~=button]:where(:hover):where(:not(:disabled)){background:var(--lr-accordion-item-button-hover-bg,var(--lr-color-brand-quiet))}[part~=button]:where(:active):where(:not(:disabled)){background:var(--lr-accordion-item-button-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part~=button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(var(--lr-focus-ring-width) * -1)}[part~=button]:disabled{cursor:not-allowed}:host([disabled]) [part~=accordion-item]{opacity:var(--lr-opacity-disabled)}[part~=label]{overflow-wrap:anywhere;flex:auto;min-inline-size:0}[part~=icon]{color:var(--lr-color-text-quiet);transition:rotate var(--hide-duration,var(--lr-accordion-item-hide-duration,var(--_lr-accordion-item-hide-duration))) var(--easing,var(--lr-accordion-item-easing,var(--_lr-accordion-item-easing)));flex:none;justify-content:center;align-items:center;display:inline-flex}[part~=accordion-item][data-icon-placement=start] [part~=icon]{order:-1}.default-icon{inline-size:var(--lr-size-0-5rem);block-size:var(--lr-size-0-5rem);border-inline-end:var(--lr-border-width-thin) solid currentColor;border-block-end:var(--lr-border-width-thin) solid currentColor;display:block;transform:rotate(-45deg)}:host(:dir(rtl)) .default-icon{transform:rotate(45deg)}:host([expanded]) [part~=icon]{transition-duration:var(--_lr-motion-duration,var(--show-duration,var(--lr-accordion-item-show-duration,var(--_lr-accordion-item-show-duration))));rotate:90deg}:host([expanded]:dir(rtl)) [part~=icon]{rotate:-90deg}[part~=panel]{visibility:hidden;opacity:0;color:var(--lr-color-text-quiet);transition:grid-template-rows var(--hide-duration,var(--lr-accordion-item-hide-duration,var(--_lr-accordion-item-hide-duration))) var(--easing,var(--lr-accordion-item-easing,var(--_lr-accordion-item-easing))), opacity var(--hide-duration,var(--lr-accordion-item-hide-duration,var(--_lr-accordion-item-hide-duration))) var(--easing,var(--lr-accordion-item-easing,var(--_lr-accordion-item-easing))), visibility var(--hide-duration,var(--lr-accordion-item-hide-duration,var(--_lr-accordion-item-hide-duration))) step-end;grid-template-rows:0fr;display:grid}:host([expanded]) [part~=panel]{visibility:visible;opacity:1;transition:grid-template-rows var(--show-duration,var(--lr-accordion-item-show-duration,var(--_lr-accordion-item-show-duration))) var(--easing,var(--lr-accordion-item-easing,var(--_lr-accordion-item-easing))), opacity var(--show-duration,var(--lr-accordion-item-show-duration,var(--_lr-accordion-item-show-duration))) var(--easing,var(--lr-accordion-item-easing,var(--_lr-accordion-item-easing))), visibility var(--show-duration,var(--lr-accordion-item-show-duration,var(--_lr-accordion-item-show-duration))) step-start;grid-template-rows:1fr}.panel-clip{min-block-size:0;overflow:hidden}[part~=content]{padding-block-end:var(--spacing,var(--lr-accordion-item-content-padding-block-end,var(--lr-accordion-item-spacing,var(--_lr-accordion-item-spacing))));padding-inline:var(--spacing,var(--lr-accordion-item-content-padding-inline,var(--lr-accordion-item-spacing,var(--_lr-accordion-item-spacing))));overflow-wrap:anywhere;display:block}@media (prefers-reduced-motion:reduce){[part~=panel],[part~=icon]{transition:none}}`;export{styles};
+import{css}from"lit";import{opaqueContentBorders}from"../../../internal/opaque-content-border.styles.js";const styles=css` ${opaqueContentBorders('[part~="accordion-item"][data-appearance="outlined"] [part~="panel"]')} :host { --_lr-accordion-item-spacing: var(--lr-form-control-padding-inline); --_lr-accordion-item-show-duration: var(--lr-duration-base); --_lr-accordion-item-hide-duration: var(--lr-duration-base); --_lr-accordion-item-easing: var(--lr-easing-standard); display: block; min-inline-size: 0; color: var(--lr-color-text); } [part~="accordion-item"] { min-inline-size: 0; background: transparent; font-size: var(--lr-form-control-font-size); } [part~="accordion-item"][data-appearance="outlined"] { background: var(--lr-accordion-item-outlined-bg, var(--lr-color-surface)); } [part~="accordion-item"][data-appearance="filled"] { background: var( --lr-accordion-item-filled-bg, var(--lr-color-surface-raised) ); } [part~="accordion-item"][data-appearance="filled-outlined"] { background: var( --lr-accordion-item-filled-outlined-bg, var(--lr-color-surface-raised) ); } [part~="heading"] { margin: 0; font: inherit; font-family: var(--lr-font-heading); } [part~="button"] { display: flex; align-items: center; gap: var( --spacing, var(--lr-accordion-item-spacing, var(--_lr-accordion-item-spacing)) ); inline-size: 100%; min-block-size: var(--lr-icon-button-size); box-sizing: border-box; padding-block: var( --spacing, var( --lr-accordion-item-summary-padding-block, var(--lr-accordion-item-spacing, var(--_lr-accordion-item-spacing)) ) ); padding-inline: var( --spacing, var( --lr-accordion-item-summary-padding-inline, var(--lr-accordion-item-spacing, var(--_lr-accordion-item-spacing)) ) ); border: none; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: var(--lr-font-weight-semibold); text-align: start; cursor: pointer; } [part~="button"]:where(:hover):where(:not(:disabled)) { background: var( --lr-accordion-item-button-hover-bg, var(--lr-color-brand-quiet) ); } [part~="button"]:where(:active):where(:not(:disabled)) { background: var( --lr-accordion-item-button-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part~="button"]:where(:focus-visible) { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-width) * -1); } [part~="button"]:disabled { cursor: not-allowed; } :host([disabled]) [part~="accordion-item"] { opacity: var(--lr-opacity-disabled); } [part~="label"] { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; } [part~="icon"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); transition: rotate var( --hide-duration, var( --lr-accordion-item-hide-duration, var(--_lr-accordion-item-hide-duration) ) ) var( --easing, var(--lr-accordion-item-easing, var(--_lr-accordion-item-easing)) ); } [part~="accordion-item"][data-icon-placement="start"] [part~="icon"] { order: -1; } .default-icon { display: block; inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-inline-end: var(--lr-border-width-thin) solid currentColor; border-block-end: var(--lr-border-width-thin) solid currentColor; transform: rotate(-45deg); } :host(:dir(rtl)) .default-icon { transform: rotate(45deg); } :host([expanded]) [part~="icon"] { rotate: 90deg; transition-duration: var(--_lr-motion-duration, var( --show-duration, var( --lr-accordion-item-show-duration, var(--_lr-accordion-item-show-duration) ) )); } :host([expanded]:dir(rtl)) [part~="icon"] { rotate: -90deg; } [part~="panel"] { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; color: var(--lr-color-text-quiet); transition: grid-template-rows var( --hide-duration, var( --lr-accordion-item-hide-duration, var(--_lr-accordion-item-hide-duration) ) ) var( --easing, var(--lr-accordion-item-easing, var(--_lr-accordion-item-easing)) ), opacity var( --hide-duration, var( --lr-accordion-item-hide-duration, var(--_lr-accordion-item-hide-duration) ) ) var( --easing, var(--lr-accordion-item-easing, var(--_lr-accordion-item-easing)) ), visibility var( --hide-duration, var( --lr-accordion-item-hide-duration, var(--_lr-accordion-item-hide-duration) ) ) step-end; } :host([expanded]) [part~="panel"] { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows var( --show-duration, var( --lr-accordion-item-show-duration, var(--_lr-accordion-item-show-duration) ) ) var( --easing, var(--lr-accordion-item-easing, var(--_lr-accordion-item-easing)) ), opacity var( --show-duration, var( --lr-accordion-item-show-duration, var(--_lr-accordion-item-show-duration) ) ) var( --easing, var(--lr-accordion-item-easing, var(--_lr-accordion-item-easing)) ), visibility var( --show-duration, var( --lr-accordion-item-show-duration, var(--_lr-accordion-item-show-duration) ) ) step-start; } .panel-clip { min-block-size: 0; overflow: hidden; } [part~="content"] { display: block; padding-block-end: var( --spacing, var( --lr-accordion-item-content-padding-block-end, var(--lr-accordion-item-spacing, var(--_lr-accordion-item-spacing)) ) ); padding-inline: var( --spacing, var( --lr-accordion-item-content-padding-inline, var(--lr-accordion-item-spacing, var(--_lr-accordion-item-spacing)) ) ); overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { [part~="panel"], [part~="icon"] { transition: none; } } `;export{styles};

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-details-font-size:var(--lr-form-control-font-size);--_lr-details-spacing:var(--lr-form-control-padding-inline);flex-direction:column;min-block-size:0;max-block-size:100%;min-inline-size:0;max-inline-size:100%;display:flex}[part~=base]{box-sizing:border-box;border:var(--lr-border-width-thin) solid var(--lr-details-outlined-border-color,var(--lr-color-border));border-radius:var(--lr-details-radius,var(--lr-radius-container));background:var(--lr-details-outlined-bg,var(--lr-color-surface));min-block-size:0;min-inline-size:0;max-inline-size:100%;font-size:var(--lr-details-font-size,var(--_lr-details-font-size));flex-direction:column;flex:auto;display:flex;overflow:clip}:host([appearance=filled]) [part~=base]{border-color:var(--lr-details-filled-border-color,transparent);background:var(--lr-details-filled-bg,var(--lr-color-brand-quiet))}:host([appearance=filled-outlined]) [part~=base]{border-color:var(--lr-details-filled-outlined-border-color,var(--lr-color-border));background:var(--lr-details-filled-outlined-bg,var(--lr-color-brand-quiet))}:host([appearance=plain]) [part~=base]{background:0 0;border-color:#0000}[part=header]{align-items:center;gap:var(--lr-details-gap,var(--lr-space-s));flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;display:flex}.native-details{flex:auto;min-inline-size:0;max-inline-size:100%;display:block}[part=summary]{align-items:center;gap:var(--lr-details-gap,var(--lr-space-s));min-block-size:max(var(--lr-size-24px), min(var(--lr-icon-button-size), var(--lr-form-control-height)));padding-block:var(--spacing,var(--lr-details-summary-padding-block,var(--lr-details-spacing,var(--_lr-details-spacing))));padding-inline:var(--spacing,var(--lr-details-summary-padding-inline,var(--lr-details-spacing,var(--_lr-details-spacing))));color:var(--lr-color-text);cursor:pointer;font-weight:var(--lr-font-weight-semibold);overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;list-style:none;display:flex;overflow:clip}.summary-content{overflow-wrap:anywhere;flex:auto;min-inline-size:0}[part=summary]::marker,[part=summary]::-webkit-details-marker{display:none}:host(:not([disabled])) [part=summary]:hover{background:var(--lr-details-summary-hover-bg,var(--lr-color-brand-quiet))}:host(:not([disabled])) [part=summary]:active{background:var(--lr-details-summary-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=summary]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part~=icon]{flex:none;justify-content:center;align-items:center;display:inline-flex}:host([icon-placement=start]) [part~=icon]{order:-1}.icon-fallback{transition:transform var(--hide-duration,var(--lr-duration-base)) var(--lr-easing-standard);display:inline-flex;transform:rotate(90deg)}:host([open]) .icon-fallback{transition-duration:var(--_lr-motion-duration,var(--show-duration,var(--lr-duration-base)));transform:rotate(-90deg)}.icon-fallback svg{inline-size:var(--lr-size-1rem);block-size:var(--lr-size-1rem)}:host([disabled]) [part=summary]{cursor:not-allowed;opacity:var(--lr-opacity-disabled)}[part~=header-actions]:where(:not([hidden])){overflow-wrap:anywhere;flex:0 auto;align-items:center;min-inline-size:0;max-inline-size:100%;display:flex}.content-gate:not([hidden]){flex-direction:column;flex:auto;min-block-size:0;min-inline-size:0;display:flex}.content-gate:where([hidden=until-found]){box-sizing:border-box;contain:layout;pointer-events:none;border:0;block-size:0;min-block-size:0;max-block-size:0;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;display:block;overflow:clip}[part=content]{padding-block-end:var(--spacing,var(--lr-details-content-padding-block-end,var(--lr-details-spacing,var(--_lr-details-spacing))));padding-inline:var(--spacing,var(--lr-details-content-padding-inline,var(--lr-details-spacing,var(--_lr-details-spacing))));overflow-wrap:anywhere;box-sizing:border-box;flex:auto;min-block-size:0;min-inline-size:0;max-inline-size:100%;overflow:auto}@media (prefers-reduced-motion:reduce){.icon-fallback{transition:none}}`;export{styles};
+import{css}from"lit";import{opaqueContentBorders}from"../../../internal/opaque-content-border.styles.js";const styles=css` ${opaqueContentBorders(":host(:not([appearance='plain']):not([appearance='filled']):not([appearance='filled-outlined'])) [part='content']")} :host { display: flex; flex-direction: column; min-block-size: 0; max-block-size: 100%; min-inline-size: 0; max-inline-size: 100%; --_lr-details-font-size: var(--lr-form-control-font-size); --_lr-details-spacing: var(--lr-form-control-padding-inline); } [part~='base'] { display: flex; flex-direction: column; box-sizing: border-box; border: var(--lr-border-width-thin) solid var(--lr-details-outlined-border-color, var(--lr-color-border)); border-radius: var(--lr-details-radius, var(--lr-radius-container)); background: var(--lr-details-outlined-bg, var(--lr-color-surface)); min-inline-size: 0; max-inline-size: 100%; flex: 1 1 auto; min-block-size: 0; font-size: var(--lr-details-font-size, var(--_lr-details-font-size)); overflow: clip; } :host([appearance='filled']) [part~='base'] { border-color: var(--lr-details-filled-border-color, transparent); background: var(--lr-details-filled-bg, var(--lr-color-brand-quiet)); } :host([appearance='filled-outlined']) [part~='base'] { border-color: var( --lr-details-filled-outlined-border-color, var(--lr-color-border) ); background: var( --lr-details-filled-outlined-bg, var(--lr-color-brand-quiet) ); } :host([appearance='plain']) [part~='base'] { border-color: transparent; background: transparent; } [part='header'] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lr-details-gap, var(--lr-space-s)); min-inline-size: 0; max-inline-size: 100%; } .native-details { display: block; flex: 1 1 auto; min-inline-size: 0; max-inline-size: 100%; } [part='summary'] { display: flex; align-items: center; gap: var(--lr-details-gap, var(--lr-space-s)); min-block-size: max(var(--lr-size-24px), min(var(--lr-icon-button-size), var(--lr-form-control-height))); padding-block: var( --spacing, var( --lr-details-summary-padding-block, var(--lr-details-spacing, var(--_lr-details-spacing)) ) ); padding-inline: var( --spacing, var( --lr-details-summary-padding-inline, var(--lr-details-spacing, var(--_lr-details-spacing)) ) ); color: var(--lr-color-text); cursor: pointer; font-weight: var(--lr-font-weight-semibold); list-style: none; min-inline-size: 0; max-inline-size: 100%; overflow: clip; overflow-wrap: anywhere; } .summary-content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; } [part='summary']::marker, [part='summary']::-webkit-details-marker { display: none; } :host(:not([disabled])) [part='summary']:hover { background: var(--lr-details-summary-hover-bg, var(--lr-color-brand-quiet)); } :host(:not([disabled])) [part='summary']:active { background: var( --lr-details-summary-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part='summary']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(-1 * var(--lr-focus-ring-width)); } [part~='icon'] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } :host([icon-placement='start']) [part~='icon'] { order: -1; } .icon-fallback { display: inline-flex; transform: rotate(90deg); transition: transform var(--hide-duration, var(--lr-duration-base)) var(--lr-easing-standard); } :host([open]) .icon-fallback { transform: rotate(-90deg); transition-duration: var(--_lr-motion-duration, var(--show-duration, var(--lr-duration-base))); } .icon-fallback svg { inline-size: var(--lr-size-1rem); block-size: var(--lr-size-1rem); } :host([disabled]) [part='summary'] { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part~='header-actions']:where(:not([hidden])) { display: flex; flex: 0 1 auto; align-items: center; min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } .content-gate:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; } .content-gate:where([hidden='until-found']) { display: block; box-sizing: border-box; block-size: 0; min-block-size: 0; max-block-size: 0; margin-block: 0; margin-inline: 0; border: 0; padding-block: 0; padding-inline: 0; contain: layout; overflow: clip; pointer-events: none; } [part='content'] { padding-block-end: var( --spacing, var( --lr-details-content-padding-block-end, var(--lr-details-spacing, var(--_lr-details-spacing)) ) ); padding-inline: var( --spacing, var( --lr-details-content-padding-inline, var(--lr-details-spacing, var(--_lr-details-spacing)) ) ); min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; flex: 1 1 auto; min-block-size: 0; box-sizing: border-box; overflow: auto; } @media (prefers-reduced-motion: reduce) { .icon-fallback { transition: none; } } `;export{styles};

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

@@ -8,6 +8,7 @@ import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/dec
         <lr-icon-button
           part="move-up-button"
           exportparts="button:move-up-button-control"
+          .label=${this.localize("moveUp")}
           aria-labelledby=${`${this.moveUpLabelId} ${this.itemLabelId}`}
           ?disabled=${this.moveUpDisabled}
           @click=${this.onMoveUpClick}
@@ -17,6 +18,7 @@ import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/dec
         <lr-icon-button
           part="move-down-button"
           exportparts="button:move-down-button-control"
+          .label=${this.localize("moveDown")}
           aria-labelledby=${`${this.moveDownLabelId} ${this.itemLabelId}`}
           ?disabled=${this.moveDownDisabled}
           @click=${this.onMoveDownClick}

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

@@ -29,6 +29,9 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 *   `variant` changes its private default to that variant's `-quiet` tint.
 * @cssprop [--lr-avatar-color=var(--lr-color-text)] - Initials/glyph color. Each non-neutral
 *   `variant` changes its private default to that variant's loud color.
+* @cssprop [--lr-avatar-border=none] - Border shorthand for the container, inherited or set per
+*   avatar. The border stays inside the fixed outer diameter for every shape and content tier.
+*   Forced colors retains the system-color boundary instead.
 * @cssprop [--lr-avatar-font-size=var(--lr-font-size-m)] - Font size of the initials fallback (and
 *   of any `em`-sized slotted glyph). `size` steps its private default alongside the diameter, so
 *   the initials track the circle instead of staying at one fixed size across every tier.

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{vertical-align:middle;--_lr-avatar-size:var(--lr-size-3rem);--_lr-avatar-bg:var(--lr-color-neutral-fill-quiet);--_lr-avatar-color:var(--lr-color-text);--_lr-avatar-font-size:var(--lr-font-size-m);--_lr-avatar-radius:var(--lr-radius-pill);display:inline-flex}:host([size="2xs"]){--_lr-avatar-size:var(--lr-size-1-5rem);--_lr-avatar-font-size:var(--lr-font-size-xs)}:host([size=xs]){--_lr-avatar-size:var(--lr-size-2rem);--_lr-avatar-font-size:var(--lr-font-size-sm)}:host([size=s]),:host([size=small]){--_lr-avatar-size:var(--lr-size-2-5rem);--_lr-avatar-font-size:var(--lr-font-size-md-sm)}:host([size=l]),:host([size=large]){--_lr-avatar-size:var(--lr-size-4rem);--_lr-avatar-font-size:var(--lr-font-size-lg)}:host([size=xl]){--_lr-avatar-size:var(--lr-size-5rem);--_lr-avatar-font-size:var(--lr-font-size-xl)}:host([variant=brand]){--_lr-avatar-bg:var(--lr-color-brand-quiet);--_lr-avatar-color:var(--lr-color-brand)}:host([variant=success]){--_lr-avatar-bg:var(--lr-color-success-quiet);--_lr-avatar-color:var(--lr-color-success)}:host([variant=warning]){--_lr-avatar-bg:var(--lr-color-warning-quiet);--_lr-avatar-color:var(--lr-color-warning)}:host([variant=danger]){--_lr-avatar-bg:var(--lr-color-danger-quiet);--_lr-avatar-color:var(--lr-color-danger)}[part=base]{inline-size:var(--size,var(--lr-avatar-size,var(--_lr-avatar-size)));block-size:var(--size,var(--lr-avatar-size,var(--_lr-avatar-size)));border-radius:var(--lr-avatar-radius,var(--_lr-avatar-radius));background:var(--lr-avatar-bg,var(--_lr-avatar-bg));color:var(--lr-avatar-color,var(--_lr-avatar-color));font-size:var(--lr-avatar-font-size,var(--_lr-avatar-font-size));font-weight:var(--lr-font-weight-semibold);flex:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}:host([shape=rounded]){--_lr-avatar-radius:var(--lr-radius)}:host([shape=square]){--_lr-avatar-radius:0}[part=icon]{flex:none;justify-content:center;align-items:center;display:inline-flex}[part=icon] ::slotted(svg){display:block}[part=icon] ::slotted([hidden]:not([hidden=until-found i])),[part=icon][hidden],[part=icon] slot[hidden]{display:none}[part=image]{object-fit:cover;block-size:100%;inline-size:100%}@media (forced-colors:active){[part=base]{border:var(--lr-border-width-thin) solid CanvasText;color:canvastext;forced-color-adjust:auto;background:canvas}[part=image]{forced-color-adjust:none}}`;export{styles};
+import{css}from"lit";const styles=css`:host{vertical-align:middle;--_lr-avatar-size:var(--lr-size-3rem);--_lr-avatar-bg:var(--lr-color-neutral-fill-quiet);--_lr-avatar-color:var(--lr-color-text);--_lr-avatar-font-size:var(--lr-font-size-m);--_lr-avatar-radius:var(--lr-radius-pill);display:inline-flex}:host([size="2xs"]){--_lr-avatar-size:var(--lr-size-1-5rem);--_lr-avatar-font-size:var(--lr-font-size-xs)}:host([size=xs]){--_lr-avatar-size:var(--lr-size-2rem);--_lr-avatar-font-size:var(--lr-font-size-sm)}:host([size=s]),:host([size=small]){--_lr-avatar-size:var(--lr-size-2-5rem);--_lr-avatar-font-size:var(--lr-font-size-md-sm)}:host([size=l]),:host([size=large]){--_lr-avatar-size:var(--lr-size-4rem);--_lr-avatar-font-size:var(--lr-font-size-lg)}:host([size=xl]){--_lr-avatar-size:var(--lr-size-5rem);--_lr-avatar-font-size:var(--lr-font-size-xl)}:host([variant=brand]){--_lr-avatar-bg:var(--lr-color-brand-quiet);--_lr-avatar-color:var(--lr-color-brand)}:host([variant=success]){--_lr-avatar-bg:var(--lr-color-success-quiet);--_lr-avatar-color:var(--lr-color-success)}:host([variant=warning]){--_lr-avatar-bg:var(--lr-color-warning-quiet);--_lr-avatar-color:var(--lr-color-warning)}:host([variant=danger]){--_lr-avatar-bg:var(--lr-color-danger-quiet);--_lr-avatar-color:var(--lr-color-danger)}[part=base]{box-sizing:border-box;inline-size:var(--size,var(--lr-avatar-size,var(--_lr-avatar-size)));block-size:var(--size,var(--lr-avatar-size,var(--_lr-avatar-size)));border:var(--lr-avatar-border,none);border-radius:var(--lr-avatar-radius,var(--_lr-avatar-radius));background:var(--lr-avatar-bg,var(--_lr-avatar-bg));color:var(--lr-avatar-color,var(--_lr-avatar-color));font-size:var(--lr-avatar-font-size,var(--_lr-avatar-font-size));font-weight:var(--lr-font-weight-semibold);flex:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}:host([shape=rounded]){--_lr-avatar-radius:var(--lr-radius)}:host([shape=square]){--_lr-avatar-radius:0}[part=icon]{flex:none;justify-content:center;align-items:center;display:inline-flex}[part=icon] ::slotted(svg){display:block}[part=icon] ::slotted([hidden]:not([hidden=until-found i])),[part=icon][hidden],[part=icon] slot[hidden]{display:none}[part=image]{object-fit:cover;block-size:100%;inline-size:100%}@media (forced-colors:active){[part=base]{border:var(--lr-border-width-thin) solid CanvasText;color:canvastext;forced-color-adjust:auto;background:canvas}[part=image]{forced-color-adjust:none}}`;export{styles};

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{min-inline-size:0;display:block}[part=base]{gap:var(--lr-space-s);min-inline-size:0;display:grid}[part=viewport]{min-block-size:var(--lr-pan-zoom-min-block-size,var(--lr-size-10rem));overscroll-behavior:contain;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-raised);transition:border-color var(--lr-transition-fast);outline:none;overflow:auto}[part=viewport]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=viewport]:hover{border-color:var(--lr-color-brand)}[part=content]{zoom:var(--lr-pan-zoom-zoom,1);place-items:center;block-size:max-content;min-block-size:100%;inline-size:max-content;min-inline-size:100%;display:grid}[part=content] ::slotted(*){max-inline-size:none}[part=content] img{max-inline-size:none;display:block}:host([fit=contain]) [part=content],:host([fit=width]) [part=content]{inline-size:100%}:host([fit=contain]) [part=content]{block-size:100%}:host([fit=contain]) [part=content] img{object-fit:contain;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0}:host([fit=width]) [part=content] img{block-size:auto;inline-size:100%;max-inline-size:100%}[part=controls]{justify-content:center;align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}[part=zoom-out],[part=zoom-in],[part=reset]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;cursor:pointer;transition:background-color var(--lr-transition-fast)}[part=reset]{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}[part=zoom-out]:not(:disabled):hover,[part=zoom-in]:not(:disabled):hover,[part=reset]:hover{background:var(--lr-color-brand-quiet)}[part=zoom-out]:not(:disabled):active,[part=zoom-in]:not(:disabled):active,[part=reset]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=zoom-out]:disabled,[part=zoom-in]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=zoom-out]:focus-visible,[part=zoom-in]:focus-visible,[part=reset]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};
+import{css}from"lit";const styles=css`:host{min-inline-size:0;display:block}[part=base]{gap:var(--lr-space-s);min-inline-size:0;display:grid}[part=viewport]{min-block-size:var(--lr-pan-zoom-min-block-size,var(--lr-size-10rem));overscroll-behavior:contain;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-raised);transition:border-color var(--lr-transition-fast);outline:none;overflow:auto}[part=viewport]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=viewport]:hover{border-color:var(--lr-color-brand)}[part=content]{zoom:var(--lr-pan-zoom-zoom,1);place-items:center;block-size:max-content;min-block-size:100%;inline-size:max-content;min-inline-size:100%;display:grid}[part=content] ::slotted(*){max-inline-size:none}[part=content] img{max-inline-size:none;display:block}:host([fit=contain]) [part=content],:host([fit=width]) [part=content]{inline-size:100%}:host([fit=contain]) [part=content]{block-size:100%}:host([fit=contain]) [part=content] img{object-fit:contain;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0}:host([fit=width]) [part=content] img{block-size:auto;inline-size:100%;max-inline-size:100%}[part=controls]{justify-content:center;align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}[part=zoom-out],[part=zoom-in],[part=reset]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);font:inherit;cursor:pointer;transition:background-color var(--lr-transition-fast)}[part=reset]{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;position:relative;overflow:hidden}[part=zoom-out]:not(:disabled):hover,[part=zoom-in]:not(:disabled):hover,[part=reset]:hover{background:var(--lr-color-brand-quiet)}[part=zoom-out]:not(:disabled):active,[part=zoom-in]:not(:disabled):active,[part=reset]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=zoom-out]:disabled,[part=zoom-in]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=zoom-out]:focus-visible,[part=zoom-in]:focus-visible,[part=reset]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}`;export{styles};