chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_slider/slider.js

@@ -28,14 +28,14 @@ class Slider {
     #root = document.createElement("chui_slider");
     #header = document.createElement("slider_header");
     #title = document.createElement("slider_title");
-    #value_text = document.createElement("slider_value");
+    #valueLabel = document.createElement("slider_value");
     #field = document.createElement("slider_field");
     #track = document.createElement("slider_track");
     #fill = document.createElement("slider_fill");
     #thumbs = [];
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
+    #titleText = undefined;
     #label = undefined;
     #min = 0;
     #max = 100;
@@ -44,8 +44,8 @@ class Slider {
     #values = [0];
     #disabled = false;
     #format = undefined;
-    #change_listeners = [];
-    #input_listeners = [];
+    #changeListeners = [];
+    #inputListeners = [];
     #dragging = undefined;
 
     constructor(
@@ -88,13 +88,13 @@ class Slider {
         }
         this.#track.addEventListener("pointerdown", this.#onTrackPointerDown);
         this.#header.appendChild(this.#title);
-        this.#header.appendChild(this.#value_text);
+        this.#header.appendChild(this.#valueLabel);
         this.#root.appendChild(this.#header);
         this.#root.appendChild(this.#field);
 
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#header.hidden = true;
-        if (options.showValue === false) this.#value_text.hidden = true;
+        if (options.showValue === false) this.#valueLabel.hidden = true;
         this.setValue(options.value === undefined ? (this.#range ? [this.#min, this.#max] : this.#min) : options.value);
         if (options.disabled === true) this.setDisabled(true);
         if (options.width !== undefined) this.setWidth(options.width);
@@ -153,7 +153,7 @@ class Slider {
     }
 
     setTitle(text = String()) {
-        this.#title_text = text;
+        this.#titleText = text;
         this.#title.innerText = text;
         this.#header.hidden = false;
         this.#render();
@@ -189,7 +189,7 @@ class Slider {
 
     /** Показывать ли читаемое значение рядом с заголовком */
     setShowValue(show = Boolean()) {
-        this.#value_text.hidden = show === false;
+        this.#valueLabel.hidden = show === false;
         return this;
     }
 
@@ -223,13 +223,13 @@ class Slider {
     // ПОДПИСКИ
     /** Вызов на отпускание бегунка, клик по дорожке и ход с клавиатуры */
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
 
     /** Вызов на каждое изменение во время перетаскивания */
     addInputListener(listener = () => {}) {
-        this.#input_listeners.push(listener);
+        this.#inputListeners.push(listener);
         return this;
     }
 
@@ -281,9 +281,9 @@ class Slider {
     #thumbLabel(index = Number()) {
         const base =
             this.#label === undefined
-                ? this.#title_text === undefined
+                ? this.#titleText === undefined
                     ? I18n.t("forms.sliderValue")
-                    : this.#title_text
+                    : this.#titleText
                 : this.#label;
         if (!this.#range) return base;
         return `${base}: ${index === 0 ? I18n.t("forms.sliderMin") : I18n.t("forms.sliderMax")}`;
@@ -309,7 +309,7 @@ class Slider {
             if (this.#disabled) thumb.setAttribute("aria-disabled", "true");
             else thumb.removeAttribute("aria-disabled");
         });
-        this.#value_text.innerText = this.#range
+        this.#valueLabel.innerText = this.#range
             ? `${this.#valueText(low)} – ${this.#valueText(high)}`
             : this.#valueText(low);
     }
@@ -327,7 +327,7 @@ class Slider {
     }
 
     #emit(type = String()) {
-        const listeners = type === "input" ? this.#input_listeners : this.#change_listeners;
+        const listeners = type === "input" ? this.#inputListeners : this.#changeListeners;
         const value = this.getValue();
         for (const listener of [...listeners]) listener(value);
     }

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

@@ -4,12 +4,12 @@ chui_slider {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     /* fill-available учитывает собственный margin, 100% — нет: слайдер уезжал
        вправо и вылезал за родителя на 6px */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }
@@ -81,11 +81,12 @@ slider_thumb {
     border-radius: var(--radius_circle);
     background: var(--blue_prime_background);
     border: 2px solid var(--main_background);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
+    box-shadow: var(--box_shadow_control);
     cursor: pointer;
     outline: none;
     touch-action: none;
-    transition: transform var(--transition_time);
+    /* Ползунок растёт на наведении и захвате: отклик с лёгким перелётом, а не линейный рост */
+    transition: transform var(--motion_base) var(--motion_spring);
 }
 
 slider_thumb:hover,

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

@@ -4,12 +4,12 @@ chui_text_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: var(--control_width);
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_text_main {
@@ -17,12 +17,12 @@ chui_text_main {
     width: -webkit-fill-available;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     align-items: center;
     position: relative;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border: 1px solid var(--border_color);
 }
 
@@ -40,7 +40,7 @@ chui_text_main {
 .input_label {
     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);
@@ -50,7 +50,7 @@ error_message_text {
     display: none;
     height: max-content;
     width: max-content;
-    margin: var(--margin) var(--margin) 0 var(--margin);
+    margin: var(--block_margin) var(--block_margin) 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--red_prime_background);
@@ -83,7 +83,7 @@ error_message_text {
     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);

package/framework/components/chui_inputs/chui_text/text.js

@@ -4,13 +4,13 @@ const { Animation } = require("../../../modules/chui_animations/animations");
 const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class TextInput {
-    #chui_text_main = document.createElement("chui_text_main");
-    #chui_text_input = document.createElement("chui_text_input");
+    #chuiTextMain = document.createElement("chui_text_main");
+    #chuiTextInput = document.createElement("chui_text_input");
     #id = require("randomstring").generate();
     #title = String();
     #input = document.createElement("input");
     #label = document.createElement("label");
-    #error_message_text = document.createElement("error_message_text");
+    #errorMessageText = document.createElement("error_message_text");
     constructor(
         options = {
             name: String(),
@@ -38,33 +38,29 @@ class TextInput {
         if (options.value !== undefined) this.#input.value = options.value;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация и показ ошибки: правила из options (required/min/max/pattern/…)
-        Validate.installField(this, options, this.#chui_text_main, this.#error_message_text, () => this.#input.value);
-        if (options.disableFocus !== undefined)
-            this.#input.addEventListener("mousedown", () => {
-                return false;
-            });
+        Validate.installField(this, options, this.#chuiTextMain, this.#errorMessageText, () => this.#input.value);
         if (options.title !== undefined) {
             this.#title = options.title;
             this.#label.innerText = options.title;
             this.#label.className = "input_label";
             this.#label.setAttribute("for", this.#id);
-            this.#chui_text_input.appendChild(this.#label);
+            this.#chuiTextInput.appendChild(this.#label);
         }
-        if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiTextInput.style.width = options.width;
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
         // Опция `disableFocus`: поле не подсвечивается фокусом. Класс читает тема
         // (`field_no_focus` рядом с общим правилом полей), а не сам компонент
-        if (options.disableFocus) this.#chui_text_main.classList.add("field_no_focus");
+        if (options.disableFocus) this.#chuiTextMain.classList.add("field_no_focus");
         // Рамку с кольцом при фокусе и подсказку при наведении рисует общее правило темы
         // (`chui_text_main:hover`, `:focus-within` в global_style.css), а не компонент:
         // прежде он ставил то же самое инлайном, а на `blur` снимал весь атрибут `style`
-        this.#chui_text_main.appendChild(this.#input);
-        this.#chui_text_input.appendChild(this.#chui_text_main);
+        this.#chuiTextMain.appendChild(this.#input);
+        this.#chuiTextInput.appendChild(this.#chuiTextMain);
 
         //
         this.#input.addEventListener("input", () => {
             this.clearError();
-            new Animation(this.#error_message_text).fadeOut();
+            new Animation(this.#errorMessageText).fadeOut();
         });
     }
     addInputListener(listener = () => {}) {
@@ -91,11 +87,11 @@ class TextInput {
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#chui_text_main.classList.add("chui_text_main_disabled");
+            this.#chuiTextMain.classList.add("chui_text_main_disabled");
             this.#input.className = "text_input_disabled";
             this.#label.className = "input_label_disabled";
         } else {
-            this.#chui_text_main.classList.remove("chui_text_main_disabled");
+            this.#chuiTextMain.classList.remove("chui_text_main_disabled");
             this.#input.className = "text_input";
             this.#label.className = "input_label";
         }
@@ -104,7 +100,7 @@ class TextInput {
         this.setError(message);
     }
     set() {
-        return this.#chui_text_input;
+        return this.#chuiTextInput;
     }
 }
 

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

@@ -4,12 +4,12 @@ chui_area_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: var(--control_width);
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .resize_off {
@@ -19,8 +19,8 @@ chui_area_input {
 .area_input {
     height: inherit;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     color: var(--text_color);
     background: var(--element_background);
@@ -30,7 +30,7 @@ chui_area_input {
 .textarea_label {
     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);
@@ -41,8 +41,8 @@ chui_area_input {
     cursor: not-allowed;
     height: inherit;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     color: var(--text_color_disabled);
     background: var(--element_background_disabled);
@@ -53,7 +53,7 @@ chui_area_input {
     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);

package/framework/components/chui_inputs/chui_text_area/text_area.js

@@ -2,8 +2,8 @@ const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class TextArea {
     #id = require("randomstring").generate();
-    #chui_text_input = document.createElement("chui_area_input");
-    #text_area = document.createElement("textarea");
+    #chuiTextInput = document.createElement("chui_area_input");
+    #textArea = document.createElement("textarea");
     #label = document.createElement("label");
     #title = undefined;
     constructor(
@@ -17,64 +17,64 @@ class TextArea {
         }
     ) {
         require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_TextArea");
-        this.#text_area.classList.add("area_input", "resize_off");
-        this.#text_area.id = this.#id;
-        if (options.name !== undefined) this.#text_area.name = options.name;
-        if (options.required !== undefined) this.#text_area.required = options.required;
+        this.#textArea.classList.add("area_input", "resize_off");
+        this.#textArea.id = this.#id;
+        if (options.name !== undefined) this.#textArea.name = options.name;
+        if (options.required !== undefined) this.#textArea.required = options.required;
         // Валидация и показ ошибки: правила из options. Текст ошибки — в корень поля
         // (под областью ввода), а рамку получает само поле: иначе узел с текстом попал бы
         // внутрь `<textarea>` и читался бы как его содержимое
         Validate.installField(
             this,
             options,
-            this.#chui_text_input,
+            this.#chuiTextInput,
             undefined,
-            () => this.#text_area.value,
-            this.#text_area
+            () => this.#textArea.value,
+            this.#textArea
         );
         if (options.title !== undefined) {
             this.#title = options.title;
             this.#label.innerText = options.title;
             this.#label.classList.add("textarea_label");
             this.#label.setAttribute("for", this.#id);
-            this.#chui_text_input.appendChild(this.#label);
+            this.#chuiTextInput.appendChild(this.#label);
         }
-        if (options.placeholder !== undefined) this.#text_area.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
-        if (options.height !== undefined) this.#chui_text_input.style.height = options.height;
+        if (options.placeholder !== undefined) this.#textArea.placeholder = options.placeholder;
+        if (options.width !== undefined) this.#chuiTextInput.style.width = options.width;
+        if (options.height !== undefined) this.#chuiTextInput.style.height = options.height;
         // Рамку с кольцом при фокусе рисует общее правило темы (`.area_input:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
-        this.#chui_text_input.appendChild(this.#text_area);
+        this.#chuiTextInput.appendChild(this.#textArea);
     }
     getName() {
-        return this.#text_area.name;
+        return this.#textArea.name;
     }
     getTitle() {
         return this.#title;
     }
     getValue() {
-        return this.#text_area.value;
+        return this.#textArea.value;
     }
     setValue(text = String()) {
-        this.#text_area.value = text;
+        this.#textArea.value = text;
     }
     setDisabled(boolean = Boolean()) {
-        this.#text_area.disabled = boolean;
+        this.#textArea.disabled = boolean;
         if (boolean) {
-            this.#text_area.classList.remove("area_input");
-            this.#text_area.classList.add("area_input_disabled");
+            this.#textArea.classList.remove("area_input");
+            this.#textArea.classList.add("area_input_disabled");
             this.#label.classList.remove("textarea_label");
             this.#label.classList.add("textarea_label_disabled");
         } else {
-            this.#text_area.classList.add("area_input");
-            this.#text_area.classList.remove("area_input_disabled");
+            this.#textArea.classList.add("area_input");
+            this.#textArea.classList.remove("area_input_disabled");
             this.#label.classList.add("textarea_label");
             this.#label.classList.remove("textarea_label_disabled");
         }
     }
     set() {
-        return this.#chui_text_input;
+        return this.#chuiTextInput;
     }
 }
 

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

@@ -5,18 +5,18 @@ chui_time_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 time_input_label {
     display: block;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -39,7 +39,7 @@ time_main_block {
     width: max-content;
     height: var(--control_height);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
 }
@@ -134,7 +134,7 @@ input.time_input:disabled {
        в прокрутку панели — иначе колонки часов и минут обрезались бы краем окна */
     overflow: hidden auto;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     -webkit-backdrop-filter: var(--global_blur);
@@ -144,18 +144,14 @@ input.time_input:disabled {
 
 .time_dropdown_shown {
     display: flex;
-    animation: time_dropdown_in var(--transition_time) ease-out;
-}
-
-@keyframes time_dropdown_in {
-    from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    to {
-        opacity: 1;
-        transform: none;
-    }
+    /* Панель открывается общим кадром: свой у неё был тот же по смыслу (прозрачность и подъём),
+       но без роста, а кривая шла торможением вместо отклика */
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
+/* Уход панели: она гаснет и сходит вверх, а класс показа снимается по концу кадра */
+.time_dropdown_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 .time_list {

package/framework/components/chui_inputs/chui_time/time.js

@@ -47,16 +47,16 @@ class TimeInput {
     #minutes = document.createElement("time_list");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #step = 5;
     #min = undefined;
     #max = undefined;
     #disabled = false;
-    #is_open = false;
+    #isOpen = false;
     #listeners = [];
-    #on_change = undefined;
-    #window_click_event = (event) => {
+    #onChange = undefined;
+    #windowClickEvent = (event) => {
         if (!this.#block.contains(event.target)) this.#closeDropdown();
     };
 
@@ -79,8 +79,8 @@ class TimeInput {
         TimeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_time_input_${TimeInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#root.id = this.#id;
         this.#input.type = "time";
@@ -116,7 +116,7 @@ class TimeInput {
         this.#open.appendChild(glyph);
         this.#open.addEventListener("click", () => {
             if (this.#input.disabled) return;
-            if (this.#is_open) this.#closeDropdown();
+            if (this.#isOpen) this.#closeDropdown();
             else this.#openDropdown();
         });
         this.#label.className = "time_input_label";
@@ -140,10 +140,10 @@ class TimeInput {
         delete rules.min;
         delete rules.max;
         if (rules.pattern === undefined) rules.pattern = TIME_PATTERN;
-        const own_validate = options.validate;
+        const ownValidate = options.validate;
         if (this.#min !== undefined || this.#max !== undefined) {
             rules.validate = (value) => {
-                const custom = own_validate === undefined ? undefined : own_validate(value);
+                const custom = ownValidate === undefined ? undefined : ownValidate(value);
                 if (custom !== undefined && custom !== null && custom !== true) return custom;
                 const parsed = TimeInput.parse(value);
                 if (parsed === undefined) return undefined;
@@ -162,7 +162,7 @@ class TimeInput {
         );
         if (options.value !== undefined) this.setValue(options.value);
         this.setDisabled(options.disabled === true);
-        window.addEventListener("click", this.#window_click_event);
+        window.addEventListener("click", this.#windowClickEvent);
     }
 
     // GET
@@ -175,7 +175,7 @@ class TimeInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Значение в виде «ЧЧ:ММ»; пустая строка — время не задано */
@@ -201,7 +201,7 @@ class TimeInput {
     }
 
     isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     /**
@@ -245,7 +245,7 @@ class TimeInput {
 
     /** Подпись над полем; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -264,8 +264,8 @@ class TimeInput {
 
     /** Доступное имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#input.removeAttribute("aria-label");
             else this.#input.setAttribute("aria-label", String(text));
         }
@@ -351,8 +351,8 @@ class TimeInput {
 
     // === ПАНЕЛЬ ===
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("time.label");
     }
 
@@ -425,11 +425,12 @@ class TimeInput {
 
     #openDropdown() {
         this.#renderOptions();
-        this.#is_open = true;
+        this.#isOpen = true;
         this.#input.setAttribute("aria-expanded", "true");
         // Показ — классом, а не общей `Animation`: её `animationend` снимает `display`,
         // и панель, открытая поверх незавершённого закрытия, гасла бы сама.
         // Класс назван иначе, чем у каретки: одно имя давало бы панели стили кнопки
+        this.#dropdown.classList.remove("time_dropdown_leaving");
         this.#dropdown.classList.add("time_dropdown_shown");
         this.#placeDropdown();
         this.#focusSelected("hours");
@@ -448,10 +449,20 @@ class TimeInput {
     }
 
     #closeDropdown() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
         this.#input.setAttribute("aria-expanded", "false");
-        this.#dropdown.classList.remove("time_dropdown_shown");
+        // Уход идёт движением: класс показа снимается по концу кадра, а незавершённый уход
+        // отменяется при открытии — иначе панель погасла бы уже открытой
+        this.#dropdown.classList.add("time_dropdown_leaving");
+        const done = (event) => {
+            if (event.target !== this.#dropdown) return;
+            this.#dropdown.removeEventListener("animationend", done);
+            if (this.#dropdown.classList.contains("time_dropdown_leaving") === false) return;
+            this.#dropdown.classList.remove("time_dropdown_leaving");
+            this.#dropdown.classList.remove("time_dropdown_shown");
+        };
+        this.#dropdown.addEventListener("animationend", done);
     }
 
     #changed() {
@@ -459,7 +470,7 @@ class TimeInput {
         this.#markOptions();
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     #moveOption(delta = Number()) {
@@ -550,7 +561,7 @@ class TimeInput {
 
     /** Полное удаление: панель и слушатель окна */
     destroy() {
-        window.removeEventListener("click", this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
         this.#closeDropdown();
     }
 }