@aceshooting/lyra-ui 25.3.0 → 25.3.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 25.3.1
+
+### Patch Changes
+
+- 8fa2d03: Give language choices a comfortable 3rem minimum row height independent of compact triggers or density, add roomier block padding, and wrap long native labels while retaining keyboard navigation, RTL and viewport scrolling.
+- cc451c6: Clarify that theme.css includes the default Shadcn look and distinguish optional look sheets from legacy mode compatibility aliases.
+- 1993c8a: Validate the latest stable syntax-highlighting, math-rendering and email-parsing dependencies while retaining support for the existing Shiki peer range.
+- f0212e7: Keep nested menu labels readable on narrow viewports by trying placement above or below the parent when neither side has enough space. Preserve ordinary side placement, RTL navigation, and menubar attachment.
+
 ## 25.3.0
 
 ### Minor Changes

package/dist/components/forms/locale-picker/locale-picker.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-s); --_lr-locale-picker-trigger-min-height-default: var(--lr-form-control-height); --_lr-locale-picker-font-size-default: var(--lr-form-control-font-size); --_lr-locale-picker-expand-size-default: var(--lr-size-1-75rem); --_lr-locale-picker-gap-default: var(--lr-space-xs); --_lr-locale-picker-radius-default: var(--lr-form-control-radius); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([size='2xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-0625rem) var(--lr-space-2xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-125rem) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='s']), :host([size='small']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1-25rem); } :host([size='l']), :host([size='large']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-s) var(--lr-space-m); } :host([size='xl']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-m) var(--lr-space-l); } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} [part='trigger'] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; min-block-size: var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default))); box-sizing: border-box; block-size: var(--lr-locale-picker-trigger-height, auto); padding: var(--lr-locale-picker-trigger-padding, var(--_lr-locale-picker-trigger-padding-default)); border: var(--lr-border-width-thin) solid var(--lr-locale-picker-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: var(--lr-locale-picker-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-locale-picker-font-size, var(--_lr-locale-picker-font-size-default)); text-align: start; cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='trigger']:focus { ${formControlFocusHalo} } [part='trigger']:where(.flag-only) { --_lr-locale-picker-compact-size: max(var(--lr-size-24px), var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default)))); inline-size: var(--_lr-locale-picker-compact-size); block-size: var(--_lr-locale-picker-compact-size); min-inline-size: min(var(--lr-icon-button-size), var(--_lr-locale-picker-compact-size)); min-block-size: min(var(--lr-icon-button-size), var(--_lr-locale-picker-compact-size)); justify-content: center; padding: var(--lr-locale-picker-trigger-padding, 0); } :where([part='trigger']):hover:where(:not(:disabled)) { background: var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-locale-picker-trigger-hover-border-color, var(--lr-locale-picker-trigger-border-color, var(--lr-color-border)) ); } :where([part='trigger']):active:where(:not(:disabled)) { background: color-mix( in oklab, var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } :host([open]) [part='trigger'] { border-color: var(--lr-locale-picker-open-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part='trigger'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='trigger-flag'] { flex: 0 0 auto; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); min-block-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='listbox'][hidden] { display: none; } [part='listbox'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: min(var(--lr-size-12rem), var(--lr-popover-viewport-clamp), var(--lr-size-28rem)); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem)); padding: var(--lr-space-xs); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-locale-picker-radius, var(--lr-overlay-radius, var(--_lr-locale-picker-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; box-sizing: border-box; min-block-size: max(var(--lr-form-control-height-m), var(--lr-form-control-height)); padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background-color var(--lr-transition-fast); } [part='option']:hover { background: var( --lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet) ); } [part='option'][data-active] { background: var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:active { background: color-mix( in oklab, var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-selected='true'] { border-color: var(--lr-locale-picker-option-selected-border-color, var(--lr-color-brand)); color: var(--lr-locale-picker-option-selected-color, var(--lr-color-brand)); font-weight: var(--lr-locale-picker-option-selected-font-weight, var(--lr-font-weight-semibold)); } @media (forced-colors: active) { :where([part='trigger']):hover:where(:not(:disabled)) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } :where([part="trigger"]):active:where(:not(:disabled)) { outline-style: double; outline-width: var(--lr-border-width-medium); } [part="option"][data-active] { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part="option"][aria-selected="true"] { border-color: Highlight; border-style: double; } } [part='option-flag'] { flex: 0 0 auto; } [part='option-label'] { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; } [part='option-label'] span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-tag'] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } [part='load-status'] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-space-xs); margin-block-start: var(--lr-space-xs); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='load-retry'] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-button); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; transition: background var(--lr-transition-fast), box-shadow var(--lr-transition-fast); } [part='load-retry']:where(:hover:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-text) var(--lr-color-mix-hover)); } [part='load-retry']:where(:active:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-text) var(--lr-color-mix-active)); } [part='load-retry']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='load-retry']:where(:disabled) { cursor: default; opacity: var(--lr-opacity-disabled); } @media (prefers-reduced-motion: reduce) { [part='load-retry'] { transition: none; } } [part='hint'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="listbox"]',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};
+import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: block; --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-s); --_lr-locale-picker-trigger-min-height-default: var(--lr-form-control-height); --_lr-locale-picker-font-size-default: var(--lr-form-control-font-size); --_lr-locale-picker-expand-size-default: var(--lr-size-1-75rem); --_lr-locale-picker-gap-default: var(--lr-space-xs); --_lr-locale-picker-radius-default: var(--lr-form-control-radius); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([size='2xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-0625rem) var(--lr-space-2xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='xs']) { --_lr-locale-picker-trigger-padding-default: var(--lr-size-0-125rem) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1rem); } :host([size='s']), :host([size='small']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-xs) var(--lr-space-xs); --_lr-locale-picker-expand-size-default: var(--lr-size-1-25rem); } :host([size='l']), :host([size='large']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-s) var(--lr-space-m); } :host([size='xl']) { --_lr-locale-picker-trigger-padding-default: var(--lr-space-m) var(--lr-space-l); } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} [part='trigger'] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; min-block-size: var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default))); box-sizing: border-box; block-size: var(--lr-locale-picker-trigger-height, auto); padding: var(--lr-locale-picker-trigger-padding, var(--_lr-locale-picker-trigger-padding-default)); border: var(--lr-border-width-thin) solid var(--lr-locale-picker-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: var(--lr-locale-picker-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-locale-picker-font-size, var(--_lr-locale-picker-font-size-default)); text-align: start; cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='trigger']:focus { ${formControlFocusHalo} } [part='trigger']:where(.flag-only) { --_lr-locale-picker-compact-size: max(var(--lr-size-24px), var(--lr-locale-picker-trigger-height, var(--lr-locale-picker-trigger-min-height, var(--_lr-locale-picker-trigger-min-height-default)))); inline-size: var(--_lr-locale-picker-compact-size); block-size: var(--_lr-locale-picker-compact-size); min-inline-size: min(var(--lr-icon-button-size), var(--_lr-locale-picker-compact-size)); min-block-size: min(var(--lr-icon-button-size), var(--_lr-locale-picker-compact-size)); justify-content: center; padding: var(--lr-locale-picker-trigger-padding, 0); } :where([part='trigger']):hover:where(:not(:disabled)) { background: var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-locale-picker-trigger-hover-border-color, var(--lr-locale-picker-trigger-border-color, var(--lr-color-border)) ); } :where([part='trigger']):active:where(:not(:disabled)) { background: color-mix( in oklab, var(--lr-locale-picker-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } :host([open]) [part='trigger'] { border-color: var(--lr-locale-picker-open-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:disabled) [part='trigger'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='trigger-flag'] { flex: 0 0 auto; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); min-block-size: min(var(--lr-icon-button-size), var(--lr-locale-picker-expand-size, var(--_lr-locale-picker-expand-size-default))); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='listbox'][hidden] { display: none; } [part='listbox'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-dropdown)); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: min(var(--lr-size-12rem), var(--lr-popover-viewport-clamp), var(--lr-size-28rem)); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem)); padding: var(--lr-space-xs); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-locale-picker-radius, var(--lr-overlay-radius, var(--_lr-locale-picker-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-locale-picker-gap, var(--_lr-locale-picker-gap-default)); inline-size: 100%; box-sizing: border-box; min-block-size: max(var(--lr-size-3rem), var(--lr-form-control-height-m), var(--lr-form-control-height)); padding: var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-locale-picker-radius, var(--_lr-locale-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background-color var(--lr-transition-fast); } [part='option']:hover { background: var( --lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet) ); } [part='option'][data-active] { background: var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:active { background: color-mix( in oklab, var(--lr-locale-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-selected='true'] { border-color: var(--lr-locale-picker-option-selected-border-color, var(--lr-color-brand)); color: var(--lr-locale-picker-option-selected-color, var(--lr-color-brand)); font-weight: var(--lr-locale-picker-option-selected-font-weight, var(--lr-font-weight-semibold)); } @media (forced-colors: active) { :where([part='trigger']):hover:where(:not(:disabled)) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } :where([part="trigger"]):active:where(:not(:disabled)) { outline-style: double; outline-width: var(--lr-border-width-medium); } [part="option"][data-active] { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part="option"][aria-selected="true"] { border-color: Highlight; border-style: double; } } [part='option-flag'] { flex: 0 0 auto; } [part='option-label'] { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; } [part='option-label'] span:first-child { overflow-wrap: anywhere; white-space: normal; } [part='option-tag'] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } [part='load-status'] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-space-xs); margin-block-start: var(--lr-space-xs); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); overflow-wrap: anywhere; } [part='load-retry'] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-button); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; transition: background var(--lr-transition-fast), box-shadow var(--lr-transition-fast); } [part='load-retry']:where(:hover:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-text) var(--lr-color-mix-hover)); } [part='load-retry']:where(:active:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-text) var(--lr-color-mix-active)); } [part='load-retry']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='load-retry']:where(:disabled) { cursor: default; opacity: var(--lr-opacity-disabled); } @media (prefers-reduced-motion: reduce) { [part='load-retry'] { transition: none; } } [part='hint'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } [part='form-control'], [part='form-control-label'], [part='hint'], [part='error'] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="listbox"]',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};

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

@@ -1,4 +1,4 @@
-var _a;import{__decorate}from"tslib";import{maxCssTime}from"../../../internal/css-motion-time.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";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",MENUBAR_PLACEMENT="bottom-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.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.menubarAnchored=!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&&!this.menubarAnchored&&(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.collectionSupport=collectionSupport}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,options){menu.submenuAnchor&&menu.submenuAnchor!==anchor&&menu.closePresentation(),menu.menubarAnchored=options?.menubar===!0,menu.submenuAnchor=anchor,menu.submenuStateChange=onStateChange,menu.syncPresentationState(),menu.requestUpdate()},detach(anchor){menu.submenuAnchor===anchor&&(menu.closePresentation(),menu.submenuAnchor=null,menu.menubarAnchored=!1,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=this.menubarAnchored?MENUBAR_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(this));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`
+var _a;import{__decorate}from"tslib";import{maxCssTime}from"../../../internal/css-motion-time.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";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_FALLBACK_PLACEMENTS=["right-end","left-start","left-end","bottom-start","top-start"],MENUBAR_PLACEMENT="bottom-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.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.menubarAnchored=!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&&!this.menubarAnchored&&(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.collectionSupport=collectionSupport}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,options){menu.submenuAnchor&&menu.submenuAnchor!==anchor&&menu.closePresentation(),menu.menubarAnchored=options?.menubar===!0,menu.submenuAnchor=anchor,menu.submenuStateChange=onStateChange,menu.syncPresentationState(),menu.requestUpdate()},detach(anchor){menu.submenuAnchor===anchor&&(menu.closePresentation(),menu.submenuAnchor=null,menu.menubarAnchored=!1,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=this.menubarAnchored?MENUBAR_PLACEMENT:rtlAwarePlacement(SUBMENU_PLACEMENT,this);this.cleanup=place(this.submenuAnchor,popup,{placement,flipFallbackPlacements:this.menubarAnchored?void 0:SUBMENU_FALLBACK_PLACEMENTS.map(candidate=>rtlAwarePlacement(candidate,this)),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(this));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>

package/dist/internal/package-metadata.d.ts

@@ -2,4 +2,4 @@
 * Generated from package.json by scripts/generate-package-metadata.mjs.
 * Run `pnpm package-metadata` after changing package identity or version.
 */
-export declare const LYRA_PACKAGE_NAME:'@aceshooting/lyra-ui';export declare const LYRA_PACKAGE_VERSION:'25.3.0';
+export declare const LYRA_PACKAGE_NAME:'@aceshooting/lyra-ui';export declare const LYRA_PACKAGE_VERSION:'25.3.1';

package/dist/internal/package-metadata.js

@@ -1 +1 @@
-const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="25.3.0";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};
+const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="25.3.1";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};

package/llms/components/lr-locale-picker.md

@@ -222,11 +222,11 @@ A compact header can set `trigger-display="flag"` and
 Import `@aceshooting/lyra-ui/components/media/flag/flag-peer.js` to register the optional flag
 resolver. Menu labels stay visible; a per-entry `country` override also reaches the compact trigger.
 
-Option rows keep at least the medium control height (`--lr-form-control-height-m`, normally
-`2.25rem`), including `option-display="label"` and a small flag trigger. Larger control tiers,
-coarse-pointer control heights, larger text, and the optional tag line can grow the rows beyond
-that floor. The listbox keeps its scrolling height limit; `size` does not make language rows
-smaller than the medium floor.
+Option rows keep at least `--lr-size-3rem` (normally `3rem`, or 48px at a 16px root size),
+including `option-display="label"`, compact density, and a small flag trigger. Block padding is
+`--lr-space-s`; long native labels wrap and rows grow with the text. Larger medium/current control
+height tokens and the optional tag line can also grow rows beyond that floor. The listbox keeps
+its scrolling height limit; `size` controls the trigger rather than shrinking language choices.
 
 ```html
 <lr-locale-picker label="Language"></lr-locale-picker>

package/llms/components/lr-menu.md

@@ -265,6 +265,10 @@ has `aria-haspopup="menu"`, explicit `aria-expanded="true|false"`, the transient
 `submenu-open` state, and a logical-direction chevron. Its submenu is named from the parent's
 accessible label unless the submenu supplies its own `aria-label` or non-default `label`.
 
+Submenus prefer the inline end of their parent and flip to the other side when necessary. When
+neither side has enough space, they can open above or below the parent, keeping their labels
+readable within the viewport instead of shrinking to the remaining strip beside a wide menu.
+
 The into-branch and back-out arrow keys swap under RTL. Enter/Space and the into key open and focus
 the first child; the back-out key and Escape close only the innermost branch and return focus to its
 parent row. Pointer hover uses an intent delay, outside pointer dismissal closes the branch, and at

package/llms/shared/styles-and-tokens.md

@@ -505,7 +505,8 @@ page you are on — that is what keeps two overlapping surfaces reading in the c
 
 ### Cascade layers
 
-`theme.css` declares its layer order up front, then puts all of its own tokens in `lr-theme`:
+`theme.css` declares its layer order up front, with base inputs in `lr-theme` and built-in profile
+rules in the `lr-theme-preset` sublayers:
 
 ```css
 @layer lr-base, lr-theme, lr-theme-preset, lr-utilities, lr-overrides;
@@ -513,9 +514,10 @@ page you are on — that is what keeps two overlapping surfaces reading in the c
 
 - **`lr-base`** — contains the explicitly scoped native-element rules only when the optional
   `native.css` asset is imported.
-- **`lr-theme`** — where every `--lr-theme-*` token `theme.css` ships is declared.
-- **`lr-theme-preset`** — the compatibility layer name that holds optional look stylesheets, such as
-  [`looks/shadcn.css`](#the-shadcn-look--looksshadcncss). Empty unless one is imported.
+- **`lr-theme`** — contains the base theme inputs and token resolvers.
+- **`lr-theme-preset`** — the compatibility layer name for look, density, surface, accent and mode
+  rules. `theme.css` already supplies the built-in Shadcn, Glass and Emerald profile here; optional
+  look stylesheets add their own rules to the same sublayers.
 - **`lr-utilities`** — contains exact `lr-*` classes only when the optional `utilities.css` asset is
   imported.
 - **`lr-overrides`** — named so an application can opt its own rules into a defined position
@@ -574,17 +576,25 @@ reason.
 
 ### The shadcn look — looks/shadcn.css
 
-Import the base resolver and the optional look stylesheet, then select the look on the scope that should receive it:
+`theme.css` already installs Shadcn as the built-in default and supports explicit
+`data-lr-look="shadcn"` scopes. Import it once; the separate Shadcn sheet is unnecessary for this
+profile:
 
 ~~~ts
 import "@aceshooting/lyra-ui/theme.css";
-import "@aceshooting/lyra-ui/looks/shadcn.css";
 import { setLyraStyle } from "@aceshooting/lyra-ui/theme.js";
 
 setLyraStyle({ look: "shadcn" });
 ~~~
 
-The stylesheet declares values only under data-lr-look="shadcn". It composes with the independent mode, surface, density, and accent axes. For a local region, set data-lr-look="shadcn" on that region or use applyLyraStyleScope(). A nested data-lr-mode="dark" still changes mode without changing the look.
+Shadcn composes with the independent mode, surface, density and accent axes. For a local region,
+set data-lr-look="shadcn" on that region or use applyLyraStyleScope(). A nested data-lr-mode="dark"
+still changes mode without changing the look.
+
+The separate `looks/shadcn.css` sheet remains compatible. Besides the same scoped look values, it
+adds legacy `.light` and `.dark` mode aliases inside a Shadcn scope. Import that sheet only when
+those aliases are needed; prefer `data-lr-mode`, `data-lr-theme` or `.lr-light`/`.lr-dark` for new
+code. Explicit Lyra mode selectors on the same element take precedence over the compatibility aliases.
 
 The look sets --lr-theme-* inputs, so no component API changes. Its rules use Lyra's named cascade layers: unlayered application rules still win, and runtime accent ramps still take precedence over look values for the roles they paint. Import order between theme.css and looks/shadcn.css does not change the layer order.
 
@@ -602,7 +612,9 @@ Override the look through an unlayered application rule or the lr-overrides laye
 }
 ~~~
 
-The former global themes/shadcn.css facade and its data-lr-theme-preset behavior have been removed. Use looks/shadcn.css and the data-lr-look axis for new styling.
+The former global themes/shadcn.css facade and its data-lr-theme-preset behavior have been removed.
+Use theme.css and the data-lr-look axis for new styling; looks/shadcn.css is needed only for the
+compatibility aliases above.
 
 ### Where an override actually reaches
 
@@ -845,7 +857,7 @@ bytes; build plugins must not prepend the bootstrap ahead of it.
 
 For a strict CSP that disallows inline scripts, the package also publishes theme-bootstrap.js, a classic script asset with identical bytes. Load it synchronously after the charset declaration and before stylesheets. Its optional data-lr-theme-storage-key and data-lr-theme-attributes attributes select an application-owned storage key or mode-attribute list; values are validated and fall back to defaults when invalid.
 
-**Migrating the retired theme facade.** New code uses setLyraStyle() and getLyraStyle(). Map old auto mode to system, an old surface reference color to accentBackground, and an old token map to overrides; review custom CSS colors that share a gemstone name before choosing a named accent. Replace preset definitions with a LyraLook plus explicit style choices. Replace selectors for data-lr-theme-preset with the actual axis they need, such as data-lr-look="shadcn". Import looks/shadcn.css in place of the removed fixed themes/shadcn.css facade and select the look with setLyraStyle({ look: "shadcn" }) or a scoped data-lr-look attribute. Listen for lr-style-change and read event.detail.style and event.detail.changed; the old theme and preset events are no longer emitted. For the complete project-by-project sequence, see [Upgrading from v23 to v24](v23-to-v24-migration.md).
+**Migrating the retired theme facade.** New code uses setLyraStyle() and getLyraStyle(). Map old auto mode to system, an old surface reference color to accentBackground, and an old token map to overrides; review custom CSS colors that share a gemstone name before choosing a named accent. Replace preset definitions with a LyraLook plus explicit style choices. Replace selectors for data-lr-theme-preset with the actual axis they need, such as data-lr-look="shadcn". Import theme.css in place of the removed fixed themes/shadcn.css facade and select the look with setLyraStyle({ look: "shadcn" }) or a scoped data-lr-look attribute. Listen for lr-style-change and read event.detail.style and event.detail.changed; the old theme and preset events are no longer emitted. For the complete project-by-project sequence, see [Upgrading from v23 to v24](v23-to-v24-migration.md).
 
 Historical v1 stored records remain readable by the runtime and bootstrap. The removed JavaScript functions, preset subpaths, preset event, root marker, and fixed stylesheet are not available in the current API.
 
@@ -897,10 +909,8 @@ mode and accent; the axes compose independently.
 
 ```js
 import '@aceshooting/lyra-ui/theme.css';
-import '@aceshooting/lyra-ui/looks/shadcn.css';
 import '@aceshooting/lyra-ui/looks/material.css';
 import '@aceshooting/lyra-ui/density.css';
-import '@aceshooting/lyra-ui/surfaces/glass.css';
 import '@aceshooting/lyra-ui/accents.css';
 import { setLyraStyle, resetLyraStyle, applyLyraStyleScope } from '@aceshooting/lyra-ui/theme.js';
 
@@ -918,7 +928,8 @@ inherit), without persistence or global events; clearing preserves later author
 reports requested axes and resolved mode.
 
 Set `data-lr-look`, `data-lr-surface`, `data-lr-density`, `data-lr-mode` and `data-lr-accent`
-directly if needed. Stylesheet look ids need their sheet; arbitrary ids neither load nor register.
+directly if needed. Shadcn and Lyra are included in `theme.css`; other stylesheet look ids need
+their optional sheet. Arbitrary ids neither load nor register.
 `defineLyraLook({ id, tokens })` defines a validated immutable runtime look;
 `lyraLookCss()` from `theme/look-css.js` creates CSS without DOM access. In app-owned shadow roots
 with local boundaries, install `theme.css` and selected sheets; selectors stop at roots, inheritance

package/llms/shared.md

@@ -1315,7 +1315,8 @@ page you are on — that is what keeps two overlapping surfaces reading in the c
 
 ### Cascade layers
 
-`theme.css` declares its layer order up front, then puts all of its own tokens in `lr-theme`:
+`theme.css` declares its layer order up front, with base inputs in `lr-theme` and built-in profile
+rules in the `lr-theme-preset` sublayers:
 
 ```css
 @layer lr-base, lr-theme, lr-theme-preset, lr-utilities, lr-overrides;
@@ -1323,9 +1324,10 @@ page you are on — that is what keeps two overlapping surfaces reading in the c
 
 - **`lr-base`** — contains the explicitly scoped native-element rules only when the optional
   `native.css` asset is imported.
-- **`lr-theme`** — where every `--lr-theme-*` token `theme.css` ships is declared.
-- **`lr-theme-preset`** — the compatibility layer name that holds optional look stylesheets, such as
-  [`looks/shadcn.css`](#the-shadcn-look--looksshadcncss). Empty unless one is imported.
+- **`lr-theme`** — contains the base theme inputs and token resolvers.
+- **`lr-theme-preset`** — the compatibility layer name for look, density, surface, accent and mode
+  rules. `theme.css` already supplies the built-in Shadcn, Glass and Emerald profile here; optional
+  look stylesheets add their own rules to the same sublayers.
 - **`lr-utilities`** — contains exact `lr-*` classes only when the optional `utilities.css` asset is
   imported.
 - **`lr-overrides`** — named so an application can opt its own rules into a defined position
@@ -1384,17 +1386,25 @@ reason.
 
 ### The shadcn look — looks/shadcn.css
 
-Import the base resolver and the optional look stylesheet, then select the look on the scope that should receive it:
+`theme.css` already installs Shadcn as the built-in default and supports explicit
+`data-lr-look="shadcn"` scopes. Import it once; the separate Shadcn sheet is unnecessary for this
+profile:
 
 ~~~ts
 import "@aceshooting/lyra-ui/theme.css";
-import "@aceshooting/lyra-ui/looks/shadcn.css";
 import { setLyraStyle } from "@aceshooting/lyra-ui/theme.js";
 
 setLyraStyle({ look: "shadcn" });
 ~~~
 
-The stylesheet declares values only under data-lr-look="shadcn". It composes with the independent mode, surface, density, and accent axes. For a local region, set data-lr-look="shadcn" on that region or use applyLyraStyleScope(). A nested data-lr-mode="dark" still changes mode without changing the look.
+Shadcn composes with the independent mode, surface, density and accent axes. For a local region,
+set data-lr-look="shadcn" on that region or use applyLyraStyleScope(). A nested data-lr-mode="dark"
+still changes mode without changing the look.
+
+The separate `looks/shadcn.css` sheet remains compatible. Besides the same scoped look values, it
+adds legacy `.light` and `.dark` mode aliases inside a Shadcn scope. Import that sheet only when
+those aliases are needed; prefer `data-lr-mode`, `data-lr-theme` or `.lr-light`/`.lr-dark` for new
+code. Explicit Lyra mode selectors on the same element take precedence over the compatibility aliases.
 
 The look sets --lr-theme-* inputs, so no component API changes. Its rules use Lyra's named cascade layers: unlayered application rules still win, and runtime accent ramps still take precedence over look values for the roles they paint. Import order between theme.css and looks/shadcn.css does not change the layer order.
 
@@ -1412,7 +1422,9 @@ Override the look through an unlayered application rule or the lr-overrides laye
 }
 ~~~
 
-The former global themes/shadcn.css facade and its data-lr-theme-preset behavior have been removed. Use looks/shadcn.css and the data-lr-look axis for new styling.
+The former global themes/shadcn.css facade and its data-lr-theme-preset behavior have been removed.
+Use theme.css and the data-lr-look axis for new styling; looks/shadcn.css is needed only for the
+compatibility aliases above.
 
 ### Where an override actually reaches
 
@@ -1655,7 +1667,7 @@ bytes; build plugins must not prepend the bootstrap ahead of it.
 
 For a strict CSP that disallows inline scripts, the package also publishes theme-bootstrap.js, a classic script asset with identical bytes. Load it synchronously after the charset declaration and before stylesheets. Its optional data-lr-theme-storage-key and data-lr-theme-attributes attributes select an application-owned storage key or mode-attribute list; values are validated and fall back to defaults when invalid.
 
-**Migrating the retired theme facade.** New code uses setLyraStyle() and getLyraStyle(). Map old auto mode to system, an old surface reference color to accentBackground, and an old token map to overrides; review custom CSS colors that share a gemstone name before choosing a named accent. Replace preset definitions with a LyraLook plus explicit style choices. Replace selectors for data-lr-theme-preset with the actual axis they need, such as data-lr-look="shadcn". Import looks/shadcn.css in place of the removed fixed themes/shadcn.css facade and select the look with setLyraStyle({ look: "shadcn" }) or a scoped data-lr-look attribute. Listen for lr-style-change and read event.detail.style and event.detail.changed; the old theme and preset events are no longer emitted. For the complete project-by-project sequence, see [Upgrading from v23 to v24](v23-to-v24-migration.md).
+**Migrating the retired theme facade.** New code uses setLyraStyle() and getLyraStyle(). Map old auto mode to system, an old surface reference color to accentBackground, and an old token map to overrides; review custom CSS colors that share a gemstone name before choosing a named accent. Replace preset definitions with a LyraLook plus explicit style choices. Replace selectors for data-lr-theme-preset with the actual axis they need, such as data-lr-look="shadcn". Import theme.css in place of the removed fixed themes/shadcn.css facade and select the look with setLyraStyle({ look: "shadcn" }) or a scoped data-lr-look attribute. Listen for lr-style-change and read event.detail.style and event.detail.changed; the old theme and preset events are no longer emitted. For the complete project-by-project sequence, see [Upgrading from v23 to v24](v23-to-v24-migration.md).
 
 Historical v1 stored records remain readable by the runtime and bootstrap. The removed JavaScript functions, preset subpaths, preset event, root marker, and fixed stylesheet are not available in the current API.
 
@@ -5547,10 +5559,8 @@ mode and accent; the axes compose independently.
 
 ```js
 import '@aceshooting/lyra-ui/theme.css';
-import '@aceshooting/lyra-ui/looks/shadcn.css';
 import '@aceshooting/lyra-ui/looks/material.css';
 import '@aceshooting/lyra-ui/density.css';
-import '@aceshooting/lyra-ui/surfaces/glass.css';
 import '@aceshooting/lyra-ui/accents.css';
 import { setLyraStyle, resetLyraStyle, applyLyraStyleScope } from '@aceshooting/lyra-ui/theme.js';
 
@@ -5568,7 +5578,8 @@ inherit), without persistence or global events; clearing preserves later author
 reports requested axes and resolved mode.
 
 Set `data-lr-look`, `data-lr-surface`, `data-lr-density`, `data-lr-mode` and `data-lr-accent`
-directly if needed. Stylesheet look ids need their sheet; arbitrary ids neither load nor register.
+directly if needed. Shadcn and Lyra are included in `theme.css`; other stylesheet look ids need
+their optional sheet. Arbitrary ids neither load nor register.
 `defineLyraLook({ id, tokens })` defines a validated immutable runtime look;
 `lyraLookCss()` from `theme/look-css.js` creates CSS without DOM access. In app-owned shadow roots
 with local boundaries, install `theme.css` and selected sheets; selectors stop at roots, inheritance

package/llms/tokens.md

@@ -12,10 +12,13 @@ Every `lr-*` component resolves its styling through this two-layer token system,
    with a built-in fallback. Other tokens are aliases, computed or environment-backed values,
    or fixed contract constants. Every component renders correctly with no theme configured.
 
-For a ready-made light/dark base, import `@aceshooting/lyra-ui/theme.css` once and put
-`class="lr-light"`/`class="lr-dark"` (or `data-lr-theme="light"`/`"dark"`) on an ancestor.
-For the shadcn/ui look, also import `@aceshooting/lyra-ui/looks/shadcn.css` and select
-`data-lr-look="shadcn"` on the root or a scoped ancestor; look and mode remain independent.
+Import `@aceshooting/lyra-ui/theme.css` once for the built-in Shadcn, Glass and Emerald profile.
+`theme.css` already includes Shadcn; no separate Shadcn look import is required.
+Select `data-lr-look="shadcn"` on a scoped ancestor when needed. Choose light/dark mode with
+`class="lr-light"`/`class="lr-dark"`, `data-lr-theme`, or the independent `data-lr-mode` axis.
+Other stylesheet looks, such as Material, require their optional `looks/<look>.css` sheet.
+The separate `looks/shadcn.css` sheet remains optional for its scoped `.light`/`.dark`
+compatibility aliases; look and mode remain independent.
 See [Styles and tokens](./shared/styles-and-tokens.md) for runtime and stylesheet options.
 Per-component `--lr-<component>-*` custom properties (listed in each component's own section)
 override a single element without touching the shared layer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "25.3.0",
+  "version": "25.3.1",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -11832,7 +11832,7 @@
     "istanbul-lib-report": "^3.0.1",
     "istanbul-reports": "^3.2.0",
     "jszip": "^3.10.2",
-    "katex": "^0.18.9",
+    "katex": "^0.18.10",
     "libphonenumber-js": "^1.13.14",
     "mammoth": "^1.13.0",
     "maplibre-gl": "^6.11.2",
@@ -11843,10 +11843,10 @@
     "pixelmatch": "^7.2.0",
     "playwright": "^1.63.0",
     "pngjs": "^7.0.0",
-    "postal-mime": "^4.0.1",
+    "postal-mime": "^4.0.2",
     "qrcode": "^1.5.4",
     "react": "^19.3.0",
-    "shiki": "^4.4.3",
+    "shiki": "^4.5.0",
     "svelte": "^5.57.1",
     "typescript": "^7.0.2",
     "vue": "^3.5.43",