Оверлеї

Modal

Діалог із focus trap, ESC-close, scroll lock. Той самий physical + data-driven підхід: face лежить на base, recipe(ramp, stop) керує фоном тіла, header'ом, footer'ом і кнопкою «Скасувати». Кнопка дії — окремий picker.

import { Modal } from "@residence/glass-ui"

Налаштування · модалка · sapphire-100

Перемикач справа обирає, що зараз редагує picker.

01 · Палітра
02 · Hue · Сапфір
03 · Stop · 100

Прев'ю · sapphire-100 (light)

Три розміри модалки. Backdrop імітований темним полем за карткою.

Basic + footersize=md
Редагування контрагента
Усі зміни синхронізуються із supergraph.
Назва
ТОВ Київенерго
ЄДРПОУ
32450000
Коментар
Постачальник електроенергії.
Confirm · destructivesize=sm
Підтвердження сторно
Ця дія створить REVERSAL запис. Оригінал буде позначено як REVERSED.

Тіло модалки. Тут зазвичай форма або повідомлення.

With tabssize=lg
Платіжне доручення
Назва
ТОВ Київенерго
ЄДРПОУ
32450000
Коментар
Постачальник електроенергії.
Recipetoken=sapphire-100 · isDark=false
face   : #C8D8FB → #8FB1F8
base   : #5683F0 → #5683F0
border : #5683F0
ink    : #040A21
btn    : #1B45C8