chuijs 4.0.2 → 4.0.3

package/framework/appLayout/default/global_style.css

@@ -126,10 +126,10 @@
     --focus_outline_offset_inset: -2px;
 
     /* Тайминг анимаций */
-    --transition_time: .165s;
+    --transition_time: 0.165s;
     /* Кривая движения: быстрый старт, мягкое торможение — «выезд» панели читается
        как отклик, а не как линейный сдвиг. Отскока нет намеренно. */
-    --ease_out: cubic-bezier(.2, .8, .2, 1);
+    --ease_out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
     /* Схема нативных частей: палитры приложения разложены по prefers-color-scheme,
        поэтому браузер должен рисовать и родные части (каретка, выделение, системные
@@ -279,16 +279,17 @@ chui_error_message {
 }
 
 * {
-    font-family: 'chui_I';
+    font-family: "chui_I";
     font-style: normal;
     user-select: none;
     outline: none;
-    transition: background-color var(--transition_time) ease,
-    color var(--transition_time) ease,
-    border-color var(--transition_time) ease,
-    box-shadow var(--transition_time) ease,
-    opacity var(--transition_time) ease,
-    transform var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease,
+        border-color var(--transition_time) ease,
+        box-shadow var(--transition_time) ease,
+        opacity var(--transition_time) ease,
+        transform var(--transition_time) ease;
     animation-duration: var(--transition_time);
     position: relative;
     font-size: var(--font_default_size);
@@ -296,16 +297,17 @@ chui_error_message {
 }
 
 *:before {
-    font-family: 'chui_I';
+    font-family: "chui_I";
     font-style: normal;
     user-select: none;
     outline: none;
-    transition: background-color var(--transition_time) ease,
-    color var(--transition_time) ease,
-    border-color var(--transition_time) ease,
-    box-shadow var(--transition_time) ease,
-    opacity var(--transition_time) ease,
-    transform var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease,
+        border-color var(--transition_time) ease,
+        box-shadow var(--transition_time) ease,
+        opacity var(--transition_time) ease,
+        transform var(--transition_time) ease;
     animation-duration: var(--transition_time);
     position: relative;
     font-size: var(--font_default_size);
@@ -323,7 +325,15 @@ chui_error_message {
    Селектор повторяет вес общего правила: `:where` специфичности не добавляет,
    а без повтора исключение проиграло бы — общее правило весит больше любого
    компонентного (0,6,0 против 0,2,0). */
-:root *:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]):where(data_grid_cell, chat_log, chat_input, time_option, action_sheet_action, action_sheet_cancel) {
+:root
+    *:focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]):where(
+        data_grid_cell,
+        chat_log,
+        chat_input,
+        time_option,
+        action_sheet_action,
+        action_sheet_cancel
+    ) {
     outline-offset: var(--focus_outline_offset_inset);
 }
 
@@ -544,7 +554,8 @@ app_menu {
     justify-content: flex-start;
     align-items: flex-start;
     z-index: 1000;
-    margin: calc(var(--header_height) + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
+    margin: calc(var(--header_height) + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2)
+        calc(var(--margin) * 2);
     border-radius: var(--radius_md);
     box-shadow: var(--box_shadow_drop);
     background: var(--header_background);
@@ -562,7 +573,8 @@ notification_box {
     align-items: flex-start;
     height: -webkit-fill-available;
     z-index: 1000;
-    margin: calc(var(--header_height) + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2) calc(var(--margin) * 2);
+    margin: calc(var(--header_height) + (var(--margin) * 2)) calc(var(--margin) * 2) calc(var(--margin) * 2)
+        calc(var(--margin) * 2);
     border-radius: var(--radius_md);
     box-shadow: var(--box_shadow_drop);
     background: var(--header_background);
@@ -576,12 +588,13 @@ notification_box {
    переходят как у всех элементов. */
 app_menu,
 notification_box {
-    transition: transform var(--transition_time) var(--ease_out),
-    background-color var(--transition_time) ease,
-    color var(--transition_time) ease,
-    border-color var(--transition_time) ease,
-    box-shadow var(--transition_time) ease,
-    opacity var(--transition_time) ease;
+    transition:
+        transform var(--transition_time) var(--ease_out),
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease,
+        border-color var(--transition_time) ease,
+        box-shadow var(--transition_time) ease,
+        opacity var(--transition_time) ease;
 }
 
 /* Шапка ящика уведомлений: заголовок со счётчиком истории и действие «Очистить». */
@@ -592,7 +605,8 @@ notification_box_header {
     justify-content: space-between;
     gap: var(--margin);
     width: -webkit-fill-available;
-    padding-block: 10px 10px; padding-inline: 14px 10px;
+    padding-block: 10px 10px;
+    padding-inline: 14px 10px;
     box-shadow: inset 0 -1px 0 var(--border_color);
 }
 
@@ -764,7 +778,9 @@ notification_button {
     background: transparent;
     color: var(--text_color);
     -webkit-app-region: no-drag;
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease;
 }
 
 notification_button:hover {
@@ -772,7 +788,8 @@ notification_button:hover {
 }
 
 notification_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /* Открытый ящик уведомлений: тонировка акцента, а не ховер и не заливка во весь цвет */
@@ -821,7 +838,9 @@ app_menu_button {
     background: transparent;
     color: var(--text_color);
     -webkit-app-region: no-drag;
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease;
 }
 
 app_menu_button:hover {
@@ -829,7 +848,8 @@ app_menu_button:hover {
 }
 
 app_menu_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /* Открытое меню маршрутов: та же тонировка акцента, что и у пунктов внутри */
@@ -904,11 +924,12 @@ page_name {
     border: none;
     border-radius: var(--radius_pill);
     padding: 0 12px;
-    margin-block: var(--header_margin) var(--header_margin); margin-inline: 0 var(--margin);
+    margin-block: var(--header_margin) var(--header_margin);
+    margin-inline: 0 var(--margin);
     font-size: var(--font_default_size);
     font-weight: 500;
     background: var(--element_background_disabled);
-    color: var(--text_color)
+    color: var(--text_color);
 }
 
 /* Пустое название не занимает места: до выбора страницы шапка не должна держать пустую капсулу */
@@ -952,7 +973,8 @@ route:hover {
 }
 
 route:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 route_title {
@@ -1043,7 +1065,7 @@ header_left_box {
     min-width: 0;
     overflow: hidden;
     width: -webkit-fill-available;
-    align-items: center
+    align-items: center;
 }
 
 header_right_box {
@@ -1072,7 +1094,8 @@ user_button {
     color: var(--text_color);
     border-radius: var(--border_radius);
     padding: 5px 13px;
-    margin-block: var(--header_margin) var(--header_margin); margin-inline: var(--margin) 0;
+    margin-block: var(--header_margin) var(--header_margin);
+    margin-inline: var(--margin) 0;
     font-size: var(--font_default_size);
     background: transparent;
     font-weight: 500;
@@ -1087,7 +1110,8 @@ user_button:hover {
 }
 
 user_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /* Открытое меню: тонировка акцента — та же, что у открытых кнопок шапки.
@@ -1136,7 +1160,7 @@ user_dropdown user_item {
     text-align: start;
     width: -webkit-fill-available;
     padding: var(--main_padding);
-    border-radius: var(--border_radius)
+    border-radius: var(--border_radius);
 }
 
 user_dropdown user_item:hover {
@@ -1170,7 +1194,7 @@ user_dd_image_main {
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
-    margin-bottom: 6px
+    margin-bottom: 6px;
 }
 
 /* chUiJS_HeaderButton */
@@ -1183,7 +1207,8 @@ header_button {
     border: none;
     border-radius: var(--border_radius);
     padding: 5px 13px;
-    margin-block: var(--header_margin) var(--header_margin); margin-inline: var(--margin) 0;
+    margin-block: var(--header_margin) var(--header_margin);
+    margin-inline: var(--margin) 0;
     font-size: var(--font_default_size);
     background: transparent;
     color: var(--text_color);
@@ -1192,7 +1217,9 @@ header_button {
     flex-direction: row;
     align-items: center;
     -webkit-app-region: no-drag;
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease;
 }
 
 header_button header_button_title {
@@ -1210,7 +1237,8 @@ header_button:hover {
 }
 
 header_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 /*Управление окном — те же кнопки-иконки, что и остальные в шапке, но приглушённые:
@@ -1243,7 +1271,9 @@ wc_box:not(:first-child) {
     box-shadow: inset 1px 0 0 var(--border_color);
 }
 
-wc_close, wc_maximize, wc_minimize {
+wc_close,
+wc_maximize,
+wc_minimize {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -1255,7 +1285,9 @@ wc_close, wc_maximize, wc_minimize {
     border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color_disabled);
-    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        color var(--transition_time) ease;
 }
 
 /* Значки кнопок окна нарисованы линиями (SVG), а не взяты из шрифта иконок: три системные
@@ -1273,12 +1305,15 @@ wc_minimize svg {
     color: var(--text_color_disabled);
 }
 
-wc_maximize:hover, wc_minimize:hover {
+wc_maximize:hover,
+wc_minimize:hover {
     background: var(--element_background_hover);
 }
 
-wc_maximize:active, wc_minimize:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+wc_maximize:active,
+wc_minimize:active {
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 wc_maximize:hover svg,
@@ -1303,7 +1338,9 @@ wc_close:active svg {
     color: var(--text_color);
 }
 
-wc_close:focus-visible, wc_maximize:focus-visible, wc_minimize:focus-visible {
+wc_close:focus-visible,
+wc_maximize:focus-visible,
+wc_minimize:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -1333,4 +1370,4 @@ header_tabs {
 
 .header_tab_active header_button_icon chui_icon {
     color: var(--link_color);
-}
+}

package/framework/components/chui_accordion/accordion.js

@@ -1,6 +1,6 @@
-const {Icon, Icons} = require("../chui_icons/icons");
+const { Icon, Icons } = require("../chui_icons/icons");
 
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /** Идентификаторы для aria-controls у панелей аккордеона */
 let disclosure_panel_counter = 0;
@@ -8,38 +8,38 @@ let disclosure_panel_counter = 0;
 class Accordion {
     #name = require("randomstring").generate();
     #chui_accordion = document.createElement(`chui_accordion`);
-    constructor(options = [ { b_text: undefined, p_text: undefined } ]) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Accordion');
+    constructor(options = [{ b_text: undefined, p_text: undefined }]) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Accordion");
         // На вход идёт массив секций: объект — ошибка вызова, и объяснить её лучше словами
         if (Array.isArray(options) === false) {
             throw new Error("Accordion: нужен массив секций [{b_text, p_text}]");
         }
-        options.forEach(element => {
+        options.forEach((element) => {
             let main_test = document.createElement(`chui_accordion_section`);
-            let ab = document.createElement('accordion_button')
-            ab.setAttribute('name', this.#name)
-            let bt = document.createElement('accordion_button_text')
+            let ab = document.createElement("accordion_button");
+            ab.setAttribute("name", this.#name);
+            let bt = document.createElement("accordion_button_text");
             // Пустая заготовка — это «текста нет», а не слово «undefined» в разметке;
             // разметку секции принимает innerHTML, как и раньше
-            bt.innerHTML = element.b_text === undefined || element.b_text === null ? "" : String(element.b_text)
-            let barrow = document.createElement('accordion_button_arrow')
+            bt.innerHTML = element.b_text === undefined || element.b_text === null ? "" : String(element.b_text);
+            let barrow = document.createElement("accordion_button_arrow");
             barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-            ab.appendChild(bt)
-            ab.appendChild(barrow)
-            let ap = document.createElement('accordion_panel')
-            let html = document.createElement('accordion_panel_html')
-            html.innerHTML = element.p_text === undefined || element.p_text === null ? "" : String(element.p_text)
-            ap.appendChild(html)
-            main_test.appendChild(ab)
-            main_test.appendChild(ap)
-            this.#chui_accordion.appendChild(main_test)
+            ab.appendChild(bt);
+            ab.appendChild(barrow);
+            let ap = document.createElement("accordion_panel");
+            let html = document.createElement("accordion_panel_html");
+            html.innerHTML = element.p_text === undefined || element.p_text === null ? "" : String(element.p_text);
+            ap.appendChild(html);
+            main_test.appendChild(ab);
+            main_test.appendChild(ap);
+            this.#chui_accordion.appendChild(main_test);
 
             //ФУНКЦИИ
             let test = main_test.children;
             let i;
             for (i = 0; i < test.length; i++) {
                 let elem = test[i];
-                if (elem.tagName === 'ACCORDION_BUTTON') {
+                if (elem.tagName === "ACCORDION_BUTTON") {
                     let panel = elem.nextElementSibling;
                     // Доступность: кнопка раскрытия — role=button с состоянием, панель — регион
                     panel.id = "chui_accordion_panel_" + (disclosure_panel_counter += 1);
@@ -50,8 +50,8 @@ class Accordion {
                     // в обходе Tab и в дереве доступности — поэтому свёрнутая панель помечается инерт
                     panel.inert = true;
                     makeKeyboardButton(elem);
-                    elem.addEventListener('click', () => {
-                        elem.classList.toggle('accordion_active')
+                    elem.addEventListener("click", () => {
+                        elem.classList.toggle("accordion_active");
                         let panel = elem.nextElementSibling;
                         // Стрелка и углы кнопки зависят от `aria-expanded` — их ведёт CSS,
                         // а инлайном остаётся только измеренная высота панели
@@ -62,15 +62,18 @@ class Accordion {
                             panel.inert = false;
                             panel.style.maxHeight = panel.scrollHeight + "px";
                         }
-                        elem.setAttribute("aria-expanded", elem.classList.contains('accordion_active') ? "true" : "false");
-                    })
+                        elem.setAttribute(
+                            "aria-expanded",
+                            elem.classList.contains("accordion_active") ? "true" : "false"
+                        );
+                    });
                 }
             }
-        })
+        });
     }
     set() {
         return this.#chui_accordion;
     }
 }
 
-exports.Accordion = Accordion
+exports.Accordion = Accordion;

package/framework/components/chui_accordion/styles.css

@@ -8,7 +8,7 @@ chui_accordion {
     /* Зазор между секциями (прежде отдельной секции писал JS инлайном) */
     gap: 8px;
     font-size: var(--font_default_size);
-    font-weight:400;
+    font-weight: 400;
     border: none;
     margin: var(--margin);
 }
@@ -19,7 +19,7 @@ chui_accordion_section {
     height: max-content;
     width: -webkit-fill-available;
     font-size: var(--font_default_size);
-    font-weight:400;
+    font-weight: 400;
     border-radius: var(--border_radius);
     border: none;
 }
@@ -63,7 +63,7 @@ accordion_panel_html {
     padding: 8px 0;
     width: -webkit-fill-available;
     display: flex;
-    border: none
+    border: none;
 }
 
 accordion_button:hover {
@@ -71,7 +71,8 @@ accordion_button:hover {
 }
 
 accordion_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 accordion_button:hover accordion_button_text {
@@ -109,4 +110,4 @@ accordion_button[aria-expanded="true"] accordion_button_arrow chui_icon {
 
 accordion_button[aria-expanded="false"] accordion_button_arrow chui_icon {
     transform: rotate(0deg);
-}
+}

package/framework/components/chui_action_sheet/action_sheet.js

@@ -1,8 +1,8 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y} = require('../../modules/chui_a11y/chui_a11y');
-const {Icon} = require('../chui_icons/icons');
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon } = require("../chui_icons/icons");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Список действий из нижней части экрана (action sheet): заголовок, пояснение,
@@ -43,7 +43,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class ActionSheet {
     static STYLE = {
         DEFAULT: "default",
-        DESTRUCTIVE: "destructive"
+        DESTRUCTIVE: "destructive",
     };
     static #counter = 0;
 
@@ -69,11 +69,20 @@ class ActionSheet {
     #on_close = undefined;
     isOpen = false;
 
-    constructor(options = {
-        id: String(), title: String(), message: String(), label: String(), actions: [],
-        cancelText: String(), closable: Boolean(), closeOnOutsideClick: Boolean(),
-        onSelect: undefined, onClose: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            message: String(),
+            label: String(),
+            actions: [],
+            cancelText: String(),
+            closable: Boolean(),
+            closeOnOutsideClick: Boolean(),
+            onSelect: undefined,
+            onClose: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ActionSheet");
         ActionSheet.#counter += 1;
         this.#id = options.id === undefined ? `chui_action_sheet_${ActionSheet.#counter}` : options.id;
@@ -105,7 +114,7 @@ class ActionSheet {
             role: "dialog",
             labelNode: this.#labelled_by_title ? this.#title : undefined,
             label: this.#labelled_by_title ? undefined : optionOr(options.label, I18n.t("feedback.actionSheet")),
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
         this.#syncCancelText();
         this.setActions(options.actions === undefined ? [] : options.actions);
@@ -116,12 +125,22 @@ class ActionSheet {
     }
 
     // GET
-    getId() { return this.#id; }
-    getTitle() { return this.#title.innerText; }
-    getMessage() { return this.#message.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getTitle() {
+        return this.#title.innerText;
+    }
+    getMessage() {
+        return this.#message.innerText;
+    }
     /** Описания действий — те же объекты, что вернула фабрика `ActionSheet.Item` */
-    getActions() { return [...this.#actions]; }
-    getCancelText() { return this.#cancel.innerText; }
+    getActions() {
+        return [...this.#actions];
+    }
+    getCancelText() {
+        return this.#cancel.innerText;
+    }
 
     // SET
     setTitle(text = String()) {
@@ -184,24 +203,31 @@ class ActionSheet {
         this.#sheet.remove();
         return this;
     }
-    set() { return this.#sheet; }
+    set() {
+        return this.#sheet;
+    }
 
     /** Готовое обещание: выбор даёт описание действия (`value` — ваше поле), отмена — `undefined`.
      *  Временный слой после ответа убирается: иначе каждый вызов оставлял бы узел в документе */
     static show(options = {}) {
         return new Promise((resolve) => {
             let sheet;
-            const answer = (value) => { resolve(value); sheet.destroy(); };
-            sheet = new ActionSheet(Object.assign({}, options, {
-                onSelect: (action, index) => {
-                    if (options.onSelect !== undefined) options.onSelect(action, index);
-                    answer(action);
-                },
-                onClose: () => {
-                    if (options.onClose !== undefined) options.onClose();
-                    answer(undefined);
-                }
-            }));
+            const answer = (value) => {
+                resolve(value);
+                sheet.destroy();
+            };
+            sheet = new ActionSheet(
+                Object.assign({}, options, {
+                    onSelect: (action, index) => {
+                        if (options.onSelect !== undefined) options.onSelect(action, index);
+                        answer(action);
+                    },
+                    onClose: () => {
+                        if (options.onClose !== undefined) options.onClose();
+                        answer(undefined);
+                    },
+                })
+            );
             sheet.open();
         });
     }
@@ -244,12 +270,12 @@ class ActionSheet {
     #onSheetClick = (event) => {
         if (!this.#close_outside || event.target !== this.#sheet) return;
         this.close();
-    }
+    };
     // После анимации имя снимается: иначе следующий показ не проиграется заново
     #onPanelAnimationEnd = (event) => {
         if (event.target !== this.#panel) return;
         this.#panel.style.animationName = "";
-    }
+    };
     /** Заголовок и пояснение показываются, только когда заданы; пояснение — описание слоя */
     #syncHead() {
         const has_title = this.#title.innerText.trim() !== "";
@@ -268,7 +294,7 @@ class ActionSheet {
     }
 }
 
-exports.ActionSheet = ActionSheet
+exports.ActionSheet = ActionSheet;
 
 // Описание действия собирает фабрика — как у ContextMenu и SplitButton
-ActionSheet.Item = (options = {}) => Object.assign({style: ActionSheet.STYLE.DEFAULT}, options);
+ActionSheet.Item = (options = {}) => Object.assign({ style: ActionSheet.STYLE.DEFAULT }, options);

package/framework/components/chui_action_sheet/styles.css

@@ -121,7 +121,8 @@ action_sheet_actions .action_sheet_action:first-child {
 }
 
 .action_sheet_action:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 .action_sheet_action:disabled {

package/framework/components/chui_affix/affix.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr, scrollParent} = require('../../modules/chui_functions');
+const { setStyles, optionOr, scrollParent } = require("../../modules/chui_functions");
 
 /**
  * Раздел с закреплённой панелью: панель остаётся на виду, пока её раздел на экране.
@@ -44,9 +44,14 @@ class Affix {
     #destroyed = false;
     #on_change = undefined;
 
-    constructor(options = {
-        id: String(), offset: Number(), target: undefined, onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            offset: Number(),
+            target: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Affix");
         Affix.#counter += 1;
         this.#id = optionOr(options.id, `chui_affix_${Affix.#counter}`);
@@ -204,7 +209,7 @@ class Affix {
             root: root,
             // Сторож уходит из области прокрутки ровно тогда, когда панель дошла до отступа
             rootMargin: `-${this.#offset}px 0px 0px 0px`,
-            threshold: 0
+            threshold: 0,
         });
         this.#observer.observe(this.#sentinel);
         // Наблюдатель отвечает асинхронно: до первого ответа закрепления нет,
@@ -227,4 +232,4 @@ class Affix {
     }
 }
 
-exports.Affix = Affix
+exports.Affix = Affix;