chuijs 4.0.2 → 4.0.4

package/framework/components/chui_icons/styles.css

@@ -1,5 +1,5 @@
 chui_icon {
-    font-family: 'chui_mir';
+    font-family: "chui_mir";
     font-weight: normal;
     font-style: normal;
     font-size: var(--header_icon_size);
@@ -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/check_box.js

@@ -1,32 +1,44 @@
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class CheckBox {
     #id = require("randomstring").generate();
-    #checkBox = document.createElement('checkbox');
-    #input = document.createElement('input');
-    #label = document.createElement('label');
+    #checkBox = document.createElement("checkbox");
+    #input = document.createElement("input");
+    #label = document.createElement("label");
     constructor(options = { name: String(), title: String(), required: Boolean(), changeListener: () => {} }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Checkbox');
-        this.#input.classList.add('checkbox');
-        this.#input.type = 'checkbox';
-        this.#input.classList.add('checkbox_input');
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Checkbox");
+        this.#input.classList.add("checkbox");
+        this.#input.type = "checkbox";
+        this.#input.classList.add("checkbox_input");
         this.#input.id = this.#id;
-        this.#label.setAttribute('for', this.#id);
-        this.#label.classList.add('labelz')
+        this.#label.setAttribute("for", this.#id);
+        this.#label.classList.add("labelz");
         // Установка опций
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.title !== undefined) this.#label.innerText = options.title;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: required для флажка — «должен быть отмечен»
         Validate.installField(this, options, this.#checkBox, undefined, () => this.#input.checked);
-        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
-    }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.checked; }
-    getTitle() { return this.#label.innerText; }
-    setValue(value = Boolean()) { this.#input.checked = value; }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
-    setDisabled(boolean = Boolean()) { this.#input.disabled = boolean; }
+        if (options.changeListener !== undefined) this.#input.addEventListener("change", options.changeListener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#input.checked;
+    }
+    getTitle() {
+        return this.#label.innerText;
+    }
+    setValue(value = Boolean()) {
+        this.#input.checked = value;
+    }
+    addChangeListener(listener = () => {}) {
+        this.#input.addEventListener("change", listener);
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean;
+    }
     set() {
         this.#checkBox.appendChild(this.#input);
         this.#checkBox.appendChild(this.#label);
@@ -34,4 +46,4 @@ class CheckBox {
     }
 }
 
-exports.CheckBox = CheckBox
+exports.CheckBox = CheckBox;

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

@@ -4,30 +4,30 @@ 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);
-    width: max-content
+    margin: var(--block_margin);
+    width: max-content;
 }
 
 .checkbox {
     position: absolute;
     z-index: -1;
-    opacity: 0
+    opacity: 0;
 }
 
-.checkbox+label {
+.checkbox + label {
     display: inline-flex;
     align-items: center;
-    color:var(--text_color)
+    color: var(--text_color);
 }
 
-.checkbox+label::before {
+.checkbox + label::before {
     font-size: var(--font_default_size);
-    content: '';
+    content: "";
     display: flex;
     width: 1.2em;
     height: 1.2em;
@@ -38,20 +38,28 @@ checkbox {
     align-items: center;
     justify-content: center;
     color: var(--element_background_2);
-    font-family: 'chui_I';
+    font-family: "chui_I";
     background: var(--element_background);
     border: none;
     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 {
+.checkbox:not(:disabled):not(:checked) + label:hover::before {
     background: var(--element_background_hover);
 }
 
-.checkbox:disabled:not(:checked)+label::before {
+.checkbox:disabled:not(:checked) + label::before {
     cursor: not-allowed;
     background: var(--element_background_disabled);
     border: none;
@@ -59,7 +67,7 @@ checkbox {
     color: var(--text_color_disabled);
 }
 
-.checkbox:disabled:checked+label::before {
+.checkbox:disabled:checked + label::before {
     cursor: not-allowed;
     color: var(--text_color_disabled);
     background: var(--element_background_disabled);
@@ -67,32 +75,33 @@ checkbox {
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.checkbox:not(:disabled):active+label::before {
+.checkbox:not(:disabled):active + label::before {
     background-color: var(--blue_prime_background);
-    color:var(--text_color_disabled);
+    color: var(--text_color_disabled);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.checkbox:focus-visible+label::before {
+.checkbox:focus-visible + label::before {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
 
-.checkbox:checked+label::before {
+.checkbox:checked + label::before {
     background-color: var(--blue_prime_background);
-    color:var(--text_color_hover);
+    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");
 }
 
 .labelz {
     cursor: pointer;
-    font-size: var(--font_default_size)
+    font-size: var(--font_default_size);
 }
 
-.checkbox:disabled+label {
+.checkbox:disabled + label {
     cursor: not-allowed;
     color: var(--text_color_disabled);
-}
+}

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

@@ -1,8 +1,8 @@
-const {setStyles, dropdownPlacement, optionOr} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {ComboboxKeyboard} = require('../../../modules/chui_a11y/chui_a11y');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, dropdownPlacement, optionOr } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { ComboboxKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Поле с метками (chips): ввод тегов, почтовых адресов, ключевых слов.
@@ -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,33 +63,35 @@ 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 = [];
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        chips: [],
-        suggestions: [],
-        allowCustom: Boolean(),
-        commitOnBlur: Boolean(),
-        maxChips: Number(),
-        unique: Boolean(),
-        disabled: Boolean(),
-        hint: String(),
-        required: Boolean(),
-        min: Number(),
-        max: Number(),
-        messages: Object(),
-        validate: undefined,
-        changeListener: undefined
-    }) {
+    #changeListeners = [];
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            chips: [],
+            suggestions: [],
+            allowCustom: Boolean(),
+            commitOnBlur: Boolean(),
+            maxChips: Number(),
+            unique: Boolean(),
+            disabled: Boolean(),
+            hint: String(),
+            required: Boolean(),
+            min: Number(),
+            max: Number(),
+            messages: Object(),
+            validate: undefined,
+            changeListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Chips");
         Chips.#counter += 1;
         this.#id = options.id === undefined ? `chui_chips_${Chips.#counter}` : options.id;
@@ -95,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;
@@ -117,7 +121,7 @@ class Chips {
             dropdown: this.#dropdown,
             optionSelector: ".chips_option",
             onEscape: () => this.#setDropdown(false),
-            onOpen: () => this.#setDropdown(true)
+            onOpen: () => this.#setDropdown(true),
         });
         this.#input.addEventListener("keydown", this.#onInputKeyDown);
         this.#input.addEventListener("blur", this.#onInputBlur);
@@ -142,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();
 
@@ -151,9 +155,7 @@ class Chips {
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#hint.classList.add("chui_visually_hidden");
-        this.#hint.innerText = options.hint === undefined
-            ? I18n.t("forms.chipsHint")
-            : options.hint;
+        this.#hint.innerText = options.hint === undefined ? I18n.t("forms.chipsHint") : options.hint;
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#field);
         this.#root.appendChild(this.#hint);
@@ -161,7 +163,14 @@ class Chips {
 
         // Правила считают число меток: пустой список — «пустое» значение для required.
         // Рамка ошибки — только у самого поля: корень оборачивает ещё подпись и подсказку
-        Validate.installField(this, options, this.#root, undefined, () => (this.#chips.length === 0 ? "" : String(this.#chips.length)), this.#field);
+        Validate.installField(
+            this,
+            options,
+            this.#root,
+            undefined,
+            () => (this.#chips.length === 0 ? "" : String(this.#chips.length)),
+            this.#field
+        );
         if (options.chips !== undefined) this.setValue(options.chips);
         if (options.disabled === true) this.setDisabled(true);
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
@@ -190,7 +199,7 @@ class Chips {
     }
 
     getMaxChips() {
-        return this.#max_chips;
+        return this.#maxChips;
     }
 
     getSuggestions() {
@@ -229,7 +238,7 @@ class Chips {
     }
 
     setMaxChips(max = Number()) {
-        this.#max_chips = max;
+        this.#maxChips = max;
         this.#syncDisabledState();
         return this;
     }
@@ -273,13 +282,15 @@ 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();
         this.#syncDisabledState();
         if (this.clearError !== undefined) this.clearError();
-        this.#announce(I18n.t("forms.chipsRemoved", {value: value, count: this.#chips.length}));
+        this.#announce(I18n.t("forms.chipsRemoved", { value: value, count: this.#chips.length }));
         this.#emit();
         return this;
     }
@@ -298,7 +309,7 @@ class Chips {
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
 
@@ -317,24 +328,49 @@ 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();
         this.#syncDisabledState();
         // Метка добавлена — прежняя ошибка (например, «нужен хотя бы один тег») больше не верна
         if (this.clearError !== undefined) this.clearError();
-        this.#announce(I18n.t("forms.chipsAdded", {value: value, count: this.#chips.length}));
+        this.#announce(I18n.t("forms.chipsAdded", { value: value, count: this.#chips.length }));
         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");
@@ -345,12 +381,21 @@ class Chips {
         remove.className = "chips_remove";
         remove.dataset.chip = text;
         // Настоящая кнопка: удаление доступно и мышью, и с клавиатуры, и скринридеру
-        remove.setAttribute("aria-label", I18n.t("forms.chipsRemove", {value: text}));
+        remove.setAttribute("aria-label", I18n.t("forms.chipsRemove", { value: text }));
         remove.setAttribute("title", I18n.t("common.delete"));
         remove.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "12px").set());
         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();
     }
@@ -376,7 +421,7 @@ class Chips {
         // Не помещается: ищем, сколько меток показать числом, чтобы строка сошлась
         for (let hidden = 1; hidden <= items.length; hidden += 1) {
             this.#more.innerText = `+${hidden}`;
-            this.#more.setAttribute("aria-label", I18n.t("forms.chipsMore", {count: hidden}));
+            this.#more.setAttribute("aria-label", I18n.t("forms.chipsMore", { count: hidden }));
             this.#more.hidden = false;
             const counter = this.#more.getBoundingClientRect().width + gap;
             if (total(items.length - hidden) + counter + reserve <= available) {
@@ -390,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() {
         // Уже добавленные метки в подсказках не нужны, набранный текст сужает список
@@ -428,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;
     }
@@ -463,11 +531,13 @@ 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}) : this.#placeholder;
+        this.#input.placeholder = full
+            ? I18n.t("forms.chipsLimitPlaceholder", { count: this.#maxChips })
+            : this.#placeholder;
         for (const button of this.#list.querySelectorAll(".chips_remove")) button.disabled = this.#disabled;
     }
 
@@ -477,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() {
@@ -490,12 +560,13 @@ 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())) this.#announce(I18n.t("forms.chipsDuplicate", {value: value.trim()}));
-        else this.#announce(I18n.t("forms.chipsNotSuggested", {value: value.trim()}));
+        if (this.#unique && this.#chips.includes(value.trim()))
+            this.#announce(I18n.t("forms.chipsDuplicate", { value: value.trim() }));
+        else this.#announce(I18n.t("forms.chipsNotSuggested", { value: value.trim() }));
     }
 
     #onInputInput = () => {
@@ -556,7 +627,7 @@ class Chips {
     };
 
     #onInputBlur = () => {
-        if (this.#commit_on_blur) this.#commitInput();
+        if (this.#commitOnBlur) this.#commitInput();
     };
 
     #onFieldClick = (event) => {
@@ -572,4 +643,4 @@ class Chips {
     };
 }
 
-exports.Chips = Chips
+exports.Chips = Chips;