chuijs 4.0.3 → 4.0.4

package/framework/components/chui_progress_ring/progress_ring.js

@@ -32,14 +32,14 @@ class ProgressRing {
     #root = document.createElement("chui_progress_ring");
     #svg = undefined;
     #track = undefined;
-    #value_arc = undefined;
+    #valueArc = undefined;
     #text = document.createElement("progress_ring_text");
     #id = undefined;
     #value = 0;
     #max = 100;
     #size = ProgressRing.DEFAULT_SIZE;
     #thickness = ProgressRing.DEFAULT_THICKNESS;
-    #show_value = true;
+    #showValue = true;
     #indeterminate = false;
     #label = undefined;
     #format = undefined;
@@ -66,7 +66,7 @@ class ProgressRing {
         if (options.max !== undefined) this.#max = options.max;
         if (options.size !== undefined) this.#size = options.size;
         if (options.thickness !== undefined) this.#thickness = options.thickness;
-        this.#show_value = options.showValue !== false;
+        this.#showValue = options.showValue !== false;
         this.#format = options.format;
         this.#build();
         if (options.color !== undefined) this.setColor(options.color);
@@ -111,7 +111,7 @@ class ProgressRing {
     }
 
     isValueVisible() {
-        return this.#show_value;
+        return this.#showValue;
     }
 
     // SET
@@ -149,7 +149,7 @@ class ProgressRing {
 
     /** Показывать ли процент внутри кольца */
     setShowValue(visible = Boolean()) {
-        this.#show_value = visible === true;
+        this.#showValue = visible === true;
         this.#render();
         return this;
     }
@@ -202,13 +202,13 @@ class ProgressRing {
         this.#track.setAttribute("cx", "50");
         this.#track.setAttribute("cy", "50");
         this.#track.setAttribute("r", "45");
-        this.#value_arc = document.createElementNS(namespace, "circle");
-        this.#value_arc.setAttribute("class", "progress_ring_value");
-        this.#value_arc.setAttribute("cx", "50");
-        this.#value_arc.setAttribute("cy", "50");
-        this.#value_arc.setAttribute("r", "45");
+        this.#valueArc = document.createElementNS(namespace, "circle");
+        this.#valueArc.setAttribute("class", "progress_ring_value");
+        this.#valueArc.setAttribute("cx", "50");
+        this.#valueArc.setAttribute("cy", "50");
+        this.#valueArc.setAttribute("r", "45");
         this.#svg.appendChild(this.#track);
-        this.#svg.appendChild(this.#value_arc);
+        this.#svg.appendChild(this.#valueArc);
         this.#text.setAttribute("aria-hidden", "true");
         this.#root.appendChild(this.#svg);
         this.#root.appendChild(this.#text);
@@ -230,13 +230,13 @@ class ProgressRing {
         const radius = 50 - thickness / 2;
         this.#svg.style.setProperty("--progress_ring_thickness", String(thickness));
         this.#track.setAttribute("r", String(radius));
-        this.#value_arc.setAttribute("r", String(radius));
+        this.#valueArc.setAttribute("r", String(radius));
         // Длина окружности: dasharray — периметр, dashoffset — доля от него.
         // У неопределённого прогресса дуга фиксированной длины, а крутит её CSS-анимация
         const circuit = 2 * Math.PI * radius;
-        this.#value_arc.style.strokeDasharray = this.#indeterminate ? "60 230" : String(circuit);
-        this.#value_arc.style.strokeDashoffset = this.#indeterminate ? "0" : String(circuit * (1 - this.getRatio()));
-        this.#text.hidden = !this.#show_value;
+        this.#valueArc.style.strokeDasharray = this.#indeterminate ? "60 230" : String(circuit);
+        this.#valueArc.style.strokeDashoffset = this.#indeterminate ? "0" : String(circuit * (1 - this.getRatio()));
+        this.#text.hidden = !this.#showValue;
         this.#text.innerText = this.#indeterminate ? "" : this.#valueText();
         this.#root.setAttribute("aria-valuemin", String(0));
         this.#root.setAttribute("aria-valuemax", String(this.#max));

package/framework/components/chui_progress_ring/styles.css

@@ -34,7 +34,7 @@ chui_progress_ring {
 .progress_ring_value {
     stroke: var(--progress_ring_color);
     stroke-linecap: round;
-    transition: stroke-dashoffset 0.25s ease;
+    transition: stroke-dashoffset var(--motion_base) var(--motion_ease);
 }
 
 chui_progress_ring.progress_ring_indeterminate .progress_ring_value {

package/framework/components/chui_qrcode/qrcode.js

@@ -64,14 +64,14 @@ class QRCode {
     #margin = QRCode.DEFAULT_MARGIN;
     #level = QR.LEVEL.MEDIUM;
     #mode = QR.MODE.AUTO;
-    #min_version = undefined;
+    #minVersion = undefined;
     #mask = undefined;
     #dark = QRCode.DEFAULT_DARK;
     #light = QRCode.DEFAULT_LIGHT;
     #label = undefined;
-    #empty_text = undefined;
+    #emptyText = undefined;
     #code = undefined;
-    #error_text = undefined;
+    #errorMessage = undefined;
 
     constructor(
         options = {
@@ -98,7 +98,7 @@ class QRCode {
         this.#hint.setAttribute("role", "status");
         this.#hint.setAttribute("aria-live", "polite");
         this.#label = options.label;
-        this.#empty_text = options.emptyText;
+        this.#emptyText = options.emptyText;
         this.#root.appendChild(this.#canvas);
         this.#root.appendChild(this.#hint);
         // Пустая заготовка опции равносильна отсутствующей: `String()` в описании опций
@@ -108,7 +108,7 @@ class QRCode {
         if (optionOr(options.level, undefined) !== undefined) this.#level = QRCode.#toLevel(options.level);
         if (optionOr(options.mode, undefined) !== undefined) this.#mode = QRCode.#toMode(options.mode);
         if (Number.isInteger(Number(options.minVersion)) && Number(options.minVersion) > 0) {
-            this.#min_version = QRCode.#toVersion(options.minVersion);
+            this.#minVersion = QRCode.#toVersion(options.minVersion);
         }
         if (Number.isInteger(Number(options.mask)) && Number(options.mask) >= 0)
             this.#mask = QRCode.#toMask(options.mask);
@@ -140,7 +140,7 @@ class QRCode {
         return this.#code === undefined ? this.#mode : this.#code.mode;
     }
     getMinVersion() {
-        return this.#min_version;
+        return this.#minVersion;
     }
     /** Маска готового кода (0…7); без кода — заданная опция или `undefined` при автоподборе */
     getMask() {
@@ -174,7 +174,7 @@ class QRCode {
     }
     /** Текст незаданного состояния или ошибки; `undefined`, если код построен */
     getError() {
-        return this.#error_text;
+        return this.#errorMessage;
     }
 
     // SET
@@ -215,7 +215,7 @@ class QRCode {
     }
     /** Наименьшая версия кода; `undefined` — подбирать самому */
     setMinVersion(version = undefined) {
-        this.#min_version = version === undefined || version === "" ? undefined : QRCode.#toVersion(version);
+        this.#minVersion = version === undefined || version === "" ? undefined : QRCode.#toVersion(version);
         this.#render();
         return this;
     }
@@ -240,7 +240,7 @@ class QRCode {
     }
     /** Текст подсказки при пустом значении */
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#render();
         return this;
     }
@@ -263,12 +263,12 @@ class QRCode {
         if (String(value).trim() === "") {
             this.#code = undefined;
             this.#clear();
-            this.#setHint(this.#empty_text === undefined ? I18n.t("graphics.qrEmpty") : this.#empty_text);
+            this.#setHint(this.#emptyText === undefined ? I18n.t("graphics.qrEmpty") : this.#emptyText);
             this.#setLabel(I18n.t("graphics.qrLabel"));
             return this;
         }
         const options = { level: this.#level, mode: this.#mode };
-        if (this.#min_version !== undefined) options.minVersion = this.#min_version;
+        if (this.#minVersion !== undefined) options.minVersion = this.#minVersion;
         if (this.#mask !== undefined) options.mask = this.#mask;
         const result = QR.encode(value, options);
         if (result.ok !== true) {
@@ -334,7 +334,7 @@ class QRCode {
     }
 
     #setHint(text) {
-        this.#error_text = text === "" ? undefined : text;
+        this.#errorMessage = text === "" ? undefined : text;
         this.#hint.innerText = text;
         return this;
     }

package/framework/components/chui_query_builder/query_builder.js

@@ -151,20 +151,20 @@ class QueryBuilder {
     #fields = [];
     #value = undefined;
     #listeners = [];
-    #on_change = undefined;
-    #max_depth = QueryBuilder.MAX_DEPTH;
+    #onChange = undefined;
+    #maxDepth = QueryBuilder.MAX_DEPTH;
     #disabled = false;
-    #error_shown = false;
-    #node_counter = 0;
-    #rule_counter = 0;
+    #errorShown = false;
+    #nodeCounter = 0;
+    #ruleCounter = 0;
     // Переключатели «И/ИЛИ» живут по группе: при перерисовке пересобираются вместе с узлами
     #combinators = new Map();
     // Готовые поля условий: их нужно гасить, снимать у них слушатели окна и уметь закрыть
     // раскрытый список при возврате фокуса после пересборки
     #controls = [];
-    #title_text = undefined;
-    #label_text = undefined;
-    #empty_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #emptyText = undefined;
 
     constructor(
         options = {
@@ -189,11 +189,11 @@ class QueryBuilder {
         this.#name = options.name;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
-        if (options.emptyText !== undefined) this.#empty_text = String(options.emptyText);
-        else this.#empty_text = I18n.t("queryBuilder.empty");
-        if (options.maxDepth !== undefined) this.#max_depth = Math.max(1, Number(options.maxDepth));
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
+        if (options.emptyText !== undefined) this.#emptyText = String(options.emptyText);
+        else this.#emptyText = I18n.t("queryBuilder.empty");
+        if (options.maxDepth !== undefined) this.#maxDepth = Math.max(1, Number(options.maxDepth));
         this.#title.className = "query_builder_title";
         this.#title.id = `${this.#id}_title`;
         this.#tree.className = "query_builder_tree";
@@ -207,7 +207,7 @@ class QueryBuilder {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#title.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("queryBuilder.title") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("queryBuilder.title") : this.#labelText);
         this.setFields(options.fields === undefined ? [] : options.fields);
         if (options.value === undefined) this.clear(true);
         else this.setValue(options.value);
@@ -220,9 +220,9 @@ class QueryBuilder {
             () => (this.isEmpty() ? "" : this.getText()),
             this.#tree
         );
-        const base_validate = this.validate;
+        const baseValidate = this.validate;
         this.validate = () => {
-            const result = base_validate();
+            const result = baseValidate();
             if (result.valid === false) return result;
             const empty = this.#rules().find(
                 (rule) => this.#needsValue(rule.operator) && this.#isEmptyValue(rule.value)
@@ -244,11 +244,11 @@ class QueryBuilder {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Имя запроса для формы: с ним `Form.getValues()`/`setValues()` знают, куда класть дерево */
@@ -304,7 +304,7 @@ class QueryBuilder {
     }
 
     getMaxDepth() {
-        return this.#max_depth;
+        return this.#maxDepth;
     }
 
     isDisabled() {
@@ -312,7 +312,7 @@ class QueryBuilder {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     /** Запрос словами: «Статус равно «Оплачен» И Сумма больше 1000» */
@@ -331,7 +331,7 @@ class QueryBuilder {
 
     /** Подпись над запросом; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -346,7 +346,7 @@ class QueryBuilder {
 
     /** Имя запроса, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -389,7 +389,7 @@ class QueryBuilder {
 
     /** Дерево запроса; `silent` (как у полей формы) — молча, без уведомления слушателей */
     setValue(value = Object(), silent = false) {
-        this.#node_counter = 0;
+        this.#nodeCounter = 0;
         this.#value = this.#toGroup(value, 1);
         this.#render();
         if (silent === false) this.#notify();
@@ -397,13 +397,13 @@ class QueryBuilder {
     }
 
     setMaxDepth(depth = Number()) {
-        this.#max_depth = Math.max(1, Number(depth));
+        this.#maxDepth = Math.max(1, Number(depth));
         this.#render();
         return this;
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text === undefined ? "" : String(text);
+        this.#emptyText = text === undefined ? "" : String(text);
         this.#render();
         return this;
     }
@@ -449,7 +449,7 @@ class QueryBuilder {
     addGroup(groupId = undefined) {
         const group = groupId === undefined ? this.#value : this.#group(groupId);
         if (group === undefined) return undefined;
-        if (this.#depthOf(group) >= this.#max_depth) return undefined;
+        if (this.#depthOf(group) >= this.#maxDepth) return undefined;
         const field = this.#fields[0];
         if (field === undefined) return undefined;
         const nested = {
@@ -531,12 +531,12 @@ class QueryBuilder {
     check() {
         const result = this.validate();
         if (result.valid) {
-            this.#error_shown = false;
+            this.#errorShown = false;
             this.clearError();
             this.#announce(this.isEmpty() ? I18n.t("queryBuilder.empty") : I18n.t("queryBuilder.valid"));
             return this;
         }
-        this.#error_shown = true;
+        this.#errorShown = true;
         this.setError(result.message);
         this.#syncErrors();
         this.#announce(result.message);
@@ -562,8 +562,8 @@ class QueryBuilder {
 
     // === ВНУТРЕННЕЕ ===
     #nextId(prefix = String()) {
-        this.#node_counter += 1;
-        return `${this.#id}_${prefix}_${this.#node_counter}`;
+        this.#nodeCounter += 1;
+        return `${this.#id}_${prefix}_${this.#nodeCounter}`;
     }
 
     #emptyRule(field = Object()) {
@@ -598,7 +598,7 @@ class QueryBuilder {
         for (const child of children) {
             if (child === undefined || child === null || typeof child !== "object") continue;
             if (child.children !== undefined || child.combinator !== undefined) {
-                if (depth >= this.#max_depth) continue;
+                if (depth >= this.#maxDepth) continue;
                 group.children.push(this.#toGroup(child, depth + 1));
                 continue;
             }
@@ -713,17 +713,17 @@ class QueryBuilder {
         this.#destroyControls();
         this.#tree.innerHTML = "";
         this.#combinators.clear();
-        this.#rule_counter = 0;
+        this.#ruleCounter = 0;
         if (this.#value === undefined || this.#fields.length === 0) {
             this.#tree.hidden = true;
             this.#empty.hidden = false;
-            this.#empty.innerText = this.#fields.length === 0 ? I18n.t("queryBuilder.noFields") : this.#empty_text;
+            this.#empty.innerText = this.#fields.length === 0 ? I18n.t("queryBuilder.noFields") : this.#emptyText;
             return this;
         }
         this.#tree.appendChild(this.#groupNode(this.#value, 0));
         this.#tree.hidden = false;
         this.#empty.hidden = true;
-        this.#empty.innerText = this.#empty_text;
+        this.#empty.innerText = this.#emptyText;
         this.#syncErrors();
         if (mark !== undefined) {
             const node = this.#tree.querySelector(`[data-id="${CSS.escape(mark.owner)}"] ${mark.control}`);
@@ -761,8 +761,8 @@ class QueryBuilder {
         const own = list.length > 0 ? `.${CSS.escape(list[0])}` : node.tagName.toLowerCase();
         const holder = node.closest(".query_builder_field, .query_builder_operator, .query_builder_value");
         if (holder === null) return own;
-        const holder_class = [...holder.classList].find((name) => name.startsWith("query_builder_"));
-        return holder_class === undefined ? own : `.${CSS.escape(holder_class)} ${own}`;
+        const holderClass = [...holder.classList].find((name) => name.startsWith("query_builder_"));
+        return holderClass === undefined ? own : `.${CSS.escape(holderClass)} ${own}`;
     }
 
     #groupNode(group = Object(), depth = Number()) {
@@ -836,7 +836,7 @@ class QueryBuilder {
         if (group.children.length === 0) {
             const note = document.createElement("query_builder_group_empty");
             note.className = "query_builder_group_empty";
-            note.innerText = this.#empty_text;
+            note.innerText = this.#emptyText;
             list.appendChild(note);
             return list;
         }
@@ -859,7 +859,7 @@ class QueryBuilder {
                 onClick: () => this.addRule(group.id),
             })
         );
-        if (this.#depthOf(group) < this.#max_depth) {
+        if (this.#depthOf(group) < this.#maxDepth) {
             foot.appendChild(
                 this.#addButton({
                     title: I18n.t("queryBuilder.groupShort"),
@@ -934,8 +934,8 @@ class QueryBuilder {
     }
 
     #ruleNode(rule = Object()) {
-        this.#rule_counter += 1;
-        const index = this.#rule_counter;
+        this.#ruleCounter += 1;
+        const index = this.#ruleCounter;
         const field = this.#fieldOf(rule.field);
         const node = document.createElement("query_builder_rule");
         node.className = "query_builder_rule";
@@ -1126,7 +1126,7 @@ class QueryBuilder {
     }
 
     #syncLabel() {
-        if (this.#title_text !== undefined && this.#title_text !== "") {
+        if (this.#titleText !== undefined && this.#titleText !== "") {
             this.#root.setAttribute("aria-labelledby", this.#title.id);
             this.#root.removeAttribute("aria-label");
         } else {
@@ -1137,8 +1137,8 @@ class QueryBuilder {
     }
 
     #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("queryBuilder.title");
     }
 
@@ -1157,10 +1157,10 @@ class QueryBuilder {
 
     /** После правки показанная ошибка пересчитывается: она не должна пережить своё условие */
     #refreshErrors() {
-        if (this.#error_shown === false) return this;
+        if (this.#errorShown === false) return this;
         const result = this.validate();
         if (result.valid) {
-            this.#error_shown = false;
+            this.#errorShown = false;
             this.clearError();
             return this;
         }
@@ -1177,7 +1177,7 @@ class QueryBuilder {
     #notify() {
         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);
         return this;
     }
 }

package/framework/components/chui_query_builder/styles.css

@@ -6,14 +6,14 @@ chui_query_builder {
     box-sizing: border-box;
     width: -webkit-fill-available;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
 }
 
 .query_builder_title {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-family: system-ui, sans-serif;
     font-size: var(--font_labels_size);
@@ -43,7 +43,7 @@ chui_query_builder {
     width: -webkit-fill-available;
     padding: 8px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     margin-inline-start: calc(var(--query_builder_depth, 0) * 14px);
 }
@@ -97,7 +97,7 @@ chui_query_builder {
 }
 
 /* Контролы условия — готовые поля фреймворка (Select, TextInput, NumberInput, DateInput).
-   Их вид (35 px, --border_radius, hairline, фокус и запрет) держит сам компонент,
+   Их вид (35 px, --radius_sm, hairline, фокус и запрет) держит сам компонент,
    а строка условия задаёт только долю ширины и нулевой отступ. */
 .query_builder_field,
 .query_builder_operator,

package/framework/components/chui_radio_group/styles.css

@@ -12,5 +12,5 @@ chui_radio_group.radio_group_disabled {
 
 /* Общий класс ошибки полей: рамка не должна липнуть к флажкам */
 chui_radio_group.error_border {
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }

package/framework/components/chui_result/result.js

@@ -64,9 +64,9 @@ class Result {
     #actions = document.createElement("result_actions");
     #id = undefined;
     #style = Result.STYLE.INFO;
-    #title_value = undefined;
-    #title_hidden = false;
-    #icon_custom = undefined;
+    #titleValue = undefined;
+    #titleHidden = false;
+    #iconCustom = undefined;
 
     constructor(
         options = {
@@ -94,8 +94,8 @@ class Result {
         this.#root.appendChild(this.#actions);
         this.setStyle(optionOr(options.style, Result.STYLE.INFO));
         if (options.icon !== undefined) this.setIcon(options.icon);
-        this.#title_hidden = options.title === null;
-        if (typeof options.title === "string" && options.title !== "") this.#title_value = options.title;
+        this.#titleHidden = options.title === null;
+        if (typeof options.title === "string" && options.title !== "") this.#titleValue = options.title;
         this.#renderTitle();
         this.setDescription(optionOr(options.description, ""));
         this.setSize(optionOr(options.size, Result.SIZE.DEFAULT));
@@ -114,7 +114,7 @@ class Result {
 
     /** Заголовок на экране (`""`, если он убран) */
     getTitle() {
-        return this.#title_hidden ? "" : this.#title.innerText;
+        return this.#titleHidden ? "" : this.#title.innerText;
     }
 
     getDescription() {
@@ -150,7 +150,7 @@ class Result {
         const assertive = known === Result.STYLE.ERROR;
         this.#root.setAttribute("role", assertive ? "alert" : "status");
         this.#root.setAttribute("aria-live", assertive ? "assertive" : "polite");
-        if (this.#icon_custom === undefined) this.#renderStyleIcon();
+        if (this.#iconCustom === undefined) this.#renderStyleIcon();
         // Заголовок не задавали — он тоже описывает состояние
         this.#renderTitle();
         return this;
@@ -159,25 +159,25 @@ class Result {
     /** Свой значок (имя из `Icons`, `Icon`, компонент или узел); `undefined` возвращает значок состояния */
     setIcon(icon = undefined) {
         if (icon === undefined || icon === null || icon === "") {
-            this.#icon_custom = undefined;
+            this.#iconCustom = undefined;
             this.#renderStyleIcon();
             return this;
         }
-        this.#icon_custom =
+        this.#iconCustom =
             typeof icon === "string"
                 ? new Icon(icon, "36px").set()
                 : typeof icon.set === "function"
                   ? icon.set()
                   : icon;
         this.#icon.innerHTML = "";
-        this.#icon.appendChild(this.#icon_custom);
+        this.#icon.appendChild(this.#iconCustom);
         return this;
     }
 
     /** Заголовок; пустая строка — заголовок состояния, `null` — без заголовка */
     setTitle(text = undefined) {
-        this.#title_hidden = text === null;
-        this.#title_value = typeof text === "string" && text !== "" ? text : undefined;
+        this.#titleHidden = text === null;
+        this.#titleValue = typeof text === "string" && text !== "" ? text : undefined;
         this.#renderTitle();
         return this;
     }
@@ -228,9 +228,9 @@ class Result {
     }
 
     #renderTitle() {
-        const text = this.#title_value === undefined ? Result.TITLE[this.#style] : this.#title_value;
-        this.#title.hidden = this.#title_hidden;
-        this.#title.innerText = this.#title_hidden ? "" : text;
+        const text = this.#titleValue === undefined ? Result.TITLE[this.#style] : this.#titleValue;
+        this.#title.hidden = this.#titleHidden;
+        this.#title.innerText = this.#titleHidden ? "" : text;
     }
 }
 

package/framework/components/chui_result/styles.css

@@ -72,17 +72,17 @@ result_actions:empty {
 
 /* Стили состояния красят плашку значка — заливку блока они не трогают */
 chui_result.result_success result_icon {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 chui_result.result_warning result_icon {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }
 
 chui_result.result_error result_icon {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }