chuijs 4.0.3 → 4.0.4

package/framework/appLayout/default/chui_app_layout.js

@@ -1,4 +1,5 @@
 const { Animation } = require("../../modules/chui_animations/animations");
+const { reducedMotion, tokenTime } = require("../../modules/chui_animations/motion");
 const { Icon, Icons } = require("../../components/chui_icons/icons");
 const { Button } = require("../../components/chui_button/button");
 // НАСТРОЙКИ
@@ -8,7 +9,7 @@ const { ContentBlock } = require("../../components/chui_content_block/content_bl
 const { Popup } = require("../../components/chui_popups/popups");
 const { UpdateNotification } = require("../../components/chui_notification/notification_update");
 const { ipcRenderer } = require("electron");
-const chui_functions = require("../../modules/chui_functions");
+const chuiFunctions = require("../../modules/chui_functions");
 const { DownloadNotification } = require("../../components/chui_notification/notification_download");
 const { Log } = require("../../../framework/modules/chui_logger/chui_logger");
 const { MenuKeyboard, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
@@ -22,13 +23,13 @@ const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 const fs = require("fs");
 
 // Глобальные обработчики ошибок renderer-процесса вешаются один раз на процесс
-let app_error_handlers_installed = false;
+let appErrorHandlersInstalled = false;
 
 class Events {
-    #route_event = undefined;
+    #routeEvent = undefined;
     constructor() {}
     route(page) {
-        this.#route_event = new CustomEvent("route_event_" + page.constructor.name, {
+        this.#routeEvent = new CustomEvent("route_event_" + page.constructor.name, {
             bubbles: true,
             detail: {
                 class: page.constructor.name,
@@ -36,7 +37,7 @@ class Events {
                 page: page,
             },
         });
-        document.dispatchEvent(this.#route_event);
+        document.dispatchEvent(this.#routeEvent);
     }
 }
 
@@ -52,19 +53,19 @@ const USER_DROPDOWN_EDGE = 8;
  * а рядом висело название страницы. Класс на шапке прячет page_name — см. global_style.css.
  */
 function applyPageMenuBar(header, menuBar) {
-    const page_name = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
+    const pageName = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
     const previous = header.querySelector("chui_menu_bar_main");
     // Панели выпадающих списков живут в body (у шапки свой backdrop-filter), а не в полосе,
     // поэтому снятие полосы обязано убирать и их: иначе на каждой смене страницы в body
     // оставалась бы пачка невидимых панелей. Своя же полоса, вернувшаяся на место, не трогается.
     if (previous !== null && previous !== menuBar) MenuBar.destroy(previous);
     if (previous !== null) previous.remove();
-    const has_menu_bar = menuBar !== undefined && menuBar !== null;
-    header.classList.toggle(HEADER_WITH_MENU_BAR_CLASS, has_menu_bar);
-    if (!has_menu_bar) return;
+    const hasMenuBar = menuBar !== undefined && menuBar !== null;
+    header.classList.toggle(HEADER_WITH_MENU_BAR_CLASS, hasMenuBar);
+    if (!hasMenuBar) return;
     new Animation(menuBar).fadeIn();
     // Полоса встаёт туда же, где стояло название — сразу за кнопкой меню маршрутов
-    page_name.after(menuBar);
+    pageName.after(menuBar);
 }
 
 /**
@@ -75,9 +76,9 @@ function applyPageMenuBar(header, menuBar) {
  * многоточием (см. `page_name` в global_style.css), и прочитать его целиком можно только так.
  */
 function setPageName(title = String()) {
-    const page_name = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
-    page_name.innerHTML = String(title);
-    page_name.setAttribute("title", page_name.innerText);
+    const pageName = requireLayoutNode(LAYOUT_ROLE.PAGE_NAME);
+    pageName.innerHTML = String(title);
+    pageName.setAttribute("title", pageName.innerText);
 }
 
 class Route extends Events {
@@ -85,7 +86,7 @@ class Route extends Events {
         super();
     }
     go(page) {
-        let center = requireLayoutNode(LAYOUT_ROLE.CENTER);
+        const center = requireLayoutNode(LAYOUT_ROLE.CENTER);
         //
         setPageName(page.getTitle());
         center.innerHTML = "";
@@ -132,22 +133,22 @@ function makeHeaderButtonBox(options = { title: undefined, icon: undefined, reve
     const button = document.createElement("header_button");
     const title = document.createElement("header_button_title");
     const icon = document.createElement("header_button_icon");
-    const has_title = options.title !== undefined && options.title !== null && options.title !== "";
-    const has_icon = options.icon !== undefined && options.icon !== null;
-    if (has_title) title.innerText = options.title;
-    if (has_icon) icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
-    if (has_title && has_icon) {
+    const hasTitle = options.title !== undefined && options.title !== null && options.title !== "";
+    const hasIcon = options.icon !== undefined && options.icon !== null;
+    if (hasTitle) title.innerText = options.title;
+    if (hasIcon) icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
+    if (hasTitle && hasIcon) {
         // `reverse` — значок перед подписью; зазор 6 px в обоих случаях держит сам значок
         icon.style[options.reverse ? "marginRight" : "marginLeft"] = "6px";
         button.appendChild(options.reverse ? icon : title);
         button.appendChild(options.reverse ? title : icon);
-    } else if (has_title) {
+    } else if (hasTitle) {
         button.appendChild(title);
-    } else if (has_icon) {
+    } else if (hasIcon) {
         // Отступы квадратной кнопки держит CSS по признаку «подписи нет»
         button.appendChild(icon);
     }
-    makeHeaderButton(button, has_icon ? icon : undefined, has_title ? undefined : options.label);
+    makeHeaderButton(button, hasIcon ? icon : undefined, hasTitle ? undefined : options.label);
     return button;
 }
 
@@ -178,9 +179,9 @@ class WindowControls {
     #minimize = document.createElement("wc_minimize");
     // Подписка на нересайзящееся окно: set() вызывается и из конструктора Header, и из
     // addWC(), поэтому в set() слушатель ipcRenderer накапливался.
-    #resizable_false_event = () => this.#maximize.remove();
+    #resizableFalseEvent = () => this.#maximize.remove();
     // Номер запроса состояния гасит ответы, пришедшие не в том порядке
-    #sync_request = 0;
+    #syncRequest = 0;
     constructor() {
         // Скрипт окна может быть preload'ом и выполняться до документа: здесь документ уже настоящий,
         // поэтому `dir`/`lang` (и зеркалирование логических свойств CSS) встают гарантированно
@@ -197,9 +198,9 @@ class WindowControls {
         this.#maximize.addEventListener("click", () => this.#windowAction("toggle-maximize"));
         // Разворот приходит не только от нашей кнопки (двойной клик по полосе, меню окна),
         // поэтому состояние читаем по факту изменения размера окна
-        window.addEventListener("resize", this.#sync_maximized_event);
+        window.addEventListener("resize", this.#syncMaximizedEvent);
         this.#syncMaximized();
-        ipcRenderer.on("chui_resizable_false", this.#resizable_false_event);
+        ipcRenderer.on("chui_resizable_false", this.#resizableFalseEvent);
     }
     /** Кнопка окна — значок с именем для скринридера, фокусом и активацией с клавиатуры.
      *  Значок рисуется линиями (`WINDOW_ICONS`), размер задаёт CSS (см. global_style.css) */
@@ -236,9 +237,9 @@ class WindowControls {
     // Состояние приходит асинхронно, поэтому ответ устаревшего запроса отбрасывается по номеру:
     // иначе быстрая пара «развернуть/восстановить» могла бы применить ответ в обратном порядке
     #syncMaximized() {
-        const request = ++this.#sync_request;
+        const request = ++this.#syncRequest;
         this.#windowState().then((state) => {
-            if (request !== this.#sync_request) return;
+            if (request !== this.#syncRequest) return;
             const maximized = state.isMaximized === true;
             const label = maximized ? I18n.t("appLayout.window.restore") : I18n.t("appLayout.window.maximize");
             this.#maximize.classList.toggle("wc_maximized", maximized);
@@ -247,9 +248,9 @@ class WindowControls {
             this.#maximize.setAttribute("aria-label", label);
         });
     }
-    #sync_maximized_event = () => this.#syncMaximized();
-    set(pos_bool = Boolean()) {
-        if (pos_bool) {
+    #syncMaximizedEvent = () => this.#syncMaximized();
+    set(isEnabled = Boolean()) {
+        if (isEnabled) {
             this.#box.appendChild(this.#close);
             this.#box.appendChild(this.#maximize);
             this.#box.appendChild(this.#minimize);
@@ -263,23 +264,23 @@ class WindowControls {
 }
 
 class Header {
-    #wc_box = new WindowControls();
+    #wcBox = new WindowControls();
     #header = document.createElement("header");
-    #header_main = document.createElement("header_main");
-    #header_left_box = document.createElement("header_left_box");
-    #header_right_box = document.createElement("header_right_box");
+    #headerMain = document.createElement("header_main");
+    #headerLeftBox = document.createElement("header_left_box");
+    #headerRightBox = document.createElement("header_right_box");
     // Высота полосы измеряется, а не предполагается — см. #observeHeight
-    #height_observer = undefined;
-    #height_frame = 0;
-    #published_height = 0;
+    #heightObserver = undefined;
+    #heightFrame = 0;
+    #publishedHeight = 0;
     constructor(layout) {
         layout.set(LAYOUT_ROLE.HEADER, this.#header);
         this.#header.id = "header";
-        this.#header_main.id = "header_main";
-        this.#header_main.appendChild(this.#header_left_box);
-        this.#header_main.appendChild(this.#header_right_box);
-        this.#header_main.appendChild(this.#wc_box.set(false));
-        this.#header.appendChild(this.#header_main);
+        this.#headerMain.id = "header_main";
+        this.#headerMain.appendChild(this.#headerLeftBox);
+        this.#headerMain.appendChild(this.#headerRightBox);
+        this.#headerMain.appendChild(this.#wcBox.set(false));
+        this.#header.appendChild(this.#headerMain);
         this.#observeHeight();
     }
     /*
@@ -292,8 +293,8 @@ class Header {
      * Теперь высота измеряется и публикуется, поэтому токен верен при любой полосе.
      */
     #observeHeight() {
-        this.#height_observer = new ResizeObserver(() => this.#publishHeight());
-        this.#height_observer.observe(this.#header);
+        this.#heightObserver = new ResizeObserver(() => this.#publishHeight());
+        this.#heightObserver.observe(this.#header);
         this.#publishHeight();
     }
     /*
@@ -305,42 +306,41 @@ class Header {
      * записи без проверки крутят пересчёт на ровном месте.
      */
     #publishHeight() {
-        if (this.#height_frame !== 0) return;
-        this.#height_frame = requestAnimationFrame(() => {
-            this.#height_frame = 0;
+        if (this.#heightFrame !== 0) return;
+        this.#heightFrame = requestAnimationFrame(() => {
+            this.#heightFrame = 0;
             // offsetHeight включает черту снизу: она принадлежит полосе, от неё и считается отступ
             const height = this.#header.offsetHeight;
-            if (height === 0 || height === this.#published_height) return;
-            this.#published_height = height;
+            if (height === 0 || height === this.#publishedHeight) return;
+            this.#publishedHeight = height;
             document.documentElement.style.setProperty("--header_height", `${height}px`);
         });
     }
     addWC(boolean = Boolean()) {
-        this.#header_main.insertBefore(this.#wc_box.set(boolean), this.#header_main.firstChild);
+        this.#headerMain.insertBefore(this.#wcBox.set(boolean), this.#headerMain.firstChild);
     }
     addToLeftBeforeTitle(...components) {
-        for (let component of components)
-            this.#header_left_box.insertBefore(component, this.#header_left_box.firstChild);
+        for (const component of components) this.#headerLeftBox.insertBefore(component, this.#headerLeftBox.firstChild);
     }
     /** Прежнее имя с опечаткой (`Tittle`): оставлено синонимом, чтобы не ломать чужие вызовы */
     addToLeftBeforeTittle(...components) {
         this.addToLeftBeforeTitle(...components);
     }
     addToLeft(...components) {
-        for (let component of components) {
-            this.#header_left_box.appendChild(component);
+        for (const component of components) {
+            this.#headerLeftBox.appendChild(component);
         }
     }
     addToRight(...components) {
-        for (let component of components)
-            this.#header_right_box.insertBefore(component, this.#header_right_box.firstChild);
+        for (const component of components)
+            this.#headerRightBox.insertBefore(component, this.#headerRightBox.firstChild);
     }
     removeToRight(...components) {
-        for (let component of components) {
+        for (const component of components) {
             // У меню профиля панель лежит в body, а не в шапке (см. UserProfile),
             // поэтому снятие кнопки обязано убирать и панель: иначе в body копились бы невидимые меню
             UserProfile.destroy(component);
-            this.#header_right_box.removeChild(component);
+            this.#headerRightBox.removeChild(component);
         }
     }
     set() {
@@ -370,23 +370,23 @@ class AppMenu {
     #routeViews = document.createElement("route_views");
     #appMenuButton = document.createElement("app_menu_button");
     // Шапка панели: плитка со значком и заголовок — панель читается выдвижным ящиком
-    #app_menu_header = document.createElement("app_menu_header");
-    #app_menu_header_icon = document.createElement("app_menu_header_icon");
-    #app_menu_header_title = document.createElement("app_menu_header_title");
+    #appMenuHeader = document.createElement("app_menu_header");
+    #appMenuHeaderIcon = document.createElement("app_menu_header_icon");
+    #appMenuHeaderTitle = document.createElement("app_menu_header_title");
     // Блок поиска: своя поверхность со значком, а не одинокий ввод на фоне панели
-    #app_menu_search_main = document.createElement("app_menu_search_main");
-    #app_menu_search_box = document.createElement("app_menu_search_box");
-    #app_menu_search_icon = document.createElement("app_menu_search_icon");
-    #app_menu_search_input = document.createElement("input");
+    #appMenuSearchMain = document.createElement("app_menu_search_main");
+    #appMenuSearchBox = document.createElement("app_menu_search_box");
+    #appMenuSearchIcon = document.createElement("app_menu_search_icon");
+    #appMenuSearchInput = document.createElement("input");
     // Подсказка, когда фильтр не нашёл ни одного пункта
-    #app_menu_empty = document.createElement("app_menu_empty");
+    #appMenuEmpty = document.createElement("app_menu_empty");
     // ===
-    #auto_close = false;
-    #search_enabled = false;
+    #autoClose = false;
+    #searchEnabled = false;
     #routeKeyboard = undefined;
     #header = undefined;
     #center = undefined;
-    #page_name = document.createElement("page_name");
+    #pageName = document.createElement("page_name");
     constructor(header, center, layout) {
         this.#header = header;
         this.#center = center;
@@ -415,22 +415,22 @@ class AppMenu {
                 if (this.#appMenu.style.transform === `translateX(${this.#appMenuSlide}px)`) this.#close();
             }
         });
-        this.#page_name.id = "page_name";
-        layout.set(LAYOUT_ROLE.PAGE_NAME, this.#page_name);
-        header.addToLeft(this.#appMenuButton, this.#page_name);
-        this.#app_menu_header_icon.appendChild(new Icon(Icons.NAVIGATION.MENU_OPEN, "16px").set());
+        this.#pageName.id = "page_name";
+        layout.set(LAYOUT_ROLE.PAGE_NAME, this.#pageName);
+        header.addToLeft(this.#appMenuButton, this.#pageName);
+        this.#appMenuHeaderIcon.appendChild(new Icon(Icons.NAVIGATION.MENU_OPEN, "16px").set());
         // Плитка и значок в ней — украшение: имя панели уже есть в заголовке
-        this.#app_menu_header_icon.setAttribute("aria-hidden", "true");
-        this.#app_menu_header_title.innerText = I18n.t("appLayout.menu");
+        this.#appMenuHeaderIcon.setAttribute("aria-hidden", "true");
+        this.#appMenuHeaderTitle.innerText = I18n.t("appLayout.menu");
         // Список пунктов назван головкой панели: скринридер читает «Меню», а не безымянный список
-        this.#app_menu_header_title.id = "chui_app_menu_title";
-        this.#routeViews.setAttribute("aria-labelledby", this.#app_menu_header_title.id);
-        this.#app_menu_header.appendChild(this.#app_menu_header_icon);
-        this.#app_menu_header.appendChild(this.#app_menu_header_title);
-        this.#app_menu_empty.innerText = I18n.t("appLayout.search.empty");
+        this.#appMenuHeaderTitle.id = "chui_app_menu_title";
+        this.#routeViews.setAttribute("aria-labelledby", this.#appMenuHeaderTitle.id);
+        this.#appMenuHeader.appendChild(this.#appMenuHeaderIcon);
+        this.#appMenuHeader.appendChild(this.#appMenuHeaderTitle);
+        this.#appMenuEmpty.innerText = I18n.t("appLayout.search.empty");
         // Подсказка лежит внутри списка, но пунктом не является: клавиатура меню её не видит (itemSelector "route")
-        this.#routeViews.appendChild(this.#app_menu_empty);
-        this.#appMenu.appendChild(this.#app_menu_header);
+        this.#routeViews.appendChild(this.#appMenuEmpty);
+        this.#appMenu.appendChild(this.#appMenuHeader);
         this.#appMenu.appendChild(this.#routeViews);
         // Клавиатура и aria меню маршрутов: стрелки по пунктам, Escape закрывает и возвращает фокус на кнопку
         this.#routeKeyboard = new MenuKeyboard(this.#routeViews, {
@@ -471,20 +471,20 @@ class AppMenu {
         this.#routeKeyboard.setExpanded(false);
     }
     enableSearchInput() {
-        if (this.#search_enabled) return;
-        this.#search_enabled = true;
-        this.#app_menu_search_input.classList.add("app_menu_search_input");
-        this.#app_menu_search_input.placeholder = I18n.t("appLayout.search.placeholder");
-        this.#app_menu_search_input.setAttribute("aria-label", I18n.t("appLayout.search.sections"));
+        if (this.#searchEnabled) return;
+        this.#searchEnabled = true;
+        this.#appMenuSearchInput.classList.add("app_menu_search_input");
+        this.#appMenuSearchInput.placeholder = I18n.t("appLayout.search.placeholder");
+        this.#appMenuSearchInput.setAttribute("aria-label", I18n.t("appLayout.search.sections"));
         // Подсветку поля даёт :focus-within на поверхности поиска — инлайновых стилей больше нет
-        this.#app_menu_search_input.addEventListener("input", (event) => {
+        this.#appMenuSearchInput.addEventListener("input", (event) => {
             this.#filterRoutes(event.target.value);
         });
-        this.#app_menu_search_icon.innerHTML = new Icon(Icons.ACTIONS.SEARCH, "15px").getHTML();
-        this.#app_menu_search_box.appendChild(this.#app_menu_search_icon);
-        this.#app_menu_search_box.appendChild(this.#app_menu_search_input);
-        this.#app_menu_search_main.appendChild(this.#app_menu_search_box);
-        this.#appMenu.insertBefore(this.#app_menu_search_main, this.#routeViews);
+        this.#appMenuSearchIcon.innerHTML = new Icon(Icons.ACTIONS.SEARCH, "15px").getHTML();
+        this.#appMenuSearchBox.appendChild(this.#appMenuSearchIcon);
+        this.#appMenuSearchBox.appendChild(this.#appMenuSearchInput);
+        this.#appMenuSearchMain.appendChild(this.#appMenuSearchBox);
+        this.#appMenu.insertBefore(this.#appMenuSearchMain, this.#routeViews);
     }
     // Пункты списка: подсказка о пустом результате лежит там же, поэтому фильтруем по тегу
     #routes() {
@@ -500,10 +500,10 @@ class AppMenu {
             item.style.display = matches ? "" : "none";
             if (matches) visible++;
         }
-        this.#app_menu_empty.classList.toggle("app_menu_empty_visible", visible === 0);
+        this.#appMenuEmpty.classList.toggle("app_menu_empty_visible", visible === 0);
     }
     go(page) {
-        let center = this.#center;
+        const center = this.#center;
         //
         setPageName(page.getTitle());
         center.innerHTML = "";
@@ -517,18 +517,18 @@ class AppMenu {
     }
     setRouteTest(page) {
         this.#routeList.push(page);
-        let test = this.#routeList.filter((route) => route.getTitle().includes(page.getTitle()));
+        const test = this.#routeList.filter((route) => route.getTitle().includes(page.getTitle()));
         if (test.length === 1) {
-            let button_route = document.createElement("route");
-            let icon_menu = document.createElement("route_icon");
-            icon_menu.innerHTML = page.getIcon();
-            let title_menu = document.createElement("route_title");
-            title_menu.innerHTML = page.getTitle();
+            const buttonRoute = document.createElement("route");
+            const iconMenu = document.createElement("route_icon");
+            iconMenu.innerHTML = page.getIcon();
+            const titleMenu = document.createElement("route_title");
+            titleMenu.innerHTML = page.getTitle();
             if (page.getMain()) {
                 this.go(page);
-                button_route.classList.add("route_active");
+                buttonRoute.classList.add("route_active");
             }
-            button_route.addEventListener("click", () => {
+            buttonRoute.addEventListener("click", () => {
                 const eventAwesome = new CustomEvent("route_event_" + page.constructor.name, {
                     bubbles: true,
                     detail: {
@@ -539,11 +539,11 @@ class AppMenu {
                 });
                 document.dispatchEvent(eventAwesome);
 
-                if (!button_route.classList.contains("route_active")) {
+                if (!buttonRoute.classList.contains("route_active")) {
                     for (const act of this.#routes()) act.classList.remove("route_active");
                     this.go(page);
-                    button_route.classList.add("route_active");
-                    if (this.#auto_close) {
+                    buttonRoute.classList.add("route_active");
+                    if (this.#autoClose) {
                         // Панель закрывается после перехода: состояние и значок меняет тот же код,
                         // что и по Escape — иначе у кнопки осталось бы открытое aria-expanded
                         if (this.#appMenu.style.transform === `translateX(${this.#appMenuSlide}px)`) this.#close();
@@ -551,19 +551,19 @@ class AppMenu {
                 }
             });
             if (page.getIcon() !== undefined) {
-                button_route.appendChild(icon_menu);
+                buttonRoute.appendChild(iconMenu);
             }
-            button_route.appendChild(title_menu);
-            this.#routeViews.appendChild(button_route);
+            buttonRoute.appendChild(titleMenu);
+            this.#routeViews.appendChild(buttonRoute);
             this.#routeKeyboard.refresh();
             // Новый пункт мог не пройти уже введённый фильтр — список и подсказка пересобираются
-            this.#filterRoutes(this.#app_menu_search_input.value);
+            this.#filterRoutes(this.#appMenuSearchInput.value);
         } else {
             Log.error(I18n.t("appLayout.search.alreadyAdded", { title: page.getTitle() }));
         }
     }
     setAutoClose() {
-        this.#auto_close = true;
+        this.#autoClose = true;
     }
     getMenu() {
         return this.#appMenu;
@@ -571,97 +571,99 @@ class AppMenu {
 }
 
 class NotificationBox {
-    #notification_box = document.createElement("notification_box");
-    #notification_box_main = document.createElement("notification_box_main");
+    #notificationBox = document.createElement("notification_box");
+    #notificationBoxMain = document.createElement("notification_box_main");
     // Шапка ящика: заголовок со счётчиком истории и действие «Очистить»
-    #notification_box_header = document.createElement("notification_box_header");
-    #notification_box_header_text = document.createElement("notification_box_header_text");
-    #notification_box_title = document.createElement("notification_box_title");
-    #notification_box_count = document.createElement("notification_box_count");
-    #notification_box_empty = document.createElement("notification_box_empty");
-    #empty_state = undefined;
-    #clear_button = document.createElement("button");
+    #notificationBoxHeader = document.createElement("notification_box_header");
+    #notificationBoxHeaderText = document.createElement("notification_box_header_text");
+    #notificationBoxTitle = document.createElement("notification_box_title");
+    #notificationBoxCount = document.createElement("notification_box_count");
+    #notificationBoxEmpty = document.createElement("notification_box_empty");
+    // Идёт каскад очистки: подписи дней и пустое состояние ждут его конца
+    #clearing = false;
+    #emptyState = undefined;
+    #clearButton = document.createElement("button");
     // Состав ящика меняет Notification — за списком следит observer
     #observer = undefined;
-    #notification_box_width = 400;
-    #notification_box_width_test = 425;
-    #notification_button = document.createElement("notification_button");
+    #notificationBoxWidth = 400;
+    #notificationBoxWidthTest = 425;
+    #notificationButton = document.createElement("notification_button");
     constructor(header, center, layout) {
-        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX, this.#notification_box);
-        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, this.#notification_box_main);
-        this.#notification_box_main.id = "chui_notification_box";
+        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX, this.#notificationBox);
+        layout.set(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, this.#notificationBoxMain);
+        this.#notificationBoxMain.id = "chui_notification_box";
         // Шапка: заголовок, счётчик записей и очистка списка
-        this.#notification_box_title.innerText = I18n.t("appLayout.notifications.title");
-        this.#notification_box_count.setAttribute("aria-hidden", "true");
-        this.#notification_box_header_text.appendChild(this.#notification_box_title);
-        this.#notification_box_header_text.appendChild(this.#notification_box_count);
+        this.#notificationBoxTitle.innerText = I18n.t("appLayout.notifications.title");
+        this.#notificationBoxCount.setAttribute("aria-hidden", "true");
+        this.#notificationBoxHeaderText.appendChild(this.#notificationBoxTitle);
+        this.#notificationBoxHeaderText.appendChild(this.#notificationBoxCount);
         // Очистка — обычная кнопка-действие, а не Button: в шапке нужна тихая ссылка-действие
-        this.#clear_button.className = "notification_box_clear";
-        this.#clear_button.type = "button";
-        this.#clear_button.setAttribute("aria-label", I18n.t("appLayout.notifications.clearAll"));
-        this.#clear_button.setAttribute("title", I18n.t("appLayout.notifications.clear"));
-        this.#clear_button.appendChild(new Icon(Icons.ACTIONS.DELETE, "14px").set());
-        const clear_title = document.createElement("span");
-        clear_title.innerText = I18n.t("appLayout.notifications.clear");
-        this.#clear_button.appendChild(clear_title);
-        this.#clear_button.addEventListener("click", () => this.#clearAll());
-        this.#notification_box_header.appendChild(this.#notification_box_header_text);
-        this.#notification_box_header.appendChild(this.#clear_button);
+        this.#clearButton.className = "notification_box_clear";
+        this.#clearButton.type = "button";
+        this.#clearButton.setAttribute("aria-label", I18n.t("appLayout.notifications.clearAll"));
+        this.#clearButton.setAttribute("title", I18n.t("appLayout.notifications.clear"));
+        this.#clearButton.appendChild(new Icon(Icons.ACTIONS.DELETE, "14px").set());
+        const clearTitle = document.createElement("span");
+        clearTitle.innerText = I18n.t("appLayout.notifications.clear");
+        this.#clearButton.appendChild(clearTitle);
+        this.#clearButton.addEventListener("click", () => this.#clearAll());
+        this.#notificationBoxHeader.appendChild(this.#notificationBoxHeaderText);
+        this.#notificationBoxHeader.appendChild(this.#clearButton);
         // Пустое состояние — общий компонент, а не своя разметка из значка и подписи: это был
         // третий вариант одного и того же блока (здесь, в поиске меню, в таблицах). Заодно он
         // объявляется скринридеру (role="status"), а прежняя заглушка молчала
-        this.#empty_state = new EmptyState({
+        this.#emptyState = new EmptyState({
             icon: Icons.SOCIAL.NOTIFICATIONS_OFF,
             title: I18n.t("appLayout.notifications.empty"),
             compact: true,
         });
-        this.#notification_box_empty.appendChild(this.#empty_state.set());
-        this.#notification_box_main.appendChild(this.#notification_box_empty);
-        this.#notification_box.appendChild(this.#notification_box_header);
-        this.#notification_box.appendChild(this.#notification_box_main);
+        this.#notificationBoxEmpty.appendChild(this.#emptyState.set());
+        this.#notificationBoxMain.appendChild(this.#notificationBoxEmpty);
+        this.#notificationBox.appendChild(this.#notificationBoxHeader);
+        this.#notificationBox.appendChild(this.#notificationBoxMain);
         // Карточки кладёт снаружи Notification, поэтому счётчик, группы и пустое состояние
         // следим по списку. Разделители дней ящик вставляет сам: на них реакция не нужна,
         // иначе пересборка дёргала бы сама себя без конца
         this.#observer = new MutationObserver((records) => this.#onBoxMutated(records));
-        this.#observer.observe(this.#notification_box_main, { childList: true });
+        this.#observer.observe(this.#notificationBoxMain, { childList: true });
         this.#syncState();
-        this.#notification_box.style.width = `${this.#notification_box_width}px`;
-        this.#notification_box.style.right = `calc(-${this.#notification_box_width_test}px)`;
-        this.#notification_button.addEventListener("click", () => {
-            if (this.#notification_button.classList.contains("notification_button_active")) this.#closePanel();
+        this.#notificationBox.style.width = `${this.#notificationBoxWidth}px`;
+        this.#notificationBox.style.right = `calc(-${this.#notificationBoxWidthTest}px)`;
+        this.#notificationButton.addEventListener("click", () => {
+            if (this.#notificationButton.classList.contains("notification_button_active")) this.#closePanel();
             else this.#openPanel();
         });
         // Значок — украшение: без подписи имя кнопки складывалось из лигатуры («notifications»)
-        const notification_glyph = new Icon(Icons.SOCIAL.NOTIFICATIONS, "var(--header_icon_size)").set();
-        notification_glyph.setAttribute("aria-hidden", "true");
-        this.#notification_button.appendChild(notification_glyph);
+        const notificationGlyph = new Icon(Icons.SOCIAL.NOTIFICATIONS, "var(--header_icon_size)").set();
+        notificationGlyph.setAttribute("aria-hidden", "true");
+        this.#notificationButton.appendChild(notificationGlyph);
         // Имя кнопки — в том числе «непрочитанных: N» — держит #syncUnread: одно место
         // Клавиатура и aria панели уведомлений
-        makeKeyboardButton(this.#notification_button);
-        this.#notification_button.setAttribute("aria-haspopup", "true");
-        this.#notification_button.setAttribute("aria-expanded", "false");
-        this.#notification_button.setAttribute("aria-controls", "chui_notification_box");
-        this.#notification_box.setAttribute("role", "region");
-        this.#notification_box.setAttribute("aria-label", I18n.t("appLayout.notifications.title"));
-        this.#notification_box.addEventListener("keydown", (event) => {
+        makeKeyboardButton(this.#notificationButton);
+        this.#notificationButton.setAttribute("aria-haspopup", "true");
+        this.#notificationButton.setAttribute("aria-expanded", "false");
+        this.#notificationButton.setAttribute("aria-controls", "chui_notification_box");
+        this.#notificationBox.setAttribute("role", "region");
+        this.#notificationBox.setAttribute("aria-label", I18n.t("appLayout.notifications.title"));
+        this.#notificationBox.addEventListener("keydown", (event) => {
             if (event.key !== "Escape") return;
             event.preventDefault();
             this.#closePanel();
-            this.#notification_button.focus();
+            this.#notificationButton.focus();
         });
         // Панель открывается с кнопки, и фокус остаётся на ней же — Escape обязан закрывать
         // ящик и оттуда, иначе выйти с клавиатуры можно было только Tab'ом внутрь панели
-        this.#notification_button.addEventListener("keydown", (event) => {
+        this.#notificationButton.addEventListener("keydown", (event) => {
             if (event.key !== "Escape") return;
             event.preventDefault();
             this.#closePanel();
         });
         header.set().addEventListener("click", (e) => {
-            if (e.target !== this.#notification_button) this.#closePanel();
+            if (e.target !== this.#notificationButton) this.#closePanel();
         });
         center.addEventListener("click", (e) => {
-            if (!this.#notification_box.contains(e.target)) {
-                if (this.#notification_box.style.transform === `translateX(-${this.#notification_box_width_test}px)`)
+            if (!this.#notificationBox.contains(e.target)) {
+                if (this.#notificationBox.style.transform === `translateX(-${this.#notificationBoxWidthTest}px)`)
                     this.#closePanel();
             }
         });
@@ -670,27 +672,27 @@ class NotificationBox {
             // вид полосы целиком описан в global_style.css
             header.set().classList.toggle("header_scrolled", center.scrollTop > 15);
         };
-        header.addToRight(this.#notification_button);
+        header.addToRight(this.#notificationButton);
     }
     #openPanel() {
-        this.#notification_box.style.transform = `translateX(-${this.#notification_box_width_test}px)`;
-        this.#notification_button.classList.add("notification_button_active");
-        this.#notification_button.setAttribute("aria-expanded", "true");
+        this.#notificationBox.style.transform = `translateX(-${this.#notificationBoxWidthTest}px)`;
+        this.#notificationButton.classList.add("notification_button_active");
+        this.#notificationButton.setAttribute("aria-expanded", "true");
         // Открытый ящик — значит прочитанный: отметки снимаются все сразу, а не по одной
         this.#markRead();
     }
     #closePanel() {
-        this.#notification_box.style.transform = `translateX(${this.#notification_box_width}px)`;
-        this.#notification_button.classList.remove("notification_button_active");
-        this.#notification_button.setAttribute("aria-expanded", "false");
+        this.#notificationBox.style.transform = `translateX(${this.#notificationBoxWidth}px)`;
+        this.#notificationButton.classList.remove("notification_button_active");
+        this.#notificationButton.setAttribute("aria-expanded", "false");
     }
     // Записи истории: карточки в ящик кладёт Notification, поэтому состав читаем из DOM
     #notifications() {
-        return [...this.#notification_box_main.children].filter((child) => child.tagName === "NOTIFICATION");
+        return [...this.#notificationBoxMain.children].filter((child) => child.tagName === "NOTIFICATION");
     }
     // Разделители дней — тоже прямые дети списка, но записями не являются
     #groups() {
-        return [...this.#notification_box_main.children].filter((child) => child.tagName === "NOTIFICATION_GROUP");
+        return [...this.#notificationBoxMain.children].filter((child) => child.tagName === "NOTIFICATION_GROUP");
     }
     /*
      * Реакция на изменение состава ящика.
@@ -709,10 +711,11 @@ class NotificationBox {
     #syncState() {
         const notifications = this.#notifications();
         const count = notifications.length;
-        this.#notification_box_count.innerText = String(count);
-        this.#notification_box_count.style.display = count === 0 ? "none" : "flex";
-        this.#clear_button.disabled = count === 0;
-        this.#notification_box_empty.classList.toggle("notification_box_empty_visible", count === 0);
+        this.#notificationBoxCount.innerText = String(count);
+        this.#notificationBoxCount.style.display = count === 0 ? "none" : "flex";
+        // Пока идёт каскад, чистить нечего: кнопка ждёт его конца
+        this.#clearButton.disabled = count === 0 || this.#clearing;
+        this.#notificationBoxEmpty.classList.toggle("notification_box_empty_visible", count === 0);
         this.#group(notifications);
         this.#syncUnread(notifications);
     }
@@ -725,12 +728,15 @@ class NotificationBox {
      * по тегу (счётчик, очистка), работает без изменений.
      */
     #group(notifications = []) {
+        // Идёт каскад уборки: подписи уже гаснут своим кадром, а пересборка заменила бы их
+        // новыми и вернула бы рывок, который каскад и убирает
+        if (this.#clearing) return;
         for (const separator of this.#groups()) separator.remove();
         let day = undefined;
         for (const notification of notifications) {
             if (notification.dataset.day === day) continue;
             day = notification.dataset.day;
-            this.#notification_box_main.insertBefore(this.#makeGroup(day), notification);
+            this.#notificationBoxMain.insertBefore(this.#makeGroup(day), notification);
         }
     }
     /** Подпись дня: сегодня и вчера — словами, раньше — датой */
@@ -738,8 +744,8 @@ class NotificationBox {
         const yesterday = new Date();
         yesterday.setDate(yesterday.getDate() - 1);
         const group = document.createElement("notification_group");
-        if (day === chui_functions.getDayKey()) group.innerText = I18n.t("appLayout.notifications.today");
-        else if (day === chui_functions.getDayKey(yesterday))
+        if (day === chuiFunctions.getDayKey()) group.innerText = I18n.t("appLayout.notifications.today");
+        else if (day === chuiFunctions.getDayKey(yesterday))
             group.innerText = I18n.t("appLayout.notifications.yesterday");
         else {
             // Ключ хранится как ГГГГ-ММ-ДД, а в подписи порядок привычный: ДД.ММ.ГГГГ
@@ -757,27 +763,79 @@ class NotificationBox {
      */
     #syncUnread(notifications = []) {
         const unread = notifications.filter((notification) => notification.dataset.unread === "true").length;
-        this.#notification_button.classList.toggle("notification_button_unread", unread > 0);
+        this.#notificationButton.classList.toggle("notification_button_unread", unread > 0);
         const label =
             unread === 0
                 ? I18n.t("appLayout.notifications.title")
                 : I18n.t("appLayout.notifications.unreadCount", { count: unread });
-        this.#notification_button.setAttribute("aria-label", label);
-        this.#notification_button.setAttribute("title", label);
+        this.#notificationButton.setAttribute("aria-label", label);
+        this.#notificationButton.setAttribute("title", label);
     }
     #markRead() {
         for (const notification of this.#notifications()) notification.dataset.unread = "false";
         this.#syncUnread(this.#notifications());
     }
+    /*
+     * Очистка истории.
+     *
+     * Карточки уходят каскадом: номер в очереди задаёт `--notification_clear_index`, а шаг —
+     * доля токена движения, поэтому весь список читается как рассыпающийся, а не как
+     * выключенный одним щелчком. Подписи дней гаснут вместе с ним, пустое состояние
+     * и счётчик появляются после последнего кадра.
+     *
+     * Конец каскада считает срок из тех же токенов движения, а не ждёт `animationend`:
+     * у карточки, которую браузер не отрисовывает (скрытая панель, `display: none`), кадр
+     * вообще не проигрывается, и событие не придёт — уборка осталась бы висеть
+     * незавершённой вместе с погашенными подписями.
+     */
     #clearAll() {
-        for (const notification of this.#notifications()) {
-            notification.style.transform = "translateX(100%)";
-            notification.style.opacity = "0";
-            setTimeout(() => notification.remove(), 300);
+        // Повторное нажатие на ходу нача́ло бы второй каскад и перезапустило кадры
+        if (this.#clearing) return;
+        const notifications = this.#notifications();
+        if (notifications.length === 0) return;
+        // Уменьшенное движение: история очищается сразу — каскад только задерживал бы
+        if (reducedMotion()) {
+            for (const notification of notifications) notification.remove();
+            this.#syncState();
+            return;
+        }
+        this.#clearing = true;
+        this.#clearButton.disabled = true;
+        notifications.forEach((notification, index) => {
+            // Следы кадра прихода снимаем: инлайновое имя кадра сильнее класса, а вид движения
+            // спорит с ним по весу — без этого запись, только что вставшая в ящик, проиграла бы
+            // не кадр уборки, а свой въезд
+            notification.style.removeProperty("animation-name");
+            notification.removeAttribute("data-motion");
+            notification.style.setProperty("--notification_clear_index", String(index));
+            notification.classList.add("notification_clearing");
+        });
+        // Подписи дней гаснут вместе с карточками, а убираются только по концу каскада:
+        // иначе строка пропала бы из-под ещё уезжающих карточек
+        for (const group of this.#groups()) group.classList.add("notification_group_leaving");
+        const step = tokenTime("--motion_fast") / 4;
+        const frame = tokenTime("--motion_fast");
+        // Запас — ещё один шаг: кадр задерживается ещё и на запуск
+        const deadline = frame + step * notifications.length;
+        setTimeout(() => this.#finishClearing(notifications), deadline);
+    }
+    /*
+     * Конец каскада: убираем только те карточки, которые и были в очереди (за время уборки
+     * могла прийти новая — её очистка не касается), затем согласуем подписи, счётчик и подсказку
+     * по настоящему составу ящика.
+     */
+    #finishClearing(notifications = []) {
+        this.#clearing = false;
+        for (const notification of notifications) {
+            notification.classList.remove("notification_clearing");
+            notification.style.removeProperty("--notification_clear_index");
+            notification.remove();
         }
+        for (const group of this.#groups()) group.remove();
+        this.#syncState();
     }
     getBox() {
-        return this.#notification_box;
+        return this.#notificationBox;
     }
 }
 
@@ -822,11 +880,11 @@ class AppLayout {
     constructor() {
         require("../../modules/chui_fonts").install();
         // Глобальные стили
-        chui_functions.setStyles(__dirname + `/global_style.css`, "chUiJS_Global_App");
-        chui_functions.setStyles(__dirname + `/main_theme_style.css`, "chUiJS_Main_Theme");
+        chuiFunctions.setStyles(__dirname + `/global_style.css`, "chUiJS_Global_App");
+        chuiFunctions.setStyles(__dirname + `/main_theme_style.css`, "chUiJS_Main_Theme");
         // Необработанные ошибки и reject’ы renderer-процесса — один раз на процесс
-        if (app_error_handlers_installed === false) {
-            app_error_handlers_installed = true;
+        if (appErrorHandlersInstalled === false) {
+            appErrorHandlersInstalled = true;
             window.addEventListener("error", this.#onWindowError);
             window.addEventListener("unhandledrejection", this.#onUnhandledRejection);
         }
@@ -877,16 +935,16 @@ class AppLayout {
         ipcRenderer.on("sendNotificationUpdateClose", () => {
             if (this.#updateNotification !== undefined) this.#updateNotification.hide();
         });
-        let popup = new Popup();
+        const popup = new Popup();
         ipcRenderer.once("checkUpdatesTrue", async (e, check, version) => {
             if (check) {
-                let confirm_res = await popup.confirm({
+                const confirmRes = await popup.confirm({
                     title: I18n.t("appLayout.update.available", { version: version }),
                     message: I18n.t("appLayout.update.question"),
                     cancelText: I18n.t("appLayout.update.cancel"),
                     okText: I18n.t("appLayout.update.install"),
                 });
-                e.sender.send("updateInstallConfirm", confirm_res);
+                e.sender.send("updateInstallConfirm", confirmRes);
             }
         });
     }
@@ -920,8 +978,8 @@ class AppLayout {
         this.#layout.get(LAYOUT_ROLE.PAGE_NAME).classList.add("page_name_no_menu");
     }
     setScript(pathToJS = String(), id = String()) {
-        let data = fs.readFileSync(pathToJS, "utf8");
-        let script = document.createElement("script");
+        const data = fs.readFileSync(pathToJS, "utf8");
+        const script = document.createElement("script");
         script.innerHTML = String(data);
         script.setAttribute("id", id);
         // Скрипт подключается в сам документ (не узел компонента), поэтому проверка по id и document
@@ -990,21 +1048,21 @@ class AppLayout {
 }
 
 class HeaderTabs {
-    #id_list = require("randomstring").generate();
-    #header_tabs_list = undefined;
-    #header_tabs = document.createElement("header_tabs");
-    #keydown_event = (event) => this.#onKeydown(event);
+    #idList = require("randomstring").generate();
+    #headerTabsList = undefined;
+    #headerTabs = document.createElement("header_tabs");
+    #keydownEvent = (event) => this.#onKeydown(event);
     constructor(options = { width: String(), default: Number(), tabs: [] }) {
-        this.#header_tabs_list = options.tabs;
-        this.#header_tabs.id = this.#id_list;
+        this.#headerTabsList = options.tabs;
+        this.#headerTabs.id = this.#idList;
         // Полоса вкладок — не меню: у неё свои роли (`tablist`/`tab`) и свои клавиши (см. #onKeydown).
         // `role="button"` и `tabindex="0"` каждой вкладке уже поставил makeKeyboardButton, поэтому
         // роли и порядок обхода переопределяем здесь: остановка Tab в полосе должна быть ровно одна
-        this.#header_tabs.setAttribute("role", "tablist");
-        for (let item of this.#header_tabs_list) {
+        this.#headerTabs.setAttribute("role", "tablist");
+        for (const item of this.#headerTabsList) {
             item.setAttribute("role", "tab");
             item.setAttribute("tabindex", "-1");
-            this.#header_tabs.appendChild(item);
+            this.#headerTabs.appendChild(item);
             item.addEventListener("click", (event) => {
                 if (event.target.tagName === "HEADER_BUTTON_ICON" || event.target.tagName === "HEADER_BUTTON_TITLE") {
                     this.#setActive(event.target.parentNode);
@@ -1019,7 +1077,7 @@ class HeaderTabs {
         // кликом он снимал у неё и курсор-указатель, и ховер, которых у соседних кнопок шапки
         // нет. Слушатель ловит клик в фазе перехвата: действие вкладки и `#setActive` висят
         // на самом элементе и иначе сработали бы первыми
-        this.#header_tabs.addEventListener(
+        this.#headerTabs.addEventListener(
             "click",
             (event) => {
                 const tab = event.target.closest === undefined ? null : event.target.closest("header_button");
@@ -1030,12 +1088,12 @@ class HeaderTabs {
         );
         // Пока ни одна вкладка не выбрана, остановкой обхода становится первая по счёту:
         // иначе в полосу нельзя было бы войти с клавиатуры вообще
-        const default_tab = this.#header_tabs_list[options.default === undefined ? 0 : options.default];
-        if (default_tab !== undefined) default_tab.setAttribute("tabindex", "0");
-        this.#header_tabs.addEventListener("keydown", this.#keydown_event);
-        if (options.width !== undefined) this.#header_tabs.style.width = options.width;
-        for (let item of this.#header_tabs_list) {
-            if (this.#header_tabs_list.indexOf(item) === options.default) {
+        const defaultTab = this.#headerTabsList[options.default === undefined ? 0 : options.default];
+        if (defaultTab !== undefined) defaultTab.setAttribute("tabindex", "0");
+        this.#headerTabs.addEventListener("keydown", this.#keydownEvent);
+        if (options.width !== undefined) this.#headerTabs.style.width = options.width;
+        for (const item of this.#headerTabsList) {
+            if (this.#headerTabsList.indexOf(item) === options.default) {
                 setTimeout(() => {
                     item.click();
                     //this.#setActive(item)
@@ -1044,13 +1102,13 @@ class HeaderTabs {
         }
     }
     set() {
-        return this.#header_tabs;
+        return this.#headerTabs;
     }
     #setActive(target) {
         if (target.getAttribute("active") === null) {
             // `children`, а не `childNodes`: в `childNodes` попадают и текстовые узлы, у которых нет classList.
             // `children` — HTMLCollection, поэтому перебираем копию
-            [...this.#header_tabs.children].forEach((child) => {
+            [...this.#headerTabs.children].forEach((child) => {
                 child.removeAttribute("active");
                 child.removeAttribute("aria-current");
                 child.removeAttribute("aria-selected");
@@ -1077,7 +1135,7 @@ class HeaderTabs {
      * `makeKeyboardButton` (клик по выбранной вкладке гасит перехватчик выше).
      */
     #onKeydown(event) {
-        const tabs = [...this.#header_tabs.children];
+        const tabs = [...this.#headerTabs.children];
         if (tabs.length === 0) return;
         const focused = tabs.indexOf(document.activeElement);
         // Фокус мог быть не в полосе: тогда считаем от вкладки с остановкой обхода
@@ -1100,12 +1158,12 @@ class UserProfile {
     // находится по узлу обёртки — так же, как у MenuBar, и по нему его снимает тот,
     // кто убирает профиль из шапки (`Header.removeToRight`)
     static #instances = new WeakMap();
-    #user_main = document.createElement("user_main");
-    #user_button = document.createElement("user_button");
-    #user_dropdown = document.createElement("user_dropdown");
-    #is_open = false;
+    #userMain = document.createElement("user_main");
+    #userButton = document.createElement("user_button");
+    #userDropdown = document.createElement("user_dropdown");
+    #isOpen = false;
     //
-    #user_dd_image_main = document.createElement("user_dd_image_main");
+    #userDdImageMain = document.createElement("user_dd_image_main");
     // Аватар — компонент Avatar: инициалы, картинка из адреса/base64/файла
     #avatar = undefined;
     #username = undefined;
@@ -1113,15 +1171,15 @@ class UserProfile {
     // Слушатель window нужен только пока меню открыто: иначе он копился на каждый профиль.
     // Закрывает меню только по клику СНАРУЖИ: раньше сравнивался прямой родитель цели,
     // поэтому клик по аватару или пустому месту внутри меню тоже его закрывал
-    #window_click_event = (event) => {
-        if (this.#user_main.contains(event.target) || this.#user_dropdown.contains(event.target)) return;
+    #windowClickEvent = (event) => {
+        if (this.#userMain.contains(event.target) || this.#userDropdown.contains(event.target)) return;
         this.#closeMenu();
     };
     // Выбор пункта закрывает меню. Обработчик на списке, а не на каждом пункте: пункты
     // приходят из UserDDItem и могут быть добавлены кем угодно снаружи
-    #dropdown_click_event = (event) => {
+    #dropdownClickEvent = (event) => {
         const item = event.target.closest === undefined ? null : event.target.closest("user_item");
-        if (item === null || !this.#user_dropdown.contains(item)) return;
+        if (item === null || !this.#userDropdown.contains(item)) return;
         this.#closeMenu();
     };
     //
@@ -1133,15 +1191,15 @@ class UserProfile {
         }
     ) {
         this.#username = options.username;
-        this.#user_button.innerText = options.username;
-        this.#user_main.appendChild(this.#user_button);
-        UserProfile.#instances.set(this.#user_main, this);
+        this.#userButton.innerText = options.username;
+        this.#userMain.appendChild(this.#userButton);
+        UserProfile.#instances.set(this.#userMain, this);
         // Панель — слой в body: внутри шапки (у неё свой backdrop-filter) её blur не работал бы,
         // а выдвижные слои оболочки перекрывали бы её. Идентификатор нужен для aria-controls
-        this.#user_dropdown.id = require("randomstring").generate();
-        document.body.appendChild(this.#user_dropdown);
-        this.#user_button.addEventListener("click", () => {
-            if (this.#is_open) this.#closeMenu();
+        this.#userDropdown.id = require("randomstring").generate();
+        document.body.appendChild(this.#userDropdown);
+        this.#userButton.addEventListener("click", () => {
+            if (this.#isOpen) this.#closeMenu();
             else this.#openMenu();
         });
         //
@@ -1153,22 +1211,22 @@ class UserProfile {
                 size: "80px",
                 decorative: true,
             });
-            this.#user_dd_image_main.appendChild(this.#avatar.set());
-            this.#user_dropdown.appendChild(this.#user_dd_image_main);
+            this.#userDdImageMain.appendChild(this.#avatar.set());
+            this.#userDropdown.appendChild(this.#userDdImageMain);
         }
         //
-        for (let item of options.items) this.#user_dropdown.appendChild(item);
-        this.#user_dropdown.addEventListener("click", this.#dropdown_click_event);
+        for (const item of options.items) this.#userDropdown.appendChild(item);
+        this.#userDropdown.addEventListener("click", this.#dropdownClickEvent);
         // Клавиатура и aria меню профиля: стрелки по пунктам, Escape закрывает и возвращает фокус
-        this.#menuKeyboard = new MenuKeyboard(this.#user_dropdown, {
+        this.#menuKeyboard = new MenuKeyboard(this.#userDropdown, {
             itemSelector: "user_item",
             onEscape: () => this.#closeMenu(),
-            trigger: this.#user_button,
+            trigger: this.#userButton,
         });
-        makeKeyboardButton(this.#user_button);
+        makeKeyboardButton(this.#userButton);
         // Закрытое меню объявляется закрытым сразу: иначе у кнопки не было бы aria-expanded
         this.#menuKeyboard.setExpanded(false);
-        this.#user_button.addEventListener("keydown", (event) => {
+        this.#userButton.addEventListener("keydown", (event) => {
             if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.preventDefault();
                 this.#openMenu();
@@ -1177,40 +1235,40 @@ class UserProfile {
         });
     }
     #openMenu() {
-        this.#is_open = true;
+        this.#isOpen = true;
         // Панель живёт в body: если её снимал `unmount`, возвращаем на место
-        if (document.body.contains(this.#user_dropdown) === false) document.body.appendChild(this.#user_dropdown);
-        this.#user_button.classList.add(USER_PROFILE_ACTIVE_CLASS);
+        if (document.body.contains(this.#userDropdown) === false) document.body.appendChild(this.#userDropdown);
+        this.#userButton.classList.add(USER_PROFILE_ACTIVE_CLASS);
         // fadeIn показывает панель (display: flex), и только после этого её можно измерить
-        new Animation(this.#user_dropdown).fadeIn();
+        new Animation(this.#userDropdown).fadeIn();
         this.#positionDropdown();
-        window.addEventListener("click", this.#window_click_event);
-        window.addEventListener("resize", this.#position_dropdown_event);
+        window.addEventListener("click", this.#windowClickEvent);
+        window.addEventListener("resize", this.#positionDropdownEvent);
         this.#menuKeyboard.setExpanded(true);
     }
     #closeMenu() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
-        this.#user_button.classList.remove(USER_PROFILE_ACTIVE_CLASS);
-        new Animation(this.#user_dropdown).fadeOut();
-        window.removeEventListener("click", this.#window_click_event);
-        window.removeEventListener("resize", this.#position_dropdown_event);
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
+        this.#userButton.classList.remove(USER_PROFILE_ACTIVE_CLASS);
+        new Animation(this.#userDropdown).fadeOut();
+        window.removeEventListener("click", this.#windowClickEvent);
+        window.removeEventListener("resize", this.#positionDropdownEvent);
         this.#menuKeyboard.setExpanded(false);
     }
     // position: fixed — координаты считаются от окна, поэтому панель пересчитывается и на resize.
     // Логический `inset-inline-end` держит выравнивание по кнопке и в RTL
     #positionDropdown() {
-        const button = this.#user_button.getBoundingClientRect();
-        const dropdown = this.#user_dropdown.getBoundingClientRect();
+        const button = this.#userButton.getBoundingClientRect();
+        const dropdown = this.#userDropdown.getBoundingClientRect();
         let end = window.innerWidth - button.right;
         if (end + dropdown.width > window.innerWidth - USER_DROPDOWN_EDGE) {
             end = window.innerWidth - USER_DROPDOWN_EDGE - dropdown.width;
         }
         if (end < USER_DROPDOWN_EDGE) end = USER_DROPDOWN_EDGE;
-        this.#user_dropdown.style.insetInlineEnd = `${Math.round(end)}px`;
-        this.#user_dropdown.style.top = `${Math.round(button.bottom + USER_DROPDOWN_GAP)}px`;
+        this.#userDropdown.style.insetInlineEnd = `${Math.round(end)}px`;
+        this.#userDropdown.style.top = `${Math.round(button.bottom + USER_DROPDOWN_GAP)}px`;
     }
-    #position_dropdown_event = () => this.#positionDropdown();
+    #positionDropdownEvent = () => this.#positionDropdown();
 
     getUsername() {
         return this.#username;
@@ -1228,8 +1286,8 @@ class UserProfile {
      */
     unmount() {
         this.#closeMenu();
-        this.#user_dropdown.remove();
-        UserProfile.#instances.delete(this.#user_main);
+        this.#userDropdown.remove();
+        UserProfile.#instances.delete(this.#userMain);
         return this;
     }
     /** Полное удаление: панель больше не нужна — снять клавиатуру и убрать панель из body */
@@ -1249,12 +1307,12 @@ class UserProfile {
     }
 
     set() {
-        return this.#user_main;
+        return this.#userMain;
     }
 }
 
 class UserDDItem {
-    #user_item = document.createElement("user_item");
+    #userItem = document.createElement("user_item");
 
     constructor(
         options = {
@@ -1264,26 +1322,26 @@ class UserDDItem {
         }
     ) {
         if (options.title !== undefined && options.icon !== undefined) {
-            this.#user_item.innerText = options.title;
+            this.#userItem.innerText = options.title;
             // Значок ведёт строку — как в пунктах context_menu_item и выпадающих списков
             // меню-бара. Дописанный в конец, он прилипал к подписи, и пункт меню профиля
             // выбивался из семьи меню (в остальных меню значок стоит перед текстом)
-            this.#user_item.insertAdjacentHTML("afterbegin", new Icon(options.icon).getHTML());
+            this.#userItem.insertAdjacentHTML("afterbegin", new Icon(options.icon).getHTML());
         } else if (options.title !== undefined) {
-            this.#user_item.innerText = options.title;
+            this.#userItem.innerText = options.title;
         } else if (options.icon !== undefined) {
-            this.#user_item.innerHTML = new Icon(options.icon).getHTML();
+            this.#userItem.innerHTML = new Icon(options.icon).getHTML();
         }
-        this.#user_item.addEventListener("click", options.clickEvent);
+        this.#userItem.addEventListener("click", options.clickEvent);
     }
 
     set() {
-        return this.#user_item;
+        return this.#userItem;
     }
 }
 
 class HeaderDialog {
-    #header_button = undefined;
+    #headerButton = undefined;
     constructor(
         options = {
             title: String(),
@@ -1308,72 +1366,72 @@ class HeaderDialog {
         // Неполные `dialogOptions` сборку не роняют: `style` и `components` — необязательные
         // части опции, а прямое обращение к ним давало TypeError при создании кнопки
         // («Cannot read properties of undefined») ещё до первого открытия слоя
-        const dialog_options = options.dialogOptions === undefined ? {} : options.dialogOptions;
-        const dialog_style = dialog_options.style === undefined ? {} : dialog_options.style;
-        const dialog_components = dialog_options.components === undefined ? [] : dialog_options.components;
+        const dialogOptions = options.dialogOptions === undefined ? {} : options.dialogOptions;
+        const dialogStyle = dialogOptions.style === undefined ? {} : dialogOptions.style;
+        const dialogComponents = dialogOptions.components === undefined ? [] : dialogOptions.components;
         // Пустой заголовок остаётся пустым: заготовка опции рисовала бы слово «undefined»
-        const dialog_title =
-            dialog_options.title === undefined || dialog_options.title === null ? "" : dialog_options.title;
-        let dialog = new Dialog({
-            width: dialog_style.width,
-            height: dialog_style.height,
-            closeOutSideClick: dialog_options.closeOutSideClick,
+        const dialogTitle =
+            dialogOptions.title === undefined || dialogOptions.title === null ? "" : dialogOptions.title;
+        const dialog = new Dialog({
+            width: dialogStyle.width,
+            height: dialogStyle.height,
+            closeOutSideClick: dialogOptions.closeOutSideClick,
             // Имя модального слоя для скринридера: без него диалог объявлялся бы безымянным
-            title: dialog_title,
+            title: dialogTitle,
         });
         // HEADER
-        let header_dialog = new ContentBlock({
+        const headerDialog = new ContentBlock({
             direction: "row",
             wrap: "nowrap",
             align: "center",
             justify: "space-between",
             disableMarginChild: true,
         });
-        header_dialog.setWidth("-webkit-fill-available");
+        headerDialog.setWidth("-webkit-fill-available");
         // Заголовок — как у заголовков панелей оболочки (размер `--font_default_size`, вес 500
         // даёт `strong`): отдельные 14 pt в диалоге спорили с его содержимым
-        let title = new Label({
-            markdownText: `**${dialog_title}**`,
+        const title = new Label({
+            markdownText: `**${dialogTitle}**`,
             wordBreak: "normal",
             width: "max-content",
         });
-        let close_button = new Button({
+        const closeButton = new Button({
             icon: Icons.NAVIGATION.CLOSE,
             label: I18n.t("common.close"),
             reverse: true,
             clickEvent: () => dialog.close(),
         });
-        header_dialog.add(title, close_button);
-        dialog.addToHeader(header_dialog);
+        headerDialog.add(title, closeButton);
+        dialog.addToHeader(headerDialog);
         // BODY
-        let body_dialog = new ContentBlock({
-            direction: dialog_style.direction,
-            wrap: dialog_style.wrap,
-            align: dialog_style.align,
-            justify: dialog_style.justify,
+        const bodyDialog = new ContentBlock({
+            direction: dialogStyle.direction,
+            wrap: dialogStyle.wrap,
+            align: dialogStyle.align,
+            justify: dialogStyle.justify,
         });
-        body_dialog.setWidth("-webkit-fill-available");
-        body_dialog.add(...dialog_components);
-        dialog.addToBody(body_dialog);
+        bodyDialog.setWidth("-webkit-fill-available");
+        bodyDialog.add(...dialogComponents);
+        dialog.addToBody(bodyDialog);
         // FOOTER
 
         //
-        this.#header_button = makeHeaderButtonBox(options);
+        this.#headerButton = makeHeaderButtonBox(options);
         // Слой идёт в body при первом открытии, а не при сборке: заранее созданный
         // невидимый диалог оставался бы в документе на всё время жизни кнопки
-        this.#header_button.addEventListener("click", () => {
+        this.#headerButton.addEventListener("click", () => {
             if (document.body.contains(dialog.set()) === false) document.body.appendChild(dialog.set());
             dialog.open();
         });
     }
 
     set() {
-        return this.#header_button;
+        return this.#headerButton;
     }
 }
 
 class HeaderButton {
-    #header_button = undefined;
+    #headerButton = undefined;
 
     constructor(
         options = {
@@ -1384,12 +1442,12 @@ class HeaderButton {
             clickEvent: () => {},
         }
     ) {
-        this.#header_button = makeHeaderButtonBox(options);
-        this.#header_button.addEventListener("click", options.clickEvent);
+        this.#headerButton = makeHeaderButtonBox(options);
+        this.#headerButton.addEventListener("click", options.clickEvent);
     }
 
     set() {
-        return this.#header_button;
+        return this.#headerButton;
     }
 }