chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_file/file.js

@@ -2,76 +2,103 @@
 
 class AcceptTypes {
     //Изображения
-    static ALL_IMAGE = "image/*"
-    static PNG = "image/png"
-    static GIF = "image/gif"
-    static JPEG = "image/jpeg"
+    static ALL_IMAGE = "image/*";
+    static PNG = "image/png";
+    static GIF = "image/gif";
+    static JPEG = "image/jpeg";
     //===========
     //Аудио
-    static ALL_AUDIO = "audio/*"
+    static ALL_AUDIO = "audio/*";
     //===========
     //Видео
-    static ALL_VIDEO = "video/*"
+    static ALL_VIDEO = "video/*";
     //===========
 }
 
-exports.AcceptTypes = AcceptTypes
+exports.AcceptTypes = AcceptTypes;
 
 class FileInput {
-    #chui_file_main = document.createElement('chui_file_main');
-    #chui_file_input = document.createElement('chui_file_input');
+    #chuiFileMain = document.createElement("chui_file_main");
+    #chuiFileInput = document.createElement("chui_file_input");
     #id = require("randomstring").generate();
     #title = String();
-    #input = document.createElement('input');
-    #label = document.createElement('label');
-    constructor(options = {
-        name: String(), title: String(), accept: [],
-        required: Boolean(), disableFocus: Boolean(), multiple: Boolean(),
-        changeListener: () => {}, focusListener: () => {}, blurListener: () => {}
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_fileInput');
-        this.#input.type = 'file';
-        this.#input.className = 'file_input';
+    #input = document.createElement("input");
+    #label = document.createElement("label");
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            accept: [],
+            required: Boolean(),
+            disableFocus: Boolean(),
+            multiple: Boolean(),
+            changeListener: () => {},
+            focusListener: () => {},
+            blurListener: () => {},
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_fileInput");
+        this.#input.type = "file";
+        this.#input.className = "file_input";
         this.#input.id = this.#id;
         //Options
         if (options.name !== undefined) this.#input.name = options.name;
-        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
-        if (options.focusListener !== undefined) this.#input.addEventListener('focus', options.focusListener);
-        if (options.blurListener !== undefined) this.#input.addEventListener('blur', options.blurListener);
+        if (options.changeListener !== undefined) this.#input.addEventListener("change", options.changeListener);
+        if (options.focusListener !== undefined) this.#input.addEventListener("focus", options.focusListener);
+        if (options.blurListener !== undefined) this.#input.addEventListener("blur", options.blurListener);
         if (options.required !== undefined) this.#input.required = options.required;
-        if (options.disableFocus !== undefined) this.#input.addEventListener("mousedown", () => { return false });
+        if (options.disableFocus !== undefined)
+            this.#input.addEventListener("mousedown", () => {
+                return false;
+            });
         if (options.accept) this.#input.accept = options.accept.join(", ");
         if (options.multiple) this.#input.multiple = options.multiple;
         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_file_input.appendChild(this.#label);
+            this.#label.className = "input_label";
+            this.#label.setAttribute("for", this.#id);
+            this.#chuiFileInput.appendChild(this.#label);
         }
-        this.#chui_file_main.appendChild(this.#input);
-        this.#chui_file_input.appendChild(this.#chui_file_main);
+        this.#chuiFileMain.appendChild(this.#input);
+        this.#chuiFileInput.appendChild(this.#chuiFileMain);
+    }
+    addChangeListener(listener = () => {}) {
+        this.#input.addEventListener("change", listener);
+    }
+    addFocusListener(listener = () => {}) {
+        this.#input.addEventListener("focus", listener);
+    }
+    addBlurListener(listener = () => {}) {
+        this.#input.addEventListener("blur", listener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getFile(index = Number()) {
+        return this.#input.files[index];
+    }
+    getFiles() {
+        return this.#input.files;
     }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
-    addFocusListener(listener = () => {}) { this.#input.addEventListener('focus', listener); }
-    addBlurListener(listener = () => {}) { this.#input.addEventListener('blur', listener); }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getFile(index = Number()) { return this.#input.files[index]; }
-    getFiles() { return this.#input.files; }
     setDisabled(value = Boolean()) {
-        this.#input.disabled = value
+        this.#input.disabled = value;
         if (value) {
-            this.#chui_file_main.classList.add("chui_file_main_disabled")
-            this.#input.className = "file_input_disabled"
-            this.#label.className = "input_label_disabled"
+            this.#chuiFileMain.classList.add("chui_file_main_disabled");
+            this.#input.className = "file_input_disabled";
+            this.#label.className = "input_label_disabled";
         } else {
-            this.#chui_file_main.classList.remove("chui_file_main_disabled")
-            this.#input.className = "file_input"
-            this.#label.className = "input_label"
+            this.#chuiFileMain.classList.remove("chui_file_main_disabled");
+            this.#input.className = "file_input";
+            this.#label.className = "input_label";
         }
     }
-    set() { return this.#chui_file_input; }
+    set() {
+        return this.#chuiFileInput;
+    }
 }
 
-exports.FileInput = FileInput
+exports.FileInput = FileInput;

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

@@ -4,12 +4,12 @@ chui_file_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);
 }
 
 chui_file_main {
@@ -17,7 +17,7 @@ chui_file_main {
     width: max-content;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     border: none;
@@ -46,10 +46,10 @@ chui_file_main {
     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)
+    font-weight: 500;
+    color: var(--text_color_disabled);
 }
 
 .file_input {
@@ -65,42 +65,46 @@ chui_file_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)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
-input[type=file]::file-selector-button {
+input[type="file"]::file-selector-button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     font-weight: 400;
-    margin-block: 0 0; margin-inline: 0 var(--margin);
+    margin-block: 0 0;
+    margin-inline: 0 var(--block_margin);
     color: var(--text_color);
-    transition: all var(--transition_time);
-    font-family: 'chui_I';
+    transition:
+        background-color var(--motion_fast) var(--motion_ease),
+        color var(--motion_fast) var(--motion_ease),
+        border-color var(--motion_fast) var(--motion_ease);
+    font-family: "chui_I";
     background: var(--button_background);
     border: 1px solid var(--button_border_color);
 }
 
-input[type=file]::file-selector-button:hover {
+input[type="file"]::file-selector-button:hover {
     background: var(--element_background_hover);
     color: var(--text_color);
     border: 1px solid var(--button_border_color_hover);
 }
 
-input[type=file]:disabled::file-selector-button {
+input[type="file"]:disabled::file-selector-button {
     cursor: not-allowed;
     color: var(--text_color_disabled);
     background: var(--button_background_disabled);
     border: 1px solid var(--border_color);
 }
 
-input[type=file]:disabled::file-selector-button:hover {
+input[type="file"]:disabled::file-selector-button:hover {
     background: var(--button_background_disabled);
     color: var(--text_color_disabled);
-}
+}

package/framework/components/chui_inputs/chui_hotkey/hotkey.js

@@ -1,22 +1,28 @@
-const {setStyles, optionOr} = require('../../../modules/chui_functions');
-const {Kbd} = require('../../chui_kbd/kbd');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../../modules/chui_functions");
+const { Kbd } = require("../../chui_kbd/kbd");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 // Канонический вид сочетания: только буквы, цифры и «+» между клавишами
 const HOTKEY_PATTERN = "^[A-Za-z0-9]+(\\+[A-Za-z0-9]+)*$";
 /** Порядок модификаторов в записи сочетания — один и тот же, как его ни набери */
 const MODIFIER_ORDER = ["Ctrl", "Alt", "Shift", "Meta"];
 const MODIFIER_ALIASES = {
-    ctrl: "Ctrl", control: "Ctrl",
-    alt: "Alt", option: "Alt",
+    ctrl: "Ctrl",
+    control: "Ctrl",
+    alt: "Alt",
+    option: "Alt",
     shift: "Shift",
-    meta: "Meta", cmd: "Meta", command: "Meta", super: "Meta", win: "Meta",
+    meta: "Meta",
+    cmd: "Meta",
+    command: "Meta",
+    super: "Meta",
+    win: "Meta",
 };
 // Как эти же клавиши называет ARIA в aria-keyshortcuts
-const ARIA_MODIFIERS = {Ctrl: "Control", Alt: "Alt", Shift: "Shift", Meta: "Meta"};
-const KEY_ALIASES = {space: "Space", enter: "Enter", return: "Enter", tab: "Tab", escape: "Escape", esc: "Escape"};
+const ARIA_MODIFIERS = { Ctrl: "Control", Alt: "Alt", Shift: "Shift", Meta: "Meta" };
+const KEY_ALIASES = { space: "Space", enter: "Enter", return: "Enter", tab: "Tab", escape: "Escape", esc: "Escape" };
 
 /**
  * Поле горячей клавиши: нажатое сочетание записывается в значение.
@@ -53,41 +59,43 @@ class HotkeyInput {
     #row = document.createElement("hotkey_row");
     #field = document.createElement("hotkey_field");
     #kbd = undefined;
-    #clear_button = document.createElement("button");
+    #clearButton = document.createElement("button");
     #hint = document.createElement("hotkey_hint");
     #status = document.createElement("hotkey_status");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #value = "";
-    #allow_single = false;
-    #read_only = false;
+    #allowSingle = false;
+    #readOnly = false;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        value: String(),
-        allowSingle: Boolean(),
-        readOnly: Boolean(),
-        disabled: Boolean(),
-        size: String(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    #onChange = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            value: String(),
+            allowSingle: Boolean(),
+            readOnly: Boolean(),
+            disabled: Boolean(),
+            size: String(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_HotkeyInput");
         HotkeyInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_hotkey_input_${HotkeyInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#allow_single = options.allowSingle === true;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#allowSingle = options.allowSingle === true;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#root.id = this.#id;
         this.#label.className = "hotkey_label";
@@ -99,34 +107,32 @@ class HotkeyInput {
         this.#field.addEventListener("keydown", this.#onKeyDown);
         this.#field.addEventListener("focus", () => this.#field.classList.add("hotkey_field_focused"));
         this.#field.addEventListener("blur", () => this.#field.classList.remove("hotkey_field_focused"));
-        this.#kbd = new Kbd({keys: []});
+        this.#kbd = new Kbd({ keys: [] });
         const keys = this.#kbd.set();
         // Клавиши — внешний вид: имя и значение несёт само поле
         keys.setAttribute("aria-hidden", "true");
         this.#field.appendChild(keys);
-        this.#clear_button.type = "button";
-        this.#clear_button.className = "hotkey_clear";
-        this.#clear_button.setAttribute("aria-label", I18n.t("forms.hotkeyClear"));
-        const clear_icon = new Icon(Icons.NAVIGATION.CLOSE).set();
-        clear_icon.setAttribute("aria-hidden", "true");
-        this.#clear_button.appendChild(clear_icon);
-        this.#clear_button.addEventListener("click", () => {
+        this.#clearButton.type = "button";
+        this.#clearButton.className = "hotkey_clear";
+        this.#clearButton.setAttribute("aria-label", I18n.t("forms.hotkeyClear"));
+        const clearIcon = new Icon(Icons.NAVIGATION.CLOSE).set();
+        clearIcon.setAttribute("aria-hidden", "true");
+        this.#clearButton.appendChild(clearIcon);
+        this.#clearButton.addEventListener("click", () => {
             if (this.#disabled) return;
             this.#apply("", true);
             this.#field.focus();
         });
         this.#hint.id = `${this.#id}_hint`;
         this.#hint.className = "hotkey_hint";
-        this.#hint.innerText = options.hint === undefined
-            ? I18n.t("forms.hotkeyHint")
-            : String(options.hint);
+        this.#hint.innerText = options.hint === undefined ? I18n.t("forms.hotkeyHint") : String(options.hint);
         this.#field.setAttribute("aria-describedby", this.#hint.id);
         // Единственный live-регион: без него о записи узнать неоткуда
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#row.appendChild(this.#field);
-        this.#row.appendChild(this.#clear_button);
+        this.#row.appendChild(this.#clearButton);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
         this.#root.appendChild(this.#label);
@@ -134,8 +140,14 @@ class HotkeyInput {
         this.#root.appendChild(this.#hint);
         this.#root.appendChild(this.#status);
         this.setLabel(optionOr(options.label, I18n.t("forms.hotkeyLabel")));
-        Validate.installField(this, Object.assign({pattern: HOTKEY_PATTERN}, options), this.#root, undefined,
-            () => this.#value, this.#field);
+        Validate.installField(
+            this,
+            Object.assign({ pattern: HOTKEY_PATTERN }, options),
+            this.#root,
+            undefined,
+            () => this.#value,
+            this.#field
+        );
         if (options.value !== undefined && options.value !== "") this.setValue(options.value);
         this.setReadOnly(options.readOnly === true);
         this.setDisabled(options.disabled === true);
@@ -152,12 +164,12 @@ class HotkeyInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя поля, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Сочетание в каноническом виде («Ctrl+Shift+S»); пустая строка — не задано */
@@ -175,11 +187,11 @@ class HotkeyInput {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     isAllowSingle() {
-        return this.#allow_single;
+        return this.#allowSingle;
     }
 
     /**
@@ -189,7 +201,10 @@ class HotkeyInput {
      */
     static parse(value = String()) {
         if (typeof value !== "string") return undefined;
-        const parts = value.split("+").map((part) => part.trim()).filter((part) => part !== "");
+        const parts = value
+            .split("+")
+            .map((part) => part.trim())
+            .filter((part) => part !== "");
         const modifiers = [];
         let main = undefined;
         for (const part of parts) {
@@ -204,7 +219,9 @@ class HotkeyInput {
         }
         // Одни модификаторы — ещё не сочетание
         if (main === undefined) return undefined;
-        return MODIFIER_ORDER.filter((modifier) => modifiers.includes(modifier)).concat(main).join("+");
+        return MODIFIER_ORDER.filter((modifier) => modifiers.includes(modifier))
+            .concat(main)
+            .join("+");
     }
 
     // SET
@@ -221,7 +238,7 @@ class HotkeyInput {
 
     /** Подпись над полем; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         this.#label.id = `${this.#id}_label`;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
@@ -241,8 +258,8 @@ class HotkeyInput {
 
     /** Доступное имя поля, когда подписи в разметке нет */
     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.#field.removeAttribute("aria-label");
             else this.#field.setAttribute("aria-label", String(text));
         }
@@ -281,15 +298,15 @@ class HotkeyInput {
 
     /** Разрешить одиночные клавиши без модификаторов (`F5`, `A`) */
     setAllowSingle(allow = Boolean()) {
-        this.#allow_single = allow === true;
+        this.#allowSingle = allow === true;
         return this;
     }
 
     /** Режим показа: сочетание видно, но поле не принимает фокус и нажатия */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("hotkey_readonly", this.#read_only);
-        if (this.#read_only) {
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("hotkey_readonly", this.#readOnly);
+        if (this.#readOnly) {
             this.#field.removeAttribute("tabindex");
             this.#hint.hidden = true;
             this.#field.removeAttribute("aria-describedby");
@@ -313,11 +330,11 @@ class HotkeyInput {
         if (this.#disabled) {
             this.#field.setAttribute("tabindex", "-1");
             this.#field.setAttribute("aria-disabled", "true");
-            this.#clear_button.disabled = true;
+            this.#clearButton.disabled = true;
         } else {
             this.#field.removeAttribute("aria-disabled");
-            this.#clear_button.disabled = false;
-            if (!this.#read_only) this.#field.setAttribute("tabindex", "0");
+            this.#clearButton.disabled = false;
+            if (!this.#readOnly) this.#field.setAttribute("tabindex", "0");
         }
         this.#render();
         return this;
@@ -331,7 +348,7 @@ class HotkeyInput {
 
     /** Фокус на поле: `Form` зовёт это при ошибке валидации */
     focus() {
-        if (!this.#disabled && !this.#read_only) this.#field.focus();
+        if (!this.#disabled && !this.#readOnly) this.#field.focus();
         return this;
     }
 
@@ -342,8 +359,8 @@ class HotkeyInput {
 
     // === ВНУТРЕННЕЕ ===
     #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.hotkeyLabel");
     }
 
@@ -354,9 +371,13 @@ class HotkeyInput {
         this.#value = value;
         this.#render();
         if (!changed || notify !== true) return;
-        this.#announce(value === "" ? I18n.t("forms.hotkeyCleared") : I18n.t("forms.hotkeyRecorded", {value: value.split("+").join(" + ")}));
+        this.#announce(
+            value === ""
+                ? I18n.t("forms.hotkeyCleared")
+                : I18n.t("forms.hotkeyRecorded", { value: value.split("+").join(" + ") })
+        );
         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);
     }
 
     #render() {
@@ -365,13 +386,15 @@ class HotkeyInput {
         keys.setAttribute("aria-hidden", "true");
         if (this.#value === "") this.#field.removeAttribute("aria-keyshortcuts");
         else this.#field.setAttribute("aria-keyshortcuts", this.#ariaShortcut());
-        this.#clear_button.hidden = this.#value === "" || this.#read_only;
+        this.#clearButton.hidden = this.#value === "" || this.#readOnly;
         this.#field.classList.toggle("hotkey_field_empty", this.#value === "");
     }
 
     // Синтаксис ARIA: модификаторы называются Control, Meta и т.д.
     #ariaShortcut() {
-        return this.getKeys().map((key) => ARIA_MODIFIERS[key] === undefined ? key : ARIA_MODIFIERS[key]).join("+");
+        return this.getKeys()
+            .map((key) => (ARIA_MODIFIERS[key] === undefined ? key : ARIA_MODIFIERS[key]))
+            .join("+");
     }
 
     #announce(text = String()) {
@@ -379,7 +402,7 @@ class HotkeyInput {
     }
 
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         // Tab не перехватываем: иначе поле нельзя было бы покинуть
         if (event.key === "Tab") return;
         // Escape, Delete и Backspace снимают сочетание, поэтому связать их нельзя
@@ -398,10 +421,12 @@ class HotkeyInput {
         const main = HotkeyInput.#canonicalKey(event.key);
         if (main === undefined) {
             // Нажаты только модификаторы: ждём основную клавишу
-            this.#announce(modifiers.length === 0 ? "" : I18n.t("forms.hotkeyModifiers", {value: modifiers.join(" + ")}));
+            this.#announce(
+                modifiers.length === 0 ? "" : I18n.t("forms.hotkeyModifiers", { value: modifiers.join(" + ") })
+            );
             return;
         }
-        if (modifiers.length === 0 && !this.#allow_single) {
+        if (modifiers.length === 0 && !this.#allowSingle) {
             event.preventDefault();
             this.#announce(I18n.t("forms.hotkeyNeedModifier"));
             return;
@@ -426,4 +451,4 @@ class HotkeyInput {
     }
 }
 
-exports.HotkeyInput = HotkeyInput
+exports.HotkeyInput = HotkeyInput;

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

@@ -5,20 +5,20 @@ chui_hotkey_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);
 }
 
 .hotkey_label {
     display: block;
     width: max-content;
-    /* Только нижний отступ: верхний и боковые уже даёт корень поля (--margin), а свой
+    /* Только нижний отступ: верхний и боковые уже даёт корень поля (--block_margin), а свой
        боковой отступ сдвигал подпись вправо от коробки поля */
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -34,7 +34,7 @@ chui_hotkey_input {
     gap: 8px;
 }
 
-/* Поле — та же коробка, что у текстового поля: --control_height, hairline и --border_radius */
+/* Поле — та же коробка, что у текстового поля: --control_height, hairline и --radius_sm */
 .hotkey_field {
     display: flex;
     align-items: center;
@@ -43,7 +43,7 @@ chui_hotkey_input {
     min-height: var(--control_height);
     padding: 3px 10px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     cursor: text;