chuijs 4.0.3 → 4.0.4

package/framework/components/chui_content_block/content_block.js

@@ -23,7 +23,7 @@ class ContentBlock {
         if (this.#disableMarginChild) this.disableMarginChild();
     }
     remove(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
     // FUNCTIONS
     disableMarginChild() {
@@ -32,7 +32,7 @@ class ContentBlock {
         this.#body.classList.add("contentblock_no_margin");
     }
     add(...components) {
-        for (let component of components) {
+        for (const component of components) {
             new Animation(component.set()).fadeIn();
             this.#body.appendChild(component.set());
         }

package/framework/components/chui_context_menu/context_menu.js

@@ -4,18 +4,27 @@ const { MenuKeyboard, A11Y_FOCUSABLE_SELECTOR } = require("../../modules/chui_a1
 
 class ContextMenu {
     #menu = document.createElement("chui_context_menu");
+    // Слой пунктов: кадр появления и ухода играет он, а поверхность меню с блюром стоит
+    // на месте. Элемент с `transform` или `opacity` становится «backdrop root», и его
+    // `backdrop-filter` перестаёт видеть страницу — прежний кадр на самом меню из-за этого
+    // шёл без блюра, и блюр появлялся только после конца кадра
+    #panel = document.createElement("context_menu_panel");
     #targets = [];
     #visible = false;
     #hideHandler = undefined;
     #keyboard = undefined;
+    #label = undefined;
     // Цель `attach()`, к которой возвращается фокус после закрытия меню
-    #return_focus = undefined;
+    #returnFocus = undefined;
     // Где фокус был до открытия меню: цель может быть нефокусируемой обёрткой (chui_button)
-    #previous_focus = undefined;
+    #previousFocus = undefined;
 
     constructor(options = { items: [] }) {
         setStyles(__dirname + "/styles.css", "chUiJS_ContextMenu");
-        this.#renderItems(this.#menu, options.items);
+        // Роль меню лежит на самом слое: `MenuKeyboard` и отбирает пункты по ближайшему меню,
+        // и ставит её сам, а слой пунктов нужен только для кадра
+        this.#menu.appendChild(this.#panel);
+        this.#renderItems(this.#panel, options.items);
         // Меню — фокусируемый слой: открытие мышью фокуса в нём не оставляет, но клавиши
         // (стрелки, набор букв) должны попадать в список, а не элементу под курсором
         this.#menu.setAttribute("tabindex", "-1");
@@ -32,7 +41,14 @@ class ContextMenu {
 
     // === СТАТИЧЕСКИЕ ОПИСАНИЯ ПУНКТОВ ===
     static Item(
-        options = { title: String(), icon: String(), shortcut: String(), disabled: Boolean(), clickEvent: () => {} }
+        options = {
+            title: String(),
+            icon: String(),
+            shortcut: String(),
+            disabled: Boolean(),
+            danger: Boolean(),
+            clickEvent: () => {},
+        }
     ) {
         return { type: "item", ...options };
     }
@@ -46,45 +62,50 @@ class ContextMenu {
     // === ПОСТРОЕНИЕ ===
     #renderItems(container, items) {
         if (items === undefined) return;
-        for (let item of items) {
+        for (const item of items) {
             if (item.type === "separator") {
                 // Разделитель — не пункт меню: роль `separator` говорит об этом и скринридеру
-                let separator = document.createElement("context_menu_separator");
+                const separator = document.createElement("context_menu_separator");
                 separator.setAttribute("role", "separator");
                 container.appendChild(separator);
                 continue;
             }
-            let row = document.createElement("context_menu_item");
+            const row = document.createElement("context_menu_item");
+            row.setAttribute("role", "menuitem");
             if (item.icon) {
-                let iconWrap = document.createElement("context_menu_item_icon");
+                const iconWrap = document.createElement("context_menu_item_icon");
                 iconWrap.innerHTML = new Icon(item.icon).getHTML();
                 // Значок — украшение: его лигатура не должна попадать ни в имя пункта, ни в набор
                 iconWrap.setAttribute("aria-hidden", "true");
                 row.appendChild(iconWrap);
             }
-            let title = document.createElement("context_menu_item_title");
+            const title = document.createElement("context_menu_item_title");
             if (item.title !== undefined) title.innerText = item.title;
             row.appendChild(title);
 
             if (item.type === "submenu") {
+                row.setAttribute("aria-haspopup", "menu");
                 if (item.shortcut) {
-                    let shortcut = document.createElement("context_menu_item_shortcut");
+                    const shortcut = document.createElement("context_menu_item_shortcut");
                     shortcut.innerText = item.shortcut;
                     row.appendChild(shortcut);
                 }
-                let arrow = document.createElement("context_menu_item_arrow");
+                const arrow = document.createElement("context_menu_item_arrow");
                 arrow.innerHTML = new Icon(Icons.NAVIGATION.CHEVRON_RIGHT).getHTML();
                 arrow.setAttribute("aria-hidden", "true");
                 if (!item.shortcut) arrow.classList.add("context_menu_item_arrow_end");
                 row.appendChild(arrow);
-                let submenu = document.createElement("context_menu_submenu");
-                this.#renderItems(submenu, item.items);
+                const submenu = document.createElement("context_menu_submenu");
+                const subpanel = document.createElement("context_menu_panel");
+                submenu.setAttribute("role", "menu");
+                submenu.appendChild(subpanel);
+                this.#renderItems(subpanel, item.items);
                 row.appendChild(submenu);
                 // Подменю — свой уровень меню: Escape/ArrowLeft закрывают его и возвращают фокус на строку
                 new MenuKeyboard(submenu, {
                     itemSelector: "context_menu_item",
                     submenuSelector: "context_menu_submenu",
-                    onSubmenuOpen: (inner_row) => this.#openSubMenu(inner_row),
+                    onSubmenuOpen: (innerRow) => this.#openSubMenu(innerRow),
                     onEscape: () => this.#closeSubMenu(row),
                     submenu: true,
                     trigger: row,
@@ -100,8 +121,10 @@ class ContextMenu {
                         this.hide();
                     });
                 }
+                // Опасный пункт (удалить, очистить) — подписью красного цвета
+                if (item.danger === true) row.dataset.danger = "true";
                 if (item.shortcut) {
-                    let shortcut = document.createElement("context_menu_item_shortcut");
+                    const shortcut = document.createElement("context_menu_item_shortcut");
                     shortcut.innerText = item.shortcut;
                     row.appendChild(shortcut);
                 }
@@ -112,19 +135,19 @@ class ContextMenu {
 
     // === ПОДМЕНЮ ===
     #openSubMenu(row) {
-        let submenu = row.querySelector("context_menu_submenu");
+        const submenu = row.querySelector("context_menu_submenu");
         if (submenu === null) return;
         // Закрыть соседние подменю того же уровня
-        let parent = row.parentElement;
-        for (let child of parent.children) {
+        const parent = row.parentElement;
+        for (const child of parent.children) {
             if (child === row) continue;
-            let sibling = child.querySelector("context_menu_submenu");
+            const sibling = child.querySelector("context_menu_submenu");
             if (sibling !== null) sibling.style.display = "none";
         }
         submenu.style.display = "flex";
         submenu.style.left = "100%";
         submenu.style.top = "0px";
-        let rowRect = row.getBoundingClientRect();
+        const rowRect = row.getBoundingClientRect();
         let subRect = submenu.getBoundingClientRect();
         // Флип влево у правого края окна
         if (subRect.right > window.innerWidth - 8) {
@@ -132,41 +155,97 @@ class ContextMenu {
             subRect = submenu.getBoundingClientRect();
         }
         // Флип вверх у нижнего края окна
-        let overflow = rowRect.top + subRect.height - (window.innerHeight - 8);
+        const overflow = rowRect.top + subRect.height - (window.innerHeight - 8);
         if (overflow > 0) {
-            let shift = Math.min(overflow, rowRect.top - 8);
+            const shift = Math.min(overflow, rowRect.top - 8);
             submenu.style.top = -shift + "px";
         }
+        // Кадр — после расстановки: он начинается с уменьшенного состояния, а по нему положение
+        // и высоту уже не измерить. Перезапускать явно не нужно: панель до этого была скрыта
+        // (`display: none`), поэтому при показе кадр начинается заново. Кадр играет слой пунктов,
+        // поверхность подменю стоит на месте — так блюр видно с первого кадра
+        const panel = submenu.querySelector("context_menu_panel");
+        if (panel !== null) this.#play(panel, "context-scale-in", "enter");
+        this.#plate(submenu, "enter");
+    }
+
+    /**
+     * Снять вид движения по концу кадра появления.
+     *
+     * Вид держит конечное состояние (`animation-fill-mode: both`), поэтому на слое остаётся
+     * вычисленный `transform` — пусть и единичный. Элемент с `transform` становится собственным
+     * «backdrop root», и размытие подложки перестаёт видеть содержимое под слоем: меню шло
+     * прозрачной подложкой без блюра. После кадра вид снимается, а `animation-name` остаётся:
+     * по нему видно, что узел уже открыт.
+     */
+    #stripMotion(element = new HTMLElement()) {
+        const done = (event) => {
+            if (event.target !== element) return;
+            element.removeEventListener("animationend", done);
+            element.removeAttribute("data-motion");
+        };
+        element.addEventListener("animationend", done);
     }
     #closeSubMenu(row) {
-        let submenu = row.querySelector("context_menu_submenu");
+        const submenu = row.querySelector("context_menu_submenu");
         if (submenu !== null) submenu.style.display = "none";
     }
 
+    /**
+     * Замена пунктов: меню собирается заново. Нужно там, где меню строят по тому, на чём его
+     * открыли: список разговоров собирает пункты по выбранной строке («Отметить прочитанным»
+     * есть только у строки с непрочитанными) — для этого подходит и функция-строитель
+     */
+    setItems(items = []) {
+        this.#panel.innerHTML = "";
+        this.#renderItems(this.#panel, items);
+        this.#keyboard.refresh();
+        return this;
+    }
+    /** Имя меню для скринридера: оно нужно слою с ролью меню, то есть самому меню */
+    setLabel(text = String()) {
+        this.#label = String(text);
+        if (this.#label === "") this.#menu.removeAttribute("aria-label");
+        else this.#menu.setAttribute("aria-label", this.#label);
+        return this;
+    }
+    getLabel() {
+        return this.#label === undefined ? "" : this.#label;
+    }
+    /**
+     * Слой пунктов. Пункты лежат в нём, а не прямо в меню, только ради кадра: кадр появления
+     * с прозрачностью и усадкой должен играть внутри, а поверхность меню с блюром — стоять
+     * недвижимо. Роли на нём нет: меню для скринридера — сам слой (`role="menu"` ставит
+     * `MenuKeyboard`), и по нему же клавиатура отбирает свои пункты
+     */
+    getPanel() {
+        return this.#panel;
+    }
+
     // === ПОКАЗ / СКРЫТИЕ ===
     attach(target) {
-        let element = typeof target.set === "function" ? target.set() : target;
-        let listener = (event) => {
+        const element = typeof target.set === "function" ? target.set() : target;
+        const listener = (event) => {
             event.preventDefault();
-            this.#return_focus = event.currentTarget === null ? element : event.currentTarget;
+            this.#returnFocus = event.currentTarget === null ? element : event.currentTarget;
             this.show(event.clientX, event.clientY);
         };
         // Клавиатура: клавиша ContextMenu или Shift+F10 открывают меню у элемента
-        let key_listener = (event) => {
+        const keyListener = (event) => {
             if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
             event.preventDefault();
-            this.#return_focus = element;
-            let rect = element.getBoundingClientRect();
+            this.#returnFocus = element;
+            const rect = element.getBoundingClientRect();
             this.show(rect.left + 8, rect.top + rect.height / 2);
             this.#keyboard.focusFirst();
         };
         element.addEventListener("contextmenu", listener);
-        element.addEventListener("keydown", key_listener);
-        this.#targets.push({ element: element, listener: listener, key_listener: key_listener });
+        element.addEventListener("keydown", keyListener);
+        this.#targets.push({ element: element, listener: listener, key_listener: keyListener });
         return this;
     }
     detach(target) {
-        let element = typeof target.set === "function" ? target.set() : target;
+        const element = typeof target.set === "function" ? target.set() : target;
         for (let i = 0; i < this.#targets.length; i++) {
             if (this.#targets[i].element === element) {
                 element.removeEventListener("contextmenu", this.#targets[i].listener);
@@ -179,7 +258,7 @@ class ContextMenu {
     show(x = 0, y = 0) {
         this.#cancelPendingHide();
         // Сбросить геометрию подменю от прошлого показа
-        for (let submenu of this.#menu.querySelectorAll("context_menu_submenu")) {
+        for (const submenu of this.#menu.querySelectorAll("context_menu_submenu")) {
             submenu.style.display = "none";
             submenu.style.left = "100%";
             submenu.style.top = "0px";
@@ -200,22 +279,24 @@ class ContextMenu {
         this.#menu.style.left = "0px";
         this.#menu.style.top = "0px";
         // Позиция с учётом краёв окна
-        let left = Math.max(8, Math.min(x, window.innerWidth - this.#menu.offsetWidth - 8));
-        let top = Math.max(8, Math.min(y, window.innerHeight - this.#menu.offsetHeight - 8));
+        const left = Math.max(8, Math.min(x, window.innerWidth - this.#menu.offsetWidth - 8));
+        const top = Math.max(8, Math.min(y, window.innerHeight - this.#menu.offsetHeight - 8));
         this.#menu.style.left = left + "px";
         this.#menu.style.top = top + "px";
         // Зафиксировать финальную геометрию до показа
         void this.#menu.offsetWidth;
-        // Показ и перезапуск анимации уже в финальной позиции
+        // Показ и перезапуск анимации уже в финальной позиции: кадр играет слой пунктов,
+        // а поверхность растворяется своим кадром по псевдоэлементу — ни `transform`, ни
+        // смена размера у неё не появляются, поэтому блюр подложки виден от начала и до конца,
+        // а рамка ни на миг не оказывается уже пунктов
         this.#menu.style.visibility = "visible";
-        this.#menu.style.animationName = "none";
-        void this.#menu.offsetWidth;
-        this.#menu.style.animationName = "context-scale-in";
+        this.#plate(this.#menu, "enter");
+        this.#play(this.#panel, "context-scale-in", "enter");
         // Забрать фокус меню: без этого после правого клика стрелки и набор букв уходили бы
         // элементу под курсором. Пункт при этом не подсвечивается — набор начнётся с найденного.
         if (!this.#menu.contains(document.activeElement)) {
             // Где фокус был до открытия: по нему меню вернёт его, если сама цель нефокусируема
-            this.#previous_focus = document.activeElement;
+            this.#previousFocus = document.activeElement;
             this.#menu.focus();
         }
         this.#keyboard.refresh();
@@ -230,18 +311,44 @@ class ContextMenu {
         window.removeEventListener("keydown", this.#onWindowKeyDown);
         window.removeEventListener("resize", this.#onWindowResize);
         window.removeEventListener("blur", this.#onWindowBlur);
-        // Анимация скрытия
-        this.#menu.style.animationName = "none";
-        void this.#menu.offsetWidth;
-        this.#menu.style.animationName = "context-scale-out";
+        // Анимация скрытия: уход играет слой пунктов, поверхность убирается тем же кругом
+        this.#plate(this.#menu, "exit");
+        this.#play(this.#panel, "context-scale-out", "exit");
         this.#hideHandler = (event) => {
-            if (event.target !== this.#menu) return;
-            this.#menu.removeEventListener("animationend", this.#hideHandler);
+            if (event.target !== this.#panel) return;
+            this.#panel.removeEventListener("animationend", this.#hideHandler);
+            this.#stop(this.#menu);
+            this.#stop(this.#panel);
             this.#menu.style.display = "none";
-            this.#menu.style.removeProperty("animation-name");
             this.#hideHandler = undefined;
         };
-        this.#menu.addEventListener("animationend", this.#hideHandler);
+        this.#panel.addEventListener("animationend", this.#hideHandler);
+    }
+    /** Пустить кадр по слою: имя, вид движения и снятие вида по концу кадра */
+    #play(element, frame, motion) {
+        element.style.animationName = "none";
+        void element.offsetWidth;
+        element.style.animationName = frame;
+        element.dataset.motion = motion;
+        this.#stripMotion(element);
+    }
+    /**
+     * Кадр поверхности. На самом слое его нет намеренно: с `transform` слой становится
+     * «backdrop root» и перестаёт видеть страницу — блюр подложки пропадал бы до конца кадра.
+     * Поэтому кадр идёт по псевдоэлементу поверхности (`::before`) и только по прозрачности:
+     * он ничего не двигает и не меняет размер, так что рамка ни на миг не оказывается уже
+     * пунктов, а блюр виден всю дорогу. Вид движения на слое открывает кадру его время и кривую
+     */
+    #plate(element, motion) {
+        element.removeAttribute("data-motion");
+        void element.offsetWidth;
+        element.dataset.motion = motion;
+        this.#stripMotion(element);
+    }
+    /** Снять следы кадра: имя и вид движения с инлайновых стилей и атрибутов */
+    #stop(element) {
+        element.style.removeProperty("animation-name");
+        element.removeAttribute("data-motion");
     }
     /**
      * Вернуть фокус после закрытия. Сначала — на цель `attach()`; сама цель бывает
@@ -249,7 +356,7 @@ class ContextMenu {
      * где он был до открытия меню (правый клик фокусирует внутреннюю кнопку сам).
      */
     #restoreFocus() {
-        const target = this.#return_focus;
+        const target = this.#returnFocus;
         if (
             target !== undefined &&
             target !== null &&
@@ -260,23 +367,24 @@ class ContextMenu {
             target.focus();
             return;
         }
-        const previous = this.#previous_focus;
-        this.#previous_focus = undefined;
+        const previous = this.#previousFocus;
+        this.#previousFocus = undefined;
         if (previous === undefined || previous === null || previous === document.body) return;
         if (this.#menu.contains(previous) || !document.body.contains(previous)) return;
         if (typeof previous.focus === "function") previous.focus();
     }
     #cancelPendingHide() {
         if (this.#hideHandler !== undefined) {
-            this.#menu.removeEventListener("animationend", this.#hideHandler);
-            this.#menu.style.removeProperty("animation-name");
+            this.#panel.removeEventListener("animationend", this.#hideHandler);
+            this.#stop(this.#menu);
+            this.#stop(this.#panel);
             this.#hideHandler = undefined;
         }
     }
     destroy() {
         this.hide();
         this.#keyboard.destroy();
-        for (let target of this.#targets) {
+        for (const target of this.#targets) {
             target.element.removeEventListener("contextmenu", target.listener);
             target.element.removeEventListener("keydown", target.key_listener);
         }

package/framework/components/chui_context_menu/styles.css

@@ -1,8 +1,10 @@
 /* ── ContextMenu — контекстное меню ───────────────────────── */
+/* Кадры слоя пунктов: прозрачность и усадка. Слой пунктов не носит блюра, поэтому его
+   `opacity` и `transform` блюру поверхности не мешают */
 @keyframes context-scale-in {
     from {
         opacity: 0;
-        transform: scale(0.92);
+        transform: scale(0.96);
     }
     to {
         opacity: 1;
@@ -16,7 +18,22 @@
     }
     to {
         opacity: 0;
-        transform: scale(0.92);
+        transform: scale(0.96);
+    }
+}
+/* Кадры поверхности: растворение на месте. Размер она не меняет намеренно: с ростом по `inset`
+   рамка оказывалась меньше пунктов — на уходе это видно как вылезающая за кромку подпись
+   (замер: на 60-й мс ухода поверхность была на 7px меньше пунктов, а последний пункт ещё
+   не погас). Кадр идёт по псевдоэлементу и только по прозрачности: `transform` на нём или
+   на его предке сделал бы слой «backdrop root», и блюр подложки пропал бы до конца кадра */
+@keyframes context-plate-in {
+    from {
+        opacity: 0;
+    }
+}
+@keyframes context-plate-out {
+    to {
+        opacity: 0;
     }
 }
 
@@ -32,13 +49,56 @@ context_menu_submenu {
     width: max-content;
     min-width: 180px;
     height: max-content;
-    padding: var(--margin);
+    padding: var(--block_margin);
     background-color: transparent;
     color: var(--text_color);
     border: none;
     font-size: var(--font_default_size);
 }
 
+/* Слой пунктов: в нём живут пункты меню и подменю, и он же — само меню для скринридера.
+   Кадр появления играет он, поэтому поверхность меню остаётся неанимированной */
+context_menu_panel {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    outline: none;
+}
+
+/* Вид движения ставит context_menu.js: время и кривая — те же, что у остальных всплывающих
+   слоёв, а уход короче входа. Кадр играет слой пунктов: он не носит блюра, и его прозрачность
+   с усадкой поверхности меню не мешают */
+context_menu_panel[data-motion="enter"] {
+    animation-duration: var(--motion_base);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+context_menu_panel[data-motion="exit"] {
+    animation-duration: var(--motion_fast);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+/* Поверхность растворяется своим кадром: он идёт по псевдоэлементу и только по прозрачности,
+   поэтому сама поверхность не двигается и не меняет размер — блюр подложки виден всю дорогу,
+   а рамка ни на миг не оказывается уже пунктов */
+chui_context_menu[data-motion="enter"]::before,
+context_menu_submenu[data-motion="enter"]::before {
+    animation-name: context-plate-in;
+    animation-duration: var(--motion_base);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+chui_context_menu[data-motion="exit"]::before,
+context_menu_submenu[data-motion="exit"]::before {
+    animation-name: context-plate-out;
+    animation-duration: var(--motion_fast);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
 chui_context_menu::before,
 context_menu_submenu::before {
     content: "";
@@ -47,7 +107,7 @@ context_menu_submenu::before {
     z-index: -1;
     background-color: var(--header_background);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Меню — всплывающий слой: тень отрыва (как у меню SplitButton и палитры),
        а не контактная тень карточки */
     box-shadow: var(--box_shadow_drop);
@@ -56,7 +116,8 @@ context_menu_submenu::before {
     pointer-events: none;
 }
 
-chui_context_menu {
+chui_context_menu,
+context_menu_submenu {
     position: fixed;
     z-index: 5000;
     transform-origin: top left;
@@ -87,8 +148,8 @@ context_menu_item {
     white-space: nowrap;
     cursor: pointer;
     /* Компактный шаг контрола: 5px по вертикали дают те же 29px, что у пунктов меню */
-    padding: var(--main_padding_sm);
-    border-radius: var(--border_radius);
+    padding: var(--block_padding_sm);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     gap: 6px;
     box-sizing: border-box;
@@ -160,7 +221,7 @@ context_menu_item_shortcut {
 }
 
 context_menu_item:hover context_menu_item_shortcut {
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 context_menu_separator {
@@ -169,6 +230,19 @@ context_menu_separator {
     background: var(--border_color);
 }
 
+/* Опасный пункт (удалить, очистить) — подписью и значком красного цвета: значок
+   часть подписи, и красный текст с обычным значком читались бы нарочно недоведёнными */
+context_menu_item[data-danger="true"] context_menu_item_title,
+context_menu_item[data-danger="true"] context_menu_item_icon chui_icon {
+    color: var(--red_prime_background);
+}
+
+/* Наведение не должно гасить красноту: правило `:hover chui_icon` ниже по файлу
+   иначе перекрашивало значок опасного пункта в обычный цвет */
+context_menu_item[data-danger="true"]:hover chui_icon {
+    color: var(--red_prime_background);
+}
+
 .context_menu_item_disabled {
     cursor: default;
     opacity: 0.5;

package/framework/components/chui_custom_element/custom_element.js

@@ -1,5 +1,5 @@
 class CustomElement {
-    #chui_custom_element = undefined;
+    #chuiCustomElement = undefined;
     constructor(
         options = {
             tag: String(),
@@ -12,27 +12,27 @@ class CustomElement {
         // Пустая заготовка опции равносильна отсутствующей: `createElement("")` падал TypeError
         const tag = optionOr(options.tag, undefined);
         if (tag === undefined) throw new Error("Не установлен тэг элемента");
-        this.#chui_custom_element = document.createElement(tag);
+        this.#chuiCustomElement = document.createElement(tag);
         const id = optionOr(options.id, undefined);
         if (id === undefined) throw new Error("Не установлен идентификатор элемента");
         // Файл стилей — необязательная опция: пустой путь читался как файл и падал ENOENT
-        const path_to_css = optionOr(options.pathToCSS, undefined);
-        if (path_to_css !== undefined) setStyles(path_to_css, `chUiJS_CustomElement_${id}`);
-        this.#chui_custom_element.id = id;
-        const class_name = optionOr(options.className, undefined);
-        if (class_name !== undefined) this.#chui_custom_element.className = class_name;
+        const pathToCss = optionOr(options.pathToCSS, undefined);
+        if (pathToCss !== undefined) setStyles(pathToCss, `chUiJS_CustomElement_${id}`);
+        this.#chuiCustomElement.id = id;
+        const className = optionOr(options.className, undefined);
+        if (className !== undefined) this.#chuiCustomElement.className = className;
     }
     addEventListener(type = String(), listener = () => {}) {
-        this.#chui_custom_element.addEventListener(type, listener);
+        this.#chuiCustomElement.addEventListener(type, listener);
     }
     innerText(innerText = String()) {
-        this.#chui_custom_element.innerText = innerText;
+        this.#chuiCustomElement.innerText = innerText;
     }
     innerHTML(innerHTML = String()) {
-        this.#chui_custom_element.innerHTML = innerHTML;
+        this.#chuiCustomElement.innerHTML = innerHTML;
     }
     set() {
-        return this.#chui_custom_element;
+        return this.#chuiCustomElement;
     }
 }