@eagami/ui 5.17.1 → 5.18.0

package/fesm2022/eagami-ui.mjs

@@ -1,44 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, signal, inject, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID } from '@angular/core';
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-/**
- * Display name, flag, and reading direction for every built-in locale, in
- * language-switcher order: English first (the default fallback), then by each
- * language's own name (Latin scripts first, then Greek, Cyrillic, Hebrew,
- * Arabic, Devanagari, and Chinese by Unicode block order). Keyed by
- * `EagamiLocale` so a locale added to the union without an entry fails to
- * compile, keeping this single source exhaustive.
- */
-const LOCALE_DISPLAY = {
-    en: { label: 'English', flag: '🇬🇧', dir: 'ltr' },
-    de: { label: 'Deutsch', flag: '🇩🇪', dir: 'ltr' },
-    'es-ES': { label: 'Español', flag: '🇪🇸', dir: 'ltr' },
-    'fr-FR': { label: 'Français', flag: '🇫🇷', dir: 'ltr' },
-    is: { label: 'Íslenska', flag: '🇮🇸', dir: 'ltr' },
-    nl: { label: 'Nederlands', flag: '🇳🇱', dir: 'ltr' },
-    pl: { label: 'Polski', flag: '🇵🇱', dir: 'ltr' },
-    'pt-BR': { label: 'Português (Brasil)', flag: '🇧🇷', dir: 'ltr' },
-    el: { label: 'Ελληνικά', flag: '🇬🇷', dir: 'ltr' },
-    ru: { label: 'Русский', flag: '🇷🇺', dir: 'ltr' },
-    uk: { label: 'Українська', flag: '🇺🇦', dir: 'ltr' },
-    he: { label: 'עברית', flag: '🇮🇱', dir: 'rtl' },
-    ar: { label: 'العربية', flag: '🇸🇦', dir: 'rtl' },
-    hi: { label: 'हिन्दी', flag: '🇮🇳', dir: 'ltr' },
-    'zh-CN': { label: '中文', flag: '🇨🇳', dir: 'ltr' },
-};
-/**
- * Display metadata for every built-in locale. The single source the Storybook
- * locale toolbar and any consumer-built language switcher derive from, so the
- * displayed list never drifts from the locales the library ships.
- */
-const EAGAMI_LOCALE_META = Object.keys(LOCALE_DISPLAY).map(locale => ({ locale, ...LOCALE_DISPLAY[locale] }));
-/**
- * Supported locales for language switchers, in display order. Derived from
- * `EAGAMI_LOCALE_META` so the two never drift.
- */
-const EAGAMI_LOCALES = EAGAMI_LOCALE_META.map(m => m.locale);
+/** DI token carrying the consumer-supplied i18n configuration. */
+const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
 
 const STYLE_TAG_ID = 'eagami-palette';
 /**
@@ -51,8 +17,12 @@ const STYLE_TAG_ID = 'eagami-palette';
  * Idempotent: subsequent calls replace the previous stylesheet rather than
  * append, so a theme switcher can re-apply without leaking style tags.
  * No-ops outside a DOM context (SSR).
+ *
+ * Pass `nonce` under a `style-src` policy that requires one, or the browser
+ * drops the stylesheet and the app silently renders the library's own colours.
+ * `provideEagamiUi()` forwards Angular's `CSP_NONCE` automatically.
  */
-function applyPalette(palette) {
+function applyPalette(palette, nonce) {
     if (typeof document === 'undefined') {
         return;
     }
@@ -61,6 +31,10 @@ function applyPalette(palette) {
     if (!tag) {
         tag = document.createElement('style');
         tag.id = STYLE_TAG_ID;
+        // Before insertion: the policy is checked as the tag enters the document
+        if (nonce) {
+            tag.setAttribute('nonce', nonce);
+        }
         document.head.appendChild(tag);
     }
     tag.textContent = css;
@@ -347,8 +321,6 @@ function formatViolations(violations) {
     ].join('\n');
 }
 
-/** DI token carrying the consumer-supplied i18n configuration. */
-const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
 /**
  * Configures Eagami UI for the application.
  *
@@ -378,6 +350,10 @@ const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
  *   },
  * });
  * ```
+ *
+ * A `palette` installs a `<style>` tag at bootstrap, carrying Angular's
+ * `CSP_NONCE` when the app provides one, so a strict `style-src` policy admits
+ * it instead of dropping the theme.
  */
 function provideEagamiUi(config = {}) {
     const i18nConfig = {
@@ -397,11 +373,48 @@ function provideEagamiUi(config = {}) {
             if (violations.length > 0) {
                 throw new Error(formatViolations(violations));
             }
-            applyPalette(palette);
+            applyPalette(palette, inject(CSP_NONCE, { optional: true }));
         }),
     ]);
 }
 
+/**
+ * Display name, flag, and reading direction for every built-in locale, in
+ * language-switcher order: English first (the default fallback), then by each
+ * language's own name (Latin scripts first, then Greek, Cyrillic, Hebrew,
+ * Arabic, Devanagari, and Chinese by Unicode block order). Keyed by
+ * `EagamiLocale` so a locale added to the union without an entry fails to
+ * compile, keeping this single source exhaustive.
+ */
+const LOCALE_DISPLAY = {
+    en: { label: 'English', flag: '🇬🇧', dir: 'ltr' },
+    de: { label: 'Deutsch', flag: '🇩🇪', dir: 'ltr' },
+    'es-ES': { label: 'Español', flag: '🇪🇸', dir: 'ltr' },
+    'fr-FR': { label: 'Français', flag: '🇫🇷', dir: 'ltr' },
+    is: { label: 'Íslenska', flag: '🇮🇸', dir: 'ltr' },
+    nl: { label: 'Nederlands', flag: '🇳🇱', dir: 'ltr' },
+    pl: { label: 'Polski', flag: '🇵🇱', dir: 'ltr' },
+    'pt-BR': { label: 'Português (Brasil)', flag: '🇧🇷', dir: 'ltr' },
+    el: { label: 'Ελληνικά', flag: '🇬🇷', dir: 'ltr' },
+    ru: { label: 'Русский', flag: '🇷🇺', dir: 'ltr' },
+    uk: { label: 'Українська', flag: '🇺🇦', dir: 'ltr' },
+    he: { label: 'עברית', flag: '🇮🇱', dir: 'rtl' },
+    ar: { label: 'العربية', flag: '🇸🇦', dir: 'rtl' },
+    hi: { label: 'हिन्दी', flag: '🇮🇳', dir: 'ltr' },
+    'zh-CN': { label: '中文', flag: '🇨🇳', dir: 'ltr' },
+};
+/**
+ * Display metadata for every built-in locale. The single source the Storybook
+ * locale toolbar and any consumer-built language switcher derive from, so the
+ * displayed list never drifts from the locales the library ships.
+ */
+const EAGAMI_LOCALE_META = Object.keys(LOCALE_DISPLAY).map(locale => ({ locale, ...LOCALE_DISPLAY[locale] }));
+/**
+ * Supported locales for language switchers, in display order. Derived from
+ * `EAGAMI_LOCALE_META` so the two never drift.
+ */
+const EAGAMI_LOCALES = EAGAMI_LOCALE_META.map(m => m.locale);
+
 /**
  * Module-level signal that lets external tooling (notably the Storybook
  * preview decorator) imperatively override the active locale on a running
@@ -4328,6 +4341,73 @@ function isRtl(element) {
     return getComputedStyle(element).direction === 'rtl';
 }
 
+/*
+ * A modal `<dialog>` (`showModal()`) renders in the browser's top layer, which
+ * paints above every z-index in the normal layer. An overlay portaled to
+ * `<body>` therefore disappears behind the modal it was opened from, no matter
+ * how high `--z-index-popover` climbs. The popover API is the only way to join
+ * that layer; `manual` opts out of the UA's light-dismiss and Escape handling
+ * so the owning component keeps full control of dismissal. Top-layer elements
+ * stack in promotion order, so an overlay shown while a modal is open always
+ * lands above it.
+ *
+ * Promotion is deliberately conditional: outside a top-layer container the
+ * existing z-index scale already orders overlays against each other (toasts
+ * above popovers, tooltips above both), and promoting unconditionally would
+ * flatten that scale into "whatever opened last wins".
+ */
+const TOP_LAYER_CONTAINER = 'dialog:modal, :popover-open';
+// `selector()` takes one complex selector, so probing a comma-separated list
+// parses as invalid and answers false everywhere; test each selector alone
+let selectorSupport = null;
+function popoverSupported() {
+    if (typeof HTMLElement === 'undefined' ||
+        typeof HTMLElement.prototype.showPopover !== 'function' ||
+        typeof CSS === 'undefined') {
+        return false;
+    }
+    selectorSupport ??=
+        CSS.supports?.('selector(dialog:modal)') === true &&
+            CSS.supports?.('selector(:popover-open)') === true;
+    return selectorSupport;
+}
+function isPromoted(el) {
+    return el.hasAttribute('popover') && el.matches(':popover-open');
+}
+/**
+ * Raises `surface` into the top layer when `anchor` sits inside something
+ * that is already there. Callers must do this before measuring the surface: a
+ * `popover` element is `display: none` until shown, so any rect read while it
+ * is still hidden comes back zeroed.
+ */
+function enterTopLayer(surface, anchor) {
+    if (!popoverSupported() || !surface.isConnected || isPromoted(surface)) {
+        return;
+    }
+    if (!anchor.closest(TOP_LAYER_CONTAINER)) {
+        return;
+    }
+    surface.setAttribute('popover', 'manual');
+    try {
+        surface.showPopover();
+    }
+    catch {
+        // Refused promotion would leave the surface stuck at the UA's
+        // `display: none`, so drop back to plain z-index stacking
+        surface.removeAttribute('popover');
+    }
+}
+/** Returns `surface` to the normal layer, undoing {@link enterTopLayer}. */
+function leaveTopLayer(surface) {
+    if (!surface.hasAttribute('popover')) {
+        return;
+    }
+    if (surface.isConnected && isPromoted(surface)) {
+        surface.hidePopover();
+    }
+    surface.removeAttribute('popover');
+}
+
 /** True for cardinal placements that centre the popover on the perpendicular axis. */
 function isCardinal(placement) {
     return (placement === 'top' ||
@@ -4620,10 +4700,18 @@ class PopoverComponent {
             const anchor = this.resolveAnchor();
             const isOpen = this.open();
             if (!surface || !anchor || !isOpen) {
+                if (surface) {
+                    leaveTopLayer(surface);
+                }
                 this.position.set(null);
                 this.stable.set(false);
                 return;
             }
+            // Join the top layer before the first measurement below, so a popover
+            // opened from inside a modal is not painted behind it. Promoting first
+            // also gives the surface layout: a `popover` element is `display: none`
+            // until shown, and would measure as a zero-sized box.
+            enterTopLayer(surface, anchor);
             // Re-read inputs so signal subscriptions stay current after a re-open
             this.placement();
             this.offset();
@@ -4820,14 +4908,17 @@ class PopoverComponent {
             first.focus();
         }
     }
-    onEscape() {
+    onEscape(event) {
         if (!this.open() || !this.closeOnEscape()) {
             return;
         }
+        // Consume the key, or a native modal hosting this popover reads the same
+        // Escape as its own close request and both shut at once
+        event.preventDefault();
         this.closeRequested.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, properties: { "attr.role": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.role": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
@@ -4835,13 +4926,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[attr.role]': 'null',
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
-                    }, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}\n"] }]
+                    }, template: "<!--\n  The surface is rendered unconditionally so the `<ng-content/>` slot always\n  exists. If we gated it on `@if (open())`, Angular would re-project the\n  consumer's content at the popover host's position whenever the surface was\n  absent, leaking menu items / picker controls into the document flow (made\n  worse by `display: contents` on the host). Hiding via `display: none` keeps\n  the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n  #surfaceEl\n  [class]=\"surfaceClass()\"\n  [id]=\"surfaceId()\"\n  [attr.role]=\"open() ? role() : null\"\n  [attr.aria-label]=\"open() ? ariaLabel() : null\"\n  [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n  [attr.aria-hidden]=\"open() ? null : true\"\n  [style]=\"surfaceStyle()\"\n  (keydown)=\"onSurfaceKeydown($event)\">\n  <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"] }]
         }], ctorParameters: () => [], propDecorators: { surfaceEl: [{ type: i0.ViewChild, args: ['surfaceEl', { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], matchAnchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchAnchorWidth", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 /**
@@ -5662,6 +5753,10 @@ class TooltipDirective {
             this.renderer.setStyle(this.tooltipEl, 'white-space', 'normal');
         }
         this.renderer.appendChild(document.body, this.tooltipEl);
+        // Before any measuring below: a trigger inside a modal needs its bubble in
+        // the top layer to be visible at all, and a promoted bubble only has layout
+        // once shown.
+        enterTopLayer(this.tooltipEl, this.el.nativeElement);
         document.addEventListener('keydown', this.keydownHandler);
         this.appendDescribedBy();
         this.shrinkToContent();
@@ -5700,6 +5795,7 @@ class TooltipDirective {
         }
         if (this.tooltipEl) {
             document.removeEventListener('keydown', this.keydownHandler);
+            leaveTopLayer(this.tooltipEl);
             this.tooltipEl.remove();
             this.tooltipEl = null;
             this.templateView?.destroy();
@@ -5805,6 +5901,12 @@ class TooltipDirective {
             if (underBubble && !this.el.nativeElement.contains(underBubble)) {
                 let cursor = underBubble;
                 while (cursor && cursor !== document.body) {
+                    /* A fixed / sticky container that also holds the trigger (a modal
+                       dialog, a popover surface) is the surface the bubble sits on, not
+                       chrome covering it, so stop before mistaking it for an overlay. */
+                    if (cursor.contains(this.el.nativeElement)) {
+                        break;
+                    }
                     const pos = getComputedStyle(cursor).position;
                     if (pos === 'fixed' || pos === 'sticky') {
                         this.hide();
@@ -5814,8 +5916,8 @@ class TooltipDirective {
                 }
             }
         }
-        this.renderer.setStyle(this.tooltipEl, 'top', `${top + window.scrollY}px`);
-        this.renderer.setStyle(this.tooltipEl, 'left', `${left + window.scrollX}px`);
+        this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
+        this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: TooltipDirective, isStandalone: true, selector: "[eaTooltip]", inputs: { eaTooltip: { classPropertyName: "eaTooltip", publicName: "eaTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
@@ -9922,8 +10024,14 @@ class DrawerComponent {
         this.open.set(false);
         this.closed.emit();
     }
-    // Non-modal push drawers do not emit `cancel`, so Escape is handled here
+    // Non-modal push drawers do not emit `cancel`, so Escape is handled here.
+    // An overlay inside the drawer (menu, dropdown, picker) consumes the key it
+    // acts on, which a modal drawer honours through `cancel`; respect it here too
+    // so one press never dismisses both the overlay and the drawer.
     handleKeydown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
         if (this.mode() === 'push' && this.closeOnEscape() && event.key === 'Escape') {
             this.handleClose();
         }
@@ -12501,14 +12609,17 @@ class MenuComponent {
             this.focusItem(items[next]);
         }
     }
-    onEscape() {
+    onEscape(event) {
         if (!this.open()) {
             return;
         }
+        // Consume the key, or a native modal hosting this menu reads the same
+        // Escape as its own close request and both shut at once
+        event.preventDefault();
         this.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [aria-label]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n    [style.max-height]=\"maxHeight()\">\n    <ng-content />\n  </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n  [anchor]=\"triggerEl()\"\n  [open]=\"open()\"\n  [placement]=\"placement()\"\n  role=\"menu\"\n  [surfaceId]=\"id()\"\n  [aria-label]=\"resolvedAriaLabel()\"\n  [closeOnEscape]=\"false\"\n  scrollBehavior=\"reposition\"\n  (closeRequested)=\"onPopoverCloseRequested()\">\n  <div\n    #listEl\n    class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n    [style.max-height]=\"maxHeight()\">\n    <ng-content />\n  </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -12518,7 +12629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['document:keydown', ['$event']]
             }], onEscape: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 /**