@aceshooting/lyra-ui 19.0.1 → 20.0.1

package/dist/components/layout/dock-panel/dock-panel.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{box-sizing:border-box;--_lr-dock-panel-collapsed-size:var(--lr-icon-button-size);display:block;position:relative}:host([edge=start]),:host([edge=end]){block-size:100%}:host([edge=top]),:host([edge=bottom]){inline-size:100%}:host([edge=start][collapsed]),:host([edge=end][collapsed]){min-inline-size:var(--lr-dock-panel-collapsed-size,var(--_lr-dock-panel-collapsed-size))}:host([edge=top][collapsed]),:host([edge=bottom][collapsed]){min-block-size:var(--lr-dock-panel-collapsed-size,var(--_lr-dock-panel-collapsed-size))}[part=base]{background:var(--lr-color-surface);border:var(--lr-border-width-thin) solid var(--lr-color-border);block-size:100%;inline-size:100%;position:relative;overflow:hidden}[part=content]{block-size:100%;inline-size:100%;overflow:auto}[part=content][hidden]{display:none}[part=handle]{background:var(--lr-color-border);touch-action:none;position:absolute}[part=handle]:hover{background:var(--lr-dock-panel-handle-hover-color,var(--lr-color-brand))}[part=handle]:focus-visible{background:var(--lr-dock-panel-handle-hover-color,var(--lr-color-brand));outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part=handle]:active{background:var(--lr-dock-panel-handle-active-color,color-mix(in oklab, var(--lr-dock-panel-handle-hover-color,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=handle]:before{content:"";inset:var(--lr-size-neg-6px);position:absolute}:host([edge=start]) [part=handle]{inline-size:var(--lr-size-3px);cursor:col-resize;inset-block:0;inset-inline-end:0}:host([edge=end]) [part=handle]{inline-size:var(--lr-size-3px);cursor:col-resize;inset-block:0;inset-inline-start:0}:host([edge=top]) [part=handle]{block-size:var(--lr-size-3px);cursor:row-resize;inset-block-end:0;inset-inline:0}:host([edge=bottom]) [part=handle]{block-size:var(--lr-size-3px);cursor:row-resize;inset-block-start:0;inset-inline:0}[part=collapse-toggle]{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-none);transition:background var(--lr-transition-fast), color var(--lr-transition-fast);z-index:var(--lr-layer-content);justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute}[part=collapse-toggle]:hover{background:var(--lr-dock-panel-collapse-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-dock-panel-collapse-toggle-hover-color,var(--lr-color-brand))}[part=collapse-toggle]:active{background:color-mix(in oklab, var(--lr-dock-panel-collapse-toggle-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-dock-panel-collapse-toggle-hover-color,var(--lr-color-brand))}[part=collapse-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host([edge=start]) [part=collapse-toggle]{inset-block-start:50%;inset-inline-end:var(--lr-space-xs);transform:translateY(-50%)}:host([edge=end]) [part=collapse-toggle]{inset-block-start:50%;inset-inline-start:var(--lr-space-xs);transform:translateY(-50%)}:host([edge=top]) [part=collapse-toggle]{inset-block-end:var(--lr-space-xs);inset-inline-start:50%;transform:translate(-50%)}:host([edge=bottom]) [part=collapse-toggle]{inset-block-start:var(--lr-space-xs);inset-inline-start:50%;transform:translate(-50%)}:host(:dir(rtl)[edge=top]) [part=collapse-toggle],:host(:dir(rtl)[edge=bottom]) [part=collapse-toggle]{transform:translate(50%)}@media (prefers-reduced-motion:reduce){[part=collapse-toggle],[part=handle]{transition:none!important}}`;export{styles};
+import{css}from"lit";const styles=css`:host{box-sizing:border-box;--_lr-dock-panel-collapsed-size:var(--lr-icon-button-size);display:block;position:relative}:host([edge=start]),:host([edge=end]){block-size:100%}:host([edge=top]),:host([edge=bottom]){inline-size:100%}:host([edge=start][collapsed]),:host([edge=end][collapsed]){min-inline-size:var(--lr-dock-panel-collapsed-size,var(--_lr-dock-panel-collapsed-size))}:host([edge=top][collapsed]),:host([edge=bottom][collapsed]){min-block-size:var(--lr-dock-panel-collapsed-size,var(--_lr-dock-panel-collapsed-size))}[part=base]{background:var(--lr-color-surface);border:var(--lr-border-width-thin) solid var(--lr-color-border);block-size:100%;inline-size:100%;position:relative;overflow:hidden}[part=content]{block-size:100%;inline-size:100%;overflow:auto}[part=content][hidden]{display:none}[part=handle]{background:var(--lr-color-border);touch-action:none;position:absolute}[part=handle]:hover{background:var(--lr-dock-panel-handle-hover-color,var(--lr-color-brand))}[part=handle]:focus-visible{background:var(--lr-dock-panel-handle-hover-color,var(--lr-color-brand));outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-width))}[part=handle]:active{background:var(--lr-dock-panel-handle-active-color,color-mix(in oklab, var(--lr-dock-panel-handle-hover-color,var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=handle]:before{content:"";inset:var(--lr-size-neg-6px);position:absolute}:host([edge=start]) [part=handle]{inline-size:var(--lr-size-3px);cursor:col-resize;inset-block:0;inset-inline-end:0}:host([edge=end]) [part=handle]{inline-size:var(--lr-size-3px);cursor:col-resize;inset-block:0;inset-inline-start:0}:host([edge=top]) [part=handle]{block-size:var(--lr-size-3px);cursor:row-resize;inset-block-end:0;inset-inline:0}:host([edge=bottom]) [part=handle]{block-size:var(--lr-size-3px);cursor:row-resize;inset-block-start:0;inset-inline:0}[part=collapse-toggle]{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-none);transition:background var(--lr-transition-fast), color var(--lr-transition-fast);z-index:var(--lr-layer-content);justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute}[part=collapse-toggle]:hover{background:var(--lr-dock-panel-collapse-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-dock-panel-collapse-toggle-hover-color,var(--lr-color-brand))}[part=collapse-toggle]:active{background:color-mix(in oklab, var(--lr-dock-panel-collapse-toggle-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-dock-panel-collapse-toggle-hover-color,var(--lr-color-brand))}[part=collapse-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host([edge=start]) [part=collapse-toggle]{inset-block-start:50%;inset-inline-end:var(--lr-space-xs);transform:translateY(-50%)}:host([edge=end]) [part=collapse-toggle]{inset-block-start:50%;inset-inline-start:var(--lr-space-xs);transform:translateY(-50%)}:host([edge=top]) [part=collapse-toggle]{inset-block-end:var(--lr-space-xs);inset-inline-start:50%;transform:translate(-50%)}:host([edge=bottom]) [part=collapse-toggle]{inset-block-start:var(--lr-space-xs);inset-inline-start:50%;transform:translate(-50%)}:host(:dir(rtl)[edge=top]) [part=collapse-toggle],:host(:dir(rtl)[edge=bottom]) [part=collapse-toggle]{transform:translate(50%)}:host([edge=start]) [part=collapse-toggle] span{transform:rotate(180deg)}:host([edge=start][collapsed]) [part=collapse-toggle] span,:host([edge=end]) [part=collapse-toggle] span{transform:rotate(0)}:host([edge=end][collapsed]) [part=collapse-toggle] span{transform:rotate(180deg)}:host(:dir(rtl)[edge=start]) [part=collapse-toggle] span{transform:rotate(0)}:host(:dir(rtl)[edge=start][collapsed]) [part=collapse-toggle] span,:host(:dir(rtl)[edge=end]) [part=collapse-toggle] span{transform:rotate(180deg)}:host(:dir(rtl)[edge=end][collapsed]) [part=collapse-toggle] span{transform:rotate(0)}@media (prefers-reduced-motion:reduce){[part=collapse-toggle],[part=handle]{transition:none!important}}`;export{styles};

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

@@ -69,7 +69,7 @@ export interface MenuItemSelectDetail{readonly item:LyraMenuItem;}export interfa
 * @status stable
 * @since 4.0.0
 */
-export declare class LyraMenu extends LyraElement<LyraMenuEventMap>{protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-select':readonly string[];}>;static styles:import("lit").CSSResultGroup[];private presentationOpen;private submenuAnchor;private submenuStateChange;
+export declare class LyraMenu extends LyraElement<LyraMenuEventMap>{protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-select':readonly string[];}>;static styles:import("lit").CSSResultGroup[];private presentationOpen;private presentationHidden;private presentationHideWatcher?;private submenuAnchor;private submenuStateChange;
 /** Accessible name for the `role="menu"` list — override with something
 *  specific (e.g. "Row actions") when a page has more than one menu.
 *  Localized (`menuLabel`) when omitted. Any supplied string, including
@@ -101,7 +101,17 @@ private syncPresentationState;private onRegionSlotChange;
 * with neither slot filled, and `data-list-empty` is absent for a menu that has items, so the
 * overwhelmingly common shape gains no host attribute of any kind.
 */
-private syncRegionState;protected updated(changed:PropertyValues):void;private reposition;private focusAfterPlacement;disconnectedCallback():void;private bindDocumentPointer;private unbindDocumentPointer;private scheduleOwnedTimeout;private clearOwnedTimeout;private openPresentation;private closePresentation;private onDocPointer;private onItemsSlotChange;private syncItemsFromSlot;private acquireItemOwner;private releaseItemOwner;
+private syncRegionState;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private reposition;private cancelPresentationHideWatch;
+/** Waits for `.submenu-surface`'s own real CSS exit transition (read live, so a consumer's
+*  `--lr-transition-fast` override is honored) before removing it from layout -- the same
+*  transition-settle shape as `toast-item.class.ts`'s `waitForVisualCompletion`, kept local
+*  here since submenu placement is already this component's own private mechanism. Every path,
+*  including the immediate no-transition ones, defers the actual `@state` write a microtask:
+*  this runs synchronously from `updated()`, and writing a reactive field there -- after this
+*  same update has already been marked complete -- trips Lit's dev "scheduled an update after
+*  an update completed" warning (see `firstUpdated()`'s identical microtask deferral elsewhere
+*  in this file). */
+private schedulePresentationHide;private focusAfterPlacement;disconnectedCallback():void;private bindDocumentPointer;private unbindDocumentPointer;private scheduleOwnedTimeout;private clearOwnedTimeout;private openPresentation;private closePresentation;private onDocPointer;private onItemsSlotChange;private syncItemsFromSlot;private acquireItemOwner;private releaseItemOwner;
 /** Enforces `type="radio"` exclusive choice among the items this menu owns directly (`this.items`
 *  never includes a nested submenu's items, which belong to that submenu's own `<lr-menu>` — so
 *  the scope this walks is already exactly "the owning menu", matching the group's default). */
@@ -110,7 +120,7 @@ private uncheckRadioGroupSiblings;
 *  onto one leaves `focus()` a silent no-op, so roving focus is stranded on whatever held it
 *  (or on `<body>`) and every later key press dies. `closest` covers an inert ancestor, which
 *  inerts the item just as completely as the attribute on the item itself. */
-private isNavigable;private applyDropdownSize;
+private isNavigable;private applyDropdownSize;private itemStateChangeReconciliationPending;private onItemStateChangeEvent;
 /** Repairs the roving stop when an active item becomes unavailable; move actual focus only
 * when that item held it, preserving outside and slotted region focus during background edits. */
 private onItemStateChange;

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r},_a;import{html}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{collectFocusableElements,composedContains}from"../../../internal/overlay-manager.js";import{styles}from"./menu.styles.js";import{menuItemOwner,submenuPanelController}from"./menu-shared.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{activeElementIn}from"../../../internal/active-element.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import"./menu-item.class.js";import{LYRA_DEFAULT_menuLabel}from"../../../internal/default-strings.generated.js";const SUBMENU_PLACEMENT="right-start",SUBMENU_OPEN_DELAY=150,SUBMENU_CLOSE_DELAY=300,TYPE_AHEAD_RESET_MS=500;function isLyraMenuItemElement(value){return isHtmlElement(value)?value.localName===tag("menu-item")||value.localName===tag("dropdown-item"):!1}function isLyraMenuElement(value){return isHtmlElement(value)&&value.localName===tag("menu")}function isUsableActiveElement(value){if(typeof value!="object"&&typeof value!="function"||value===null)return!1;try{const candidate=value;if(candidate.nodeType!==1)return!1;const NodeConstructor=candidate.ownerDocument?.defaultView?.Node??(typeof Node>"u"?void 0:Node);return NodeConstructor?(NodeConstructor.prototype.getRootNode.call(candidate),!0):!1}catch{return!1}}function safeDeepActiveElement(root){const initial=activeElementIn(root);if(!isUsableActiveElement(initial))return null;let active=initial;for(;;){let shadowRoot;try{shadowRoot=active.shadowRoot}catch{return null}if(!shadowRoot)return active;const nested=activeElementIn(shadowRoot);if(nested===null)return active;if(!isUsableActiveElement(nested))return null;active=nested}}let menuWidthScaleRegistered=!1;function registerMenuWidthScale(){if(!menuWidthScaleRegistered&&(menuWidthScaleRegistered=!0,!(typeof CSS>"u"||typeof CSS.registerProperty!="function")))try{CSS.registerProperty({name:"--_lr-menu-max-inline-size",syntax:"<length-percentage>",inherits:!1,initialValue:"100%"})}catch{}}class LyraMenu extends LyraElement{constructor(){super(...arguments),this.presentationOpen=!1,this.submenuAnchor=null,this.submenuStateChange=null,this.dropdownContained=!1,this.dropdownOwner=null,this._dropdownOpen=!1,this.dropdownRendersMenuRole=!1,this.dropdownStayOpenOnSelect=!1,this.items=[],this.activeIndex=-1,this.presentationPositioned=!1,this.pendingFocus="first",this.listId=nextId("menu-list"),this.owningMenu={activate:item=>this.onOwnedItemSelect(item),uncheckRadioGroup:(item,group)=>this.uncheckRadioGroupSiblings(item,group)},this.typeAheadBuffer="",this.typeAheadReset=new DebounceController(TYPE_AHEAD_RESET_MS,()=>{this.typeAheadBuffer=""},()=>this.ownerDocument.defaultView),this[_a]=this.createSubmenuController(),this.onRegionSlotChange=()=>{this.syncRegionState()},this.onDocPointer=e=>{const path=e.composedPath();path.includes(this)||this.submenuAnchor&&path.includes(this.submenuAnchor)||this.closePresentation()},this.onItemsSlotChange=e=>{this.syncItemsFromSlot(e.target)},this.onItemStateChange=event=>{event?.stopPropagation();const navigable=this.items.filter(item=>this.isNavigable(item));if(this.activeIndex>=0&&!this.isNavigable(this.items[this.activeIndex])){const current=this.activeIndex,displaced=this.items[current],focused=safeDeepActiveElement(this.ownerDocument),displacedHadFocus=focused===null||focused===this.ownerDocument.body||focused===displaced||composedContains(displaced,focused),next=navigable.find(item=>this.items.indexOf(item)>current)??navigable.find(item=>this.items.indexOf(item)<current);next?this.setActiveItem(next,displacedHadFocus):(this.activeIndex=-1,this.applyRovingTabIndex(),displacedHadFocus&&this.rehomeZeroSurvivorFocus());return}this.applyRovingTabIndex()},this.onListFocusIn=e=>{const target=e.target;if(!isLyraMenuItemElement(target))return;const index=this.items.indexOf(target);index===-1||index===this.activeIndex||(this.activeIndex=index,this.applyRovingTabIndex(),this.closeSubmenus(target))},this.onListKeyDown=e=>{if(this.isForeignEvent(e))return;const isItemTarget=isLyraMenuItemElement(e.target);if(e.key==="Escape"&&isItemTarget&&!this.hasStandalonePresentation){e.preventDefault(),this.closePresentation({focusTrigger:!0});return}if(!isItemTarget)return;const navigable=this.items.filter(i=>this.isNavigable(i)),current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentNavIndex=current?navigable.indexOf(current):-1,intoSubmenuKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight";switch(e.key){case"ArrowRight":case"ArrowLeft":e.key===intoSubmenuKey?current?.hasSubmenu&&this.isNavigable(current)&&(e.preventDefault(),this.closeSubmenus(current),current.openSubmenu("first")):this.submenuAnchor&&(e.preventDefault(),this.closePresentation({focusTrigger:!0}));break;case"ArrowDown":if(e.preventDefault(),navigable.length){const next=navigable[(currentNavIndex+1+navigable.length)%navigable.length];next&&this.setActiveItem(next)}break;case"ArrowUp":if(e.preventDefault(),navigable.length){const prevIndex=currentNavIndex<=0?navigable.length-1:currentNavIndex-1,prev=navigable[prevIndex];prev&&this.setActiveItem(prev)}break;case"Home":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[0]);break;case"End":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[navigable.length-1]);break;case"Enter":case" ":e.preventDefault(),current?.hasSubmenu?(this.closeSubmenus(current),current.openSubmenu("first")):current?.isLinkItem?current.click():current?.select();break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);return}},this.onPopupPointerOver=e=>{if(!this.interactionOpen)return;const hovered=this.ownItemFromEvent(e);this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&opened===hovered?(this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuCloseTimer=void 0):opened&&this.scheduleSubmenuClose(opened),!(!hovered||hovered===opened||!hovered.hasSubmenu||!this.isNavigable(hovered))&&(this.submenuOpenTimer=this.scheduleOwnedTimeout(()=>{this.submenuOpenTimer=void 0,!(!this.interactionOpen||!this.items.includes(hovered))&&(this.closeSubmenus(hovered),hovered.openSubmenu("none"))},SUBMENU_OPEN_DELAY))},this.onPopupPointerLeave=()=>{this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&this.scheduleSubmenuClose(opened)},this.onNestedSelect=e=>{if(e.target===this)return;const event=e;this.dropdownStayOpenOnSelect&&event.preventDefault(),queueMicrotask(()=>{event.defaultPrevented||this.dismissAfterSelection(!0)})},this.onPopupKeyDown=e=>{const listEl=this.popupPart("list");if(e.key==="Escape"){if(listEl&&e.composedPath().includes(listEl)||this.hasStandalonePresentation)return;e.preventDefault(),this.closePresentation({focusTrigger:!0});return}e.key==="Tab"&&this.tabWouldLeavePopup(e)&&this.closePresentation()}}static{_a=submenuPanelController}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel}}static{this.immutableEventDetails=Object.freeze(["lr-select"])}static{this.identityEventDetailProperties=Object.freeze({"lr-select":Object.freeze(["item"])})}static{this.styles=[LyraElement.styles,styles]}get dropdownOpen(){return this._dropdownOpen}set dropdownOpen(next){const normalized=!!next;if(normalized===this._dropdownOpen)return;const old=this._dropdownOpen;this._dropdownOpen=normalized,this.presentationOpen=normalized,this.requestUpdate("dropdownOpen",old)}createSubmenuController(){const menu=this;return{get open(){return menu.submenuAnchor!==null&&menu.presentationOpen},attach(anchor,onStateChange){menu.submenuAnchor&&menu.submenuAnchor!==anchor&&menu.closePresentation(),menu.submenuAnchor=anchor,menu.submenuStateChange=onStateChange,menu.syncPresentationState(),menu.requestUpdate()},detach(anchor){menu.submenuAnchor===anchor&&(menu.closePresentation(),menu.submenuAnchor=null,menu.submenuStateChange=null,menu.cleanup?.(),menu.cleanup=void 0,menu.syncPresentationState(),menu.requestUpdate())},async show(focus="first"){menu.submenuAnchor&&(menu.openPresentation(focus),await menu.updateComplete,await menu.focusAfterPlacement(focus))},async hide(options){menu.closePresentation(options),await menu.updateComplete}}}connectedCallback(){if(super.connectedCallback(),registerMenuWidthScale(),this.hasUpdated){const slot=this.renderRoot.querySelector("slot:not([name])");slot&&this.syncItemsFromSlot(slot)}}firstUpdated(changed){super.firstUpdated(changed),this.syncRegionState(),this.syncPresentationState();const slot=this.itemsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.syncItemsFromSlot(s))})}get hasStandalonePresentation(){return!this.dropdownContained&&!this.submenuAnchor}get interactionOpen(){return this.hasStandalonePresentation||this.presentationOpen}syncPresentationState(){const standalone=this.hasStandalonePresentation;if(this.toggleAttribute("data-inline",standalone),this.toggleAttribute("data-submenu",this.submenuAnchor!==null),this.toggleAttribute("data-contained",this.dropdownContained),standalone){const active=this.activeIndex>=0?this.items[this.activeIndex]:void 0;if(!active||!this.isNavigable(active)){const first=this.items.find(item=>this.isNavigable(item));this.activeIndex=first?this.items.indexOf(first):-1}}else this.presentationOpen||(this.activeIndex=-1);this.applyRovingTabIndex()}syncRegionState(){const assigned=selector=>this.renderRoot.querySelector(selector)?.assignedElements({flatten:!0}).length??0;this.toggleAttribute("data-has-header",assigned('slot[name="header"]')>0),this.toggleAttribute("data-has-footer",assigned('slot[name="footer"]')>0),this.toggleAttribute("data-list-empty",assigned("slot:not([name])")===0)}updated(changed){super.updated(changed);const list=this.renderRoot.querySelector('[part~="list"]')??void 0;syncAriaDescribedByElements(this,list,this.getAttribute("aria-describedby")),(changed.has("presentationOpen")||changed.has("dropdownOpen")||changed.has("dropdownContained"))&&(this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.presentationOpen?this.submenuAnchor?(this.bindDocumentPointer(),this.reposition()):(this.unbindDocumentPointer(),this.presentationPositioned=!0,this.focusRoving(this.pendingFocus)):(this.unbindDocumentPointer(),this.resetTypeAhead(),this.activeIndex=-1,this.applyRovingTabIndex(),this.clearSubmenuTimers(),this.closeSubmenus())),changed.has("dropdownContained")&&this.syncPresentationState(),changed.has("dropdownSize")&&this.applyDropdownSize()}reposition(){this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1;const popup=this.renderRoot.querySelector(".submenu-surface");if(this.submenuAnchor&&popup){const placement=rtlAwarePlacement(SUBMENU_PLACEMENT,this);this.cleanup=place(this.submenuAnchor,popup,{placement,strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")})}}async focusAfterPlacement(focus){if(!this.presentationOpen||!this.submenuAnchor)return;const positioned=this.cleanup!==void 0&&(this.presentationPositioned||await waitForDeferredPlacement(()=>this.cleanup));if(!(!this.presentationOpen||!this.submenuAnchor)){if(!positioned){this.closePresentation(),await this.updateComplete;return}this.presentationPositioned=!0,this.focusRoving(focus)}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.resetTypeAhead(),this.clearSubmenuTimers(),this.itemStateObserver?.disconnect(),this.itemStateObserver=void 0,this.unbindDocumentPointer();for(const item of this.items)this.releaseItemOwner(item);this._dropdownOpen=!1,this.presentationOpen=!1,this.submenuStateChange?.(!1)}bindDocumentPointer(){const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}scheduleOwnedTimeout(callback,delay){const owner=this.ownerDocument.defaultView;if(owner)return{owner,handle:owner.setTimeout(callback,delay)}}clearOwnedTimeout(timer){timer&&timer.owner.clearTimeout(timer.handle)}focusContained(focus="first"){if(this.dropdownContained&&this.dropdownOwner)if(this.dropdownOwner.open)this.pendingFocus=focus,this.focusRoving(focus);else{const transition=this.dropdownOwner.show();this.dropdownOwner.open&&(this.pendingFocus=focus)}}openPresentation(focus="first"){if(this.dropdownContained&&this.dropdownOwner){this.focusContained(focus);return}this.pendingFocus=focus,this.presentationOpen?(!this.submenuAnchor||this.presentationPositioned)&&this.focusRoving(focus):(this.presentationOpen=!0,this.submenuStateChange?.(!0))}closePresentation(options){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide(options);return}this.presentationOpen&&(this.presentationOpen=!1,this.submenuStateChange?.(!1),options?.focusTrigger&&this.submenuAnchor&&resolveAccessibleTrigger(this.submenuAnchor).focus())}syncItemsFromSlot(slot){const assigned=slot.assignedElements({flatten:!0}).filter(isLyraMenuItemElement);if(assigned.length===this.items.length&&assigned.every((item,index)=>item===this.items[index]))return;this.itemStateObserver?.disconnect();const previousItems=this.items,previouslyActive=this.activeIndex>=0?this.items[this.activeIndex]:void 0,focusedBefore=safeDeepActiveElement(this.ownerDocument),activeItemLostFocus=!!previouslyActive&&(focusedBefore===null||focusedBefore===this.ownerDocument.body||focusedBefore===previouslyActive||composedContains(previouslyActive,focusedBefore));this.items=assigned;for(const item of previousItems)this.items.includes(item)||this.releaseItemOwner(item);for(const item of this.items)this.acquireItemOwner(item);this.applyDropdownSize();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;if(MutationObserverCtor){const owner=this.ownerDocument;let observer;observer=new MutationObserverCtor(()=>{this.itemStateObserver!==observer||this.ownerDocument!==owner||this.onItemStateChange()}),this.itemStateObserver=observer;for(const item of this.items)this.itemStateObserver.observe(item,{attributes:!0,attributeFilter:["disabled","hidden","aria-hidden","inert"]})}if(this.activeIndex=previouslyActive?this.items.indexOf(previouslyActive):-1,this.syncPresentationState(),this.syncRegionState(),this.interactionOpen)if(this.activeIndex===-1){const successor=this.items.find(item=>this.isNavigable(item));previouslyActive&&successor?this.setActiveItem(successor,activeItemLostFocus):this.focusRoving(this.pendingFocus),activeItemLostFocus&&!this.items.some(item=>this.isNavigable(item))&&this.rehomeZeroSurvivorFocus()}else{const active=activeElementIn(this.ownerDocument);!(isUsableActiveElement(active)&&this.contains(active))&&activeItemLostFocus&&this.items[this.activeIndex].focus()}}acquireItemOwner(item){item[menuItemOwner]?.(this.owningMenu)}releaseItemOwner(item){item[menuItemOwner]?.(null,this.owningMenu)}uncheckRadioGroupSiblings(item,group){for(const sibling of this.items)sibling!==item&&sibling.type==="radio"&&sibling.group===group&&sibling.checked&&(sibling.checked=!1)}isNavigable(item){return!item.interactionDisabled&&!item.hidden&&item.getAttribute("aria-hidden")!=="true"&&!item.inert&&!item.closest("[inert]")}applyDropdownSize(){if(this.dropdownSize)for(const item of this.items)item.size=this.dropdownSize}rehomeZeroSurvivorFocus(){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide({focusTrigger:!0});return}if(this.submenuAnchor){this.closePresentation({focusTrigger:!0});return}const list=this.renderRoot.querySelector('[part~="list"]');list&&(list.tabIndex=-1,list.focus({preventScroll:!0}))}onOwnedItemSelect(item){if(!isLyraMenuItemElement(item)||!this.items.includes(item))return;!this.emit("lr-select",{item},{cancelable:!0}).defaultPrevented&&!this.dropdownStayOpenOnSelect&&this.dismissAfterSelection(!0)}dismissAfterSelection(focusTrigger){this.closeSubmenus(),this.dropdownContained?this.dropdownOwner&&this.dropdownOwner.hide({focusTrigger}):this.submenuAnchor&&this.closePresentation({focusTrigger})}applyRovingTabIndex(){this.items.forEach((item,i)=>{item.tabIndex=i===this.activeIndex?0:-1})}focusRoving(which){if(which==="none")return;const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const item=which==="first"?navigable[0]:navigable[navigable.length-1];item&&this.setActiveItem(item)}setActiveItem(item,moveFocus=!0){this.activeIndex=this.items.indexOf(item),this.applyRovingTabIndex(),this.closeSubmenus(item),moveFocus&&item.focus()}closeSubmenus(keep){for(const item of this.items)item!==keep&&item.submenuOpen&&item.closeSubmenu()}openSubmenuItem(){return this.items.find(item=>item.submenuOpen)}clearSubmenuTimers(){this.clearOwnedTimeout(this.submenuOpenTimer),this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuOpenTimer=void 0,this.submenuCloseTimer=void 0}ownItemFromEvent(e){let owner;for(const node of e.composedPath()){if(node===this)break;isLyraMenuItemElement(node)&&(owner=node)}return owner}isForeignEvent(e){for(const node of e.composedPath()){if(node===this)return!1;if(isLyraMenuElement(node))return!0}return!1}scheduleSubmenuClose(item){this.submenuCloseTimer||(this.submenuCloseTimer=this.scheduleOwnedTimeout(()=>{this.submenuCloseTimer=void 0,item.submenuOpen&&(composedContains(item,safeDeepActiveElement(this.ownerDocument))||item.closeSubmenu())},SUBMENU_CLOSE_DELAY))}popupPart(name){return this.renderRoot.querySelector(`[part="${name}"]`)}tabWouldLeavePopup(e){const header=this.popupPart("header"),footer=this.popupPart("footer"),listEl=this.popupPart("list"),backwards=e.shiftKey,active=safeDeepActiveElement(this.ownerDocument),headerStops=header?collectFocusableElements(header):[],footerStops=footer?collectFocusableElements(footer):[],listStops=listEl?collectFocusableElements(listEl):[],hasNeighbor=stops=>{const index=active?stops.indexOf(active):-1;return index===-1?!1:backwards?index>0:index<stops.length-1},path=e.composedPath();return footer&&path.includes(footer)?hasNeighbor(footerStops)?!1:backwards?listStops.length===0&&headerStops.length===0:!0:header&&path.includes(header)?hasNeighbor(headerStops)?!1:backwards?!0:listStops.length===0&&footerStops.length===0:!isLyraMenuItemElement(e.target)&&hasNeighbor(listStops)?!1:backwards?headerStops.length===0:footerStops.length===0}typeAhead(char){this.typeAheadReset.cancel(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale),this.ownerDocument.defaultView&&this.typeAheadReset.push(void 0);const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentIndex=current?navigable.indexOf(current):-1,n=navigable.length;for(let step=1;step<=n;step++){const candidate=navigable[(currentIndex+step+n)%n];if(candidate&&this.itemText(candidate).toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.setActiveItem(candidate);return}}}resetTypeAhead(){this.typeAheadReset.cancel(),this.typeAheadBuffer=""}itemText(item){return composedAccessibilityText(item).trim()}get effectiveLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label!==void 0?this.label:this.dropdownLabel!==void 0?this.dropdownLabel:this.localize("menuLabel")}renderContents(){return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r},_a;import{html}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place,waitForDeferredPlacement}from"../../../internal/anchored-overlay-runtime.js";import{DebounceController}from"../../../internal/debounce-controller.js";import{collectInitialSlotAssignment}from"../../../internal/initial-slot-collection.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{rtlAwarePlacement}from"../../../internal/rtl.js";import{nextId,resolveAccessibleTrigger}from"../../../internal/a11y.js";import{collectFocusableElements,composedContains}from"../../../internal/overlay-manager.js";import{styles}from"./menu.styles.js";import{menuItemOwner,submenuPanelController}from"./menu-shared.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{tag}from"../../../internal/prefix.js";import{activeElementIn}from"../../../internal/active-element.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import"./menu-item.class.js";import{LYRA_DEFAULT_menuLabel}from"../../../internal/default-strings.generated.js";const SUBMENU_PLACEMENT="right-start",SUBMENU_OPEN_DELAY=150,SUBMENU_CLOSE_DELAY=300,TYPE_AHEAD_RESET_MS=500;function parseCssTime(value){const trimmed=value.trim();return trimmed.endsWith("ms")?Number.parseFloat(trimmed):trimmed.endsWith("s")?Number.parseFloat(trimmed)*1e3:0}function maxCssTime(value){return Math.max(0,...value.split(",").map(parseCssTime).filter(Number.isFinite))}function isLyraMenuItemElement(value){return isHtmlElement(value)?value.localName===tag("menu-item")||value.localName===tag("dropdown-item"):!1}function isLyraMenuElement(value){return isHtmlElement(value)&&value.localName===tag("menu")}function isUsableActiveElement(value){if(typeof value!="object"&&typeof value!="function"||value===null)return!1;try{const candidate=value;if(candidate.nodeType!==1)return!1;const NodeConstructor=candidate.ownerDocument?.defaultView?.Node??(typeof Node>"u"?void 0:Node);return NodeConstructor?(NodeConstructor.prototype.getRootNode.call(candidate),!0):!1}catch{return!1}}function safeDeepActiveElement(root){const initial=activeElementIn(root);if(!isUsableActiveElement(initial))return null;let active=initial;for(;;){let shadowRoot;try{shadowRoot=active.shadowRoot}catch{return null}if(!shadowRoot)return active;const nested=activeElementIn(shadowRoot);if(nested===null)return active;if(!isUsableActiveElement(nested))return null;active=nested}}let menuWidthScaleRegistered=!1;function registerMenuWidthScale(){if(!menuWidthScaleRegistered&&(menuWidthScaleRegistered=!0,!(typeof CSS>"u"||typeof CSS.registerProperty!="function")))try{CSS.registerProperty({name:"--_lr-menu-max-inline-size",syntax:"<length-percentage>",inherits:!1,initialValue:"100%"})}catch{}}class LyraMenu extends LyraElement{constructor(){super(...arguments),this.presentationOpen=!1,this.presentationHidden=!0,this.submenuAnchor=null,this.submenuStateChange=null,this.dropdownContained=!1,this.dropdownOwner=null,this._dropdownOpen=!1,this.dropdownRendersMenuRole=!1,this.dropdownStayOpenOnSelect=!1,this.items=[],this.activeIndex=-1,this.presentationPositioned=!1,this.pendingFocus="first",this.listId=nextId("menu-list"),this.owningMenu={activate:item=>this.onOwnedItemSelect(item),uncheckRadioGroup:(item,group)=>this.uncheckRadioGroupSiblings(item,group)},this.typeAheadBuffer="",this.typeAheadReset=new DebounceController(TYPE_AHEAD_RESET_MS,()=>{this.typeAheadBuffer=""},()=>this.ownerDocument.defaultView),this[_a]=this.createSubmenuController(),this.onRegionSlotChange=()=>{this.syncRegionState()},this.onDocPointer=e=>{const path=e.composedPath();path.includes(this)||this.submenuAnchor&&path.includes(this.submenuAnchor)||this.closePresentation()},this.onItemsSlotChange=e=>{this.syncItemsFromSlot(e.target)},this.itemStateChangeReconciliationPending=!1,this.onItemStateChangeEvent=event=>{event.stopPropagation(),!this.itemStateChangeReconciliationPending&&(this.itemStateChangeReconciliationPending=!0,queueMicrotask(()=>{this.itemStateChangeReconciliationPending=!1,this.onItemStateChange()}))},this.onItemStateChange=()=>{const navigable=this.items.filter(item=>this.isNavigable(item));if(this.activeIndex>=0&&!this.isNavigable(this.items[this.activeIndex])){const current=this.activeIndex,displaced=this.items[current],focused=safeDeepActiveElement(this.ownerDocument),displacedHadFocus=focused===null||focused===this.ownerDocument.body||focused===displaced||composedContains(displaced,focused),next=navigable.find(item=>this.items.indexOf(item)>current)??navigable.find(item=>this.items.indexOf(item)<current);next?this.setActiveItem(next,displacedHadFocus):(this.activeIndex=-1,this.applyRovingTabIndex(),displacedHadFocus&&this.rehomeZeroSurvivorFocus());return}this.applyRovingTabIndex()},this.onListFocusIn=e=>{const target=e.target;if(!isLyraMenuItemElement(target))return;const index=this.items.indexOf(target);index===-1||index===this.activeIndex||(this.activeIndex=index,this.applyRovingTabIndex(),this.closeSubmenus(target))},this.onListKeyDown=e=>{if(this.isForeignEvent(e))return;const isItemTarget=isLyraMenuItemElement(e.target);if(e.key==="Escape"&&isItemTarget&&!this.hasStandalonePresentation){e.preventDefault(),this.closePresentation({focusTrigger:!0});return}if(!isItemTarget)return;const navigable=this.items.filter(i=>this.isNavigable(i)),current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentNavIndex=current?navigable.indexOf(current):-1,intoSubmenuKey=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight";switch(e.key){case"ArrowRight":case"ArrowLeft":e.key===intoSubmenuKey?current?.hasSubmenu&&this.isNavigable(current)&&(e.preventDefault(),this.closeSubmenus(current),current.openSubmenu("first")):this.submenuAnchor&&(e.preventDefault(),this.closePresentation({focusTrigger:!0}));break;case"ArrowDown":if(e.preventDefault(),navigable.length){const next=navigable[(currentNavIndex+1+navigable.length)%navigable.length];next&&this.setActiveItem(next)}break;case"ArrowUp":if(e.preventDefault(),navigable.length){const prevIndex=currentNavIndex<=0?navigable.length-1:currentNavIndex-1,prev=navigable[prevIndex];prev&&this.setActiveItem(prev)}break;case"Home":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[0]);break;case"End":e.preventDefault(),navigable.length&&this.setActiveItem(navigable[navigable.length-1]);break;case"Enter":case" ":e.preventDefault(),current?.hasSubmenu?(this.closeSubmenus(current),current.openSubmenu("first")):current?.isLinkItem?current.click():current?.select();break;default:e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&this.typeAhead(e.key);return}},this.onPopupPointerOver=e=>{if(!this.interactionOpen)return;const hovered=this.ownItemFromEvent(e);this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&opened===hovered?(this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuCloseTimer=void 0):opened&&this.scheduleSubmenuClose(opened),!(!hovered||hovered===opened||!hovered.hasSubmenu||!this.isNavigable(hovered))&&(this.submenuOpenTimer=this.scheduleOwnedTimeout(()=>{this.submenuOpenTimer=void 0,!(!this.interactionOpen||!this.items.includes(hovered))&&(this.closeSubmenus(hovered),hovered.openSubmenu("none"))},SUBMENU_OPEN_DELAY))},this.onPopupPointerLeave=()=>{this.clearOwnedTimeout(this.submenuOpenTimer),this.submenuOpenTimer=void 0;const opened=this.openSubmenuItem();opened&&this.scheduleSubmenuClose(opened)},this.onNestedSelect=e=>{if(e.target===this)return;const event=e;this.dropdownStayOpenOnSelect&&event.preventDefault(),queueMicrotask(()=>{event.defaultPrevented||this.dismissAfterSelection(!0)})},this.onPopupKeyDown=e=>{const listEl=this.popupPart("list");if(e.key==="Escape"){if(listEl&&e.composedPath().includes(listEl)||this.hasStandalonePresentation)return;e.preventDefault(),this.closePresentation({focusTrigger:!0});return}e.key==="Tab"&&this.tabWouldLeavePopup(e)&&this.closePresentation()}}static{_a=submenuPanelController}static{this.defaultStrings={...super.defaultStrings,menuLabel:LYRA_DEFAULT_menuLabel}}static{this.immutableEventDetails=Object.freeze(["lr-select"])}static{this.identityEventDetailProperties=Object.freeze({"lr-select":Object.freeze(["item"])})}static{this.styles=[LyraElement.styles,styles]}get dropdownOpen(){return this._dropdownOpen}set dropdownOpen(next){const normalized=!!next;if(normalized===this._dropdownOpen)return;const old=this._dropdownOpen;this._dropdownOpen=normalized,this.presentationOpen=normalized,this.requestUpdate("dropdownOpen",old)}createSubmenuController(){const menu=this;return{get open(){return menu.submenuAnchor!==null&&menu.presentationOpen},attach(anchor,onStateChange){menu.submenuAnchor&&menu.submenuAnchor!==anchor&&menu.closePresentation(),menu.submenuAnchor=anchor,menu.submenuStateChange=onStateChange,menu.syncPresentationState(),menu.requestUpdate()},detach(anchor){menu.submenuAnchor===anchor&&(menu.closePresentation(),menu.submenuAnchor=null,menu.submenuStateChange=null,menu.cleanup?.(),menu.cleanup=void 0,menu.syncPresentationState(),menu.requestUpdate())},async show(focus="first"){menu.submenuAnchor&&(menu.openPresentation(focus),await menu.updateComplete,await menu.focusAfterPlacement(focus))},async hide(options){menu.closePresentation(options),await menu.updateComplete}}}connectedCallback(){if(super.connectedCallback(),registerMenuWidthScale(),this.hasUpdated){const slot=this.renderRoot.querySelector("slot:not([name])");slot&&this.syncItemsFromSlot(slot)}}firstUpdated(changed){super.firstUpdated(changed),this.syncRegionState(),this.syncPresentationState();const slot=this.itemsSlot;queueMicrotask(()=>{collectInitialSlotAssignment(slot,s=>this.syncItemsFromSlot(s))})}get hasStandalonePresentation(){return!this.dropdownContained&&!this.submenuAnchor}get interactionOpen(){return this.hasStandalonePresentation||this.presentationOpen}syncPresentationState(){const standalone=this.hasStandalonePresentation;if(this.toggleAttribute("data-inline",standalone),this.toggleAttribute("data-submenu",this.submenuAnchor!==null),this.toggleAttribute("data-contained",this.dropdownContained),standalone){const active=this.activeIndex>=0?this.items[this.activeIndex]:void 0;if(!active||!this.isNavigable(active)){const first=this.items.find(item=>this.isNavigable(item));this.activeIndex=first?this.items.indexOf(first):-1}}else this.presentationOpen||(this.activeIndex=-1);this.applyRovingTabIndex()}syncRegionState(){const assigned=selector=>this.renderRoot.querySelector(selector)?.assignedElements({flatten:!0}).length??0;this.toggleAttribute("data-has-header",assigned('slot[name="header"]')>0),this.toggleAttribute("data-has-footer",assigned('slot[name="footer"]')>0),this.toggleAttribute("data-list-empty",assigned("slot:not([name])")===0)}willUpdate(changed){super.willUpdate(changed),this.presentationOpen&&this.submenuAnchor&&(this.cancelPresentationHideWatch(),this.presentationHidden=!1)}updated(changed){super.updated(changed);const list=this.renderRoot.querySelector('[part~="list"]')??void 0;syncAriaDescribedByElements(this,list,this.getAttribute("aria-describedby")),(changed.has("presentationOpen")||changed.has("dropdownOpen")||changed.has("dropdownContained"))&&(this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.presentationOpen?this.submenuAnchor?(this.bindDocumentPointer(),this.reposition()):(this.unbindDocumentPointer(),this.presentationPositioned=!0,this.focusRoving(this.pendingFocus)):(this.unbindDocumentPointer(),this.resetTypeAhead(),this.activeIndex=-1,this.applyRovingTabIndex(),this.clearSubmenuTimers(),this.closeSubmenus(),this.submenuAnchor&&this.schedulePresentationHide())),changed.has("dropdownContained")&&this.syncPresentationState(),changed.has("dropdownSize")&&this.applyDropdownSize()}reposition(){this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1;const popup=this.renderRoot.querySelector(".submenu-surface");if(this.submenuAnchor&&popup){const placement=rtlAwarePlacement(SUBMENU_PLACEMENT,this);this.cleanup=place(this.submenuAnchor,popup,{placement,strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")})}}cancelPresentationHideWatch(){this.presentationHideWatcher?.(),this.presentationHideWatcher=void 0}schedulePresentationHide(){this.cancelPresentationHideWatch();const surface=this.renderRoot.querySelector(".submenu-surface"),view=this.ownerDocument.defaultView,transitionMs=surface&&view?maxCssTime(view.getComputedStyle(surface).transitionDuration)+maxCssTime(view.getComputedStyle(surface).transitionDelay):0,waitForEvent=!!(surface&&view&&transitionMs>0&&!prefersReducedMotion(view));let settled=!1,timeout;const finish=()=>{settled||(settled=!0,timeout!==void 0&&view?.clearTimeout(timeout),surface?.removeEventListener("transitionend",onEnd),this.presentationHideWatcher===cancel&&(this.presentationHideWatcher=void 0),this.presentationHidden=!0)},onEnd=event=>{event.target===surface&&finish()},cancel=()=>{settled=!0,timeout!==void 0&&view?.clearTimeout(timeout),surface?.removeEventListener("transitionend",onEnd)};this.presentationHideWatcher=cancel,waitForEvent&&surface&&view?(surface.addEventListener("transitionend",onEnd),timeout=view.setTimeout(finish,transitionMs+50)):queueMicrotask(finish)}async focusAfterPlacement(focus){if(!this.presentationOpen||!this.submenuAnchor)return;const positioned=this.cleanup!==void 0&&(this.presentationPositioned||await waitForDeferredPlacement(()=>this.cleanup));if(!(!this.presentationOpen||!this.submenuAnchor)){if(!positioned){this.closePresentation(),await this.updateComplete;return}this.presentationPositioned=!0,this.focusRoving(focus)}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.presentationPositioned=!1,this.resetTypeAhead(),this.clearSubmenuTimers(),this.itemStateObserver?.disconnect(),this.itemStateObserver=void 0,this.unbindDocumentPointer();for(const item of this.items)this.releaseItemOwner(item);this._dropdownOpen=!1,this.presentationOpen=!1,this.cancelPresentationHideWatch(),this.presentationHidden=!0,this.submenuStateChange?.(!1)}bindDocumentPointer(){const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}scheduleOwnedTimeout(callback,delay){const owner=this.ownerDocument.defaultView;if(owner)return{owner,handle:owner.setTimeout(callback,delay)}}clearOwnedTimeout(timer){timer&&timer.owner.clearTimeout(timer.handle)}focusContained(focus="first"){if(this.dropdownContained&&this.dropdownOwner)if(this.dropdownOwner.open)this.pendingFocus=focus,this.focusRoving(focus);else{const transition=this.dropdownOwner.show();this.dropdownOwner.open&&(this.pendingFocus=focus)}}openPresentation(focus="first"){if(this.dropdownContained&&this.dropdownOwner){this.focusContained(focus);return}this.pendingFocus=focus,this.presentationOpen?(!this.submenuAnchor||this.presentationPositioned)&&this.focusRoving(focus):(this.presentationOpen=!0,this.submenuStateChange?.(!0))}closePresentation(options){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide(options);return}this.presentationOpen&&(this.presentationOpen=!1,this.submenuStateChange?.(!1),options?.focusTrigger&&this.submenuAnchor&&resolveAccessibleTrigger(this.submenuAnchor).focus())}syncItemsFromSlot(slot){const assigned=slot.assignedElements({flatten:!0}).filter(isLyraMenuItemElement);if(assigned.length===this.items.length&&assigned.every((item,index)=>item===this.items[index]))return;this.itemStateObserver?.disconnect();const previousItems=this.items,previouslyActive=this.activeIndex>=0?this.items[this.activeIndex]:void 0,focusedBefore=safeDeepActiveElement(this.ownerDocument),activeItemLostFocus=!!previouslyActive&&(focusedBefore===null||focusedBefore===this.ownerDocument.body||focusedBefore===previouslyActive||composedContains(previouslyActive,focusedBefore));this.items=assigned;for(const item of previousItems)this.items.includes(item)||this.releaseItemOwner(item);for(const item of this.items)this.acquireItemOwner(item);this.applyDropdownSize();const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;if(MutationObserverCtor){const owner=this.ownerDocument;let observer;observer=new MutationObserverCtor(()=>{this.itemStateObserver!==observer||this.ownerDocument!==owner||this.onItemStateChange()}),this.itemStateObserver=observer;for(const item of this.items)this.itemStateObserver.observe(item,{attributes:!0,attributeFilter:["disabled","hidden","aria-hidden","inert"]})}if(this.activeIndex=previouslyActive?this.items.indexOf(previouslyActive):-1,this.syncPresentationState(),this.syncRegionState(),this.interactionOpen)if(this.activeIndex===-1){const successor=this.items.find(item=>this.isNavigable(item));previouslyActive&&successor?this.setActiveItem(successor,activeItemLostFocus):this.focusRoving(this.pendingFocus),activeItemLostFocus&&!this.items.some(item=>this.isNavigable(item))&&this.rehomeZeroSurvivorFocus()}else{const active=activeElementIn(this.ownerDocument);!(isUsableActiveElement(active)&&this.contains(active))&&activeItemLostFocus&&this.items[this.activeIndex].focus()}}acquireItemOwner(item){item[menuItemOwner]?.(this.owningMenu)}releaseItemOwner(item){item[menuItemOwner]?.(null,this.owningMenu)}uncheckRadioGroupSiblings(item,group){for(const sibling of this.items)sibling!==item&&sibling.type==="radio"&&sibling.group===group&&sibling.checked&&(sibling.checked=!1)}isNavigable(item){return!item.interactionDisabled&&!item.hidden&&item.getAttribute("aria-hidden")!=="true"&&!item.inert&&!item.closest("[inert]")}applyDropdownSize(){if(this.dropdownSize)for(const item of this.items)item.size=this.dropdownSize}rehomeZeroSurvivorFocus(){if(this.dropdownContained&&this.dropdownOwner){this.dropdownOwner.hide({focusTrigger:!0});return}if(this.submenuAnchor){this.closePresentation({focusTrigger:!0});return}const list=this.renderRoot.querySelector('[part~="list"]');list&&(list.tabIndex=-1,list.focus({preventScroll:!0}))}onOwnedItemSelect(item){if(!isLyraMenuItemElement(item)||!this.items.includes(item))return;!this.emit("lr-select",{item},{cancelable:!0}).defaultPrevented&&!this.dropdownStayOpenOnSelect&&this.dismissAfterSelection(!0)}dismissAfterSelection(focusTrigger){this.closeSubmenus(),this.dropdownContained?this.dropdownOwner&&this.dropdownOwner.hide({focusTrigger}):this.submenuAnchor&&this.closePresentation({focusTrigger})}applyRovingTabIndex(){this.items.forEach((item,i)=>{item.tabIndex=i===this.activeIndex?0:-1})}focusRoving(which){if(which==="none")return;const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const item=which==="first"?navigable[0]:navigable[navigable.length-1];item&&this.setActiveItem(item)}setActiveItem(item,moveFocus=!0){this.activeIndex=this.items.indexOf(item),this.applyRovingTabIndex(),this.closeSubmenus(item),moveFocus&&item.focus()}closeSubmenus(keep){for(const item of this.items)item!==keep&&item.submenuOpen&&item.closeSubmenu()}openSubmenuItem(){return this.items.find(item=>item.submenuOpen)}clearSubmenuTimers(){this.clearOwnedTimeout(this.submenuOpenTimer),this.clearOwnedTimeout(this.submenuCloseTimer),this.submenuOpenTimer=void 0,this.submenuCloseTimer=void 0}ownItemFromEvent(e){let owner;for(const node of e.composedPath()){if(node===this)break;isLyraMenuItemElement(node)&&(owner=node)}return owner}isForeignEvent(e){for(const node of e.composedPath()){if(node===this)return!1;if(isLyraMenuElement(node))return!0}return!1}scheduleSubmenuClose(item){this.submenuCloseTimer||(this.submenuCloseTimer=this.scheduleOwnedTimeout(()=>{this.submenuCloseTimer=void 0,item.submenuOpen&&(composedContains(item,safeDeepActiveElement(this.ownerDocument))||item.closeSubmenu())},SUBMENU_CLOSE_DELAY))}popupPart(name){return this.renderRoot.querySelector(`[part="${name}"]`)}tabWouldLeavePopup(e){const header=this.popupPart("header"),footer=this.popupPart("footer"),listEl=this.popupPart("list"),backwards=e.shiftKey,active=safeDeepActiveElement(this.ownerDocument),headerStops=header?collectFocusableElements(header):[],footerStops=footer?collectFocusableElements(footer):[],listStops=listEl?collectFocusableElements(listEl):[],hasNeighbor=stops=>{const index=active?stops.indexOf(active):-1;return index===-1?!1:backwards?index>0:index<stops.length-1},path=e.composedPath();return footer&&path.includes(footer)?hasNeighbor(footerStops)?!1:backwards?listStops.length===0&&headerStops.length===0:!0:header&&path.includes(header)?hasNeighbor(headerStops)?!1:backwards?!0:listStops.length===0&&footerStops.length===0:!isLyraMenuItemElement(e.target)&&hasNeighbor(listStops)?!1:backwards?headerStops.length===0:footerStops.length===0}typeAhead(char){this.typeAheadReset.cancel(),this.typeAheadBuffer+=char.toLocaleLowerCase(this.effectiveLocale),this.ownerDocument.defaultView&&this.typeAheadReset.push(void 0);const navigable=this.items.filter(i=>this.isNavigable(i));if(!navigable.length)return;const current=this.activeIndex>=0?this.items[this.activeIndex]:void 0,currentIndex=current?navigable.indexOf(current):-1,n=navigable.length;for(let step=1;step<=n;step++){const candidate=navigable[(currentIndex+step+n)%n];if(candidate&&this.itemText(candidate).toLocaleLowerCase(this.effectiveLocale).startsWith(this.typeAheadBuffer)){this.setActiveItem(candidate);return}}}resetTypeAhead(){this.typeAheadReset.cancel(),this.typeAheadBuffer=""}itemText(item){return composedAccessibilityText(item).trim()}get effectiveLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label!==void 0?this.label:this.dropdownLabel!==void 0?this.dropdownLabel:this.localize("menuLabel")}renderContents(){return html`
       <div part="header">
         <slot name="header" @slotchange=${this.onRegionSlotChange}></slot>
       </div>
@@ -11,7 +11,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
         @focusin=${this.onListFocusIn}
         @pointerover=${this.onPopupPointerOver}
         @pointerleave=${this.onPopupPointerLeave}
-        @lr-menu-item-state-change=${this.onItemStateChange}
+        @lr-menu-item-state-change=${this.onItemStateChangeEvent}
         @lr-select=${this.onNestedSelect}
       >
         <slot @slotchange=${this.onItemsSlotChange}></slot>
@@ -22,10 +22,11 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
     `}render(){return this.submenuAnchor?html`
       <div
         class=${this.presentationOpen?"submenu-surface open":"submenu-surface"}
+        ?hidden=${this.presentationHidden}
         @keydown=${this.onPopupKeyDown}
         @pointerover=${this.onPopupPointerOver}
         @pointerleave=${this.onPopupPointerLeave}
       >
         ${this.renderContents()}
       </div>
-    `:this.renderContents()}}__decorate([state()],LyraMenu.prototype,"presentationOpen",void 0),__decorate([property()],LyraMenu.prototype,"label",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownContained",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownOpen",null),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownRendersMenuRole",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownStayOpenOnSelect",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownSize",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownLabel",void 0),__decorate([query("slot:not([name])")],LyraMenu.prototype,"itemsSlot",void 0);export{LyraMenu};
+    `:this.renderContents()}}__decorate([state()],LyraMenu.prototype,"presentationOpen",void 0),__decorate([state()],LyraMenu.prototype,"presentationHidden",void 0),__decorate([property()],LyraMenu.prototype,"label",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownContained",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownOpen",null),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownRendersMenuRole",void 0),__decorate([property({type:Boolean,attribute:!1})],LyraMenu.prototype,"dropdownStayOpenOnSelect",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownSize",void 0),__decorate([property({attribute:!1})],LyraMenu.prototype,"dropdownLabel",void 0),__decorate([query("slot:not([name])")],LyraMenu.prototype,"itemsSlot",void 0);export{LyraMenu};

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

@@ -1 +1 @@
-import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { box-sizing: border-box; display: flex; flex-direction: column; --_lr-menu-max-inline-size: var(--lr-menu-max-inline-size, var(--lr-size-20rem)); min-inline-size: var(--lr-menu-min-inline-size, var(--lr-size-10rem)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--_lr-menu-max-inline-size), 100% ); ${overlaySurface} } :host([data-contained]), :host([data-submenu]) { display: contents; min-inline-size: 0; max-inline-size: none; background: transparent; border: 0; } .submenu-surface { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; display: flex; flex-direction: column; --_lr-menu-max-inline-size: var(--lr-menu-max-inline-size, var(--lr-size-20rem)); min-inline-size: var(--lr-menu-min-inline-size, var(--lr-size-10rem)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--_lr-menu-max-inline-size), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: min( var(--lr-size-20rem), var(--lr-positioner-available-block-size, var(--lr-size-20rem)) ); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); translate: var(--_lr-menu-item-submenu-translation, 0) 0; transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } .submenu-surface.open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } @media (prefers-reduced-motion: reduce) { .submenu-surface { transition: none !important; } } [part='header'], [part='footer'] { flex: 0 0 auto; padding: var(--lr-space-xs); } :host(:not([data-has-header])) [part='header'], :host(:not([data-has-footer])) [part='footer'] { display: none; } :host(:not([data-list-empty])) [part='header'] { border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border); } :host(:not([data-list-empty])) [part='footer'] { border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); } [part='list'] { display: flex; flex-direction: column; flex: 0 1 auto; min-block-size: 0; max-block-size: min( var(--lr-size-20rem), var(--lr-positioner-available-block-size, var(--lr-size-20rem)) ); overflow-x: hidden; overflow-y: auto; padding: var(--lr-space-xs); outline: none; } ::slotted(hr) { border: none; border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); margin: var(--lr-space-xs) var(--lr-space-xs); } `;export{styles};
+import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { box-sizing: border-box; display: flex; flex-direction: column; --_lr-menu-max-inline-size: var(--lr-menu-max-inline-size, var(--lr-size-20rem)); min-inline-size: var(--lr-menu-min-inline-size, var(--lr-size-10rem)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--_lr-menu-max-inline-size), 100% ); ${overlaySurface} } :host([data-contained]), :host([data-submenu]) { display: contents; min-inline-size: 0; max-inline-size: none; background: transparent; border: 0; } .submenu-surface[hidden] { display: none; } .submenu-surface { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; display: flex; flex-direction: column; --_lr-menu-max-inline-size: var(--lr-menu-max-inline-size, var(--lr-size-20rem)); min-inline-size: var(--lr-menu-min-inline-size, var(--lr-size-10rem)); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--_lr-menu-max-inline-size), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: min( var(--lr-size-20rem), var(--lr-positioner-available-block-size, var(--lr-size-20rem)) ); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); translate: var(--_lr-menu-item-submenu-translation, 0) 0; transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } .submenu-surface.open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } @media (prefers-reduced-motion: reduce) { .submenu-surface { transition: none !important; } } [part='header'], [part='footer'] { flex: 0 0 auto; padding: var(--lr-space-xs); } :host(:not([data-has-header])) [part='header'], :host(:not([data-has-footer])) [part='footer'] { display: none; } :host(:not([data-list-empty])) [part='header'] { border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border); } :host(:not([data-list-empty])) [part='footer'] { border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); } [part='list'] { display: flex; flex-direction: column; flex: 0 1 auto; min-block-size: 0; max-block-size: min( var(--lr-size-20rem), var(--lr-positioner-available-block-size, var(--lr-size-20rem)) ); overflow-x: hidden; overflow-y: auto; padding: var(--lr-space-xs); outline: none; } ::slotted(hr) { border: none; border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); margin: var(--lr-space-xs) var(--lr-space-xs); } `;export{styles};

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

@@ -152,5 +152,11 @@ showNavigation():void;
 hideNavigation():void;
 /** Toggle mobile navigation. */
 toggleNavigation():void;
-/** Number of vertically visible CSS pixels for `element`, clamped to the current viewport. */
+/** Number of vertically visible CSS pixels for `element`, clamped to the current viewport. A
+*  deliberate owner-realm safety divergence from Web Awesome 3.11's `wa-page` equivalent: this
+*  always returns a finite `number` -- `0` for a `null` element, invalid geometry, no
+*  intersection, or an element in a detached document with no viewport -- where `wa-page`
+*  returns `null` for a `null` argument and measures detached-document geometry against the
+*  ambient page viewport. Code migrating from `wa-page` should treat this always-finite result
+*  as canonical. */
 visiblePixelsInViewport(element:HTMLElement|null):number;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-page':LyraPage;}}

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

@@ -78,7 +78,7 @@ private pendingReconciliation;private get directItemElements();private get itemE
 *  with no announcement, once that `value` is no longer present at all -- the host that removed
 *  or renamed the row already knows it did so. Otherwise leaves it pending for a later
 *  mutation. */
-private tryCompleteControlledReconciliation;private refreshItemObserver;private pendingMembershipIsCurrent;connectedCallback():void;protected willUpdate(changed:PropertyValues):void;disconnectedCallback():void;private orderValues;private scheduleFocusRestore;private restoreFocusAfterItemUpdate;
+private tryCompleteControlledReconciliation;private identityChangeReconciliationPending;private refreshItemObserver;private pendingMembershipIsCurrent;connectedCallback():void;protected willUpdate(changed:PropertyValues):void;disconnectedCallback():void;private orderValues;private scheduleFocusRestore;private restoreFocusAfterItemUpdate;
 /** Physically moves `item` (already known to belong at `toIndex`) and hands off to
 *  `finishMove()` for the boundary-recompute / focus-restore / announce steps every completed
 *  move shares, whether it just moved the DOM itself (this method) or is instead reconciling a

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

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

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

@@ -76,6 +76,8 @@ icon?:unknown;disabled?:boolean;}export interface LyraSegmentedEventMap{'lr-chan
 *   taken from the `size` tier's shared control font size.
 * @cssprop [--lr-segmented-track-gap=var(--lr-size-0-125rem)] - Gap between segments.
 * @cssprop [--lr-segmented-track-radius=var(--lr-radius)] - Track corner radius.
+* @cssprop [--lr-segmented-segment-radius=calc(var(--lr-form-control-radius) * 0.7)] - Each
+*   segment's own corner radius, independent of the track's.
 * @cssprop [--lr-segmented-track-padding=var(--lr-size-0-125rem)] - Track inset padding.
 * @cssprop [--lr-segmented-track-bg=transparent] - Background of the `base` track. Undeclared by
 *   default, matching its own current absence of a background.

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-segmented-track-min-height:var(--lr-form-control-height);--_lr-segmented-segment-padding:var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline);--_lr-segmented-font-size:var(--lr-form-control-font-size);min-inline-size:0;max-inline-size:100%;display:inline-flex}[part=base]{min-inline-size:0;min-block-size:var(--lr-segmented-track-height,var(--lr-segmented-track-min-height,var(--_lr-segmented-track-min-height)));block-size:var(--lr-segmented-track-height,auto);box-sizing:border-box;background:var(--lr-segmented-track-bg,transparent);border:var(--lr-border-width-thin) solid var(--lr-segmented-track-border-color,var(--lr-color-border));border-radius:var(--lr-segmented-track-radius,var(--lr-radius));padding:var(--lr-segmented-track-padding,var(--lr-size-0-125rem));gap:var(--lr-segmented-track-gap,var(--lr-size-0-125rem));flex-wrap:nowrap;display:inline-flex;overflow:auto hidden}[part=base][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=base][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=base][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),:host(:dir(rtl)) [part=base][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque));mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque))}:host(:dir(rtl)) [part=base][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=segment]{border-radius:calc(var(--lr-form-control-radius) * .7);min-inline-size:0;color:var(--lr-color-text-quiet);font:inherit;font-size:var(--lr-segmented-font-size,var(--_lr-segmented-font-size));padding:var(--lr-segmented-segment-padding,var(--_lr-segmented-segment-padding));cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:none}:host([size="2xs"]) [part=segment],:host([size=xs]) [part=segment]{min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem)}[part=segment-icon]{block-size:var(--lr-size-1em);max-inline-size:var(--lr-size-2-5rem);align-items:center;margin-inline-end:var(--lr-space-xs);display:inline-flex}[part=segment][aria-disabled=true]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}:where([part=segment]):hover:where(:not([aria-disabled=true]):not([aria-checked=true])){color:var(--lr-segmented-hover-color,var(--lr-color-text));background:var(--lr-segmented-hover-bg,transparent);box-shadow:var(--lr-segmented-hover-shadow,none)}:where([part=segment]):active:where(:not([aria-disabled=true]):not([aria-checked=true])){background:var(--lr-segmented-active-bg,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-segmented-active-color,var(--lr-segmented-hover-color,var(--lr-color-text)))}[part=segment]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=segment][aria-checked=true]{background:var(--lr-segmented-selected-bg,var(--lr-color-surface));color:var(--lr-segmented-selected-color,var(--lr-color-text));font-weight:var(--lr-segmented-selected-font-weight,var(--lr-font-weight-semibold));box-shadow:var(--lr-segmented-selected-shadow,var(--lr-shadow-xs))}@media (forced-colors:active){[part=base][data-scroll-overflow],:host(:dir(rtl)) [part=base][data-scroll-overflow]{-webkit-mask-image:none;mask-image:none}}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-segmented-track-min-height:var(--lr-form-control-height);--_lr-segmented-segment-padding:var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline);--_lr-segmented-font-size:var(--lr-form-control-font-size);min-inline-size:0;max-inline-size:100%;display:inline-flex}[part=base]{min-inline-size:0;min-block-size:var(--lr-segmented-track-height,var(--lr-segmented-track-min-height,var(--_lr-segmented-track-min-height)));block-size:var(--lr-segmented-track-height,auto);box-sizing:border-box;background:var(--lr-segmented-track-bg,transparent);border:var(--lr-border-width-thin) solid var(--lr-segmented-track-border-color,var(--lr-color-border));border-radius:var(--lr-segmented-track-radius,var(--lr-radius));padding:var(--lr-segmented-track-padding,var(--lr-size-0-125rem));gap:var(--lr-segmented-track-gap,var(--lr-size-0-125rem));flex-wrap:nowrap;display:inline-flex;overflow:auto hidden}[part=base][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=base][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=base][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),:host(:dir(rtl)) [part=base][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque));mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque))}:host(:dir(rtl)) [part=base][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=segment]{border-radius:var(--lr-segmented-segment-radius,calc(var(--lr-form-control-radius) * .7));min-inline-size:0;color:var(--lr-color-text-quiet);font:inherit;font-size:var(--lr-segmented-font-size,var(--_lr-segmented-font-size));padding:var(--lr-segmented-segment-padding,var(--_lr-segmented-segment-padding));cursor:pointer;transition:background-color var(--lr-transition-fast), color var(--lr-transition-fast);background:0 0;border:none}:host([size="2xs"]) [part=segment],:host([size=xs]) [part=segment]{min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem)}[part=segment-icon]{block-size:var(--lr-size-1em);max-inline-size:var(--lr-size-2-5rem);align-items:center;margin-inline-end:var(--lr-space-xs);display:inline-flex}[part=segment][aria-disabled=true]{opacity:var(--lr-opacity-disabled);cursor:not-allowed}:where([part=segment]):hover:where(:not([aria-disabled=true]):not([aria-checked=true])){color:var(--lr-segmented-hover-color,var(--lr-color-text));background:var(--lr-segmented-hover-bg,transparent);box-shadow:var(--lr-segmented-hover-shadow,none)}:where([part=segment]):active:where(:not([aria-disabled=true]):not([aria-checked=true])){background:var(--lr-segmented-active-bg,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-segmented-active-color,var(--lr-segmented-hover-color,var(--lr-color-text)))}[part=segment]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=segment][aria-checked=true]{background:var(--lr-segmented-selected-bg,var(--lr-color-surface));color:var(--lr-segmented-selected-color,var(--lr-color-text));font-weight:var(--lr-segmented-selected-font-weight,var(--lr-font-weight-semibold));box-shadow:var(--lr-segmented-selected-shadow,var(--lr-shadow-xs))}@media (forced-colors:active){[part=base][data-scroll-overflow],:host(:dir(rtl)) [part=base][data-scroll-overflow]{-webkit-mask-image:none;mask-image:none}}`;export{styles};

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-virtual-list-height:var(--lr-size-24rem);min-inline-size:0;display:block}[part=base]{min-inline-size:0;block-size:var(--lr-virtual-list-height,var(--_lr-virtual-list-height));overscroll-behavior:contain;scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);position:relative;overflow:auto}[part=base][data-external-scroll]{block-size:auto;overflow:visible}[part=base]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=base]:hover{outline-width:var(--lr-virtual-list-hover-outline-width,var(--lr-border-width-thin));outline-style:var(--lr-virtual-list-hover-outline-style,solid);outline-color:var(--lr-virtual-list-hover-outline-color,var(--lr-color-border-strong));outline-offset:var(--lr-virtual-list-hover-outline-offset,calc(-1 * var(--lr-border-width-thin)))}[part=base][data-external-scroll]:hover{outline-style:none}[part=spacer]{inline-size:100%;min-inline-size:0;position:relative}[part=row]{box-sizing:border-box;overflow-wrap:anywhere;will-change:transform;inline-size:100%;min-inline-size:0;position:absolute;inset-block-start:0;inset-inline-start:0}[part=row]:where(:focus-within,:has(lr-dropdown[open])){z-index:var(--lr-layer-content)}[part=row] [part~=row-excerpt] mark{background:var(--lr-thread-list-excerpt-highlight-background,var(--lr-color-warning-quiet));color:var(--lr-thread-list-excerpt-highlight-foreground,inherit);border-radius:var(--lr-thread-list-excerpt-highlight-radius,var(--lr-radius-xs));padding:var(--lr-thread-list-excerpt-highlight-padding,0)}[part=group]{z-index:var(--lr-layer-content);padding:var(--lr-space-xs) var(--lr-space-s);background:var(--lr-color-surface);color:var(--lr-color-text-quiet);font-size:var(--lr-size-0-875em);font-weight:var(--lr-font-weight-semibold);pointer-events:none;position:absolute;inset-block-start:0;inset-inline:0}[part=sticky-group]{z-index:var(--lr-layer-content);pointer-events:none;position:sticky;inset-block-start:0}[part=sticky-group][data-inactive]{visibility:hidden}:host([loading]) [part=base]{cursor:progress}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-virtual-list-height:var(--lr-size-24rem);min-inline-size:0;display:block}[part=base]{min-inline-size:0;block-size:var(--lr-virtual-list-height,var(--_lr-virtual-list-height));overscroll-behavior:contain;scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);position:relative;overflow:auto}[part=base][data-external-scroll]{block-size:auto;overflow:visible}[part=base]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=base]:hover{outline-width:var(--lr-virtual-list-hover-outline-width,var(--lr-border-width-thin));outline-style:var(--lr-virtual-list-hover-outline-style,solid);outline-color:var(--lr-virtual-list-hover-outline-color,var(--lr-color-border-strong));outline-offset:var(--lr-virtual-list-hover-outline-offset,calc(-1 * var(--lr-border-width-thin)))}[part=base][data-external-scroll]:hover{outline-style:none}[part=spacer]{inline-size:100%;min-inline-size:0;position:relative}[part=row]{box-sizing:border-box;overflow-wrap:anywhere;will-change:transform;inline-size:100%;min-inline-size:0;position:absolute;inset-block-start:0;inset-inline-start:0}[part=row]:where(:focus-within,:has(lr-dropdown[open])){z-index:var(--lr-layer-content)}[part=row] [part~=row-excerpt] mark{background:var(--lr-thread-list-excerpt-highlight-background,var(--lr-color-warning-quiet));color:var(--lr-thread-list-excerpt-highlight-foreground,inherit);border-radius:var(--lr-thread-list-excerpt-highlight-radius,var(--lr-radius-xs));padding:var(--lr-thread-list-excerpt-highlight-padding,0)}[part=row] [part~=entry-text] a:where(:any-link){color:var(--lr-activity-feed-entry-text-link-color,var(--lr-color-brand))}[part=group]{z-index:var(--lr-layer-content);padding:var(--lr-space-xs) var(--lr-space-s);background:var(--lr-color-surface);color:var(--lr-color-text-quiet);font-size:var(--lr-size-0-875em);font-weight:var(--lr-font-weight-semibold);pointer-events:none;position:absolute;inset-block-start:0;inset-inline:0}[part=sticky-group]{z-index:var(--lr-layer-content);pointer-events:none;position:sticky;inset-block-start:0}[part=sticky-group][data-inactive]{visibility:hidden}:host([loading]) [part=base]{cursor:progress}`;export{styles};

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

@@ -58,8 +58,9 @@ ariaLabel?:string;}export interface LyraWidgetEventMap{'lr-collapse-request':Cus
 *   Call `preventDefault()` to leave `activeViewId` unchanged. Not fired when a consumer sets
 *   `activeViewId` directly. `detail: { viewId }`.
 * @event lr-view-change - Non-cancelable post-commit notification, fired after a header
-*   view-toggle click accepts the change. Not fired when a consumer sets `activeViewId` directly.
-*   `detail: { viewId }`.
+*   view-toggle click accepts the change. Also fires when a `views` reassignment drops the
+*   currently-active view, forcing a fallback to the first remaining view. Not fired when a
+*   consumer sets `activeViewId` directly, even to a now-invalid id. `detail: { viewId }`.
 * @event lr-activate - Fired on every accepted header view-toggle activation, whether or not
 *   `activeViewId` actually moved. `detail: { value }` carries the activated view's `viewId`.
 *   Bubbling and composed, so a host outside the shadow tree receives it. Not cancelable:
@@ -100,6 +101,18 @@ ariaLabel?:string;}export interface LyraWidgetEventMap{'lr-collapse-request':Cus
 *   view toggle.
 * @cssprop [--lr-widget-view-toggle-active-border-color=transparent] - Border color of the pressed
 *   view toggle. Like the active background and text hooks, it is an inline inherited fallback.
+* @cssprop [--lr-widget-collapse-button-hover-bg=var(--lr-color-brand-quiet)] - Background of a
+*   hovered `[part="collapse-button"]`. The pressed state mixes from this same token, mirroring
+*   `--lr-widget-view-toggle-hover-bg`, so retinting it alone does not hijack the library-wide
+*   `--lr-color-brand-quiet` token.
+* @cssprop [--lr-widget-collapse-button-hover-color=var(--lr-color-brand)] - Text color of a
+*   hovered or pressed `[part="collapse-button"]`.
+* @cssprop [--lr-widget-fullscreen-button-hover-bg=var(--lr-color-brand-quiet)] - Background of a
+*   hovered `[part="fullscreen-button"]`. The pressed state mixes from this same token, mirroring
+*   `--lr-widget-view-toggle-hover-bg`, so retinting it alone does not hijack the library-wide
+*   `--lr-color-brand-quiet` token.
+* @cssprop [--lr-widget-fullscreen-button-hover-color=var(--lr-color-brand)] - Text color of a
+*   hovered or pressed `[part="fullscreen-button"]`.
 * @cssprop [--lr-widget-fullscreen-inset=max(var(--lr-space-l), var(--lr-safe-area-top)) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start))] - The `inset` applied to `[part="base"]` while `fullscreen`. Also set inline from the `fullscreen-inset` attribute.
 * @cssprop [--lr-widget-backdrop-inset=0] - The `inset` applied to
 *   `[part="backdrop"]`, so the scrim can be pulled back independently of the panel. Also set

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

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{activateOverlay,collectFocusableElements,deepActiveElement}from"../../../internal/overlay-manager.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{nextId}from"../../../internal/a11y.js";import{bindAccessibleTextObserver,composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{chevronIcon,closeIcon,expandIcon}from"../../../internal/icons.js";import{styles}from"./widget.styles.js";import{sanitizeCssInset}from"../../../internal/safe-css.js";import{LYRA_DEFAULT_widgetCollapse,LYRA_DEFAULT_widgetExitFullscreen,LYRA_DEFAULT_widgetExpand,LYRA_DEFAULT_widgetExpandToFullscreen,LYRA_DEFAULT_widgetFullscreenPanel,LYRA_DEFAULT_widgetViewGroup}from"../../../internal/default-strings.generated.js";const MAX_WIDGET_VIEWS=256;function snapshotWidgetViews(value){if(!Array.isArray(value))return Object.freeze([]);const seen=new Set,normalized=[];for(const candidate of value.slice(0,MAX_WIDGET_VIEWS))try{if(!candidate||typeof candidate!="object")continue;const record=candidate,viewId=record.viewId;if(typeof viewId!="string"||viewId.length===0||viewId!==viewId.trim()||seen.has(viewId))continue;const label=record.label,ariaLabel=record.ariaLabel,icon=record.icon;if(label!==void 0&&typeof label!="string"||ariaLabel!==void 0&&typeof ariaLabel!="string")continue;seen.add(viewId),normalized.push(Object.freeze({viewId,...label!==void 0?{label}:{},...icon!==void 0?{icon}:{},...ariaLabel!==void 0?{ariaLabel}:{}}))}catch{}return Object.freeze(normalized)}function installSynchronousCollapsedReflection(prototype){const installed=Object.getOwnPropertyDescriptor(prototype,"collapsed"),installedSet=installed.set;Object.defineProperty(prototype,"collapsed",{...installed,set(next){installedSet.call(this,next),this.toggleAttribute("collapsed",this.collapsed)}})}class LyraWidget extends LyraElement{constructor(){super(...arguments),this.actionsScrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="actions"]')),this.viewTogglesScrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="view-toggles"]')),this.label="",this.accessibleLabel=null,this.sublabel="",this.collapsible=!1,this.expandable=!1,this.fullscreen=!1,this.fullscreenInset="",this.backdropInset="",this.compact=!1,this.effectiveViews=Object.freeze([]),this.activeViewId="",this.hasActionsSlot=!1,this.hasIconSlot=!1,this.hasLabelSlot=!1,this.hasSublabelSlot=!1,this.labelSlotObserverGeneration=0,this.ownerRealmGeneration=0,this.bodyId=nextId("widget-body"),this.persistReady=!1,this.onActionsSlotChange=e=>{this.hasActionsSlot=e.target.assignedElements({flatten:!0}).length>0},this.onIconSlotChange=e=>{this.hasIconSlot=e.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=e=>{const assigned=e.target.assignedElements({flatten:!0});this.syncLabelSlot(assigned)},this.onSublabelSlotChange=e=>{this.hasSublabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.setActiveView=viewId=>{if(viewId!==this.activeViewId){if(this.emit("lr-view-request",{viewId},{cancelable:!0}).defaultPrevented)return;this.activeViewId=viewId,this.emit("lr-view-change",{viewId})}this.emit("lr-activate",{value:viewId})},this.toggleCollapsed=()=>{this.requestCollapse(!this.collapsed)},this.toggleFullscreen=e=>{const next=!this.fullscreen,trigger=e.currentTarget;this.requestFullscreenChange(next)&&next&&(this.explicitTrigger=trigger)},this.dismissFullscreen=()=>{this.fullscreen&&this.requestFullscreenChange(!1)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()}}static{this.defaultStrings={...super.defaultStrings,widgetCollapse:LYRA_DEFAULT_widgetCollapse,widgetExitFullscreen:LYRA_DEFAULT_widgetExitFullscreen,widgetExpand:LYRA_DEFAULT_widgetExpand,widgetExpandToFullscreen:LYRA_DEFAULT_widgetExpandToFullscreen,widgetFullscreenPanel:LYRA_DEFAULT_widgetFullscreenPanel,widgetViewGroup:LYRA_DEFAULT_widgetViewGroup}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={collapsed:{type:Boolean,reflect:!0,noAccessor:!0}}}static{definePersistedProperty(this.prototype,"collapsed",{initial:!1,attribute:!0,type:Boolean,reflect:!0,coerce:next=>!!next}),installSynchronousCollapsedReflection(this.prototype)}get views(){return this.effectiveViews}set views(value){const previous=this.effectiveViews;this.effectiveViews=snapshotWidgetViews(value),this.requestUpdate("views",previous)}get storageFullKey(){return this.storageKey?`lr-widget:${this.storageKey}`:void 0}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated){this.hasActionsSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="actions"),this.hasIconSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="icon");const labelChildren=Array.from(this.children).filter(el=>el.getAttribute("slot")==="label");this.hasLabelSlot=labelChildren.length>0,this.labelSlotText=this.readLabelSlotText(labelChildren),this.hasSublabelSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="sublabel");const parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);parsed&&typeof parsed.collapsed=="boolean"&&!isPersistedPropertyExplicitlySet(this,"collapsed")&&(this.collapsed=parsed.collapsed)}if(changed.has("fullscreen")&&(this.fullscreen?this.activateFullscreenOverlay():this.deactivateFullscreenOverlay()),changed.has("views")||changed.has("activeViewId")){const focused=this.renderRoot?.querySelector('[part="view-toggle"]:focus');this.focusedViewIdBeforeUpdate=focused?.dataset.viewId;const views=this.views;views.some(view=>view.viewId===this.activeViewId)||(this.activeViewId=views[0]?.viewId??"")}}updated(changed){super.updated(changed);const actionsSlot=this.renderRoot.querySelector('slot[name="actions"]');if(this.actionsScrollOverflow.observeExtra(actionsSlot?actionsSlot.assignedElements({flatten:!0}):[]),this.viewTogglesScrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="view-toggle"]')),this.persistReady&&changed.has("collapsed")&&writePersistedState(this.storageFullKey,{collapsed:this.collapsed}),this.persistReady=!0,changed.has("fullscreen")&&this.fullscreen)this.overlayHandle?.focusInitial();else if(changed.has("collapsed")&&this.fullscreen){const panel=this.shadowRoot?.querySelector('[part="base"]'),active=deepActiveElement(this.ownerDocument);panel&&!collectFocusableElements(panel).includes(active)&&(active&&typeof active.blur=="function"&&active.blur(),this.overlayHandle?.focusInitial())}if(changed.has("views")||changed.has("activeViewId")){const focusedId=this.focusedViewIdBeforeUpdate;this.focusedViewIdBeforeUpdate=void 0,focusedId&&!this.views.some(view=>view.viewId===focusedId)&&Array.from(this.renderRoot.querySelectorAll('[part="view-toggle"]')).find(toggle=>toggle.dataset.viewId===this.activeViewId)?.focus()}}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.fullscreen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateFullscreenOverlay(),this.queueOwnerMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&this.queueOwnerMicrotask(()=>{const slot=this.shadowRoot?.querySelector('slot[name="label"]');slot&&this.syncLabelSlot(slot.assignedElements({flatten:!0}))})}disconnectedCallback(){super.disconnectedCallback(),this.overlayHandle?.suspend(),this.resetOwnerRealmWork()}adoptedCallback(){super.adoptedCallback(),this.resetOwnerRealmWork()}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.resetLabelSlotObserver()}queueOwnerMicrotask(callback){const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration;ownerWindow.queueMicrotask(()=>{this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||callback()})}activateFullscreenOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="base"]')??null,onEscape:this.dismissFullscreen,onBackdrop:this.dismissFullscreen,restoreFocusTo:this.explicitTrigger,lockScroll:!0,suspendWhenUnrendered:!0}),this.explicitTrigger=void 0}deactivateFullscreenOverlay(){this.overlayHandle?.deactivate(),this.overlayHandle=void 0}syncLabelSlot(assigned){if(this.hasLabelSlot=assigned.length>0,this.labelSlotText=this.readLabelSlotText(assigned),this.resetLabelSlotObserver(),assigned.length===0||!this.isConnected)return;const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.labelSlotObserverGeneration,observer=new MutationObserverCtor(()=>{this.labelSlotObserver!==observer||this.labelSlotObserverDocument!==ownerDocument||this.labelSlotObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.labelSlotText=this.readLabelSlotText(assigned))});this.labelSlotObserver=observer,this.labelSlotObserverDocument=ownerDocument,bindAccessibleTextObserver(observer,this,["alt","aria-labelledby","slot"]);for(const element of assigned)observer.observe(element,{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","aria-labelledby","class","hidden","inert","style"],childList:!0,characterData:!0,subtree:!0})}readLabelSlotText(assigned){return composedAccessibilityText(assigned).replace(/\s+/g," ").trim()||void 0}resetLabelSlotObserver(){this.labelSlotObserverGeneration+=1,this.labelSlotObserver?.disconnect(),this.labelSlotObserver=void 0,this.labelSlotObserverDocument=void 0}requestCollapse(next){this.emit("lr-collapse-request",{collapsed:next},{cancelable:!0}).defaultPrevented||(this.collapsed=next,this.emit("lr-collapse-change",{collapsed:next}))}requestFullscreenChange(next){return this.emit("lr-fullscreen-request",{fullscreen:next},{cancelable:!0}).defaultPrevented?!1:(this.fullscreen=next,this.emit("lr-fullscreen-change",{fullscreen:next}),!0)}render(){const hasLabel=(this.label??"").length>0,hasSublabel=(this.sublabel??"").length>0,views=this.views,fullscreenInset=sanitizeCssInset(this.fullscreenInset),backdropInset=sanitizeCssInset(this.backdropInset);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{activateOverlay,collectFocusableElements,deepActiveElement}from"../../../internal/overlay-manager.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{definePersistedProperty,isPersistedPropertyExplicitlySet}from"../../../internal/persisted-restore.js";import{nextId}from"../../../internal/a11y.js";import{bindAccessibleTextObserver,composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{chevronIcon,closeIcon,expandIcon}from"../../../internal/icons.js";import{styles}from"./widget.styles.js";import{sanitizeCssInset}from"../../../internal/safe-css.js";import{LYRA_DEFAULT_widgetCollapse,LYRA_DEFAULT_widgetExitFullscreen,LYRA_DEFAULT_widgetExpand,LYRA_DEFAULT_widgetExpandToFullscreen,LYRA_DEFAULT_widgetFullscreenPanel,LYRA_DEFAULT_widgetViewGroup}from"../../../internal/default-strings.generated.js";const MAX_WIDGET_VIEWS=256;function snapshotWidgetViews(value){if(!Array.isArray(value))return Object.freeze([]);const seen=new Set,normalized=[];for(const candidate of value.slice(0,MAX_WIDGET_VIEWS))try{if(!candidate||typeof candidate!="object")continue;const record=candidate,viewId=record.viewId;if(typeof viewId!="string"||viewId.length===0||viewId!==viewId.trim()||seen.has(viewId))continue;const label=record.label,ariaLabel=record.ariaLabel,icon=record.icon;if(label!==void 0&&typeof label!="string"||ariaLabel!==void 0&&typeof ariaLabel!="string")continue;seen.add(viewId),normalized.push(Object.freeze({viewId,...label!==void 0?{label}:{},...icon!==void 0?{icon}:{},...ariaLabel!==void 0?{ariaLabel}:{}}))}catch{}return Object.freeze(normalized)}function installSynchronousCollapsedReflection(prototype){const installed=Object.getOwnPropertyDescriptor(prototype,"collapsed"),installedSet=installed.set;Object.defineProperty(prototype,"collapsed",{...installed,set(next){installedSet.call(this,next),this.toggleAttribute("collapsed",this.collapsed)}})}class LyraWidget extends LyraElement{constructor(){super(...arguments),this.actionsScrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="actions"]')),this.viewTogglesScrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part="view-toggles"]')),this.label="",this.accessibleLabel=null,this.sublabel="",this.collapsible=!1,this.expandable=!1,this.fullscreen=!1,this.fullscreenInset="",this.backdropInset="",this.compact=!1,this.effectiveViews=Object.freeze([]),this.activeViewId="",this.hasActionsSlot=!1,this.hasIconSlot=!1,this.hasLabelSlot=!1,this.hasSublabelSlot=!1,this.labelSlotObserverGeneration=0,this.ownerRealmGeneration=0,this.bodyId=nextId("widget-body"),this.persistReady=!1,this.onActionsSlotChange=e=>{this.hasActionsSlot=e.target.assignedElements({flatten:!0}).length>0},this.onIconSlotChange=e=>{this.hasIconSlot=e.target.assignedElements({flatten:!0}).length>0},this.onLabelSlotChange=e=>{const assigned=e.target.assignedElements({flatten:!0});this.syncLabelSlot(assigned)},this.onSublabelSlotChange=e=>{this.hasSublabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.setActiveView=viewId=>{if(viewId!==this.activeViewId){if(this.emit("lr-view-request",{viewId},{cancelable:!0}).defaultPrevented)return;this.activeViewId=viewId,this.emit("lr-view-change",{viewId})}this.emit("lr-activate",{value:viewId})},this.toggleCollapsed=()=>{this.requestCollapse(!this.collapsed)},this.toggleFullscreen=e=>{const next=!this.fullscreen,trigger=e.currentTarget;this.requestFullscreenChange(next)&&next&&(this.explicitTrigger=trigger)},this.dismissFullscreen=()=>{this.fullscreen&&this.requestFullscreenChange(!1)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()}}static{this.defaultStrings={...super.defaultStrings,widgetCollapse:LYRA_DEFAULT_widgetCollapse,widgetExitFullscreen:LYRA_DEFAULT_widgetExitFullscreen,widgetExpand:LYRA_DEFAULT_widgetExpand,widgetExpandToFullscreen:LYRA_DEFAULT_widgetExpandToFullscreen,widgetFullscreenPanel:LYRA_DEFAULT_widgetFullscreenPanel,widgetViewGroup:LYRA_DEFAULT_widgetViewGroup}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={collapsed:{type:Boolean,reflect:!0,noAccessor:!0}}}static{definePersistedProperty(this.prototype,"collapsed",{initial:!1,attribute:!0,type:Boolean,reflect:!0,coerce:next=>!!next}),installSynchronousCollapsedReflection(this.prototype)}get views(){return this.effectiveViews}set views(value){const previous=this.effectiveViews;this.effectiveViews=snapshotWidgetViews(value),this.requestUpdate("views",previous)}get storageFullKey(){return this.storageKey?`lr-widget:${this.storageKey}`:void 0}willUpdate(changed){if(super.willUpdate(changed),!this.hasUpdated){this.hasActionsSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="actions"),this.hasIconSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="icon");const labelChildren=Array.from(this.children).filter(el=>el.getAttribute("slot")==="label");this.hasLabelSlot=labelChildren.length>0,this.labelSlotText=this.readLabelSlotText(labelChildren),this.hasSublabelSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="sublabel");const parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);parsed&&typeof parsed.collapsed=="boolean"&&!isPersistedPropertyExplicitlySet(this,"collapsed")&&(this.collapsed=parsed.collapsed)}if(changed.has("fullscreen")&&(this.fullscreen?this.activateFullscreenOverlay():this.deactivateFullscreenOverlay()),changed.has("views")||changed.has("activeViewId")){const focused=this.renderRoot?.querySelector('[part="view-toggle"]:focus');this.focusedViewIdBeforeUpdate=focused?.dataset.viewId;const views=this.views;if(!views.some(view=>view.viewId===this.activeViewId)){const forcedBySibling=this.hasUpdated&&changed.has("views")&&!changed.has("activeViewId");this.activeViewId=views[0]?.viewId??"",forcedBySibling&&this.emit("lr-view-change",{viewId:this.activeViewId})}}}updated(changed){super.updated(changed);const actionsSlot=this.renderRoot.querySelector('slot[name="actions"]');if(this.actionsScrollOverflow.observeExtra(actionsSlot?actionsSlot.assignedElements({flatten:!0}):[]),this.viewTogglesScrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="view-toggle"]')),this.persistReady&&changed.has("collapsed")&&writePersistedState(this.storageFullKey,{collapsed:this.collapsed}),this.persistReady=!0,changed.has("fullscreen")&&this.fullscreen)this.overlayHandle?.focusInitial();else if(changed.has("collapsed")&&this.fullscreen){const panel=this.shadowRoot?.querySelector('[part="base"]'),active=deepActiveElement(this.ownerDocument);panel&&!collectFocusableElements(panel).includes(active)&&(active&&typeof active.blur=="function"&&active.blur(),this.overlayHandle?.focusInitial())}if(changed.has("views")||changed.has("activeViewId")){const focusedId=this.focusedViewIdBeforeUpdate;this.focusedViewIdBeforeUpdate=void 0,focusedId&&!this.views.some(view=>view.viewId===focusedId)&&Array.from(this.renderRoot.querySelectorAll('[part="view-toggle"]')).find(toggle=>toggle.dataset.viewId===this.activeViewId)?.focus()}}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.fullscreen&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateFullscreenOverlay(),this.queueOwnerMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&this.queueOwnerMicrotask(()=>{const slot=this.shadowRoot?.querySelector('slot[name="label"]');slot&&this.syncLabelSlot(slot.assignedElements({flatten:!0}))})}disconnectedCallback(){super.disconnectedCallback(),this.overlayHandle?.suspend(),this.resetOwnerRealmWork()}adoptedCallback(){super.adoptedCallback(),this.resetOwnerRealmWork()}resetOwnerRealmWork(){this.ownerRealmGeneration+=1,this.resetLabelSlotObserver()}queueOwnerMicrotask(callback){const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow||!this.isConnected)return;const generation=this.ownerRealmGeneration;ownerWindow.queueMicrotask(()=>{this.ownerRealmGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||callback()})}activateFullscreenOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="base"]')??null,onEscape:this.dismissFullscreen,onBackdrop:this.dismissFullscreen,restoreFocusTo:this.explicitTrigger,lockScroll:!0,suspendWhenUnrendered:!0}),this.explicitTrigger=void 0}deactivateFullscreenOverlay(){this.overlayHandle?.deactivate(),this.overlayHandle=void 0}syncLabelSlot(assigned){if(this.hasLabelSlot=assigned.length>0,this.labelSlotText=this.readLabelSlotText(assigned),this.resetLabelSlotObserver(),assigned.length===0||!this.isConnected)return;const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.labelSlotObserverGeneration,observer=new MutationObserverCtor(()=>{this.labelSlotObserver!==observer||this.labelSlotObserverDocument!==ownerDocument||this.labelSlotObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||(this.labelSlotText=this.readLabelSlotText(assigned))});this.labelSlotObserver=observer,this.labelSlotObserverDocument=ownerDocument,bindAccessibleTextObserver(observer,this,["alt","aria-labelledby","slot"]);for(const element of assigned)observer.observe(element,{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","aria-labelledby","class","hidden","inert","style"],childList:!0,characterData:!0,subtree:!0})}readLabelSlotText(assigned){return composedAccessibilityText(assigned).replace(/\s+/g," ").trim()||void 0}resetLabelSlotObserver(){this.labelSlotObserverGeneration+=1,this.labelSlotObserver?.disconnect(),this.labelSlotObserver=void 0,this.labelSlotObserverDocument=void 0}requestCollapse(next){this.emit("lr-collapse-request",{collapsed:next},{cancelable:!0}).defaultPrevented||(this.collapsed=next,this.emit("lr-collapse-change",{collapsed:next}))}requestFullscreenChange(next){return this.emit("lr-fullscreen-request",{fullscreen:next},{cancelable:!0}).defaultPrevented?!1:(this.fullscreen=next,this.emit("lr-fullscreen-change",{fullscreen:next}),!0)}render(){const hasLabel=(this.label??"").length>0,hasSublabel=(this.sublabel??"").length>0,views=this.views,fullscreenInset=sanitizeCssInset(this.fullscreenInset),backdropInset=sanitizeCssInset(this.backdropInset);return html`
       ${this.fullscreen?html`<div
             part="backdrop"
             style=${backdropInset?styleMap({"--lr-widget-backdrop-inset":backdropInset}):nothing}

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-widget-overlay-color:var(--lr-color-overlay);--_lr-widget-fullscreen-inset:max(var(--lr-space-l), var(--lr-safe-area-top)) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start));--_lr-widget-backdrop-inset:0;display:block}[part=base]{box-sizing:border-box;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);flex-direction:column;display:flex;overflow:hidden}:host(:not([fullscreen])) [part=base]{block-size:100%;min-block-size:0}[part=header]{align-items:center;gap:var(--lr-space-s);min-inline-size:0;padding:var(--lr-space-s) var(--lr-space-m);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border);flex:none;display:flex}[part=title]{align-items:center;gap:var(--lr-space-xs);flex:auto;min-inline-size:0;display:flex}[part=icon]{flex:none;align-items:center;display:inline-flex}[part=icon][hidden]{display:none}[part=label-group]{flex-direction:column;min-inline-size:0;display:flex}[part=label],[part=sublabel]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=label]{font-weight:var(--lr-font-weight-semibold)}[part=sublabel]{font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet)}[part=label][hidden],[part=sublabel][hidden]{display:none}[part=actions]{align-items:center;gap:var(--lr-space-xs);flex:0 auto;min-inline-size:0;max-inline-size:100%;display:flex;overflow:auto hidden}[part=actions][hidden]{display:none}[part=view-toggles]{gap:var(--lr-space-2xs);flex:0 auto;min-inline-size:0;max-inline-size:100%;display:flex;overflow:auto hidden}[part=actions][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]),[part=view-toggles][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=actions][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])),[part=view-toggles][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=actions][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),[part=view-toggles][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),:host(:dir(rtl)) [part=actions][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])),:host(:dir(rtl)) [part=view-toggles][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque));mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque))}:host(:dir(rtl)) [part=actions][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),:host(:dir(rtl)) [part=view-toggles][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=view-toggle]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);justify-content:center;align-items:center;gap:var(--lr-space-2xs);max-inline-size:100%;padding:var(--lr-size-0-125rem) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);color:var(--lr-color-text-quiet);font:inherit;font-size:var(--lr-font-size-sm);cursor:pointer;background:0 0;flex:0 auto;display:inline-flex}[part=view-icon]{flex:none;display:inline-flex}[part=view-label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:where([part=view-toggle]):hover{background:var(--lr-widget-view-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-widget-view-toggle-hover-color,var(--lr-color-text))}:where([part=view-toggle]):active{background:color-mix(in oklab, var(--lr-widget-view-toggle-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-widget-view-toggle-hover-color,var(--lr-color-text))}[part=view-toggle][aria-pressed=true]{background:var(--lr-widget-view-toggle-active-bg,var(--lr-color-brand-quiet));color:var(--lr-widget-view-toggle-active-color,var(--lr-color-brand));border-color:var(--lr-widget-view-toggle-active-border-color,transparent)}[part=view-toggle][aria-pressed=true]:active{background:color-mix(in oklab, var(--lr-widget-view-toggle-active-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-widget-view-toggle-active-color,var(--lr-color-brand))}[part=view-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=collapse-button],[part=fullscreen-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:var(--lr-color-text-quiet);border-radius:var(--lr-radius);font:inherit;cursor:pointer;transition:transform var(--lr-transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}[part=collapse-button]:hover,[part=fullscreen-button]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=collapse-button]:active,[part=fullscreen-button]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part=collapse-button]:focus-visible,[part=fullscreen-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:not([collapsed])) [part=collapse-button]{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) [part=collapse-button]{transform:scaleX(-1)}[part=body]{padding:var(--lr-space-m);flex:auto;min-block-size:0;overflow:auto}[part=body][hidden]{display:none}[part=backdrop]{inset:var(--lr-widget-backdrop-inset,var(--_lr-widget-backdrop-inset,0));background:var(--lr-widget-overlay-color,var(--_lr-widget-overlay-color));z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));position:fixed}:host([fullscreen]) [part=base]{inset:var(--lr-widget-fullscreen-inset,var(--_lr-widget-fullscreen-inset,0));z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);box-shadow:var(--lr-shadow-xl);position:fixed}:host([fullscreen]) [part=body]{block-size:100%}:host([compact]) [part=header]{padding:var(--lr-space-xs) var(--lr-space-s);gap:var(--lr-space-xs)}:host([compact]) [part=body]{padding:var(--lr-space-s)}@media (prefers-reduced-motion:reduce){[part=collapse-button],[part=fullscreen-button]{transition:none!important}}@media (forced-colors:active){[part=actions],[part=view-toggles],[part=actions][data-scroll-overflow],[part=view-toggles][data-scroll-overflow],:host(:dir(rtl)) [part=actions][data-scroll-overflow],:host(:dir(rtl)) [part=view-toggles][data-scroll-overflow]{-webkit-mask-image:none;mask-image:none}}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-widget-overlay-color:var(--lr-color-overlay);--_lr-widget-fullscreen-inset:max(var(--lr-space-l), var(--lr-safe-area-top)) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start));--_lr-widget-backdrop-inset:0;display:block}[part=base]{box-sizing:border-box;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);flex-direction:column;display:flex;overflow:hidden}:host(:not([fullscreen])) [part=base]{block-size:100%;min-block-size:0}[part=header]{align-items:center;gap:var(--lr-space-s);min-inline-size:0;padding:var(--lr-space-s) var(--lr-space-m);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border);flex:none;display:flex}[part=title]{align-items:center;gap:var(--lr-space-xs);flex:auto;min-inline-size:0;display:flex}[part=icon]{flex:none;align-items:center;display:inline-flex}[part=icon][hidden]{display:none}[part=label-group]{flex-direction:column;min-inline-size:0;display:flex}[part=label],[part=sublabel]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=label]{font-weight:var(--lr-font-weight-semibold)}[part=sublabel]{font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet)}[part=label][hidden],[part=sublabel][hidden]{display:none}[part=actions]{align-items:center;gap:var(--lr-space-xs);flex:0 auto;min-inline-size:0;max-inline-size:100%;display:flex;overflow:auto hidden}[part=actions][hidden]{display:none}[part=view-toggles]{gap:var(--lr-space-2xs);flex:0 auto;min-inline-size:0;max-inline-size:100%;display:flex;overflow:auto hidden}[part=actions][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]),[part=view-toggles][data-scroll-overflow]:where([data-scroll-start][data-scroll-end]){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=actions][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])),[part=view-toggles][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=actions][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),[part=view-toggles][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),:host(:dir(rtl)) [part=actions][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])),:host(:dir(rtl)) [part=view-toggles][data-scroll-overflow]:where([data-scroll-end]:not([data-scroll-start])){-webkit-mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque));mask-image:linear-gradient(to right, transparent, var(--lr-mask-opaque) var(--lr-scroll-fade-size), var(--lr-mask-opaque))}:host(:dir(rtl)) [part=actions][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])),:host(:dir(rtl)) [part=view-toggles][data-scroll-overflow]:where([data-scroll-start]:not([data-scroll-end])){-webkit-mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent);mask-image:linear-gradient(to right, var(--lr-mask-opaque), var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)), transparent)}[part=view-toggle]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);justify-content:center;align-items:center;gap:var(--lr-space-2xs);max-inline-size:100%;padding:var(--lr-size-0-125rem) var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);color:var(--lr-color-text-quiet);font:inherit;font-size:var(--lr-font-size-sm);cursor:pointer;background:0 0;flex:0 auto;display:inline-flex}[part=view-icon]{flex:none;display:inline-flex}[part=view-label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:where([part=view-toggle]):hover{background:var(--lr-widget-view-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-widget-view-toggle-hover-color,var(--lr-color-text))}:where([part=view-toggle]):active{background:color-mix(in oklab, var(--lr-widget-view-toggle-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-widget-view-toggle-hover-color,var(--lr-color-text))}[part=view-toggle][aria-pressed=true]{background:var(--lr-widget-view-toggle-active-bg,var(--lr-color-brand-quiet));color:var(--lr-widget-view-toggle-active-color,var(--lr-color-brand));border-color:var(--lr-widget-view-toggle-active-border-color,transparent)}[part=view-toggle][aria-pressed=true]:active{background:color-mix(in oklab, var(--lr-widget-view-toggle-active-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-widget-view-toggle-active-color,var(--lr-color-brand))}[part=view-toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=collapse-button],[part=fullscreen-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:var(--lr-color-text-quiet);border-radius:var(--lr-radius);font:inherit;cursor:pointer;transition:transform var(--lr-transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}[part=collapse-button]:hover{background:var(--lr-widget-collapse-button-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-widget-collapse-button-hover-color,var(--lr-color-brand))}[part=fullscreen-button]:hover{background:var(--lr-widget-fullscreen-button-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-widget-fullscreen-button-hover-color,var(--lr-color-brand))}[part=collapse-button]:active{background:color-mix(in oklab, var(--lr-widget-collapse-button-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-widget-collapse-button-hover-color,var(--lr-color-brand))}[part=fullscreen-button]:active{background:color-mix(in oklab, var(--lr-widget-fullscreen-button-hover-bg,var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-widget-fullscreen-button-hover-color,var(--lr-color-brand))}[part=collapse-button]:focus-visible,[part=fullscreen-button]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}:host(:not([collapsed])) [part=collapse-button]{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) [part=collapse-button]{transform:scaleX(-1)}[part=body]{padding:var(--lr-space-m);flex:auto;min-block-size:0;overflow:auto}[part=body][hidden]{display:none}[part=backdrop]{inset:var(--lr-widget-backdrop-inset,var(--_lr-widget-backdrop-inset,0));background:var(--lr-widget-overlay-color,var(--_lr-widget-overlay-color));z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));position:fixed}:host([fullscreen]) [part=base]{inset:var(--lr-widget-fullscreen-inset,var(--_lr-widget-fullscreen-inset,0));z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);box-shadow:var(--lr-shadow-xl);position:fixed}:host([fullscreen]) [part=body]{block-size:100%}:host([compact]) [part=header]{padding:var(--lr-space-xs) var(--lr-space-s);gap:var(--lr-space-xs)}:host([compact]) [part=body]{padding:var(--lr-space-s)}@media (prefers-reduced-motion:reduce){[part=collapse-button],[part=fullscreen-button]{transition:none!important}}@media (forced-colors:active){[part=actions],[part=view-toggles],[part=actions][data-scroll-overflow],[part=view-toggles][data-scroll-overflow],:host(:dir(rtl)) [part=actions][data-scroll-overflow],:host(:dir(rtl)) [part=view-toggles][data-scroll-overflow]{-webkit-mask-image:none;mask-image:none}}`;export{styles};

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

@@ -32,6 +32,10 @@ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from
 * @cssprop [--lr-avatar-font-size=var(--lr-font-size-m)] - Font size of the initials fallback (and
 *   of any `em`-sized slotted glyph). `size` steps its private default alongside the diameter, so
 *   the initials track the circle instead of staying at one fixed size across every tier.
+* @cssprop [--lr-avatar-radius=var(--lr-radius-pill)] - Corner radius of the container. `shape`
+*   steps its private default (`var(--lr-radius-pill)` for `circle`, `var(--lr-radius)` for
+*   `rounded`, `0` for `square`); an inherited or direct public value overrides uniformly across
+*   every shape, the same way `--lr-avatar-size` spans every size tier.
 * @status stable
 * @since 4.0.0
 */

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

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

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

@@ -39,7 +39,8 @@ import type{PropertyValues}from'lit';import{type TemplateResult}from'lit';import
 * @csspart base - The outer inline-flex container (holds the slot and the overflow badge).
 * @csspart overflow-badge - The "+N" button. Only rendered while `max` is actively causing an
 * overflow.
-* @csspart overflow-badge-visual - The avatar-sized painted disc inside the 40px action surface.
+* @csspart overflow-badge-visual - The avatar-sized painted disc inside the 40px-minimum action
+* surface.
 * @cssprop [--lr-avatar-group-avatar-size=var(--lr-size-3rem)] - Sizes the overflow badge to
 * match the slotted avatars, tier for tier with `<lr-avatar>`'s own `--lr-avatar-size`.
 * @cssprop [--lr-avatar-group-overlap=var(--lr-size-neg-6px)] - Horizontal overlap between
@@ -56,6 +57,12 @@ import type{PropertyValues}from'lit';import{type TemplateResult}from'lit';import
 * @cssprop [--lr-avatar-group-badge-font-size=var(--lr-font-size-m)] - Font size of the "+N"
 * badge label. `size` steps its private default across the same six-step ladder as `<lr-avatar>`'s
 * own `--lr-avatar-font-size`, so the badge and the avatars it caps read at the same optical weight.
+* @cssprop [--lr-avatar-group-radius=var(--lr-radius-pill)] - Corner radius of the slotted
+* avatars' ring and of the overflow badge's painted disc. `shape` steps the private default
+* (`var(--lr-radius-pill)` for `circle`, `var(--lr-radius)` for `rounded`, `0` for `square`); an
+* inherited or direct public value overrides both uniformly, mirroring `<lr-avatar>`'s own
+* `--lr-avatar-radius`. A per-avatar `shape` override still wins for that individual avatar's own
+* ring, matching the existing mixed-shape-group support.
 * @status stable
 * @since 4.0.0
 */

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

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{vertical-align:middle;--_lr-avatar-group-avatar-size:var(--lr-size-3rem);--_lr-avatar-group-overlap:var(--lr-size-neg-6px);--_lr-avatar-group-ring-color:var(--lr-color-surface);--_lr-avatar-group-ring-width:var(--lr-border-width-medium);--_lr-avatar-group-badge-bg:var(--lr-color-border);--_lr-avatar-group-badge-color:var(--lr-color-text);--_lr-avatar-group-badge-font-size:var(--lr-font-size-m);max-inline-size:100%;display:inline-flex}:host([size="2xs"]){--_lr-avatar-group-avatar-size:var(--lr-size-1-5rem);--_lr-avatar-group-overlap:var(--lr-size-neg-4px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-xs)}:host([size=xs]){--_lr-avatar-group-avatar-size:var(--lr-size-2rem);--_lr-avatar-group-overlap:var(--lr-size-neg-4px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-sm)}:host([size=s]),:host([size=small]){--_lr-avatar-group-avatar-size:var(--lr-size-2-5rem);--_lr-avatar-group-overlap:var(--lr-size-neg-4px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-md-sm)}:host([size=l]),:host([size=large]){--_lr-avatar-group-avatar-size:var(--lr-size-4rem);--_lr-avatar-group-overlap:var(--lr-size-neg-8px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-lg)}:host([size=xl]){--_lr-avatar-group-avatar-size:var(--lr-size-5rem);--_lr-avatar-group-overlap:var(--lr-size-neg-8px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-xl)}:host([variant=brand]){--_lr-avatar-group-badge-bg:var(--lr-color-brand-quiet);--_lr-avatar-group-badge-color:var(--lr-color-brand)}:host([variant=success]){--_lr-avatar-group-badge-bg:var(--lr-color-success-quiet);--_lr-avatar-group-badge-color:var(--lr-color-success)}:host([variant=warning]){--_lr-avatar-group-badge-bg:var(--lr-color-warning-quiet);--_lr-avatar-group-badge-color:var(--lr-color-warning)}:host([variant=danger]){--_lr-avatar-group-badge-bg:var(--lr-color-danger-quiet);--_lr-avatar-group-badge-color:var(--lr-color-danger)}[part=base]{align-items:center;min-inline-size:0;max-inline-size:100%;display:inline-flex}::slotted(lr-avatar){border-radius:var(--lr-radius-pill);box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-avatar-group-ring-color,var(--_lr-avatar-group-ring-color));margin-inline-start:var(--lr-avatar-group-overlap,var(--_lr-avatar-group-overlap))}::slotted(lr-avatar[data-lr-avatar-group-first]){margin-inline-start:0}::slotted(lr-avatar[data-lr-avatar-group-hidden]){display:none!important}::slotted(lr-avatar[shape=square]){border-radius:0}::slotted(lr-avatar[shape=rounded]){border-radius:var(--lr-radius)}[part=overflow-badge]{flex:0 0 var(--lr-icon-button-size);box-sizing:border-box;inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:outline-color var(--lr-transition-fast);background:0 0;border:0;justify-content:flex-start;align-items:center;margin:0;padding:0;display:inline-flex}[part=overflow-badge-visual]{box-sizing:border-box;inline-size:var(--lr-avatar-group-avatar-size,var(--_lr-avatar-group-avatar-size));block-size:var(--lr-avatar-group-avatar-size,var(--_lr-avatar-group-avatar-size));border-radius:var(--lr-radius-pill);box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-avatar-group-ring-color,var(--_lr-avatar-group-ring-color));background:var(--lr-avatar-group-badge-bg,var(--_lr-avatar-group-badge-bg));color:var(--lr-avatar-group-badge-color,var(--_lr-avatar-group-badge-color));font-size:var(--lr-avatar-group-badge-font-size,var(--_lr-avatar-group-badge-font-size));font-weight:var(--lr-font-weight-semibold);line-height:var(--lr-line-height-snug);transition:background-color var(--lr-transition-fast), box-shadow var(--lr-transition-fast);flex:none;justify-content:center;align-items:center;margin-inline-start:var(--lr-avatar-group-overlap,var(--_lr-avatar-group-overlap));display:inline-flex}[part=overflow-badge][data-first-visible] [part=overflow-badge-visual]{margin-inline-start:0}:host([shape=square]) [part=overflow-badge-visual]{border-radius:0}:host([shape=rounded]) [part=overflow-badge-visual]{border-radius:var(--lr-radius)}[part=overflow-badge]:hover [part=overflow-badge-visual]{box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-color-brand)}[part=overflow-badge]:active [part=overflow-badge-visual]{box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-color-brand);background:color-mix(in oklab, var(--lr-avatar-group-badge-bg,var(--_lr-avatar-group-badge-bg)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=overflow-badge]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}@media (forced-colors:active){::slotted(lr-avatar){outline:var(--lr-border-width-medium) solid Canvas;box-shadow:0 0 0 var(--lr-border-width-thick) CanvasText}[part=overflow-badge-visual]{border:var(--lr-border-width-medium) solid CanvasText;box-shadow:0 0 0 var(--lr-border-width-medium) Canvas;color:canvastext;forced-color-adjust:auto;background:canvas}[part=overflow-badge]:hover [part=overflow-badge-visual]{box-shadow:0 0 0 var(--lr-border-width-thick) Highlight;border-color:highlight}[part=overflow-badge]:focus-visible{outline-color:highlight}}@media (prefers-reduced-motion:reduce){[part=overflow-badge],[part=overflow-badge-visual]{transition:none!important}}`;export{styles};
+import{css}from"lit";const styles=css`:host{vertical-align:middle;--_lr-avatar-group-avatar-size:var(--lr-size-3rem);--_lr-avatar-group-overlap:var(--lr-size-neg-6px);--_lr-avatar-group-ring-color:var(--lr-color-surface);--_lr-avatar-group-ring-width:var(--lr-border-width-medium);--_lr-avatar-group-badge-bg:var(--lr-color-border);--_lr-avatar-group-badge-color:var(--lr-color-text);--_lr-avatar-group-badge-font-size:var(--lr-font-size-m);max-inline-size:100%;display:inline-flex}:host([size="2xs"]){--_lr-avatar-group-avatar-size:var(--lr-size-1-5rem);--_lr-avatar-group-overlap:var(--lr-size-neg-4px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-xs)}:host([size=xs]){--_lr-avatar-group-avatar-size:var(--lr-size-2rem);--_lr-avatar-group-overlap:var(--lr-size-neg-4px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-sm)}:host([size=s]),:host([size=small]){--_lr-avatar-group-avatar-size:var(--lr-size-2-5rem);--_lr-avatar-group-overlap:var(--lr-size-neg-4px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-md-sm)}:host([size=l]),:host([size=large]){--_lr-avatar-group-avatar-size:var(--lr-size-4rem);--_lr-avatar-group-overlap:var(--lr-size-neg-8px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-lg)}:host([size=xl]){--_lr-avatar-group-avatar-size:var(--lr-size-5rem);--_lr-avatar-group-overlap:var(--lr-size-neg-8px);--_lr-avatar-group-badge-font-size:var(--lr-font-size-xl)}:host([variant=brand]){--_lr-avatar-group-badge-bg:var(--lr-color-brand-quiet);--_lr-avatar-group-badge-color:var(--lr-color-brand)}:host([variant=success]){--_lr-avatar-group-badge-bg:var(--lr-color-success-quiet);--_lr-avatar-group-badge-color:var(--lr-color-success)}:host([variant=warning]){--_lr-avatar-group-badge-bg:var(--lr-color-warning-quiet);--_lr-avatar-group-badge-color:var(--lr-color-warning)}:host([variant=danger]){--_lr-avatar-group-badge-bg:var(--lr-color-danger-quiet);--_lr-avatar-group-badge-color:var(--lr-color-danger)}[part=base]{align-items:center;min-inline-size:0;max-inline-size:100%;display:inline-flex}::slotted(lr-avatar){border-radius:var(--lr-avatar-group-radius,var(--lr-radius-pill));box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-avatar-group-ring-color,var(--_lr-avatar-group-ring-color));margin-inline-start:var(--lr-avatar-group-overlap,var(--_lr-avatar-group-overlap))}::slotted(lr-avatar[data-lr-avatar-group-first]){margin-inline-start:0}::slotted(lr-avatar[data-lr-avatar-group-hidden]){display:none!important}::slotted(lr-avatar[shape=square]){border-radius:0}::slotted(lr-avatar[shape=rounded]){border-radius:var(--lr-avatar-group-radius,var(--lr-radius))}[part=overflow-badge]{box-sizing:border-box;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:outline-color var(--lr-transition-fast);background:0 0;border:0;flex:none;justify-content:flex-start;align-items:center;margin:0;padding:0;display:inline-flex}[part=overflow-badge-visual]{box-sizing:border-box;inline-size:var(--lr-avatar-group-avatar-size,var(--_lr-avatar-group-avatar-size));block-size:var(--lr-avatar-group-avatar-size,var(--_lr-avatar-group-avatar-size));border-radius:var(--lr-avatar-group-radius,var(--lr-radius-pill));box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-avatar-group-ring-color,var(--_lr-avatar-group-ring-color));background:var(--lr-avatar-group-badge-bg,var(--_lr-avatar-group-badge-bg));color:var(--lr-avatar-group-badge-color,var(--_lr-avatar-group-badge-color));font-size:var(--lr-avatar-group-badge-font-size,var(--_lr-avatar-group-badge-font-size));font-weight:var(--lr-font-weight-semibold);line-height:var(--lr-line-height-snug);transition:background-color var(--lr-transition-fast), box-shadow var(--lr-transition-fast);flex:none;justify-content:center;align-items:center;margin-inline-start:var(--lr-avatar-group-overlap,var(--_lr-avatar-group-overlap));display:inline-flex}[part=overflow-badge][data-first-visible] [part=overflow-badge-visual]{margin-inline-start:0}:host([shape=square]) [part=overflow-badge-visual]{border-radius:0}:host([shape=rounded]) [part=overflow-badge-visual]{border-radius:var(--lr-avatar-group-radius,var(--lr-radius))}[part=overflow-badge]:hover [part=overflow-badge-visual]{box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-color-brand)}[part=overflow-badge]:active [part=overflow-badge-visual]{box-shadow:0 0 0 var(--lr-avatar-group-ring-width,var(--_lr-avatar-group-ring-width)) var(--lr-color-brand);background:color-mix(in oklab, var(--lr-avatar-group-badge-bg,var(--_lr-avatar-group-badge-bg)), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=overflow-badge]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}@media (forced-colors:active){::slotted(lr-avatar){outline:var(--lr-border-width-medium) solid Canvas;box-shadow:0 0 0 var(--lr-border-width-thick) CanvasText}[part=overflow-badge-visual]{border:var(--lr-border-width-medium) solid CanvasText;box-shadow:0 0 0 var(--lr-border-width-medium) Canvas;color:canvastext;forced-color-adjust:auto;background:canvas}[part=overflow-badge]:hover [part=overflow-badge-visual]{box-shadow:0 0 0 var(--lr-border-width-thick) Highlight;border-color:highlight}[part=overflow-badge]:focus-visible{outline-color:highlight}}@media (prefers-reduced-motion:reduce){[part=overflow-badge],[part=overflow-badge-visual]{transition:none!important}}`;export{styles};