@eagami/ui 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/src/styles/_tooltip.scss
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
// TOOLTIP GLOBAL STYLES
|
|
3
3
|
// =============================================================================
|
|
4
4
|
|
|
5
|
+
// Belt-and-braces guard against "sticky hover" on touch devices, which fire
|
|
6
|
+
// `mouseenter` on tap but never the matching `mouseleave`. The directive also
|
|
7
|
+
// gates pointer listeners on `(hover: hover)`, but if a tooltip ever slips
|
|
8
|
+
// through (e.g. from a custom integration), keep it invisible on touch.
|
|
5
9
|
.ea-tooltip {
|
|
6
10
|
z-index: var(--z-index-tooltip);
|
|
7
11
|
position: absolute;
|
|
@@ -16,6 +20,10 @@
|
|
|
16
20
|
color: var(--color-neutral-0);
|
|
17
21
|
pointer-events: none;
|
|
18
22
|
animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
|
|
23
|
+
|
|
24
|
+
@media (hover: none) {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
19
27
|
}
|
|
20
28
|
|
|
21
29
|
@keyframes ea-tooltip-fade-in {
|
|
@@ -35,14 +35,15 @@
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
// Dark mode — black drop shadows are nearly invisible against a near-black
|
|
38
|
-
// page, so flip the shadow
|
|
38
|
+
// page, so flip the shadow colour to white at low alpha. The soft fade is what
|
|
39
39
|
// reads as a cast shadow; against a dark page, white-at-low-alpha blends to a
|
|
40
40
|
// muted dark gray that mirrors the role black-at-low-alpha plays in light mode.
|
|
41
|
-
// xl
|
|
42
|
-
//
|
|
43
|
-
//
|
|
44
|
-
//
|
|
45
|
-
//
|
|
41
|
+
// The larger tokens (xl, 2xl) use both tighter offset/blur and lower alpha than
|
|
42
|
+
// their light-mode counterparts — at light-mode geometry a white fade reads as
|
|
43
|
+
// a halo around the surface rather than a shadow beneath it. The
|
|
44
|
+
// `:not([data-theme='light'])` clause lets consumers force light mode via
|
|
45
|
+
// `<html data-theme="light">` even when the OS prefers dark, and the matching
|
|
46
|
+
// `[data-theme='dark']` block forces dark mode regardless of OS.
|
|
46
47
|
@mixin dark-elevation-tokens {
|
|
47
48
|
--shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.04);
|
|
48
49
|
--shadow-sm:
|
|
@@ -52,8 +53,8 @@
|
|
|
52
53
|
--shadow-lg:
|
|
53
54
|
0 8px 12px -2px rgba(255, 255, 255, 0.08), 0 3px 5px -3px rgba(255, 255, 255, 0.05);
|
|
54
55
|
--shadow-xl:
|
|
55
|
-
0 12px 18px -4px rgba(255, 255, 255, 0.
|
|
56
|
-
--shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.
|
|
56
|
+
0 12px 18px -4px rgba(255, 255, 255, 0.05), 0 5px 8px -4px rgba(255, 255, 255, 0.03);
|
|
57
|
+
--shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.06);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
@media (prefers-color-scheme: dark) {
|
package/types/eagami-ui.d.ts
CHANGED
|
@@ -2011,11 +2011,14 @@ declare class TooltipDirective implements OnDestroy {
|
|
|
2011
2011
|
readonly tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
|
|
2012
2012
|
private tooltipEl;
|
|
2013
2013
|
private readonly tooltipId;
|
|
2014
|
+
private readonly hoverMql;
|
|
2014
2015
|
private readonly showHandler;
|
|
2015
2016
|
private readonly hideHandler;
|
|
2016
2017
|
private readonly keydownHandler;
|
|
2018
|
+
private readonly hoverChangeHandler;
|
|
2017
2019
|
constructor();
|
|
2018
2020
|
ngOnDestroy(): void;
|
|
2021
|
+
private syncPointerListeners;
|
|
2019
2022
|
private show;
|
|
2020
2023
|
private hide;
|
|
2021
2024
|
private appendDescribedBy;
|