chuijs 4.0.2 → 4.0.3

package/framework/components/chui_media/video.js

@@ -1,9 +1,9 @@
 const { Icon, Icons } = require("../chui_icons/icons");
-const {Label} = require('../chui_label/label');
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
-const {Log} = require("../../modules/chui_logger/chui_logger");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {setStyles, optionOr} = require("../../modules/chui_functions");
+const { Label } = require("../chui_label/label");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Log } = require("../../modules/chui_logger/chui_logger");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
 
 /**
  * Видеоплеер: кадр и плавающая полоса управления внутри кадра.
@@ -36,15 +36,28 @@ class Video {
     #onPlay = () => this.#renderPlayState(true);
     #onPause = () => this.#renderPlayState(false);
     #onTimeUpdate = () => this.#renderProgress();
-    #onDurationChange = () => { this.#setSliderMax(); this.#renderProgress(); };
+    #onDurationChange = () => {
+        this.#setSliderMax();
+        this.#renderProgress();
+    };
     #onBuffered = () => this.#displayBufferedAmount();
     #onEnter = () => this.#openPanel();
     #onLeave = () => this.#closePanel();
-    constructor(options = {
-        src: String(), autoplay: Boolean(), controls: Boolean(), loop: Boolean(), muted: Boolean(),
-        volume: Number(), poster: String(), width: String(), height: String(), label: String()
-    }) {
-        setStyles(__dirname + "/video_styles.css", 'chUiJS_Video');
+    constructor(
+        options = {
+            src: String(),
+            autoplay: Boolean(),
+            controls: Boolean(),
+            loop: Boolean(),
+            muted: Boolean(),
+            volume: Number(),
+            poster: String(),
+            width: String(),
+            height: String(),
+            label: String(),
+        }
+    ) {
+        setStyles(__dirname + "/video_styles.css", "chUiJS_Video");
         // Плеер — именованная группа: своих ролей у панели нет, а без имени скринридер
         // читает подряд безымянные кнопки без контекста
         this.#chui_vp_main.setAttribute("role", "group");
@@ -78,7 +91,7 @@ class Video {
         this.#chui_vt.addEventListener("volumechange", () => this.#renderVolume());
         this.#chui_vt.addEventListener("error", () => {
             Log.error(`[Video] не удалось прочитать дорожку: ${this.getSrc()}`);
-            this.#setStatus(I18n.t("media.videoNotPlaying", {reason: I18n.t("media.error.sourceFailed")}));
+            this.#setStatus(I18n.t("media.videoNotPlaying", { reason: I18n.t("media.error.sourceFailed") }));
         });
         this.#chui_vp_main.addEventListener("mouseenter", this.#onEnter);
         this.#chui_vp_main.addEventListener("mouseleave", this.#onLeave);
@@ -98,7 +111,7 @@ class Video {
         this.#setButton(this.#chui_vp_play_pause, I18n.t("media.play"), Icons.AUDIO_VIDEO.PLAY_ARROW);
         this.#setButton(this.#chui_vp_volume_icon, I18n.t("media.mute"), Icons.AUDIO_VIDEO.VOLUME_UP);
         this.#setButton(this.#chui_vp_full_mode, I18n.t("media.fullscreen"), Icons.NAVIGATION.FULLSCREEN);
-        this.#chui_vp_time = new Label({text: this.#calculateTime(0)});
+        this.#chui_vp_time = new Label({ text: this.#calculateTime(0) });
         this.#chui_vp_seek.type = "range";
         this.#chui_vp_seek.id = "chui_vp_seek";
         this.#chui_vp_seek.max = "0";
@@ -133,15 +146,17 @@ class Video {
         if (!this.#controls) return;
         this.#chui_vp_main.classList.add("vp_panel_open");
     }
-    #closePanel() { this.#chui_vp_main.classList.remove("vp_panel_open"); }
+    #closePanel() {
+        this.#chui_vp_main.classList.remove("vp_panel_open");
+    }
     #playPause = async () => {
         if (this.getPaused()) await this.play();
         else this.pause();
-    }
+    };
     #toggleFullscreen = async () => {
         if (document.fullscreenElement === null) await this.requestFullscreen();
         else await this.exitFullscreen();
-    }
+    };
     #renderPlayState(playing) {
         this.#setIcon(this.#chui_vp_play_pause, playing ? Icons.AUDIO_VIDEO.PAUSE : Icons.AUDIO_VIDEO.PLAY_ARROW);
         this.#setLabel(this.#chui_vp_play_pause, playing ? I18n.t("media.pause") : I18n.t("media.play"));
@@ -150,21 +165,23 @@ class Video {
         const доля = Math.min(100, Math.max(0, Math.round(this.#chui_vt.volume * 100)));
         this.#chui_vp_volume.value = String(доля);
         this.#chui_vp_volume.disabled = this.getMuted();
-        this.#chui_vp_main.style.setProperty('--volume-before-width', `${доля}%`);
-        this.#setIcon(this.#chui_vp_volume_icon, this.getMuted() || this.#chui_vt.volume === 0
-            ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP);
+        this.#chui_vp_main.style.setProperty("--volume-before-width", `${доля}%`);
+        this.#setIcon(
+            this.#chui_vp_volume_icon,
+            this.getMuted() || this.#chui_vt.volume === 0 ? Icons.AUDIO_VIDEO.VOLUME_OFF : Icons.AUDIO_VIDEO.VOLUME_UP
+        );
         this.#chui_vp_volume_icon.setAttribute("aria-label", I18n.t(this.getMuted() ? "media.unmute" : "media.mute"));
-    }
+    };
     #displayBufferedAmount = () => {
         const max = Number(this.#chui_vp_seek.max);
         if (!(max > 0)) return;
         try {
-            const end = Math.floor(this.#chui_vt.buffered.end(0) / max * 100);
+            const end = Math.floor((this.#chui_vt.buffered.end(0) / max) * 100);
             this.#chui_vp_seek_buf.style.width = `${Math.min(100, Math.max(0, end))}%`;
         } catch (_error) {
             // Буфер ещё пуст — рисовать нечего
         }
-    }
+    };
     // Длительность приходит с метаданными: без неё полоса прокрутки делила бы на ноль,
     // а у живого потока её нет вовсе (duration = Infinity)
     #setSliderMax = () => {
@@ -173,7 +190,7 @@ class Video {
         this.#chui_vp_seek.max = known ? String(Math.floor(duration)) : "0";
         // Без известной длительности ползунок бессмысленен: перетаскивание отправляло бы плеер в начало
         this.#chui_vp_seek.disabled = !known;
-    }
+    };
     #renderProgress = () => {
         const max = Number(this.#chui_vp_seek.max);
         const position = this.getCurrentTime();
@@ -181,24 +198,26 @@ class Video {
         if (!(max > 0)) {
             // «0:07 / 0:00» читалось бы как поломка: у источника без длительности показываем только прошедшее
             this.#chui_vp_time.setText(this.#calculateTime(position));
-            this.#chui_vp_main.style.setProperty('--seek-before-width', '0%');
+            this.#chui_vp_main.style.setProperty("--seek-before-width", "0%");
             return;
         }
         this.#chui_vp_time.setText(`${this.#calculateTime(position)} / ${this.#calculateTime(duration)}`);
         this.#chui_vp_seek.value = String(Math.floor(position));
         // Доля ограничена сотней: `max` — округлённая длительность, а позиция идёт дальше,
         // и без ограничения полоса целиком заливалась акцентом
-        const доля = Math.min(100, Math.max(0, Math.floor(position / max * 100)));
-        this.#chui_vp_main.style.setProperty('--seek-before-width', `${доля}%`);
-    }
+        const доля = Math.min(100, Math.max(0, Math.floor((position / max) * 100)));
+        this.#chui_vp_main.style.setProperty("--seek-before-width", `${доля}%`);
+    };
     #calculateTime = (secs) => {
         const seconds = Number.isFinite(Number(secs)) ? Number(secs) : 0;
         const minutes = Math.floor(seconds / 60);
         const rest = Math.floor(seconds % 60);
         const returnedSeconds = rest < 10 ? `0${rest}` : `${rest}`;
         return `${minutes}:${returnedSeconds}`;
+    };
+    #setStatus(text) {
+        this.#status.innerText = text;
     }
-    #setStatus(text) { this.#status.innerText = text; }
     #setButton(node, label, icon) {
         node.innerHTML = new Icon(icon, "18px").getHTML();
         node.setAttribute("aria-label", label);
@@ -220,71 +239,143 @@ class Video {
         if (!this.#controls) this.#closePanel();
         return this;
     }
-    getControls() { return this.#controls; }
+    getControls() {
+        return this.#controls;
+    }
     // === СТАНДАРТНЫЕ ВОЗМОЖНОСТИ `<video>` ===
     /** Сам элемент: для всего, чего нет в списке ниже */
-    getVideo() { return this.#chui_vt; }
+    getVideo() {
+        return this.#chui_vt;
+    }
     /** Воспроизведение: промис, как у `<video>` (разрешается, когда воспроизведение началось) */
-    play() { return this.#chui_vt.play(); }
-    pause() { this.#chui_vt.pause(); return this; }
-    load() { this.#chui_vt.load(); return this; }
-    canPlayType(type = String()) { return this.#chui_vt.canPlayType(type); }
-    getSrc() { return this.#chui_vt.getAttribute("src") ?? ""; }
+    play() {
+        return this.#chui_vt.play();
+    }
+    pause() {
+        this.#chui_vt.pause();
+        return this;
+    }
+    load() {
+        this.#chui_vt.load();
+        return this;
+    }
+    canPlayType(type = String()) {
+        return this.#chui_vt.canPlayType(type);
+    }
+    getSrc() {
+        return this.#chui_vt.getAttribute("src") ?? "";
+    }
     setSrc(url = String()) {
         this.#chui_vt.setAttribute("src", url);
         this.#chui_vt.load();
         return this;
     }
-    getSrcObject() { return this.#chui_vt.srcObject; }
+    getSrcObject() {
+        return this.#chui_vt.srcObject;
+    }
     /** Живой поток (камера, `getUserMedia`) — штатное `srcObject`, а не путь */
     setSrcObject(object) {
         this.#chui_vt.srcObject = object;
         return this;
     }
-    getPoster() { return this.#chui_vt.getAttribute("poster") ?? ""; }
+    getPoster() {
+        return this.#chui_vt.getAttribute("poster") ?? "";
+    }
     setPoster(url = String()) {
         if (url === "") this.#chui_vt.removeAttribute("poster");
         else this.#chui_vt.setAttribute("poster", url);
         return this;
     }
-    getCurrentTime() { return this.#chui_vt.currentTime; }
+    getCurrentTime() {
+        return this.#chui_vt.currentTime;
+    }
     setCurrentTime(seconds = Number()) {
         this.#chui_vt.currentTime = Number(seconds);
         // Подписи и заливка не ждут `timeupdate`: перемотка из кода видна сразу
         this.#renderProgress();
         return this;
     }
-    getDuration() { return this.#chui_vt.duration; }
-    getBuffered() { return this.#chui_vt.buffered; }
-    getPaused() { return this.#chui_vt.paused; }
-    getEnded() { return this.#chui_vt.ended; }
-    getReadyState() { return this.#chui_vt.readyState; }
-    getVolume() { return this.#chui_vt.volume; }
+    getDuration() {
+        return this.#chui_vt.duration;
+    }
+    getBuffered() {
+        return this.#chui_vt.buffered;
+    }
+    getPaused() {
+        return this.#chui_vt.paused;
+    }
+    getEnded() {
+        return this.#chui_vt.ended;
+    }
+    getReadyState() {
+        return this.#chui_vt.readyState;
+    }
+    getVolume() {
+        return this.#chui_vt.volume;
+    }
     setVolume(value = Number()) {
         this.#chui_vt.volume = Math.min(1, Math.max(0, Number(value)));
         return this;
     }
-    getMuted() { return this.#chui_vt.muted; }
+    getMuted() {
+        return this.#chui_vt.muted;
+    }
     setMuted(boolean = Boolean()) {
         this.#chui_vt.muted = boolean === true;
         return this;
     }
-    getPlaybackRate() { return this.#chui_vt.playbackRate; }
-    setPlaybackRate(rate = Number()) { this.#chui_vt.playbackRate = Number(rate); return this; }
-    getDefaultPlaybackRate() { return this.#chui_vt.defaultPlaybackRate; }
-    setDefaultPlaybackRate(rate = Number()) { this.#chui_vt.defaultPlaybackRate = Number(rate); return this; }
-    getLoop() { return this.#chui_vt.loop; }
-    setLoop(boolean = Boolean()) { this.#chui_vt.loop = boolean === true; return this; }
-    getAutoplay() { return this.#chui_vt.autoplay; }
-    setAutoplay(boolean = Boolean()) { this.#chui_vt.autoplay = boolean === true; return this; }
-    getWidth() { return getComputedStyle(this.#chui_vt).width; }
-    setWidth(value = String()) { this.#chui_vt.style.width = value; return this; }
-    getHeight() { return getComputedStyle(this.#chui_vt).height; }
-    setHeight(value = String()) { this.#chui_vt.style.height = value; return this; }
-    getFullscreen() { return this.#chui_vp_main === document.fullscreenElement; }
+    getPlaybackRate() {
+        return this.#chui_vt.playbackRate;
+    }
+    setPlaybackRate(rate = Number()) {
+        this.#chui_vt.playbackRate = Number(rate);
+        return this;
+    }
+    getDefaultPlaybackRate() {
+        return this.#chui_vt.defaultPlaybackRate;
+    }
+    setDefaultPlaybackRate(rate = Number()) {
+        this.#chui_vt.defaultPlaybackRate = Number(rate);
+        return this;
+    }
+    getLoop() {
+        return this.#chui_vt.loop;
+    }
+    setLoop(boolean = Boolean()) {
+        this.#chui_vt.loop = boolean === true;
+        return this;
+    }
+    getAutoplay() {
+        return this.#chui_vt.autoplay;
+    }
+    setAutoplay(boolean = Boolean()) {
+        this.#chui_vt.autoplay = boolean === true;
+        return this;
+    }
+    getWidth() {
+        return getComputedStyle(this.#chui_vt).width;
+    }
+    setWidth(value = String()) {
+        this.#chui_vt.style.width = value;
+        return this;
+    }
+    getHeight() {
+        return getComputedStyle(this.#chui_vt).height;
+    }
+    setHeight(value = String()) {
+        this.#chui_vt.style.height = value;
+        return this;
+    }
+    getFullscreen() {
+        return this.#chui_vp_main === document.fullscreenElement;
+    }
     /** Полный экран — на весь плеер, а не на кадр: иначе полоса управления осталась бы снаружи */
-    requestFullscreen() { return this.#chui_vp_main.requestFullscreen({ navigationUI: "hide" }); }
-    exitFullscreen() { return document.exitFullscreen(); }
+    requestFullscreen() {
+        return this.#chui_vp_main.requestFullscreen({ navigationUI: "hide" });
+    }
+    exitFullscreen() {
+        return document.exitFullscreen();
+    }
     addEventListener(type = String(), listener = () => {}) {
         this.#chui_vt.addEventListener(type, listener);
         return this;
@@ -293,7 +384,9 @@ class Video {
         this.#chui_vt.removeEventListener(type, listener);
         return this;
     }
-    set() { return this.#chui_vp_main; }
+    set() {
+        return this.#chui_vp_main;
+    }
     detach() {
         this.pause();
         this.#chui_vp_main.remove();
@@ -320,4 +413,4 @@ class Video {
     }
 }
 
-exports.Video = Video
+exports.Video = Video;

package/framework/components/chui_media/video_styles.css

@@ -64,7 +64,9 @@ chui_vp_main.vp_controls_off chui_vp_panel {
 }
 
 /* КНОПКИ: площадка 32px с глифом 18px */
-chui_vp_play_pause, chui_vp_volume_icon, chui_vp_full_mode {
+chui_vp_play_pause,
+chui_vp_volume_icon,
+chui_vp_full_mode {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -97,12 +99,13 @@ chui_vp_play_pause:hover {
 }
 
 chui_vp_play_pause:active {
-    transform: scale(.96);
+    transform: scale(0.96);
 }
 
 /* Глифы отвечают на курсор акцентом — у всех, кроме главной кнопки: она сама светлая,
    и её глиф должен остаться читаемым */
-chui_vp_volume_icon:hover chui_icon, chui_vp_full_mode:hover chui_icon {
+chui_vp_volume_icon:hover chui_icon,
+chui_vp_full_mode:hover chui_icon {
     color: var(--blue_prime_background);
 }
 
@@ -113,7 +116,7 @@ chui_vp_play_pause:active chui_icon {
 
 chui_vp_volume_icon:active,
 chui_vp_full_mode:active {
-    transform: scale(.94);
+    transform: scale(0.94);
 }
 
 chui_vp_volume_icon:active chui_icon,
@@ -123,8 +126,11 @@ chui_vp_full_mode:active chui_icon {
 
 /* Кнопки полосы — кастомные теги, поэтому обводку фокуса рисуем сами.
    `outline` не сдвигает вёрстку */
-chui_vp_play_pause:focus-visible, chui_vp_volume_icon:focus-visible,
-chui_vp_full_mode:focus-visible, #chui_vp_seek:focus-visible, #chui_vp_volume:focus-visible {
+chui_vp_play_pause:focus-visible,
+chui_vp_volume_icon:focus-visible,
+chui_vp_full_mode:focus-visible,
+#chui_vp_seek:focus-visible,
+#chui_vp_volume:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -162,7 +168,8 @@ chui_vp_seek_buf {
 /* Прогресс и громкость — та же шкала, что у Audio: дорожка `--player_track_height`,
    заливка градиентом по доле, ползунок виден и в покое и не выезжает за дорожку
    (`padding-inline` на половину кружка) */
-#chui_vp_seek, #chui_vp_volume {
+#chui_vp_seek,
+#chui_vp_volume {
     margin: 0;
     -webkit-appearance: none;
     border-radius: var(--radius_pill);
@@ -194,24 +201,30 @@ chui_vp_seek_buf {
 }
 
 #chui_vp_seek {
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         var(--blue_prime_background) 0 var(--seek-before-width, 0%),
-        var(--ap_slider_background) var(--seek-before-width, 0%) 100%);
+        var(--ap_slider_background) var(--seek-before-width, 0%) 100%
+    );
 }
 
 /* Громкость — ступень звука, а не время: заливка нейтральная, чтобы не читалась второй
    полосой прогресса */
 #chui_vp_volume {
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         var(--text_color) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%);
+        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+    );
 }
 
 /* Выключенная громкость (нет звука) — заливка ступени приглушается, как у Audio */
 #chui_vp_volume:disabled {
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         var(--ap_slider_buf_background) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%);
+        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+    );
 }
 
 #chui_vp_seek::-webkit-slider-runnable-track,
@@ -224,7 +237,8 @@ chui_vp_seek_buf {
 
 /* Ползунок виден всегда, но в покое он меньше — как у Audio. Ободок цвета полосы
    управления нужен там, где заливка белая */
-#chui_vp_seek::-webkit-slider-thumb, #chui_vp_volume::-webkit-slider-thumb {
+#chui_vp_seek::-webkit-slider-thumb,
+#chui_vp_volume::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: none;
     height: 9px;
@@ -254,10 +268,13 @@ chui_vp_main:hover #chui_vp_volume:not(:disabled)::-webkit-slider-thumb,
     width: 12px;
     margin-top: calc((var(--player_track_height) - 12px) / 2);
     background-color: var(--player_thumb_background);
-    box-shadow: 0 0 0 2px var(--header_background), var(--box_shadow_main);
+    box-shadow:
+        0 0 0 2px var(--header_background),
+        var(--box_shadow_main);
 }
 
-#chui_vp_seek:focus, #chui_vp_volume:focus,
+#chui_vp_seek:focus,
+#chui_vp_volume:focus,
 #chui_vp_seek:focus::-webkit-slider-runnable-track,
 #chui_vp_volume:focus::-webkit-slider-runnable-track {
     outline: none;

package/framework/components/chui_menu_bar/menu_bar.js

@@ -1,5 +1,5 @@
-const {Animation} = require("../../modules/chui_animations/animations");
-const {MenuKeyboard, makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { MenuKeyboard, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 const MENU_BAR_DROP_DOWN_ACTIVE_CLASS = "menu_bar_drop_down_button";
 // Панель открывается под кнопкой с зазором и не подходит к краю окна ближе этого отступа
@@ -10,13 +10,13 @@ class MenuBar {
     // Панели выпадающих списков лежат в body, а не в полосе (см. MenuBarDropDown), поэтому
     // снятие полосы обязано убирать и их: экземпляр находится по узлу полосы
     static #instances = new WeakMap();
-    #chui_menu_bar_main = document.createElement("chui_menu_bar_main")
+    #chui_menu_bar_main = document.createElement("chui_menu_bar_main");
     #dropdowns = [];
     constructor(options = { test: Boolean() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MenuBar');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MenuBar");
         MenuBar.#instances.set(this.#chui_menu_bar_main, this);
-        if (options.test !== undefined) this.#chui_menu_bar_main.setAttribute("test", options.test)
-        this.#chui_menu_bar_main.addEventListener("wheel", this.#wheel_event, {passive: true});
+        if (options.test !== undefined) this.#chui_menu_bar_main.setAttribute("test", options.test);
+        this.#chui_menu_bar_main.addEventListener("wheel", this.#wheel_event, { passive: true });
     }
     /*
      * Колесо мыши прокручивает полосу вбок.
@@ -33,8 +33,8 @@ class MenuBar {
     };
     addMenuItems(...components) {
         for (let component of components) {
-            let element = component.set()
-            new Animation(element).fadeIn()
+            let element = component.set();
+            new Animation(element).fadeIn();
             this.#chui_menu_bar_main.appendChild(element);
             if (component instanceof MenuBarDropDown) this.#dropdowns.push(component);
         }
@@ -59,8 +59,8 @@ class MenuBar {
     set() {
         return this.#chui_menu_bar_main;
     }
-    static DROPDOWN(options = {title: String(), items: []}) {
-        return new MenuBarDropDown(options)
+    static DROPDOWN(options = { title: String(), items: [] }) {
+        return new MenuBarDropDown(options);
     }
 }
 
@@ -70,14 +70,15 @@ class MenuBarDropDown {
     #mb_dd_dropdown = document.createElement("menu_bar_dropdown");
     #is_open = false;
     #keyboard = undefined;
-    constructor(options = {title: String(), items: []}) {
+    constructor(options = { title: String(), items: [] }) {
         // Панель собирают и отдельно от полосы (`MenuBar.DROPDOWN`) — свои стили нужны здесь же
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_MenuBar');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MenuBar");
         // Пустой заголовок остаётся пустым: подстановка заготовки опции рисовала слово «undefined»
         this.#mb_dd_button.innerText = options.title === undefined || options.title === null ? "" : options.title;
         this.#mb_dd_dropdown.id = require("randomstring").generate();
-        this.#mb_dd_main.appendChild(this.#mb_dd_button)
-        for (let item of Array.isArray(options.items) ? options.items : []) this.#mb_dd_dropdown.appendChild(item.set());
+        this.#mb_dd_main.appendChild(this.#mb_dd_button);
+        for (let item of Array.isArray(options.items) ? options.items : [])
+            this.#mb_dd_dropdown.appendChild(item.set());
         // Панель лежит в document.body, а не рядом с кнопкой: шапка — сама с backdrop-filter,
         // а элемент с backdrop-filter становится «backdrop root» — вложенная панель тогда не
         // блюрит содержимое под собой (замер: детальность 33.4 и с блюром, и без него; вне шапки
@@ -89,7 +90,7 @@ class MenuBarDropDown {
         this.#keyboard = new MenuKeyboard(this.#mb_dd_dropdown, {
             itemSelector: "button",
             onEscape: () => this.#close(),
-            trigger: this.#mb_dd_button
+            trigger: this.#mb_dd_button,
         });
         makeKeyboardButton(this.#mb_dd_button);
         // Закрытый список тоже должен быть объявлен как закрытый: без этого у кнопки,
@@ -115,8 +116,8 @@ class MenuBarDropDown {
         // fadeIn показывает панель (display: flex), и только после этого её можно измерить
         new Animation(this.#mb_dd_dropdown).fadeIn();
         this.#positionDropdown();
-        window.addEventListener('click', this.#window_click_event);
-        window.addEventListener('resize', this.#position_dropdown_event);
+        window.addEventListener("click", this.#window_click_event);
+        window.addEventListener("resize", this.#position_dropdown_event);
         this.#keyboard.setExpanded(true);
     }
     #close() {
@@ -124,8 +125,8 @@ class MenuBarDropDown {
         this.#is_open = false;
         this.#mb_dd_button.classList.remove(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
         new Animation(this.#mb_dd_dropdown).fadeOut();
-        window.removeEventListener('click', this.#window_click_event);
-        window.removeEventListener('resize', this.#position_dropdown_event);
+        window.removeEventListener("click", this.#window_click_event);
+        window.removeEventListener("resize", this.#position_dropdown_event);
         this.#keyboard.setExpanded(false);
     }
     // position: fixed — координаты считаются от окна, поэтому панель пересчитывается и на resize
@@ -142,17 +143,18 @@ class MenuBarDropDown {
         this.#mb_dd_dropdown.style.top = `${Math.round(button.bottom + MENU_BAR_DROPDOWN_GAP)}px`;
     }
     #mb_dd_button_click_event = () => {
-        if (this.#is_open) this.#close(); else this.#open();
-    }
+        if (this.#is_open) this.#close();
+        else this.#open();
+    };
     #mb_dd_dropdown_click_event = () => {
         this.#close();
-    }
+    };
     // «Снаружи» — это и кнопка с обёрткой, и сама панель: она теперь не их потомок
     #window_click_event = (event) => {
         if (!this.#is_open) return;
         if (this.#mb_dd_main.contains(event.target) || this.#mb_dd_dropdown.contains(event.target)) return;
         this.#close();
-    }
+    };
     #position_dropdown_event = () => this.#positionDropdown();
     /**
      * Убрать панель из body, не трогая клавиатурный слой: панель живёт в body, а не в полосе,
@@ -175,4 +177,4 @@ class MenuBarDropDown {
     }
 }
 
-exports.MenuBar = MenuBar
+exports.MenuBar = MenuBar;

package/framework/components/chui_menu_bar/styles.css

@@ -57,7 +57,8 @@ chui_menu_bar_main .chui_button:hover {
 }
 
 chui_menu_bar_main .chui_button:active:not(:disabled) {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
     border: none;
 }
 
@@ -173,7 +174,8 @@ menu_bar_dropdown .chui_button:hover {
 }
 
 menu_bar_dropdown .chui_button:active:not(:disabled) {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
     border: none;
 }