chuijs 4.0.2 → 4.0.4

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

@@ -1,10 +1,10 @@
-const {Animation} = require('../../../modules/chui_animations/animations');
-const {Calendar} = require('../../chui_calendar/calendar');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {makeKeyboardButton} = require('../../../modules/chui_a11y/chui_a11y');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
-const {dropdownPlacement} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Animation } = require("../../../modules/chui_animations/animations");
+const { Calendar } = require("../../chui_calendar/calendar");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { makeKeyboardButton } = require("../../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
+const { dropdownPlacement } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 const MONTHS_IN_YEAR = 12;
 /** Сколько лет на одной странице выбора года */
@@ -13,64 +13,82 @@ 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');
-    #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');
-    #dropdown = document.createElement('date_select_dropdown');
+    #chuiDateInput = document.createElement("chui_date_input");
+    #dateMainBlock = document.createElement("date_main_block");
+    #input = document.createElement("input");
+    #label = document.createElement("label");
+    #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() }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_DateInput');
-        this.#input.type = 'date';
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_DateInput");
+        this.#input.type = "date";
         this.#input.className = "date_input";
         this.#input.id = this.#id;
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация и показ ошибки: правила из options (required/pattern/…). Текст ошибки — в корень
         // поля (под контролом), рамку получает сам контрол: подпись и поле — две строки одной колонки
-        Validate.installField(this, options, this.#chui_date_input, undefined, () => this.#input.value, this.#date_main_block);
-        this.#date_dropdown_open.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--blue_prime_background)").getHTML();
-        this.#date_dropdown_open_disabled.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--text_color_disabled)").getHTML();
+        Validate.installField(
+            this,
+            options,
+            this.#chuiDateInput,
+            undefined,
+            () => this.#input.value,
+            this.#dateMainBlock
+        );
+        this.#dateDropdownOpen.innerHTML = new Icon(
+            Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
+            undefined,
+            "var(--blue_prime_background)"
+        ).getHTML();
+        this.#dateDropdownOpenDisabled.innerHTML = new Icon(
+            Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
+            undefined,
+            "var(--text_color_disabled)"
+        ).getHTML();
         // Курсор выключенного поля даёт его контейнер (`.date_main_block_disabled`),
         // курсор наследуется и на стрелку
         if (options.title !== undefined) {
-            this.#label.classList.add('date_input_label')
+            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.#label.setAttribute("for", this.#id);
+            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 закрывает
         this.#dropdown.addEventListener("keydown", (event) => {
             // Заголовок и список годов — свои кнопки: у них своя обработка Enter/Space
-            if (event.target instanceof Element &&
-                (event.target === this.#date_calendar_title || event.target.closest("date_year") !== null)) return;
+            if (
+                event.target instanceof Element &&
+                (event.target === this.#dateCalendarTitle || event.target.closest("date_year") !== null)
+            )
+                return;
             const days = this.#visibleDays();
-            const current = days.findIndex(day => day === document.activeElement);
+            const current = days.findIndex((day) => day === document.activeElement);
             if (event.key === "Escape") {
                 event.preventDefault();
                 this.#closeDropdown();
@@ -97,59 +115,59 @@ 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) {
-                    this.#input.focus()
+                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');
-        const previous = document.createElement('date_calendar_nav');
+        const header = document.createElement("date_calendar_header");
+        const previous = document.createElement("date_calendar_nav");
         previous.setAttribute("role", "button");
         previous.setAttribute("tabindex", "0");
         previous.setAttribute("aria-label", I18n.t("date.previous"));
         previous.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_LEFT, undefined, "var(--text_color)").getHTML();
-        previous.addEventListener('click', (event) => {
+        previous.addEventListener("click", (event) => {
             event.stopPropagation();
             this.#goBack();
         });
         makeKeyboardButton(previous);
-        const next = document.createElement('date_calendar_nav');
+        const next = document.createElement("date_calendar_nav");
         next.setAttribute("role", "button");
         next.setAttribute("tabindex", "0");
         next.setAttribute("aria-label", I18n.t("date.next"));
         next.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_RIGHT, undefined, "var(--text_color)").getHTML();
-        next.addEventListener('click', (event) => {
+        next.addEventListener("click", (event) => {
             event.stopPropagation();
             this.#goForward();
         });
         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;
     }
@@ -164,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);
@@ -200,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();
     }
 
     // Стрелки: в месяцах — соседний месяц, в списке годов — соседняя страница
@@ -224,55 +242,55 @@ 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);
                                 // Выбор в календаре — такое же изменение значения, как правка в поле:
                                 // без события слушатели (в том числе составные поля вроде
                                 // DateTimeInput и DateRangeInput) о нём не узнали бы
-                                this.#input.dispatchEvent(new Event("change", {bubbles: true}));
+                                this.#input.dispatchEvent(new Event("change", { bubbles: true }));
                                 this.#closeDropdown();
                             });
                         }
                     } 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");
     }
@@ -282,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`;
@@ -295,27 +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"));
+        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) {
-            month.style.display = Number(month.getAttribute('month-index')) === index ? 'block' : 'none';
+        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.#calendar_year;
+        this.#dateCalendarTitle.innerText =
+            new Date(this.#calendarYear, index).toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase() +
+            " " +
+            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--;
@@ -323,36 +343,50 @@ 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);
     }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#label.innerText; }
-    getValue() { return this.#input.value; }
-    setValue(date = String()) { this.#input.value = date; }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#label.innerText;
+    }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(date = String()) {
+        this.#input.value = date;
+    }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#date_main_block.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.#dateMainBlock.classList.add("date_main_block_disabled");
+            this.#input.className = "date_input_disabled";
+            this.#label.className = "date_input_label_disabled";
+            this.#dateDropdownOpen.remove();
+            this.#dateMainBlock.appendChild(this.#dateDropdownOpenDisabled);
         } else {
-            this.#date_main_block.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.#dateMainBlock.classList.remove("date_main_block_disabled");
+            this.#input.className = "date_input";
+            this.#label.className = "date_input_label";
+            this.#dateDropdownOpenDisabled.remove();
+            this.#dateMainBlock.appendChild(this.#dateDropdownOpen);
         }
     }
-    set() { return this.#chui_date_input; }
+    set() {
+        return this.#chuiDateInput;
+    }
 }
 
 const formatLocalDate = (date) =>
-    date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0");
+    date.getFullYear() +
+    "-" +
+    String(date.getMonth() + 1).padStart(2, "0") +
+    "-" +
+    String(date.getDate()).padStart(2, "0");
 
-exports.DateInput = DateInput
+exports.DateInput = DateInput;

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

@@ -4,24 +4,24 @@ 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);
 }
 
 /* Нативные части поля даты: индикатор календаря не нужен (календарь свой, значок — тоже),
    а поля ввода даты собираются в одну строку. Правила только для своего поля: без области
    они прятали бы чужие нативные поля ввода во всём приложении. */
-chui_date_input input[type=date]::-webkit-calendar-picker-indicator {
-    display: none
+chui_date_input input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
 }
 
-chui_date_input input[type=date]::-webkit-datetime-edit-text {
+chui_date_input input[type="date"]::-webkit-datetime-edit-text {
     padding: 0;
-    width: 100%
+    width: 100%;
 }
 
 date_select_dropdown {
@@ -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,9 +135,9 @@ 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
+    text-align: center;
 }
 
 .date_day:hover {
@@ -154,12 +154,13 @@ date_dropdown_open {
     cursor: pointer;
     box-sizing: border-box;
     height: 100%;
-    padding-block: 0 0; padding-inline: 0 10px;
+    padding-block: 0 0;
+    padding-inline: 0 10px;
     margin: 0;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    color: var(--badge_cancel_text)
+    color: var(--badge_cancel_text);
 }
 
 date_main_block {
@@ -169,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;
@@ -194,10 +195,10 @@ 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)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 /* DISABLED STYLES */
@@ -212,9 +213,9 @@ 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
+    font-weight: 500;
 }
 
 .date_input_disabled {
@@ -230,4 +231,4 @@ date_main_block {
     background: transparent;
     border: none;
     font-size: var(--font_default_size);
-}
+}