Skip to content

Endfield Vision 2.2.13

Choose a tag to compare

@bYpaws bYpaws released this 03 Nov 14:17
· 2 commits to main since this release

Spotlight: point the user at one element. Everything is backward compatible.

New

  • spotlight(el, options). Highlights an existing element above the interface and returns dismiss. Called imperatively on a DOM element, so it works inside dialogs and portals and outside providers.
    • Everything else goes under the same blurred dim as the dialog backdrop, with a rounded cutout around the element (padding, radius, corners from --ev-radius-md).
    • Around the cutout: the focus ring settles in from a slight scale, and a thin wave in --ev-accent-edge leaves the ring, expands and fades, then starts again.
    • The element stays live: the layer lets the pointer through, focus: true moves focus inside it.
    • The layer sits above dialogs and dropdowns and below toasts (new --ev-z-spotlight token), so a toast explaining the highlight stays on top.
    • The cutout follows the element as it moves; the element is scrolled into view on start.
    • Dismissed by any pointer press, Escape (the first Escape closes only the spotlight, not the dialog under it), input inside the element or a timeout (timeout, 4 s by default). One spotlight at a time: a new call replaces the previous one.
    • With reduced motion: no scale, no wave, no fade.
    • spotlightPath (the cutout path) is exported too.

Install

npm install endfield-vision@2.2.13

The same build is attached to this release as an archive for installs without the registry.


По-русски

spotlight(el, options) - подсветка одного элемента поверх интерфейса: остальное под затемнением с размытием, вокруг элемента вырез, кольцо фокуса и расходящаяся волна. Элемент живой, focus: true ставит в него фокус. Слой выше окон и списков, ниже тостов (токен --ev-z-spotlight). Закрывается нажатием, Escape (первый - только подсветку), вводом в элементе или по таймеру. Все изменения обратно совместимы.