chuijs 4.0.2 → 4.0.4

package/framework/components/chui_skeleton/skeleton.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Плейсхолдер загрузки (skeleton): серые фигуры на месте будущего содержимого.
@@ -20,12 +20,12 @@ class Skeleton {
         TEXT: "text",
         TITLE: "title",
         CIRCLE: "circle",
-        RECT: "rect"
+        RECT: "rect",
     };
     static ANIMATION = {
         SHIMMER: "shimmer",
         PULSE: "pulse",
-        NONE: "none"
+        NONE: "none",
     };
     /** Ширина последней строки многострочного текста — строки не должны быть равными */
     static LAST_LINE_WIDTH = "60%";
@@ -37,19 +37,21 @@ class Skeleton {
     #id = undefined;
     #animation = Skeleton.ANIMATION.SHIMMER;
 
-    constructor(options = {
-        id: String(),
-        shape: String(),
-        lines: Number(),
-        width: String(),
-        height: String(),
-        radius: String(),
-        gap: String(),
-        animation: String(),
-        label: String(),
-        style: String(),
-        shapes: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            shape: String(),
+            lines: Number(),
+            width: String(),
+            height: String(),
+            radius: String(),
+            gap: String(),
+            animation: String(),
+            label: String(),
+            style: String(),
+            shapes: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Skeleton");
         Skeleton.#counter += 1;
         this.#id = options.id === undefined ? `chui_skeleton_${Skeleton.#counter}` : options.id;
@@ -71,17 +73,20 @@ class Skeleton {
         }
         const shape = options.shape === undefined ? Skeleton.SHAPE.TEXT : options.shape;
         if (shape !== Skeleton.SHAPE.TEXT && shape !== Skeleton.SHAPE.TITLE) {
-            this.addShape({shape, width: options.width, height: options.height, radius: options.radius});
+            this.addShape({ shape, width: options.width, height: options.height, radius: options.radius });
             return;
         }
         const lines = options.lines === undefined ? 1 : options.lines;
         for (let line = 1; line <= lines; line++) {
             // Последняя строка многострочного текста короче — так скелет читается как текст
             const isLast = line === lines;
-            const width = options.width !== undefined
-                ? options.width
-                : (isLast && lines > 1 ? Skeleton.LAST_LINE_WIDTH : undefined);
-            this.addShape({shape, width, height: options.height, radius: options.radius});
+            const width =
+                options.width !== undefined
+                    ? options.width
+                    : isLast && lines > 1
+                      ? Skeleton.LAST_LINE_WIDTH
+                      : undefined;
+            this.addShape({ shape, width, height: options.height, radius: options.radius });
         }
     }
 
@@ -140,7 +145,7 @@ class Skeleton {
 
     // ФИГУРЫ
     /** Добавляет фигуру: shape, width, height, radius, style */
-    addShape(options = {shape: String(), width: String(), height: String(), radius: String(), style: String()}) {
+    addShape(options = { shape: String(), width: String(), height: String(), radius: String(), style: String() }) {
         const shape = options.shape === undefined ? Skeleton.SHAPE.TEXT : options.shape;
         const element = document.createElement("skeleton_shape");
         element.classList.add(`skeleton_${shape}`);
@@ -174,4 +179,4 @@ class Skeleton {
     }
 }
 
-exports.Skeleton = Skeleton
+exports.Skeleton = Skeleton;

package/framework/components/chui_slideshow/slideshow.js

@@ -1,193 +1,212 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {optionOr} = require("../../modules/chui_functions");
-const {Animation} = require("../../modules/chui_animations/animations");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+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');
+        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");
         }
         // Частичный объект опций: у каждого поля своё значение по умолчанию. Без этого
         // `autoplay: {status: true}` без interval давал setInterval с NaN — слайды мелькали,
         // а `autoplay: true` вообще не включал прокрутку
-        const autoplay = options.autoplay === undefined || options.autoplay === null || typeof options.autoplay !== "object" ? {} : options.autoplay;
+        const autoplay =
+            options.autoplay === undefined || options.autoplay === null || typeof options.autoplay !== "object"
+                ? {}
+                : options.autoplay;
         const interval = Number(autoplay.interval);
         this.#autoplay = {
             status: options.autoplay === true || autoplay.status === true,
             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);
         });
         //
-        this.#renderSlide(true)
+        this.#renderSlide(true);
         //
     }
     #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}));
+            dot.setAttribute(
+                "aria-label",
+                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); }
-        let slide = this.#slides_list[this.#default_slide].set();
+    #renderSlide(isInitial = false) {
+        for (const child of this.#chuiSlidesList.childNodes) {
+            this.#chuiSlidesList.removeChild(child);
+        }
+        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}));
-        this.#chui_slides_list.appendChild(slide)
+        slide.setAttribute(
+            "aria-label",
+            I18n.t("feedback.slideOf", { index: this.#defaultSlide + 1, total: this.#slidesList.length })
+        );
+        this.#chuiSlidesList.appendChild(slide);
         // Первый слайд показываем так же, как раньше (display: flex до анимации)
-        if (is_initial) slide.style.display = 'flex';
-        else slide.style.display = 'none';
-        new Animation(slide).fadeIn()
-        this.#syncIndicators()
+        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(); else this.#startAutoplay();
+        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("aria-label", this.#user_paused ? I18n.t("feedback.autoplayStart") : I18n.t("feedback.autoplayPause"));
-        this.#chui_slideshow_pause.setAttribute("aria-pressed", this.#user_paused ? "true" : "false");
+        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.#userPaused ? I18n.t("feedback.autoplayStart") : I18n.t("feedback.autoplayPause")
+        );
+        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)
+        return new Slide(options);
     }
 }
-exports.SlideShow = SlideShow
+exports.SlideShow = SlideShow;
 
 class Slide {
-    #chui_slide = document.createElement('chui_slide');
-    #chui_slide_content = document.createElement('chui_slide_content');
-    constructor(options = {
-        size: { width: String(), height: String() },
-        style: { direction: String(), wrap: String(), align: String(), justify: String() },
-        components: []
-    }) {
+    #chuiSlide = document.createElement("chui_slide");
+    #chuiSlideContent = document.createElement("chui_slide_content");
+    constructor(
+        options = {
+            size: { width: String(), height: String() },
+            style: { direction: String(), wrap: String(), align: String(), justify: String() },
+            components: [],
+        }
+    ) {
         // Частичный объект опций: `SLIDE({components})` падал на отсутствующем `size`
         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)
-    }
-    set() { return this.#chui_slide }
-}
+        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.#chuiSlide;
+    }
+}

package/framework/components/chui_slideshow/styles.css

@@ -6,13 +6,14 @@ 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);
 }
 
 /* Стрелки — круглые кнопки-стёкла на середине высоты: полоса во всю высоту читалась
    тяжёлой границей, а кнопка не спорит с содержимым слайда. Хит-зона 40px */
-chui_next_slide, chui_prev_slide {
+chui_next_slide,
+chui_prev_slide {
     cursor: pointer;
     position: absolute;
     top: 50%;
@@ -32,30 +33,33 @@ chui_next_slide, chui_prev_slide {
     box-shadow: var(--box_shadow_main);
     display: flex;
     align-items: center;
-    justify-content: center
+    justify-content: center;
 }
 
 chui_next_slide {
-    inset-inline-end: 10px
+    inset-inline-end: 10px;
 }
 
 chui_prev_slide {
-    inset-inline-start: 10px
+    inset-inline-start: 10px;
 }
 
-chui_next_slide:hover, chui_prev_slide:hover {
+chui_next_slide:hover,
+chui_prev_slide:hover {
     background-color: var(--element_background_hover);
-    color: var(--text_color)
+    color: var(--text_color);
 }
 
-chui_next_slide:active, chui_prev_slide:active {
+chui_next_slide:active,
+chui_prev_slide:active {
     background-color: var(--blue_prime_background);
-    color: var(--text_color_hover)
+    color: var(--text_color_hover);
 }
 
 /* chui_icon задаёт собственный color, поэтому цвет берём от кнопки: тогда значок
    меняется вместе с ней в наведении и нажатии */
-chui_next_slide chui_icon, chui_prev_slide chui_icon {
+chui_next_slide chui_icon,
+chui_prev_slide chui_icon {
     color: inherit;
 }
 
@@ -88,7 +92,9 @@ chui_slideshow_dot {
     height: 8px;
     border-radius: var(--radius_pill);
     background: var(--element_background);
-    transition: width var(--transition_time) ease, background-color var(--transition_time) ease;
+    transition:
+        width var(--motion_base) var(--motion_spring),
+        background-color var(--motion_fast) var(--motion_ease);
 }
 
 /* Наведение — нейтральная ступень, кружок текущего слайда — акцент */
@@ -136,18 +142,18 @@ 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
+    height: -webkit-fill-available;
 }
 
 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
+    overflow: auto;
 }
 
 /* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */

package/framework/components/chui_spinner/spinner.js

@@ -1,5 +1,5 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 /** Доля кольца, которую занимает дуга: четверть — самый читаемый «бегунок» */
@@ -15,15 +15,15 @@ const ARC_SHARE = 0.25;
  * Слушателей и таймеров нет: `remove()` убирает узел и повторный вызов уже ничего не делает.
  */
 class Spinner {
-    #spinner_main = document.createElement('chui_spiner')
-    #spinner = document.createElement('spinner')
+    #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");
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Spinner");
+        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,20 +79,20 @@ 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 },
         SMALL: { SIZE: 45, BORDER: 3 },
         DEFAULT: { SIZE: 60, BORDER: 4 },
         BIG: { SIZE: 75, BORDER: 5 },
-        V_BIG: { SIZE: 90, BORDER: 5 }
-    }
+        V_BIG: { SIZE: 90, BORDER: 5 },
+    };
 }
 
-exports.Spinner = Spinner
+exports.Spinner = Spinner;

package/framework/components/chui_spinner/styles.css

@@ -58,4 +58,3 @@ spinner .spinner_arc {
         animation-duration: 2.5s;
     }
 }
-