@aceshooting/lyra-ui 27.0.0 → 28.1.0

package/dist/components/layout/app-rail/app-rail.class.d.ts

@@ -2,7 +2,9 @@ import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from
 /** Whitespace-separated tokens accepted by the `persist` attribute. */
 export type LyraAppRailPersistField='open'|'width'|'preferred-mode';export interface LyraAppRailModeChangeDetail{mode:LyraAppRailMode;}export interface LyraAppRailToggleDetail{
 /** Whether the mobile overlay is (or, on a cancelable proposal, would be) open. */
-expanded:boolean;}export interface LyraAppRailResizeDetail{widthPx:number;}
+expanded:boolean;}export interface LyraAppRailPeekChangeDetail{
+/** Whether the auto-hide rail is now expanded as a temporary overlay. */
+peeking:boolean;}export interface LyraAppRailResizeDetail{widthPx:number;}
 /**
 * Pure breakpoint-to-mode resolver, kept separate from the `matchMedia`
 * wiring below so it's directly unit-testable without resizing a real
@@ -12,7 +14,7 @@ expanded:boolean;}export interface LyraAppRailResizeDetail{widthPx:number;}
 * preference for the full/icon-only axis specifically, while the mobile
 * breakpoint continues to be tracked automatically regardless.
 */
-export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailEventMap{'lr-mode-change':CustomEvent<LyraAppRailModeChangeDetail>;'lr-toggle-request':CustomEvent<LyraAppRailToggleDetail>;'lr-toggle':CustomEvent<LyraAppRailToggleDetail>;'lr-rail-resize-request':CustomEvent<LyraAppRailResizeDetail>;'lr-rail-resize':CustomEvent<LyraAppRailResizeDetail>;}
+export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailEventMap{'lr-mode-change':CustomEvent<LyraAppRailModeChangeDetail>;'lr-toggle-request':CustomEvent<LyraAppRailToggleDetail>;'lr-toggle':CustomEvent<LyraAppRailToggleDetail>;'lr-rail-resize-request':CustomEvent<LyraAppRailResizeDetail>;'lr-rail-resize':CustomEvent<LyraAppRailResizeDetail>;'lr-peek-change':CustomEvent<LyraAppRailPeekChangeDetail>;}
 /**
 * `<lr-app-rail>` — the library's application sidebar, a responsive navigation rail across three
 * presentations as the *viewport* narrows (not this element's own inline
@@ -46,6 +48,14 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 * @cssprop [--lr-app-rail-frame-radius=var(--lr-radius)] - Card-frame corner radius.
 * @cssprop [--lr-app-rail-frame-shadow=var(--lr-shadow-s)] - Card-frame elevation.
 * @customElement lr-app-rail
+* Opt in to `auto-hide` for a desktop sidebar that rests as the `'icon-only'` strip, temporarily
+* expands to the full rail as an overlay (the strip's footprint stays in the layout, so the content
+* never reflows) while the pointer or keyboard focus is inside, and docks at full width only once
+* the user pins it with the built-in `[part="pin-button"]`. Pinning writes `preferredMode`, so it
+* persists through `storage-key` with `persist="preferred-mode"` like every other mode preference.
+* The `mode` stays `'icon-only'` while peeking -- peeking is a presentation of the strip, observable
+* through `peeking`, not a mode change.
+*
 * @slot - Nav items. Use `<lr-app-rail-item>` for the explicit icon/label
 *   contract that automatically hides labels in `'icon-only'` mode, and
 *   `<lr-app-rail-group>` to title and optionally collapse a section of them --
@@ -80,7 +90,16 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 *   keyboard step, or once on pointerup after a genuine drag. Non-cancelable; no event is emitted
 *   for clamped no-ops, canceled/lost gestures, or direct `railWidth` writes.
 *   `detail: LyraAppRailResizeDetail`.
+* @event lr-peek-change - The `auto-hide` rail started or stopped peeking (expanding as a temporary
+*   overlay). Non-cancelable. Not fired for the reset a disconnect performs.
+*   `detail: LyraAppRailPeekChangeDetail`.
 * @csspart base - The rail root while inline (`'full'`/`'icon-only'` modes).
+* @csspart pin-button - The `auto-hide` pin control, rendered inside `[part="header"]` while the rail
+*   is peeking or pinned (docked at full width), never in the resting strip. Renders `aria-pressed`
+*   as `"true"` while pinned and `"false"` otherwise, with the localized pin/unpin name; it takes
+*   the shared `--lr-icon-button-size` hit area. Replaces `[part="collapse-toggle"]` while
+*   `auto-hide` is set.
+* @csspart pin-icon - The wrapper around `[part="pin-button"]`'s glyph.
 * @csspart header - The wrapper around the `header` slot.
 * @csspart nav - The wrapper around the default (nav items) slot.
 * @csspart footer - The wrapper around the `footer` slot.
@@ -135,6 +154,12 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 *   capped at `85vw`.
 * @cssprop [--lr-app-rail-overlay-color=var(--lr-color-overlay)] - The mobile overlay scrim's
 *   background.
+* @cssprop [--lr-app-rail-peek-shadow=var(--lr-shadow-l)] - Elevation of the `auto-hide` rail while it
+*   peeks as an overlay over the content.
+* @cssprop [--lr-app-rail-peek-bg=var(--lr-color-surface-overlay)] - Background of the `auto-hide`
+*   rail while peeking, kept opaque-leaning like the mobile panel because it overlays content.
+* @cssprop [--lr-app-rail-pin-hover-bg=var(--lr-color-brand-quiet)] - Pin-control hover background.
+* @cssprop [--lr-app-rail-pin-hover-color=var(--lr-color-brand)] - Pin-control hover foreground.
 * @cssprop [--lr-app-rail-panel-inset-block-start=0] - Block-start (top) inset shared by
 *   `[part="panel"]` and `[part="backdrop"]` -- raise it to leave room for a fixed app bar/status
 *   area above the drawer instead of the panel/scrim starting flush with the viewport top.
@@ -217,6 +242,17 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 * </lr-app-rail>
 * ```
 * @example
+* An auto-hide sidebar: the icon-only strip peeks open over the content on hover or keyboard
+* focus, and a pin docks it, remembered across reloads:
+* ```html
+* <lr-app-rail auto-hide label="Workspace" storage-key="app" persist="preferred-mode"
+*   peek-open-delay="150" peek-close-delay="300">
+*   <lr-app-rail-item href="/inbox" current>
+*     <svg slot="icon" aria-hidden="true">...</svg>Inbox
+*   </lr-app-rail-item>
+* </lr-app-rail>
+* ```
+* @example
 * A standalone app sidebar: a card-framed rail collapsed to icons by an external trigger or
 * the Mod+B chord, remembering the reader's choice. Below `mobile-breakpoint` it becomes the
 * off-canvas overlay and the same trigger opens it:
@@ -248,10 +284,10 @@ export{computeAppRailMode}from'./app-rail-mode.js';export interface LyraAppRailE
 * @since 4.0.0
 */
 export declare class LyraAppRail extends LyraElement<LyraAppRailEventMap>{constructor();
-/** Both are host state this component writes itself -- `mode` is the derived effective mode
-*  (authors set `preferred-mode`), `dragging` tracks a live resize gesture. Neither is settable
-*  from markup, so neither is observed; declaring them keeps the rail from reporting its own
-*  output as an unknown attribute. */
+/** All are host state this component writes itself -- `mode` is the derived effective mode
+*  (authors set `preferred-mode`), `dragging` tracks a live resize gesture, `peeking` the open
+*  state of an `auto-hide` peek. None is settable from markup, so none is observed; declaring
+*  them keeps the rail from reporting its own output as an unknown attribute. */
 protected static readonly knownUnobservedAttributes:readonly string[];static styles:import("lit").CSSResultGroup[];
 /** Below this viewport width, the rail switches from `'full'` to
 *  `'icon-only'`. Any valid CSS length, used directly in a `max-width`
@@ -314,6 +350,27 @@ get forceMode():LyraAppRailPreferredMode|'auto'|undefined;set forceMode(next:Lyr
 *  `toggle` csspart doc) as the panel's only in-panel dismiss control, and hiding it there too
 *  would leave the open panel with no in-panel way to close it at all -- only Escape/backdrop. */
 withoutToggle:boolean;
+/** Opts the desktop rail into auto-hide ("peek") mode: it rests as the `'icon-only'` strip and,
+*  while the pointer moves inside it or keyboard focus enters it, expands to the full rail as an
+*  overlay -- the strip's footprint stays in the layout, so nothing reflows -- and collapses back
+*  after `peekCloseDelay`. Escape closes the peek. Touch pointers and boundary events with no
+*  movement never open it. The rail docks at full width only while pinned: the built-in
+*  `[part="pin-button"]` writes `preferredMode`, so the pin persists through `storage-key` with
+*  `persist="preferred-mode"`. `preferredMode` and `forceMode` keep their meaning; an unset
+*  `preferredMode` rests as `'icon-only'` instead of following `icon-only-breakpoint`. The mobile
+*  presentation is unchanged, and `[part="collapse-toggle"]` is not rendered while this is set
+*  (the pin control replaces it). `false` (the default) reproduces today's exact behavior.
+*  @default false */
+autoHide:boolean;
+/** Milliseconds a moving pointer must stay inside the `auto-hide` strip before it peeks open.
+*  Keyboard focus opens it at once. A non-finite value uses the default and a negative one is
+*  clamped to `0`.
+*  @default 150 */
+peekOpenDelay:number;
+/** Milliseconds the `auto-hide` rail stays open after the pointer has left and keyboard focus is
+*  no longer inside it. A non-finite value uses the default and a negative one is clamped to `0`.
+*  @default 300 */
+peekCloseDelay:number;
 /** Opts in the desktop collapse control: a `[part="collapse-toggle"]` button rendered inside
 *  `[part="header"]` that flips the rail between its `'full'` and `'icon-only'` presentations,
 *  the same flip `toggleCollapse()` performs. It writes `preferredMode`, so the collapse survives
@@ -442,7 +499,13 @@ maxRailWidth:number|string;private pixelsOf;private get railWidthInPixels();
 *  `transition: inline-size` during the drag, which otherwise visibly "chases" the pointer
 *  instead of tracking it 1:1. Read-only -- this component owns the transitions entirely; there
 *  is no public setter. */
-get dragging():boolean;private _dragging;private setDragging;private hasHeaderSlot;private hasFooterSlot;private persistReady;private _mode;private _lastReflectedMode?;private pendingInitialModeAnnouncement?;private forced;private hotkeyWindow?;private iconOnlyMatches;private mobileMatches;private mqIconOnly?;private mqMobile?;private mqIconOnlyListener?;private mqMobileListener?;private overlayActive;private justOpened;private overlayHandle?;private readonly nativeModal;private explicitTrigger?;private overlayReturnTarget;private overlayOpener;private overlayReturnIsExplicit;private restoreFallbackTabIndex?;private triggerAria?;private recoverInlineFocusAfterResponsiveClose;private readonly navId;private readonly navRegionId;private baseEl?;private toggleEl?;private resizePointerId?;private readonly resizeController;private resizeStartX;private resizeRtl;private resizeStartWidth;private resizeGestureChanged;private managedItems;private syncSlottedItems;
+get dragging():boolean;private _dragging;private setDragging;
+/** Whether the `auto-hide` rail is currently expanded as a temporary overlay. Read-only: the
+*  pointer, keyboard focus, Escape and the pin control own it. Reflected to the `peeking`
+*  attribute for styling, and announced through `lr-peek-change`. `mode` stays `'icon-only'`
+*  while this is `true` -- peeking presents the strip expanded, it does not change the mode.
+*  Always `false` while `auto-hide` is unset or the rail is `'full'` (pinned) or `'mobile'`. */
+get peeking():boolean;private _peeking;private peekOpenTimer?;private peekCloseTimer?;private peekPointerInside;private peekKeyboardFocusInside;private peekPointerSeen?;private peekDismissed;private peekAfterUnpin;private peekHandle?;private get peekEligible();private get modePreference();private clearPeekOpen;private clearPeekClose;private setPeeking;private resetPeek;private dismissPeek;private startPeekOpen;private startPeekClose;private onPeekPointerEnter;private onPeekPointerMove;private onPeekPointerLeave;private onPeekFocusIn;private onPeekFocusOut;private onPinClick;private hasHeaderSlot;private hasFooterSlot;private persistReady;private _mode;private _lastReflectedMode?;private pendingInitialModeAnnouncement?;private forced;private hotkeyWindow?;private iconOnlyMatches;private mobileMatches;private mqIconOnly?;private mqMobile?;private mqIconOnlyListener?;private mqMobileListener?;private overlayActive;private justOpened;private overlayHandle?;private readonly nativeModal;private explicitTrigger?;private overlayReturnTarget;private overlayOpener;private overlayReturnIsExplicit;private restoreFallbackTabIndex?;private triggerAria?;private recoverInlineFocusAfterResponsiveClose;private readonly navId;private readonly navRegionId;private baseEl?;private toggleEl?;private resizePointerId?;private readonly resizeController;private resizeStartX;private resizeRtl;private resizeStartWidth;private resizeGestureChanged;private managedItems;private syncSlottedItems;
 /**
 * The rail's current effective presentation. Always one of the three real
 * modes — never `'auto'` — reflecting either the live breakpoint match or,

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{cancelDeferredFocusReturn}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{SeparatorDragController,separatorArrowDirection,separatorDelta}from"../../../internal/separator-drag.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{computeAppRailMode}from"./app-rail-mode.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 NON_NAVIGATION_CLICK='[part~="toggle"], [part~="header-actions"], [part~="meta"], [part~="end"]',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"]);import{computeAppRailMode as computeAppRailMode2}from"./app-rail-mode.js";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.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.navRegionId=nextId("app-rail-nav-region"),this.resizeController=new SeparatorDragController(this,event=>this.onResizerPointerMove(event),event=>this.onResizerPointerUp(event)),this.resizeStartX=0,this.resizeRtl=!1,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.deferredReturnPass=()=>{const candidates=[this.overlayReturnTarget,this.overlayOpener];return{candidates:()=>[...candidates,this.toggleEl],isCurrent:()=>!this.overlayActive,fallback:()=>{this.focusHostFallback()||focusFirstAvailable([this.resolveFocusFallback()])}}},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=event=>{this.overlayActive&&(event.composedPath().some(node=>isHtmlElement(node)&&node.matches(NON_NAVIGATION_CLICK))||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;this.resizeController.start(e,resizer)&&(this.resizePointerId=e.pointerId,this.resizeStartX=e.clientX,this.resizeRtl=isRtl(this),this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"||isRtl(this)!==this.resizeRtl){this.endResizerGesture();return}const delta=separatorDelta(this.resizeStartX,e,"inline",this.resizeRtl),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=>{if(e.altKey||e.ctrlKey||e.metaKey||e.isComposing)return;const rtl=this.getAttribute("dir")==="rtl"||isRtl(this),direction=separatorArrowDirection(e,"inline",rtl),step=8,width=this.effectiveRailWidthPx,next=direction===1?Math.min(this.safeMaxRailWidthPx,width+step):direction===-1?Math.max(this.safeMinRailWidthPx,width-step):e.key==="Home"?this.safeMinRailWidthPx:e.key==="End"?this.safeMaxRailWidthPx:width;next!==width&&(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"),cancelDeferredFocusReturn(this),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;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,deferredReturn:this.deferredReturnPass})}deactivateMobileOverlay(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1);const handle=this.overlayHandle;if(this.overlayHandle=void 0,handle&&restoreFocus&&!this.overlayReturnIsExplicit){const external=this.resolveExternalTrigger();external&&external!==this.overlayReturnTarget&&(this.overlayReturnTarget=external,handle.updateRestoreFocusTo(external))}handle?.deactivate({restoreFocus})}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(){if(!this.isConnected){this.releaseExternalTriggerA11y();return}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 pointerId=this.resizePointerId,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),pointerId!==void 0&&this.resizeController.end(pointerId),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")}renderResizer(){const railWidthPx=this.effectiveRailWidthPx;return html`<div
+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{cancelDeferredFocusReturn}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,pinIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteDuration,finiteRange}from"../../../internal/numbers.js";import{isKeyboardFocusEvent}from"../../../internal/focus-modality.js";import{SeparatorDragController,separatorArrowDirection,separatorDelta}from"../../../internal/separator-drag.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{computeAppRailMode}from"./app-rail-mode.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_appRailPin,LYRA_DEFAULT_appRailUnpin,LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation}from"../../../internal/default-strings/layout.generated.js";import{LYRA_DEFAULT_navigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings/shared.generated.js";const NON_NAVIGATION_CLICK='[part~="toggle"], [part~="header-actions"], [part~="meta"], [part~="end"]',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"]);import{computeAppRailMode as computeAppRailMode2}from"./app-rail-mode.js";class LyraAppRail extends LyraElement{static{this.defaultStrings={...super.defaultStrings,appRailCollapse:LYRA_DEFAULT_appRailCollapse,appRailExpand:LYRA_DEFAULT_appRailExpand,appRailPin:LYRA_DEFAULT_appRailPin,appRailUnpin:LYRA_DEFAULT_appRailUnpin,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.autoHide=!1,this.peekOpenDelay=150,this.peekCloseDelay=300,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._peeking=!1,this.peekPointerInside=!1,this.peekKeyboardFocusInside=!1,this.peekDismissed=!1,this.peekAfterUnpin=!1,this.onPeekPointerEnter=event=>{event.pointerType!=="touch"&&(this.peekPointerInside=!0,this.peekPointerSeen={x:event.clientX,y:event.clientY},this.clearPeekClose())},this.onPeekPointerMove=event=>{if(event.pointerType==="touch")return;const seen=this.peekPointerSeen,moved=(event.movementX||0)!==0||(event.movementY||0)!==0||seen!==void 0&&(seen.x!==event.clientX||seen.y!==event.clientY);this.peekPointerSeen={x:event.clientX,y:event.clientY},this.peekPointerInside=!0,this.clearPeekClose(),moved&&this.startPeekOpen()},this.onPeekPointerLeave=event=>{event.pointerType!=="touch"&&(this.peekPointerInside=!1,this.peekPointerSeen=void 0,this.clearPeekOpen(),this.peekKeyboardFocusInside||(this.peekDismissed=!1),this.startPeekClose())},this.onPeekFocusIn=event=>{const keyboard=isKeyboardFocusEvent(event);this.peekKeyboardFocusInside=keyboard,keyboard&&(this.clearPeekClose(),this.startPeekOpen(!0))},this.onPeekFocusOut=event=>{const next=event.relatedTarget;isHtmlElement(next)&&composedContains(this,next)||(this.peekKeyboardFocusInside=!1,this.peekPointerInside||(this.peekDismissed=!1),this.startPeekClose())},this.onPinClick=()=>{this.peekAfterUnpin=this._mode==="full"&&(this.peekPointerInside||this.peekKeyboardFocusInside),this.toggleCollapse()},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.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.navRegionId=nextId("app-rail-nav-region"),this.resizeController=new SeparatorDragController(this,event=>this.onResizerPointerMove(event),event=>this.onResizerPointerUp(event)),this.resizeStartX=0,this.resizeRtl=!1,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.deferredReturnPass=()=>{const candidates=[this.overlayReturnTarget,this.overlayOpener];return{candidates:()=>[...candidates,this.toggleEl],isCurrent:()=>!this.overlayActive,fallback:()=>{this.focusHostFallback()||focusFirstAvailable([this.resolveFocusFallback()])}}},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=event=>{this.overlayActive&&(event.composedPath().some(node=>isHtmlElement(node)&&node.matches(NON_NAVIGATION_CLICK))||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;this.resizeController.start(e,resizer)&&(this.resizePointerId=e.pointerId,this.resizeStartX=e.clientX,this.resizeRtl=isRtl(this),this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"||isRtl(this)!==this.resizeRtl){this.endResizerGesture();return}const delta=separatorDelta(this.resizeStartX,e,"inline",this.resizeRtl),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=>{if(e.altKey||e.ctrlKey||e.metaKey||e.isComposing)return;const rtl=this.getAttribute("dir")==="rtl"||isRtl(this),direction=separatorArrowDirection(e,"inline",rtl),step=8,width=this.effectiveRailWidthPx,next=direction===1?Math.min(this.safeMaxRailWidthPx,width+step):direction===-1?Math.max(this.safeMinRailWidthPx,width-step):e.key==="Home"?this.safeMinRailWidthPx:e.key==="End"?this.safeMaxRailWidthPx:width;next!==width&&(e.preventDefault(),this.requestRailResize(next))},new GlassScrollLayer(this,'[part="base"], [part="panel"]')}static{this.knownUnobservedAttributes=["mode","dragging","peeking"]}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)}get peeking(){return this._peeking}get peekEligible(){return this.autoHide&&this._mode==="icon-only"&&this.isConnected}get modePreference(){return this.autoHide?this.preferredMode??"icon-only":this.preferredMode}clearPeekOpen(){this.peekOpenTimer!==void 0&&(clearTimeout(this.peekOpenTimer),this.peekOpenTimer=void 0)}clearPeekClose(){this.peekCloseTimer!==void 0&&(clearTimeout(this.peekCloseTimer),this.peekCloseTimer=void 0)}setPeeking(next,options){this._peeking===next||next&&!this.peekEligible||(this._peeking=next,this.toggleAttribute("peeking",next),next?this.peekHandle=activateOverlay({host:this,panel:()=>this.baseEl??null,modal:!1,trapFocus:!1,onEscape:()=>this.dismissPeek()}):(this.peekHandle?.deactivate({restoreFocus:!1}),this.peekHandle=void 0),options?.silent||this.emit("lr-peek-change",{peeking:next}))}resetPeek(options){this.clearPeekOpen(),this.clearPeekClose(),this.peekPointerInside=!1,this.peekKeyboardFocusInside=!1,this.peekPointerSeen=void 0,this.peekDismissed=!1,this.peekAfterUnpin=!1,this.setPeeking(!1,options)}dismissPeek(){this.peekDismissed=!0,this.clearPeekOpen(),this.clearPeekClose(),this.setPeeking(!1)}startPeekOpen(immediate=!1){if(this.clearPeekClose(),this._peeking||this.peekOpenTimer!==void 0||this.peekDismissed||!this.peekEligible)return;const delay=immediate?0:finiteDuration(this.peekOpenDelay,150),open=()=>{(this.peekPointerInside||this.peekKeyboardFocusInside)&&this.setPeeking(!0)};if(delay===0){open();return}this.peekOpenTimer=setTimeout(()=>{this.peekOpenTimer=void 0,open()},delay)}startPeekClose(){this.clearPeekOpen(),!(!this._peeking||this.peekCloseTimer!==void 0)&&(this.peekPointerInside||this.peekKeyboardFocusInside||(this.peekCloseTimer=setTimeout(()=>{this.peekCloseTimer=void 0,!this.peekPointerInside&&!this.peekKeyboardFocusInside&&this.setPeeking(!1)},finiteDuration(this.peekCloseDelay,300))))}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._peeking);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.modePreference);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()),changed.has("autoHide")&&!this.forced&&(this.hasUpdated||this.autoHide)&&this.applyComputedMode(this.hasUpdated?void 0:{silent:!0}),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("autoHide")&&!this.autoHide&&this.resetPeek(),this.peekAfterUnpin&&(this.peekAfterUnpin=!1,changed.has("preferredMode")&&this.setPeeking(!0)),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._peeking&&this.resizable&&this.railWidth!=null?this.baseEl.style.setProperty("--_lr-app-rail-peek-width",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("--_lr-app-rail-peek-width")),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.resetPeek({silent:!0}),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"),cancelDeferredFocusReturn(this),super.disconnectedCallback(),this.restoreFallbackTabIndex?.(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture(),this.releaseExternalTriggerA11y()}adoptedCallback(){this.resetPeek({silent:!0}),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;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,deferredReturn:this.deferredReturnPass})}deactivateMobileOverlay(restoreFocus=!0){this.nativeModal.hide(),this.nativeModal.prepare(!1);const handle=this.overlayHandle;if(this.overlayHandle=void 0,handle&&restoreFocus&&!this.overlayReturnIsExplicit){const external=this.resolveExternalTrigger();external&&external!==this.overlayReturnTarget&&(this.overlayReturnTarget=external,handle.updateRestoreFocusTo(external))}handle?.deactivate({restoreFocus})}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.modePreference),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,next!=="icon-only"&&(this.clearPeekOpen(),this.clearPeekClose(),this.setPeeking(!1)),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"]'),this.renderRoot.querySelector('[part="pin-button"]')])!control||control.getAttribute("aria-keyshortcuts")===value||(value===null?control.removeAttribute("aria-keyshortcuts"):control.setAttribute("aria-keyshortcuts",value))}syncExternalTriggerA11y(){if(!this.isConnected){this.releaseExternalTriggerA11y();return}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 pointerId=this.resizePointerId,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),pointerId!==void 0&&this.resizeController.end(pointerId),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")}renderResizer(){const railWidthPx=this.effectiveRailWidthPx;return html`<div
       part="resizer"
       role="separator"
       aria-orientation="vertical"
@@ -10,7 +10,7 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
       tabindex="0"
       @pointerdown=${this.onResizerPointerDown}
       @keydown=${this.onResizerKeyDown}
-    ><span part="resizer-track"></span></div>`}render(){const mobile=this._mode==="mobile",showCollapse=this.collapsible&&!mobile,expanded=this._mode!=="icon-only";return this.nativeModal.render(html`
+    ><span part="resizer-track"></span></div>`}render(){const mobile=this._mode==="mobile",showCollapse=this.collapsible&&!mobile&&!this.autoHide,pinned=this._mode==="full",showPin=this.autoHide&&!mobile&&(this._peeking||pinned),expanded=this._mode!=="icon-only",peekEvents=this.autoHide;return this.nativeModal.render(html`
       <button
         part="toggle"
         type="button"
@@ -30,11 +30,16 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
         aria-modal=${this.overlayActive&&!this.nativeModal.requested?"true":nothing}
         tabindex=${this.overlayActive||!mobile?"-1":nothing}
         ?inert=${mobile&&!this.open}
+        @pointerenter=${peekEvents?this.onPeekPointerEnter:nothing}
+        @pointermove=${peekEvents?this.onPeekPointerMove:nothing}
+        @pointerleave=${peekEvents?this.onPeekPointerLeave:nothing}
+        @focusin=${peekEvents?this.onPeekFocusIn:nothing}
+        @focusout=${peekEvents?this.onPeekFocusOut:nothing}
         @transitionend=${this.onPanelTransition}
         @transitioncancel=${this.onPanelTransition}
       >
         <span class="glass-scroll-layer" aria-hidden="true"></span>
-        <div part="header" ?hidden=${!this.hasHeaderSlot&&!showCollapse}>
+        <div part="header" ?hidden=${!this.hasHeaderSlot&&!showCollapse&&!showPin}>
           <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
           ${showCollapse?html`<button
                 part="collapse-toggle"
@@ -44,6 +49,13 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
                 aria-label=${expanded?this.localize("appRailCollapse"):this.localize("appRailExpand")}
                 @click=${this.onCollapseToggleClick}
               ><span part="collapse-icon" aria-hidden="true">${chevronIcon()}</span></button>`:nothing}
+          ${showPin?html`<button
+                part="pin-button"
+                type="button"
+                aria-pressed=${pinned?"true":"false"}
+                aria-label=${pinned?this.localize("appRailUnpin"):this.localize("appRailPin")}
+                @click=${this.onPinClick}
+              ><span part="pin-icon" aria-hidden="true">${pinIcon()}</span></button>`:nothing}
         </div>
         <div part="nav" id=${this.navRegionId}>
           <slot @slotchange=${this.onNavSlotChange} @click=${this.onNavItemClick}></slot>
@@ -54,4 +66,4 @@ import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/n
         ${this.nativeModal.renderHelperSlot()}
       </div>
       ${this.resizable&&this._mode==="full"?this.renderResizer():nothing}
-    `,{label:this.accessibleLabel??this.label??this.localize("navigation")})}}__decorate([property({attribute:"icon-only-breakpoint",useDefault:!0})],LyraAppRail.prototype,"iconOnlyBreakpoint",void 0),__decorate([property({attribute:"mobile-breakpoint",useDefault:!0})],LyraAppRail.prototype,"mobileBreakpoint",void 0),__decorate([property({type:Boolean,reflect:!0,noAccessor:!0})],LyraAppRail.prototype,"open",void 0),__decorate([property({reflect:!0,converter:APP_RAIL_FRAME})],LyraAppRail.prototype,"frame",null),__decorate([property({type:Boolean,reflect:!0,attribute:"trigger-collapses"})],LyraAppRail.prototype,"triggerCollapses",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"hotkey",void 0),__decorate([property()],LyraAppRail.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraAppRail.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"preferred-mode",noAccessor:!0})],LyraAppRail.prototype,"preferredMode",void 0),__decorate([property({attribute:"force-mode"})],LyraAppRail.prototype,"forceMode",null),__decorate([property({type:Boolean,reflect:!0,attribute:"without-toggle"})],LyraAppRail.prototype,"withoutToggle",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"top-layer"})],LyraAppRail.prototype,"topLayer",void 0),__decorate([property({attribute:!1})],LyraAppRail.prototype,"trigger",void 0),__decorate([property()],LyraAppRail.prototype,"for",void 0),__decorate([property({attribute:"focus-fallback"})],LyraAppRail.prototype,"focusFallback",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"resizable",void 0),__decorate([property({attribute:"storage-key"})],LyraAppRail.prototype,"storageKey",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"persist",void 0),__decorate([property({attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER,noAccessor:!0})],LyraAppRail.prototype,"railWidth",void 0),__decorate([property({attribute:"min-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"minRailWidth",void 0),__decorate([property({attribute:"max-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"maxRailWidth",void 0),__decorate([state()],LyraAppRail.prototype,"hasHeaderSlot",void 0),__decorate([state()],LyraAppRail.prototype,"hasFooterSlot",void 0),__decorate([query('[part="base"], [part="panel"]')],LyraAppRail.prototype,"baseEl",void 0),__decorate([query('[part="toggle"]')],LyraAppRail.prototype,"toggleEl",void 0);export{LyraAppRail,computeAppRailMode2 as computeAppRailMode};
+    `,{label:this.accessibleLabel??this.label??this.localize("navigation")})}}__decorate([property({attribute:"icon-only-breakpoint",useDefault:!0})],LyraAppRail.prototype,"iconOnlyBreakpoint",void 0),__decorate([property({attribute:"mobile-breakpoint",useDefault:!0})],LyraAppRail.prototype,"mobileBreakpoint",void 0),__decorate([property({type:Boolean,reflect:!0,noAccessor:!0})],LyraAppRail.prototype,"open",void 0),__decorate([property({reflect:!0,converter:APP_RAIL_FRAME})],LyraAppRail.prototype,"frame",null),__decorate([property({type:Boolean,reflect:!0,attribute:"trigger-collapses"})],LyraAppRail.prototype,"triggerCollapses",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"hotkey",void 0),__decorate([property()],LyraAppRail.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraAppRail.prototype,"accessibleLabel",void 0),__decorate([property({attribute:"preferred-mode",noAccessor:!0})],LyraAppRail.prototype,"preferredMode",void 0),__decorate([property({attribute:"force-mode"})],LyraAppRail.prototype,"forceMode",null),__decorate([property({type:Boolean,reflect:!0,attribute:"without-toggle"})],LyraAppRail.prototype,"withoutToggle",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"auto-hide"})],LyraAppRail.prototype,"autoHide",void 0),__decorate([property({type:Number,attribute:"peek-open-delay",useDefault:!0})],LyraAppRail.prototype,"peekOpenDelay",void 0),__decorate([property({type:Number,attribute:"peek-close-delay",useDefault:!0})],LyraAppRail.prototype,"peekCloseDelay",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"collapsible",void 0),__decorate([property({type:Boolean,reflect:!0,attribute:"top-layer"})],LyraAppRail.prototype,"topLayer",void 0),__decorate([property({attribute:!1})],LyraAppRail.prototype,"trigger",void 0),__decorate([property()],LyraAppRail.prototype,"for",void 0),__decorate([property({attribute:"focus-fallback"})],LyraAppRail.prototype,"focusFallback",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraAppRail.prototype,"resizable",void 0),__decorate([property({attribute:"storage-key"})],LyraAppRail.prototype,"storageKey",void 0),__decorate([property({useDefault:!0})],LyraAppRail.prototype,"persist",void 0),__decorate([property({attribute:"rail-width",converter:RAIL_WIDTH_CONVERTER,noAccessor:!0})],LyraAppRail.prototype,"railWidth",void 0),__decorate([property({attribute:"min-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"minRailWidth",void 0),__decorate([property({attribute:"max-rail-width",converter:RAIL_WIDTH_CONVERTER,useDefault:!0})],LyraAppRail.prototype,"maxRailWidth",void 0),__decorate([state()],LyraAppRail.prototype,"_peeking",void 0),__decorate([state()],LyraAppRail.prototype,"hasHeaderSlot",void 0),__decorate([state()],LyraAppRail.prototype,"hasFooterSlot",void 0),__decorate([query('[part="base"], [part="panel"]')],LyraAppRail.prototype,"baseEl",void 0),__decorate([query('[part="toggle"]')],LyraAppRail.prototype,"toggleEl",void 0);export{LyraAppRail,computeAppRailMode2 as computeAppRailMode};

package/dist/components/layout/app-rail/app-rail.styles.js

@@ -1 +1 @@
-import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";const styles=css` :host { display: block; position: relative; --_lr-app-rail-width: var(--lr-size-15rem); --_lr-app-rail-icon-width: var(--lr-size-4rem); --_lr-app-rail-mobile-width: var(--lr-size-18rem); --_lr-app-rail-overlay-color: var(--lr-color-overlay); } [part="toggle"] { display: none; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} 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); cursor: pointer; transition: var(--lr-transition-interactive); } :host([mode="mobile"]) [part="toggle"] { display: inline-flex; } :host([without-toggle][mode="mobile"]) [part="toggle"] { display: none; } :host([mode="mobile"][open]) [part="toggle"] { position: relative; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 2); } [part="panel"] > [part="toggle"] { align-self: flex-end; flex: 0 0 auto; margin-block-start: var(--lr-space-s); margin-inline-end: var(--lr-space-s); } :host([without-toggle][mode="mobile"]) [part="panel"] > [part="toggle"] { display: inline-flex; } [part="toggle"]:hover { background: var(--lr-app-rail-toggle-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-toggle-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="toggle"]:active { background: var( --lr-app-rail-toggle-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-app-rail-toggle-active-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="toggle"]:focus-visible { ${focusRing} } [part="backdrop"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal)); background: var( --lr-app-rail-overlay-color, var(--_lr-app-rail-overlay-color) ); } [part="base"] { position: relative; display: flex; flex-direction: column; inline-size: var(--lr-app-rail-width, var(--_lr-app-rail-width)); block-size: 100%; border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var( --lr-app-rail-bg, var(--lr-color-surface) ); padding-block-end: var(--lr-safe-area-bottom); overflow-y: auto; overflow-x: clip; transition: inline-size var(--lr-transition-base); } :host([resizable][mode="full"]) [part="base"] { border-inline-end-color: var(--lr-color-border); } :host([mode="icon-only"]) [part="base"] { inline-size: var(--lr-app-rail-icon-width, var(--_lr-app-rail-icon-width)); } :host([dragging]) [part="base"] { transition: none; } [part="resizer"] { position: absolute; inset-block: 0; inset-inline-end: calc(var(--lr-icon-button-size) * -0.5); inline-size: var(--lr-icon-button-size); ${iconHitTarget} display: flex; align-items: stretch; justify-content: center; background: transparent; cursor: col-resize; touch-action: none; } [part="resizer-track"] { inline-size: var(--lr-size-3px); background: transparent; transition: background-color var(--lr-transition-fast); } [part="resizer"]:hover [part="resizer-track"] { background: var(--lr-app-rail-resizer-hover-bg, var(--lr-color-brand)); } [part="resizer"]:active [part="resizer-track"] { background: var( --lr-app-rail-resizer-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="resizer"]:focus-visible { ${focusRing} } [part="panel"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline-start: 0; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1); display: flex; flex-direction: column; inline-size: min( var(--lr-app-rail-mobile-width, var(--_lr-app-rail-mobile-width)), 85vw ); border-start-start-radius: var( --lr-app-rail-panel-radius-start-start, var(--lr-app-rail-panel-radius, 0) ); border-start-end-radius: var( --lr-app-rail-panel-radius-start-end, var(--lr-app-rail-panel-radius, 0) ); border-end-start-radius: var( --lr-app-rail-panel-radius-end-start, var(--lr-app-rail-panel-radius, 0) ); border-end-end-radius: var( --lr-app-rail-panel-radius-end-end, var(--lr-app-rail-panel-radius, 0) ); background: var( --lr-app-rail-panel-bg, var(--lr-color-surface-overlay) ); padding-block-end: var(--lr-safe-area-bottom); overflow-block: var(--lr-app-rail-panel-overflow-block, auto); overflow-inline: var(--lr-app-rail-panel-overflow-inline, clip); transform: translateX(calc(-100% - var(--lr-size-1px))); } [part="panel"][data-sliding] { transition: transform var(--lr-transition-base); } :host(:dir(rtl)) [part="panel"] { transform: translateX(calc(100% + var(--lr-size-1px))); } :host([mode="mobile"][open]) [part="panel"] { transform: none; box-shadow: var(--lr-app-rail-panel-shadow, var(--lr-shadow-l)); } [part="header"] { padding: var(--lr-app-rail-header-padding, var(--lr-space-m)); min-block-size: var(--lr-app-rail-header-min-block-size, auto); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="header"][hidden] { display: none; } :host([collapsible]:not([mode="mobile"])) [part="header"] { display: flex; align-items: center; gap: var(--lr-space-s); } :host([collapsible][mode="icon-only"]) [part="header"] { justify-content: center; } [part="collapse-toggle"] { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); cursor: pointer; transition: var(--lr-transition-interactive); } :host([collapsible][mode="icon-only"]) [part="collapse-toggle"] { margin-inline-start: 0; } [part="collapse-toggle"]:hover { background: var(--lr-app-rail-collapse-toggle-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-collapse-toggle-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:active { background: var( --lr-app-rail-collapse-toggle-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-app-rail-collapse-toggle-active-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:focus-visible { ${focusRing} } [part="collapse-icon"] { display: inline-flex; transform: rotate(180deg); } [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: rotate(180deg); } [part="footer"] { padding: var(--lr-app-rail-footer-padding, var(--lr-space-m)); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="footer"][hidden] { display: none; } [part="nav"] { flex: 1 1 auto; overflow-y: auto; overflow-x: clip; padding: var(--lr-app-rail-nav-padding, var(--lr-space-s)); display: flex; flex-direction: column; gap: var(--lr-app-rail-nav-gap, var(--lr-space-xs)); } :host([mode="icon-only"]) [part="nav"] { align-items: center; } :host([mode="icon-only"]) ::slotted(lr-app-rail-item) { max-inline-size: var( --lr-app-rail-icon-width, var(--_lr-app-rail-icon-width) ); } @media (prefers-reduced-motion: reduce) { [part="base"], [part="panel"], [part="collapse-toggle"], [part="resizer-track"] { transition: none !important; } } :host([frame="card"]:not([mode="mobile"])) { display: flow-root; --_lr-app-rail-frame-gap: var(--lr-app-rail-frame-gap, var(--lr-space-s)); } :host([frame="card"]) [part="base"] { margin: var(--_lr-app-rail-frame-gap); block-size: calc(100% - 2 * var(--_lr-app-rail-frame-gap)); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-app-rail-frame-radius, var(--lr-radius)); box-shadow: var(--lr-app-rail-frame-shadow, var(--lr-shadow-s)); } :host([frame="card"]) [part="resizer"] { inset-block: var(--_lr-app-rail-frame-gap); inset-inline-end: calc(var(--_lr-app-rail-frame-gap) - var(--lr-icon-button-size) * 0.5); } :host([frame="plain"]) [part="base"] { border-inline-end: 0; background: var(--lr-app-rail-bg, transparent); } @media (forced-colors: active) { :host([frame="plain"]) [part="base"] { border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); } } ${glassScrollLayerStyles} ${glassSurface(':host(:not([frame="plain"])) [part="base"]',css`var(--lr-app-rail-bg, var(--lr-color-surface))`,void 0,!0)} ${glassSurface('[part="panel"]',css`var(--lr-app-rail-panel-bg, var(--lr-color-surface-overlay))`,void 0,!0)} `;export{styles};
+import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";const styles=css` :host { display: block; position: relative; --_lr-app-rail-width: var(--lr-size-15rem); --_lr-app-rail-icon-width: var(--lr-size-4rem); --_lr-app-rail-mobile-width: var(--lr-size-18rem); --_lr-app-rail-overlay-color: var(--lr-color-overlay); } [part="toggle"] { display: none; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} 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); cursor: pointer; transition: var(--lr-transition-interactive); } :host([mode="mobile"]) [part="toggle"] { display: inline-flex; } :host([without-toggle][mode="mobile"]) [part="toggle"] { display: none; } :host([mode="mobile"][open]) [part="toggle"] { position: relative; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 2); } [part="panel"] > [part="toggle"] { align-self: flex-end; flex: 0 0 auto; margin-block-start: var(--lr-space-s); margin-inline-end: var(--lr-space-s); } :host([without-toggle][mode="mobile"]) [part="panel"] > [part="toggle"] { display: inline-flex; } [part="toggle"]:hover { background: var(--lr-app-rail-toggle-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-toggle-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="toggle"]:active { background: var( --lr-app-rail-toggle-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-app-rail-toggle-active-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="toggle"]:focus-visible { ${focusRing} } [part="backdrop"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline: 0; z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal)); background: var( --lr-app-rail-overlay-color, var(--_lr-app-rail-overlay-color) ); } [part="base"] { position: relative; display: flex; flex-direction: column; inline-size: var(--lr-app-rail-width, var(--_lr-app-rail-width)); block-size: 100%; border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); background: var( --lr-app-rail-bg, var(--lr-color-surface) ); padding-block-end: var(--lr-safe-area-bottom); overflow-y: auto; overflow-x: clip; transition: inline-size var(--lr-transition-base); } :host([resizable][mode="full"]) [part="base"] { border-inline-end-color: var(--lr-color-border); } :host([mode="icon-only"]) [part="base"] { inline-size: var(--lr-app-rail-icon-width, var(--_lr-app-rail-icon-width)); } :host([dragging]) [part="base"] { transition: none; } :host([auto-hide]:not([mode="mobile"])) [part="base"] { transition: inline-size var(--lr-transition-base), margin-inline-end var(--lr-transition-base); } :host([auto-hide][peeking]) [part="base"] { --_lr-app-rail-peek-full: var( --_lr-app-rail-peek-width, var(--lr-app-rail-width, var(--_lr-app-rail-width)) ); inline-size: var(--_lr-app-rail-peek-full); margin-inline-end: calc( var(--lr-app-rail-icon-width, var(--_lr-app-rail-icon-width)) - var(--_lr-app-rail-peek-full) ); z-index: var(--lr-layer-dropdown); background: var(--lr-app-rail-peek-bg, var(--lr-color-surface-overlay)); box-shadow: var(--lr-app-rail-peek-shadow, var(--lr-shadow-l)); } :host([auto-hide][peeking][frame="card"]) [part="base"] { margin-inline-end: calc( var(--_lr-app-rail-frame-gap) + var(--lr-app-rail-icon-width, var(--_lr-app-rail-icon-width)) - var(--_lr-app-rail-peek-full) ); } [part="resizer"] { position: absolute; inset-block: 0; inset-inline-end: calc(var(--lr-icon-button-size) * -0.5); inline-size: var(--lr-icon-button-size); ${iconHitTarget} display: flex; align-items: stretch; justify-content: center; background: transparent; cursor: col-resize; touch-action: none; } [part="resizer-track"] { inline-size: var(--lr-size-3px); background: transparent; transition: background-color var(--lr-transition-fast); } [part="resizer"]:hover [part="resizer-track"] { background: var(--lr-app-rail-resizer-hover-bg, var(--lr-color-brand)); } [part="resizer"]:active [part="resizer-track"] { background: var( --lr-app-rail-resizer-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="resizer"]:focus-visible { ${focusRing} } [part="panel"] { position: fixed; inset-block-start: var(--lr-app-rail-panel-inset-block-start, 0); inset-block-end: 0; inset-inline-start: 0; z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1); display: flex; flex-direction: column; inline-size: min( var(--lr-app-rail-mobile-width, var(--_lr-app-rail-mobile-width)), 85vw ); border-start-start-radius: var( --lr-app-rail-panel-radius-start-start, var(--lr-app-rail-panel-radius, 0) ); border-start-end-radius: var( --lr-app-rail-panel-radius-start-end, var(--lr-app-rail-panel-radius, 0) ); border-end-start-radius: var( --lr-app-rail-panel-radius-end-start, var(--lr-app-rail-panel-radius, 0) ); border-end-end-radius: var( --lr-app-rail-panel-radius-end-end, var(--lr-app-rail-panel-radius, 0) ); background: var( --lr-app-rail-panel-bg, var(--lr-color-surface-overlay) ); padding-block-end: var(--lr-safe-area-bottom); overflow-block: var(--lr-app-rail-panel-overflow-block, auto); overflow-inline: var(--lr-app-rail-panel-overflow-inline, clip); transform: translateX(calc(-100% - var(--lr-size-1px))); } [part="panel"][data-sliding] { transition: transform var(--lr-transition-base); } :host(:dir(rtl)) [part="panel"] { transform: translateX(calc(100% + var(--lr-size-1px))); } :host([mode="mobile"][open]) [part="panel"] { transform: none; box-shadow: var(--lr-app-rail-panel-shadow, var(--lr-shadow-l)); } [part="header"] { padding: var(--lr-app-rail-header-padding, var(--lr-space-m)); min-block-size: var(--lr-app-rail-header-min-block-size, auto); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="header"][hidden] { display: none; } :host([collapsible]:not([mode="mobile"])) [part="header"] { display: flex; align-items: center; gap: var(--lr-space-s); } :host([collapsible][mode="icon-only"]) [part="header"] { justify-content: center; } [part="collapse-toggle"] { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); cursor: pointer; transition: var(--lr-transition-interactive); } :host([collapsible][mode="icon-only"]) [part="collapse-toggle"] { margin-inline-start: 0; } [part="collapse-toggle"]:hover { background: var(--lr-app-rail-collapse-toggle-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-collapse-toggle-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:active { background: var( --lr-app-rail-collapse-toggle-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-app-rail-collapse-toggle-active-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="collapse-toggle"]:focus-visible { ${focusRing} } [part="collapse-icon"] { display: inline-flex; transform: rotate(180deg); } [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-icon"] { transform: none; } :host(:dir(rtl)) [part="collapse-toggle"]:where([aria-expanded="false"]) [part="collapse-icon"] { transform: rotate(180deg); } :host([auto-hide]:not([mode="mobile"])) [part="header"]:not([hidden]) { display: flex; align-items: center; gap: var(--lr-space-s); } :host([auto-hide][mode="icon-only"]:not([peeking])) [part="header"] { justify-content: center; } [part="pin-button"] { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; align-items: center; justify-content: center; font: inherit; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text); cursor: pointer; transition: var(--lr-transition-interactive); } [part="pin-button"]:where([aria-pressed="true"]) { color: var(--lr-color-brand); } [part="pin-button"]:hover { background: var(--lr-app-rail-pin-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-app-rail-pin-hover-color, var(--_lr-glass-brand-text, var(--lr-color-brand))); } [part="pin-button"]:active { background: color-mix( in oklab, var(--lr-app-rail-pin-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="pin-button"]:focus-visible { ${focusRing} } [part="pin-icon"] { display: inline-flex; } [part="footer"] { padding: var(--lr-app-rail-footer-padding, var(--lr-space-m)); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="footer"][hidden] { display: none; } [part="nav"] { flex: 1 1 auto; overflow-y: auto; overflow-x: clip; padding: var(--lr-app-rail-nav-padding, var(--lr-space-s)); display: flex; flex-direction: column; gap: var(--lr-app-rail-nav-gap, var(--lr-space-xs)); } :host([mode="icon-only"]:not([peeking])) [part="nav"] { align-items: center; } :host([mode="icon-only"]:not([peeking])) ::slotted(lr-app-rail-item) { max-inline-size: var( --lr-app-rail-icon-width, var(--_lr-app-rail-icon-width) ); } @media (prefers-reduced-motion: reduce) { [part="base"], [part="panel"], [part="collapse-toggle"], [part="pin-button"], [part="resizer-track"] { transition: none !important; } } :host([frame="card"]:not([mode="mobile"])) { display: flow-root; --_lr-app-rail-frame-gap: var(--lr-app-rail-frame-gap, var(--lr-space-s)); } :host([frame="card"]) [part="base"] { margin: var(--_lr-app-rail-frame-gap); block-size: calc(100% - 2 * var(--_lr-app-rail-frame-gap)); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-app-rail-frame-radius, var(--lr-radius)); box-shadow: var(--lr-app-rail-frame-shadow, var(--lr-shadow-s)); } :host([frame="card"]) [part="resizer"] { inset-block: var(--_lr-app-rail-frame-gap); inset-inline-end: calc(var(--_lr-app-rail-frame-gap) - var(--lr-icon-button-size) * 0.5); } :host([frame="plain"]) [part="base"] { border-inline-end: 0; background: var(--lr-app-rail-bg, transparent); } @media (forced-colors: active) { :host([frame="plain"]) [part="base"] { border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border); } } ${glassScrollLayerStyles} ${glassSurface(':host(:not([frame="plain"])) [part="base"]',css`var(--lr-app-rail-bg, var(--lr-color-surface))`,void 0,!0)} ${glassSurface('[part="panel"]',css`var(--lr-app-rail-panel-bg, var(--lr-color-surface-overlay))`,void 0,!0)} `;export{styles};

package/dist/components/layout/app-rail-group/app-rail-group.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{repairComposedFocus}from"../../../internal/focus-navigation.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-group.styles.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_expand}from"../../../internal/default-strings.generated.js";class LyraAppRailGroup extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel="3",this.collapsible=!1,this._collapsed=!1,this.toggleGuard=new VetoWriteGuard,this.hasHeadingSlot=!1,this.hasHeaderActionsSlot=!1,this.headingId=nextId("app-rail-group-heading"),this.contentId=nextId("app-rail-group-content"),this.onHeadingSlotChange=event=>{this.applyHeadingSlotPresence(event.target)},this.onHeaderActionsSlotChange=event=>{this.applyHeaderActionsSlotPresence(event.target)},this.onContentSlotChange=()=>{this.syncOwnedItems()},this.onToggleClick=()=>{const expanded=this._collapsed;requestThenCommit({requestDetail:{expanded},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.collapsed=!expanded,this.emit("lr-toggle",{expanded})}})}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,expand:LYRA_DEFAULT_expand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}get collapsed(){return this._collapsed}set collapsed(next){const old=this._collapsed;this._collapsed=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("collapsed",old)}get safeHeadingLevel(){return resolveHeadingLevel(this.headingLevel)}connectedCallback(){super.connectedCallback(),this.syncOwnedItems()}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(this.syncOwnedItems(),this.requestUpdate())}willUpdate(changed){super.willUpdate(changed);const content=this.renderRoot?.querySelector('[part="content"]');changed.has("collapsed")&&this._collapsed&&content&&repairComposedFocus(content,()=>this.renderRoot.querySelector('[part="toggle"]'))}updated(changed){super.updated(changed),this.syncOwnedItems()}firstUpdated(changed){super.firstUpdated(changed);const headingSlot=this.headingSlot,headerActionsSlot=this.headerActionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(headingSlot,s=>this.applyHeadingSlotPresence(s)),collectInitialSlotAssignment(headerActionsSlot,s=>this.applyHeaderActionsSlotPresence(s))})}syncOwnedItems(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),groupTag=tag("app-rail-group");for(const node of this.querySelectorAll(`${tag("app-rail-item")}, ${groupTag}`))(node.parentElement?.closest(groupTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}applyHeadingSlotPresence(slot){this.hasHeadingSlot=slot.assignedNodes().length>0&&slot.assignedNodes({flatten:!0}).length>0}applyHeaderActionsSlotPresence(slot){this.hasHeaderActionsSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}render(){const named=this.hasHeadingSlot||this.heading.trim()!=="",headingContent=html`<span part="heading-text"
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{nextId}from"../../../internal/a11y.js";import{repairComposedFocus}from"../../../internal/focus-navigation.js";import{chevronIcon}from"../../../internal/icons.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{tag}from"../../../internal/prefix.js";import{requestThenCommit}from"../../../internal/request-commit.js";import{markVetoGuardWrite,VetoWriteGuard}from"../../../internal/veto-write-guard.js";import{styles}from"./app-rail-group.styles.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_expand}from"../../../internal/default-strings/shared.generated.js";class LyraAppRailGroup extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel="3",this.collapsible=!1,this._collapsed=!1,this.toggleGuard=new VetoWriteGuard,this.hasHeadingSlot=!1,this.hasHeaderActionsSlot=!1,this.headingId=nextId("app-rail-group-heading"),this.contentId=nextId("app-rail-group-content"),this.onHeadingSlotChange=event=>{this.applyHeadingSlotPresence(event.target)},this.onHeaderActionsSlotChange=event=>{this.applyHeaderActionsSlotPresence(event.target)},this.onContentSlotChange=()=>{this.syncOwnedItems()},this.onToggleClick=()=>{const expanded=this._collapsed;requestThenCommit({requestDetail:{expanded},emitRequest:(detail,init)=>this.emit("lr-toggle-request",detail,init),guard:this.toggleGuard,commit:()=>{this.collapsed=!expanded,this.emit("lr-toggle",{expanded})}})}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,expand:LYRA_DEFAULT_expand}}static{this.styles=[LyraElement.styles,styles]}static get observedAttributes(){return[...super.observedAttributes,"icon-only"]}get collapsed(){return this._collapsed}set collapsed(next){const old=this._collapsed;this._collapsed=next,markVetoGuardWrite(this.toggleGuard),this.requestUpdate("collapsed",old)}get safeHeadingLevel(){return resolveHeadingLevel(this.headingLevel)}connectedCallback(){super.connectedCallback(),this.syncOwnedItems()}attributeChangedCallback(name,oldValue,newValue){super.attributeChangedCallback(name,oldValue,newValue),!(name!=="icon-only"||oldValue===newValue)&&(this.syncOwnedItems(),this.requestUpdate())}willUpdate(changed){super.willUpdate(changed);const content=this.renderRoot?.querySelector('[part="content"]');changed.has("collapsed")&&this._collapsed&&content&&repairComposedFocus(content,()=>this.renderRoot.querySelector('[part="toggle"]'))}updated(changed){super.updated(changed),this.syncOwnedItems()}firstUpdated(changed){super.firstUpdated(changed);const headingSlot=this.headingSlot,headerActionsSlot=this.headerActionsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(headingSlot,s=>this.applyHeadingSlotPresence(s)),collectInitialSlotAssignment(headerActionsSlot,s=>this.applyHeaderActionsSlotPresence(s))})}syncOwnedItems(){if(!this.isConnected)return;const iconOnly=this.hasAttribute("icon-only"),groupTag=tag("app-rail-group");for(const node of this.querySelectorAll(`${tag("app-rail-item")}, ${groupTag}`))(node.parentElement?.closest(groupTag)??null)===this&&node.toggleAttribute("icon-only",iconOnly)}applyHeadingSlotPresence(slot){this.hasHeadingSlot=slot.assignedNodes().length>0&&slot.assignedNodes({flatten:!0}).length>0}applyHeaderActionsSlotPresence(slot){this.hasHeaderActionsSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType!==3||(node.textContent??"").trim()!=="")}render(){const named=this.hasHeadingSlot||this.heading.trim()!=="",headingContent=html`<span part="heading-text"
       ><slot name="heading" @slotchange=${this.onHeadingSlotChange}
         >${this.hasHeadingSlot?nothing:this.heading}</slot
       ></span

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./breadcrumb.styles.js";import{LYRA_DEFAULT_breadcrumb}from"../../../internal/default-strings.generated.js";const DECORATIVE_SEPARATOR_CLONE_ATTRIBUTE=/^(?:aria-|form(?:action|enctype|method|novalidate|target)?$|(?:for|headers|id|list|name|required)$)/;function sanitizeDecorativeSeparatorClone(clone){for(const element of[clone,...clone.querySelectorAll("*")])for(const attribute of element.getAttributeNames())DECORATIVE_SEPARATOR_CLONE_ATTRIBUTE.test(attribute)&&element.removeAttribute(attribute)}function decorativeSeparatorClone(source){const clone=source.cloneNode(!0);return sanitizeDecorativeSeparatorClone(clone),clone.setAttribute("slot","separator"),clone}function patchDecorativeSeparator(source,clone){const desired=decorativeSeparatorClone(source),patch=(next,current)=>{if(next.nodeType===3&&current.nodeType===3){current.textContent!==next.textContent&&(current.textContent=next.textContent);return}if(next.nodeType!==1||current.nodeType!==1)return;const nextElement=next,currentElement=current;for(const name of currentElement.getAttributeNames())nextElement.hasAttribute(name)||currentElement.removeAttribute(name);for(const name of nextElement.getAttributeNames()){const value=nextElement.getAttribute(name);currentElement.getAttribute(name)!==value&&currentElement.setAttribute(name,value)}const nextChildren=[...nextElement.childNodes];for(let index=0;index<nextChildren.length;index+=1){const nextChild=nextChildren[index],currentChild=currentElement.childNodes[index];if(!nextChild)continue;if(!currentChild){currentElement.append(nextChild.cloneNode(!0));continue}nextChild.nodeType===currentChild.nodeType&&(nextChild.nodeType!==1||currentChild.nodeType===1&&nextChild.localName===currentChild.localName&&nextChild.namespaceURI===currentChild.namespaceURI)?patch(nextChild,currentChild):currentChild.replaceWith(nextChild.cloneNode(!0))}for(;currentElement.childNodes.length>nextChildren.length;)currentElement.lastChild?.remove()};patch(desired,clone)}class LyraBreadcrumb extends LyraElement{constructor(){super(...arguments),this.generatedSeparators=new Map,this.syncSeparators=()=>{const sources=this.renderRoot.querySelector('slot[name="separator"]')?.assignedElements({flatten:!0})??[];this.observeSeparatorSources(sources);const items=[...this.children].filter(item=>item.localName===tag("breadcrumb-item"));this.setFirstItem(items[0]);const owned=new Set(items);for(const[item,records]of this.generatedSeparators)owned.has(item)||(records.forEach(({clone})=>clone.remove()),this.generatedSeparators.delete(item));for(const item of items){const existing=this.generatedSeparators.get(item)??[],generated=new Set(existing.map(({clone})=>clone));if([...item.children].some(child=>child.getAttribute("slot")==="separator"&&!generated.has(child))||sources.length===0){existing.forEach(({clone})=>clone.remove()),this.generatedSeparators.delete(item);continue}const next=sources.map((source,index)=>{const record=existing[index];if(record?.source===source)return patchDecorativeSeparator(source,record.clone),record;record?.clone.remove();const clone=decorativeSeparatorClone(source);return item.append(clone),{source,clone}});for(const record of existing.slice(sources.length))record.clone.remove();this.generatedSeparators.set(item,next)}}}static{this.defaultStrings={...super.defaultStrings,breadcrumb:LYRA_DEFAULT_breadcrumb}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.scheduleAfterUpdate(this.syncSeparators)}disconnectedCallback(){this.clearGeneratedSeparators(),this.separatorObserver?.disconnect(),this.separatorObserver=void 0,this.separatorObserverDocument=void 0,this.setFirstItem(void 0),super.disconnectedCallback()}clearGeneratedSeparators(){for(const records of this.generatedSeparators.values())records.forEach(({clone})=>clone.remove());this.generatedSeparators.clear()}setFirstItem(item){this.firstItem!==item&&(this.firstItem?.removeAttribute("data-lr-breadcrumb-first"),this.firstItem=item,item?.setAttribute("data-lr-breadcrumb-first",""))}observeSeparatorSources(sources){const ownerDocument=this.ownerDocument;if(!this.separatorObserver||this.separatorObserverDocument!==ownerDocument){this.separatorObserver?.disconnect();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;this.separatorObserver=new MutationObserverCtor(this.syncSeparators),this.separatorObserverDocument=ownerDocument}else this.separatorObserver.disconnect();for(const source of sources)this.separatorObserver.observe(source,{attributes:!0,characterData:!0,childList:!0,subtree:!0})}render(){const hostLabel=this.getAttribute("aria-label"),label=hostLabel===null?this.accessibleLabel==null?this.label==null?this.localize("breadcrumb"):this.label:this.accessibleLabel:hostLabel;return html`<nav part="base breadcrumb" aria-label=${label}>
+import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{styles}from"./breadcrumb.styles.js";import{LYRA_DEFAULT_breadcrumb}from"../../../internal/default-strings/layout.generated.js";const DECORATIVE_SEPARATOR_CLONE_ATTRIBUTE=/^(?:aria-|form(?:action|enctype|method|novalidate|target)?$|(?:for|headers|id|list|name|required)$)/;function sanitizeDecorativeSeparatorClone(clone){for(const element of[clone,...clone.querySelectorAll("*")])for(const attribute of element.getAttributeNames())DECORATIVE_SEPARATOR_CLONE_ATTRIBUTE.test(attribute)&&element.removeAttribute(attribute)}function decorativeSeparatorClone(source){const clone=source.cloneNode(!0);return sanitizeDecorativeSeparatorClone(clone),clone.setAttribute("slot","separator"),clone}function patchDecorativeSeparator(source,clone){const desired=decorativeSeparatorClone(source),patch=(next,current)=>{if(next.nodeType===3&&current.nodeType===3){current.textContent!==next.textContent&&(current.textContent=next.textContent);return}if(next.nodeType!==1||current.nodeType!==1)return;const nextElement=next,currentElement=current;for(const name of currentElement.getAttributeNames())nextElement.hasAttribute(name)||currentElement.removeAttribute(name);for(const name of nextElement.getAttributeNames()){const value=nextElement.getAttribute(name);currentElement.getAttribute(name)!==value&&currentElement.setAttribute(name,value)}const nextChildren=[...nextElement.childNodes];for(let index=0;index<nextChildren.length;index+=1){const nextChild=nextChildren[index],currentChild=currentElement.childNodes[index];if(!nextChild)continue;if(!currentChild){currentElement.append(nextChild.cloneNode(!0));continue}nextChild.nodeType===currentChild.nodeType&&(nextChild.nodeType!==1||currentChild.nodeType===1&&nextChild.localName===currentChild.localName&&nextChild.namespaceURI===currentChild.namespaceURI)?patch(nextChild,currentChild):currentChild.replaceWith(nextChild.cloneNode(!0))}for(;currentElement.childNodes.length>nextChildren.length;)currentElement.lastChild?.remove()};patch(desired,clone)}class LyraBreadcrumb extends LyraElement{constructor(){super(...arguments),this.generatedSeparators=new Map,this.syncSeparators=()=>{const sources=this.renderRoot.querySelector('slot[name="separator"]')?.assignedElements({flatten:!0})??[];this.observeSeparatorSources(sources);const items=[...this.children].filter(item=>item.localName===tag("breadcrumb-item"));this.setFirstItem(items[0]);const owned=new Set(items);for(const[item,records]of this.generatedSeparators)owned.has(item)||(records.forEach(({clone})=>clone.remove()),this.generatedSeparators.delete(item));for(const item of items){const existing=this.generatedSeparators.get(item)??[],generated=new Set(existing.map(({clone})=>clone));if([...item.children].some(child=>child.getAttribute("slot")==="separator"&&!generated.has(child))||sources.length===0){existing.forEach(({clone})=>clone.remove()),this.generatedSeparators.delete(item);continue}const next=sources.map((source,index)=>{const record=existing[index];if(record?.source===source)return patchDecorativeSeparator(source,record.clone),record;record?.clone.remove();const clone=decorativeSeparatorClone(source);return item.append(clone),{source,clone}});for(const record of existing.slice(sources.length))record.clone.remove();this.generatedSeparators.set(item,next)}}}static{this.defaultStrings={...super.defaultStrings,breadcrumb:LYRA_DEFAULT_breadcrumb}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.scheduleAfterUpdate(this.syncSeparators)}disconnectedCallback(){this.clearGeneratedSeparators(),this.separatorObserver?.disconnect(),this.separatorObserver=void 0,this.separatorObserverDocument=void 0,this.setFirstItem(void 0),super.disconnectedCallback()}clearGeneratedSeparators(){for(const records of this.generatedSeparators.values())records.forEach(({clone})=>clone.remove());this.generatedSeparators.clear()}setFirstItem(item){this.firstItem!==item&&(this.firstItem?.removeAttribute("data-lr-breadcrumb-first"),this.firstItem=item,item?.setAttribute("data-lr-breadcrumb-first",""))}observeSeparatorSources(sources){const ownerDocument=this.ownerDocument;if(!this.separatorObserver||this.separatorObserverDocument!==ownerDocument){this.separatorObserver?.disconnect();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;this.separatorObserver=new MutationObserverCtor(this.syncSeparators),this.separatorObserverDocument=ownerDocument}else this.separatorObserver.disconnect();for(const source of sources)this.separatorObserver.observe(source,{attributes:!0,characterData:!0,childList:!0,subtree:!0})}render(){const hostLabel=this.getAttribute("aria-label"),label=hostLabel===null?this.accessibleLabel==null?this.label==null?this.localize("breadcrumb"):this.label:this.accessibleLabel:hostLabel;return html`<nav part="base breadcrumb" aria-label=${label}>
       <div part="list" role="list"><slot @slotchange=${this.syncSeparators}></slot></div>
       <slot class="separator-source" name="separator" @slotchange=${this.syncSeparators}></slot>
     </nav>`}}__decorate([property({attribute:"aria-label"})],LyraBreadcrumb.prototype,"accessibleLabel",void 0),__decorate([property()],LyraBreadcrumb.prototype,"label",void 0);export{LyraBreadcrumb};

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

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{activeElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{declaredDefaultConverter}from"../../../internal/converters.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{containsNestedInteractive}from"../../../internal/nested-interactive.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{LyraElement}from"../../../internal/lyra-element.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./card.styles.js";import{LYRA_DEFAULT_open}from"../../../internal/default-strings.generated.js";function isElementNode(value){return typeof value=="object"&&value!==null&&value.nodeType===1&&typeof value.matches=="function"}class LyraCard extends LyraElement{constructor(){super(...arguments),this.appearance="outlined",this.orientation="vertical",this.withHeader=!1,this.withHeaderActions=!1,this.withMedia=!1,this.withFooter=!1,this.withFooterActions=!1,this.actionable=!1,this.disabled=!1,this.accessibleLabel=null,this.triggerPressed=null,this.triggerCurrent=null,this.slotPresence=new SlotPresenceController(this),this.accessibleContentText="",this.contentTextObserver=new AccessibleTextController(this,[""],()=>{this.needsAccessibleContentText()&&this.recomputeAccessibleContentText()},["alt","aria-labelledby","slot"]),this.onBaseClick=e=>{if(this.disabled)return;const origin=e.composedPath()[0];if(isElementNode(origin)&&origin.getAttribute("part")==="activation-button"){this.emit("lr-card-activate",null);return}containsNestedInteractive(e,e.currentTarget)||this.emit("lr-card-activate",null)},this.onLinkedContentClick=e=>{this.disabled||e.defaultPrevented||containsNestedInteractive(e,e.currentTarget)||(e.stopPropagation(),this.renderRoot.querySelector('a[part~="base"][href]')?.click())}}static{this.defaultStrings={...super.defaultStrings,open:LYRA_DEFAULT_open}}static{this.styles=[LyraElement.styles,styles]}get resolvedRel(){return resolveGuardedRel(this.rel,this.target)}semanticOwner(){const root=this.renderRoot;return root?root.querySelector('a[part="base"]')??root.querySelector('button[part="activation-button"]')??root.querySelector('div[part="base"]'):null}willUpdate(changed){if(super.willUpdate(changed),changed.has("href")||changed.has("actionable")){const previous=this.semanticOwner(),nextKind=safeLinkHref(this.href)?"a":this.actionable?"button":"div";this.semanticFocusOrigin=previous!==null&&previous.localName!==nextKind&&shadowFocusTarget(this)===previous?previous:void 0}this.syncAccessibleContentText()}updated(changed){super.updated(changed);const focusOrigin=this.semanticFocusOrigin;this.semanticFocusOrigin=void 0,focusOrigin&&this.scheduleAfterUpdate(()=>{const internalActive=shadowFocusTarget(this),documentActive=activeElementIn(this.ownerDocument);if(internalActive!==null&&internalActive!==focusOrigin||documentActive!==null&&documentActive!==this&&documentActive!==this.ownerDocument.body)return;this.semanticOwner()?.focus()},"card-owner-focus")}connectedCallback(){this.contentTextObserver.setEnabled(this.needsAccessibleContentText()),super.connectedCallback(),this.needsAccessibleContentText()&&this.recomputeAccessibleContentText(),this.requestUpdate()}needsAccessibleContentText(){return this.actionable&&!safeLinkHref(this.href)&&(hostAriaLabel(this)??this.accessibleLabel??null)===null}syncAccessibleContentText(){if(this.contentTextObserver.setEnabled(this.needsAccessibleContentText()),!this.needsAccessibleContentText()){this.accessibleContentText="";return}(!this.hasUpdated||this.accessibleContentText==="")&&this.recomputeAccessibleContentText()}recomputeAccessibleContentText(){this.accessibleContentText=composedAccessibilityText(this.childNodes,{requireRendered:!1}).replace(/\s+/g," ").trim()}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusOrigin=void 0}adoptedCallback(){super.adoptedCallback(),this.contentTextObserver.adopted()}click(){this.disabled||this.renderRoot.querySelector('a[part~="base"], button[part~="activation-button"]')?.click()}render(){const has=name=>this.slotPresence.has(name),hasMedia=this.withMedia||has("media")||has("image"),hasHeaderActions=this.withHeaderActions||has("header-actions")||has("actions"),hasHeader=this.withHeader||has("header")||hasHeaderActions,hasFooterActions=this.withFooterActions||has("footer-actions"),hasFooter=this.withFooter||has("footer")||hasFooterActions,href=safeLinkHref(this.href),activatable=this.actionable&&!href,disabled=this.disabled&&(activatable||!!href),pressed=["true","false","mixed"].includes(this.triggerPressed??"")?this.triggerPressed:nothing,current=["page","step","location","date","time","true","false"].includes(this.triggerCurrent??"")?this.triggerCurrent:nothing,accessibleLabel=hostAriaLabel(this)??this.accessibleLabel,fallbackAccessibleLabel=this.accessibleContentText||this.localize("open"),body=html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{activeElementIn,shadowFocusTarget}from"../../../internal/active-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{declaredDefaultConverter}from"../../../internal/converters.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{containsNestedInteractive}from"../../../internal/nested-interactive.js";import{resolveGuardedRel}from"../../../internal/link-rel.js";import{LyraElement}from"../../../internal/lyra-element.js";import{safeLinkHref}from"../../../internal/safe-url.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./card.styles.js";import{LYRA_DEFAULT_open}from"../../../internal/default-strings/shared.generated.js";function isElementNode(value){return typeof value=="object"&&value!==null&&value.nodeType===1&&typeof value.matches=="function"}class LyraCard extends LyraElement{constructor(){super(...arguments),this.appearance="outlined",this.orientation="vertical",this.withHeader=!1,this.withHeaderActions=!1,this.withMedia=!1,this.withFooter=!1,this.withFooterActions=!1,this.actionable=!1,this.disabled=!1,this.accessibleLabel=null,this.triggerPressed=null,this.triggerCurrent=null,this.slotPresence=new SlotPresenceController(this),this.accessibleContentText="",this.contentTextObserver=new AccessibleTextController(this,[""],()=>{this.needsAccessibleContentText()&&this.recomputeAccessibleContentText()},["alt","aria-labelledby","slot"]),this.onBaseClick=e=>{if(this.disabled)return;const origin=e.composedPath()[0];if(isElementNode(origin)&&origin.getAttribute("part")==="activation-button"){this.emit("lr-card-activate",null);return}containsNestedInteractive(e,e.currentTarget)||this.emit("lr-card-activate",null)},this.onLinkedContentClick=e=>{this.disabled||e.defaultPrevented||containsNestedInteractive(e,e.currentTarget)||(e.stopPropagation(),this.renderRoot.querySelector('a[part~="base"][href]')?.click())}}static{this.defaultStrings={...super.defaultStrings,open:LYRA_DEFAULT_open}}static{this.styles=[LyraElement.styles,styles]}get resolvedRel(){return resolveGuardedRel(this.rel,this.target)}semanticOwner(){const root=this.renderRoot;return root?root.querySelector('a[part="base"]')??root.querySelector('button[part="activation-button"]')??root.querySelector('div[part="base"]'):null}willUpdate(changed){if(super.willUpdate(changed),changed.has("href")||changed.has("actionable")){const previous=this.semanticOwner(),nextKind=safeLinkHref(this.href)?"a":this.actionable?"button":"div";this.semanticFocusOrigin=previous!==null&&previous.localName!==nextKind&&shadowFocusTarget(this)===previous?previous:void 0}this.syncAccessibleContentText()}updated(changed){super.updated(changed);const focusOrigin=this.semanticFocusOrigin;this.semanticFocusOrigin=void 0,focusOrigin&&this.scheduleAfterUpdate(()=>{const internalActive=shadowFocusTarget(this),documentActive=activeElementIn(this.ownerDocument);if(internalActive!==null&&internalActive!==focusOrigin||documentActive!==null&&documentActive!==this&&documentActive!==this.ownerDocument.body)return;this.semanticOwner()?.focus()},"card-owner-focus")}connectedCallback(){this.contentTextObserver.setEnabled(this.needsAccessibleContentText()),super.connectedCallback(),this.needsAccessibleContentText()&&this.recomputeAccessibleContentText(),this.requestUpdate()}needsAccessibleContentText(){return this.actionable&&!safeLinkHref(this.href)&&(hostAriaLabel(this)??this.accessibleLabel??null)===null}syncAccessibleContentText(){if(this.contentTextObserver.setEnabled(this.needsAccessibleContentText()),!this.needsAccessibleContentText()){this.accessibleContentText="";return}(!this.hasUpdated||this.accessibleContentText==="")&&this.recomputeAccessibleContentText()}recomputeAccessibleContentText(){this.accessibleContentText=composedAccessibilityText(this.childNodes,{requireRendered:!1}).replace(/\s+/g," ").trim()}disconnectedCallback(){super.disconnectedCallback(),this.semanticFocusOrigin=void 0}adoptedCallback(){super.adoptedCallback(),this.contentTextObserver.adopted()}click(){this.disabled||this.renderRoot.querySelector('a[part~="base"], button[part~="activation-button"]')?.click()}render(){const has=name=>this.slotPresence.has(name),hasMedia=this.withMedia||has("media")||has("image"),hasHeaderActions=this.withHeaderActions||has("header-actions")||has("actions"),hasHeader=this.withHeader||has("header")||hasHeaderActions,hasFooterActions=this.withFooterActions||has("footer-actions"),hasFooter=this.withFooter||has("footer")||hasFooterActions,href=safeLinkHref(this.href),activatable=this.actionable&&!href,disabled=this.disabled&&(activatable||!!href),pressed=["true","false","mixed"].includes(this.triggerPressed??"")?this.triggerPressed:nothing,current=["page","step","location","date","time","true","false"].includes(this.triggerCurrent??"")?this.triggerCurrent:nothing,accessibleLabel=hostAriaLabel(this)??this.accessibleLabel,fallbackAccessibleLabel=this.accessibleContentText||this.localize("open"),body=html`
       ${activatable?html`<button
             part="activation-button"
             type="button"