endfield-vision 2.1.0 → 2.2.0

package/src/components/Toast.tsx

@@ -12,6 +12,8 @@ import { Button } from './Button'
  * четырёх карточек, остальные сворачиваются в строку «и ещё N».
  * Повторный показ с тем же id заменяет карточку - без дублей.
  * Действия: одно (action) - текстовая кнопка, несколько (actions) - строка кнопок.
+ * onClick - действие по клику на саму карточку (открыть диалог): заголовок
+ * становится кнопкой, растянутой на карточку, - с клавиатуры тоже доступно.
  */
 
 export type ToastTone = 'info' | 'success' | 'warning' | 'error'
@@ -35,6 +37,8 @@ export interface ToastOptions {
   action?: { label: string; onClick: () => void }
   /** Несколько действий - строка небольших кнопок («Открыть», «Отменить»). Вместе с action оно идёт первым. */
   actions?: ToastAction[]
+  /** Клик по карточке (не по её кнопкам): открыть диалог, запись. После него уведомление закрывается. */
+  onClick?: () => void
 }
 
 /** Карточка в хранилище. Экспортируется для тестов, в публичный API не входит. */
@@ -44,6 +48,7 @@ export interface ToastItem extends Required<Pick<ToastOptions, 'id' | 'tone'>> {
   duration: number | null
   action?: ToastOptions['action']
   actions?: ToastAction[]
+  onClick?: () => void
   createdAt: number
 }
 
@@ -74,6 +79,7 @@ function show(opts: ToastOptions): string {
     duration: opts.duration === undefined ? DEFAULT_DURATION[tone] : opts.duration,
     action: opts.action,
     actions: opts.actions && opts.actions.length > 0 ? opts.actions : undefined,
+    onClick: opts.onClick,
     createdAt: Date.now(),
   }
   const exists = items.some((t) => t.id === id)
@@ -166,6 +172,7 @@ export function ToastCard({ item }: { item: ToastItem }) {
       className="ev-toast ev-corners"
       data-corners="diagonal"
       data-tone={item.tone}
+      data-clickable={item.onClick ? '' : undefined}
       role={item.tone === 'error' ? 'alert' : 'status'}
       onMouseEnter={stop}
       onMouseLeave={start}
@@ -174,7 +181,20 @@ export function ToastCard({ item }: { item: ToastItem }) {
         {ICONS[item.tone]}
       </span>
       <div className="ev-toast-body">
-        <div className="ev-toast-title">{item.title}</div>
+        {item.onClick ? (
+          <button
+            type="button"
+            className="ev-toast-title ev-toast-open"
+            onClick={() => {
+              item.onClick?.()
+              dismiss(item.id)
+            }}
+          >
+            {item.title}
+          </button>
+        ) : (
+          <div className="ev-toast-title">{item.title}</div>
+        )}
         {item.description ? <div className="ev-toast-desc">{item.description}</div> : null}
         {item.actions ? (
           <div className="ev-toast-actions">

package/src/index.ts

@@ -25,6 +25,7 @@ export {
   themeBootstrap,
   ThemeScript,
   type Accent,
+  type AccentName,
   type Style,
   type Theme,
   type ThemePreference,
@@ -32,6 +33,7 @@ export {
   type ThemeScriptProps,
 } from './lib/theme-script'
 export { setAccent, setStyle, setTheme, useTheme, type ThemeState } from './lib/theme'
+export { AccentStyles, accentPresetCss, type AccentColors, type AccentPreset, type AccentStylesProps } from './lib/accent-preset'
 export { LocaleProvider, useLocale, useMessages, useNumberFormat, type LocaleProviderProps } from './lib/i18n'
 export { en, MESSAGES, resolveMessages, ru, type Locale, type Messages, type MessagesOverride } from './lib/i18n-messages'
 export { LinkProvider, UiLink, useLinkComponent, type LinkComponent } from './lib/link'
@@ -163,6 +165,7 @@ export {
   type DataTableProps,
   type FilterBarProps,
   type PaginationProps,
+  type RowAttributes,
   type SortDir,
   type SortState,
 } from './components/DataTable'
@@ -181,6 +184,7 @@ export {
   type ModalProps,
   type ModalsApi,
   type ModalSize,
+  type PromptOptions,
 } from './components/Modal'
 export { toast, Toaster, ToastProvider, useToast, type ToastAction, type ToastApi, type ToastOptions, type ToastTone } from './components/Toast'
 export { Timeline, type TimelineItem, type TimelineProps } from './components/Timeline'

package/src/lib/accent-preset.tsx

@@ -0,0 +1,109 @@
+/*
+ * Свой пресет акцента. Модуль без 'use client': CSS пресета собирается
+ * строкой и вставляется в <head> серверным layout (ThemeScript accents или
+ * AccentStyles) - акцент приложения есть с первой отрисовки, как встроенные.
+ *
+ * Пресет задаёт те же токены, что styles/accents.css, для тёмной и светлой
+ * темы и обоих стилей (Slim - свои значения или те же). После этого имя
+ * работает в data-accent, ThemeScript defaultAccent, setAccent и
+ * useTheme<Accent | 'brand'>().
+ *
+ * Контраст - как у встроенных: text к --ev-surface-1 >= 4.5:1, onStrong к
+ * strong >= 4.5:1 в каждой теме и стиле.
+ */
+
+import { normalizeHexColor } from './color'
+
+/** Цвета акцента для одной темы. Все значения - #RRGGBB (или #RGB). */
+export interface AccentColors {
+  /** Основной цвет: ссылки, активные элементы, мягкие заливки и кольцо фокуса (--ev-accent-rgb). */
+  accent: string
+  /** Текст акцентом на поверхности (--ev-accent-text). */
+  text: string
+  /** Заливка основной кнопки (--ev-accent-strong). */
+  strong: string
+  /** Заливка основной кнопки при наведении (--ev-accent-strong-hover). */
+  strongHover: string
+  /** Текст на заливке (--ev-text-on-accent). */
+  onStrong: string
+}
+
+export interface AccentPreset {
+  /** Имя для data-accent: латиница в нижнем регистре, цифры, дефис. Не 'indigo' (это базовый акцент). */
+  name: string
+  /** Образец для переключателей (--ev-accent-swatch-<name>): цвет или градиент. По умолчанию - accent тёмной темы. */
+  swatch?: string
+  dark: AccentColors
+  light: AccentColors
+  /** Значения для стиля Slim; без них - те же, что в стандартном стиле. */
+  slim?: { dark?: AccentColors; light?: AccentColors }
+}
+
+const LAYER_ORDER = '@layer ev.reset, ev.tokens, ev.base, ev.components, ev.shell, ev.styles, ev.utilities;'
+const NAME = /^[a-z][a-z0-9-]*$/
+
+function fail(message: string): never {
+  throw new Error(`endfield-vision: ${message}`)
+}
+
+function hex(preset: string, field: string, value: string): string {
+  const v = normalizeHexColor(value)
+  if (!v) fail(`accent "${preset}": ${field} must be a #RRGGBB color, got "${value}"`)
+  return v
+}
+
+function rgb(value: string): string {
+  const n = parseInt(value.slice(1), 16)
+  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`
+}
+
+function block(selector: string, preset: string, c: AccentColors): string {
+  const at = (field: keyof AccentColors) => hex(preset, field, c[field])
+  return [
+    `${selector} {`,
+    `  --ev-accent-rgb: ${rgb(at('accent'))};`,
+    `  --ev-accent-text: ${at('text')};`,
+    `  --ev-accent-strong: ${at('strong')};`,
+    `  --ev-accent-strong-hover: ${at('strongHover')};`,
+    `  --ev-text-on-accent: ${at('onStrong')};`,
+    '}',
+  ].join('\n')
+}
+
+/**
+ * CSS пресетов акцента: токены в слое ev.tokens. Селекторы с удвоенным
+ * :root сильнее встроенных - пресет может и переопределить встроенный
+ * (например, свой emerald), и не зависит от порядка стилей в <head>.
+ */
+export function accentPresetCss(presets: AccentPreset | readonly AccentPreset[]): string {
+  const list = Array.isArray(presets) ? presets : [presets as AccentPreset]
+  const rules: string[] = []
+  for (const p of list) {
+    if (!NAME.test(p.name)) fail(`accent name "${p.name}" must match ${NAME}`)
+    if (p.name === 'indigo') fail('accent "indigo" is the base accent; override its tokens on :root instead')
+    const swatch = p.swatch ?? hex(p.name, 'dark.accent', p.dark.accent)
+    if (/[<>{};]/.test(swatch)) fail(`accent "${p.name}": swatch must be a plain CSS color or gradient`)
+    const at = `[data-accent='${p.name}']`
+    rules.push(
+      `:root:root {\n  --ev-accent-swatch-${p.name}: ${swatch};\n}`,
+      block(`:root:root${at}`, p.name, p.dark),
+      block(`:root:root[data-theme='light']${at}`, p.name, p.light),
+      block(`:root:root[data-style='slim']${at}`, p.name, p.slim?.dark ?? p.dark),
+      block(`:root:root[data-style='slim'][data-theme='light']${at}`, p.name, p.slim?.light ?? p.light),
+    )
+  }
+  // Порядок слоёв повторяется: стиль может оказаться в <head> раньше стилей библиотеки.
+  return `${LAYER_ORDER}\n@layer ev.tokens {\n${rules.join('\n')}\n}`
+}
+
+export interface AccentStylesProps {
+  accents: readonly AccentPreset[]
+  /** nonce для строгой CSP (style-src 'nonce-...'). */
+  nonce?: string
+}
+
+/** <style> с пресетами акцента для <head>. Подходит для серверных компонентов. */
+export function AccentStyles({ accents, nonce }: AccentStylesProps) {
+  if (accents.length === 0) return null
+  return <style nonce={nonce} data-ev-accents="" dangerouslySetInnerHTML={{ __html: accentPresetCss(accents) }} />
+}

package/src/lib/i18n-messages.ts

@@ -81,6 +81,10 @@ export interface Messages {
     selectAllOnPage: string
     selectRow: string
     selectAllRows: string
+    expandRow: string
+    collapseRow: string
+    /** Заголовок итоговой карточки на узком экране. */
+    total: string
   }
   pagination: {
     noRecords: string
@@ -107,7 +111,7 @@ export interface Messages {
     /** Названия стран в списке кодов телефона. */
     countries: Record<PhoneCountry, string>
   }
-  modal: { actionFailed: string }
+  modal: { actionFailed: string; required: string }
   select: {
     placeholder: string
     multiPlaceholder: string
@@ -163,6 +167,8 @@ export interface Messages {
     hintNavigate: string
     hintSelect: string
     hintClose: string
+    /** Идёт поиск (результаты с сервера). */
+    searching: string
   }
   steps: {
     label: string
@@ -423,6 +429,9 @@ export const ru: Messages = {
     selectAllOnPage: 'Выбрать все на странице',
     selectRow: 'Выбрать строку',
     selectAllRows: 'Выбрать все строки на странице',
+    expandRow: 'Раскрыть строку',
+    collapseRow: 'Свернуть строку',
+    total: 'Итого',
   },
   pagination: {
     noRecords: 'Нет записей',
@@ -471,7 +480,7 @@ export const ru: Messages = {
       CN: 'Китай',
     },
   },
-  modal: { actionFailed: 'Не удалось выполнить действие' },
+  modal: { actionFailed: 'Не удалось выполнить действие', required: 'Заполните поле' },
   select: {
     placeholder: 'Выберите',
     multiPlaceholder: 'Не выбрано',
@@ -525,6 +534,7 @@ export const ru: Messages = {
     hintNavigate: 'выбор',
     hintSelect: 'открыть',
     hintClose: 'закрыть',
+    searching: 'Поиск...',
   },
   steps: {
     label: 'Шаги',
@@ -771,6 +781,9 @@ export const en: Messages = {
     selectAllOnPage: 'Select all on this page',
     selectRow: 'Select row',
     selectAllRows: 'Select all rows on this page',
+    expandRow: 'Expand row',
+    collapseRow: 'Collapse row',
+    total: 'Total',
   },
   pagination: {
     noRecords: 'No records',
@@ -819,7 +832,7 @@ export const en: Messages = {
       CN: 'China',
     },
   },
-  modal: { actionFailed: 'The action failed' },
+  modal: { actionFailed: 'The action failed', required: 'This field is required' },
   select: {
     placeholder: 'Select',
     multiPlaceholder: 'None selected',
@@ -873,6 +886,7 @@ export const en: Messages = {
     hintNavigate: 'navigate',
     hintSelect: 'open',
     hintClose: 'close',
+    searching: 'Searching...',
   },
   steps: {
     label: 'Progress',

package/src/lib/theme-script.tsx

@@ -1,3 +1,5 @@
+import { AccentStyles, type AccentPreset } from './accent-preset'
+
 /*
  * Скрипт темы для <head>. Модуль без 'use client': серверный layout
  * вставляет строку как есть, до первой отрисовки - без вспышки другой темы.
@@ -8,8 +10,11 @@
 
 export type Theme = 'dark' | 'light'
 export type ThemePreference = Theme | 'system'
+/** Встроенные пресеты акцента (styles/accents.css). */
 export const ACCENTS = ['indigo', 'amber', 'emerald', 'cyan', 'rose', 'violet', 'ink'] as const
 export type Accent = (typeof ACCENTS)[number]
+/** Имя акцента: встроенный пресет или свой (AccentPreset, ThemeScript accents). */
+export type AccentName = Accent | (string & {})
 /** Стили оформления: те же размеры и раскладка, другая подача. */
 export const STYLES = ['default', 'slim'] as const
 export type Style = (typeof STYLES)[number]
@@ -21,8 +26,8 @@ export const STYLE_STORAGE_KEY = 'ev-style'
 export interface ThemeScriptOptions {
   /** Тема без сохранённого выбора. По умолчанию - 'dark'. */
   defaultTheme?: ThemePreference
-  /** Акцент без сохранённого выбора. По умолчанию - 'indigo'. */
-  defaultAccent?: Accent
+  /** Акцент без сохранённого выбора: встроенный или свой. По умолчанию - 'indigo'. */
+  defaultAccent?: AccentName
   /** Стиль без сохранённого выбора. По умолчанию - 'default'. */
   defaultStyle?: Style
   themeKey?: string
@@ -44,11 +49,20 @@ export function themeBootstrap({
 }
 
 export interface ThemeScriptProps extends ThemeScriptOptions {
-  /** nonce для строгой CSP (script-src 'nonce-...'): тот же, что у остальных скриптов страницы. */
+  /** nonce для строгой CSP (script-src / style-src 'nonce-...'): тот же, что у остальных скриптов страницы. */
   nonce?: string
+  /** Свои пресеты акцента: их токены вставляются рядом со скриптом (<style>). */
+  accents?: readonly AccentPreset[]
 }
 
 /** Скрипт для <head> корневого layout. Не требует клиента: подходит для серверных компонентов. */
-export function ThemeScript({ nonce, ...options }: ThemeScriptProps) {
-  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeBootstrap(options) }} />
+export function ThemeScript({ nonce, accents, ...options }: ThemeScriptProps) {
+  const script = <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeBootstrap(options) }} />
+  if (!accents || accents.length === 0) return script
+  return (
+    <>
+      <AccentStyles accents={accents} nonce={nonce} />
+      {script}
+    </>
+  )
 }

package/src/lib/theme.ts

@@ -6,6 +6,7 @@ import {
   STYLE_STORAGE_KEY,
   THEME_STORAGE_KEY,
   type Accent,
+  type AccentName,
   type Style,
   type Theme,
   type ThemePreference,
@@ -49,8 +50,8 @@ function readPreference(): ThemePreference {
   return p === 'system' || p === 'light' ? p : p === 'dark' ? 'dark' : readTheme()
 }
 
-function readAccent(): Accent {
-  return (document.documentElement.dataset.accent as Accent | undefined) ?? 'indigo'
+function readAccent(): string {
+  return document.documentElement.dataset.accent ?? 'indigo'
 }
 
 function readStyle(): Style {
@@ -66,8 +67,8 @@ export function setTheme(pref: ThemePreference, { persist = true, storageKey = T
   emit()
 }
 
-/** Акцент из пресетов (styles/accents.css). 'indigo' - базовый, атрибут снимается. */
-export function setAccent(accent: Accent, { persist = true, storageKey = ACCENT_STORAGE_KEY } = {}): void {
+/** Акцент: встроенный пресет (styles/accents.css) или свой (AccentPreset). 'indigo' - базовый, атрибут снимается. */
+export function setAccent(accent: AccentName, { persist = true, storageKey = ACCENT_STORAGE_KEY } = {}): void {
   const root = document.documentElement
   if (accent === 'indigo') delete root.dataset.accent
   else root.dataset.accent = accent
@@ -84,22 +85,26 @@ export function setStyle(style: Style, { persist = true, storageKey = STYLE_STOR
   emit()
 }
 
-export interface ThemeState {
+/**
+ * Состояние темы. A - имена акцентов приложения: по умолчанию встроенные;
+ * со своими пресетами - useTheme<Accent | 'brand'>().
+ */
+export interface ThemeState<A extends string = Accent> {
   /** Действующая тема. */
   theme: Theme
   /** Выбор пользователя (может быть 'system'). */
   preference: ThemePreference
-  accent: Accent
+  accent: A
   style: Style
   setTheme: typeof setTheme
   setAccent: typeof setAccent
   setStyle: typeof setStyle
 }
 
-export function useTheme(): ThemeState {
+export function useTheme<A extends string = Accent>(): ThemeState<A> {
   const theme = useSyncExternalStore(subscribe, readTheme, () => 'dark' as Theme)
   const preference = useSyncExternalStore(subscribe, readPreference, () => 'dark' as ThemePreference)
-  const accent = useSyncExternalStore(subscribe, readAccent, () => 'indigo' as Accent)
+  const accent = useSyncExternalStore(subscribe, readAccent, () => 'indigo') as A
   const style = useSyncExternalStore(subscribe, readStyle, () => 'default' as Style)
 
   // Режим 'system': следим за сменой темы ОС.

package/src/styles/accents.css

@@ -115,7 +115,7 @@
   }
 
   /*
-   * Стиль Slim: те же пресеты, приглушённые под тёплые нейтрали.
+   * Стиль Slim: те же пресеты, приглушённые под нейтрали стиля.
    * indigo - без атрибута data-accent.
    */
   :root[data-style='slim']:not([data-accent]) {
@@ -167,11 +167,11 @@
   }
 
   :root[data-style='slim'][data-accent='ink'] {
-    --ev-accent-rgb: 200, 196, 186;
-    --ev-accent-text: #e2dfd8;
-    --ev-accent-strong: #e8e6df;
-    --ev-accent-strong-hover: #f4f2ec;
-    --ev-text-on-accent: #1c1b18;
+    --ev-accent-rgb: 200, 198, 192;
+    --ev-accent-text: #e2e0db;
+    --ev-accent-strong: #e9e8e3;
+    --ev-accent-strong-hover: #f5f4f0;
+    --ev-text-on-accent: #181817;
   }
 
   :root[data-style='slim'][data-theme='light']:not([data-accent]) {

package/src/styles/components/data.css

@@ -131,6 +131,20 @@
     box-shadow: inset 0 1px 0 var(--ev-selected-edge), inset 0 -1px 0 var(--ev-selected-edge);
   }
 
+  /* Тон строки (rowTone): тонированный фон, наведение - тинт поверх него. */
+  .ev-table tbody tr[data-tone],
+  .ev-table-card[data-tone] {
+    --ev-tone-row: color-mix(in srgb, var(--ev-tone-soft) 65%, transparent);
+  }
+
+  .ev-table tbody tr[data-tone] > td {
+    background: var(--ev-tone-row);
+  }
+
+  .ev-table tbody tr[data-tone]:hover > td {
+    background: linear-gradient(var(--ev-hover), var(--ev-hover)), var(--ev-tone-row);
+  }
+
   .ev-table tbody tr[data-selected] td {
     background: var(--ev-selected-bg-subtle);
   }
@@ -139,6 +153,89 @@
     color: var(--ev-text-muted);
   }
 
+  /* --- Раскрывающиеся строки --- */
+  .ev-table .ev-table-expand {
+    width: 40px;
+    padding-right: 0;
+  }
+
+  .ev-table-expand-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin: 0 -4px;
+    border-radius: var(--ev-radius-xs);
+    color: var(--ev-text-muted);
+    vertical-align: middle;
+  }
+
+  .ev-table-expand-btn:hover {
+    background: var(--ev-hover);
+    color: var(--ev-text);
+  }
+
+  .ev-table-expand-btn svg {
+    transition: transform var(--ev-dur-fast) var(--ev-ease);
+  }
+
+  .ev-table-expand-btn[aria-expanded='true'] svg {
+    transform: rotate(90deg);
+  }
+
+  .ev-table tbody tr[data-expanded]:not([data-tone], [data-selected]) > td {
+    background: var(--ev-tint-1);
+  }
+
+  .ev-table tbody tr[data-expanded] > td {
+    border-bottom-color: transparent;
+  }
+
+  .ev-table .ev-table-detail-row > td {
+    height: auto;
+    padding: 0;
+    white-space: normal;
+    background: var(--ev-tint-1);
+  }
+
+  .ev-table-detail {
+    padding: var(--ev-space-2) var(--ev-space-5) var(--ev-space-5);
+  }
+
+  .ev-card-body-flush .ev-table-detail {
+    padding-inline: var(--ev-space-6);
+  }
+
+  /* --- Итоговая строка --- */
+  .ev-table tfoot td {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--ev-z-sticky);
+    height: 40px;
+    background: var(--ev-surface-2);
+    border-top: 1px solid var(--ev-border);
+    border-bottom: 0;
+    font-weight: var(--ev-fw-medium);
+  }
+
+  :is(.ev-card, .ev-panel, .ev-modal, .ev-drawer) .ev-table tfoot td {
+    background: var(--ev-surface-3);
+  }
+
+  .ev-card-body-flush .ev-table tfoot td {
+    background: var(--ev-surface-2);
+  }
+
+  /* --- Шапка, липнущая к странице (stickyHeader): сдвиг считает DataTable --- */
+  .ev-table[data-sticky-page] thead th {
+    transform: translateY(var(--ev-thead-shift, 0px));
+  }
+
+  .ev-table[data-stuck] thead th {
+    box-shadow: var(--ev-shadow-sm);
+  }
+
   .ev-table-select {
     width: 44px;
     padding-right: 0 !important;
@@ -258,6 +355,29 @@
     opacity: 0.7;
   }
 
+  .ev-table-card[data-tone]:not([data-selected]) {
+    background-image: linear-gradient(var(--ev-tone-row), var(--ev-tone-row));
+  }
+
+  .ev-table-card[data-tone][data-clickable]:not([data-selected]):active {
+    background-image: linear-gradient(var(--ev-active), var(--ev-active)), linear-gradient(var(--ev-tone-row), var(--ev-tone-row));
+  }
+
+  .ev-table-card-head .ev-table-expand-btn {
+    flex: 0 0 auto;
+    margin: -2px -4px 0 0;
+  }
+
+  .ev-table-card-detail {
+    padding-top: var(--ev-space-3);
+    border-top: 1px solid var(--ev-border-soft);
+    min-width: 0;
+  }
+
+  .ev-table-card-total {
+    background: var(--ev-surface-2);
+  }
+
   .ev-table-card-head {
     display: flex;
     align-items: flex-start;

package/src/styles/components/navigation.css

@@ -34,6 +34,12 @@
     color: var(--ev-text-muted);
   }
 
+  .ev-cmdk-spinner {
+    display: inline-flex;
+    width: 17px;
+    justify-content: center;
+  }
+
   .ev-cmdk-input {
     flex: 1 1 auto;
     min-width: 0;

package/src/styles/components/overlay.css

@@ -276,6 +276,12 @@
     padding: 0;
   }
 
+  .ev-modal-prompt {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ev-space-4);
+  }
+
   .ev-modal-message {
     color: var(--ev-text-secondary);
     line-height: 1.55;
@@ -462,6 +468,43 @@
     font-weight: var(--ev-fw-semibold);
   }
 
+  /* Карточка с onClick: заголовок - кнопка, растянутая на карточку; кнопки карточки - поверх неё. */
+  .ev-toast-open {
+    display: block;
+    padding: 0;
+    color: inherit;
+    text-align: left;
+  }
+
+  .ev-toast-open::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+
+  .ev-toast-open:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .ev-toast-open:focus-visible::after {
+    box-shadow: var(--ev-focus-ring);
+  }
+
+  .ev-toast[data-clickable] {
+    cursor: pointer;
+  }
+
+  .ev-toast[data-clickable]:hover {
+    background-image: linear-gradient(var(--ev-tint-2), var(--ev-tint-2));
+  }
+
+  .ev-toast[data-clickable] :is(.ev-toast-action, .ev-toast-actions, .ev-toast-close) {
+    position: relative;
+    z-index: 1;
+  }
+
   .ev-toast-desc {
     margin-top: 2px;
     font-size: var(--ev-fs-sm);

package/src/styles/shell.css

@@ -2,6 +2,8 @@
 
 @layer ev.shell {
   .ev-shell {
+    /* Шапка таблицы со stickyHeader липнет под шапкой приложения. */
+    --ev-table-sticky-top: var(--ev-topbar-h);
     display: flex;
     min-height: 100dvh;
     width: 100%;