chuijs 4.0.2 → 4.0.4

package/framework/components/chui_tooltip/tooltip.js

@@ -1,4 +1,4 @@
-const {setStyles, markdownToHtml, htmlToMarkdown, optionOr} = require('../../modules/chui_functions');
+const { setStyles, markdownToHtml, htmlToMarkdown, optionOr } = require("../../modules/chui_functions");
 
 /**
  * Всплывающая подсказка (тултип) к любому элементу.
@@ -24,7 +24,7 @@ class Tooltip {
         TOP: "top",
         BOTTOM: "bottom",
         LEFT: "left",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     /** Зазор между целью и подсказкой, px */
     static GAP = 8;
@@ -45,18 +45,20 @@ class Tooltip {
     // destroy() сделан окончательным: после него инстанс не показывает подсказку и не вешает описания
     #destroyed = false;
 
-    constructor(options = {
-        id: String(),
-        text: String(),
-        markdownText: String(),
-        placement: String(),
-        delay: Number()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            markdownText: String(),
+            placement: String(),
+            delay: Number(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Tooltip");
         // Пустая заготовка опции равносильна отсутствующей
         const text = optionOr(options.text, undefined);
-        const markdown_text = optionOr(options.markdownText, undefined);
-        if (text !== undefined && markdown_text !== undefined) {
+        const markdownText = optionOr(options.markdownText, undefined);
+        if (text !== undefined && markdownText !== undefined) {
             throw new Error("Должна быть установлена одна опция text или markdownText");
         }
         Tooltip.#counter += 1;
@@ -68,7 +70,7 @@ class Tooltip {
         this.#tooltip.id = this.#id;
         this.#tooltip.setAttribute("role", "tooltip");
         if (text !== undefined) this.#tooltip.innerText = text;
-        if (markdown_text !== undefined) this.#tooltip.innerHTML = markdownToHtml(markdown_text);
+        if (markdownText !== undefined) this.#tooltip.innerHTML = markdownToHtml(markdownText);
         // Элемент живёт в body: координаты считаются в системе окна (position: fixed),
         // а внутри карточек с backdrop-filter/filter предок стал бы системой отсчёта.
         document.body.appendChild(this.#tooltip);
@@ -119,11 +121,15 @@ class Tooltip {
         if (this.#destroyed) return this;
         const element = Tooltip.#resolve(target);
         if (element === undefined || element === null) return this;
-        if (this.#targets.some(entry => entry.element === element)) return this;
+        if (this.#targets.some((entry) => entry.element === element)) return this;
         // Описание вешается на фокусируемый узел: у обёртки-компонента (Button → chui_button)
         // свой aria-describedby скринридеру не достаётся — читают кнопку, а не обёртку
         const described = Tooltip.#describedTarget(element);
-        const entry = {element: element, described: described, describedBy: described.getAttribute("aria-describedby")};
+        const entry = {
+            element: element,
+            described: described,
+            describedBy: described.getAttribute("aria-describedby"),
+        };
         entry.onMouseEnter = () => this.#scheduleShow(element);
         entry.onMouseLeave = (event) => {
             // Переход внутрь цели (к её детям) подсказку не закрывает
@@ -153,7 +159,7 @@ class Tooltip {
 
     detach(target) {
         const element = Tooltip.#resolve(target);
-        const index = this.#targets.findIndex(entry => entry.element === element);
+        const index = this.#targets.findIndex((entry) => entry.element === element);
         if (index === -1) return this;
         const entry = this.#targets[index];
         element.removeEventListener("mouseenter", entry.onMouseEnter);
@@ -170,9 +176,12 @@ class Tooltip {
     // ПОКАЗ / СКРЫТИЕ
     show(target = undefined) {
         if (this.#destroyed || !document.body.contains(this.#tooltip)) return;
-        const element = target === undefined
-            ? (this.#current !== undefined ? this.#current : Tooltip.#resolve((this.#targets[0] || {}).element))
-            : Tooltip.#resolve(target);
+        const element =
+            target === undefined
+                ? this.#current !== undefined
+                    ? this.#current
+                    : Tooltip.#resolve((this.#targets[0] || {}).element)
+                : Tooltip.#resolve(target);
         if (element === undefined || element === null || !document.body.contains(element)) return;
         this.#clearTimer();
         this.#current = element;
@@ -224,7 +233,7 @@ class Tooltip {
         }
         const ids = String(entry.describedBy === null ? "" : entry.describedBy)
             .split(/\s+/)
-            .filter(id => id !== "");
+            .filter((id) => id !== "");
         if (!ids.includes(this.#id)) ids.push(this.#id);
         entry.described.setAttribute("aria-describedby", ids.join(" "));
     }
@@ -265,9 +274,12 @@ class Tooltip {
         let placement = this.#placement;
         // Флип на противоположную сторону, если по выбранной подсказка не помещается
         if (placement === Tooltip.PLACEMENT.TOP && rect.top - height - gap < edge) placement = Tooltip.PLACEMENT.BOTTOM;
-        else if (placement === Tooltip.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge) placement = Tooltip.PLACEMENT.TOP;
-        else if (placement === Tooltip.PLACEMENT.LEFT && rect.left - width - gap < edge) placement = Tooltip.PLACEMENT.RIGHT;
-        else if (placement === Tooltip.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge) placement = Tooltip.PLACEMENT.LEFT;
+        else if (placement === Tooltip.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge)
+            placement = Tooltip.PLACEMENT.TOP;
+        else if (placement === Tooltip.PLACEMENT.LEFT && rect.left - width - gap < edge)
+            placement = Tooltip.PLACEMENT.RIGHT;
+        else if (placement === Tooltip.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge)
+            placement = Tooltip.PLACEMENT.LEFT;
 
         let left, top;
         if (placement === Tooltip.PLACEMENT.LEFT || placement === Tooltip.PLACEMENT.RIGHT) {
@@ -303,10 +315,11 @@ class Tooltip {
     #scheduleShow(element) {
         if (!document.body.contains(element)) return;
         this.#clearTimer();
-        if (this.#delay > 0) this.#timer = setTimeout(() => {
-            this.#timer = undefined;
-            this.show(element);
-        }, this.#delay);
+        if (this.#delay > 0)
+            this.#timer = setTimeout(() => {
+                this.#timer = undefined;
+                this.show(element);
+            }, this.#delay);
         else this.show(element);
     }
 
@@ -317,4 +330,4 @@ class Tooltip {
     }
 }
 
-exports.Tooltip = Tooltip
+exports.Tooltip = Tooltip;

package/framework/components/chui_tour/styles.css

@@ -16,11 +16,16 @@ chui_tour {
    Тень обрезается слоем, поэтому не вылезает за окно. */
 tour_highlight {
     position: absolute;
-    border-radius: var(--border_radius);
-    box-shadow: 0 0 0 1px var(--blue_prime_background), 0 0 0 9999px var(--modal_scrim);
+    border-radius: var(--radius_sm);
+    box-shadow:
+        0 0 0 1px var(--blue_prime_background),
+        0 0 0 9999px var(--modal_scrim);
     pointer-events: none;
-    transition: left var(--transition_time) ease, top var(--transition_time) ease,
-        width var(--transition_time) ease, height var(--transition_time) ease;
+    transition:
+        left var(--motion_base) var(--motion_ease),
+        top var(--motion_base) var(--motion_ease),
+        width var(--motion_base) var(--motion_ease),
+        height var(--motion_base) var(--motion_ease);
 }
 
 /* Без затемнения остаётся только рамка подсветки */
@@ -82,7 +87,7 @@ chui_tour tour_counter {
     height: var(--toolbar_control_size);
     margin: 0;
     padding: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--button_background);
     border: 1px solid var(--button_border_color);
     color: var(--text_color);
@@ -115,8 +120,8 @@ chui_tour tour_counter {
 .tour_next:hover {
     /* Главное действие остаётся акцентным и под курсором: фон лишь чуть
        разжижается, текст остаётся белым — иначе тёмное по синему */
-    background: var(--blue_prime_background_trans);
-    border-color: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
+    border-color: var(--blue_prime_background_tint_strong);
     color: var(--text_color_hover);
 }
 

package/framework/components/chui_tour/tour.js

@@ -1,8 +1,8 @@
-const { setStyles, markdownToHtml, optionOr } = require('../../modules/chui_functions');
-const { OverlayA11y } = require('../../modules/chui_a11y/chui_a11y');
-const { Popover } = require('../chui_popover/popover');
-const { Icon, Icons } = require('../chui_icons/icons');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { Popover } = require("../chui_popover/popover");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Пошаговое знакомство с интерфейсом: затемнённая подложка с «окном» вокруг цели
@@ -44,7 +44,7 @@ class Tour {
         TOP: "top",
         BOTTOM: "bottom",
         LEFT: "left",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     /** Зазор вокруг подсвеченной цели, px */
     static PADDING = 6;
@@ -55,46 +55,55 @@ class Tour {
         skip: Icons.AUDIO_VIDEO.SKIP_NEXT,
         prev: Icons.NAVIGATION.ARROW_BACK,
         next: Icons.NAVIGATION.ARROW_FORWARD,
-        finish: Icons.ACTIONS.DONE
+        finish: Icons.ACTIONS.DONE,
     };
 
     #id = require("randomstring").generate();
     #layer = document.createElement("chui_tour");
     #highlight = document.createElement("tour_highlight");
     // Объявление для скринридера: узел носит класс общей утилиты скрытия (по нему его узнают стенды)
-    #status = Object.assign(document.createElement("chui_visually_hidden"), {className: "chui_visually_hidden"});
+    #status = Object.assign(document.createElement("chui_visually_hidden"), { className: "chui_visually_hidden" });
     #popover = undefined;
     #head = document.createElement("tour_head");
     #title = document.createElement("tour_title");
-    #close_button = document.createElement("button");
+    #closeButton = document.createElement("button");
     #text = document.createElement("tour_text");
     #footer = document.createElement("tour_footer");
     #counter = document.createElement("tour_counter");
-    #skip_button = document.createElement("button");
-    #prev_button = document.createElement("button");
-    #next_button = document.createElement("button");
+    #skipButton = document.createElement("button");
+    #prevButton = document.createElement("button");
+    #nextButton = document.createElement("button");
     /** Значок кнопки «Далее»: на последнем шаге меняется на галочку «Готово» */
-    #next_icon = undefined;
+    #nextIcon = undefined;
     #steps = [];
     #active = [];
     #index = 0;
     #mask = true;
     #closable = true;
     #keyboard = true;
-    #scroll_into_view = true;
+    #scrollIntoViewEnabled = true;
     #label = undefined;
-    #is_open = false;
+    #isOpen = false;
     #a11y = undefined;
-    #on_finish = undefined;
-    #on_close = undefined;
-    #on_change = undefined;
+    #onFinish = undefined;
+    #onClose = undefined;
+    #onChange = undefined;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(), steps: [], mask: Boolean(), closable: Boolean(), keyboard: Boolean(),
-        scrollIntoView: Boolean(), label: String(),
-        onFinish: undefined, onClose: undefined, onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            steps: [],
+            mask: Boolean(),
+            closable: Boolean(),
+            keyboard: Boolean(),
+            scrollIntoView: Boolean(),
+            label: String(),
+            onFinish: undefined,
+            onClose: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Tour");
         this.#steps = Array.isArray(options.steps) ? options.steps : [];
         // Заготовка опции (`String()`) равносильна отсутствующей: иначе слой без аргументов
@@ -104,11 +113,11 @@ class Tour {
         if (options.mask !== undefined) this.#mask = options.mask !== false;
         if (options.closable !== undefined) this.#closable = options.closable !== false;
         if (options.keyboard !== undefined) this.#keyboard = options.keyboard !== false;
-        if (options.scrollIntoView !== undefined) this.#scroll_into_view = options.scrollIntoView !== false;
+        if (options.scrollIntoView !== undefined) this.#scrollIntoViewEnabled = options.scrollIntoView !== false;
         this.#label = options.label;
-        this.#on_finish = options.onFinish;
-        this.#on_close = options.onClose;
-        this.#on_change = options.onChange;
+        this.#onFinish = options.onFinish;
+        this.#onClose = options.onClose;
+        this.#onChange = options.onChange;
 
         this.#layer.id = this.#id;
         this.#layer.dataset.mask = this.#mask ? "true" : "false";
@@ -117,32 +126,32 @@ class Tour {
         this.#title.id = `${this.#id}_title`;
         this.#text.id = `${this.#id}_text`;
         // Кнопки создаются один раз: шаги только меняют их значки, имена и видимость
-        this.#close_button.type = "button";
-        this.#close_button.className = "tour_button tour_close";
-        this.#close_button.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "18px").set());
-        this.#skip_button.type = "button";
-        this.#skip_button.className = "tour_button tour_skip";
-        this.#skip_button.appendChild(new Icon(Tour.#ICONS.skip, "18px").set());
-        this.#prev_button.type = "button";
-        this.#prev_button.className = "tour_button tour_prev";
-        this.#prev_button.appendChild(new Icon(Tour.#ICONS.prev, "18px").set());
-        this.#next_button.type = "button";
-        this.#next_button.className = "tour_button tour_next";
-        this.#next_icon = new Icon(Tour.#ICONS.next, "18px");
-        this.#next_button.appendChild(this.#next_icon.set());
-        this.#nameButton(this.#skip_button, "feedback.tourSkip");
-        this.#nameButton(this.#prev_button, "feedback.tourPrev");
-        this.#nameButton(this.#next_button, "feedback.tourNext");
-        this.#close_button.addEventListener("click", this.#onCloseClick);
-        this.#skip_button.addEventListener("click", this.#onCloseClick);
-        this.#prev_button.addEventListener("click", this.#onPrevClick);
-        this.#next_button.addEventListener("click", this.#onNextClick);
+        this.#closeButton.type = "button";
+        this.#closeButton.className = "tour_button tour_close";
+        this.#closeButton.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "18px").set());
+        this.#skipButton.type = "button";
+        this.#skipButton.className = "tour_button tour_skip";
+        this.#skipButton.appendChild(new Icon(Tour.#ICONS.skip, "18px").set());
+        this.#prevButton.type = "button";
+        this.#prevButton.className = "tour_button tour_prev";
+        this.#prevButton.appendChild(new Icon(Tour.#ICONS.prev, "18px").set());
+        this.#nextButton.type = "button";
+        this.#nextButton.className = "tour_button tour_next";
+        this.#nextIcon = new Icon(Tour.#ICONS.next, "18px");
+        this.#nextButton.appendChild(this.#nextIcon.set());
+        this.#nameButton(this.#skipButton, "feedback.tourSkip");
+        this.#nameButton(this.#prevButton, "feedback.tourPrev");
+        this.#nameButton(this.#nextButton, "feedback.tourNext");
+        this.#closeButton.addEventListener("click", this.#onCloseClick);
+        this.#skipButton.addEventListener("click", this.#onCloseClick);
+        this.#prevButton.addEventListener("click", this.#onPrevClick);
+        this.#nextButton.addEventListener("click", this.#onNextClick);
         this.#head.appendChild(this.#title);
-        this.#head.appendChild(this.#close_button);
+        this.#head.appendChild(this.#closeButton);
         this.#footer.appendChild(this.#counter);
-        this.#footer.appendChild(this.#skip_button);
-        this.#footer.appendChild(this.#prev_button);
-        this.#footer.appendChild(this.#next_button);
+        this.#footer.appendChild(this.#skipButton);
+        this.#footer.appendChild(this.#prevButton);
+        this.#footer.appendChild(this.#nextButton);
         this.#layer.appendChild(this.#highlight);
         this.#layer.appendChild(this.#status);
         // Подсказка — готовый Popover: он сам держит место у цели, следит за прокруткой
@@ -159,11 +168,11 @@ class Tour {
         this.#a11y = new OverlayA11y(this.#layer, {
             role: "dialog",
             describedBy: this.#text,
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
         this.#a11y.setLabel(this.#label === undefined ? I18n.t("feedback.tourLabel") : this.#label);
-        this.#close_button.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
-        this.#close_button.setAttribute("title", I18n.t("a11y.closeDialog"));
+        this.#closeButton.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
+        this.#closeButton.setAttribute("title", I18n.t("a11y.closeDialog"));
         this.#layer.addEventListener("keydown", this.#onKeyDown);
         window.addEventListener("resize", this.#onWindowChange);
         window.addEventListener("scroll", this.#onWindowChange, true);
@@ -172,17 +181,20 @@ class Tour {
     // ПОКАЗ / СКРЫТИЕ
     /** Начать знакомство с первого шага; шаги без найденной цели в него не попадают */
     start() {
-        if (this.#destroyed || this.#is_open) return this;
-        this.#active = this.#steps.filter((step) => step !== undefined && step !== null && (step.target === undefined || this.#targetOf(step) !== undefined));
+        if (this.#destroyed || this.#isOpen) return this;
+        this.#active = this.#steps.filter(
+            (step) =>
+                step !== undefined && step !== null && (step.target === undefined || this.#targetOf(step) !== undefined)
+        );
         if (this.#active.length === 0) return this;
         this.#index = 0;
-        this.#is_open = true;
+        this.#isOpen = true;
         this.#layer.style.display = "flex";
         // Тексты берём в момент запуска: язык мог смениться после создания компонента
         this.#a11y.setLabel(this.#label === undefined ? I18n.t("feedback.tourLabel") : this.#label);
-        this.#close_button.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
-        this.#close_button.setAttribute("title", I18n.t("a11y.closeDialog"));
-        this.#nameButton(this.#skip_button, "feedback.tourSkip");
+        this.#closeButton.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
+        this.#closeButton.setAttribute("title", I18n.t("a11y.closeDialog"));
+        this.#nameButton(this.#skipButton, "feedback.tourSkip");
         this.#a11y.open();
         this.#applyStep(true);
         return this;
@@ -190,7 +202,7 @@ class Tour {
 
     /** Следующий шаг или завершение, если он последний */
     next() {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         if (this.#index >= this.#active.length - 1) return this.finish();
         this.#index += 1;
         this.#applyStep(false);
@@ -198,14 +210,14 @@ class Tour {
     }
 
     prev() {
-        if (!this.#is_open || this.#index === 0) return this;
+        if (!this.#isOpen || this.#index === 0) return this;
         this.#index -= 1;
         this.#applyStep(false);
         return this;
     }
 
     goTo(index = Number()) {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         const position = Math.max(0, Math.min(Number(index) || 0, this.#active.length - 1));
         if (position === this.#index) return this;
         this.#index = position;
@@ -223,15 +235,23 @@ class Tour {
         return this.#end(false);
     }
 
-    isOpen() { return this.#is_open; }
+    isOpen() {
+        return this.#isOpen;
+    }
     /** Номер текущего шага; вне знакомства — 0 */
-    getIndex() { return this.#index; }
-    getSteps() { return [...this.#steps]; }
+    getIndex() {
+        return this.#index;
+    }
+    getSteps() {
+        return [...this.#steps];
+    }
     setSteps(steps = []) {
         this.#steps = Array.isArray(steps) ? steps : [];
         return this;
     }
-    getId() { return this.#id; }
+    getId() {
+        return this.#id;
+    }
 
     /** Полное удаление: знакомство закрывается без уведомлений, слой и поповер убираются */
     destroy() {
@@ -240,12 +260,12 @@ class Tour {
         window.removeEventListener("resize", this.#onWindowChange);
         window.removeEventListener("scroll", this.#onWindowChange, true);
         this.#layer.removeEventListener("keydown", this.#onKeyDown);
-        this.#close_button.removeEventListener("click", this.#onCloseClick);
-        this.#skip_button.removeEventListener("click", this.#onCloseClick);
-        this.#prev_button.removeEventListener("click", this.#onPrevClick);
-        this.#next_button.removeEventListener("click", this.#onNextClick);
-        if (this.#is_open) {
-            this.#is_open = false;
+        this.#closeButton.removeEventListener("click", this.#onCloseClick);
+        this.#skipButton.removeEventListener("click", this.#onCloseClick);
+        this.#prevButton.removeEventListener("click", this.#onPrevClick);
+        this.#nextButton.removeEventListener("click", this.#onNextClick);
+        if (this.#isOpen) {
+            this.#isOpen = false;
             this.#popover.close();
             this.#a11y.close();
         }
@@ -254,7 +274,9 @@ class Tour {
         return this;
     }
 
-    set() { return this.#layer; }
+    set() {
+        return this.#layer;
+    }
 
     // === ВНУТРЕННЕЕ ===
     /**
@@ -268,17 +290,17 @@ class Tour {
     }
 
     #end(completed = false) {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         const index = this.#index;
-        this.#is_open = false;
+        this.#isOpen = false;
         this.#popover.close();
         this.#clearTriggerAria();
         this.#a11y.close();
         this.#layer.style.display = "none";
         if (completed) {
-            if (this.#on_finish !== undefined) this.#on_finish();
-        } else if (this.#on_close !== undefined) {
-            this.#on_close(index);
+            if (this.#onFinish !== undefined) this.#onFinish();
+        } else if (this.#onClose !== undefined) {
+            this.#onClose(index);
         }
         return this;
     }
@@ -300,24 +322,26 @@ class Tour {
             this.#popover.set().setAttribute("aria-labelledby", this.#title.id);
             this.#popover.set().removeAttribute("aria-label");
         }
-        const has_text = step.text !== undefined || step.markdownText !== undefined;
+        const hasText = step.text !== undefined || step.markdownText !== undefined;
         if (step.markdownText !== undefined) this.#text.innerHTML = markdownToHtml(step.markdownText);
         else if (step.text !== undefined) this.#text.innerText = String(step.text);
         // Счётчик, значки и видимость закрывающих кнопок
-        this.#counter.innerText = I18n.t("feedback.tourStepOf", {index: this.#index + 1, total: this.#active.length});
-        this.#nameButton(this.#prev_button, "feedback.tourPrev");
+        this.#counter.innerText = I18n.t("feedback.tourStepOf", { index: this.#index + 1, total: this.#active.length });
+        this.#nameButton(this.#prevButton, "feedback.tourPrev");
         // Последний шаг: «Далее» становится «Готово» — вместе с именем меняется и значок
-        this.#nameButton(this.#next_button, last ? "feedback.tourFinish" : "feedback.tourNext");
-        this.#next_icon.set().textContent = last ? Tour.#ICONS.finish : Tour.#ICONS.next;
-        this.#skip_button.style.display = this.#closable ? "" : "none";
-        this.#close_button.style.display = this.#closable ? "" : "none";
-        this.#prev_button.style.display = this.#index === 0 ? "none" : "";
-        this.#popover.setContent([this.#head, has_text ? this.#text : undefined, this.#footer]);
+        this.#nameButton(this.#nextButton, last ? "feedback.tourFinish" : "feedback.tourNext");
+        this.#nextIcon.set().textContent = last ? Tour.#ICONS.finish : Tour.#ICONS.next;
+        this.#skipButton.style.display = this.#closable ? "" : "none";
+        this.#closeButton.style.display = this.#closable ? "" : "none";
+        this.#prevButton.style.display = this.#index === 0 ? "none" : "";
+        this.#popover.setContent([this.#head, hasText ? this.#text : undefined, this.#footer]);
         if (previous !== undefined) {
             if (this.#layer.contains(previous)) previous.focus();
-            else this.#next_button.focus();
+            else this.#nextButton.focus();
         }
-        this.#announce(`${this.#counter.innerText}${this.#title.innerText.trim() === "" ? "" : ". " + this.#title.innerText}`);
+        this.#announce(
+            `${this.#counter.innerText}${this.#title.innerText.trim() === "" ? "" : ". " + this.#title.innerText}`
+        );
         // Цель: подвести в вид, измерить и поставить «окно» с подсказкой
         this.#scrollIntoView(step);
         this.#syncGeometry();
@@ -327,7 +351,7 @@ class Tour {
         // Подсветка — не триггер: подсказку открывает знакомство, а не клик по окну
         this.#clearTriggerAria();
         if (step.onEnter !== undefined) step.onEnter(step, this.#index);
-        if (this.#on_change !== undefined) this.#on_change(step, this.#index);
+        if (this.#onChange !== undefined) this.#onChange(step, this.#index);
     }
 
     /** Снять с подсветки aria триггера: поповер ставит их сам при показе и скрытии */
@@ -340,15 +364,20 @@ class Tour {
     #targetOf(step = {}) {
         const target = step.target;
         if (target === undefined || target === null) return undefined;
-        const node = typeof target === "string" ? document.querySelector(target) : (typeof target.set === "function" ? target.set() : target);
+        const node =
+            typeof target === "string"
+                ? document.querySelector(target)
+                : typeof target.set === "function"
+                  ? target.set()
+                  : target;
         return node instanceof Element ? node : undefined;
     }
 
     #scrollIntoView(step) {
-        if (!this.#scroll_into_view) return;
+        if (!this.#scrollIntoViewEnabled) return;
         const node = this.#targetOf(step);
         if (node === undefined) return;
-        node.scrollIntoView({block: "center", inline: "nearest"});
+        node.scrollIntoView({ block: "center", inline: "nearest" });
     }
 
     /** «Окно» вокруг цели: у шага без цели — точка в центре окна (подсказка встаёт у неё) */
@@ -360,10 +389,15 @@ class Tour {
         let box;
         if (node === undefined) {
             const left = Math.max(0, (window.innerWidth - Tour.WIDTH) / 2);
-            box = {left: left, top: window.innerHeight / 2, width: 0, height: 0};
+            box = { left: left, top: window.innerHeight / 2, width: 0, height: 0 };
         } else {
             const rect = node.getBoundingClientRect();
-            box = {left: rect.left - padding, top: rect.top - padding, width: rect.width + padding * 2, height: rect.height + padding * 2};
+            box = {
+                left: rect.left - padding,
+                top: rect.top - padding,
+                width: rect.width + padding * 2,
+                height: rect.height + padding * 2,
+            };
         }
         this.#highlight.style.left = `${Math.round(box.left)}px`;
         this.#highlight.style.top = `${Math.round(box.top)}px`;
@@ -395,9 +429,9 @@ class Tour {
         }
     };
     #onWindowChange = () => {
-        if (!this.#is_open) return;
+        if (!this.#isOpen) return;
         this.#syncGeometry();
     };
 }
 
-exports.Tour = Tour
+exports.Tour = Tour;

package/framework/components/chui_transfer/styles.css

@@ -4,13 +4,13 @@ chui_transfer {
     flex-direction: column;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .transfer_label {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -33,7 +33,7 @@ chui_transfer {
     border: none;
     outline: 1px solid var(--red_prime_background);
     outline-offset: 4px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 .transfer_pane {
@@ -75,10 +75,11 @@ chui_transfer {
     min-height: var(--control_height);
     margin: 0;
     /* Место под кнопку очистки, чтобы текст не заезжал под неё; слева 11 px — как
-       у текстовых полей (--main_padding_sm) */
-    padding-block: 0 0; padding-inline: 11px 30px;
+       у текстовых полей (--block_padding_sm) */
+    padding-block: 0 0;
+    padding-inline: 11px 30px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -146,7 +147,7 @@ chui_transfer {
     padding: 4px;
     overflow: auto;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
 }