chuijs 4.0.3 → 4.0.4

package/framework/components/chui_sticky_bar/sticky_bar.js

@@ -31,8 +31,11 @@ const { setStyles, optionOr, scrollParent } = require("../../modules/chui_functi
  * пересекает границу ровно в момент закрепления и даёт неустойчивый сигнал на дробных пикселях.
  * Поэтому раз в кадр сравниваются верх полосы и верх области прокрутки; слушатель `scroll` —
  * пассивный, работа сведена к одному замеру на кадр через `requestAnimationFrame`.
- *
- * Доступность: компонент ничего не объявляет и не перехватывает — содержимое остаётся обычным
+ * * **Пока узел не в документе, контейнер не ищется.** Прокручиваемого предка у такого узла нет,
+ * и поиск вернул бы документ: порог встал бы на нуле, и полоса никогда не «закрепилась» бы —
+ * в разметке она осталась бы без фона, рамки и тени. Поэтому компонент ждёт появления узла
+ * в документе (наблюдателем, а не опросом по кадрам) и только потом подключается.
+ * * Доступность: компонент ничего не объявляет и не перехватывает — содержимое остаётся обычным
  * содержимым. `destroy()` снимает слушатели; повторный вызов безвреден.
  */
 class StickyBar {
@@ -44,11 +47,13 @@ class StickyBar {
     #offset = "0px";
     #target = undefined;
     #stuck = false;
-    #on_change = undefined;
+    #onChange = undefined;
     #container = undefined;
     #destroyed = false;
     #frame = 0;
     #pending = 0;
+    // Наблюдатель за вставкой узла в документ: до неё области прокрутки ещё нет
+    #insert = undefined;
 
     constructor(
         options = {
@@ -66,7 +71,7 @@ class StickyBar {
         this.#root.dataset.stuck = "false";
         this.#root.appendChild(this.#content);
         this.#target = options.target;
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         this.setOffset(options.offset === undefined ? 0 : options.offset);
         this.#observe();
     }
@@ -112,13 +117,13 @@ class StickyBar {
     /** Отступ закрепления: число пикселей или строка CSS (`"12px"`, `"var(--header_height)"`) */
     setOffset(offset = Number()) {
         this.#offset = typeof offset === "string" ? offset : `${Number(offset) || 0}px`;
-        this.#root.style.setProperty("--sticky_offset", this.#offset);
+        this.#root.style.setProperty("--sticky_bar_offset", this.#offset);
         this.update();
         return this;
     }
 
     setOnChange(listener = undefined) {
-        this.#on_change = listener;
+        this.#onChange = listener;
         return this;
     }
 
@@ -160,8 +165,9 @@ class StickyBar {
     // === ВНУТРЕННЕЕ ===
     /**
      * Первое подключение — на следующем кадре: узел обычно вставляют в документ сразу после
-     * `set()`, и только тогда виден настоящий контейнер прокрутки. Повторные вызовы ничего не
-     * делают, пока подключение не снято.
+     * `set()`, и только тогда виден настоящий контейнер прокрутки. Если к этому кадру узел ещё
+     * не в документе (страница собирается позже), ждём вставки — иначе контейнером стал бы документ.
+     * Повторные вызовы ничего не делают, пока подключение не снято.
      */
     #observe() {
         if (this.#destroyed === true) return;
@@ -174,6 +180,13 @@ class StickyBar {
 
     #attach() {
         if (this.#destroyed === true) return;
+        // Узел ещё не в документе: прокручиваемого предка у него нет, и поиск контейнера вернул бы
+        // документ — порог встал бы на нуле, и полоса никогда не «закрепилась» бы (без фона, рамки
+        // и тени). Ждём вставки наблюдателем, а не опросом по кадрам
+        if (this.#root.isConnected === false) {
+            this.#awaitInsert();
+            return;
+        }
         this.#container = this.getTarget();
         if (this.#container instanceof Element) {
             this.#container.addEventListener("scroll", this.#onScroll, { passive: true });
@@ -182,7 +195,25 @@ class StickyBar {
         this.#schedule();
     }
 
+    /** Ждём появления узла в документе; наблюдатель снимается сразу после вставки или в `detach()` */
+    #awaitInsert() {
+        if (this.#insert !== undefined || this.#destroyed === true) return;
+        this.#insert = new MutationObserver(() => {
+            if (this.#root.isConnected === false) return;
+            this.#dropInsert();
+            this.#attach();
+        });
+        this.#insert.observe(document.body, { childList: true, subtree: true });
+    }
+
+    #dropInsert() {
+        if (this.#insert === undefined) return;
+        this.#insert.disconnect();
+        this.#insert = undefined;
+    }
+
     #detach() {
+        this.#dropInsert();
         if (this.#container instanceof Element) {
             this.#container.removeEventListener("scroll", this.#onScroll);
         }
@@ -218,17 +249,17 @@ class StickyBar {
         if (!(container instanceof Element) || this.#root.isConnected === false) return;
         // Порог — от края содержимого контейнера: собственный отступ прокрутки браузер
         // учитывает сам, а рамку — нет, поэтому она прибавляется отдельно
-        const container_style = window.getComputedStyle(container);
-        const padding = Number.parseFloat(container_style.paddingTop) || 0;
-        const reference_top = container.getBoundingClientRect().top + container.clientTop + padding;
+        const containerStyle = window.getComputedStyle(container);
+        const padding = Number.parseFloat(containerStyle.paddingTop) || 0;
+        const referenceTop = container.getBoundingClientRect().top + container.clientTop + padding;
         const inset = Number.parseFloat(window.getComputedStyle(this.#root).top);
         const offset = Number.isFinite(inset) ? inset : 0;
-        const stuck = this.#root.getBoundingClientRect().top <= reference_top + offset + 1;
+        const stuck = this.#root.getBoundingClientRect().top <= referenceTop + offset + 1;
         if (stuck === this.#stuck) return;
         this.#stuck = stuck;
         this.#root.dataset.stuck = String(stuck);
         this.#root.classList.toggle("sticky_bar_stuck", stuck);
-        if (typeof this.#on_change === "function") this.#on_change(stuck);
+        if (typeof this.#onChange === "function") this.#onChange(stuck);
     }
 }
 

package/framework/components/chui_sticky_bar/styles.css

@@ -1,11 +1,11 @@
 /* Прилипающая полоса: корень сам липнет к верху области прокрутки, поэтому место в потоке
-   сохраняется и подпорка-заглушка не нужна. Отступ задаёт компонент переменной `--sticky_offset`
+   сохраняется и подпорка-заглушка не нужна. Отступ задаёт компонент переменной `--sticky_bar_offset`
    (число или CSS-значение); отсчитывается он от края содержимого области прокрутки. */
 chui_sticky_bar {
-    --sticky_offset: 0px;
+    --sticky_bar_offset: 0px;
     display: block;
     position: sticky;
-    inset-block-start: var(--sticky_offset);
+    inset-block-start: var(--sticky_bar_offset);
     width: -webkit-fill-available;
     /* Ниже шапки (999) и выше содержимого страницы: полоса — слой над текстом, но под оболочкой */
     z-index: 6;
@@ -25,15 +25,17 @@ sticky_bar_content {
     border: 1px solid transparent;
     border-radius: var(--radius_md);
     transition:
-        background-color var(--transition_time) ease,
-        box-shadow var(--transition_time) ease;
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
-/* Закреплённая полоса читается отдельным слоем: материал как у шапки, волосяной край и тень.
-   В покое она — обычная строка содержимого, ни фона, ни тени */
+/* Закреплённая полоса читается отдельным слоем: волосяной край и тень, а заливка — цвет
+   подложки (`--bar_background`), как у шапки, меню маршрутов и ящика уведомлений: полоса
+   выходит из подложки, а не лежит на ней светлой плашкой. В покое она — обычная строка
+   содержимого, ни фона, ни тени */
 chui_sticky_bar[data-stuck="true"] sticky_bar_content {
     border-color: var(--border_color);
-    background: var(--header_background);
+    background: var(--bar_background);
     backdrop-filter: var(--global_blur);
     box-shadow: var(--box_shadow_main);
 }

package/framework/components/chui_tabs/chui_tabs.js

@@ -1,14 +1,14 @@
-let { Animation } = require("../../modules/chui_animations/animations");
+const { Animation } = require("../../modules/chui_animations/animations");
 const { Icon, Icons } = require("../chui_icons/icons");
 const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Идентификаторы вкладок для aria-controls/aria-labelledby */
-let a11y_tab_counter = 0;
+let a11yTabCounter = 0;
 
 class Tab {
     #tab = document.createElement("tab");
-    #tab_content = [];
+    #tabContent = [];
     #title = String();
     #closable = false;
     #close = undefined;
@@ -19,7 +19,7 @@ class Tab {
         if (options.closable === true) this.setClosable(true);
     }
     addContent(...contents) {
-        for (let content of contents) this.#tab_content.push(content);
+        for (const content of contents) this.#tabContent.push(content);
     }
     getTab() {
         return this.#tab;
@@ -28,7 +28,7 @@ class Tab {
         return this.#title;
     }
     getContent() {
-        return this.#tab_content;
+        return this.#tabContent;
     }
     /**
      * Закрываемая вкладка: у неё появляется кнопка закрытия, а `Tabs` закрывает её
@@ -72,14 +72,16 @@ class Tabs {
     #active = -1;
     // Вкладка, содержимое которой сейчас в панели: индекс меняется при закрытии соседей
     #rendered = undefined;
-    #id_contents = require("randomstring").generate();
+    #idContents = require("randomstring").generate();
     #tabs = document.createElement("tabs");
-    #id_list = require("randomstring").generate();
+    #idList = require("randomstring").generate();
     #list = document.createElement("list");
     #content = document.createElement("content");
     #status = document.createElement("tabs_status");
-    #on_tab_close = undefined;
-    #animationend_event = () => {
+    // Отложенный кадр пересчёта подложки выбранной вкладки
+    #indicatorFrame = undefined;
+    #onTabClose = undefined;
+    #animationendEvent = () => {
         // Следы анимации снимаются точечно: `removeAttribute("style")` снёс бы и чужие
         // инлайновые значения, если они появятся
         this.#content.style.removeProperty("animation-name");
@@ -90,9 +92,9 @@ class Tabs {
         options = { width: String(), default: Number(), tabs: [], closable: Boolean(), onTabClose: undefined }
     ) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Tabs");
-        this.#on_tab_close = options.onTabClose;
-        this.#list.id = this.#id_list;
-        this.#content.id = this.#id_contents;
+        this.#onTabClose = options.onTabClose;
+        this.#list.id = this.#idList;
+        this.#content.id = this.#idContents;
         // Доступность: tablist/tab/tabpanel с roving tabindex
         this.#list.setAttribute("role", "tablist");
         this.#content.setAttribute("role", "tabpanel");
@@ -166,8 +168,10 @@ class Tabs {
         if (!Number.isInteger(at) || at < 0 || at >= this.#items.length) return this;
         const tab = this.#items[at];
         // Смотрим на вкладку, а не на её место: индекс активной мог сдвинуться при закрытии
-        const closing_rendered = tab === this.#rendered;
-        tab.getTab().remove();
+        const closingRendered = tab === this.#rendered;
+        // Уход идёт движением: узел убирается по концу кадра, а состав и индексы меняются
+        // сразу — иначе активная вкладка считалась бы по несуществующему узлу
+        this.#leaveNode(tab.getTab());
         this.#items.splice(at, 1);
         // Активная вкладка осталась собой, но её место сдвинулось
         if (at < this.#active) this.#active -= 1;
@@ -179,10 +183,10 @@ class Tabs {
             this.#announce(I18n.t("navigation.tabClosedNothing", { title: tab.getTitle() }));
             return this;
         }
-        if (closing_rendered) this.#active = Math.min(at, this.#items.length - 1);
-        this.#activate(this.#active, closing_rendered);
+        if (closingRendered) this.#active = Math.min(at, this.#items.length - 1);
+        this.#activate(this.#active, closingRendered);
         this.#announce(
-            closing_rendered
+            closingRendered
                 ? I18n.t("navigation.tabClosedOpened", {
                       title: tab.getTitle(),
                       active: this.#items[this.#active].getTitle(),
@@ -196,11 +200,11 @@ class Tabs {
     // так `Tab.setClosable()` работает и после того, как вкладка встала в панель
     #bindTab(tab = new Tab(), at = Number()) {
         const node = tab.getTab();
-        if (node.id === undefined || node.id === "") node.id = "chui_a11y_tab_" + (a11y_tab_counter += 1);
+        if (node.id === undefined || node.id === "") node.id = "chui_a11y_tab_" + (a11yTabCounter += 1);
         node.setAttribute("role", "tab");
         node.setAttribute("tabindex", "-1");
         node.setAttribute("aria-selected", "false");
-        node.setAttribute("aria-controls", this.#id_contents);
+        node.setAttribute("aria-controls", this.#idContents);
         makeKeyboardButton(node, "tab");
         node.addEventListener("click", () => this.#activate(this.#items.indexOf(tab), false));
         const before = this.#list.children[at];
@@ -222,7 +226,7 @@ class Tabs {
     #requestClose(tab = new Tab()) {
         const at = this.#items.indexOf(tab);
         if (at === -1 || !tab.isClosable()) return false;
-        if (this.#on_tab_close !== undefined && this.#on_tab_close(tab, at) === false) return false;
+        if (this.#onTabClose !== undefined && this.#onTabClose(tab, at) === false) return false;
         this.closeTab(at);
         return true;
     }
@@ -246,17 +250,61 @@ class Tabs {
             this.#renderContent(tab);
             this.#rendered = tab;
         }
+        // Подложка выбранной вкладки: место и ширину снимаем по вёрстке
+        this.#scheduleIndicator();
         if (focus) tab.getTab().focus();
         return true;
     }
 
+    /** Подложку двигают после раскладки: место вкладки читается только из вёрстки */
+    #scheduleIndicator() {
+        if (typeof requestAnimationFrame !== "function") {
+            this.#syncIndicator();
+            return;
+        }
+        if (this.#indicatorFrame !== undefined) return;
+        this.#indicatorFrame = requestAnimationFrame(() => {
+            this.#indicatorFrame = undefined;
+            this.#syncIndicator();
+        });
+    }
+
+    /** Уход узла: он гаснет и сходит вверх, а из документа убирается по концу кадра */
+    #leaveNode(node) {
+        node.classList.add("tab_leaving");
+        const done = (event) => {
+            if (event.target !== node) return;
+            node.removeEventListener("animationend", done);
+            node.remove();
+        };
+        node.addEventListener("animationend", done);
+    }
+
+    /**
+     * Место и ширина подложки выбранной вкладки. Ноль — выбора нет или вёрстки ещё нет:
+     * подложки нулевой ширины не видно, поэтому до первой раскладки вид прежний.
+     */
+    #syncIndicator() {
+        const item = this.#items[this.#active];
+        const tab = item === undefined ? undefined : item.getTab();
+        if (tab === undefined || tab.offsetWidth === 0) {
+            this.#list.style.setProperty("--tabs_width", "0px");
+            return;
+        }
+        // В RTL началом ряда служит правый край: подложка стоит у него и едет влево
+        const rtl = window.getComputedStyle(this.#list).direction === "rtl";
+        const x = rtl ? this.#list.clientWidth - (tab.offsetLeft + tab.offsetWidth) : tab.offsetLeft;
+        this.#list.style.setProperty("--tabs_offset", `${rtl ? -x : x}px`);
+        this.#list.style.setProperty("--tabs_width", `${tab.offsetWidth}px`);
+    }
+
     #renderContent(tab = new Tab()) {
         this.#content.innerHTML = "";
         for (const con of tab.getContent()) this.#content.appendChild(con.set());
         new Animation(this.#content).fadeIn();
         // Анимация ставит инлайн-стиль: снимаем его по завершении, иначе он копится
-        this.#content.removeEventListener("animationend", this.#animationend_event);
-        this.#content.addEventListener("animationend", this.#animationend_event);
+        this.#content.removeEventListener("animationend", this.#animationendEvent);
+        this.#content.addEventListener("animationend", this.#animationendEvent);
     }
 
     #onListKeyDown = (event) => {
@@ -280,15 +328,15 @@ class Tabs {
     };
 
     // Активная вкладка: aria-selected, tabindex и связь с панелью
-    #applyAria(active_tab) {
+    #applyAria(activeTab) {
         for (const item of this.#items) {
             const tab = item.getTab();
-            const selected = tab === active_tab;
+            const selected = tab === activeTab;
             tab.setAttribute("aria-selected", selected ? "true" : "false");
             tab.setAttribute("tabindex", selected ? "0" : "-1");
         }
-        if (active_tab.id !== undefined && active_tab.id !== "") {
-            this.#content.setAttribute("aria-labelledby", active_tab.id);
+        if (activeTab.id !== undefined && activeTab.id !== "") {
+            this.#content.setAttribute("aria-labelledby", activeTab.id);
         }
     }
 

package/framework/components/chui_tabs/styles.css

@@ -9,16 +9,38 @@ list {
        вокруг которого вкладки плавали без границ */
     padding: 3px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
-    margin: var(--margin) 0;
+    margin: var(--block_margin) 0;
+    /* Место и ширина подложки выбранной вкладки: считает JS по вёрстке, нули — выбора нет */
+    --tabs_offset: 0px;
+    --tabs_width: 0px;
+}
+
+/* Подложка выбранной вкладки: одна и та же деталь переезжает между вкладками, вместо
+   мгновенной смены заливки — как у SegmentedControl. Отступ по вертикали равен отступу
+   дорожки, поэтому подложка встаёт в ряд вкладок */
+list::before {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    inset-block: 3px;
+    inset-inline-start: 0;
+    width: var(--tabs_width);
+    border-radius: var(--radius_sm);
+    background: var(--blue_prime_background);
+    transform: translateX(var(--tabs_offset));
+    transition:
+        transform var(--motion_base) var(--motion_ease),
+        width var(--motion_base) var(--motion_ease);
+    pointer-events: none;
 }
 
 tab {
     cursor: pointer;
     /* Отступ даёт только `gap` дорожки: свой `margin` добавлял к нему ещё по 1 px
        и дорожка вырастала на 2 px без причины */
-    padding: var(--main_padding_sm);
+    padding: var(--block_padding_sm);
     min-height: var(--control_height);
     box-sizing: border-box;
     font-size: var(--font_default_size);
@@ -28,12 +50,13 @@ tab {
     gap: 4px;
     font-weight: 500;
     color: var(--text_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 /* Наведение — нейтральная тонировка, а не заливка во весь акцент: полная заливка
-   срабатывала на каждое наведение и перетягивала внимание (то же решение, что у Button) */
-tab:hover {
+   срабатывала на каждое наведение и перетягивала внимание (то же решение, что у Button).
+   У выбранной вкладки заливку несёт подложка, поэтому она наведение не ловит */
+tab:not(.tab_active):hover {
     background: var(--element_background_hover);
 }
 
@@ -43,7 +66,7 @@ tab:active {
 }
 
 tabs {
-    margin: var(--margin);
+    margin: var(--block_margin);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -55,23 +78,28 @@ content {
     flex-direction: column;
     width: -webkit-fill-available;
     padding: var(--control_padding);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     border: none;
 }
 
 .tab_active {
-    /* Выбранная вкладка — акцентная заливка и белый текст, как у выбранного сегмента
+    /* Выбранная вкладка — белый текст на подложке-акценте, как у выбранного сегмента
       SegmentedControl и у нажатой Button. Прежняя «тонировка + акцентный текст» давала
       синий текст на синей тонировке (контраст ≈2.5:1) и читалась грязным пятном */
-    background: var(--blue_prime_background);
+    background: transparent;
     color: var(--text_color_hover);
     font-weight: 600;
 }
 
-/* Наведение на выбранной вкладке ничего не меняет: отклик уже в самой заливке */
+/* Уход закрываемой вкладки: она гаснет и сходит вверх, а из дорожки убирается по концу кадра */
+.tab_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+/* Наведение на выбранной вкладке ничего не меняет: отклик уже в самой подложке */
 .tab_active:hover {
-    background: var(--blue_prime_background);
+    background: transparent;
     color: var(--text_color_hover);
 }
 

package/framework/components/chui_text_editor/styles.css

@@ -6,7 +6,7 @@ chui_text_editor_test {
     flex-direction: column;
     width: -webkit-fill-available;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_text_editor {
@@ -26,7 +26,7 @@ chui_editor_controls {
     padding: 4px;
     border: 1px solid var(--border_color);
     border-bottom: none;
-    border-radius: var(--border_radius) var(--border_radius) 0 0;
+    border-radius: var(--radius_sm) var(--radius_sm) 0 0;
     background: var(--element_background_2);
 }
 
@@ -36,7 +36,7 @@ chui_editor_text_input {
     width: -webkit-fill-available;
     padding: 8px 10px;
     border: 1px solid var(--border_color);
-    border-radius: 0 0 var(--border_radius) var(--border_radius);
+    border-radius: 0 0 var(--radius_sm) var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-size: var(--font_default_size);
@@ -60,7 +60,7 @@ chui_editor_text_input div {
 .text_editor_label {
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -76,7 +76,7 @@ p img {
     width: auto;
     height: auto;
     border: 2px solid transparent;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 /* Кнопки панели — как действия панели разметки у MarkdownEditor: сторона из токена
@@ -184,7 +184,7 @@ text_editor_selectbox_dropdown {
     display: none;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     margin-top: 0;
     padding: 6px;
     font-size: var(--font_default_size);
@@ -209,7 +209,7 @@ text_editor_select_button_open {
 text_editor_selectbox_option {
     text-align: start;
     padding: 6px 12px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 /* Заголовок пункта — абзац или заголовок (тег задаёт вызывающий): отступы снимает CSS.