@eagami/ui 5.17.0 → 5.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.17.0",
+  "version": "5.17.2",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_mixins.scss

@@ -82,3 +82,16 @@
     opacity: 0.5;
   }
 }
+
+// Strips the geometry the UA stylesheet forces on a `[popover]` element (a
+// centred, viewport-filling, scrollable box) so a surface promoted into the top
+// layer keeps the box it has in the normal layer. Colour and spacing chrome
+// (`padding`, `border`, `background`, `color`) is left alone: a surface that
+// declares its own already wins, and one that does not resets it alongside the
+// include.
+@mixin top-layer-reset {
+  inset: auto;
+  overflow: visible;
+  width: auto;
+  height: auto;
+}

package/src/styles/_tooltip.scss

@@ -5,7 +5,10 @@
 // `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
 .ea-tooltip {
   z-index: var(--z-index-tooltip);
-  position: absolute;
+  // Viewport-relative, matching the coordinates the shared positioning helper
+  // returns. Also keeps the box unambiguous once the bubble is promoted into
+  // the top layer, where the containing block is the viewport either way.
+  position: fixed;
   // Template content can contain unbreakable element rows (avatars, icon rows)
   // that a max-width cannot wrap; let the bubble grow instead of clipping them
   min-width: min-content;
@@ -29,6 +32,12 @@
   @media (hover: none) {
     display: none;
   }
+
+  // The bubble already declares its own padding, border, background and color,
+  // so only the UA's popover geometry needs undoing once it is promoted.
+  &[popover] {
+    @include ea.top-layer-reset;
+  }
 }
 
 @keyframes ea-tooltip-fade-in {

package/types/eagami-ui.d.ts

@@ -2328,7 +2328,7 @@ declare class MenuComponent {
     private focusFirstItem;
     private focusItem;
     onKeydown(event: KeyboardEvent): void;
-    onEscape(): void;
+    onEscape(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "ea-menu", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, never, ["*"], true, never>;
 }
@@ -2805,7 +2805,7 @@ declare class PopoverComponent {
     private reposition;
     onDocumentClick(event: MouseEvent): void;
     onSurfaceKeydown(event: KeyboardEvent): void;
-    onEscape(): void;
+    onEscape(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoverComponent, "ea-popover", never, { "anchor": { "alias": "anchor"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "trapFocus": { "alias": "trapFocus"; "required": false; "isSignal": true; }; "surfaceId": { "alias": "surfaceId"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "clamp": { "alias": "clamp"; "required": false; "isSignal": true; }; "matchAnchorWidth": { "alias": "matchAnchorWidth"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; "isSignal": true; }; }, { "closeRequested": "closeRequested"; }, never, ["*"], true, never>;
 }