chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_masked/masked.js

@@ -1,6 +1,6 @@
-const {setStyles} = require("../../../modules/chui_functions");
-const {Validate} = require("../../../modules/chui_validate/chui_validate");
-const {I18n} = require("../../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Поле с маской: позиции значения заданы шаблоном, литералы маски подставляются сами.
@@ -151,37 +151,39 @@ class MaskedInput {
     #error = document.createElement("chui_error_message");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #mask = "";
     #rendered = "";
-    #placeholder_text = "";
-    #placeholder_default = false;
+    #placeholderText = "";
+    #placeholderDefault = false;
     #disabled = false;
-    #read_only = false;
+    #readOnly = false;
     #listeners = [];
-    #on_change = undefined;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        mask: String(),
-        placeholder: String(),
-        value: String(),
-        disabled: Boolean(),
-        readOnly: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    #onChange = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            mask: String(),
+            placeholder: String(),
+            value: String(),
+            disabled: Boolean(),
+            readOnly: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_MaskedInput");
         MaskedInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_masked_input_${MaskedInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
         this.#mask = options.mask === undefined ? MaskedInput.MASKS.PHONE : String(options.mask);
         this.#root.id = this.#id;
         this.#label.className = "masked_label";
@@ -209,18 +211,26 @@ class MaskedInput {
         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.maskedLabel") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("forms.maskedLabel") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
-        this.setPlaceholder(options.placeholder === undefined
-            ? MaskedInput.placeholderText(this.#mask) : options.placeholder);
+        this.setPlaceholder(
+            options.placeholder === undefined ? MaskedInput.placeholderText(this.#mask) : options.placeholder
+        );
         // Флаг ставим после `setPlaceholder`: он же отмечает образец как заданный вручную
-        this.#placeholder_default = options.placeholder === undefined;
+        this.#placeholderDefault = options.placeholder === undefined;
         // Текст «неверный формат» у маски значит «поле не дозаполнено» — так и говорим
-        const messages = Object.assign({pattern: I18n.t("forms.maskedIncomplete")}, options.messages);
-        Validate.installField(this, Object.assign({}, options, {
-            pattern: MaskedInput.maskPattern(this.#mask),
-            messages: messages,
-        }), this.#root, this.#error, () => this.#rendered, this.#main);
+        const messages = Object.assign({ pattern: I18n.t("forms.maskedIncomplete") }, options.messages);
+        Validate.installField(
+            this,
+            Object.assign({}, options, {
+                pattern: MaskedInput.maskPattern(this.#mask),
+                messages: messages,
+            }),
+            this.#root,
+            this.#error,
+            () => this.#rendered,
+            this.#main
+        );
         if (options.value !== undefined && options.value !== "") this.setValue(options.value);
         this.setReadOnly(options.readOnly === true);
         this.setDisabled(options.disabled === true);
@@ -237,12 +247,12 @@ class MaskedInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя поля, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     getMask() {
@@ -265,7 +275,7 @@ class MaskedInput {
     }
 
     getPlaceholder() {
-        return this.#placeholder_text;
+        return this.#placeholderText;
     }
 
     getDisabled() {
@@ -273,7 +283,7 @@ class MaskedInput {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     // SET
@@ -292,7 +302,7 @@ class MaskedInput {
 
     /** Подпись над полем; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -309,8 +319,8 @@ class MaskedInput {
 
     /** Имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#input.removeAttribute("aria-label");
             else this.#input.setAttribute("aria-label", String(text));
         }
@@ -332,9 +342,9 @@ class MaskedInput {
     }
 
     setPlaceholder(text = String()) {
-        this.#placeholder_text = text === undefined ? "" : String(text);
-        this.#placeholder_default = false;
-        this.#input.placeholder = this.#placeholder_text;
+        this.#placeholderText = text === undefined ? "" : String(text);
+        this.#placeholderDefault = false;
+        this.#input.placeholder = this.#placeholderText;
         return this;
     }
 
@@ -348,10 +358,10 @@ class MaskedInput {
         const rules = this.getRules === undefined ? undefined : this.getRules();
         if (rules !== undefined) rules.pattern = MaskedInput.maskPattern(this.#mask);
         // Своя подсказка-образец остаётся, а вид маски по умолчанию пересобирается
-        if (this.#placeholder_default) {
-            this.#placeholder_text = MaskedInput.placeholderText(this.#mask);
-            this.#input.placeholder = this.#placeholder_text;
-            this.#placeholder_default = true;
+        if (this.#placeholderDefault) {
+            this.#placeholderText = MaskedInput.placeholderText(this.#mask);
+            this.#input.placeholder = this.#placeholderText;
+            this.#placeholderDefault = true;
         }
         return this;
     }
@@ -381,10 +391,10 @@ class MaskedInput {
     }
 
     /** Режим показа: значение видно, но поле не принимает нажатия */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("masked_readonly", this.#read_only);
-        this.#input.readOnly = this.#read_only;
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("masked_readonly", this.#readOnly);
+        this.#input.readOnly = this.#readOnly;
         return this;
     }
 
@@ -414,8 +424,8 @@ class MaskedInput {
 
     // === ВНУТРЕННЕЕ ===
     #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.maskedLabel");
     }
 
@@ -466,7 +476,7 @@ class MaskedInput {
 
     #notify() {
         for (const listener of [...this.#listeners]) listener(this.#rendered, this);
-        if (this.#on_change !== undefined) this.#on_change(this.#rendered, this);
+        if (this.#onChange !== undefined) this.#onChange(this.#rendered, this);
     }
 
     #announce(text = String()) {
@@ -479,35 +489,36 @@ class MaskedInput {
      * и раскладываем по позициям маски заново.
      */
     #onInput = () => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         const next = this.#input.value;
         const previous = this.#rendered;
         let start = 0;
         while (start < previous.length && start < next.length && previous[start] === next[start]) start += 1;
-        let previous_end = previous.length;
-        let next_end = next.length;
-        while (previous_end > start && next_end > start && previous[previous_end - 1] === next[next_end - 1]) {
-            previous_end -= 1;
-            next_end -= 1;
+        let previousEnd = previous.length;
+        let nextEnd = next.length;
+        while (previousEnd > start && nextEnd > start && previous[previousEnd - 1] === next[nextEnd - 1]) {
+            previousEnd -= 1;
+            nextEnd -= 1;
         }
-        const inserted_text = next.slice(start, next_end);
+        const insertedText = next.slice(start, nextEnd);
         const data = MaskedInput.#collect(this.#mask, previous, 0);
         const before = MaskedInput.#placeholders(this.#mask, start);
-        const removed = MaskedInput.#placeholders(this.#mask, previous_end) - before;
-        const inserted = MaskedInput.#collect(this.#mask, inserted_text, start);
+        const removed = MaskedInput.#placeholders(this.#mask, previousEnd) - before;
+        const inserted = MaskedInput.#collect(this.#mask, insertedText, start);
         const list = data.slice(0, before).concat(inserted, data.slice(before + removed));
         const value = MaskedInput.#format(this.#mask, list);
-        const complete_before = this.isComplete();
+        const completeBefore = this.isComplete();
         const changed = this.#apply(value);
         const caret = this.#caretAfter(value, before + inserted.length);
         this.#input.setSelectionRange(caret, caret);
         // Отклонённый символ и заполненная маска иначе не заметны: поле просто ничего не делает.
         // Литералы самой маски («-», «(») за отказ не считаем — их место в шаблоне.
-        const junk = [...inserted_text].filter((symbol) =>
-            symbol !== "" && !this.#accepts(symbol) && !this.#mask.includes(symbol));
+        const junk = [...insertedText].filter(
+            (symbol) => symbol !== "" && !this.#accepts(symbol) && !this.#mask.includes(symbol)
+        );
         if (junk.length > 0) {
-            this.#announce(I18n.t("forms.maskedAllowedOnly", {value: this.#allowedText()}));
-        } else if (!complete_before && this.isComplete()) {
+            this.#announce(I18n.t("forms.maskedAllowedOnly", { value: this.#allowedText() }));
+        } else if (!completeBefore && this.isComplete()) {
             this.#announce(I18n.t("forms.maskedComplete"));
         } else if (this.#status.innerText !== "") {
             this.#announce("");
@@ -520,7 +531,7 @@ class MaskedInput {
     // Backspace снимает ближайший значимый символ слева, Delete — справа (как в тексте).
     // Иначе каретка сразу за литералом удаляла бы символ справа от себя.
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         if (event.key !== "Backspace" && event.key !== "Delete") return;
         const caret = this.#input.selectionStart;
         if (caret === null || caret !== this.#input.selectionEnd) return;
@@ -542,4 +553,4 @@ class MaskedInput {
     };
 }
 
-exports.MaskedInput = MaskedInput
+exports.MaskedInput = MaskedInput;

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

@@ -5,18 +5,18 @@ chui_masked_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);
 }
 
 .masked_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;
@@ -33,9 +33,9 @@ chui_masked_input {
     width: -webkit-fill-available;
     min-height: var(--control_height);
     margin: 0;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
 }

package/framework/components/chui_inputs/chui_mention/mention.js

@@ -1,8 +1,8 @@
-const {setStyles, dropdownPlacement} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {ComboboxKeyboard} = require('../../../modules/chui_a11y/chui_a11y');
-const {Icon} = require('../../chui_icons/icons');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, dropdownPlacement } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { ComboboxKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { Icon } = require("../../chui_icons/icons");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /** Сколько подсказок показывать за раз */
 const DEFAULT_LIMIT = 6;
@@ -51,7 +51,7 @@ class Mention {
     #dropdown = document.createElement("mention_dropdown");
     #hint = document.createElement("mention_hint");
     // Объявление для скринридера: класс общей утилиты скрытия (по нему его узнают стенды)
-    #status = Object.assign(document.createElement("chui_visually_hidden"), {className: "chui_visually_hidden"});
+    #status = Object.assign(document.createElement("chui_visually_hidden"), { className: "chui_visually_hidden" });
     #a11y = undefined;
     #items = [];
     #trigger = "@";
@@ -59,21 +59,34 @@ class Mention {
     #multiline = false;
     #placeholder = "";
     #name = undefined;
-    #label_text = undefined;
-    #hint_text = undefined;
+    #labelText = undefined;
+    #hintText = undefined;
     #disabled = false;
-    #change_listeners = [];
+    #changeListeners = [];
 
-    constructor(options = {
-        name: String(), title: String(), label: String(), hint: String(), placeholder: String(),
-        width: String(), multiline: Boolean(), rows: Number(), items: [], trigger: String(),
-        limit: Number(), disabled: Boolean(), value: String(),
-        required: Boolean(), changeListener: undefined
-    }) {
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            placeholder: String(),
+            width: String(),
+            multiline: Boolean(),
+            rows: Number(),
+            items: [],
+            trigger: String(),
+            limit: Number(),
+            disabled: Boolean(),
+            value: String(),
+            required: Boolean(),
+            changeListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Mention");
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#hint_text = options.hint;
+        this.#labelText = options.label;
+        this.#hintText = options.hint;
         this.#placeholder = options.placeholder === undefined ? "" : options.placeholder;
         this.#multiline = options.multiline === true;
         if (options.trigger !== undefined) this.#trigger = options.trigger;
@@ -100,7 +113,8 @@ class Mention {
         this.#dropdown.setAttribute("aria-label", I18n.t("forms.mentionOptions"));
         this.#hint.id = `${this.#id}_hint`;
         this.#hint.className = "mention_hint";
-        this.#hint.innerText = this.#hint_text === undefined ? I18n.t("forms.mentionHint", {trigger: this.#trigger}) : this.#hint_text;
+        this.#hint.innerText =
+            this.#hintText === undefined ? I18n.t("forms.mentionHint", { trigger: this.#trigger }) : this.#hintText;
         this.#input.setAttribute("aria-describedby", this.#hint.id);
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
@@ -115,7 +129,7 @@ class Mention {
             dropdown: this.#dropdown,
             optionSelector: ".mention_option",
             onEscape: () => this.#setDropdown(false),
-            onOpen: () => this.#syncDropdown()
+            onOpen: () => this.#syncDropdown(),
         });
         this.#input.addEventListener("input", this.#onInput);
         this.#input.addEventListener("keyup", this.#onCaretMove);
@@ -133,15 +147,31 @@ class Mention {
     }
 
     // GET
-    getId() { return this.#id; }
-    getName() { return this.#name; }
-    getTitle() { return this.#label === undefined ? undefined : this.#label.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getName() {
+        return this.#name;
+    }
+    getTitle() {
+        return this.#label === undefined ? undefined : this.#label.innerText;
+    }
     /** Текст поля целиком — упоминания остаются в нём как набранные */
-    getValue() { return this.#input.value; }
-    getItems() { return [...this.#items]; }
-    getTrigger() { return this.#trigger; }
-    isDisabled() { return this.#disabled; }
-    getInput() { return this.#input; }
+    getValue() {
+        return this.#input.value;
+    }
+    getItems() {
+        return [...this.#items];
+    }
+    getTrigger() {
+        return this.#trigger;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    getInput() {
+        return this.#input;
+    }
 
     /**
      * Упоминания по текущему тексту: для каждого пункта ищется `триггер + подпись`.
@@ -154,7 +184,11 @@ class Mention {
             const token = this.#trigger + String(item.title);
             let index = text.indexOf(token);
             while (index !== -1) {
-                found.push({title: item.title, value: item.value === undefined ? item.title : item.value, index: index});
+                found.push({
+                    title: item.title,
+                    value: item.value === undefined ? item.title : item.value,
+                    index: index,
+                });
                 index = text.indexOf(token, index + token.length);
             }
         }
@@ -188,7 +222,8 @@ class Mention {
     }
     setTrigger(trigger = String()) {
         this.#trigger = trigger;
-        if (this.#hint_text === undefined) this.#hint.innerText = I18n.t("forms.mentionHint", {trigger: this.#trigger});
+        if (this.#hintText === undefined)
+            this.#hint.innerText = I18n.t("forms.mentionHint", { trigger: this.#trigger });
         this.#setDropdown(false);
         return this;
     }
@@ -198,7 +233,7 @@ class Mention {
         return this;
     }
     setHint(text = String()) {
-        this.#hint_text = text;
+        this.#hintText = text;
         this.#hint.innerText = text;
         this.#hint.style.display = String(text).trim() === "" ? "none" : "";
         return this;
@@ -215,10 +250,12 @@ class Mention {
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // === ВНУТРЕННЕЕ ===
     #caret() {
@@ -239,17 +276,20 @@ class Mention {
         if (/\s/.test(query)) return undefined;
         const before = index === 0 ? "" : text[index - 1];
         if (before !== "" && BEFORE_TRIGGER.test(before) === false) return undefined;
-        return {start: index, query: query};
+        return { start: index, query: query };
     }
     #syncFieldAria() {
-        const has_title = this.#label !== undefined && this.#label.innerText !== "";
-        if (has_title) {
+        const hasTitle = this.#label !== undefined && this.#label.innerText !== "";
+        if (hasTitle) {
             this.#input.setAttribute("aria-labelledby", this.#label.id);
             this.#input.removeAttribute("aria-label");
             return;
         }
         this.#input.removeAttribute("aria-labelledby");
-        this.#input.setAttribute("aria-label", this.#label_text === undefined ? I18n.t("forms.mentionLabel") : this.#label_text);
+        this.#input.setAttribute(
+            "aria-label",
+            this.#labelText === undefined ? I18n.t("forms.mentionLabel") : this.#labelText
+        );
     }
     /** Пересобрать подсказки по тексту до каретки и открыть список, если есть совпадения */
     #syncDropdown() {
@@ -314,7 +354,7 @@ class Mention {
         this.#input.value = value.slice(0, token.start) + inserted + value.slice(caret);
         this.#setCaret(token.start + inserted.length);
         this.#setDropdown(false);
-        this.#announce(I18n.t("forms.mentionInserted", {value: item.title}));
+        this.#announce(I18n.t("forms.mentionInserted", { value: item.title }));
         this.#emit();
         this.#input.focus();
         return true;
@@ -325,7 +365,7 @@ class Mention {
     }
     #emit() {
         const text = this.getValue();
-        for (const listener of [...this.#change_listeners]) listener(text);
+        for (const listener of [...this.#changeListeners]) listener(text);
     }
 
     // === ОБРАБОТЧИКИ ===
@@ -335,7 +375,14 @@ class Mention {
     };
     /** Каретка переехала (стрелки, щелчок, Home/End) — упоминание под ней могло измениться */
     #onCaretMove = (event) => {
-        if (event.type === "keyup" && event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") return;
+        if (
+            event.type === "keyup" &&
+            event.key !== "ArrowLeft" &&
+            event.key !== "ArrowRight" &&
+            event.key !== "Home" &&
+            event.key !== "End"
+        )
+            return;
         if (document.activeElement !== this.#input) return;
         this.#syncDropdown();
     };
@@ -348,4 +395,4 @@ class Mention {
     };
 }
 
-exports.Mention = Mention
+exports.Mention = Mention;

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

@@ -5,11 +5,11 @@ chui_mention {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: var(--control_width);
     font-size: var(--font_default_size);
     color: var(--text_color);
@@ -18,7 +18,7 @@ chui_mention {
 .mention_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);
@@ -31,7 +31,7 @@ mention_field {
     flex-direction: column;
     height: max-content;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     border: 1px solid var(--border_color);
 }
@@ -41,10 +41,10 @@ mention_field {
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: transparent;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     font-size: var(--font_default_size);
     font-family: inherit;
@@ -74,7 +74,7 @@ mention_dropdown {
     backdrop-filter: var(--global_blur);
     -webkit-backdrop-filter: var(--global_blur);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     box-shadow: var(--box_shadow_main);
     /* Прокрутка списка подсказок; `overflow: overlay` удалён в Chromium 122 */
     overflow: hidden auto;
@@ -87,6 +87,12 @@ mention_dropdown[hidden] {
     display: none;
 }
 
+/* Появление списка подсказок: общий кадр панели, он же проигрывается заново при снятии
+   `hidden`. Прежде список появлялся без движения вовсе */
+mention_dropdown {
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
 .mention_option {
     display: flex;
     flex-direction: row;
@@ -132,7 +138,7 @@ mention_dropdown[hidden] {
 
 .mention_hint {
     display: block;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color_disabled);
     font-size: var(--font_labels_size);
 }