chuijs 4.0.2 → 4.0.4

package/framework/components/chui_shortcut_help/shortcut_help.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {TextInput} = require('../chui_inputs/chui_text/text');
-const {Kbd} = require('../chui_kbd/kbd');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { TextInput } = require("../chui_inputs/chui_text/text");
+const { Kbd } = require("../chui_kbd/kbd");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Шпаргалка горячих клавиш: сочетания с пояснениями, разложенные по группам.
@@ -41,35 +41,44 @@ class ShortcutHelp {
 
     #root = document.createElement("chui_shortcut_help");
     #id = undefined;
-    #id_title = undefined;
+    #idTitle = undefined;
     #title = document.createElement("shortcut_help_title");
     #search = document.createElement("shortcut_help_search");
     #input = undefined;
     #status = document.createElement("shortcut_help_status");
-    #groups_node = document.createElement("shortcut_help_groups");
+    #groupsNode = document.createElement("shortcut_help_groups");
     #empty = document.createElement("shortcut_help_empty");
     #source = [];
     #groups = [];
-    #title_hidden = false;
-    #title_value = undefined;
+    #titleHidden = false;
+    #titleValue = undefined;
     #label = undefined;
     #columns = 1;
     #searchable = false;
     #placeholder = undefined;
-    #empty_text = undefined;
-    #kbd_size = Kbd.SIZE.DEFAULT;
+    #emptyText = undefined;
+    #kbdSize = Kbd.SIZE.DEFAULT;
 
-    constructor(options = {
-        id: String(), title: undefined, groups: [], items: [],
-        columns: Number(), searchable: Boolean(), searchPlaceholder: String(),
-        emptyText: String(), label: String(), kbdSize: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: undefined,
+            groups: [],
+            items: [],
+            columns: Number(),
+            searchable: Boolean(),
+            searchPlaceholder: String(),
+            emptyText: String(),
+            label: String(),
+            kbdSize: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ShortcutHelp");
         ShortcutHelp.#counter += 1;
         this.#id = optionOr(options.id, `chui_shortcut_help_${ShortcutHelp.#counter}`);
-        this.#id_title = `${this.#id}_title`;
+        this.#idTitle = `${this.#id}_title`;
         this.#root.id = this.#id;
-        this.#title.id = this.#id_title;
+        this.#title.id = this.#idTitle;
         // Заголовок — настоящий заголовок: к шпаргалке можно перейти навигацией по заголовкам
         this.#title.setAttribute("role", "heading");
         this.#title.setAttribute("aria-level", "2");
@@ -80,16 +89,16 @@ class ShortcutHelp {
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#search);
         this.#root.appendChild(this.#status);
-        this.#root.appendChild(this.#groups_node);
+        this.#root.appendChild(this.#groupsNode);
         this.#root.appendChild(this.#empty);
         this.#label = options.label;
-        this.#title_hidden = options.title === null;
-        this.#title_value = typeof options.title === "string" && options.title !== "" ? options.title : undefined;
+        this.#titleHidden = options.title === null;
+        this.#titleValue = typeof options.title === "string" && options.title !== "" ? options.title : undefined;
         this.#placeholder = options.searchPlaceholder;
-        this.#empty_text = options.emptyText;
-        if (options.kbdSize !== undefined) this.#kbd_size = options.kbdSize;
+        this.#emptyText = options.emptyText;
+        if (options.kbdSize !== undefined) this.#kbdSize = options.kbdSize;
         this.setColumns(options.columns === undefined ? 1 : options.columns);
-        this.setTitle(this.#title_hidden ? null : this.#title_value);
+        this.setTitle(this.#titleHidden ? null : this.#titleValue);
         if (options.searchable === true) this.setSearchable(true);
         else this.#syncSearch();
         this.#source = ShortcutHelp.#normalizeSource(options);
@@ -103,14 +112,18 @@ class ShortcutHelp {
 
     /** Заголовок на экране (`""`, если он убран) */
     getTitle() {
-        return this.#title_hidden ? "" : this.#title.innerText;
+        return this.#titleHidden ? "" : this.#title.innerText;
     }
 
     /** Группы со строками: `[{title, items: [{keys, description, label}]}]` */
     getGroups() {
         return this.#source.map((group) => ({
             title: group.title,
-            items: group.items.map((item) => ({keys: [...item.keys], description: item.description, label: item.label}))
+            items: group.items.map((item) => ({
+                keys: [...item.keys],
+                description: item.description,
+                label: item.label,
+            })),
         }));
     }
 
@@ -129,7 +142,10 @@ class ShortcutHelp {
 
     /** Сколько строк видно с учётом фильтра */
     getVisibleCount() {
-        return this.#groups.reduce((sum, group) => sum + group.rows.filter((row) => row.node.hidden !== true).length, 0);
+        return this.#groups.reduce(
+            (sum, group) => sum + group.rows.filter((row) => row.node.hidden !== true).length,
+            0
+        );
     }
 
     // SET
@@ -141,10 +157,10 @@ class ShortcutHelp {
 
     /** Заголовок; `null` убирает его (тогда блок называется по `label`) */
     setTitle(text = undefined) {
-        this.#title_hidden = text === null;
-        this.#title_value = typeof text === "string" && text !== "" ? text : undefined;
-        this.#title.innerText = this.#title_hidden ? "" : optionOr(this.#title_value, I18n.t("navigation.shortcutHelp"));
-        this.#title.hidden = this.#title_hidden;
+        this.#titleHidden = text === null;
+        this.#titleValue = typeof text === "string" && text !== "" ? text : undefined;
+        this.#title.innerText = this.#titleHidden ? "" : optionOr(this.#titleValue, I18n.t("navigation.shortcutHelp"));
+        this.#title.hidden = this.#titleHidden;
         this.#syncAria();
         return this;
     }
@@ -172,12 +188,15 @@ class ShortcutHelp {
                 placeholder: optionOr(this.#placeholder, I18n.t("navigation.shortcutHelpSearch")),
                 width: "100%",
                 // Слушатель обновляет и строки, и объявление найденного числа
-                inputListener: () => this.#syncSearch()
+                inputListener: () => this.#syncSearch(),
             });
             // Видимой подписи у поля нет, а пл҃ейсхолдер — не имя: имя ставим явно
-            const search_field = this.#input.set().querySelector("input");
-            if (search_field !== null) {
-                search_field.setAttribute("aria-label", optionOr(this.#placeholder, I18n.t("navigation.shortcutHelpSearch")));
+            const searchField = this.#input.set().querySelector("input");
+            if (searchField !== null) {
+                searchField.setAttribute(
+                    "aria-label",
+                    optionOr(this.#placeholder, I18n.t("navigation.shortcutHelpSearch"))
+                );
             }
             this.#search.appendChild(this.#input.set());
         }
@@ -189,7 +208,7 @@ class ShortcutHelp {
 
     /** Заменить содержимое целиком */
     setGroups(groups = []) {
-        this.#source = ShortcutHelp.#normalizeSource({groups: groups});
+        this.#source = ShortcutHelp.#normalizeSource({ groups: groups });
         this.#render();
         return this;
     }
@@ -197,7 +216,7 @@ class ShortcutHelp {
     /** Добавить группу: `add({title: 'Правка', items: [...]})` */
     addGroup(group = undefined) {
         if (group === undefined || group === null) return this;
-        this.#source = ShortcutHelp.#normalizeSource({groups: [...this.#source, group]});
+        this.#source = ShortcutHelp.#normalizeSource({ groups: [...this.#source, group] });
         this.#render();
         return this;
     }
@@ -217,46 +236,49 @@ class ShortcutHelp {
     /** `groups` плюс короткая форма `items` (одна группа без заголовка) */
     static #normalizeSource(options = {}) {
         const groups = [];
-        const items = (options.items === undefined ? [] : options.items).map((item) => ShortcutHelp.#normalizeItem(item));
-        if (items.length > 0) groups.push({title: "", items: items});
+        const items = (options.items === undefined ? [] : options.items).map((item) =>
+            ShortcutHelp.#normalizeItem(item)
+        );
+        if (items.length > 0) groups.push({ title: "", items: items });
         for (const group of options.groups === undefined ? [] : options.groups) {
             groups.push({
                 title: group.title === undefined ? "" : String(group.title),
-                items: (group.items === undefined ? [] : group.items).map((item) => ShortcutHelp.#normalizeItem(item))
+                items: (group.items === undefined ? [] : group.items).map((item) => ShortcutHelp.#normalizeItem(item)),
             });
         }
         return groups;
     }
 
     static #normalizeItem(item = {}) {
-        const keys = item.keys === undefined || item.keys === null
-            ? []
-            : (Array.isArray(item.keys) ? item.keys : String(item.keys).split("+"))
-                .map((key) => String(key).trim())
-                .filter((key) => key.length > 0);
+        const keys =
+            item.keys === undefined || item.keys === null
+                ? []
+                : (Array.isArray(item.keys) ? item.keys : String(item.keys).split("+"))
+                      .map((key) => String(key).trim())
+                      .filter((key) => key.length > 0);
         return {
             keys: keys,
             description: item.description === undefined ? "" : String(item.description),
-            label: item.label
+            label: item.label,
         };
     }
 
     #render() {
-        this.#groups_node.innerHTML = "";
+        this.#groupsNode.innerHTML = "";
         this.#groups = [];
         this.#source.forEach((group, index) => {
             const node = document.createElement("div");
             node.className = "shortcut_help_group";
-            const id_group_title = `${this.#id}_group_${index}`;
+            const idGroupTitle = `${this.#id}_group_${index}`;
             node.setAttribute("role", "group");
             const title = document.createElement("shortcut_help_group_title");
-            title.id = id_group_title;
+            title.id = idGroupTitle;
             title.setAttribute("role", "heading");
             title.setAttribute("aria-level", "3");
             title.innerText = group.title;
             title.hidden = group.title === "";
             node.appendChild(title);
-            if (group.title !== "") node.setAttribute("aria-labelledby", id_group_title);
+            if (group.title !== "") node.setAttribute("aria-labelledby", idGroupTitle);
             const list = document.createElement("ul");
             list.className = "shortcut_help_list";
             const rows = [];
@@ -270,7 +292,7 @@ class ShortcutHelp {
                 if (item.keys.length > 0) {
                     const keys = document.createElement("shortcut_help_keys");
                     // Сочетание рисует Kbd: клавиша — настоящий <kbd>, значковым нужен label
-                    keys.appendChild(new Kbd({keys: item.keys, size: this.#kbd_size, label: item.label}).set());
+                    keys.appendChild(new Kbd({ keys: item.keys, size: this.#kbdSize, label: item.label }).set());
                     line.appendChild(keys);
                 }
                 const text = document.createElement("shortcut_help_text");
@@ -278,13 +300,13 @@ class ShortcutHelp {
                 line.appendChild(text);
                 row.appendChild(line);
                 list.appendChild(row);
-                rows.push({node: row, search: `${item.description} ${item.keys.join(" ")}`.toLowerCase()});
+                rows.push({ node: row, search: `${item.description} ${item.keys.join(" ")}`.toLowerCase() });
             }
             node.appendChild(list);
-            this.#groups_node.appendChild(node);
-            this.#groups.push({node: node, rows: rows});
+            this.#groupsNode.appendChild(node);
+            this.#groups.push({ node: node, rows: rows });
         });
-        this.#empty.innerText = optionOr(this.#empty_text, I18n.t("navigation.shortcutHelpEmpty"));
+        this.#empty.innerText = optionOr(this.#emptyText, I18n.t("navigation.shortcutHelpEmpty"));
         this.#syncSearch();
         this.#syncAria();
     }
@@ -304,7 +326,7 @@ class ShortcutHelp {
             visible += shown;
         }
         const nothing = visible === 0 && this.#groups.length > 0;
-        this.#groups_node.hidden = nothing;
+        this.#groupsNode.hidden = nothing;
         this.#empty.hidden = !nothing;
         return visible;
     }
@@ -313,15 +335,14 @@ class ShortcutHelp {
     #syncSearch() {
         this.#search.hidden = this.#searchable !== true;
         const visible = this.#filter(this.#input === undefined ? "" : this.#input.getValue());
-        this.#status.innerText = this.#searchable === true
-            ? I18n.t("navigation.shortcutHelpCount", {count: visible})
-            : "";
+        this.#status.innerText =
+            this.#searchable === true ? I18n.t("navigation.shortcutHelpCount", { count: visible }) : "";
         // Без поиска пустая строка не показывается: скрывать нечего
         if (this.#searchable !== true) this.#empty.hidden = true;
     }
 
     #syncAria() {
-        if (this.#title_hidden) {
+        if (this.#titleHidden) {
             this.#root.setAttribute("role", "group");
             this.#root.removeAttribute("aria-labelledby");
             this.#root.setAttribute("aria-label", optionOr(this.#label, I18n.t("navigation.shortcutHelp")));
@@ -329,8 +350,8 @@ class ShortcutHelp {
         }
         this.#root.setAttribute("role", "region");
         this.#root.removeAttribute("aria-label");
-        this.#root.setAttribute("aria-labelledby", this.#id_title);
+        this.#root.setAttribute("aria-labelledby", this.#idTitle);
     }
 }
 
-exports.ShortcutHelp = ShortcutHelp
+exports.ShortcutHelp = ShortcutHelp;

package/framework/components/chui_sidebar_nav/sidebar_nav.js

@@ -1,6 +1,7 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+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");
 
 /** Служебные ключи пункта: всё остальное — данные пункта */
 const SERVICE_KEYS = ["id", "type", "title", "icon", "badge", "children", "disabled", "href"];
@@ -61,33 +62,35 @@ 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;
-
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        items: Array(),
-        value: String(),
-        collapsible: Boolean(),
-        collapsed: Boolean(),
-        onSelect: undefined,
-        onToggle: undefined,
-        changeEvent: undefined
-    }) {
+    #activeId = undefined;
+    #focusId = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            items: Array(),
+            value: String(),
+            collapsible: Boolean(),
+            collapsed: Boolean(),
+            onSelect: undefined,
+            onToggle: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_SidebarNav");
         SidebarNav.#counter += 1;
         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";
@@ -116,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}` */
@@ -174,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;
@@ -189,7 +192,7 @@ class SidebarNav {
 
     /** Имя навигации, когда подписи в шапке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -203,7 +206,7 @@ class SidebarNav {
         let section = undefined;
         for (const item of Array.isArray(items) ? items : []) {
             if (item !== null && typeof item === "object" && item.type === "section") {
-                section = {type: "section", title: item.title === undefined ? "" : String(item.title), children: []};
+                section = { type: "section", title: item.title === undefined ? "" : String(item.title), children: [] };
                 this.#items.push(section);
                 continue;
             }
@@ -274,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;
     }
 
@@ -285,7 +356,10 @@ class SidebarNav {
         this.#root.classList.toggle("sidebar_nav_collapsed", this.#collapsed);
         if (this.#collapse !== undefined) {
             this.#collapse.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
-            this.#collapse.setAttribute("aria-label", this.#collapsed ? I18n.t("navigation.sidebarExpand") : I18n.t("navigation.sidebarCollapse"));
+            this.#collapse.setAttribute(
+                "aria-label",
+                this.#collapsed ? I18n.t("navigation.sidebarExpand") : I18n.t("navigation.sidebarCollapse")
+            );
         }
         this.#render();
         return this;
@@ -319,14 +393,14 @@ class SidebarNav {
 
     // === ВНУТРЕННЕЕ ===
     static #toNode(item = Object()) {
-        const source = typeof item === "string" ? {title: item} : item;
+        const source = typeof item === "string" ? { title: item } : item;
         const data = {};
         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),
@@ -337,17 +411,21 @@ class SidebarNav {
         };
     }
 
-    static #item_counter = 0;
+    static #itemCounter = 0;
 
     #describeEntry(node) {
         if (node.type === "section") {
-            return {type: "section", title: node.title, children: node.children.map((child) => this.#describeEntry(child))};
+            return {
+                type: "section",
+                title: node.title,
+                children: node.children.map((child) => this.#describeEntry(child)),
+            };
         }
         return this.#describe(node);
     }
 
     #describe(node) {
-        const descriptor = {id: node.id, title: node.title, icon: node.icon};
+        const descriptor = { id: node.id, title: node.title, icon: node.icon };
         if (node.badge !== undefined) descriptor.badge = node.badge;
         for (const key of Object.keys(node.data)) descriptor[key] = node.data[key];
         descriptor.disabled = node.disabled;
@@ -377,18 +455,19 @@ class SidebarNav {
     #siblingsOf(node) {
         const parent = this.#parentNode(node);
         if (parent !== undefined) return parent.children;
-        for (const entry of this.#items) if (entry.type === "section" && entry.children.includes(node)) return entry.children;
+        for (const entry of this.#items)
+            if (entry.type === "section" && entry.children.includes(node)) return entry.children;
         return this.#items;
     }
 
     #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;
@@ -420,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));
@@ -549,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;
@@ -564,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();
     }
@@ -597,14 +676,14 @@ 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;
-        return id === undefined ? null : this.#links().find((node) => node.dataset.id === id) ?? null;
+        const id = this.#activeId;
+        return id === undefined ? null : (this.#links().find((node) => node.dataset.id === id) ?? null);
     }
 
     #onClick = (event) => {
@@ -663,4 +742,4 @@ class SidebarNav {
     };
 }
 
-exports.SidebarNav = SidebarNav
+exports.SidebarNav = SidebarNav;

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] {