chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_date/date.js

@@ -13,24 +13,24 @@ const isDayNumber = (cell) => /^\d+$/.test(String(cell).trim());
 
 class DateInput {
     #id = require("randomstring").generate();
-    #chui_date_input = document.createElement("chui_date_input");
-    #date_main_block = document.createElement("date_main_block");
+    #chuiDateInput = document.createElement("chui_date_input");
+    #dateMainBlock = document.createElement("date_main_block");
     #input = document.createElement("input");
     #label = document.createElement("label");
-    #date_dropdown_open = document.createElement("date_dropdown_open");
-    #date_dropdown_open_disabled = document.createElement("date_dropdown_open");
+    #dateDropdownOpen = document.createElement("date_dropdown_open");
+    #dateDropdownOpenDisabled = document.createElement("date_dropdown_open");
     #dropdown = document.createElement("date_select_dropdown");
     // Слушатель окна храним полем, чтобы можно было снять в destroy()
-    #window_click_event = (event) => {
-        if (!this.#date_main_block.contains(event.target)) this.#closeDropdown();
+    #windowClickEvent = (event) => {
+        if (!this.#dateMainBlock.contains(event.target)) this.#closeDropdown();
     };
-    #dropdown_id = require("randomstring").generate();
-    #date_now = new Date();
-    #date_month_list = document.createElement("date_month_list");
-    #date_year_list = document.createElement("date_year_list");
-    #date_calendar_title = document.createElement("date_calendar_title");
-    #calendar_year = this.#date_now.getFullYear();
-    #calendar_month = this.#date_now.getMonth();
+    #dropdownId = require("randomstring").generate();
+    #dateNow = new Date();
+    #dateMonthList = document.createElement("date_month_list");
+    #dateYearList = document.createElement("date_year_list");
+    #dateCalendarTitle = document.createElement("date_calendar_title");
+    #calendarYear = this.#dateNow.getFullYear();
+    #calendarMonth = this.#dateNow.getMonth();
     // Экран календаря: месяцы (по умолчанию) или выбор года
     #view = "months";
     constructor(options = { name: String(), title: String(), required: Boolean() }) {
@@ -45,17 +45,17 @@ class DateInput {
         Validate.installField(
             this,
             options,
-            this.#chui_date_input,
+            this.#chuiDateInput,
             undefined,
             () => this.#input.value,
-            this.#date_main_block
+            this.#dateMainBlock
         );
-        this.#date_dropdown_open.innerHTML = new Icon(
+        this.#dateDropdownOpen.innerHTML = new Icon(
             Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
             undefined,
             "var(--blue_prime_background)"
         ).getHTML();
-        this.#date_dropdown_open_disabled.innerHTML = new Icon(
+        this.#dateDropdownOpenDisabled.innerHTML = new Icon(
             Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
             undefined,
             "var(--text_color_disabled)"
@@ -66,17 +66,17 @@ class DateInput {
             this.#label.classList.add("date_input_label");
             this.#label.innerText = options.title;
             this.#label.setAttribute("for", this.#id);
-            this.#chui_date_input.appendChild(this.#label);
+            this.#chuiDateInput.appendChild(this.#label);
         }
         // Рамку с кольцом при фокусе рисует общее правило темы (`date_main_block:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
-        this.#dropdown.setAttribute("id", this.#dropdown_id);
+        this.#dropdown.setAttribute("id", this.#dropdownId);
         // Доступность: поле — combobox, календарь — диалог с состоянием раскрытия
         this.#input.setAttribute("role", "combobox");
         this.#input.setAttribute("aria-haspopup", "dialog");
         this.#input.setAttribute("aria-expanded", "false");
-        this.#input.setAttribute("aria-controls", this.#dropdown_id);
+        this.#input.setAttribute("aria-controls", this.#dropdownId);
         this.#dropdown.setAttribute("role", "dialog");
         this.#dropdown.setAttribute("aria-label", I18n.t("date.calendar"));
         // Клавиатура календаря: стрелки по дням, Enter выбирает, Escape закрывает
@@ -84,7 +84,7 @@ class DateInput {
             // Заголовок и список годов — свои кнопки: у них своя обработка Enter/Space
             if (
                 event.target instanceof Element &&
-                (event.target === this.#date_calendar_title || event.target.closest("date_year") !== null)
+                (event.target === this.#dateCalendarTitle || event.target.closest("date_year") !== null)
             )
                 return;
             const days = this.#visibleDays();
@@ -115,25 +115,25 @@ class DateInput {
             if (next >= 0 && next < days.length) days[next].focus();
         });
         this.#dropdown.appendChild(this.#buildCalendarHeader());
-        this.#dropdown.appendChild(this.#date_month_list);
-        this.#dropdown.appendChild(this.#date_year_list);
-        this.#date_year_list.hidden = true;
-        this.#buildYear(this.#calendar_year);
-        this.#showMonth(this.#calendar_month);
+        this.#dropdown.appendChild(this.#dateMonthList);
+        this.#dropdown.appendChild(this.#dateYearList);
+        this.#dateYearList.hidden = true;
+        this.#buildYear(this.#calendarYear);
+        this.#showMonth(this.#calendarMonth);
         //LISTENERS
-        this.#chui_date_input.addEventListener("click", (event) => {
+        this.#chuiDateInput.addEventListener("click", (event) => {
             if (!this.#input.disabled) {
-                if (event.target.parentNode === this.#date_main_block) {
+                if (event.target.parentNode === this.#dateMainBlock) {
                     this.#input.focus();
                     this.#openDropdown();
                 }
             }
         });
-        window.addEventListener("click", this.#window_click_event);
-        this.#date_main_block.appendChild(this.#input);
-        this.#date_main_block.appendChild(this.#date_dropdown_open);
-        this.#date_main_block.appendChild(this.#dropdown);
-        this.#chui_date_input.appendChild(this.#date_main_block);
+        window.addEventListener("click", this.#windowClickEvent);
+        this.#dateMainBlock.appendChild(this.#input);
+        this.#dateMainBlock.appendChild(this.#dateDropdownOpen);
+        this.#dateMainBlock.appendChild(this.#dropdown);
+        this.#chuiDateInput.appendChild(this.#dateMainBlock);
     }
     #buildCalendarHeader() {
         const header = document.createElement("date_calendar_header");
@@ -158,16 +158,16 @@ class DateInput {
         });
         makeKeyboardButton(next);
         // Заголовок — кнопка: по нажатию открывается выбор года (см. #showYears)
-        this.#date_calendar_title.id = this.#id + "_title";
-        this.#date_calendar_title.setAttribute("title", I18n.t("date.selectYear"));
-        this.#date_calendar_title.setAttribute("aria-label", I18n.t("date.selectYear"));
-        this.#date_calendar_title.addEventListener("click", (event) => {
+        this.#dateCalendarTitle.id = this.#id + "_title";
+        this.#dateCalendarTitle.setAttribute("title", I18n.t("date.selectYear"));
+        this.#dateCalendarTitle.setAttribute("aria-label", I18n.t("date.selectYear"));
+        this.#dateCalendarTitle.addEventListener("click", (event) => {
             event.stopPropagation();
             this.#toggleView();
         });
-        makeKeyboardButton(this.#date_calendar_title);
+        makeKeyboardButton(this.#dateCalendarTitle);
         header.appendChild(previous);
-        header.appendChild(this.#date_calendar_title);
+        header.appendChild(this.#dateCalendarTitle);
         header.appendChild(next);
         return header;
     }
@@ -182,35 +182,35 @@ class DateInput {
     #showYears() {
         this.#view = "years";
         this.#buildYears();
-        this.#date_month_list.hidden = true;
-        this.#date_year_list.hidden = false;
-        const current = this.#yearButton(this.#calendar_year);
+        this.#dateMonthList.hidden = true;
+        this.#dateYearList.hidden = false;
+        const current = this.#yearButton(this.#calendarYear);
         if (current !== null) current.focus();
     }
 
     #showMonths() {
         this.#view = "months";
-        this.#date_year_list.hidden = true;
-        this.#date_month_list.hidden = false;
-        this.#showMonth(this.#calendar_month);
+        this.#dateYearList.hidden = true;
+        this.#dateMonthList.hidden = false;
+        this.#showMonth(this.#calendarMonth);
     }
 
     #yearPageStart() {
-        return Math.floor(this.#calendar_year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+        return Math.floor(this.#calendarYear / YEARS_PER_PAGE) * YEARS_PER_PAGE;
     }
 
     #yearButton(year) {
-        return [...this.#date_year_list.children].find((item) => item.innerText === String(year)) || null;
+        return [...this.#dateYearList.children].find((item) => item.innerText === String(year)) || null;
     }
 
     #buildYears() {
         const start = this.#yearPageStart();
-        this.#date_year_list.innerHTML = "";
+        this.#dateYearList.innerHTML = "";
         for (let index = 0; index < YEARS_PER_PAGE; index++) {
             const year = start + index;
             const item = document.createElement("date_year");
             item.innerText = String(year);
-            if (year === this.#calendar_year) item.classList.add("date_year_current");
+            if (year === this.#calendarYear) item.classList.add("date_year_current");
             item.addEventListener("click", (event) => {
                 event.stopPropagation();
                 this.#selectYear(year);
@@ -218,16 +218,16 @@ class DateInput {
             makeKeyboardButton(item);
             // Годы доступны с клавиатуры, но не растягивают общий порядок обхода
             item.setAttribute("tabindex", "-1");
-            this.#date_year_list.appendChild(item);
+            this.#dateYearList.appendChild(item);
         }
-        this.#date_calendar_title.innerText = `${start}—${start + YEARS_PER_PAGE - 1}`;
+        this.#dateCalendarTitle.innerText = `${start}—${start + YEARS_PER_PAGE - 1}`;
     }
 
     #selectYear(year) {
-        this.#calendar_year = year;
+        this.#calendarYear = year;
         this.#buildYear(year);
         this.#showMonths();
-        this.#date_calendar_title.focus();
+        this.#dateCalendarTitle.focus();
     }
 
     // Стрелки: в месяцах — соседний месяц, в списке годов — соседняя страница
@@ -242,31 +242,31 @@ class DateInput {
     }
 
     #goToYearPage(delta) {
-        this.#calendar_year += delta * YEARS_PER_PAGE;
+        this.#calendarYear += delta * YEARS_PER_PAGE;
         // Календарь перестраиваем сразу: выбранный год и список остаются согласованными
-        this.#buildYear(this.#calendar_year);
+        this.#buildYear(this.#calendarYear);
         this.#buildYears();
     }
     #buildYear(year) {
-        this.#date_month_list.innerHTML = "";
+        this.#dateMonthList.innerHTML = "";
         for (let i = 0; i < MONTHS_IN_YEAR; i++) {
             const cal = new Calendar(year, i + 1);
-            const date_month_main = document.createElement("date_month_main");
-            date_month_main.setAttribute("month-name", cal.getMonthName());
-            date_month_main.setAttribute("month-index", String(cal.getMonth()));
-            date_month_main.style.width = "fit-content";
-            for (let row of cal.getCalendar()) {
-                const date_week = document.createElement("date_week");
+            const dateMonthMain = document.createElement("date_month_main");
+            dateMonthMain.setAttribute("month-name", cal.getMonthName());
+            dateMonthMain.setAttribute("month-index", String(cal.getMonth()));
+            dateMonthMain.style.width = "fit-content";
+            for (const row of cal.getCalendar()) {
+                const dateWeek = document.createElement("date_week");
                 let index = 0;
-                for (let cell of row) {
-                    const date_day = document.createElement("date_day");
+                for (const cell of row) {
+                    const dateDay = document.createElement("date_day");
                     if (cell !== undefined) {
-                        date_day.innerText = cell;
+                        dateDay.innerText = cell;
                         if (isDayNumber(cell)) {
-                            date_day.classList = "date_day";
-                            date_day.setAttribute("tabindex", "-1");
-                            date_day.setAttribute("role", "button");
-                            date_day.addEventListener("click", () => {
+                            dateDay.classList = "date_day";
+                            dateDay.setAttribute("tabindex", "-1");
+                            dateDay.setAttribute("role", "button");
+                            dateDay.addEventListener("click", () => {
                                 const selected = new Date(cal.getYear(), cal.getMonth(), Number(cell));
                                 this.#input.value = formatLocalDate(selected);
                                 // Выбор в календаре — такое же изменение значения, как правка в поле:
@@ -279,18 +279,18 @@ class DateInput {
                     } else {
                         index++;
                     }
-                    date_week.appendChild(date_day);
+                    dateWeek.appendChild(dateDay);
                 }
                 if (index !== 7) {
-                    date_month_main.appendChild(date_week);
+                    dateMonthMain.appendChild(dateWeek);
                 }
             }
-            this.#date_month_list.appendChild(date_month_main);
+            this.#dateMonthList.appendChild(dateMonthMain);
         }
     }
     // Открытие дропдауна: показ, направление и высота по свободному месту рядом с полем
     #openDropdown() {
-        new Animation(this.#dropdown).fadeIn();
+        new Animation(this.#dropdown).panelIn();
         this.#placeDropdown();
         this.#input.setAttribute("aria-expanded", "true");
     }
@@ -300,7 +300,7 @@ class DateInput {
      * уходит в прокрутку самого календаря.
      */
     #placeDropdown() {
-        const placement = dropdownPlacement(this.#dropdown, this.#date_main_block);
+        const placement = dropdownPlacement(this.#dropdown, this.#dateMainBlock);
         this.#dropdown.style.top = placement.up ? "auto" : "-2px";
         this.#dropdown.style.bottom = placement.up ? "-2px" : "auto";
         if (placement.maxHeight > 0) this.#dropdown.style.maxHeight = `${placement.maxHeight}px`;
@@ -313,31 +313,29 @@ class DateInput {
     }
     /** Полное удаление: снять слушатели окна */
     destroy() {
-        window.removeEventListener("click", this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
         this.#closeDropdown();
     }
     // Дни текущего видимого месяца (по ним ходят стрелки)
     #visibleDays() {
-        const month = this.#date_month_list.querySelector(
-            'date_month_main[month-index="' + this.#calendar_month + '"]'
-        );
+        const month = this.#dateMonthList.querySelector('date_month_main[month-index="' + this.#calendarMonth + '"]');
         if (month === null) return [];
         return [...month.querySelectorAll("date_day")].filter((day) => day.classList.contains("date_day"));
     }
     #showMonth(index) {
-        this.#calendar_month = index;
-        const months = this.#date_month_list.querySelectorAll("date_month_main");
-        for (let month of months) {
+        this.#calendarMonth = index;
+        const months = this.#dateMonthList.querySelectorAll("date_month_main");
+        for (const month of months) {
             month.style.display = Number(month.getAttribute("month-index")) === index ? "block" : "none";
         }
-        this.#date_calendar_title.innerText =
-            new Date(this.#calendar_year, index).toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase() +
+        this.#dateCalendarTitle.innerText =
+            new Date(this.#calendarYear, index).toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase() +
             " " +
-            this.#calendar_year;
+            this.#calendarYear;
     }
     #goToMonth(delta) {
-        let month = this.#calendar_month + delta;
-        let year = this.#calendar_year;
+        let month = this.#calendarMonth + delta;
+        let year = this.#calendarYear;
         if (month < 0) {
             month = MONTHS_IN_YEAR - 1;
             year--;
@@ -345,8 +343,8 @@ class DateInput {
             month = 0;
             year++;
         }
-        if (year !== this.#calendar_year) {
-            this.#calendar_year = year;
+        if (year !== this.#calendarYear) {
+            this.#calendarYear = year;
             this.#buildYear(year);
         }
         this.#showMonth(month);
@@ -366,21 +364,21 @@ class DateInput {
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#date_main_block.classList.add("date_main_block_disabled");
+            this.#dateMainBlock.classList.add("date_main_block_disabled");
             this.#input.className = "date_input_disabled";
             this.#label.className = "date_input_label_disabled";
-            this.#date_dropdown_open.remove();
-            this.#date_main_block.appendChild(this.#date_dropdown_open_disabled);
+            this.#dateDropdownOpen.remove();
+            this.#dateMainBlock.appendChild(this.#dateDropdownOpenDisabled);
         } else {
-            this.#date_main_block.classList.remove("date_main_block_disabled");
+            this.#dateMainBlock.classList.remove("date_main_block_disabled");
             this.#input.className = "date_input";
             this.#label.className = "date_input_label";
-            this.#date_dropdown_open_disabled.remove();
-            this.#date_main_block.appendChild(this.#date_dropdown_open);
+            this.#dateDropdownOpenDisabled.remove();
+            this.#dateMainBlock.appendChild(this.#dateDropdownOpen);
         }
     }
     set() {
-        return this.#chui_date_input;
+        return this.#chuiDateInput;
     }
 }
 

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

@@ -4,12 +4,12 @@ chui_date_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);
 }
 
 /* Нативные части поля даты: индикатор календаря не нужен (календарь свой, значок — тоже),
@@ -33,7 +33,7 @@ date_select_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);
     position: absolute;
     top: -2px;
     inset-inline-start: -2px;
@@ -111,7 +111,7 @@ date_year {
     cursor: pointer;
     text-align: center;
     padding: 7px 4px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     user-select: none;
 }
@@ -135,7 +135,7 @@ date_day {
     cursor: pointer;
     display: block;
     width: 20px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: var(--control_padding);
     text-align: center;
 }
@@ -170,7 +170,7 @@ date_main_block {
     box-sizing: border-box;
     width: max-content;
     height: var(--control_height);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     font-size: var(--font_default_size);
     color: var(--text_color);
     position: relative;
@@ -195,7 +195,7 @@ date_main_block {
 .date_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);
@@ -213,7 +213,7 @@ date_main_block {
     color: var(--text_color_disabled);
     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;
 }

package/framework/components/chui_inputs/chui_date_range/date_range.js

@@ -47,12 +47,12 @@ class DateRangeInput {
     #end = undefined;
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
-    #ordering_message = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #orderingMessage = undefined;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -73,13 +73,13 @@ class DateRangeInput {
         DateRangeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_date_range_input_${DateRangeInput.#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;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         if (options.messages !== undefined && options.messages.validate !== undefined)
-            this.#ordering_message = String(options.messages.validate);
+            this.#orderingMessage = String(options.messages.validate);
         // Общий текст берётся из словаря: своё сообщение поля важнее перевода
-        if (this.#ordering_message === undefined) this.#ordering_message = I18n.t("dateRange.wrongOrder");
+        if (this.#orderingMessage === undefined) this.#orderingMessage = I18n.t("dateRange.wrongOrder");
         this.#root.id = this.#id;
         this.#label.className = "date_range_label";
         this.#row.className = "date_range_row";
@@ -121,13 +121,13 @@ class DateRangeInput {
         delete rules.min;
         delete rules.max;
         if (rules.pattern === undefined) rules.pattern = RANGE_PATTERN;
-        const own_validate = options.validate;
+        const ownValidate = options.validate;
         rules.validate = (value) => {
-            const custom = own_validate === undefined ? undefined : own_validate(value);
+            const custom = ownValidate === undefined ? undefined : ownValidate(value);
             if (custom !== undefined && custom !== null && custom !== true) return custom;
             const [start, end] = String(value).split("..");
             if (start === undefined || end === undefined || start === "" || end === "") return undefined;
-            if (end < start) return this.#ordering_message;
+            if (end < start) return this.#orderingMessage;
             return undefined;
         };
         Validate.installField(this, rules, this.#root, undefined, () => this.#rawValue(), this.#row);
@@ -145,12 +145,12 @@ class DateRangeInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Период: строки «ГГГГ-ММ-ДД», пустая строка — дата не выбрана */
@@ -195,7 +195,7 @@ class DateRangeInput {
 
     /** Подпись над парой полей; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -208,7 +208,7 @@ class DateRangeInput {
 
     /** Доступное имя группы; `undefined` убирает его */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         if (text === undefined) this.#row.removeAttribute("aria-label");
         else this.#row.setAttribute("aria-label", String(text));
         return this;
@@ -296,13 +296,13 @@ class DateRangeInput {
      * так что перевёрнутый период не пройдёт проверку и без нативной границы.
      */
     #syncLimits() {
-        const start_input = this.#start.set().querySelector("input.date_input");
-        const end_input = this.#end.set().querySelector("input.date_input");
-        if (start_input === null || end_input === null) return;
-        start_input.removeAttribute("max");
+        const startInput = this.#start.set().querySelector("input.date_input");
+        const endInput = this.#end.set().querySelector("input.date_input");
+        if (startInput === null || endInput === null) return;
+        startInput.removeAttribute("max");
         const value = this.getValue();
-        if (value.start === "") end_input.removeAttribute("min");
-        else end_input.min = value.start;
+        if (value.start === "") endInput.removeAttribute("min");
+        else endInput.min = value.start;
     }
 
     #changed() {
@@ -310,7 +310,7 @@ class DateRangeInput {
         this.#status.innerText = this.getValueText();
         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);
     }
 
     static #parseDate(value = undefined) {

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

@@ -5,18 +5,18 @@ chui_date_range_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);
 }
 
 .date_range_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;