chuijs 4.0.3 → 4.0.4

package/framework/components/chui_sidebar_nav/sidebar_nav.js

@@ -1,4 +1,5 @@
 const { setStyles } = require("../../modules/chui_functions");
+const { reducedMotion } = require("../../modules/chui_animations/motion");
 const { Icon, Icons } = require("../chui_icons/icons");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
@@ -61,13 +62,13 @@ class SidebarNav {
     #collapsed = false;
     #collapsible = false;
     #id = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
-    #on_select = undefined;
-    #on_toggle = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #onSelect = undefined;
+    #onToggle = undefined;
     #listeners = [];
-    #active_id = undefined;
-    #focus_id = undefined;
+    #activeId = undefined;
+    #focusId = undefined;
 
     constructor(
         options = {
@@ -88,8 +89,8 @@ class SidebarNav {
         this.#id = options.id === undefined ? `chui_sidebar_nav_${SidebarNav.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "navigation");
-        this.#on_select = options.onSelect;
-        this.#on_toggle = options.onToggle;
+        this.#onSelect = options.onSelect;
+        this.#onToggle = options.onToggle;
         this.#collapsible = options.collapsible === true;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         this.#title.className = "sidebar_nav_title";
@@ -118,12 +119,12 @@ class SidebarNav {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя навигации, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Пункты деревом: `{id, title, icon, badge, disabled, expanded, children}`; разделы — `{type: "section", title, children}` */
@@ -176,7 +177,7 @@ class SidebarNav {
 
     /** Подпись в шапке навигации; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.innerText = "";
             this.#title.hidden = true;
@@ -191,7 +192,7 @@ class SidebarNav {
 
     /** Имя навигации, когда подписи в шапке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -276,8 +277,76 @@ class SidebarNav {
         if (next === this.#expanded.has(node.id)) return this;
         if (next) this.#expanded.add(node.id);
         else this.#expanded.delete(node.id);
-        this.#render();
-        if (!silent && this.#on_toggle !== undefined) this.#on_toggle(this.#describe(node), next, this);
+        // Панель переключается на месте, а не пересборкой списка: новый узел не помнит прошлого
+        // состояния, поэтому и стрелка, и содержимое появлялись готовыми — без движения
+        this.#setPanel(node, next);
+        if (!silent && this.#onToggle !== undefined) this.#onToggle(this.#describe(node), next, this);
+        return this;
+    }
+
+    /** Узел панели пункта — по её id, тому же, что в `aria-controls` пункта */
+    #panelNode(node = Object()) {
+        return this.#root.querySelector(`[id="${this.#id}_panel_${node.id}"]`);
+    }
+
+    /** Узел пункта: он несёт `aria-expanded` (по нему поворачивается стрелка)
+и панель */
+    #linkNode(node = Object()) {
+        return this.#links().find((link) => link.dataset.id === node.id) ?? null;
+    }
+
+    /**
+     * Раскрытие и сворачивание панели пункта.
+     *
+     * Высоту списка ведёт компонент, а время и кривую берут токены движения из стилей: высоту
+     * кадром не задать — её знает только раскладка, поэтому её считает JS и переводит переходом.
+     * `overflow` на время движения прячет содержимое, которое ещё не помещается в панель,
+     * а после снимается: иначе вложенные списки и счётчики обрезались бы по краю.
+     */
+    #setPanel(node = Object(), open = Boolean()) {
+        const panel = this.#panelNode(node);
+        const link = this.#linkNode(node);
+        // В свёрнутой навигации подписи скрыты, поэтому пункт всегда заявляет себя свёрнутым
+        if (link !== null) link.setAttribute("aria-expanded", open && !this.#collapsed ? "true" : "false");
+        if (panel === null) return this;
+        if (open) {
+            panel.hidden = false;
+            this.#slidePanel(panel, 0, panel.scrollHeight);
+        } else {
+            this.#slidePanel(panel, panel.scrollHeight, 0, () => {
+                panel.hidden = true;
+            });
+        }
+        this.#applyStop();
+        return this;
+    }
+
+    /** Перевод высоты панели от `from` к `to`; `done` — по концу перехода */
+    #slidePanel(panel = undefined, from = Number(), to = Number(), done = () => {}) {
+        const finish = (event) => {
+            if (event !== undefined && event.propertyName !== "max-height") return;
+            panel.removeEventListener("transitionend", finish);
+            panel.style.removeProperty("max-height");
+            panel.style.removeProperty("opacity");
+            panel.style.removeProperty("overflow");
+            done();
+        };
+        // Уменьшенное движение: состояние применяется сразу — перехода не будет,
+        // и `transitionend` не придёт
+        if (reducedMotion()) {
+            finish();
+            return this;
+        }
+        panel.style.overflow = "hidden";
+        panel.style.maxHeight = `${from}px`;
+        panel.style.opacity = from === 0 ? "0" : "1";
+        panel.addEventListener("transitionend", finish);
+        // Следующий кадр — уже с конечными значениями: в том же кадре браузер не увидел бы
+        // перехода, и панель встала бы готовой
+        requestAnimationFrame(() => {
+            panel.style.maxHeight = `${to}px`;
+            panel.style.opacity = to === 0 ? "0" : "1";
+        });
         return this;
     }
 
@@ -329,9 +398,9 @@ class SidebarNav {
         for (const key of Object.keys(source === null ? {} : source)) {
             if (!SERVICE_KEYS.includes(key)) data[key] = source[key];
         }
-        SidebarNav.#item_counter += 1;
+        SidebarNav.#itemCounter += 1;
         return {
-            id: source.id === undefined ? `sidebar_nav_item_${SidebarNav.#item_counter}` : String(source.id),
+            id: source.id === undefined ? `sidebar_nav_item_${SidebarNav.#itemCounter}` : String(source.id),
             title: source.title === undefined ? "" : String(source.title),
             icon: source.icon,
             badge: source.badge === undefined ? undefined : String(source.badge),
@@ -342,7 +411,7 @@ class SidebarNav {
         };
     }
 
-    static #item_counter = 0;
+    static #itemCounter = 0;
 
     #describeEntry(node) {
         if (node.type === "section") {
@@ -392,13 +461,13 @@ class SidebarNav {
     }
 
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("navigation.sidebarNav");
     }
 
     #syncLabel() {
-        if (this.#title_text !== undefined && this.#title_text !== "") {
+        if (this.#titleText !== undefined && this.#titleText !== "") {
             this.#root.setAttribute("aria-labelledby", this.#title.id);
             this.#root.removeAttribute("aria-label");
             return;
@@ -430,7 +499,7 @@ class SidebarNav {
         // Пункты пересобираются: запоминаем, где стоял фокус, чтобы вернуть его
         const active = document.activeElement;
         const focused = active === null || !this.#root.contains(active) ? null : active.closest(".sidebar_nav_link");
-        if (focused !== null) this.#focus_id = focused.dataset.id;
+        if (focused !== null) this.#focusId = focused.dataset.id;
         this.#body.innerHTML = "";
         this.#head.hidden = this.#title.hidden === true && this.#collapse === undefined;
         this.#body.appendChild(this.#listsNode(this.#items));
@@ -559,13 +628,13 @@ class SidebarNav {
         const list = this.#visibleLinks();
         if (list.length === 0) return;
         const stop =
-            list.find((link) => link.dataset.id === this.#active_id) ??
-            list.find((link) => link.dataset.id === this.#focus_id) ??
+            list.find((link) => link.dataset.id === this.#activeId) ??
+            list.find((link) => link.dataset.id === this.#focusId) ??
             list[0];
-        this.#active_id = stop.dataset.id;
+        this.#activeId = stop.dataset.id;
         for (const link of this.#links()) link.setAttribute("tabindex", link === stop ? "0" : "-1");
-        if (this.#focus_id !== undefined && stop.dataset.id === this.#focus_id) {
-            this.#focus_id = undefined;
+        if (this.#focusId !== undefined && stop.dataset.id === this.#focusId) {
+            this.#focusId = undefined;
             stop.focus();
         }
         return this;
@@ -574,7 +643,7 @@ class SidebarNav {
     #focusLink(id = String()) {
         const link = this.#links().find((node) => node.dataset.id === id);
         if (link === undefined) return;
-        this.#active_id = id;
+        this.#activeId = id;
         for (const other of this.#links()) other.setAttribute("tabindex", other === link ? "0" : "-1");
         link.focus();
     }
@@ -607,13 +676,13 @@ class SidebarNav {
         const node = this.#value === undefined ? undefined : this.#index.get(this.#value);
         const item = node === undefined ? undefined : this.#describe(node);
         for (const listener of [...this.#listeners]) listener(item, this);
-        if (this.#on_select !== undefined) this.#on_select(item, this);
+        if (this.#onSelect !== undefined) this.#onSelect(item, this);
     }
 
     #currentLink(target = undefined) {
         const link = target === undefined ? null : target.closest(".sidebar_nav_link");
         if (link !== null && link !== undefined) return link;
-        const id = this.#active_id;
+        const id = this.#activeId;
         return id === undefined ? null : (this.#links().find((node) => node.dataset.id === id) ?? null);
     }
 

package/framework/components/chui_sidebar_nav/styles.css

@@ -8,9 +8,9 @@ chui_sidebar_nav {
     width: 260px;
     max-width: 100%;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     color: var(--text_color);
 }
@@ -223,7 +223,7 @@ chui_sidebar_nav {
 .sidebar_nav_arrow chui_icon {
     color: inherit;
     font-size: 18px;
-    transition: transform var(--transition_time) ease;
+    transition: transform var(--motion_base) var(--motion_ease);
 }
 
 /* Раскрытие показывает стрелка: состояние берётся из aria-expanded самого пункта */
@@ -238,6 +238,12 @@ chui_sidebar_nav {
 .sidebar_nav_panel {
     display: block;
     padding-inline-start: 14px;
+    /* Высоту списка ведёт компонент (`max-height` инлайном: её знает только раскладка),
+       а время и кривую берут токены движения. Свойство `transition` на элементе заменяет
+       общий список целиком — у самой панели других переходов нет, список короткий и намеренный */
+    transition:
+        max-height var(--motion_base) var(--motion_ease),
+        opacity var(--motion_base) var(--motion_ease);
 }
 
 .sidebar_nav_panel[hidden] {

package/framework/components/chui_slideshow/slideshow.js

@@ -5,31 +5,31 @@ const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class SlideShow {
-    #default_slide = 0;
-    #chui_slides_main = document.createElement("chui_slides_main");
+    #defaultSlide = 0;
+    #chuiSlidesMain = document.createElement("chui_slides_main");
     //
-    #chui_slides_list = document.createElement("chui_slides_list");
-    #chui_next_slide = document.createElement("chui_next_slide");
-    #chui_prev_slide = document.createElement("chui_prev_slide");
-    #chui_slideshow_controls = document.createElement("chui_slideshow_controls");
-    #chui_slideshow_dots = document.createElement("chui_slideshow_dots");
-    #chui_slideshow_pause = document.createElement("chui_slideshow_pause");
+    #chuiSlidesList = document.createElement("chui_slides_list");
+    #chuiNextSlide = document.createElement("chui_next_slide");
+    #chuiPrevSlide = document.createElement("chui_prev_slide");
+    #chuiSlideshowControls = document.createElement("chui_slideshow_controls");
+    #chuiSlideshowDots = document.createElement("chui_slideshow_dots");
+    #chuiSlideshowPause = document.createElement("chui_slideshow_pause");
     //
-    #slides_list = undefined;
+    #slidesList = undefined;
     #autoplay = undefined;
-    #autoplay_timer = undefined;
-    #user_paused = false;
+    #autoplayTimer = undefined;
+    #userPaused = false;
     constructor(options = {}) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_SlideShow");
         // Частичный объект опций: у каждого поля своё значение по умолчанию
         const width = optionOr(options.width, undefined);
         const height = optionOr(options.height, undefined);
-        if (width !== undefined) this.#chui_slides_main.style.width = width;
-        if (height !== undefined) this.#chui_slides_main.style.height = height;
+        if (width !== undefined) this.#chuiSlidesMain.style.width = width;
+        if (height !== undefined) this.#chuiSlidesMain.style.height = height;
 
-        this.#slides_list = Array.isArray(options.slides) ? options.slides : [];
+        this.#slidesList = Array.isArray(options.slides) ? options.slides : [];
         // Карусель без слайдов — не картинка: показывать нечего, но и падать TypeError незачем
-        if (this.#slides_list.length === 0) {
+        if (this.#slidesList.length === 0) {
             throw new Error("SlideShow: нужен хотя бы один слайд — опция slides");
         }
         // Частичный объект опций: у каждого поля своё значение по умолчанию. Без этого
@@ -45,44 +45,44 @@ class SlideShow {
             interval: Number.isFinite(interval) && interval > 0 ? interval : 10,
         };
         // Доступность: регион-карусель, подписи у кнопок, живое объявление смены слайда
-        this.#chui_slides_main.setAttribute("role", "region");
-        this.#chui_slides_main.setAttribute("aria-roledescription", I18n.t("feedback.carousel"));
-        this.#chui_slides_main.setAttribute("aria-label", I18n.t("feedback.slideshow"));
-        this.#chui_slides_list.setAttribute("aria-live", "polite");
-        this.#chui_next_slide.setAttribute("aria-label", I18n.t("feedback.nextSlide"));
-        this.#chui_prev_slide.setAttribute("aria-label", I18n.t("feedback.previousSlide"));
-        makeKeyboardButton(this.#chui_next_slide);
-        makeKeyboardButton(this.#chui_prev_slide);
-        this.#chui_next_slide.addEventListener("click", () => this.#changeSlide(1));
-        this.#chui_prev_slide.addEventListener("click", () => this.#changeSlide(-1));
-        this.#chui_slides_main.appendChild(this.#chui_slides_list);
+        this.#chuiSlidesMain.setAttribute("role", "region");
+        this.#chuiSlidesMain.setAttribute("aria-roledescription", I18n.t("feedback.carousel"));
+        this.#chuiSlidesMain.setAttribute("aria-label", I18n.t("feedback.slideshow"));
+        this.#chuiSlidesList.setAttribute("aria-live", "polite");
+        this.#chuiNextSlide.setAttribute("aria-label", I18n.t("feedback.nextSlide"));
+        this.#chuiPrevSlide.setAttribute("aria-label", I18n.t("feedback.previousSlide"));
+        makeKeyboardButton(this.#chuiNextSlide);
+        makeKeyboardButton(this.#chuiPrevSlide);
+        this.#chuiNextSlide.addEventListener("click", () => this.#changeSlide(1));
+        this.#chuiPrevSlide.addEventListener("click", () => this.#changeSlide(-1));
+        this.#chuiSlidesMain.appendChild(this.#chuiSlidesList);
         // Шевроны, а не изогнутые redo/undo: в круглой кнопке они читаются как «назад/вперёд».
         // Цвет не задаём — его берёт глиф из кнопки (`color: inherit` в styles.css), поэтому
         // нажатие окрашивает и значок
-        this.#chui_next_slide.appendChild(new Icon(Icons.NAVIGATION.CHEVRON_RIGHT, "18px").set());
-        this.#chui_prev_slide.appendChild(new Icon(Icons.NAVIGATION.CHEVRON_LEFT, "18px").set());
-        this.#chui_slides_main.appendChild(this.#chui_next_slide);
-        this.#chui_slides_main.appendChild(this.#chui_prev_slide);
+        this.#chuiNextSlide.appendChild(new Icon(Icons.NAVIGATION.CHEVRON_RIGHT, "18px").set());
+        this.#chuiPrevSlide.appendChild(new Icon(Icons.NAVIGATION.CHEVRON_LEFT, "18px").set());
+        this.#chuiSlidesMain.appendChild(this.#chuiNextSlide);
+        this.#chuiSlidesMain.appendChild(this.#chuiPrevSlide);
         // Индикаторы слайдов + кнопка паузы (автопрокрутка)
-        this.#chui_slideshow_controls.setAttribute("role", "group");
-        this.#chui_slideshow_controls.setAttribute("aria-label", I18n.t("feedback.slideshowControls"));
+        this.#chuiSlideshowControls.setAttribute("role", "group");
+        this.#chuiSlideshowControls.setAttribute("aria-label", I18n.t("feedback.slideshowControls"));
         this.#buildDots();
-        this.#chui_slideshow_controls.appendChild(this.#chui_slideshow_dots);
+        this.#chuiSlideshowControls.appendChild(this.#chuiSlideshowDots);
         if (this.#autoplay.status === true) {
-            makeKeyboardButton(this.#chui_slideshow_pause);
+            makeKeyboardButton(this.#chuiSlideshowPause);
             this.#updatePauseButton();
-            this.#chui_slideshow_pause.addEventListener("click", () => this.#toggleAutoplay());
-            this.#chui_slideshow_controls.appendChild(this.#chui_slideshow_pause);
+            this.#chuiSlideshowPause.addEventListener("click", () => this.#toggleAutoplay());
+            this.#chuiSlideshowControls.appendChild(this.#chuiSlideshowPause);
             // Останавливаем прокрутку, пока на неё смотрят или в ней есть фокус
-            this.#chui_slides_main.addEventListener("mouseenter", () => this.#stopAutoplay());
-            this.#chui_slides_main.addEventListener("mouseleave", () => this.#resumeAutoplay());
-            this.#chui_slides_main.addEventListener("focusin", () => this.#stopAutoplay());
-            this.#chui_slides_main.addEventListener("focusout", () => this.#resumeAutoplay());
+            this.#chuiSlidesMain.addEventListener("mouseenter", () => this.#stopAutoplay());
+            this.#chuiSlidesMain.addEventListener("mouseleave", () => this.#resumeAutoplay());
+            this.#chuiSlidesMain.addEventListener("focusin", () => this.#stopAutoplay());
+            this.#chuiSlidesMain.addEventListener("focusout", () => this.#resumeAutoplay());
             this.#startAutoplay();
         }
-        this.#chui_slides_main.appendChild(this.#chui_slideshow_controls);
+        this.#chuiSlidesMain.appendChild(this.#chuiSlideshowControls);
         // Стрелки переключают слайды, когда фокус внутри карусели
-        this.#chui_slides_main.addEventListener("keydown", (event) => {
+        this.#chuiSlidesMain.addEventListener("keydown", (event) => {
             if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
             event.preventDefault();
             this.#changeSlide(event.key === "ArrowRight" ? 1 : -1);
@@ -92,90 +92,90 @@ class SlideShow {
         //
     }
     #buildDots() {
-        this.#slides_list.forEach((_, index) => {
+        this.#slidesList.forEach((_, index) => {
             const dot = document.createElement("chui_slideshow_dot");
             dot.setAttribute("role", "button");
             dot.setAttribute(
                 "aria-label",
-                I18n.t("feedback.slideOf", { index: index + 1, total: this.#slides_list.length })
+                I18n.t("feedback.slideOf", { index: index + 1, total: this.#slidesList.length })
             );
             makeKeyboardButton(dot);
             dot.addEventListener("click", () => this.#goToSlide(index));
-            this.#chui_slideshow_dots.appendChild(dot);
+            this.#chuiSlideshowDots.appendChild(dot);
         });
     }
     #syncIndicators() {
-        [...this.#chui_slideshow_dots.children].forEach((dot, index) => {
-            if (index === this.#default_slide) dot.setAttribute("aria-current", "true");
+        [...this.#chuiSlideshowDots.children].forEach((dot, index) => {
+            if (index === this.#defaultSlide) dot.setAttribute("aria-current", "true");
             else dot.removeAttribute("aria-current");
         });
     }
     #goToSlide(index = Number()) {
-        this.#default_slide = index;
+        this.#defaultSlide = index;
         this.#renderSlide();
     }
     #changeSlide(n = Number()) {
-        let sum_slides = this.#slides_list.length;
-        this.#default_slide = this.#default_slide + n;
-        if (this.#default_slide > sum_slides - 1) this.#default_slide = 0;
-        if (this.#default_slide < 0) this.#default_slide = sum_slides - 1;
+        const slideTotal = this.#slidesList.length;
+        this.#defaultSlide = this.#defaultSlide + n;
+        if (this.#defaultSlide > slideTotal - 1) this.#defaultSlide = 0;
+        if (this.#defaultSlide < 0) this.#defaultSlide = slideTotal - 1;
         this.#renderSlide();
     }
-    #renderSlide(is_initial = false) {
-        for (let child of this.#chui_slides_list.childNodes) {
-            this.#chui_slides_list.removeChild(child);
+    #renderSlide(isInitial = false) {
+        for (const child of this.#chuiSlidesList.childNodes) {
+            this.#chuiSlidesList.removeChild(child);
         }
-        let slide = this.#slides_list[this.#default_slide].set();
+        const slide = this.#slidesList[this.#defaultSlide].set();
         slide.setAttribute("role", "group");
         slide.setAttribute("aria-roledescription", I18n.t("feedback.slide"));
         slide.setAttribute(
             "aria-label",
-            I18n.t("feedback.slideOf", { index: this.#default_slide + 1, total: this.#slides_list.length })
+            I18n.t("feedback.slideOf", { index: this.#defaultSlide + 1, total: this.#slidesList.length })
         );
-        this.#chui_slides_list.appendChild(slide);
+        this.#chuiSlidesList.appendChild(slide);
         // Первый слайд показываем так же, как раньше (display: flex до анимации)
-        if (is_initial) slide.style.display = "flex";
+        if (isInitial) slide.style.display = "flex";
         else slide.style.display = "none";
         new Animation(slide).fadeIn();
         this.#syncIndicators();
     }
     // === АВТОПРОКРУТКА ===
     #startAutoplay() {
-        if (this.#autoplay_timer !== undefined || this.#user_paused) return;
+        if (this.#autoplayTimer !== undefined || this.#userPaused) return;
         if (this.#autoplay === undefined || !this.#autoplay.status) return;
-        this.#autoplay_timer = setInterval(() => this.#changeSlide(1), this.#autoplay.interval * 1000);
+        this.#autoplayTimer = setInterval(() => this.#changeSlide(1), this.#autoplay.interval * 1000);
     }
     #stopAutoplay() {
-        if (this.#autoplay_timer === undefined) return;
-        clearInterval(this.#autoplay_timer);
-        this.#autoplay_timer = undefined;
+        if (this.#autoplayTimer === undefined) return;
+        clearInterval(this.#autoplayTimer);
+        this.#autoplayTimer = undefined;
     }
     #resumeAutoplay() {
-        if (this.#user_paused) return;
+        if (this.#userPaused) return;
         this.#startAutoplay();
     }
     #toggleAutoplay() {
-        this.#user_paused = !this.#user_paused;
-        if (this.#user_paused) this.#stopAutoplay();
+        this.#userPaused = !this.#userPaused;
+        if (this.#userPaused) this.#stopAutoplay();
         else this.#startAutoplay();
         this.#updatePauseButton();
     }
     #updatePauseButton() {
-        const icon = this.#user_paused ? Icons.AUDIO_VIDEO.PLAY_ARROW : Icons.AUDIO_VIDEO.PAUSE;
-        this.#chui_slideshow_pause.innerHTML = new Icon(icon, "14pt", "var(--button_text_color)").getHTML();
-        this.#chui_slideshow_pause.setAttribute(
+        const icon = this.#userPaused ? Icons.AUDIO_VIDEO.PLAY_ARROW : Icons.AUDIO_VIDEO.PAUSE;
+        this.#chuiSlideshowPause.innerHTML = new Icon(icon, "14pt", "var(--button_text_color)").getHTML();
+        this.#chuiSlideshowPause.setAttribute(
             "aria-label",
-            this.#user_paused ? I18n.t("feedback.autoplayStart") : I18n.t("feedback.autoplayPause")
+            this.#userPaused ? I18n.t("feedback.autoplayStart") : I18n.t("feedback.autoplayPause")
         );
-        this.#chui_slideshow_pause.setAttribute("aria-pressed", this.#user_paused ? "true" : "false");
+        this.#chuiSlideshowPause.setAttribute("aria-pressed", this.#userPaused ? "true" : "false");
     }
     /** Полное удаление: остановить автопрокрутку (остальные слушатели — на элементах компонента) */
     destroy() {
-        this.#user_paused = true;
+        this.#userPaused = true;
         this.#stopAutoplay();
     }
     set() {
-        return this.#chui_slides_main;
+        return this.#chuiSlidesMain;
     }
     static SLIDE(options = { width: String(), height: String(), components: [] }) {
         return new Slide(options);
@@ -184,8 +184,8 @@ class SlideShow {
 exports.SlideShow = SlideShow;
 
 class Slide {
-    #chui_slide = document.createElement("chui_slide");
-    #chui_slide_content = document.createElement("chui_slide_content");
+    #chuiSlide = document.createElement("chui_slide");
+    #chuiSlideContent = document.createElement("chui_slide_content");
     constructor(
         options = {
             size: { width: String(), height: String() },
@@ -197,16 +197,16 @@ class Slide {
         const size = options.size === undefined ? {} : options.size;
         const style = options.style === undefined ? {} : options.style;
         const components = Array.isArray(options.components) ? options.components : [];
-        if (size.width !== undefined) this.#chui_slide_content.style.width = size.width;
-        if (size.height !== undefined) this.#chui_slide_content.style.height = size.height;
-        if (style.direction !== undefined) this.#chui_slide_content.style.flexDirection = style.direction;
-        if (style.wrap !== undefined) this.#chui_slide_content.style.flexWrap = style.wrap;
-        if (style.align !== undefined) this.#chui_slide_content.style.alignItems = style.align;
-        if (style.justify !== undefined) this.#chui_slide_content.style.justifyContent = style.justify;
-        for (let child of components) this.#chui_slide_content.appendChild(child.set());
-        this.#chui_slide.appendChild(this.#chui_slide_content);
+        if (size.width !== undefined) this.#chuiSlideContent.style.width = size.width;
+        if (size.height !== undefined) this.#chuiSlideContent.style.height = size.height;
+        if (style.direction !== undefined) this.#chuiSlideContent.style.flexDirection = style.direction;
+        if (style.wrap !== undefined) this.#chuiSlideContent.style.flexWrap = style.wrap;
+        if (style.align !== undefined) this.#chuiSlideContent.style.alignItems = style.align;
+        if (style.justify !== undefined) this.#chuiSlideContent.style.justifyContent = style.justify;
+        for (const child of components) this.#chuiSlideContent.appendChild(child.set());
+        this.#chuiSlide.appendChild(this.#chuiSlideContent);
     }
     set() {
-        return this.#chui_slide;
+        return this.#chuiSlide;
     }
 }

package/framework/components/chui_slideshow/styles.css

@@ -6,8 +6,8 @@ chui_slides_list {
 
 chui_slides_main {
     position: relative;
-    margin: var(--margin);
-    border-radius: var(--border_radius);
+    margin: var(--block_margin);
+    border-radius: var(--radius_sm);
 }
 
 /* Стрелки — круглые кнопки-стёкла на середине высоты: полоса во всю высоту читалась
@@ -93,8 +93,8 @@ chui_slideshow_dot {
     border-radius: var(--radius_pill);
     background: var(--element_background);
     transition:
-        width var(--transition_time) ease,
-        background-color var(--transition_time) ease;
+        width var(--motion_base) var(--motion_spring),
+        background-color var(--motion_fast) var(--motion_ease);
 }
 
 /* Наведение — нейтральная ступень, кружок текущего слайда — акцент */
@@ -142,7 +142,7 @@ chui_slideshow_pause:hover {
 chui_slide {
     display: none;
     color: var(--text_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     width: 100%;
     height: -webkit-fill-available;
 }
@@ -150,7 +150,7 @@ chui_slide {
 chui_slide_content {
     display: flex;
     color: var(--text_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     width: -webkit-fill-available;
     height: -webkit-fill-available;
     overflow: auto;

package/framework/components/chui_spinner/spinner.js

@@ -15,15 +15,15 @@ const ARC_SHARE = 0.25;
  * Слушателей и таймеров нет: `remove()` убирает узел и повторный вызов уже ничего не делает.
  */
 class Spinner {
-    #spinner_main = document.createElement("chui_spiner");
+    #spinnerMain = document.createElement("chui_spiner");
     #spinner = document.createElement("spinner");
     #label = I18n.t("feedback.loading");
     #removed = false;
     constructor(size = Spinner.SIZE.DEFAULT, margin = String(), label = I18n.t("feedback.loading")) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Spinner");
-        this.#spinner_main.style.margin = margin;
-        this.#spinner_main.setAttribute("role", "status");
-        this.#spinner_main.setAttribute("aria-live", "polite");
+        this.#spinnerMain.style.margin = margin;
+        this.#spinnerMain.setAttribute("role", "status");
+        this.#spinnerMain.setAttribute("aria-live", "polite");
         this.setLabel(label);
         //
         const diameter = size.SIZE;
@@ -47,7 +47,7 @@ class Spinner {
         arc.setAttribute("stroke-dasharray", `${circumference * ARC_SHARE} ${circumference}`);
         svg.appendChild(arc);
         this.#spinner.appendChild(svg);
-        this.#spinner_main.appendChild(this.#spinner);
+        this.#spinnerMain.appendChild(this.#spinner);
     }
     /** Окружность по центру квадрата: общая разметка дорожки и дуги */
     #circle(radius, diameter, className) {
@@ -64,8 +64,8 @@ class Spinner {
     }
     setLabel(text = String()) {
         this.#label = text === undefined || text === "" ? undefined : text;
-        if (this.#label === undefined) this.#spinner_main.removeAttribute("aria-label");
-        else this.#spinner_main.setAttribute("aria-label", this.#label);
+        if (this.#label === undefined) this.#spinnerMain.removeAttribute("aria-label");
+        else this.#spinnerMain.setAttribute("aria-label", this.#label);
         return this;
     }
     isRemoved() {
@@ -79,12 +79,12 @@ class Spinner {
     remove() {
         if (this.#removed) return this;
         this.#removed = true;
-        if (this.#spinner_main.style.animationName) new Animation(this.#spinner_main).fadeOutAndRemove();
-        else this.#spinner_main.remove();
+        if (this.#spinnerMain.style.animationName) new Animation(this.#spinnerMain).fadeOutAndRemove();
+        else this.#spinnerMain.remove();
         return this;
     }
     set() {
-        return this.#spinner_main;
+        return this.#spinnerMain;
     }
     static SIZE = {
         V_SMALL: { SIZE: 30, BORDER: 3 },