chuijs 4.0.3 → 4.0.4

package/framework/components/chui_scheduler/scheduler.js

@@ -45,11 +45,11 @@ class Scheduler {
 
     #root = document.createElement("chui_scheduler");
     #title = document.createElement("scheduler_title");
-    #prev_button = document.createElement("button");
-    #next_button = document.createElement("button");
-    #today_button = document.createElement("button");
-    #view_buttons = new Map();
-    #days_head = document.createElement("scheduler_days_head");
+    #prevButton = document.createElement("button");
+    #nextButton = document.createElement("button");
+    #todayButton = document.createElement("button");
+    #viewButtons = new Map();
+    #daysHead = document.createElement("scheduler_days_head");
     #scroll = document.createElement("scheduler_scroll");
     #times = document.createElement("scheduler_times");
     #days = document.createElement("scheduler_days");
@@ -57,15 +57,15 @@ class Scheduler {
     #date = new Date();
     #view = Scheduler.VIEW.WEEK;
     #events = [];
-    #start_hour = 8;
-    #end_hour = 20;
-    #slot_minutes = Scheduler.DEFAULT_SLOT_MINUTES;
-    #hour_height = Scheduler.DEFAULT_HOUR_HEIGHT;
-    #first_day = Scheduler.DEFAULT_FIRST_DAY;
+    #startHour = 8;
+    #endHour = 20;
+    #slotMinutes = Scheduler.DEFAULT_SLOT_MINUTES;
+    #hourHeight = Scheduler.DEFAULT_HOUR_HEIGHT;
+    #firstDay = Scheduler.DEFAULT_FIRST_DAY;
     #label = undefined;
-    #on_event_click = undefined;
-    #on_slot_click = undefined;
-    #on_period_change = undefined;
+    #onEventClick = undefined;
+    #onSlotClick = undefined;
+    #onPeriodChangeCallback = undefined;
 
     constructor(
         options = {
@@ -95,18 +95,18 @@ class Scheduler {
         // вид, которого сетка не рисует
         this.#view = options.view === Scheduler.VIEW.DAY ? Scheduler.VIEW.DAY : Scheduler.VIEW.WEEK;
         this.#events = Array.isArray(options.events) ? [...options.events] : [];
-        this.#start_hour = options.startHour === undefined ? this.#start_hour : options.startHour;
-        this.#end_hour = options.endHour === undefined ? this.#end_hour : options.endHour;
-        this.#slot_minutes = options.slotMinutes === undefined ? this.#slot_minutes : options.slotMinutes;
-        this.#hour_height = options.hourHeight === undefined ? this.#hour_height : options.hourHeight;
-        this.#first_day = options.firstDay === undefined ? this.#first_day : options.firstDay;
-        this.#on_event_click = options.onEventClick;
-        this.#on_slot_click = options.onSlotClick;
-        this.#on_period_change = options.onPeriodChange;
+        this.#startHour = options.startHour === undefined ? this.#startHour : options.startHour;
+        this.#endHour = options.endHour === undefined ? this.#endHour : options.endHour;
+        this.#slotMinutes = options.slotMinutes === undefined ? this.#slotMinutes : options.slotMinutes;
+        this.#hourHeight = options.hourHeight === undefined ? this.#hourHeight : options.hourHeight;
+        this.#firstDay = options.firstDay === undefined ? this.#firstDay : options.firstDay;
+        this.#onEventClick = options.onEventClick;
+        this.#onSlotClick = options.onSlotClick;
+        this.#onPeriodChangeCallback = options.onPeriodChange;
         this.setLabel(optionOr(options.label, I18n.t("scheduler.title")));
         if (options.height !== undefined) this.setHeight(options.height);
         this.#buildHead();
-        this.#root.appendChild(this.#days_head);
+        this.#root.appendChild(this.#daysHead);
         this.#scroll.appendChild(this.#times);
         this.#scroll.appendChild(this.#days);
         this.#root.appendChild(this.#scroll);
@@ -139,15 +139,15 @@ class Scheduler {
     }
 
     getStartHour() {
-        return this.#start_hour;
+        return this.#startHour;
     }
 
     getEndHour() {
-        return this.#end_hour;
+        return this.#endHour;
     }
 
     getSlotMinutes() {
-        return this.#slot_minutes;
+        return this.#slotMinutes;
     }
 
     /** События, попавшие на день (с учётом пересечения полуночи) */
@@ -266,7 +266,7 @@ class Scheduler {
     #startOfPeriod() {
         const day = Scheduler.#startOfDay(this.#date);
         if (this.#view === Scheduler.VIEW.DAY) return day;
-        const offset = (day.getDay() - this.#first_day + 7) % 7;
+        const offset = (day.getDay() - this.#firstDay + 7) % 7;
         day.setDate(day.getDate() - offset);
         return day;
     }
@@ -305,13 +305,13 @@ class Scheduler {
      */
     #layout(date = new Date()) {
         const dayStart = this.#startOfDayMinutes();
-        const dayEnd = this.#end_hour * 60;
+        const dayEnd = this.#endHour * 60;
         const items = [];
         for (const event of this.#events) {
             if (!this.#overlapsDay(event, date)) continue;
             const start = Scheduler.#eventDate(event, "start");
             const end = Scheduler.#eventDate(event, "end");
-            const finished = Number.isNaN(end.getTime()) ? new Date(start.getTime() + this.#slot_minutes * 60000) : end;
+            const finished = Number.isNaN(end.getTime()) ? new Date(start.getTime() + this.#slotMinutes * 60000) : end;
             const sameStartDay = Scheduler.#sameDay(Scheduler.#startOfDay(start), date);
             const sameEndDay = Scheduler.#sameDay(Scheduler.#startOfDay(finished), date);
             let from = sameStartDay ? Scheduler.#minutesOf(start) : 0;
@@ -320,7 +320,7 @@ class Scheduler {
                 from = 0;
                 to = 24 * 60;
             }
-            if (to <= from) to = from + this.#slot_minutes;
+            if (to <= from) to = from + this.#slotMinutes;
             from = Math.max(from, dayStart);
             to = Math.min(to, dayEnd);
             if (to <= from) continue;
@@ -329,7 +329,7 @@ class Scheduler {
         items.sort((left, right) => left.start - right.start || left.end - right.end);
         // Кластеры пересекающихся событий и дорожки внутри них
         let cluster = [];
-        let cluster_end = -1;
+        let clusterEnd = -1;
         const flush = () => {
             if (cluster.length === 0) return;
             const lanes = [];
@@ -345,38 +345,38 @@ class Scheduler {
             }
             for (const item of cluster) item.lanes = lanes.length;
             cluster = [];
-            cluster_end = -1;
+            clusterEnd = -1;
         };
         for (const item of items) {
-            if (cluster.length > 0 && item.start >= cluster_end) flush();
+            if (cluster.length > 0 && item.start >= clusterEnd) flush();
             cluster.push(item);
-            cluster_end = Math.max(cluster_end, item.end);
+            clusterEnd = Math.max(clusterEnd, item.end);
         }
         flush();
         return items;
     }
 
     #startOfDayMinutes() {
-        return this.#start_hour * 60;
+        return this.#startHour * 60;
     }
 
     // === РЕНДЕР ===
     #buildHead() {
         const head = document.createElement("scheduler_head");
-        this.#prev_button.type = "button";
-        this.#next_button.type = "button";
-        this.#today_button.type = "button";
-        this.#prev_button.className = "scheduler_nav";
-        this.#next_button.className = "scheduler_nav";
-        this.#today_button.className = "scheduler_today";
-        this.#prev_button.dataset.action = "prev";
-        this.#next_button.dataset.action = "next";
-        this.#today_button.dataset.action = "today";
-        this.#prev_button.innerText = "‹";
-        this.#next_button.innerText = "›";
-        this.#today_button.innerText = I18n.t("scheduler.today");
-        this.#prev_button.setAttribute("aria-label", I18n.t("scheduler.previousPeriod"));
-        this.#next_button.setAttribute("aria-label", I18n.t("scheduler.nextPeriod"));
+        this.#prevButton.type = "button";
+        this.#nextButton.type = "button";
+        this.#todayButton.type = "button";
+        this.#prevButton.className = "scheduler_nav";
+        this.#nextButton.className = "scheduler_nav";
+        this.#todayButton.className = "scheduler_today";
+        this.#prevButton.dataset.action = "prev";
+        this.#nextButton.dataset.action = "next";
+        this.#todayButton.dataset.action = "today";
+        this.#prevButton.innerText = "‹";
+        this.#nextButton.innerText = "›";
+        this.#todayButton.innerText = I18n.t("scheduler.today");
+        this.#prevButton.setAttribute("aria-label", I18n.t("scheduler.previousPeriod"));
+        this.#nextButton.setAttribute("aria-label", I18n.t("scheduler.nextPeriod"));
         this.#title.setAttribute("aria-live", "polite");
         const views = document.createElement("scheduler_views");
         views.setAttribute("role", "group");
@@ -391,11 +391,11 @@ class Scheduler {
             button.dataset.view = view;
             button.innerText = label;
             views.appendChild(button);
-            this.#view_buttons.set(view, button);
+            this.#viewButtons.set(view, button);
         }
-        head.appendChild(this.#prev_button);
-        head.appendChild(this.#next_button);
-        head.appendChild(this.#today_button);
+        head.appendChild(this.#prevButton);
+        head.appendChild(this.#nextButton);
+        head.appendChild(this.#todayButton);
         head.appendChild(this.#title);
         head.appendChild(views);
         this.#root.appendChild(head);
@@ -405,25 +405,25 @@ class Scheduler {
         const days = this.#dayDates();
         const today = new Date();
         this.#title.innerText = this.#periodTitle(days);
-        for (const [view, button] of this.#view_buttons)
+        for (const [view, button] of this.#viewButtons)
             button.setAttribute("aria-pressed", view === this.#view ? "true" : "false");
-        this.#prev_button.setAttribute(
+        this.#prevButton.setAttribute(
             "aria-label",
             this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.previousDay") : I18n.t("scheduler.previousWeek")
         );
-        this.#next_button.setAttribute(
+        this.#nextButton.setAttribute(
             "aria-label",
             this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.nextDay") : I18n.t("scheduler.nextWeek")
         );
         // Заголовки дней лежат вне области прокрутки и повторяют колонки сетки; ширина
         // вертикальной полосы прокрутки компенсируется, иначе заголовки уехали бы вправо
         const scrollbar = Math.max(0, this.#scroll.offsetWidth - this.#scroll.clientWidth);
-        this.#days_head.style.paddingRight = `${scrollbar}px`;
-        this.#days_head.innerHTML = "";
-        this.#days_head.style.gridTemplateColumns = `56px repeat(${days.length}, minmax(0, 1fr))`;
+        this.#daysHead.style.paddingRight = `${scrollbar}px`;
+        this.#daysHead.innerHTML = "";
+        this.#daysHead.style.gridTemplateColumns = `56px repeat(${days.length}, minmax(0, 1fr))`;
         const corner = document.createElement("scheduler_corner");
         corner.setAttribute("aria-hidden", "true");
-        this.#days_head.appendChild(corner);
+        this.#daysHead.appendChild(corner);
         for (const day of days) {
             const head = document.createElement("scheduler_day_head");
             if (Scheduler.#sameDay(day, today)) head.classList.add("scheduler_today_head");
@@ -433,7 +433,7 @@ class Scheduler {
             number.innerText = String(day.getDate());
             head.appendChild(name);
             head.appendChild(number);
-            this.#days_head.appendChild(head);
+            this.#daysHead.appendChild(head);
         }
         this.#renderTimes();
         this.#renderDays(days, today);
@@ -441,9 +441,9 @@ class Scheduler {
 
     #renderTimes() {
         this.#times.innerHTML = "";
-        for (let hour = this.#start_hour; hour < this.#end_hour; hour++) {
+        for (let hour = this.#startHour; hour < this.#endHour; hour++) {
             const cell = document.createElement("scheduler_hour");
-            cell.style.height = `${this.#hour_height}px`;
+            cell.style.height = `${this.#hourHeight}px`;
             cell.innerText = `${String(hour).padStart(2, "0")}:00`;
             this.#times.appendChild(cell);
         }
@@ -455,10 +455,10 @@ class Scheduler {
         for (const day of days) {
             const column = document.createElement("scheduler_day");
             column.dataset.day = Scheduler.#key(day);
-            column.style.height = `${(this.#end_hour - this.#start_hour) * this.#hour_height}px`;
+            column.style.height = `${(this.#endHour - this.#startHour) * this.#hourHeight}px`;
             if (Scheduler.#sameDay(day, today)) column.classList.add("scheduler_today");
             // Часовые линии рисует фон: узлы на каждый час не нужны
-            column.style.backgroundSize = `100% ${this.#hour_height}px`;
+            column.style.backgroundSize = `100% ${this.#hourHeight}px`;
             for (const item of this.#layout(day)) column.appendChild(this.#createEvent(item, day));
             this.#days.appendChild(column);
         }
@@ -470,8 +470,8 @@ class Scheduler {
 
     #createEvent(item = Object(), day = new Date()) {
         const event = item.event;
-        const top = ((item.start - this.#startOfDayMinutes()) / 60) * this.#hour_height;
-        const height = Math.max(18, ((item.end - item.start) / 60) * this.#hour_height);
+        const top = ((item.start - this.#startOfDayMinutes()) / 60) * this.#hourHeight;
+        const height = Math.max(18, ((item.end - item.start) / 60) * this.#hourHeight);
         const lanes = Math.max(1, item.lanes);
         const width = 100 / lanes;
         const node = document.createElement("button");
@@ -544,19 +544,19 @@ class Scheduler {
         const eventNode = target.closest(".scheduler_event");
         if (eventNode !== null) {
             const found = this.#events[Number(eventNode.dataset.index)];
-            if (this.#on_event_click !== undefined)
-                this.#on_event_click(found === undefined ? undefined : found, eventNode);
+            if (this.#onEventClick !== undefined)
+                this.#onEventClick(found === undefined ? undefined : found, eventNode);
             return;
         }
         const dayNode = target.closest("scheduler_day");
         if (dayNode !== null) {
             const column = dayNode.getBoundingClientRect();
             const offset = Math.max(0, Math.min(event.clientY - column.top, column.height));
-            const raw = this.#startOfDayMinutes() + (offset / this.#hour_height) * 60;
-            const minutes = Math.round(raw / this.#slot_minutes) * this.#slot_minutes;
+            const raw = this.#startOfDayMinutes() + (offset / this.#hourHeight) * 60;
+            const minutes = Math.round(raw / this.#slotMinutes) * this.#slotMinutes;
             const date = this.#dayDates().find((day) => Scheduler.#key(day) === dayNode.dataset.day);
-            if (date !== undefined && this.#on_slot_click !== undefined) {
-                this.#on_slot_click({ date: date, minutes: minutes, time: Scheduler.#timeText(minutes) });
+            if (date !== undefined && this.#onSlotClick !== undefined) {
+                this.#onSlotClick({ date: date, minutes: minutes, time: Scheduler.#timeText(minutes) });
             }
         }
     };
@@ -579,9 +579,9 @@ class Scheduler {
     };
 
     #onPeriodChange() {
-        if (this.#on_period_change === undefined) return;
+        if (this.#onPeriodChangeCallback === undefined) return;
         const range = this.getRange();
-        this.#on_period_change(range.from, range.to);
+        this.#onPeriodChangeCallback(range.from, range.to);
     }
 }
 

package/framework/components/chui_scheduler/styles.css

@@ -4,12 +4,12 @@ chui_scheduler {
     flex-direction: column;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     overflow: hidden;
 }
 
@@ -17,7 +17,7 @@ scheduler_head {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -25,7 +25,7 @@ button.scheduler_nav,
 button.scheduler_today,
 button.scheduler_view {
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -157,7 +157,7 @@ button.scheduler_event {
     overflow: hidden;
     text-align: start;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--blue_prime_background);
     color: var(--text_color_hover);
     font-family: inherit;

package/framework/components/chui_screen_spinner/screen_spinner.js

@@ -0,0 +1,167 @@
+const { Spinner } = require("../chui_spinner/spinner");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { tokenTime } = require("../../modules/chui_animations/motion");
+
+/**
+ * Экран занят: слой поверх всего окна с индикатором загрузки. Пока он открыт, до содержимого
+ * под ним не добраться — ни мышью, ни клавиатурой, ни скринридером.
+ *
+ * От `Spinner` отличается тем, что тот просто рисует индикатор в потоке, а этот занимает экран:
+ * слой встаёт в `body` (в карточке с `backdrop-filter` Chromium собирает такой узел отдельной
+ * поверхностью и рисует её под слоями из `body` — так уже теряли диалог), фокус удерживается
+ * внутри, а фон становится инертным. Роль слоя — `dialog` с именем загрузки, внутри объявляется
+ * `progressbar`; Escape слой не закрывает: это не сообщение, а признак занятости.
+ *
+ * Опции: `id`, `label` (подпись и имя для скринридера, по умолчанию «{loading}» из словаря),
+ * `delay` (мс до появления — против мигания на коротких операциях).
+ *
+ * Методы: `show()`, `hide()`, `isShown()`, `setLabel(text)`, `destroy()`, `set()`.
+ * Статические: `ScreenSpinner.show(options)` (создать и показать), `ScreenSpinner.hide()`,
+ * `ScreenSpinner.current`.
+ *
+ * ```javascript
+ * const busy = new ScreenSpinner({ delay: 200 });
+ * busy.show();
+ * await load();
+ * busy.hide();
+ * ```
+ */
+class ScreenSpinner {
+    // На экране один такой слой: два спиннера наложились бы друг на друга
+    static #current = undefined;
+
+    #root = document.createElement("chui_screen_spinner");
+    #card = document.createElement("screen_spinner_card");
+    #labelNode = document.createElement("screen_spinner_label");
+    #spinner = undefined;
+    #a11y = undefined;
+    #delay = 0;
+    #timer = undefined;
+    #shown = false;
+    #removed = false;
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_ScreenSpinner");
+        if (options.id !== undefined) this.#root.id = options.id;
+        const delay = Number(options.delay);
+        this.#delay = Number.isFinite(delay) && delay > 0 ? delay : 0;
+        this.#spinner = new Spinner();
+        this.#card.append(this.#spinner.set(), this.#labelNode);
+        this.#root.appendChild(this.#card);
+        this.#root.setAttribute("aria-busy", "true");
+        this.setLabel(optionOr(options.label, I18n.t("feedback.loading")));
+        this.#a11y = new OverlayA11y(this.#root, {
+            role: "dialog",
+            label: this.#labelNode.innerText,
+            // Escape здесь ничего не закрывает: занятость — не сообщение, которое можно отклонить
+            onEscape: () => {},
+        });
+    }
+
+    isShown() {
+        return this.#shown;
+    }
+    getLabel() {
+        return this.#labelNode.innerText;
+    }
+
+    setLabel(text = String()) {
+        const value = String(text);
+        this.#labelNode.innerText = value;
+        // Подпись пуста — под ней и места не надо: индикатор говорит сам
+        this.#labelNode.hidden = value.trim() === "";
+        if (this.#a11y !== undefined) this.#a11y.setLabel(value.trim() === "" ? I18n.t("feedback.loading") : value);
+        return this;
+    }
+
+    /**
+     * Показ: слой встаёт в `body` и объявляет себя слоем. Задержка нужна против мигания —
+     * короткая операция успевает закончиться раньше, чем слой появится, и экран не дрожит.
+     */
+    show() {
+        if (this.#shown === true) return this;
+        this.#shown = true;
+        // Слой показывают заново: след уборки прошлого показа снимаем, иначе новый слой
+        // не уберётся по концу кадра (`finish` посчитал бы работу сделанной)
+        this.#removed = false;
+        if (ScreenSpinner.#current !== undefined && ScreenSpinner.#current !== this) ScreenSpinner.#current.hide();
+        ScreenSpinner.#current = this;
+        const reveal = () => {
+            this.#timer = undefined;
+            if (this.#shown === false) return;
+            if (document.body.contains(this.#root) === false) document.body.appendChild(this.#root);
+            new Animation(this.#root).fadeIn();
+            new Animation(this.#card).panelIn();
+            this.#a11y.open();
+            this.#focusIn();
+        };
+        if (this.#delay > 0) this.#timer = setTimeout(reveal, this.#delay);
+        else reveal();
+        return this;
+    }
+
+    /**
+     * Уход: слой гаснет, узел убирается по концу кадра. Слушатель одноразовый (проверка цели) —
+     * иначе он поймал бы любой конец кадра на слое, а срок из токена страхует случай, когда
+     * кадр не проиграется вовсе (слой скрыт вместе с родителем).
+     */
+    hide() {
+        if (this.#shown === false) return this;
+        this.#shown = false;
+        if (this.#timer !== undefined) {
+            clearTimeout(this.#timer);
+            this.#timer = undefined;
+        }
+        if (ScreenSpinner.#current === this) ScreenSpinner.#current = undefined;
+        // Слой ещё не успел появиться (сработала задержка) — убирать нечего
+        if (this.#root.parentElement === null) return this;
+        this.#a11y.close();
+        new Animation(this.#root).fadeOut();
+        new Animation(this.#card).fadeOut();
+        const finish = () => {
+            if (this.#removed === true) return;
+            this.#removed = true;
+            this.#root.removeEventListener("animationend", finish);
+            this.#root.remove();
+        };
+        this.#root.addEventListener("animationend", finish);
+        setTimeout(finish, tokenTime("--motion_fast"));
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    /** Полное удаление: снять слой (вместе с инертным фоном и слушателями) и убрать узел */
+    destroy() {
+        this.hide();
+        this.#removed = true;
+        this.#root.remove();
+    }
+
+    // === СТАТИЧЕСКОЕ ===
+    /** Показать спиннер, не заводя переменную: `ScreenSpinner.show({ label: "Сохраняем" })` */
+    static show(options = {}) {
+        const spinner = new ScreenSpinner(options);
+        spinner.show();
+        return spinner;
+    }
+    static hide() {
+        if (ScreenSpinner.#current !== undefined) ScreenSpinner.#current.hide();
+    }
+    static get current() {
+        return ScreenSpinner.#current;
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /** Фокус — в слой: иначе он остался бы на кнопке под ним, и Tab уходил бы в фон */
+    #focusIn() {
+        this.#root.setAttribute("tabindex", "-1");
+        this.#root.focus({ preventScroll: true });
+    }
+}
+
+exports.ScreenSpinner = ScreenSpinner;

package/framework/components/chui_screen_spinner/styles.css

@@ -0,0 +1,49 @@
+/* Экран занят: слой поверх окна с индикатором загрузки.
+   Занавес держит сам слой (он и есть затемнение), а материал карточки — размытие: у слоя
+   `backdrop-filter` нет, иначе карточка внутри не увидела бы страницу (элемент с фильтром
+   становится собственным «backdrop root»). */
+
+chui_screen_spinner {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Выше модальных слоёв (у диалога 1000, у занавеса 999): занятость перекрывает всё */
+    z-index: 1100;
+    background: var(--modal_scrim);
+    /* Слой принимает на себя мышь и клавиатуру: под ним ничего не нажать */
+    cursor: progress;
+}
+
+chui_screen_spinner:focus-visible {
+    outline: none;
+}
+
+screen_spinner_card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    padding: 18px 22px;
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_md);
+    background: var(--modal_background);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+    box-shadow: var(--box_shadow_modal);
+    color: var(--text_color);
+}
+
+screen_spinner_label {
+    font-size: var(--font_labels_size);
+    color: var(--text_color_disabled);
+    text-align: center;
+}
+
+/* Подписи нет — под неё не остаётся и зазора */
+screen_spinner_label[hidden] {
+    display: none;
+}