chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_number/number.js

@@ -5,12 +5,12 @@ const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class NumberInput {
-    #chui_number_input = document.createElement("chui_number_input");
-    #number_main = document.createElement("number_main");
-    #number_button_minus = document.createElement("number_button_minus");
-    #number_button_plus = document.createElement("number_button_plus");
-    #number_button_minus_disabled = document.createElement("number_button_minus");
-    #number_button_plus_disabled = document.createElement("number_button_plus");
+    #chuiNumberInput = document.createElement("chui_number_input");
+    #numberMain = document.createElement("number_main");
+    #numberButtonMinus = document.createElement("number_button_minus");
+    #numberButtonPlus = document.createElement("number_button_plus");
+    #numberButtonMinusDisabled = document.createElement("number_button_minus");
+    #numberButtonPlusDisabled = document.createElement("number_button_plus");
     #title = undefined;
     #id = require("randomstring").generate();
     #input = document.createElement("input");
@@ -20,27 +20,24 @@ class NumberInput {
         this.#title = options.title;
 
         // Кнопки «плюс» и «минус» — у правого и левого края поля (позицию держит CSS)
-        this.#number_button_plus.className = "number_buttons number_buttons_plus";
-        this.#number_button_plus.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--blue_prime_background)");
-        this.#number_button_minus.className = "number_buttons number_buttons_minus";
-        this.#number_button_minus.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--blue_prime_background)");
+        this.#numberButtonPlus.className = "number_buttons number_buttons_plus";
+        this.#numberButtonPlus.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--blue_prime_background)");
+        this.#numberButtonMinus.className = "number_buttons number_buttons_minus";
+        this.#numberButtonMinus.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--blue_prime_background)");
         // Кнопки — не нативные: делаем их доступными с клавиатуры и даём имена (глиф в дерево доступности не идёт)
-        makeKeyboardButton(this.#number_button_minus);
-        makeKeyboardButton(this.#number_button_plus);
-        this.#number_button_minus.setAttribute("aria-label", I18n.t("forms.numberDecrease"));
-        this.#number_button_plus.setAttribute("aria-label", I18n.t("forms.numberIncrease"));
+        makeKeyboardButton(this.#numberButtonMinus);
+        makeKeyboardButton(this.#numberButtonPlus);
+        this.#numberButtonMinus.setAttribute("aria-label", I18n.t("forms.numberDecrease"));
+        this.#numberButtonPlus.setAttribute("aria-label", I18n.t("forms.numberIncrease"));
 
         // Выключенные кнопки: только вид, действий нет — скринридеру их не отдаём.
         // Курсор берётся наследованием от корня `.number_main_disabled`
-        this.#number_button_plus_disabled.className = "number_buttons number_buttons_plus";
-        this.#number_button_plus_disabled.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--text_color_disabled)");
-        this.#number_button_plus_disabled.setAttribute("aria-hidden", "true");
-        this.#number_button_minus_disabled.className = "number_buttons number_buttons_minus";
-        this.#number_button_minus_disabled.innerHTML = this.#iconHTML(
-            Icons.CONTENT.REMOVE,
-            "var(--text_color_disabled)"
-        );
-        this.#number_button_minus_disabled.setAttribute("aria-hidden", "true");
+        this.#numberButtonPlusDisabled.className = "number_buttons number_buttons_plus";
+        this.#numberButtonPlusDisabled.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--text_color_disabled)");
+        this.#numberButtonPlusDisabled.setAttribute("aria-hidden", "true");
+        this.#numberButtonMinusDisabled.className = "number_buttons number_buttons_minus";
+        this.#numberButtonMinusDisabled.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--text_color_disabled)");
+        this.#numberButtonMinusDisabled.setAttribute("aria-hidden", "true");
         //
 
         this.#input.type = "number";
@@ -50,28 +47,28 @@ class NumberInput {
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация и показ ошибки: min/max/required и другие правила из options
-        Validate.installField(this, options, this.#number_main, undefined, () => this.#input.value);
+        Validate.installField(this, options, this.#numberMain, undefined, () => this.#input.value);
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
             this.#label.classList.add("number_label");
             this.#label.setAttribute("for", this.#id);
-            this.#chui_number_input.appendChild(this.#label);
+            this.#chuiNumberInput.appendChild(this.#label);
         }
-        if (options.width !== undefined) this.#chui_number_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiNumberInput.style.width = options.width;
         // Рамку с кольцом при фокусе рисует общее правило темы (`number_main:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
 
-        this.#number_main.appendChild(this.#number_button_minus);
-        this.#number_main.appendChild(this.#input);
-        this.#number_main.appendChild(this.#number_button_plus);
-        this.#chui_number_input.appendChild(this.#number_main);
+        this.#numberMain.appendChild(this.#numberButtonMinus);
+        this.#numberMain.appendChild(this.#input);
+        this.#numberMain.appendChild(this.#numberButtonPlus);
+        this.#chuiNumberInput.appendChild(this.#numberMain);
 
-        this.#number_button_plus.addEventListener("mousedown", (event) => {
+        this.#numberButtonPlus.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
-        this.#number_button_minus.addEventListener("mousedown", (event) => {
+        this.#numberButtonMinus.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
@@ -79,12 +76,12 @@ class NumberInput {
         // Клавиатура: фокус остаётся на кнопке (можно нажимать подряд), мышь — уводит в поле
         // Свои кнопки меняют значение программно, поэтому событие шлём сами: иначе о правке
         // не узнали бы ни слушатели, ни составные компоненты
-        this.#number_button_plus.addEventListener("click", (event) => {
+        this.#numberButtonPlus.addEventListener("click", (event) => {
             if (event.detail > 0) this.#input.focus();
             this.#input.value++;
             this.#input.dispatchEvent(new Event("change", { bubbles: true }));
         });
-        this.#number_button_minus.addEventListener("click", (event) => {
+        this.#numberButtonMinus.addEventListener("click", (event) => {
             if (event.detail > 0) this.#input.focus();
             this.#input.value--;
             this.#input.dispatchEvent(new Event("change", { bubbles: true }));
@@ -117,25 +114,25 @@ class NumberInput {
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#number_main.classList.add("number_main_disabled");
+            this.#numberMain.classList.add("number_main_disabled");
             this.#input.className = "number_input_disabled";
             this.#label.className = "number_label_disabled";
-            this.#number_button_minus.remove();
-            this.#number_button_plus.remove();
-            this.#number_main.appendChild(this.#number_button_minus_disabled);
-            this.#number_main.appendChild(this.#number_button_plus_disabled);
+            this.#numberButtonMinus.remove();
+            this.#numberButtonPlus.remove();
+            this.#numberMain.appendChild(this.#numberButtonMinusDisabled);
+            this.#numberMain.appendChild(this.#numberButtonPlusDisabled);
         } else {
-            this.#number_main.classList.remove("number_main_disabled");
+            this.#numberMain.classList.remove("number_main_disabled");
             this.#input.className = "number_input";
             this.#label.className = "number_label";
-            this.#number_button_minus_disabled.remove();
-            this.#number_button_plus_disabled.remove();
-            this.#number_main.appendChild(this.#number_button_minus);
-            this.#number_main.appendChild(this.#number_button_plus);
+            this.#numberButtonMinusDisabled.remove();
+            this.#numberButtonPlusDisabled.remove();
+            this.#numberMain.appendChild(this.#numberButtonMinus);
+            this.#numberMain.appendChild(this.#numberButtonPlus);
         }
     }
     set() {
-        return this.#chui_number_input;
+        return this.#chuiNumberInput;
     }
 }
 

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

@@ -4,12 +4,12 @@ chui_number_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);
 }
 
 number_main {
@@ -17,7 +17,7 @@ number_main {
     width: -webkit-fill-available;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     align-items: center;
     position: relative;
     padding: var(--control_padding) 43px;
@@ -47,7 +47,7 @@ number_main {
 }
 
 .number_buttons:focus-visible {
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -72,7 +72,7 @@ chui_number_input input[type="number"]::-webkit-inner-spin-button {
 .number_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);
@@ -89,7 +89,7 @@ chui_number_input input[type="number"]::-webkit-inner-spin-button {
     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_otp/otp.js

@@ -88,18 +88,18 @@ class OtpInput {
     #roving = undefined;
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #length = 6;
     #type = OtpInput.TYPES.NUMERIC;
     #value = "";
     #obscure = false;
     #disabled = false;
-    #read_only = false;
+    #readOnly = false;
     #listeners = [];
-    #complete_listeners = [];
-    #on_change = undefined;
-    #on_complete = undefined;
+    #completeListeners = [];
+    #onChange = undefined;
+    #onComplete = undefined;
 
     constructor(
         options = {
@@ -123,9 +123,9 @@ class OtpInput {
         OtpInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_otp_input_${OtpInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
-        this.#on_complete = options.onComplete;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
+        this.#onComplete = options.onComplete;
         this.#length = OtpInput.#toLength(options.length);
         this.#type = OtpInput.#toType(options.type);
         this.#root.id = this.#id;
@@ -146,7 +146,7 @@ class OtpInput {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("forms.otpLabel") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("forms.otpLabel") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
         this.#build();
         this.#roving = new RovingKeyboard(this.#row, { itemSelector: ".otp_cell" });
@@ -181,12 +181,12 @@ class OtpInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     getLength() {
@@ -221,7 +221,7 @@ class OtpInput {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     // SET
@@ -238,7 +238,7 @@ class OtpInput {
 
     /** Подпись над клетками; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -255,8 +255,8 @@ class OtpInput {
 
     /** Имя группы, когда подписи в разметке нет */
     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.#row.removeAttribute("aria-label");
             else this.#row.setAttribute("aria-label", String(text));
         }
@@ -328,10 +328,10 @@ class OtpInput {
     }
 
     /** Режим показа: код видно и можно скопировать, но клетки не принимают нажатия */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("otp_readonly", this.#read_only);
-        for (const cell of this.#cells) cell.readOnly = this.#read_only;
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("otp_readonly", this.#readOnly);
+        for (const cell of this.#cells) cell.readOnly = this.#readOnly;
         return this;
     }
 
@@ -351,7 +351,7 @@ class OtpInput {
 
     /** Слушатель заполненного кода: `(value, otpInput) => {}` */
     addCompleteListener(listener = () => {}) {
-        this.#complete_listeners.push(listener);
+        this.#completeListeners.push(listener);
         return this;
     }
 
@@ -382,8 +382,8 @@ class OtpInput {
     }
 
     #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("forms.otpLabel");
     }
 
@@ -431,7 +431,7 @@ class OtpInput {
         this.#value = this.#cells.map((cell) => cell.value).join("");
         if (this.#roving !== undefined) this.#roving.refresh();
         if (this.#obscure) this.#root.classList.add("otp_obscured");
-        if (this.#read_only) for (const cell of this.#cells) cell.readOnly = true;
+        if (this.#readOnly) for (const cell of this.#cells) cell.readOnly = true;
         if (this.#disabled) for (const cell of this.#cells) cell.disabled = true;
         return this;
     }
@@ -454,16 +454,16 @@ class OtpInput {
     #collect(notify = false) {
         const value = this.#cells.map((cell) => cell.value).join("");
         const changed = value !== this.#value;
-        const complete_before = this.#value.length === this.#length && this.#value !== "";
+        const completeBefore = this.#value.length === this.#length && this.#value !== "";
         this.#value = value;
         this.#announce();
         if (!changed || !notify) return this;
         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);
         const complete = this.isComplete();
-        if (complete && !complete_before) {
-            for (const listener of [...this.#complete_listeners]) listener(value, this);
-            if (this.#on_complete !== undefined) this.#on_complete(value, this);
+        if (complete && !completeBefore) {
+            for (const listener of [...this.#completeListeners]) listener(value, this);
+            if (this.#onComplete !== undefined) this.#onComplete(value, this);
         }
         return this;
     }
@@ -498,7 +498,7 @@ class OtpInput {
     }
 
     #onInput = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         const cell = event.target;
         const index = this.#cells.indexOf(cell);
         if (index === -1) return;
@@ -531,7 +531,7 @@ class OtpInput {
     };
 
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         const cell = event.target;
         const index = this.#cells.indexOf(cell);
         if (index === -1) return;
@@ -557,7 +557,7 @@ class OtpInput {
     };
 
     #onPaste = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         event.preventDefault();
         const text = event.clipboardData === null ? "" : event.clipboardData.getData("text");
         this.#fill(text, this.#cells.indexOf(event.target));

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

@@ -5,18 +5,18 @@ chui_otp_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;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .otp_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 @@ chui_otp_input {
     margin: 0;
     padding: 0;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-size: 18px;
@@ -62,7 +62,7 @@ chui_otp_input {
     border: none;
     outline: 1px solid var(--red_prime_background);
     outline-offset: 4px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 .otp_disabled .otp_cell {

package/framework/components/chui_inputs/chui_password/password.js

@@ -7,14 +7,14 @@ const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class PasswordInput {
     #id = require("randomstring").generate();
-    #password_main = document.createElement("password_main");
-    #see_pass_button = document.createElement("see_pass_button");
-    #see_pass_button_disabled = document.createElement("see_pass_button");
-    #chui_password_input = document.createElement("chui_password_input");
+    #passwordMain = document.createElement("password_main");
+    #seePassButton = document.createElement("see_pass_button");
+    #seePassButtonDisabled = document.createElement("see_pass_button");
+    #chuiPasswordInput = document.createElement("chui_password_input");
     #label = document.createElement("label");
     #input = document.createElement("input");
     #title = undefined;
-    #error_message_password = document.createElement("error_message_password");
+    #errorMessagePassword = document.createElement("error_message_password");
     constructor(
         options = {
             name: String(),
@@ -32,19 +32,13 @@ class PasswordInput {
         this.#input.className = "password_input";
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: тот же контракт validate/setError/clearError, своё сообщение под полем
-        Validate.installField(
-            this,
-            options,
-            this.#password_main,
-            this.#error_message_password,
-            () => this.#input.value
-        );
+        Validate.installField(this, options, this.#passwordMain, this.#errorMessagePassword, () => this.#input.value);
         // Кнопка показа пароля — не значок, а кнопка: роль, остановка обхода и Enter/Space
-        makeKeyboardButton(this.#see_pass_button);
+        makeKeyboardButton(this.#seePassButton);
         // У выключенного поля кнопка декоративна: фокус в неё не попадает
-        this.#see_pass_button_disabled.setAttribute("aria-hidden", "true");
-        this.#setSeeGlyph(this.#see_pass_button, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
-        this.#setSeeGlyph(this.#see_pass_button_disabled, Icons.ACTIONS.VISIBILITY, "var(--text_color_disabled)");
+        this.#seePassButtonDisabled.setAttribute("aria-hidden", "true");
+        this.#setSeeGlyph(this.#seePassButton, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
+        this.#setSeeGlyph(this.#seePassButtonDisabled, Icons.ACTIONS.VISIBILITY, "var(--text_color_disabled)");
         // Курсор выключенного поля даёт его контейнер (`.password_main_disabled`),
         // курсор наследуется и на кнопку
         this.#syncSeeLabel();
@@ -52,28 +46,28 @@ class PasswordInput {
             this.#label.innerText = options.title;
             this.#label.classList.add("password_label");
             this.#label.setAttribute("for", this.#id);
-            this.#chui_password_input.appendChild(this.#label);
+            this.#chuiPasswordInput.appendChild(this.#label);
         }
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_password_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiPasswordInput.style.width = options.width;
         // Рамку с кольцом при фокусе рисует общее правило темы (`password_main:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
 
-        this.#see_pass_button.addEventListener("mousedown", (event) => {
+        this.#seePassButton.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
 
-        this.#password_main.appendChild(this.#input);
-        this.#password_main.appendChild(this.#see_pass_button);
-        this.#see_pass_button.addEventListener("click", () => this.#showPassword());
-        this.#chui_password_input.appendChild(this.#password_main);
+        this.#passwordMain.appendChild(this.#input);
+        this.#passwordMain.appendChild(this.#seePassButton);
+        this.#seePassButton.addEventListener("click", () => this.#showPassword());
+        this.#chuiPasswordInput.appendChild(this.#passwordMain);
 
         //
         this.#input.addEventListener("input", () => {
             this.clearError();
-            new Animation(this.#error_message_password).fadeOut();
+            new Animation(this.#errorMessagePassword).fadeOut();
         });
     }
     getName() {
@@ -91,17 +85,17 @@ class PasswordInput {
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#password_main.classList.add("password_main_disabled");
+            this.#passwordMain.classList.add("password_main_disabled");
             this.#input.className = "password_input_disabled";
             this.#label.className = "password_label_disabled";
-            this.#see_pass_button.remove();
-            this.#password_main.appendChild(this.#see_pass_button_disabled);
+            this.#seePassButton.remove();
+            this.#passwordMain.appendChild(this.#seePassButtonDisabled);
         } else {
-            this.#password_main.classList.remove("password_main_disabled");
+            this.#passwordMain.classList.remove("password_main_disabled");
             this.#input.className = "password_input";
             this.#label.className = "password_label";
-            this.#see_pass_button_disabled.remove();
-            this.#password_main.appendChild(this.#see_pass_button);
+            this.#seePassButtonDisabled.remove();
+            this.#passwordMain.appendChild(this.#seePassButton);
         }
     }
     setErrorMessage(message = String()) {
@@ -109,10 +103,10 @@ class PasswordInput {
         // Своя отрисовка оставляла ошибку только глазами — скринридер о ней не знал
         this.setError(message);
         // У поля сообщение скрыто по умолчанию (`display: none`) — показываем анимацией
-        new Animation(this.#error_message_password).fadeIn();
+        new Animation(this.#errorMessagePassword).fadeIn();
     }
     set() {
-        return this.#chui_password_input;
+        return this.#chuiPasswordInput;
     }
     /** Значок кнопки: узел помечается скрытым — имя кнопки даёт `aria-label`, а не лигатура */
     #setSeeGlyph(button = new HTMLElement(), icon = String(), color = String()) {
@@ -125,16 +119,16 @@ class PasswordInput {
     #syncSeeLabel() {
         const shown = this.#input.type === "text";
         const label = I18n.t(shown ? "forms.passwordHide" : "forms.passwordShow");
-        this.#see_pass_button.setAttribute("aria-label", label);
-        this.#see_pass_button.setAttribute("title", label);
+        this.#seePassButton.setAttribute("aria-label", label);
+        this.#seePassButton.setAttribute("title", label);
     }
     #showPassword() {
         this.#input.focus();
         if (this.#input.type === "password") {
-            this.#setSeeGlyph(this.#see_pass_button, Icons.ACTIONS.VISIBILITY_OFF, "var(--blue_prime_background)");
+            this.#setSeeGlyph(this.#seePassButton, Icons.ACTIONS.VISIBILITY_OFF, "var(--blue_prime_background)");
             this.#input.type = "text";
         } else {
-            this.#setSeeGlyph(this.#see_pass_button, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
+            this.#setSeeGlyph(this.#seePassButton, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
             this.#input.type = "password";
         }
         this.#syncSeeLabel();

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

@@ -4,12 +4,12 @@ chui_password_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);
 }
 
 password_main {
@@ -17,11 +17,11 @@ password_main {
     outline: none;
     width: -webkit-fill-available;
     height: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     font-size: var(--font_default_size);
     color: var(--text_color);
     position: relative;
-    padding: var(--control_padding) 43px var(--main_padding);
+    padding: var(--control_padding) 43px var(--block_padding);
     background: var(--element_background);
     border: 1px solid var(--border_color);
 }
@@ -54,7 +54,7 @@ see_pass_button {
 .password_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);
@@ -68,7 +68,7 @@ error_message_password {
     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);
@@ -85,7 +85,7 @@ error_message_password {
     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_radio_button/styles.css

@@ -4,13 +4,13 @@ radiobutton {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --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: flex-start;
     /* Тот же шаг шрифта, что у CheckBox: квадратик и кружок должны быть одного размера */
     font-size: var(--font_default_size);
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: max-content;
 }