chuijs 4.0.3 → 4.0.4

package/framework/components/chui_popups/popups.js

@@ -20,11 +20,11 @@ class Popup {
             cancelText: String(),
         }
     ) {
-        try {
-            return await new PopupConfirm(options);
-        } catch (err) {
-            return err;
-        }
+        // `PopupConfirm` не отклоняется: он закрывается только выбором — `resolve(true/false)`
+        // в его конструкторе. Прежний `catch (err) { return err; }` ловил недостижимое и
+        // возвращал `Error` как успешный ответ: `if (await popup.confirm())` принял бы отказ
+        // за согласие
+        return new PopupConfirm(options);
     }
     async prompt(
         options = {
@@ -57,67 +57,67 @@ exports.Popup = Popup;
 
 class PopupAlert {
     #id = require("randomstring").generate();
-    #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement("popup_content");
-    #popup_body = document.createElement("popup_body");
-    #popup_buttons = document.createElement("popup_buttons");
-    #button_OK = document.createElement("popup_button_ok");
-
-    #popup_title = document.createElement("popup_title");
-    #popup_message = document.createElement("popup_message");
+    #chuiPopup = document.createElement(`chui_popup`);
+    #popupContent = document.createElement("popup_content");
+    #popupBody = document.createElement("popup_body");
+    #popupButtons = document.createElement("popup_buttons");
+    #buttonOK = document.createElement("popup_button_ok");
+
+    #popupTitle = document.createElement("popup_title");
+    #popupMessage = document.createElement("popup_message");
     #a11y = undefined;
     constructor(options = { title: String(), message: String() }) {
-        this.#chui_popup.id = this.#id;
+        this.#chuiPopup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body);
-        this.#popup_content.appendChild(this.#popup_buttons);
-        this.#chui_popup.appendChild(this.#popup_content);
+        this.#popupContent.appendChild(this.#popupBody);
+        this.#popupContent.appendChild(this.#popupButtons);
+        this.#chuiPopup.appendChild(this.#popupContent);
 
-        this.#popup_title.innerText = options.title;
-        this.#popup_message.innerText = options.message;
+        this.#popupTitle.innerText = options.title;
+        this.#popupMessage.innerText = options.message;
 
-        this.#popup_body.appendChild(this.#popup_title);
-        this.#popup_body.appendChild(this.#popup_message);
+        this.#popupBody.appendChild(this.#popupTitle);
+        this.#popupBody.appendChild(this.#popupMessage);
 
         // СОБЫТИЯ
-        this.#button_OK.innerText = I18n.t("common.ok");
-        makeKeyboardButton(this.#button_OK);
-        this.#button_OK.addEventListener("click", () => this.#dismiss());
-        this.#popup_buttons.appendChild(this.#button_OK);
+        this.#buttonOK.innerText = I18n.t("common.ok");
+        makeKeyboardButton(this.#buttonOK);
+        this.#buttonOK.addEventListener("click", () => this.#dismiss());
+        this.#popupButtons.appendChild(this.#buttonOK);
 
         //
-        document.body.appendChild(this.#chui_popup);
+        document.body.appendChild(this.#chuiPopup);
         // Доступность: alertdialog, имя из заголовка, описание из сообщения, Esc закрывает
-        this.#a11y = new OverlayA11y(this.#chui_popup, {
+        this.#a11y = new OverlayA11y(this.#chuiPopup, {
             role: "alertdialog",
-            labelNode: this.#popup_title,
-            describedBy: this.#popup_message,
+            labelNode: this.#popupTitle,
+            describedBy: this.#popupMessage,
             onEscape: () => this.#dismiss(),
         });
-        new Animation(this.#chui_popup).fadeIn();
-        new Animation(this.#chui_popup.firstChild).scaleIn();
+        new Animation(this.#chuiPopup).fadeIn();
+        new Animation(this.#chuiPopup.firstChild).scaleIn();
         this.#a11y.open();
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
-        if (!document.contains(this.#chui_popup)) return;
+        if (!document.contains(this.#chuiPopup)) return;
         this.#a11y.close();
-        new Animation(this.#chui_popup.firstChild).scaleOut();
-        new Animation(this.#chui_popup).fadeOutAndRemove();
+        new Animation(this.#chuiPopup.firstChild).scaleOut();
+        new Animation(this.#chuiPopup).fadeOutAndRemove();
     }
 }
 
 class PopupConfirm {
     #id = require("randomstring").generate();
-    #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement("popup_content");
-    #popup_body = document.createElement("popup_body");
-    #popup_buttons = document.createElement("popup_buttons");
-    #button_accept = document.createElement("popup_button_accept");
-    #button_cancel = document.createElement("popup_button_cancel");
-
-    #popup_title = document.createElement("popup_title");
-    #popup_message = document.createElement("popup_message");
+    #chuiPopup = document.createElement(`chui_popup`);
+    #popupContent = document.createElement("popup_content");
+    #popupBody = document.createElement("popup_body");
+    #popupButtons = document.createElement("popup_buttons");
+    #buttonAccept = document.createElement("popup_button_accept");
+    #buttonCancel = document.createElement("popup_button_cancel");
+
+    #popupTitle = document.createElement("popup_title");
+    #popupMessage = document.createElement("popup_message");
     #a11y = undefined;
     constructor(
         options = {
@@ -127,74 +127,74 @@ class PopupConfirm {
             cancelText: String(),
         }
     ) {
-        this.#chui_popup.id = this.#id;
+        this.#chuiPopup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body);
-        this.#popup_content.appendChild(this.#popup_buttons);
-        this.#chui_popup.appendChild(this.#popup_content);
+        this.#popupContent.appendChild(this.#popupBody);
+        this.#popupContent.appendChild(this.#popupButtons);
+        this.#chuiPopup.appendChild(this.#popupContent);
 
-        this.#popup_title.innerText = options.title;
-        this.#popup_message.innerText = options.message;
+        this.#popupTitle.innerText = options.title;
+        this.#popupMessage.innerText = options.message;
 
-        this.#popup_body.appendChild(this.#popup_title);
-        this.#popup_body.appendChild(this.#popup_message);
+        this.#popupBody.appendChild(this.#popupTitle);
+        this.#popupBody.appendChild(this.#popupMessage);
 
         // Пустая опция равносильна отсутствующей: без подписи кнопка печатала «undefined»
-        this.#button_cancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
-        this.#button_accept.innerText = optionOr(options.okText, I18n.t("common.ok"));
+        this.#buttonCancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
+        this.#buttonAccept.innerText = optionOr(options.okText, I18n.t("common.ok"));
 
-        makeKeyboardButton(this.#button_cancel);
-        makeKeyboardButton(this.#button_accept);
-        this.#popup_buttons.appendChild(this.#button_cancel);
-        this.#popup_buttons.appendChild(this.#button_accept);
+        makeKeyboardButton(this.#buttonCancel);
+        makeKeyboardButton(this.#buttonAccept);
+        this.#popupButtons.appendChild(this.#buttonCancel);
+        this.#popupButtons.appendChild(this.#buttonAccept);
 
         return new Promise((resolve) => {
-            this.#button_cancel.addEventListener("click", () => {
+            this.#buttonCancel.addEventListener("click", () => {
                 this.#dismiss();
                 resolve(false);
             });
 
-            this.#button_accept.addEventListener("click", () => {
+            this.#buttonAccept.addEventListener("click", () => {
                 this.#dismiss();
                 resolve(true);
             });
 
-            document.body.appendChild(this.#chui_popup);
+            document.body.appendChild(this.#chuiPopup);
             // Доступность: имя из заголовка, описание из сообщения, Esc = отмена, фокус остаётся в диалоге
-            this.#a11y = new OverlayA11y(this.#chui_popup, {
+            this.#a11y = new OverlayA11y(this.#chuiPopup, {
                 role: "alertdialog",
-                labelNode: this.#popup_title,
-                describedBy: this.#popup_message,
-                onEscape: () => this.#button_cancel.click(),
+                labelNode: this.#popupTitle,
+                describedBy: this.#popupMessage,
+                onEscape: () => this.#buttonCancel.click(),
             });
-            new Animation(this.#chui_popup).fadeIn();
-            new Animation(this.#chui_popup.firstChild).scaleIn();
+            new Animation(this.#chuiPopup).fadeIn();
+            new Animation(this.#chuiPopup.firstChild).scaleIn();
             this.#a11y.open();
         });
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
-        if (!document.contains(this.#chui_popup)) return;
+        if (!document.contains(this.#chuiPopup)) return;
         this.#a11y.close();
-        new Animation(this.#chui_popup.firstChild).scaleOut();
-        new Animation(this.#chui_popup).fadeOutAndRemove();
+        new Animation(this.#chuiPopup.firstChild).scaleOut();
+        new Animation(this.#chuiPopup).fadeOutAndRemove();
     }
 }
 
 class PopupPrompt {
     #id = require("randomstring").generate();
-    #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement("popup_content");
-    #popup_body = document.createElement("popup_body");
-    #popup_buttons = document.createElement("popup_buttons");
-    #button_accept = document.createElement("popup_button_accept");
-    #button_cancel = document.createElement("popup_button_cancel");
-
-    #popup_title = document.createElement("popup_title");
-    #popup_message = document.createElement("popup_message");
-
-    #input_text = undefined;
-    #input_pass = undefined;
+    #chuiPopup = document.createElement(`chui_popup`);
+    #popupContent = document.createElement("popup_content");
+    #popupBody = document.createElement("popup_body");
+    #popupButtons = document.createElement("popup_buttons");
+    #buttonAccept = document.createElement("popup_button_accept");
+    #buttonCancel = document.createElement("popup_button_cancel");
+
+    #popupTitle = document.createElement("popup_title");
+    #popupMessage = document.createElement("popup_message");
+
+    #inputText = undefined;
+    #inputPass = undefined;
     #a11y = undefined;
 
     constructor(
@@ -215,106 +215,106 @@ class PopupPrompt {
             cancelText: String(),
         }
     ) {
-        this.#chui_popup.id = this.#id;
+        this.#chuiPopup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body);
-        this.#popup_content.appendChild(this.#popup_buttons);
-        this.#chui_popup.appendChild(this.#popup_content);
+        this.#popupContent.appendChild(this.#popupBody);
+        this.#popupContent.appendChild(this.#popupButtons);
+        this.#chuiPopup.appendChild(this.#popupContent);
 
-        this.#popup_title.innerText = options.title;
-        this.#popup_message.innerText = options.message;
+        this.#popupTitle.innerText = options.title;
+        this.#popupMessage.innerText = options.message;
 
-        this.#popup_body.appendChild(this.#popup_title);
-        this.#popup_body.appendChild(this.#popup_message);
+        this.#popupBody.appendChild(this.#popupTitle);
+        this.#popupBody.appendChild(this.#popupMessage);
 
         if (options.inputs.text === undefined && options.inputs.password === undefined) {
             throw new Error("render: Установите одно из полей ввода text или password");
         }
 
         if (options.inputs.text !== undefined) {
-            this.#input_text = new TextInput({
+            this.#inputText = new TextInput({
                 placeholder: options.inputs.text.placeholder,
                 width: "-webkit-fill-available",
             });
-            this.#popup_body.appendChild(this.#input_text.set());
+            this.#popupBody.appendChild(this.#inputText.set());
         }
 
         if (options.inputs.password !== undefined) {
-            this.#input_pass = new PasswordInput({
+            this.#inputPass = new PasswordInput({
                 placeholder: options.inputs.password.placeholder,
                 width: "-webkit-fill-available",
             });
-            this.#popup_body.appendChild(this.#input_pass.set());
+            this.#popupBody.appendChild(this.#inputPass.set());
         }
 
         // Пустая опция равносильна отсутствующей: без подписи кнопка печатала «undefined»
-        this.#button_cancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
-        this.#button_accept.innerText = optionOr(options.okText, I18n.t("common.ok"));
+        this.#buttonCancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
+        this.#buttonAccept.innerText = optionOr(options.okText, I18n.t("common.ok"));
 
-        makeKeyboardButton(this.#button_cancel);
-        makeKeyboardButton(this.#button_accept);
-        this.#popup_buttons.appendChild(this.#button_cancel);
-        this.#popup_buttons.appendChild(this.#button_accept);
+        makeKeyboardButton(this.#buttonCancel);
+        makeKeyboardButton(this.#buttonAccept);
+        this.#popupButtons.appendChild(this.#buttonCancel);
+        this.#popupButtons.appendChild(this.#buttonAccept);
 
         return new Promise((resolve) => {
-            this.#button_cancel.addEventListener("click", () => {
+            this.#buttonCancel.addEventListener("click", () => {
                 this.#dismiss();
                 // Отмена тоже закрывает промис — иначе `await new Popup().prompt(...)` висел навсегда
                 resolve(undefined);
             });
 
-            this.#button_accept.addEventListener("click", () => {
+            this.#buttonAccept.addEventListener("click", () => {
                 let close = false;
-                if (this.#input_text && this.#input_pass === undefined) {
-                    if (this.#input_text.getValue() !== "") {
+                if (this.#inputText && this.#inputPass === undefined) {
+                    if (this.#inputText.getValue() !== "") {
                         close = true;
-                        resolve({ text: this.#input_text.getValue() });
+                        resolve({ text: this.#inputText.getValue() });
                     } else {
-                        this.#input_text.setErrorMessage(options.inputs.text.errorMessage);
+                        this.#inputText.setErrorMessage(options.inputs.text.errorMessage);
                     }
                 }
-                if (this.#input_text === undefined && this.#input_pass) {
-                    if (this.#input_pass.getValue() !== "") {
+                if (this.#inputText === undefined && this.#inputPass) {
+                    if (this.#inputPass.getValue() !== "") {
                         close = true;
-                        resolve({ password: this.#input_pass.getValue() });
+                        resolve({ password: this.#inputPass.getValue() });
                     } else {
-                        this.#input_pass.setErrorMessage(options.inputs.password.errorMessage);
+                        this.#inputPass.setErrorMessage(options.inputs.password.errorMessage);
                     }
                 }
-                if (this.#input_text && this.#input_pass) {
-                    let text = this.#input_text.getValue();
-                    let password = this.#input_pass.getValue();
+                if (this.#inputText && this.#inputPass) {
+                    const text = this.#inputText.getValue();
+                    const password = this.#inputPass.getValue();
                     if (text !== "" && password !== "") {
                         close = true;
                         resolve({ text, password });
                     }
-                    if (text === "") this.#input_text.setErrorMessage(options.inputs.text.errorMessage);
-                    if (password === "") this.#input_pass.setErrorMessage(options.inputs.password.errorMessage);
+                    if (text === "") this.#inputText.setErrorMessage(options.inputs.text.errorMessage);
+                    if (password === "") this.#inputPass.setErrorMessage(options.inputs.password.errorMessage);
                 }
                 if (close) {
                     this.#dismiss();
                 }
             });
 
-            document.body.appendChild(this.#chui_popup);
+            document.body.appendChild(this.#chuiPopup);
 
             // Доступность: имя из заголовка, описание из сообщения, Esc = отмена, фокус уходит в первое поле
-            this.#a11y = new OverlayA11y(this.#chui_popup, {
+            this.#a11y = new OverlayA11y(this.#chuiPopup, {
                 role: "alertdialog",
-                labelNode: this.#popup_title,
-                describedBy: this.#popup_message,
-                onEscape: () => this.#button_cancel.click(),
+                labelNode: this.#popupTitle,
+                describedBy: this.#popupMessage,
+                onEscape: () => this.#buttonCancel.click(),
             });
-            new Animation(this.#chui_popup).fadeIn();
-            new Animation(this.#chui_popup.firstChild).scaleIn();
+            new Animation(this.#chuiPopup).fadeIn();
+            new Animation(this.#chuiPopup.firstChild).scaleIn();
             this.#a11y.open();
         });
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
-        if (!document.contains(this.#chui_popup)) return;
+        if (!document.contains(this.#chuiPopup)) return;
         this.#a11y.close();
-        new Animation(this.#chui_popup.firstChild).scaleOut();
-        new Animation(this.#chui_popup).fadeOutAndRemove();
+        new Animation(this.#chuiPopup.firstChild).scaleOut();
+        new Animation(this.#chuiPopup).fadeOutAndRemove();
     }
 }

package/framework/components/chui_popups/styles.css

@@ -16,7 +16,7 @@ chui_popup {
 popup_content {
     margin: 60px auto;
     width: 325px;
-    max-width: calc(100% - (var(--margin) * 2));
+    max-width: calc(100% - (var(--block_margin) * 2));
     height: max-content;
     display: flex;
     flex-direction: column;
@@ -79,8 +79,8 @@ popup_button_cancel {
     flex: 1;
     min-width: 0;
     /* Компактный шаг — те же 29px высоты, что у .chui_button и полей */
-    padding: var(--main_padding_sm);
-    border-radius: var(--border_radius);
+    padding: var(--block_padding_sm);
+    border-radius: var(--radius_sm);
     background: var(--button_background);
     border: 1px solid var(--button_border_color);
     color: var(--text_color);
@@ -107,8 +107,8 @@ popup_button_accept {
 
 popup_button_ok:hover,
 popup_button_accept:hover {
-    background: var(--blue_prime_background_trans);
-    border-color: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
+    border-color: var(--blue_prime_background_tint_strong);
     color: var(--text_color_hover);
 }
 

package/framework/components/chui_print_button/print_button.js

@@ -2,6 +2,7 @@ const { Button } = require("../chui_button/button");
 const { Icons } = require("../chui_icons/icons");
 const { Desktop } = require("../../modules/chui_services/desktop");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { reportError } = require("../../modules/chui_logger/chui_logger");
 
 /**
  * Кнопка печати: печатает страницу целиком, готовый HTML или элемент с его стилями.
@@ -30,9 +31,10 @@ class PrintButton {
     #target = undefined;
     #html = undefined;
     #options = {};
-    #file_name = undefined;
-    #document_title = undefined;
-    #on_result = undefined;
+    #fileName = undefined;
+    #documentTitle = undefined;
+    #onResult = undefined;
+    #onError = undefined;
 
     constructor(
         options = {
@@ -45,15 +47,17 @@ class PrintButton {
             documentTitle: String(),
             icon: undefined,
             onResult: undefined,
+            onError: undefined,
         }
     ) {
         this.#mode = options.mode === undefined ? PrintButton.MODE.PRINT : options.mode;
         this.#target = options.target;
         this.#html = options.html;
         this.#options = options.options === undefined ? {} : options.options;
-        this.#file_name = options.fileName;
-        this.#document_title = options.documentTitle;
-        this.#on_result = options.onResult;
+        this.#fileName = options.fileName;
+        this.#documentTitle = options.documentTitle;
+        this.#onResult = options.onResult;
+        this.#onError = options.onError;
         this.#button = new Button({
             title:
                 options.title === undefined
@@ -63,7 +67,8 @@ class PrintButton {
                     : options.title,
             icon: options.icon === undefined ? Icons.ACTIONS.PRINT : options.icon,
             clickEvent: () => {
-                this.print().catch(() => {});
+                // Отказ сервиса не глушим: приложению — `onError`, без него — в лог
+                this.print().catch((error) => reportError(error, this.#onError));
             },
         });
     }
@@ -107,7 +112,7 @@ class PrintButton {
     print() {
         const html = this.#buildHtml();
         const options = { ...this.#options };
-        if (this.#file_name !== undefined) options.fileName = this.#file_name;
+        if (this.#fileName !== undefined) options.fileName = this.#fileName;
         const request =
             this.#mode === PrintButton.MODE.PDF
                 ? Desktop.print.pdf(html === undefined ? document.documentElement.outerHTML : html, options)
@@ -115,7 +120,7 @@ class PrintButton {
                   ? Desktop.print.page(options)
                   : Desktop.print.html(html, options);
         return request.then((result) => {
-            if (this.#on_result !== undefined) this.#on_result(result);
+            if (this.#onResult !== undefined) this.#onResult(result);
             return result;
         });
     }
@@ -132,7 +137,7 @@ class PrintButton {
         const node = this.#target instanceof Element ? this.#target : this.#target.set();
         if (node === undefined || node === null) return undefined;
         const styles = [...document.querySelectorAll("style")].map((style) => style.outerHTML).join("\n");
-        const title = this.#document_title === undefined ? "" : `<title>${this.#document_title}</title>`;
+        const title = this.#documentTitle === undefined ? "" : `<title>${this.#documentTitle}</title>`;
         return `<!DOCTYPE html><html><head><meta charset="utf-8">${title}${styles}</head><body>${node.outerHTML}</body></html>`;
     }
 }

package/framework/components/chui_progress_bar/progress_bar.js

@@ -7,31 +7,35 @@
  * уходит в `aria-valuetext`, чтобы «40%» не читалось дважды.
  *
  * Значение зажимается в `0…max`, `setMax()` не принимает неположительный максимум —
- * иначе полоса и её озвучка расходились бы.
+ * иначе полоса и её озвучка расходились бы. Смена значения идёт движением: заливка догоняет
+ * число за время токена `--motion_base`, а при уменьшенном движении значение ставится сразу.
  */
+const { animate, reducedMotion } = require("../../modules/chui_animations/motion");
 class ProgressBar {
     #id = require("randomstring").generate();
     #ProgressBar = document.createElement(`progress`);
     #main = document.createElement("progress_block");
-    #progress_count = document.createElement("progress_count");
-    #progress_text = document.createElement("progress_text");
+    #progressCount = document.createElement("progress_count");
+    #progressText = document.createElement("progress_text");
     #label = undefined;
+    // Остановка догоняющих кадров: новое значение отменяет прежнее движение
+    #stop = undefined;
     constructor(options = { max: Number(), label: String() }) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_ProgressBar");
         // Роль дублирует нативную у <progress>, но делает разметку явной для тестов и стендов
         this.#ProgressBar.setAttribute("role", "progressbar");
         if (options.max !== undefined) this.setMax(options.max);
         this.#ProgressBar.id = this.#id;
-        this.#progress_count.setAttribute("for", this.#id);
-        this.#progress_text.setAttribute("for", this.#id);
+        this.#progressCount.setAttribute("for", this.#id);
+        this.#progressText.setAttribute("for", this.#id);
         // Подписи рядом с полосой — внешний вид: значение объявляет сама полоса
-        this.#progress_count.setAttribute("aria-hidden", "true");
-        this.#progress_text.setAttribute("aria-hidden", "true");
+        this.#progressCount.setAttribute("aria-hidden", "true");
+        this.#progressText.setAttribute("aria-hidden", "true");
         // Вид подписей полностью в CSS: прежде отступы, ширина и выравнивание
         // задавались отсюда инлайново и расходились с темой
-        this.#main.appendChild(this.#progress_count);
+        this.#main.appendChild(this.#progressCount);
         this.#main.appendChild(this.#ProgressBar);
-        this.#main.appendChild(this.#progress_text);
+        this.#main.appendChild(this.#progressText);
         this.setLabel(options.label);
     }
     #clamp(value) {
@@ -68,15 +72,33 @@ class ProgressBar {
         return this;
     }
     setProgressCountText(text = String()) {
-        this.#progress_count.innerText = text;
+        this.#progressCount.innerText = text;
         return this;
     }
     setValue(value = Number()) {
-        this.#ProgressBar.value = this.#clamp(value);
+        this.#animateTo(this.#clamp(value));
         return this;
     }
+
+    /**
+     * Смена значения идёт движением: заливка догоняет число, а не перескакивает кадром.
+     * Ширину заливки у нативного `progress` задаёт браузер — переходом её не задать,
+     * поэтому целевое значение догоняют кадры, а их считает общий движок движения.
+     */
+    #animateTo(target = Number()) {
+        const from = Number(this.#ProgressBar.value);
+        this.#stop?.();
+        this.#stop = undefined;
+        if (from === target || reducedMotion()) {
+            this.#ProgressBar.value = target;
+            return;
+        }
+        this.#stop = animate((t) => {
+            this.#ProgressBar.value = from + (target - from) * t;
+        });
+    }
     setProgressText(text = String()) {
-        this.#progress_text.innerText = text;
+        this.#progressText.innerText = text;
         // Тот же текст читает скринридер вместо числа: подпись помечена aria-hidden
         if (text === undefined || text === "") this.#ProgressBar.removeAttribute("aria-valuetext");
         else this.#ProgressBar.setAttribute("aria-valuetext", String(text));

package/framework/components/chui_progress_bar/styles.css

@@ -1,10 +1,10 @@
 progress_block {
     /* Толщина дорожки одной переменной: полоса тоньше 29-пиксельного контрола и
        читается индикатором, а не плашкой (прежде было 15px — ростом с кнопку) */
-    --progress_height: 8px;
+    --progress_bar_height: 8px;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_labels_size);
     color: var(--text_color_disabled);
     /* Подписи стоят по левому краю полосы: центрирование расходилось с полосой */
@@ -16,9 +16,9 @@ progress {
     display: block;
     border-radius: var(--radius_pill);
     text-align: start;
-    margin: var(--margin) 0;
+    margin: var(--block_margin) 0;
     width: -webkit-fill-available;
-    height: var(--progress_height);
+    height: var(--progress_bar_height);
     border: none;
 }