chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_multi_combo_box/multi_combo_box.js

@@ -8,24 +8,24 @@ const OPTION_ROW_HEIGHT = 33;
 
 class MultiComboBox {
     #id = require("randomstring").generate();
-    #id_cb = require("randomstring").generate();
-    #MultiComboBox_main = document.createElement("chui_multicombobox");
-    #MultiComboBox_second = document.createElement("multicombobox");
-    #MultiComboBox_options = document.createElement("multicombobox_options");
+    #idCb = require("randomstring").generate();
+    #MultiComboBoxMain = document.createElement("chui_multicombobox");
+    #MultiComboBoxSecond = document.createElement("multicombobox");
+    #MultiComboBoxOptions = document.createElement("multicombobox_options");
     #label = document.createElement("label");
     #input = document.createElement("input");
-    #button_open = document.createElement("multicombo_button_open");
-    #button_open_disabled = document.createElement("multicombo_button_open");
+    #buttonOpen = document.createElement("multicombo_button_open");
+    #buttonOpenDisabled = document.createElement("multicombo_button_open");
     #dropdown = document.createElement("multicombobox_dropdown");
     #more = document.createElement("multicombobox_option_added_more");
-    #overflow_frame = undefined;
-    #overflow_observer = undefined;
+    #overflowFrame = undefined;
+    #overflowObserver = undefined;
     #a11y = undefined;
     // Слушатель окна храним полем, чтобы можно было снять в destroy()
-    #window_click_event = (event) => {
-        if (!this.#MultiComboBox_second.contains(event.target)) this.#closeDropdown();
+    #windowClickEvent = (event) => {
+        if (!this.#MultiComboBoxSecond.contains(event.target)) this.#closeDropdown();
     };
-    #dropdown_height = "max-content";
+    #dropdownHeight = "max-content";
     #value = [];
     constructor(
         options = {
@@ -39,61 +39,61 @@ class MultiComboBox {
     ) {
         require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MultiComboBox");
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#MultiComboBox_main.style.width = options.width;
+        if (options.width !== undefined) this.#MultiComboBoxMain.style.width = options.width;
         if (options.title !== undefined) {
             this.#label.classList.add("multicombobox_label");
             this.#label.innerText = options.title;
-            this.#label.setAttribute("for", this.#id_cb);
-            this.#MultiComboBox_main.appendChild(this.#label);
+            this.#label.setAttribute("for", this.#idCb);
+            this.#MultiComboBoxMain.appendChild(this.#label);
         }
         if (options.optionsLen !== undefined) {
-            this.#dropdown_height = OPTION_ROW_HEIGHT * options.optionsLen + "px";
+            this.#dropdownHeight = OPTION_ROW_HEIGHT * options.optionsLen + "px";
         }
-        this.#dropdown.style.height = this.#dropdown_height;
+        this.#dropdown.style.height = this.#dropdownHeight;
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
-        this.#input.setAttribute("id", this.#id_cb);
+        this.#input.setAttribute("id", this.#idCb);
         this.#input.classList.add("multicombobox_input");
         this.#input.type = "text";
         // Рамку и подпись активного поля держит общее правило темы (`multicombobox:focus-within`
         // в global_style.css): индайновые состояние и цвет подписи перебивали тему
         // и расходились с остальными полями
-        this.#button_open.innerHTML = new Icon(
+        this.#buttonOpen.innerHTML = new Icon(
             Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
             undefined,
             "var(--blue_prime_background)"
         ).getHTML();
-        this.#button_open_disabled.innerHTML = new Icon(
+        this.#buttonOpenDisabled.innerHTML = new Icon(
             Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
             undefined,
             "var(--text_color_disabled)"
         ).getHTML();
         // Курсор выключенного поля даёт `.multicombobox_disabled`: `cursor` наследуется
         this.#dropdown.setAttribute("id", this.#id);
-        this.#MultiComboBox_second.appendChild(this.#MultiComboBox_options);
-        this.#MultiComboBox_options.appendChild(this.#input);
+        this.#MultiComboBoxSecond.appendChild(this.#MultiComboBoxOptions);
+        this.#MultiComboBoxOptions.appendChild(this.#input);
         // Счётчик выбранных значений, не поместившихся в строку: поле держит одну линию
         // (--control_height) и не растёт от выбора (`#syncOverflow`)
         this.#more.hidden = true;
         this.#more.setAttribute("role", "img");
-        this.#MultiComboBox_options.appendChild(this.#more);
+        this.#MultiComboBoxOptions.appendChild(this.#more);
         // Ширину строки задаёт вёрстка вокруг: о смене размера сообщает наблюдатель
         if (typeof ResizeObserver === "function") {
-            this.#overflow_observer = new ResizeObserver(() => this.#scheduleOverflow());
-            this.#overflow_observer.observe(this.#MultiComboBox_options);
+            this.#overflowObserver = new ResizeObserver(() => this.#scheduleOverflow());
+            this.#overflowObserver.observe(this.#MultiComboBoxOptions);
         }
-        this.#MultiComboBox_second.appendChild(this.#button_open);
-        this.#MultiComboBox_second.appendChild(this.#dropdown);
+        this.#MultiComboBoxSecond.appendChild(this.#buttonOpen);
+        this.#MultiComboBoxSecond.appendChild(this.#dropdown);
         //LISTENERS
         this.#input.addEventListener("focus", () => {
-            this.#button_open.style.transform = "rotate(180deg)";
-            this.#dropdown.style.height = this.#dropdown_height;
+            this.#buttonOpen.style.transform = "rotate(180deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
         });
         this.#input.addEventListener("blur", () => {
-            this.#button_open.style.transform = "rotate(0deg)";
-            this.#dropdown.style.height = this.#dropdown_height;
+            this.#buttonOpen.style.transform = "rotate(0deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
         });
-        this.#MultiComboBox_second.addEventListener("click", (event) => {
+        this.#MultiComboBoxSecond.addEventListener("click", (event) => {
             if (!this.#input.disabled) {
                 if (
                     event.target.closest("multicombobox_dropdown") === null &&
@@ -104,7 +104,7 @@ class MultiComboBox {
                 }
             }
         });
-        this.#MultiComboBox_main.appendChild(this.#MultiComboBox_second);
+        this.#MultiComboBoxMain.appendChild(this.#MultiComboBoxSecond);
         // Клавиатура и aria: фокус в поле, стрелки по опциям, Enter переключает чекбокс, Escape закрывает.
         // `selectionState` отделяет выбор от наведения: `aria-selected` читается с чекбокса.
         this.#a11y = new ComboboxKeyboard(this.#input, {
@@ -121,88 +121,98 @@ class MultiComboBox {
         this.#dropdown.setAttribute("aria-multiselectable", "true");
     }
     #openDropdown() {
-        new Animation(this.#dropdown).fadeIn();
+        new Animation(this.#dropdown).panelIn();
         setOptionDisplay(this.#dropdown);
         this.#setDropdownDirection();
         // Список раскрывают на видимом поле — подходящий момент пересчитать счётчик «+N»
         this.#scheduleOverflow();
         this.#a11y.setExpanded(true);
         // Слушатель окна нужен только пока список открыт: закрытие по клику снаружи
-        window.addEventListener("click", this.#window_click_event);
+        window.addEventListener("click", this.#windowClickEvent);
     }
     #closeDropdown() {
         new Animation(this.#dropdown).fadeOut();
         if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
-        window.removeEventListener("click", this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
     }
-    /** Полное удаление: снять слушатели окна и клавиатурный слой */
+    /** Полное удаление: снять слушатели окна, наблюдатель за строкой и клавиатурный слой */
     destroy() {
-        window.removeEventListener("click", this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
+        // Наблюдатель за шириной строки и отложенный кадр живут дольше узла, если их не снять:
+        // `ResizeObserver` держит цель, а пересчёт «+N» продолжил бы считать скрытые метки
+        if (this.#overflowObserver !== undefined) {
+            this.#overflowObserver.disconnect();
+            this.#overflowObserver = undefined;
+        }
+        if (this.#overflowFrame !== undefined) {
+            cancelAnimationFrame(this.#overflowFrame);
+            this.#overflowFrame = undefined;
+        }
         this.#a11y.destroy();
         this.#closeDropdown();
     }
     addValueChangeListener(listener = () => {}) {
-        this.#MultiComboBox_main.addEventListener("chui_multi_combo_option_changed", listener);
+        this.#MultiComboBoxMain.addEventListener("chui_multi_combo_option_changed", listener);
     }
     clearDropdown() {
         this.#dropdown.innerHTML = "";
     }
     addOptionsWithSections(options = []) {
-        for (let sect of options) {
+        for (const sect of options) {
             const section = document.createElement(`section`);
-            const section_title = document.createElement("label");
+            const sectionTitle = document.createElement("label");
             section.className = "multi_combobox_section";
-            section_title.className = "multi_combobox_section_title";
-            section_title.innerText = sect.title;
-            section.appendChild(section_title);
+            sectionTitle.className = "multi_combobox_section_title";
+            sectionTitle.innerText = sect.title;
+            section.appendChild(sectionTitle);
 
-            for (let opt of sect.options) {
-                const id_name = require("randomstring").generate();
+            for (const opt of sect.options) {
+                const identifier = require("randomstring").generate();
                 const option = document.createElement(`label`);
                 option.className = "multi_combobox_option";
                 option.setAttribute("option_title", opt.title);
-                const checkbox_input_check = document.createElement("input_check");
-                checkbox_input_check.className = "checkmark";
-                const checkbox_input_label = document.createElement("input_text");
-                checkbox_input_label.className = "option_input_label";
-                checkbox_input_label.innerText = opt.title;
-                const checkbox_input = document.createElement("input");
-                checkbox_input.className = "option_input";
-                checkbox_input.type = "checkbox";
-                checkbox_input.id = id_name;
-                checkbox_input.name = id_name;
+                const checkboxInputCheck = document.createElement("input_check");
+                checkboxInputCheck.className = "checkmark";
+                const checkboxInputLabel = document.createElement("input_text");
+                checkboxInputLabel.className = "option_input_label";
+                checkboxInputLabel.innerText = opt.title;
+                const checkboxInput = document.createElement("input");
+                checkboxInput.className = "option_input";
+                checkboxInput.type = "checkbox";
+                checkboxInput.id = identifier;
+                checkboxInput.name = identifier;
                 //
-                option.appendChild(checkbox_input);
-                option.appendChild(checkbox_input_check);
-                option.appendChild(checkbox_input_label);
+                option.appendChild(checkboxInput);
+                option.appendChild(checkboxInputCheck);
+                option.appendChild(checkboxInputLabel);
                 section.appendChild(option);
                 //
-                checkbox_input.addEventListener("change", (evt) => {
+                checkboxInput.addEventListener("change", (evt) => {
                     this.#input.value = "";
                     // Выбор пункта — то же, что `aria-selected` у опции (см. `selectionState`)
                     option.setAttribute("aria-selected", evt.target.checked ? "true" : "false");
                     if (evt.target.checked) {
-                        const test_main = document.createElement("multicombobox_option_added_main");
+                        const optionChip = document.createElement("multicombobox_option_added_main");
                         // Метка и чекбокс — два узла: id у каждого свой, иначе в документе два одинаковых id
-                        test_main.id = id_name + "_chip";
-                        const test_body = document.createElement("multicombobox_option_added_body");
-                        test_body.innerText = sect.title + ": " + opt.title;
-                        test_body.title = sect.title + ": " + opt.title;
-                        const test_remove = document.createElement("multicombobox_option_added_remove");
-                        test_remove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML();
-                        test_remove.addEventListener("click", () => checkbox_input.click());
-                        test_main.appendChild(test_body);
-                        test_main.appendChild(test_remove);
-                        this.#MultiComboBox_options.insertBefore(test_main, this.#input);
+                        optionChip.id = identifier + "_chip";
+                        const optionChipBody = document.createElement("multicombobox_option_added_body");
+                        optionChipBody.innerText = sect.title + ": " + opt.title;
+                        optionChipBody.title = sect.title + ": " + opt.title;
+                        const optionChipRemove = document.createElement("multicombobox_option_added_remove");
+                        optionChipRemove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML();
+                        optionChipRemove.addEventListener("click", () => checkboxInput.click());
+                        optionChip.appendChild(optionChipBody);
+                        optionChip.appendChild(optionChipRemove);
+                        this.#MultiComboBoxOptions.insertBefore(optionChip, this.#input);
                         this.#value.push({
-                            id: id_name,
+                            id: identifier,
                             section: sect.title,
                             option: opt,
                         });
                         // Новая метка могла не влезть в строку — пересчёт счётчика «+N»
                         this.#scheduleOverflow();
                     } else {
-                        this.#removeOptionById(id_name);
+                        this.#removeOptionById(identifier);
                     }
                     //
                     const eventAwesome = new CustomEvent("chui_multi_combo_option_changed", {
@@ -210,60 +220,60 @@ class MultiComboBox {
                             values: this.#value,
                         },
                     });
-                    this.#MultiComboBox_main.dispatchEvent(eventAwesome);
+                    this.#MultiComboBoxMain.dispatchEvent(eventAwesome);
                 });
             }
             this.#dropdown.appendChild(section);
         }
-        this.#input.removeEventListener("input", this.#filter_options_event);
-        this.#input.addEventListener("input", this.#filter_sections_event);
+        this.#input.removeEventListener("input", this.#filterOptionsEvent);
+        this.#input.addEventListener("input", this.#filterSectionsEvent);
     }
     addOptions(...options) {
-        for (let opt of options) {
+        for (const opt of options) {
             // Свой id на каждый вариант: одинаковые подписи больше не дают дубликатов id в документе
-            const id_name = require("randomstring").generate();
+            const identifier = require("randomstring").generate();
             const option = document.createElement(`label`);
             option.className = "multi_combobox_option";
             option.setAttribute("option_title", opt.title);
-            const checkbox_input_check = document.createElement("input_check");
-            checkbox_input_check.className = "checkmark";
-            const checkbox_input_label = document.createElement("input_text");
-            checkbox_input_label.className = "option_input_label";
-            checkbox_input_label.innerText = opt.title;
-            const checkbox_input = document.createElement("input");
-            checkbox_input.className = "option_input";
-            checkbox_input.type = "checkbox";
-            checkbox_input.id = id_name;
-            checkbox_input.name = id_name;
+            const checkboxInputCheck = document.createElement("input_check");
+            checkboxInputCheck.className = "checkmark";
+            const checkboxInputLabel = document.createElement("input_text");
+            checkboxInputLabel.className = "option_input_label";
+            checkboxInputLabel.innerText = opt.title;
+            const checkboxInput = document.createElement("input");
+            checkboxInput.className = "option_input";
+            checkboxInput.type = "checkbox";
+            checkboxInput.id = identifier;
+            checkboxInput.name = identifier;
             //
-            option.appendChild(checkbox_input);
-            option.appendChild(checkbox_input_check);
-            option.appendChild(checkbox_input_label);
+            option.appendChild(checkboxInput);
+            option.appendChild(checkboxInputCheck);
+            option.appendChild(checkboxInputLabel);
             //
-            checkbox_input.addEventListener("change", (evt) => {
+            checkboxInput.addEventListener("change", (evt) => {
                 this.#input.value = "";
                 // Выбор пункта — то же, что `aria-selected` у опции (см. `selectionState`)
                 option.setAttribute("aria-selected", evt.target.checked ? "true" : "false");
-                const test_main = document.createElement("multicombobox_option_added_main");
-                test_main.id = id_name + "_chip";
-                const test_body = document.createElement("multicombobox_option_added_body");
-                test_body.innerText = opt.title;
-                test_body.title = opt.title;
-                const test_remove = document.createElement("multicombobox_option_added_remove");
-                test_remove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML();
-                test_main.appendChild(test_body);
-                test_main.appendChild(test_remove);
+                const optionChip = document.createElement("multicombobox_option_added_main");
+                optionChip.id = identifier + "_chip";
+                const optionChipBody = document.createElement("multicombobox_option_added_body");
+                optionChipBody.innerText = opt.title;
+                optionChipBody.title = opt.title;
+                const optionChipRemove = document.createElement("multicombobox_option_added_remove");
+                optionChipRemove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "12px").getHTML();
+                optionChip.appendChild(optionChipBody);
+                optionChip.appendChild(optionChipRemove);
                 //
-                test_remove.addEventListener("click", () => checkbox_input.click());
+                optionChipRemove.addEventListener("click", () => checkboxInput.click());
                 //
                 if (evt.target.checked) {
-                    this.#MultiComboBox_options.insertBefore(test_main, this.#input);
+                    this.#MultiComboBoxOptions.insertBefore(optionChip, this.#input);
                     this.#value.push(opt);
                     // Новая метка могла не влезть в строку — пересчёт счётчика «+N»
                     this.#scheduleOverflow();
                 } else {
                     // Метка снимается по своему id, а значение — по самому описанию варианта
-                    this.#removeOptionById(id_name);
+                    this.#removeOptionById(identifier);
                     const index = this.#value.indexOf(opt);
                     if (index !== -1) this.#value.splice(index, 1);
                 }
@@ -272,43 +282,43 @@ class MultiComboBox {
                         values: this.#value,
                     },
                 });
-                this.#MultiComboBox_main.dispatchEvent(eventAwesome);
+                this.#MultiComboBoxMain.dispatchEvent(eventAwesome);
             });
             this.#dropdown.appendChild(option);
         }
-        this.#input.removeEventListener("input", this.#filter_sections_event);
-        this.#input.addEventListener("input", this.#filter_options_event);
+        this.#input.removeEventListener("input", this.#filterSectionsEvent);
+        this.#input.addEventListener("input", this.#filterOptionsEvent);
     }
-    #filter_sections_event = (event) => {
-        let dropdown = this.#dropdown;
-        for (let section of dropdown.childNodes) {
-            for (let option of section.childNodes) {
-                let attr = option.getAttribute("option_title");
+    #filterSectionsEvent = (event) => {
+        const dropdown = this.#dropdown;
+        for (const section of dropdown.childNodes) {
+            for (const option of section.childNodes) {
+                const attr = option.getAttribute("option_title");
                 if (attr) {
                     if (!attr.toLowerCase().includes(event.target.value.toLowerCase())) {
                         option.style.display = "none";
                         dropdown.style.height = "max-content";
                     } else {
                         option.style.display = "flex";
-                        dropdown.style.height = this.#dropdown_height;
+                        dropdown.style.height = this.#dropdownHeight;
                     }
                 }
             }
         }
     };
-    #filter_options_event = (event) => {
-        let dropdown = this.#dropdown;
-        let query = event.target.value.toLowerCase();
-        for (let option of dropdown.childNodes) {
+    #filterOptionsEvent = (event) => {
+        const dropdown = this.#dropdown;
+        const query = event.target.value.toLowerCase();
+        for (const option of dropdown.childNodes) {
             if (typeof option.getAttribute !== "function") continue;
-            let title = option.getAttribute("option_title");
+            const title = option.getAttribute("option_title");
             if (title === null) continue;
             if (!title.toLowerCase().includes(query)) {
                 option.style.display = "none";
                 dropdown.style.height = "max-content";
             } else {
                 option.style.display = "flex";
-                dropdown.style.height = this.#dropdown_height;
+                dropdown.style.height = this.#dropdownHeight;
             }
         }
     };
@@ -321,24 +331,24 @@ class MultiComboBox {
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#MultiComboBox_second.classList.add("multicombobox_disabled");
+            this.#MultiComboBoxSecond.classList.add("multicombobox_disabled");
             this.#input.className = "multicombobox_input_disabled";
             this.#label.className = "multicombobox_label_disabled";
-            this.#button_open.remove();
-            this.#MultiComboBox_second.appendChild(this.#button_open_disabled);
+            this.#buttonOpen.remove();
+            this.#MultiComboBoxSecond.appendChild(this.#buttonOpenDisabled);
         } else {
-            this.#MultiComboBox_second.classList.remove("multicombobox_disabled");
+            this.#MultiComboBoxSecond.classList.remove("multicombobox_disabled");
             this.#input.className = "multicombobox_input";
             this.#label.className = "multicombobox_label";
-            this.#button_open_disabled.remove();
-            this.#MultiComboBox_second.appendChild(this.#button_open);
+            this.#buttonOpenDisabled.remove();
+            this.#MultiComboBoxSecond.appendChild(this.#buttonOpen);
         }
     }
     #removeOptionById(id) {
         // У метки свой id (id чекбокса + «_chip»): сам чекбокс из разметки не убирается
-        const chip_id = id + "_chip";
-        for (let node of [...this.#MultiComboBox_options.childNodes]) {
-            if (node.id === chip_id) node.remove();
+        const chipId = id + "_chip";
+        for (const node of [...this.#MultiComboBoxOptions.childNodes]) {
+            if (node.id === chipId) node.remove();
         }
         const index = this.#value.findIndex((item) => item.id === id);
         if (index !== -1) this.#value.splice(index, 1);
@@ -348,21 +358,21 @@ class MultiComboBox {
     clear() {
         this.#input.value = "";
         this.#value = [];
-        for (let node of [...this.#MultiComboBox_options.childNodes]) {
+        for (const node of [...this.#MultiComboBoxOptions.childNodes]) {
             if (node !== this.#input && node !== this.#more) node.remove();
         }
-        for (let checkbox of this.#dropdown.querySelectorAll('input[type="checkbox"]')) {
+        for (const checkbox of this.#dropdown.querySelectorAll('input[type="checkbox"]')) {
             checkbox.checked = false;
         }
         // Отметка выбора снимается вместе с чекбоксами: прежде `aria-selected` оставался
         // «true» и список после сброса формы показывал прошлый выбор
-        for (let option of this.#dropdown.querySelectorAll(".multi_combobox_option")) {
+        for (const option of this.#dropdown.querySelectorAll(".multi_combobox_option")) {
             option.setAttribute("aria-selected", "false");
         }
         this.#scheduleOverflow();
     }
     #setDropdownDirection() {
-        const placement = dropdownPlacement(this.#dropdown, this.#MultiComboBox_second);
+        const placement = dropdownPlacement(this.#dropdown, this.#MultiComboBoxSecond);
         // Зазор до поля держит CSS (`top: calc(100% + 4px)`), как у остальных списков:
         // прежде отступ задавался числом в пикселях под высоту прежнего поля 35 px
         this.#dropdown.style.top = placement.up ? "auto" : "";
@@ -379,7 +389,7 @@ class MultiComboBox {
      * не «съедает» место для набора.
      */
     #syncOverflow() {
-        const options = this.#MultiComboBox_options;
+        const options = this.#MultiComboBoxOptions;
         const chips = [...options.querySelectorAll("multicombobox_option_added_main")];
         const available = options.clientWidth;
         for (const chip of chips) chip.hidden = false;
@@ -408,21 +418,21 @@ class MultiComboBox {
 
     /** Пересчёт счётчика после текущего кадра: к этому моменту разметка значений уже уложена */
     #scheduleOverflow() {
-        if (this.#overflow_frame !== undefined) return;
-        this.#overflow_frame = requestAnimationFrame(() => {
-            this.#overflow_frame = undefined;
+        if (this.#overflowFrame !== undefined) return;
+        this.#overflowFrame = requestAnimationFrame(() => {
+            this.#overflowFrame = undefined;
             this.#syncOverflow();
         });
     }
     set() {
-        return this.#MultiComboBox_main;
+        return this.#MultiComboBoxMain;
     }
 }
 
 function setOptionDisplay(element) {
     // Скрытая фильтром секция возвращается снятием инлайнового `display`:
     // базовый вид строки (флекс) задаёт CSS
-    for (let option of element.childNodes) {
+    for (const option of element.childNodes) {
         option.style.removeProperty("display");
     }
 }

package/framework/components/chui_inputs/chui_multi_combo_box/styles.css

@@ -4,12 +4,12 @@ chui_multicombobox {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     position: relative;
     display: flex;
     flex-direction: column;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: var(--control_width);
 }
 
@@ -23,7 +23,7 @@ multicombobox {
     min-height: var(--control_height);
     height: max-content;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 0;
     font-size: var(--font_default_size);
     background: var(--element_background);
@@ -67,7 +67,7 @@ multicombobox_dropdown {
     position: absolute;
     display: none;
     height: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Зазор под полем — как у остальных списков (см. chui_chips/styles.css): прежде
        отступ задавался числом в JS и был зашит под высоту прежнего поля 35 px */
     top: calc(100% + 4px);
@@ -89,7 +89,7 @@ multicombobox_dropdown {
     height: max-content;
     width: max-content;
     /* Только нижний отступ: боковой сдвигал подпись вправо от коробки поля */
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -97,7 +97,7 @@ multicombobox_dropdown {
 
 multicombo_button_open {
     cursor: pointer;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     color: var(--blue_prime_background);
     justify-content: center;
     align-items: center;
@@ -121,13 +121,19 @@ multicombo_button_open {
 .multi_combobox_option {
     display: flex;
     flex-direction: row;
+    /* Строка занимает всю ширину списка: секция держит `align-items: flex-start` (иначе
+       подпись группы растягивалась и наследовала центрирование, см. `.multi_combobox_section`),
+       а от этого выравнивания строка сжималась до содержимого — подсветка под курсором шла
+       прямоугольником вокруг флажка, а не строкой (замер: 53px против 288px у списка).
+       У Select и ComboBox строка растянута — здесь то же поведение */
+    align-self: stretch;
     /* Строка не сжимается при ограниченной высоте слоя (см. `selectbox_option`) */
     flex: none;
     /* Тот же шаг строки, что у опций Select и ComboBox (замер: 27px), — прежде строка была
        33px из-за отступов чекбокса, и список читался рыхлым против соседних компонентов */
     padding: var(--control_padding) 6px;
     gap: 10px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     /* Подпись и чекбокс идут от левого края: центрирование строки было лишним */
     align-items: center;
@@ -170,7 +176,7 @@ multicombo_button_open {
     cursor: not-allowed;
     height: max-content;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color_disabled);