chuijs 4.0.3 → 4.0.4

package/framework/components/chui_segmented_control/segmented_control.js

@@ -48,8 +48,11 @@ class SegmentedControl {
     // Вариант с tabindex="0": с ним же работает обход Tab; за фокусом и выбором следит отдельно
     #active = undefined;
     #disabled = new Set();
-    #on_change = undefined;
-    #activate_on_focus = false;
+    #onChange = undefined;
+    #activateOnFocus = false;
+    // Подложка выбора измеряется по вёрстке: наблюдатель и отложенный кадр держат её на месте
+    #observer = undefined;
+    #frame = undefined;
 
     constructor(
         options = {
@@ -66,8 +69,8 @@ class SegmentedControl {
         setStyles(__dirname + "/styles.css", "chUiJS_SegmentedControl");
         SegmentedControl.#counter += 1;
         this.#id = options.id === undefined ? `chui_segmented_control_${SegmentedControl.#counter}` : options.id;
-        this.#on_change = options.onChange;
-        this.#activate_on_focus = options.activateOnFocus === true;
+        this.#onChange = options.onChange;
+        this.#activateOnFocus = options.activateOnFocus === true;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "radiogroup");
         this.setSize(options.size === undefined ? SegmentedControl.SIZE.DEFAULT : options.size);
@@ -80,6 +83,28 @@ class SegmentedControl {
         // Пустая заготовка опции — это «выбор не сделан», а не значение «»
         const value = optionOr(options.value, undefined);
         if (value !== undefined) this.setValue(value, true);
+        // Ширина меняется от раскладки (растянутый контрол, поворот окна): без пересчёта
+        // подложка осталась бы на прежнем варианте
+        if (typeof ResizeObserver === "function") {
+            this.#observer = new ResizeObserver(() => this.#syncIndicator());
+            this.#observer.observe(this.#root);
+        }
+    }
+
+    /** Полное удаление: снять наблюдатель, отложенный кадр и слушатели */
+    destroy() {
+        if (this.#observer !== undefined) {
+            this.#observer.disconnect();
+            this.#observer = undefined;
+        }
+        if (this.#frame !== undefined) {
+            cancelAnimationFrame(this.#frame);
+            this.#frame = undefined;
+        }
+        this.#root.removeEventListener("keydown", this.#onKeyDown);
+        this.#root.removeEventListener("click", this.#onClick);
+        this.#root.remove();
+        return this;
     }
 
     // GET
@@ -152,7 +177,7 @@ class SegmentedControl {
         this.#value = next;
         this.#active = next;
         this.#sync();
-        if (!silent && changed && this.#on_change !== undefined) this.#on_change(next);
+        if (!silent && changed && this.#onChange !== undefined) this.#onChange(next);
         return this;
     }
 
@@ -266,13 +291,45 @@ class SegmentedControl {
             record.node.setAttribute("aria-checked", value === this.#value ? "true" : "false");
             record.node.setAttribute("tabindex", value === this.#active ? "0" : "-1");
         }
+        this.#scheduleIndicator();
+    }
+
+    /** Подложку двигают после раскладки: место варианта читается только из вёрстки */
+    #scheduleIndicator() {
+        if (typeof requestAnimationFrame !== "function") {
+            this.#syncIndicator();
+            return;
+        }
+        if (this.#frame !== undefined) return;
+        this.#frame = requestAnimationFrame(() => {
+            this.#frame = undefined;
+            this.#syncIndicator();
+        });
+    }
+
+    /**
+     * Место и ширина подложки выбора. Ноль — выбора нет или вёрстки ещё нет: подложки
+     * нулевой ширины не видно, поэтому до первой раскладки контрол выглядит как прежде.
+     */
+    #syncIndicator() {
+        const record = this.#value === undefined ? undefined : this.#options.get(this.#value);
+        if (record === undefined || record.node.offsetWidth === 0) {
+            this.#root.style.setProperty("--segmented_width", "0px");
+            return;
+        }
+        // В RTL началом ряда служит правый край: подложка стоит у него и едет влево
+        const rtl = window.getComputedStyle(this.#root).direction === "rtl";
+        const node = record.node;
+        const x = rtl ? this.#root.clientWidth - (node.offsetLeft + node.offsetWidth) : node.offsetLeft;
+        this.#root.style.setProperty("--segmented_offset", `${rtl ? -x : x}px`);
+        this.#root.style.setProperty("--segmented_width", `${node.offsetWidth}px`);
     }
 
     #focus(value = String()) {
         this.#active = value;
         this.#sync();
         this.#options.get(value).node.focus();
-        if (this.#activate_on_focus) this.setValue(value);
+        if (this.#activateOnFocus) this.setValue(value);
     }
 
     // Варианты — кастомные теги, поэтому клик приходит и от мыши, и от Enter/Space

package/framework/components/chui_segmented_control/styles.css

@@ -1,5 +1,5 @@
 /* Сегментированный переключатель: рамка — общая заливка контрола,
-   выбранный вариант — акцент (--blue_prime_background) */
+   выбранный вариант — подвижная подложка акцента */
 chui_segmented_control {
     display: inline-flex;
     align-items: center;
@@ -7,8 +7,30 @@ chui_segmented_control {
     padding: 2px;
     width: max-content;
     box-sizing: border-box;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
+    /* Место и ширина подложки: считает JS по вёрстке, нули — выбор не сделан */
+    --segmented_offset: 0px;
+    --segmented_width: 0px;
+}
+
+/* Подвижная подложка выбранного варианта: одна и та же деталь переезжает между
+   вариантами, вместо мгновенной смены заливки — как у системного переключателя.
+   Внутренний отступ равен отступу контейнера, поэтому подложка встаёт в ряд вариантов */
+chui_segmented_control::before {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    inset-block: 2px;
+    inset-inline-start: 0;
+    width: var(--segmented_width);
+    border-radius: var(--radius_sm);
+    background: var(--blue_prime_background);
+    transform: translateX(var(--segmented_offset));
+    transition:
+        transform var(--motion_base) var(--motion_ease),
+        width var(--motion_base) var(--motion_ease);
+    pointer-events: none;
 }
 
 segmented_option {
@@ -17,7 +39,7 @@ segmented_option {
     gap: 6px;
     padding: 4px 10px;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     font-family: inherit;
@@ -26,14 +48,18 @@ segmented_option {
     cursor: pointer;
     outline: none;
     user-select: none;
+    /* Вариант выше подложки: иначе акцент остался бы за текстом */
+    z-index: 1;
 }
 
-segmented_option:hover {
+/* Наведение — только у невыбранных: у выбранного заливку несёт подложка, и вторая
+   заливка читалась бы как другой цвет */
+segmented_option:not([aria-checked="true"]):hover {
     background: var(--element_background_hover);
 }
 
 segmented_option[aria-checked="true"] {
-    background: var(--blue_prime_background);
+    background: transparent;
     color: var(--text_color_hover);
 }
 
@@ -56,7 +82,7 @@ segmented_option[aria-disabled="true"]:hover {
 
 segmented_option[aria-disabled="true"][aria-checked="true"] {
     background: var(--blue_prime_background);
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 /* chui_icon задаёт собственный цвет, поэтому без этого правила глиф остаётся белым */

package/framework/components/chui_settings/settings.js

@@ -1,6 +1,6 @@
 const { setStyles } = require("../../modules/chui_functions");
 const { A11Y_FOCUSABLE_SELECTOR } = require("../../modules/chui_a11y/chui_a11y");
-const { store: shared_store } = require("../../modules/chui_store/chui_store");
+const { store: sharedStore } = require("../../modules/chui_store/chui_store");
 const { ThemeToggle } = require("../chui_theme_toggle/theme_toggle");
 const { Toggle } = require("../chui_inputs/chui_toggle/toggle");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
@@ -74,10 +74,10 @@ class Settings {
     #rows = [];
     /** Хранилище и ключ, под которым панель держит свои значения (без ключа — не держит) */
     #store = undefined;
-    #store_key = undefined;
+    #storeKey = undefined;
     /** Подписчики правки строки и её обработчик из опций */
-    #change_listeners = [];
-    #on_change = undefined;
+    #changeListeners = [];
+    #onChange = undefined;
     /** Последние известные значения строк: расхождение со снимком и есть правка пользователя */
     #seen = new Map();
 
@@ -95,9 +95,9 @@ class Settings {
         setStyles(__dirname + "/styles.css", "chUiJS_Settings");
         Settings.#counter += 1;
         this.#id = options.id === undefined ? `chui_settings_${Settings.#counter}` : options.id;
-        this.#store = options.store === undefined ? shared_store : options.store;
-        this.#store_key = hasText(options.storeKey) ? String(options.storeKey) : undefined;
-        this.#on_change = options.onChange;
+        this.#store = options.store === undefined ? sharedStore : options.store;
+        this.#storeKey = hasText(options.storeKey) ? String(options.storeKey) : undefined;
+        this.#onChange = options.onChange;
         this.#root.id = this.#id;
         if (options.title !== undefined) {
             const title = document.createElement("settings_title");
@@ -114,7 +114,7 @@ class Settings {
         // контролы (сегментированный, оценка), у которых своего события в DOM нет
         this.#root.addEventListener("change", this.#onUserEdit);
         this.#root.addEventListener("click", this.#onUserEdit);
-        if (this.#store_key !== undefined) this.restore();
+        if (this.#storeKey !== undefined) this.restore();
         // Снимок значений: от него панель отсчитывает правки пользователя
         this.#remember();
     }
@@ -146,8 +146,8 @@ class Settings {
     }
 
     /** Значение строки: адрес — описание из `Settings.Row(...)`, название или имя */
-    getValue(row_or_title = undefined) {
-        const record = this.#findRow(row_or_title);
+    getValue(rowOrTitle = undefined) {
+        const record = this.#findRow(rowOrTitle);
         return record === undefined ? undefined : this.#readValue(record.control);
     }
 
@@ -161,14 +161,14 @@ class Settings {
     }
 
     /** Значения строк раздела: адрес — описание из `Settings.Section(...)` или заголовок */
-    getSectionValues(section_or_title = undefined) {
-        const section = this.#findSection(section_or_title);
+    getSectionValues(sectionOrTitle = undefined) {
+        const section = this.#findSection(sectionOrTitle);
         return section === undefined ? {} : this.#valuesOf((record) => record.section === section);
     }
 
     /** Выключена ли строка: `false` и для несуществующей */
-    isRowDisabled(row_or_title = undefined) {
-        const record = this.#findRow(row_or_title);
+    isRowDisabled(rowOrTitle = undefined) {
+        const record = this.#findRow(rowOrTitle);
         return record === undefined ? false : record.disabled;
     }
 
@@ -179,27 +179,27 @@ class Settings {
      * может вернуть), а программная запись уведомления не рождает.
      */
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
 
     // ХРАНЕНИЕ
     /** Ключ панели в хранилище; `undefined` — панель значения не хранит */
     getStoreKey() {
-        return this.#store_key;
+        return this.#storeKey;
     }
 
     /** Записать значения панели в хранилище; без ключа — ничего не делает */
     save() {
-        if (this.#store_key === undefined) return this;
-        this.#store.set(this.#store_key, this.#storageValues());
+        if (this.#storeKey === undefined) return this;
+        this.#store.set(this.#storeKey, this.#storageValues());
         return this;
     }
 
     /** Прочитать значения из хранилища и заполнить строки; без сохранённого панель не меняется */
     restore() {
-        if (this.#store_key === undefined) return this;
-        return this.setValues(this.#store.get(this.#store_key, {}));
+        if (this.#storeKey === undefined) return this;
+        return this.setValues(this.#store.get(this.#storeKey, {}));
     }
 
     // SET
@@ -207,8 +207,8 @@ class Settings {
      * Записать значение строки: адрес — описание из `Settings.Row(...)`, название или имя.
      * Несуществующая строка и строка без писателя (кнопка) — без изменений.
      */
-    setValue(row_or_title = undefined, value = undefined) {
-        const record = this.#findRow(row_or_title);
+    setValue(rowOrTitle = undefined, value = undefined) {
+        const record = this.#findRow(rowOrTitle);
         if (record === undefined) return this;
         this.#writeValue(record.control, value);
         this.#remember();
@@ -225,8 +225,8 @@ class Settings {
     }
 
     /** Заполнить строки раздела: адрес — описание из `Settings.Section(...)` или заголовок */
-    setSectionValues(section_or_title = undefined, values = Object()) {
-        const section = this.#findSection(section_or_title);
+    setSectionValues(sectionOrTitle = undefined, values = Object()) {
+        const section = this.#findSection(sectionOrTitle);
         if (section === undefined) return this;
         return this.#writeValues(values, (record) => record.section === section);
     }
@@ -242,8 +242,8 @@ class Settings {
     }
 
     /** Выключить или включить строку: адресуется описанием из `Settings.Row(...)`, названием или именем */
-    setRowDisabled(row_or_title = undefined, disabled = Boolean()) {
-        const record = this.#findRow(row_or_title);
+    setRowDisabled(rowOrTitle = undefined, disabled = Boolean()) {
+        const record = this.#findRow(rowOrTitle);
         if (record === undefined) return this;
         this.#setRowDisabled(record, disabled);
         return this;
@@ -262,11 +262,10 @@ class Settings {
     #onUserEdit = (event) => {
         if (event.type === "click" && event.target instanceof Element && event.target.closest("button") !== null)
             return;
-        if (this.#store_key === undefined && this.#change_listeners.length === 0 && this.#on_change === undefined)
-            return;
+        if (this.#storeKey === undefined && this.#changeListeners.length === 0 && this.#onChange === undefined) return;
         const changed = this.#changedRows();
         if (changed.length === 0) return;
-        if (this.#store_key !== undefined) this.save();
+        if (this.#storeKey !== undefined) this.save();
         for (const record of changed) this.#emitChange(record);
     };
 
@@ -296,8 +295,8 @@ class Settings {
             name: record.name,
             value: this.#readValue(record.control),
         };
-        for (const listener of [...this.#change_listeners]) listener(change, this);
-        if (this.#on_change !== undefined) this.#on_change(change, this);
+        for (const listener of [...this.#changeListeners]) listener(change, this);
+        if (this.#onChange !== undefined) this.#onChange(change, this);
     }
 
     /** Снимок значений строк: от него панель отсчитывает следующие правки */
@@ -361,13 +360,13 @@ class Settings {
         const named = hasText(row.name);
         node.classList.toggle("settings_row_control_only", solo);
         node.classList.toggle("settings_row_stretch", row.stretch === true);
-        const description_id = solo ? undefined : this.#buildRowText(row, node);
+        const descriptionId = solo ? undefined : this.#buildRowText(row, node);
         const holder = document.createElement("settings_row_control");
         const control =
             row.control === undefined ? undefined : row.control instanceof Element ? row.control : row.control.set();
         if (control !== undefined) {
             holder.appendChild(control);
-            this.#applyControlA11y(control, titled ? String(row.title) : String(), description_id);
+            this.#applyControlA11y(control, titled ? String(row.title) : String(), descriptionId);
         }
         node.appendChild(holder);
         // Храним исходный контрол (компонент или узел): findControl() возвращает его вместе с методами
@@ -395,7 +394,7 @@ class Settings {
     /** Текст строки — название и описание; возвращает id описания (на него ссылается контрол) */
     #buildRowText(row = Object(), node = new HTMLElement()) {
         const text = document.createElement("settings_row_text");
-        let description_id = undefined;
+        let descriptionId = undefined;
         if (hasText(row.title)) {
             const title = document.createElement("settings_row_title");
             title.innerText = String(row.title);
@@ -405,11 +404,11 @@ class Settings {
             const description = document.createElement("settings_row_description");
             description.innerText = String(row.description);
             description.id = `${this.#id}_row_${this.#rows.length}_description`;
-            description_id = description.id;
+            descriptionId = description.id;
             text.appendChild(description);
         }
         node.appendChild(text);
-        return description_id;
+        return descriptionId;
     }
 
     /**
@@ -430,22 +429,22 @@ class Settings {
     }
 
     /** Строка по описанию из `Settings.Row(...)`, названию или имени (у строки-контрола их может и не быть) */
-    #findRow(row_or_title = undefined) {
-        if (row_or_title === undefined || row_or_title === null) return undefined;
+    #findRow(rowOrTitle = undefined) {
+        if (rowOrTitle === undefined || rowOrTitle === null) return undefined;
         return this.#rows.find(
             (row) =>
-                row.row === row_or_title ||
-                (row.title.length > 0 && row.title === row_or_title) ||
-                (row.name.length > 0 && row.name === row_or_title)
+                row.row === rowOrTitle ||
+                (row.title.length > 0 && row.title === rowOrTitle) ||
+                (row.name.length > 0 && row.name === rowOrTitle)
         );
     }
 
     /** Раздел по описанию из `Settings.Section(...)` или по заголовку (у раздела без заголовка — только описание) */
-    #findSection(section_or_title = undefined) {
-        if (section_or_title === undefined || section_or_title === null) return undefined;
+    #findSection(sectionOrTitle = undefined) {
+        if (sectionOrTitle === undefined || sectionOrTitle === null) return undefined;
         return this.#sections.find(
             (section) =>
-                section === section_or_title || (hasText(section.title) && String(section.title) === section_or_title)
+                section === sectionOrTitle || (hasText(section.title) && String(section.title) === sectionOrTitle)
         );
     }
 
@@ -538,7 +537,7 @@ class Settings {
      * а связь через `<label>` признаём только когда в нём есть текст: у `Toggle` разметка —
      * пустой `<label>` вокруг `input`, и без `aria-label` флажок остался бы без имени.
      */
-    #applyControlA11y(control = new HTMLElement(), label = String(), description_id = undefined) {
+    #applyControlA11y(control = new HTMLElement(), label = String(), descriptionId = undefined) {
         const role = control.getAttribute("role");
         const target =
             role === null || role === "presentation"
@@ -547,7 +546,7 @@ class Settings {
                     : control.querySelector(Settings.#FOCUSABLE)
                 : control;
         if (target === null) return;
-        if (description_id !== undefined) target.setAttribute("aria-describedby", description_id);
+        if (descriptionId !== undefined) target.setAttribute("aria-describedby", descriptionId);
         if (label.length === 0) return;
         if (target.getAttribute("aria-label") !== null) return;
         const wrapper = target.closest("label");

package/framework/components/chui_settings/styles.css

@@ -3,7 +3,7 @@ chui_settings {
     display: block;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -28,14 +28,14 @@ settings_section {
     display: block;
     margin-bottom: 12px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     overflow: hidden;
 }
 
 settings_section_head {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -60,7 +60,7 @@ settings_row {
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
 }
 
 /* Разделитель только между строками: у первой он уже есть в шапке раздела */

package/framework/components/chui_shortcut_help/shortcut_help.js

@@ -41,23 +41,23 @@ class ShortcutHelp {
 
     #root = document.createElement("chui_shortcut_help");
     #id = undefined;
-    #id_title = undefined;
+    #idTitle = undefined;
     #title = document.createElement("shortcut_help_title");
     #search = document.createElement("shortcut_help_search");
     #input = undefined;
     #status = document.createElement("shortcut_help_status");
-    #groups_node = document.createElement("shortcut_help_groups");
+    #groupsNode = document.createElement("shortcut_help_groups");
     #empty = document.createElement("shortcut_help_empty");
     #source = [];
     #groups = [];
-    #title_hidden = false;
-    #title_value = undefined;
+    #titleHidden = false;
+    #titleValue = undefined;
     #label = undefined;
     #columns = 1;
     #searchable = false;
     #placeholder = undefined;
-    #empty_text = undefined;
-    #kbd_size = Kbd.SIZE.DEFAULT;
+    #emptyText = undefined;
+    #kbdSize = Kbd.SIZE.DEFAULT;
 
     constructor(
         options = {
@@ -76,9 +76,9 @@ class ShortcutHelp {
         setStyles(__dirname + "/styles.css", "chUiJS_ShortcutHelp");
         ShortcutHelp.#counter += 1;
         this.#id = optionOr(options.id, `chui_shortcut_help_${ShortcutHelp.#counter}`);
-        this.#id_title = `${this.#id}_title`;
+        this.#idTitle = `${this.#id}_title`;
         this.#root.id = this.#id;
-        this.#title.id = this.#id_title;
+        this.#title.id = this.#idTitle;
         // Заголовок — настоящий заголовок: к шпаргалке можно перейти навигацией по заголовкам
         this.#title.setAttribute("role", "heading");
         this.#title.setAttribute("aria-level", "2");
@@ -89,16 +89,16 @@ class ShortcutHelp {
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#search);
         this.#root.appendChild(this.#status);
-        this.#root.appendChild(this.#groups_node);
+        this.#root.appendChild(this.#groupsNode);
         this.#root.appendChild(this.#empty);
         this.#label = options.label;
-        this.#title_hidden = options.title === null;
-        this.#title_value = typeof options.title === "string" && options.title !== "" ? options.title : undefined;
+        this.#titleHidden = options.title === null;
+        this.#titleValue = typeof options.title === "string" && options.title !== "" ? options.title : undefined;
         this.#placeholder = options.searchPlaceholder;
-        this.#empty_text = options.emptyText;
-        if (options.kbdSize !== undefined) this.#kbd_size = options.kbdSize;
+        this.#emptyText = options.emptyText;
+        if (options.kbdSize !== undefined) this.#kbdSize = options.kbdSize;
         this.setColumns(options.columns === undefined ? 1 : options.columns);
-        this.setTitle(this.#title_hidden ? null : this.#title_value);
+        this.setTitle(this.#titleHidden ? null : this.#titleValue);
         if (options.searchable === true) this.setSearchable(true);
         else this.#syncSearch();
         this.#source = ShortcutHelp.#normalizeSource(options);
@@ -112,7 +112,7 @@ class ShortcutHelp {
 
     /** Заголовок на экране (`""`, если он убран) */
     getTitle() {
-        return this.#title_hidden ? "" : this.#title.innerText;
+        return this.#titleHidden ? "" : this.#title.innerText;
     }
 
     /** Группы со строками: `[{title, items: [{keys, description, label}]}]` */
@@ -157,12 +157,10 @@ class ShortcutHelp {
 
     /** Заголовок; `null` убирает его (тогда блок называется по `label`) */
     setTitle(text = undefined) {
-        this.#title_hidden = text === null;
-        this.#title_value = typeof text === "string" && text !== "" ? text : undefined;
-        this.#title.innerText = this.#title_hidden
-            ? ""
-            : optionOr(this.#title_value, I18n.t("navigation.shortcutHelp"));
-        this.#title.hidden = this.#title_hidden;
+        this.#titleHidden = text === null;
+        this.#titleValue = typeof text === "string" && text !== "" ? text : undefined;
+        this.#title.innerText = this.#titleHidden ? "" : optionOr(this.#titleValue, I18n.t("navigation.shortcutHelp"));
+        this.#title.hidden = this.#titleHidden;
         this.#syncAria();
         return this;
     }
@@ -193,9 +191,9 @@ class ShortcutHelp {
                 inputListener: () => this.#syncSearch(),
             });
             // Видимой подписи у поля нет, а пл҃ейсхолдер — не имя: имя ставим явно
-            const search_field = this.#input.set().querySelector("input");
-            if (search_field !== null) {
-                search_field.setAttribute(
+            const searchField = this.#input.set().querySelector("input");
+            if (searchField !== null) {
+                searchField.setAttribute(
                     "aria-label",
                     optionOr(this.#placeholder, I18n.t("navigation.shortcutHelpSearch"))
                 );
@@ -266,21 +264,21 @@ class ShortcutHelp {
     }
 
     #render() {
-        this.#groups_node.innerHTML = "";
+        this.#groupsNode.innerHTML = "";
         this.#groups = [];
         this.#source.forEach((group, index) => {
             const node = document.createElement("div");
             node.className = "shortcut_help_group";
-            const id_group_title = `${this.#id}_group_${index}`;
+            const idGroupTitle = `${this.#id}_group_${index}`;
             node.setAttribute("role", "group");
             const title = document.createElement("shortcut_help_group_title");
-            title.id = id_group_title;
+            title.id = idGroupTitle;
             title.setAttribute("role", "heading");
             title.setAttribute("aria-level", "3");
             title.innerText = group.title;
             title.hidden = group.title === "";
             node.appendChild(title);
-            if (group.title !== "") node.setAttribute("aria-labelledby", id_group_title);
+            if (group.title !== "") node.setAttribute("aria-labelledby", idGroupTitle);
             const list = document.createElement("ul");
             list.className = "shortcut_help_list";
             const rows = [];
@@ -294,7 +292,7 @@ class ShortcutHelp {
                 if (item.keys.length > 0) {
                     const keys = document.createElement("shortcut_help_keys");
                     // Сочетание рисует Kbd: клавиша — настоящий <kbd>, значковым нужен label
-                    keys.appendChild(new Kbd({ keys: item.keys, size: this.#kbd_size, label: item.label }).set());
+                    keys.appendChild(new Kbd({ keys: item.keys, size: this.#kbdSize, label: item.label }).set());
                     line.appendChild(keys);
                 }
                 const text = document.createElement("shortcut_help_text");
@@ -305,10 +303,10 @@ class ShortcutHelp {
                 rows.push({ node: row, search: `${item.description} ${item.keys.join(" ")}`.toLowerCase() });
             }
             node.appendChild(list);
-            this.#groups_node.appendChild(node);
+            this.#groupsNode.appendChild(node);
             this.#groups.push({ node: node, rows: rows });
         });
-        this.#empty.innerText = optionOr(this.#empty_text, I18n.t("navigation.shortcutHelpEmpty"));
+        this.#empty.innerText = optionOr(this.#emptyText, I18n.t("navigation.shortcutHelpEmpty"));
         this.#syncSearch();
         this.#syncAria();
     }
@@ -328,7 +326,7 @@ class ShortcutHelp {
             visible += shown;
         }
         const nothing = visible === 0 && this.#groups.length > 0;
-        this.#groups_node.hidden = nothing;
+        this.#groupsNode.hidden = nothing;
         this.#empty.hidden = !nothing;
         return visible;
     }
@@ -344,7 +342,7 @@ class ShortcutHelp {
     }
 
     #syncAria() {
-        if (this.#title_hidden) {
+        if (this.#titleHidden) {
             this.#root.setAttribute("role", "group");
             this.#root.removeAttribute("aria-labelledby");
             this.#root.setAttribute("aria-label", optionOr(this.#label, I18n.t("navigation.shortcutHelp")));
@@ -352,7 +350,7 @@ class ShortcutHelp {
         }
         this.#root.setAttribute("role", "region");
         this.#root.removeAttribute("aria-label");
-        this.#root.setAttribute("aria-labelledby", this.#id_title);
+        this.#root.setAttribute("aria-labelledby", this.#idTitle);
     }
 }