@eagami/ui 4.3.1 → 4.5.0
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/README.md +1 -1
- package/fesm2022/eagami-ui.mjs +438 -94
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_mixins.scss +24 -1
- package/src/styles/_tooltip.scss +3 -0
- package/types/eagami-ui.d.ts +1 -1
package/package.json
CHANGED
package/src/styles/_mixins.scss
CHANGED
|
@@ -2,6 +2,29 @@
|
|
|
2
2
|
// @use '../../styles/mixins' as ea;
|
|
3
3
|
// .ea-foo__close { @include ea.icon-button; }
|
|
4
4
|
|
|
5
|
+
// Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
|
|
6
|
+
// is dropped in forced-colors (Windows High Contrast) mode, which would leave
|
|
7
|
+
// keyboard users with no visible focus. Pair the halo with a real outline that
|
|
8
|
+
// only renders in forced-colors so the ring survives there. Pass the full
|
|
9
|
+
// box-shadow value to compose the ring with an existing shadow.
|
|
10
|
+
@mixin focus-ring($ring: var(--shadow-focus-ring)) {
|
|
11
|
+
box-shadow: $ring;
|
|
12
|
+
|
|
13
|
+
@media (forced-colors: active) {
|
|
14
|
+
outline: 2px solid Highlight;
|
|
15
|
+
outline-offset: 2px;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Floating surfaces (menus, dialogs, popovers, toasts) lean on elevation shadow
|
|
20
|
+
// for their boundary, but shadows are dropped in forced-colors mode. Add a
|
|
21
|
+
// hairline border there so the surface stays separated from the content behind.
|
|
22
|
+
@mixin elevated-surface-border {
|
|
23
|
+
@media (forced-colors: active) {
|
|
24
|
+
border: 1px solid CanvasText;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
5
28
|
// Standard icon button: clear, close/dismiss, password-toggle, nav, etc. The box
|
|
6
29
|
// is `--ea-icon-button-size` (em) so it scales with the host component's size and
|
|
7
30
|
// is consistent across components at a given size tier. The glyph is enlarged so
|
|
@@ -35,7 +58,7 @@
|
|
|
35
58
|
|
|
36
59
|
&:focus-visible {
|
|
37
60
|
outline: none;
|
|
38
|
-
|
|
61
|
+
@include focus-ring;
|
|
39
62
|
}
|
|
40
63
|
|
|
41
64
|
&:disabled {
|
package/src/styles/_tooltip.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use 'mixins' as ea;
|
|
2
|
+
|
|
1
3
|
// Guard against "sticky hover" on touch devices, which fire `mouseenter` on tap
|
|
2
4
|
// but never the matching `mouseleave`. The directive gates pointer listeners on
|
|
3
5
|
// `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
|
|
@@ -19,6 +21,7 @@
|
|
|
19
21
|
color: var(--color-neutral-0);
|
|
20
22
|
pointer-events: none;
|
|
21
23
|
animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
|
|
24
|
+
@include ea.elevated-surface-border;
|
|
22
25
|
|
|
23
26
|
@media (hover: none) {
|
|
24
27
|
display: none;
|
package/types/eagami-ui.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import * as _eagami_ui from '@eagami/ui';
|
|
|
7
7
|
* BCP 47 locale tags supported out of the box. Consumers select one of these
|
|
8
8
|
* via `provideEagamiUi({ locale })` or `EagamiI18nService.setLocale()`.
|
|
9
9
|
*/
|
|
10
|
-
type EagamiLocale = 'en' | '
|
|
10
|
+
type EagamiLocale = 'en' | 'de' | 'es-ES' | 'fr-FR' | 'is' | 'nl' | 'pl' | 'pt-BR' | 'el' | 'ru' | 'uk' | 'zh-CN';
|
|
11
11
|
/**
|
|
12
12
|
* Display metadata for a built-in locale: the language's name in its own
|
|
13
13
|
* language and a representative flag emoji.
|