chuijs 4.0.3 → 4.0.4

package/framework/components/chui_hero/styles.css

@@ -1,17 +1,94 @@
+/* Шапка страницы: значок, заголовок, описание и строка статистики.
+   Украшение — из акцентов палитры, смешанных с нейтральной заливкой и рамкой
+   (`color-mix` над токенами), поэтому мимо таблицы цвет не заведён и обе схемы работают
+   сами. Движение — по системе движения: шапка приходит кадром появления из
+   `global_style.css`, знак и плитки встают со ступенькой задержки, а по подложке один
+   раз проходит блик. Непрерывных кадров нет намеренно: шапка — не индикатор ожидания,
+   а неподвижная поверхность, по которой не должно бегать движение. */
 chui_hero {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 16px;
     box-sizing: border-box;
     width: -webkit-fill-available;
     padding: 20px 22px;
+    /* Блик проходит по подложке и уходит за край — его и обрезает коробка */
+    overflow: hidden;
     border: 1px solid var(--border_color);
     border-radius: var(--radius_md);
-    background: var(--element_background);
+    /* Свечение акцентов лежит на нейтральной заливке: она читается и на карточке,
+       и на подложке (вложенная поверхность), а свечение даёт цвет там, где его не хватает */
+    background:
+        radial-gradient(
+            120% 100% at 100% 0%,
+            color-mix(in srgb, var(--blue_prime_background) 18%, transparent),
+            transparent 62%
+        ),
+        radial-gradient(
+            100% 90% at 0% 100%,
+            color-mix(in srgb, var(--teal_prime_background) 16%, transparent),
+            transparent 66%
+        ),
+        var(--element_background);
     box-shadow: var(--box_shadow_main);
     font-size: var(--font_default_size);
     color: var(--text_color);
     text-align: start;
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) both;
+}
+
+/* Акцентная линия сверху: три акцента палитры одним градиентом — синий, циан, мята.
+   Без неё шапка читалась бы обычной карточкой. Линия не появляется готовой, а прочерчивается
+   слева направо: это первый кадр шапки, и он задаёт направление всему появлению */
+chui_hero::before {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        var(--blue_prime_background),
+        var(--cyan_prime_background) 55%,
+        var(--mint_prime_background)
+    );
+    transform-origin: left center;
+    animation: hero_line_in var(--motion_slow) var(--motion_ease) both;
+}
+
+@keyframes hero_line_in {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+/* Блик: один раз проходит по подложке и уходит за край. Цвет берётся из текста темы —
+   белая полоса на светлой схеме не видна вовсе */
+chui_hero::after {
+    content: "";
+    position: absolute;
+    top: -20%;
+    bottom: -20%;
+    width: 42%;
+    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text_color) 7%, transparent), transparent);
+    transform: translateX(-140%) skewX(-14deg);
+    pointer-events: none;
+    /* `both` держит конечное положение — блик остаётся за краем, а не возвращается назад.
+   Идёт последним: подложка к этому времени уже собралась, и блик не спорит с появлением */
+    animation: hero_shine var(--motion_slow) var(--motion_ease) calc(var(--motion_fast) * 2) both;
+}
+
+@keyframes hero_shine {
+    from {
+        transform: translateX(-140%) skewX(-14deg);
+    }
+    to {
+        transform: translateX(240%) skewX(-14deg);
+    }
 }
 
 chui_hero hero_head {
@@ -28,8 +105,46 @@ chui_hero hero_badge {
     width: 54px;
     height: 54px;
     border-radius: var(--radius_md);
-    background: var(--blue_prime_background);
-    box-shadow: var(--box_shadow_main);
+    /* Знак — единственная заливка во весь цвет: он и держит акцент, когда текст
+       читается цветом темы */
+    background: linear-gradient(135deg, var(--blue_prime_background), var(--indigo_prime_background));
+    box-shadow: 0 6px 18px color-mix(in srgb, var(--blue_prime_background) 35%, transparent);
+    animation: hero_badge_in var(--motion_base) var(--motion_spring) both;
+}
+
+/* Знак встаёт с лёгким перелётом и поворотом: он приходит первым в шапке */
+@keyframes hero_badge_in {
+    from {
+        opacity: 0;
+        transform: scale(0.82) rotate(-8deg);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+}
+
+/* Отклик знака: от него один раз расходится кольцо — знак «встал на место».
+   Не по кругу: шапка — не индикатор ожидания, и непрерывного движения в ней быть не должно */
+chui_hero hero_badge::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--blue_prime_background);
+    border-radius: var(--radius_md);
+    pointer-events: none;
+    animation: hero_badge_ring var(--motion_slow) var(--motion_ease) var(--motion_fast) both;
+}
+
+@keyframes hero_badge_ring {
+    from {
+        opacity: 0.45;
+        transform: scale(0.86);
+    }
+    to {
+        opacity: 0;
+        transform: scale(1.5);
+    }
 }
 
 chui_hero hero_badge chui_icon {
@@ -51,7 +166,12 @@ chui_hero hero_title {
     font-size: var(--font_title_size);
     font-weight: 600;
     letter-spacing: -0.02em;
+    /* Заголовок переносится по смыслу, а не по длине строки */
+    text-wrap: balance;
     color: var(--text_color);
+    /* Ступенька: линия — знак — заголовок и дальше. Шаг — доля токена движения,
+       а не своё число */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) calc(var(--motion_fast) / 2) both;
 }
 
 chui_hero hero_description {
@@ -63,6 +183,7 @@ chui_hero hero_description {
     /* Описание героя — обычный текст (было 13px, размера вне шкалы) */
     font-size: var(--font_default_size);
     color: var(--text_color_disabled);
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) var(--motion_fast) both;
 }
 
 chui_hero hero_stats {
@@ -71,21 +192,69 @@ chui_hero hero_stats {
     gap: 10px;
 }
 
+/* Плитка статистики. Свой акцент задаёт `data-accent` (его ставит компонент, ведя список
+   по кругу): цвет идёт заливкой, рамкой и полосой, а число читается цветом темы —
+   акцентный текст на тинте дал бы контраст ниже 3 даже для крупной строки */
 chui_hero hero_stat {
+    --hero_accent: var(--blue_prime_background);
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 1px;
     min-width: 104px;
-    padding: 8px 14px;
-    border: 1px solid var(--border_color);
+    padding: 8px 14px 8px 18px;
+    border: 1px solid color-mix(in srgb, var(--hero_accent) 34%, var(--border_color));
     border-radius: var(--radius_md);
-    background: var(--element_background_2);
+    background: color-mix(in srgb, var(--hero_accent) 12%, var(--element_background_2));
+    /* Плитки встают по очереди: номер ставит компонент переменной `--hero_stat_index`,
+       а ступенька считается от той же задержки, что у описания, поэтому порядок
+       появления один: линия, знак, заголовок, описание, плитки, блик */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease) both;
+    animation-delay: calc(var(--motion_base) + var(--motion_fast) * var(--hero_stat_index, 0));
+}
+
+/* Акцентная полоса слева: даже когда плиток много, их ряд читается цветным.
+   Она прочерчивается сверху вниз вместе с приходом своей плитки */
+chui_hero hero_stat::before {
+    content: "";
+    position: absolute;
+    inset-block: 8px;
+    inset-inline-start: 8px;
+    width: 3px;
+    border-radius: var(--radius_pill);
+    background: var(--hero_accent);
+    transform-origin: top center;
+    animation: hero_stat_bar_in var(--motion_base) var(--motion_ease) both;
+    animation-delay: calc(var(--motion_base) + var(--motion_fast) * var(--hero_stat_index, 0));
+}
+
+@keyframes hero_stat_bar_in {
+    from {
+        transform: scaleY(0);
+    }
+    to {
+        transform: scaleY(1);
+    }
+}
+
+chui_hero hero_stat[data-accent="purple"] {
+    --hero_accent: var(--purple_prime_background);
+}
+
+chui_hero hero_stat[data-accent="green"] {
+    --hero_accent: var(--green_prime_background);
+}
+
+chui_hero hero_stat[data-accent="orange"] {
+    --hero_accent: var(--orange_prime_background);
 }
 
 chui_hero hero_stat_value {
     font-size: var(--font_lead_size);
     font-weight: 600;
-    color: var(--blue_prime_background);
+    /* Числа не "плывут" при смене значения: ширины цифр равны */
+    font-variant-numeric: tabular-nums;
+    color: var(--text_color);
 }
 
 chui_hero hero_stat_label {

package/framework/components/chui_html_block/html_block.js

@@ -1,16 +1,16 @@
 class HtmlBlock {
     #id = require("randomstring").generate();
-    #html_block = document.createElement("chui_html_block");
+    #htmlBlock = document.createElement("chui_html_block");
     constructor(width = String()) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_HtmlBlock");
-        this.#html_block.setAttribute("id", this.#id);
-        this.#html_block.style.width = width;
+        this.#htmlBlock.setAttribute("id", this.#id);
+        this.#htmlBlock.style.width = width;
     }
     setHtml(html) {
-        this.#html_block.innerHTML = html;
+        this.#htmlBlock.innerHTML = html;
     }
     set() {
-        return this.#html_block;
+        return this.#htmlBlock;
     }
 }
 

package/framework/components/chui_html_block/styles.css

@@ -1,6 +1,6 @@
 chui_html_block {
     display: block;
     color: var(--text_color);
-    margin: var(--margin);
+    margin: var(--block_margin);
     height: max-content;
 }

package/framework/components/chui_hx/styles.css

@@ -6,12 +6,12 @@ h5,
 h6 {
     height: max-content;
     /* Ширина по контейнеру: с max-content длинный заголовок не переносился,
-       а с margin: var(--margin) уезжал вправо за край родителя */
+       а с margin: var(--block_margin) уезжал вправо за край родителя */
     width: -webkit-fill-available;
     /* Слово шире строки разрывается, а не вылезает за заголовок */
     overflow-wrap: break-word;
     color: var(--text_color);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-weight: 500;
 }
 

package/framework/components/chui_icons/icons.js

@@ -1,22 +1,22 @@
 class Icon {
-    #chui_icon = document.createElement("chui_icon");
+    #chuiIcon = document.createElement("chui_icon");
     constructor(name = String(), size = String(), color = String()) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Icons");
         // Пустое имя — пустая иконка: без этого `innerHTML = undefined` рисовал лигатуру «undefined»
-        this.#chui_icon.textContent = name === undefined || name === null ? "" : String(name);
-        this.#chui_icon.style.fontSize = size === undefined ? "" : size;
-        this.#chui_icon.style.color = color === undefined ? "" : color;
+        this.#chuiIcon.textContent = name === undefined || name === null ? "" : String(name);
+        this.#chuiIcon.style.fontSize = size === undefined ? "" : size;
+        this.#chuiIcon.style.color = color === undefined ? "" : color;
         // Значок — украшение: его лигатура («table_chart», «expand_more») ничего не говорит
         // скринридеру, поэтому по умолчанию он скрыт от дерева доступности, а имя даёт тот,
         // кто значок поставил (подпись кнопки, пункта меню или скрытая подпись рядом).
         // Значащий значок можно вернуть: `icon.set().removeAttribute("aria-hidden")`
-        this.#chui_icon.setAttribute("aria-hidden", "true");
+        this.#chuiIcon.setAttribute("aria-hidden", "true");
     }
     getHTML() {
-        return this.#chui_icon.outerHTML;
+        return this.#chuiIcon.outerHTML;
     }
     set() {
-        return this.#chui_icon;
+        return this.#chuiIcon;
     }
 }
 

package/framework/components/chui_icons/styles.css

@@ -10,5 +10,6 @@ chui_icon {
     direction: ltr;
     color: var(--text_color);
     pointer-events: none;
-    transition: all var(--transition_time);
+    /* Глиф меняет только цвет: `all` тянул бы за собой и вёрстку, если она когда-нибудь изменится */
+    transition: color var(--motion_fast) var(--motion_ease);
 }

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

@@ -4,12 +4,12 @@ checkbox {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: var(--font_default_size);
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: max-content;
 }
 
@@ -44,7 +44,15 @@ checkbox {
     box-shadow: 0 0 1px 0 var(--border_color);
     background-repeat: no-repeat;
     background-position: center center;
-    background-size: 50% 50%;
+    /* Галка прорастает из нуля: смена картинки мгновенная, а размер её растёт —
+       так отметка «попадает» в коробку, а не появляется готовой */
+    background-size: 0% 0%;
+    /* Свой список перехода заменяет общий, поэтому цвет и тень перечислены рядом */
+    transition:
+        background-color var(--motion_fast) var(--motion_ease),
+        color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease),
+        background-size var(--motion_base) var(--motion_spring);
 }
 
 .checkbox:not(:disabled):not(:checked) + label:hover::before {
@@ -84,6 +92,7 @@ checkbox {
     color: var(--text_color_hover);
     border: none;
     box-shadow: 0 0 1px 0 var(--blue_prime_background);
+    background-size: 50% 50%;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
 }
 

package/framework/components/chui_inputs/chui_chips/chips.js

@@ -29,9 +29,11 @@ const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
  * Валидация: `Validate.installField` — для этого поля осмысленны `required` и границы
  * **числа меток** (`min`, `max`), потому что проверяется количество, а не текст.
  *
- * Слушателей на `window`/`document` и таймеров нет, поэтому `destroy()` не нужен:
- * достаточно убрать узел из документа. За шириной строки меток следит `ResizeObserver`
- * на самой строке — он перестаёт работать вместе с отсоединённым узлом.
+ * Слушателей на `window`/`document` и таймеров нет, но `destroy()` нужен: за шириной строки
+ * меток следит `ResizeObserver`, а пересчёт счётчика «+N» отложен в кадр
+ * (`requestAnimationFrame`). Прежний комментарий утверждал, что достаточно убрать узел из
+ * документа, — это неверно: наблюдатель держит цель живой, а отложенный кадр продолжал бы
+ * считать метки уже удалённого поля.
  *
  * ```javascript
  * const tags = new Chips({name: 'tags', title: 'Теги', placeholder: 'Добавить тег',
@@ -50,8 +52,8 @@ class Chips {
     #input = document.createElement("input");
     #more = document.createElement("chips_more");
     #dropdown = document.createElement("chips_dropdown");
-    #overflow_frame = undefined;
-    #overflow_observer = undefined;
+    #overflowFrame = undefined;
+    #overflowObserver = undefined;
     #a11y = undefined;
     #hint = document.createElement("chips_hint");
     #status = document.createElement("chips_status");
@@ -61,11 +63,11 @@ class Chips {
     #placeholder = I18n.t("forms.chipsPlaceholder");
     #disabled = false;
     #unique = true;
-    #allow_custom = true;
-    #commit_on_blur = false;
-    #max_chips = undefined;
+    #allowCustom = true;
+    #commitOnBlur = false;
+    #maxChips = undefined;
     #suggestions = [];
-    #change_listeners = [];
+    #changeListeners = [];
 
     constructor(
         options = {
@@ -97,9 +99,9 @@ class Chips {
         this.#root.id = this.#id;
         if (options.placeholder !== undefined) this.#placeholder = options.placeholder;
         if (options.unique === false) this.#unique = false;
-        if (options.allowCustom === false) this.#allow_custom = false;
-        if (options.commitOnBlur === true) this.#commit_on_blur = true;
-        if (options.maxChips !== undefined) this.#max_chips = options.maxChips;
+        if (options.allowCustom === false) this.#allowCustom = false;
+        if (options.commitOnBlur === true) this.#commitOnBlur = true;
+        if (options.maxChips !== undefined) this.#maxChips = options.maxChips;
         if (options.suggestions !== undefined) this.#suggestions = [...options.suggestions];
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#title.hidden = true;
@@ -144,8 +146,8 @@ class Chips {
         // Ширину строки задаёт вёрстка вокруг, поэтому о смене размера сообщает наблюдатель
         // за самой строкой: поле может получить ширину уже после создания (ленивые разделы витрины)
         if (typeof ResizeObserver === "function") {
-            this.#overflow_observer = new ResizeObserver(() => this.#scheduleOverflow());
-            this.#overflow_observer.observe(this.#row);
+            this.#overflowObserver = new ResizeObserver(() => this.#scheduleOverflow());
+            this.#overflowObserver.observe(this.#row);
         }
         this.#syncFieldAria();
 
@@ -197,7 +199,7 @@ class Chips {
     }
 
     getMaxChips() {
-        return this.#max_chips;
+        return this.#maxChips;
     }
 
     getSuggestions() {
@@ -236,7 +238,7 @@ class Chips {
     }
 
     setMaxChips(max = Number()) {
-        this.#max_chips = max;
+        this.#maxChips = max;
         this.#syncDisabledState();
         return this;
     }
@@ -280,7 +282,9 @@ class Chips {
         if (index === -1) return this;
         this.#chips.splice(index, 1);
         const node = this.#list.children[index];
-        if (node !== undefined) node.remove();
+        // Метка уходит движением: из строки она убирается по концу кадра, а счётчик «+N»
+        // пересчитывается заново — иначе он считал бы уходящую метку живой
+        if (node !== undefined) this.#leaveChip(node);
         // Место в строке освободилось: прежде скрытые метки могут вернуться
         this.#scheduleOverflow();
         this.#renderSuggestions();
@@ -305,7 +309,7 @@ class Chips {
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
 
@@ -324,14 +328,27 @@ class Chips {
     set() {
         return this.#root;
     }
+
+    /** Полное удаление: снять наблюдатель за строкой, отложенный кадр и клавиатурный слой */
+    destroy() {
+        if (this.#overflowObserver !== undefined) {
+            this.#overflowObserver.disconnect();
+            this.#overflowObserver = undefined;
+        }
+        if (this.#overflowFrame !== undefined) {
+            cancelAnimationFrame(this.#overflowFrame);
+            this.#overflowFrame = undefined;
+        }
+        if (this.#a11y !== undefined) this.#a11y.destroy();
+    }
     // === ВНУТРЕННЕЕ ===
     // Общая точка добавления: возвращает признак «метка действительно добавлена»
     #tryAdd(text = String()) {
         const value = String(text).trim();
         if (value === "") return false;
         if (this.#unique && this.#chips.includes(value)) return false;
-        if (this.#max_chips !== undefined && this.#chips.length >= this.#max_chips) return false;
-        if (!this.#allow_custom && !this.#suggestions.includes(value)) return false;
+        if (this.#maxChips !== undefined && this.#chips.length >= this.#maxChips) return false;
+        if (!this.#allowCustom && !this.#suggestions.includes(value)) return false;
         this.#chips.push(value);
         this.#appendChip(value);
         this.#renderSuggestions();
@@ -342,6 +359,18 @@ class Chips {
         return true;
     }
 
+    /** Уход метки: она гаснет и сжимается, а из строки убирается по концу кадра */
+    #leaveChip(node) {
+        node.classList.add("chips_item_leaving");
+        const done = (event) => {
+            if (event.target !== node) return;
+            node.removeEventListener("animationend", done);
+            node.remove();
+            this.#scheduleOverflow();
+        };
+        node.addEventListener("animationend", done);
+    }
+
     #appendChip(text = String()) {
         const item = document.createElement("chips_item");
         const label = document.createElement("chips_text");
@@ -358,6 +387,15 @@ class Chips {
         if (this.#disabled) remove.disabled = true;
         item.appendChild(remove);
         this.#list.appendChild(item);
+        // Новая метка встаёт на место общим кадром появления, а не возникает рывком.
+        // Класс снимается по концу кадра: при пересборке списка метки его не переигрывают
+        item.classList.add("chips_item_appearing");
+        const appeared = (event) => {
+            if (event.target !== item) return;
+            item.removeEventListener("animationend", appeared);
+            item.classList.remove("chips_item_appearing");
+        };
+        item.addEventListener("animationend", appeared);
         // Метка могла не поместиться в строку — пересчёт счётчика «+N»
         this.#scheduleOverflow();
     }
@@ -397,13 +435,31 @@ class Chips {
 
     /** Пересчёт счётчика после текущего кадра: к этому моменту разметка меток уже уложена */
     #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();
         });
     }
 
+    /**
+     * Уход списка идёт движением: `hidden` возвращается по концу кадра, поэтому список
+     * не пропадает рывком. Открытие за время ухода отменяет снятие — иначе список
+     * погас бы уже открытым.
+     */
+    #hideDropdown() {
+        if (this.#dropdown.hidden === true) return;
+        this.#dropdown.classList.add("chips_dropdown_leaving");
+        const done = (event) => {
+            if (event.target !== this.#dropdown) return;
+            this.#dropdown.removeEventListener("animationend", done);
+            if (this.#dropdown.classList.contains("chips_dropdown_leaving") === false) return;
+            this.#dropdown.classList.remove("chips_dropdown_leaving");
+            this.#dropdown.hidden = true;
+        };
+        this.#dropdown.addEventListener("animationend", done);
+    }
+
     // Список подсказок: свой выпадающий список в материале остальных дропдаунов
     #renderSuggestions() {
         // Уже добавленные метки в подсказках не нужны, набранный текст сужает список
@@ -435,8 +491,13 @@ class Chips {
             this.#scheduleOverflow();
         }
         const visible = open === true && this.#disabled === false && this.#dropdown.childElementCount > 0;
-        this.#dropdown.hidden = visible === false;
-        if (visible) this.#placeDropdown();
+        if (visible === true) {
+            this.#dropdown.classList.remove("chips_dropdown_leaving");
+            this.#dropdown.hidden = false;
+            this.#placeDropdown();
+        } else {
+            this.#hideDropdown();
+        }
         if (this.#a11y !== undefined) this.#a11y.setExpanded(visible);
         return visible;
     }
@@ -470,12 +531,12 @@ class Chips {
     }
 
     #syncDisabledState() {
-        const full = this.#max_chips !== undefined && this.#chips.length >= this.#max_chips;
+        const full = this.#maxChips !== undefined && this.#chips.length >= this.#maxChips;
         // Поле ввода остаётся доступным и при достигнутом пределе: иначе нельзя было бы
         // убрать метку с клавиатуры, а причина отказа объясняется в статусе
         this.#input.disabled = this.#disabled;
         this.#input.placeholder = full
-            ? I18n.t("forms.chipsLimitPlaceholder", { count: this.#max_chips })
+            ? I18n.t("forms.chipsLimitPlaceholder", { count: this.#maxChips })
             : this.#placeholder;
         for (const button of this.#list.querySelectorAll(".chips_remove")) button.disabled = this.#disabled;
     }
@@ -486,7 +547,7 @@ class Chips {
 
     #emit() {
         const chips = this.getValue();
-        for (const listener of [...this.#change_listeners]) listener(chips);
+        for (const listener of [...this.#changeListeners]) listener(chips);
     }
 
     #commitInput() {
@@ -499,8 +560,8 @@ class Chips {
             return;
         }
         // Текст не теряем: либо он уже есть, либо метка не из подсказок, либо предел
-        if (this.#max_chips !== undefined && this.#chips.length >= this.#max_chips) {
-            this.#announce(I18n.t("forms.chipsLimitReached", { count: this.#max_chips }));
+        if (this.#maxChips !== undefined && this.#chips.length >= this.#maxChips) {
+            this.#announce(I18n.t("forms.chipsLimitReached", { count: this.#maxChips }));
             return;
         }
         if (this.#unique && this.#chips.includes(value.trim()))
@@ -566,7 +627,7 @@ class Chips {
     };
 
     #onInputBlur = () => {
-        if (this.#commit_on_blur) this.#commitInput();
+        if (this.#commitOnBlur) this.#commitInput();
     };
 
     #onFieldClick = (event) => {