@eagami/ui 5.24.0 → 5.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.24.0",
+  "version": "5.25.0",
   "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/_tooltip.scss

@@ -9,9 +9,20 @@
   // 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;
+  // A bubble clamped to the viewport has nowhere left to overflow to, so what
+  // the cap cuts off scrolls inside it. Both axes: template content can hold
+  // rows (avatars, icon rows) too unbreakable to wrap
+  overflow: auto;
+  // The consumer's `maxWidth` arrives as `--ea-tooltip-max-width` so the viewport
+  // cap can win here instead of losing a specificity fight with an inline style.
+  // The directive reads the margin token too, so keep it a px length
+  max-width: min(
+    var(--ea-tooltip-max-width, 100vw),
+    calc(100vw - 2 * var(--ea-tooltip-viewport-margin, 8px))
+  );
+  // dvh, so retracting mobile browser chrome cannot leave the bubble taller than
+  // what the user can actually see
+  max-height: calc(100dvh - 2 * var(--ea-tooltip-viewport-margin, 8px));
   padding: var(--space-1-5) var(--space-2-5);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-xs);
@@ -29,6 +40,17 @@
   animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
   @include ea.elevated-surface-border;
 
+  // An explicit `maxWidth` is a width to wrap at, not only a width to stop at
+  &--wrapping {
+    white-space: normal;
+  }
+
+  // A bubble the cap cut content off from is the one kind worth reaching with a
+  // pointer, since it has a scrollbar; the rest stay click-through
+  &--scrollable {
+    pointer-events: auto;
+  }
+
   @media (hover: none) {
     display: none;
   }
@@ -37,6 +59,8 @@
   // so only the UA's popover geometry needs undoing once it is promoted.
   &[popover] {
     @include ea.top-layer-reset;
+    // the reset clears the UA popover's overflow, which the clamp still needs
+    overflow: auto;
   }
 }
 

package/types/eagami-ui.d.ts

@@ -3571,6 +3571,13 @@ type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
  * descendant of the host as well as the host itself. A host listener paired
  * with `eaTooltip` has to use `focusin` for the same reason: `focus` does not
  * bubble, so it never fires when the focus lands on a child.
+ *
+ * Bubbles never grow past the viewport: they clamp to it, minus
+ * `--ea-tooltip-viewport-margin` on each side, and scroll whatever the clamp
+ * cuts off. A clamped bubble takes pointer events so that scrollbar is
+ * reachable, which also means it waits `dismissDelay` before hiding rather than
+ * going the moment the pointer leaves the trigger. Bubbles that fit stay
+ * display-only.
  */
 declare class TooltipDirective implements OnDestroy {
     private readonly el;
@@ -3578,14 +3585,26 @@ declare class TooltipDirective implements OnDestroy {
     private readonly viewContainer;
     readonly eaTooltip: _angular_core.InputSignal<string | TemplateRef<unknown>>;
     readonly tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
-    /** Max width in px; the text wraps at this width. Clamped to a 50px floor. */
+    /**
+     * Max width in px; the text wraps at this width. Clamped to a 50px floor, and
+     * to the viewport, which no value can push the bubble past.
+     */
     readonly maxWidth: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Grace period in ms before a bubble the viewport clamp made scrollable hides
+     * after the pointer leaves, long enough to cross the gap onto the bubble and
+     * reach its scrollbar. Bubbles that fit hide immediately.
+     */
+    readonly dismissDelay: _angular_core.InputSignal<number>;
     private tooltipEl;
     private templateView;
+    private scrollable;
+    private hideTimer;
     private readonly tooltipId;
     private readonly hoverMql;
     private readonly showHandler;
     private readonly hideHandler;
+    private readonly bubbleEnterHandler;
     private readonly supportsFocusVisible;
     private readonly focusHandler;
     private readonly keydownHandler;
@@ -3599,14 +3618,18 @@ declare class TooltipDirective implements OnDestroy {
     private syncPointerListeners;
     private show;
     private shrinkToContent;
+    private requestHide;
+    private cancelPendingHide;
     private hide;
     private attachRepositionListeners;
     private detachRepositionListeners;
     private appendDescribedBy;
     private removeDescribedBy;
     private positionTooltip;
+    private viewportMargin;
+    private syncScrollable;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[eaTooltip]", never, { "eaTooltip": { "alias": "eaTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[eaTooltip]", never, { "eaTooltip": { "alias": "eaTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "dismissDelay": { "alias": "dismissDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Semantic colour scheme of a tag. */