chuijs 4.0.3 → 4.0.4

package/framework/components/chui_file_explorer/file_explorer.js

@@ -1,5 +1,5 @@
 const fs = require("fs");
-const node_path = require("path");
+const nodePath = require("path");
 const { setStyles, formatBytes, optionOr } = require("../../modules/chui_functions");
 const { Icon, Icons } = require("../chui_icons/icons");
 const { Breadcrumb } = require("../chui_breadcrumb/breadcrumb");
@@ -73,12 +73,12 @@ class FileExplorer {
     #up = document.createElement("button");
     #refresh = document.createElement("button");
     #search = document.createElement("input");
-    #search_box = document.createElement("file_explorer_search_box");
-    #search_clear = document.createElement("button");
+    #searchBox = document.createElement("file_explorer_search_box");
+    #searchClear = document.createElement("button");
     #hidden = document.createElement("button");
-    #path_bar = undefined;
+    #pathBar = undefined;
     #grid = document.createElement("file_explorer_grid");
-    #head_row = document.createElement("file_explorer_head_row");
+    #headRow = document.createElement("file_explorer_head_row");
     #body = document.createElement("file_explorer_body");
     #empty = document.createElement("file_explorer_empty");
     #error = document.createElement("file_explorer_error");
@@ -86,30 +86,30 @@ class FileExplorer {
     #id = undefined;
     #provider = undefined;
     #path = "";
-    #root_path = undefined;
+    #rootPath = undefined;
     #history = [];
-    #history_index = -1;
+    #historyIndex = -1;
     #entries = [];
     #selected = new Set();
     #anchor = undefined;
     #filter = "";
     #sort = { key: SORT.NAME, direction: DIRECTION.ASC };
-    #show_hidden = false;
+    #showHidden = false;
     #loading = false;
-    #load_token = 0;
-    #error_object = undefined;
+    #loadToken = 0;
+    #errorObject = undefined;
     #selectable = true;
-    #show_size = true;
-    #show_modified = true;
+    #showSize = true;
+    #showModified = true;
     #height = "300px";
-    #title_text = undefined;
-    #label_text = undefined;
-    #empty_text = undefined;
-    #active_path = undefined;
-    #focus_path = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #emptyText = undefined;
+    #activePath = undefined;
+    #focusPath = undefined;
     #listeners = [];
-    #on_open = undefined;
-    #on_select = undefined;
+    #onOpen = undefined;
+    #onSelect = undefined;
     #roving = undefined;
 
     constructor(
@@ -139,17 +139,17 @@ class FileExplorer {
         this.#id = options.id === undefined ? `chui_file_explorer_${FileExplorer.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#label_text = options.label;
+        this.#labelText = options.label;
         this.#provider = typeof options.provider === "function" ? options.provider : FileExplorer.localProvider();
-        this.#root_path = options.root === undefined ? undefined : String(options.root);
+        this.#rootPath = options.root === undefined ? undefined : String(options.root);
         this.#selectable = options.selectable !== false;
-        this.#show_size = options.showSize !== false;
-        this.#show_modified = options.showModified !== false;
-        this.#show_hidden = options.showHidden === true;
-        this.#on_open = options.onOpen;
-        this.#on_select = options.onSelect;
-        if (options.emptyText !== undefined) this.#empty_text = String(options.emptyText);
-        else this.#empty_text = I18n.t("fileExplorer.empty");
+        this.#showSize = options.showSize !== false;
+        this.#showModified = options.showModified !== false;
+        this.#showHidden = options.showHidden === true;
+        this.#onOpen = options.onOpen;
+        this.#onSelect = options.onSelect;
+        if (options.emptyText !== undefined) this.#emptyText = String(options.emptyText);
+        else this.#emptyText = I18n.t("fileExplorer.empty");
         if (options.filter !== undefined) this.#filter = String(options.filter);
         this.#title.className = "file_explorer_title";
         this.#title.id = `${this.#id}_title`;
@@ -159,8 +159,8 @@ class FileExplorer {
         this.#actions.className = "file_explorer_actions";
         this.#grid.className = "file_explorer_grid";
         this.#grid.setAttribute("role", "grid");
-        this.#head_row.className = "file_explorer_head_row";
-        this.#head_row.setAttribute("role", "row");
+        this.#headRow.className = "file_explorer_head_row";
+        this.#headRow.setAttribute("role", "row");
         this.#body.className = "file_explorer_body";
         this.#body.setAttribute("role", "rowgroup");
         this.#empty.className = "file_explorer_empty";
@@ -171,12 +171,12 @@ class FileExplorer {
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#buildHead();
-        this.#path_bar = new Breadcrumb({ label: I18n.t("fileExplorer.path") });
-        this.#path_bar.set().classList.add("file_explorer_path");
+        this.#pathBar = new Breadcrumb({ label: I18n.t("fileExplorer.path") });
+        this.#pathBar.set().classList.add("file_explorer_path");
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#head);
-        this.#root.appendChild(this.#path_bar.set());
-        this.#grid.appendChild(this.#head_row);
+        this.#root.appendChild(this.#pathBar.set());
+        this.#grid.appendChild(this.#headRow);
         this.#grid.appendChild(this.#body);
         this.#root.appendChild(this.#grid);
         this.#root.appendChild(this.#empty);
@@ -191,9 +191,9 @@ class FileExplorer {
         this.refreshSearch();
         // Сортировка применяется только теперь: `setSort()` перерисовывает список, а строку пути
         // и прочие узлы разметки он застал бы ещё не созданными
-        const sort_key = optionOr(options.sort === undefined ? undefined : options.sort.key, undefined);
-        const sort_direction = optionOr(options.sort === undefined ? undefined : options.sort.direction, undefined);
-        if (sort_key !== undefined || sort_direction !== undefined) this.setSort(sort_key, sort_direction);
+        const sortKey = optionOr(options.sort === undefined ? undefined : options.sort.key, undefined);
+        const sortDirection = optionOr(options.sort === undefined ? undefined : options.sort.direction, undefined);
+        if (sortKey !== undefined || sortDirection !== undefined) this.setSort(sortKey, sortDirection);
         this.#grid.addEventListener("keydown", this.#onKeyDown);
         this.#grid.addEventListener("click", this.#onClick);
         this.#grid.addEventListener("dblclick", this.#onDoubleClick);
@@ -208,7 +208,7 @@ class FileExplorer {
         return (path) => {
             const list = fs.readdirSync(String(path), { withFileTypes: true });
             return list.map((entry) => {
-                const full = node_path.join(String(path), entry.name);
+                const full = nodePath.join(String(path), entry.name);
                 let size;
                 let modified;
                 try {
@@ -238,11 +238,11 @@ class FileExplorer {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Текущая папка */
@@ -252,7 +252,7 @@ class FileExplorer {
 
     /** Корень навигации (`undefined` — подниматься можно до корня пути) */
     getRoot() {
-        return this.#root_path;
+        return this.#rootPath;
     }
 
     /** Все загруженные записи текущей папки (со скрытыми), в исходном порядке провайдера */
@@ -288,7 +288,7 @@ class FileExplorer {
     }
 
     isShowHidden() {
-        return this.#show_hidden;
+        return this.#showHidden;
     }
 
     isSelectable() {
@@ -304,33 +304,33 @@ class FileExplorer {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     /** Текст ошибки чтения (пустая строка, если папка прочитана) */
     getErrorText() {
-        if (this.#error_object === undefined) return "";
-        const message = this.#error_object instanceof Error ? this.#error_object.message : String(this.#error_object);
+        if (this.#errorObject === undefined) return "";
+        const message = this.#errorObject instanceof Error ? this.#errorObject.message : String(this.#errorObject);
         return I18n.t("fileExplorer.readFailed", { message: message });
     }
 
     /** История переходов и место в ней — для кнопок «назад/вперёд» */
     getHistory() {
-        return { paths: [...this.#history], index: this.#history_index };
+        return { paths: [...this.#history], index: this.#historyIndex };
     }
 
     canGoBack() {
-        return this.#history_index > 0;
+        return this.#historyIndex > 0;
     }
 
     canGoForward() {
-        return this.#history_index >= 0 && this.#history_index < this.#history.length - 1;
+        return this.#historyIndex >= 0 && this.#historyIndex < this.#history.length - 1;
     }
 
     /** Выше корня (или выше самого верхнего уровня пути) подняться нельзя */
     canGoUp() {
         if (this.#path === "") return false;
-        if (this.#root_path !== undefined && this.#path === this.#root_path.replace(/[\\/]+$/, "")) return false;
+        if (this.#rootPath !== undefined && this.#path === this.#rootPath.replace(/[\\/]+$/, "")) return false;
         return FileExplorer.#parentOf(this.#path) !== undefined;
     }
 
@@ -344,7 +344,7 @@ class FileExplorer {
     }
 
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -358,7 +358,7 @@ class FileExplorer {
     }
 
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -370,7 +370,7 @@ class FileExplorer {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text === undefined ? "" : String(text);
+        this.#emptyText = text === undefined ? "" : String(text);
         this.#render();
         return this;
     }
@@ -402,16 +402,16 @@ class FileExplorer {
         if (column !== undefined && Object.values(SORT).includes(column)) this.#sort.key = column;
         if (order !== undefined && Object.values(DIRECTION).includes(order)) this.#sort.direction = order;
         // До конца сборки разметки перерисовывать нечего (вызов из конструктора)
-        if (this.#path_bar !== undefined) this.#render();
+        if (this.#pathBar !== undefined) this.#render();
         return this;
     }
 
     setShowHidden(shown = Boolean()) {
-        this.#show_hidden = shown === true;
-        this.#hidden.setAttribute("aria-pressed", this.#show_hidden ? "true" : "false");
+        this.#showHidden = shown === true;
+        this.#hidden.setAttribute("aria-pressed", this.#showHidden ? "true" : "false");
         this.#hidden.setAttribute(
             "aria-label",
-            this.#show_hidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden")
+            this.#showHidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden")
         );
         this.#render();
         this.#announceState();
@@ -439,7 +439,7 @@ class FileExplorer {
         if (entry === undefined || entry === null) return this;
         if (entry.type === TYPE.FOLDER) return this.go(entry.path);
         this.#announce(I18n.t("fileExplorer.openedFile", { name: entry.name }));
-        if (this.#on_open !== undefined) this.#on_open(Object.assign({}, entry), this);
+        if (this.#onOpen !== undefined) this.#onOpen(Object.assign({}, entry), this);
         return this;
     }
 
@@ -452,8 +452,8 @@ class FileExplorer {
     /** Загрузка папки: промис разрешается, когда данные пришли (устаревший ответ отбрасывается) */
     async load(path = String(), options = { history: true, keepSelection: false }) {
         const target = path === undefined || path === null || path === "" ? this.#path : String(path);
-        const token = this.#load_token + 1;
-        this.#load_token = token;
+        const token = this.#loadToken + 1;
+        this.#loadToken = token;
         this.#loading = true;
         this.#grid.setAttribute("aria-busy", "true");
         this.#status.innerText = I18n.t("fileExplorer.loading", { target: target });
@@ -461,10 +461,10 @@ class FileExplorer {
         try {
             list = await Promise.resolve(this.#provider(target));
         } catch (error) {
-            if (token !== this.#load_token) return this;
+            if (token !== this.#loadToken) return this;
             this.#loading = false;
             this.#entries = [];
-            this.#error_object = error;
+            this.#errorObject = error;
             this.#path = target;
             this.#render();
             this.#announce(
@@ -472,15 +472,15 @@ class FileExplorer {
             );
             return this;
         }
-        if (token !== this.#load_token) return this;
+        if (token !== this.#loadToken) return this;
         this.#entries = FileExplorer.#normalize(list, target);
-        this.#error_object = undefined;
+        this.#errorObject = undefined;
         this.#loading = false;
         this.#path = target;
         if (options.keepSelection !== true) this.#selected.clear();
         if (options.history !== false) {
-            this.#history = this.#history.slice(0, this.#history_index + 1).concat([target]);
-            this.#history_index = this.#history.length - 1;
+            this.#history = this.#history.slice(0, this.#historyIndex + 1).concat([target]);
+            this.#historyIndex = this.#history.length - 1;
         }
         this.#render();
         this.#announceState();
@@ -489,14 +489,14 @@ class FileExplorer {
 
     back() {
         if (!this.canGoBack()) return this;
-        this.#history_index -= 1;
-        return this.load(this.#history[this.#history_index], { history: false });
+        this.#historyIndex -= 1;
+        return this.load(this.#history[this.#historyIndex], { history: false });
     }
 
     forward() {
         if (!this.canGoForward()) return this;
-        this.#history_index += 1;
-        return this.load(this.#history[this.#history_index], { history: false });
+        this.#historyIndex += 1;
+        return this.load(this.#history[this.#historyIndex], { history: false });
     }
 
     /** На уровень выше; выше корня не поднимаемся */
@@ -621,7 +621,7 @@ class FileExplorer {
         const filter = this.#filter.trim().toLowerCase();
         const list = this.#entries.filter(
             (entry) =>
-                (this.#show_hidden || entry.hidden !== true) &&
+                (this.#showHidden || entry.hidden !== true) &&
                 (filter === "" || entry.name.toLowerCase().includes(filter))
         );
         return list.sort((a, b) => this.#compare(a, b));
@@ -652,35 +652,35 @@ class FileExplorer {
         this.#search.addEventListener("input", () => this.setFilter(this.#search.value));
         // Кнопка очистки — своя: у `input[type=search]` системная кнопка очистки скрыта,
         // чтобы поле выглядело как остальные (см. стили)
-        this.#search_box.className = "file_explorer_search_box";
-        this.#search_clear.type = "button";
-        this.#search_clear.className = "file_explorer_search_clear";
-        this.#search_clear.setAttribute("aria-label", I18n.t("fileExplorer.clearSearch"));
-        const clear_glyph = new Icon(Icons.NAVIGATION.CLOSE, "16px").set();
-        clear_glyph.setAttribute("aria-hidden", "true");
-        this.#search_clear.appendChild(clear_glyph);
-        this.#search_clear.addEventListener("click", () => {
+        this.#searchBox.className = "file_explorer_search_box";
+        this.#searchClear.type = "button";
+        this.#searchClear.className = "file_explorer_search_clear";
+        this.#searchClear.setAttribute("aria-label", I18n.t("fileExplorer.clearSearch"));
+        const clearGlyph = new Icon(Icons.NAVIGATION.CLOSE, "16px").set();
+        clearGlyph.setAttribute("aria-hidden", "true");
+        this.#searchClear.appendChild(clearGlyph);
+        this.#searchClear.addEventListener("click", () => {
             this.setFilter("");
             this.#search.focus();
         });
-        this.#search_box.appendChild(this.#search);
-        this.#search_box.appendChild(this.#search_clear);
-        this.#head.appendChild(this.#search_box);
+        this.#searchBox.appendChild(this.#search);
+        this.#searchBox.appendChild(this.#searchClear);
+        this.#head.appendChild(this.#searchBox);
         this.#syncClear();
         this.#hidden.className = "file_explorer_hidden";
         this.#hidden.type = "button";
-        this.#hidden.setAttribute("aria-pressed", this.#show_hidden ? "true" : "false");
+        this.#hidden.setAttribute("aria-pressed", this.#showHidden ? "true" : "false");
         this.#hidden.setAttribute(
             "aria-label",
-            this.#show_hidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden")
+            this.#showHidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden")
         );
         const glyph = new Icon(
-            this.#show_hidden ? Icons.ACTIONS.VISIBILITY : Icons.ACTIONS.VISIBILITY_OFF,
+            this.#showHidden ? Icons.ACTIONS.VISIBILITY : Icons.ACTIONS.VISIBILITY_OFF,
             "18px"
         ).set();
         glyph.setAttribute("aria-hidden", "true");
         this.#hidden.appendChild(glyph);
-        this.#hidden.addEventListener("click", () => this.setShowHidden(!this.#show_hidden));
+        this.#hidden.addEventListener("click", () => this.setShowHidden(!this.#showHidden));
         this.#head.appendChild(this.#hidden);
         // У панели одна остановка обхода: по кнопкам ходят стрелки/Home/End
         this.#roving = new RovingKeyboard(this.#actions, { itemSelector: "button" });
@@ -775,8 +775,8 @@ class FileExplorer {
         row.classList.toggle("file_explorer_row_selected", this.#selected.has(entry.path));
         row.classList.toggle("file_explorer_row_folder", entry.type === TYPE.FOLDER);
         row.appendChild(this.#cell(entry, SORT.NAME));
-        if (this.#show_size) row.appendChild(this.#cell(entry, SORT.SIZE));
-        if (this.#show_modified) row.appendChild(this.#cell(entry, SORT.MODIFIED));
+        if (this.#showSize) row.appendChild(this.#cell(entry, SORT.SIZE));
+        if (this.#showModified) row.appendChild(this.#cell(entry, SORT.MODIFIED));
         return row;
     }
 
@@ -788,25 +788,25 @@ class FileExplorer {
             active === null || active === undefined || !this.#grid.contains(active)
                 ? null
                 : active.closest("file_explorer_row");
-        if (focused !== null) this.#focus_path = focused.dataset.path;
-        this.#head_row.innerHTML = "";
+        if (focused !== null) this.#focusPath = focused.dataset.path;
+        this.#headRow.innerHTML = "";
         this.#body.innerHTML = "";
-        this.#head_row.appendChild(this.#sortButton(SORT.NAME, I18n.t("fileExplorer.columnName")));
-        if (this.#show_size) this.#head_row.appendChild(this.#sortButton(SORT.SIZE, I18n.t("fileExplorer.columnSize")));
-        if (this.#show_modified)
-            this.#head_row.appendChild(this.#sortButton(SORT.MODIFIED, I18n.t("fileExplorer.columnModified")));
+        this.#headRow.appendChild(this.#sortButton(SORT.NAME, I18n.t("fileExplorer.columnName")));
+        if (this.#showSize) this.#headRow.appendChild(this.#sortButton(SORT.SIZE, I18n.t("fileExplorer.columnSize")));
+        if (this.#showModified)
+            this.#headRow.appendChild(this.#sortButton(SORT.MODIFIED, I18n.t("fileExplorer.columnModified")));
         // Ширины колонок задаёт компонент: сетка шапки и сетка строк обязаны совпасть,
         // а какие колонки показаны, знает только он
         const columns = ["minmax(0, 1fr)"];
-        if (this.#show_size) columns.push("110px");
-        if (this.#show_modified) columns.push("160px");
+        if (this.#showSize) columns.push("110px");
+        if (this.#showModified) columns.push("160px");
         this.#grid.style.setProperty("--file_explorer_columns", columns.join(" "));
         const visible = this.#visibleEntries();
         for (const entry of visible) this.#body.appendChild(this.#rowNode(entry));
         this.#grid.hidden = visible.length === 0;
-        this.#empty.hidden = visible.length > 0 || this.#error_object !== undefined;
-        this.#empty.innerText = this.isFiltered() ? I18n.t("common.nothingFound") : this.#empty_text;
-        this.#error.hidden = this.#error_object === undefined;
+        this.#empty.hidden = visible.length > 0 || this.#errorObject !== undefined;
+        this.#empty.innerText = this.isFiltered() ? I18n.t("common.nothingFound") : this.#emptyText;
+        this.#error.hidden = this.#errorObject === undefined;
         this.#error.innerText = this.getErrorText();
         this.#grid.setAttribute(
             "aria-label",
@@ -828,7 +828,7 @@ class FileExplorer {
 
     #renderPath() {
         const items = this.#pathItems();
-        this.#path_bar.setItems(
+        this.#pathBar.setItems(
             items.map((item, index) =>
                 index === items.length - 1
                     ? { title: item.title }
@@ -842,7 +842,7 @@ class FileExplorer {
     #pathItems() {
         const full = String(this.#path);
         if (full === "") return [{ title: I18n.t("fileExplorer.noFolder"), path: "" }];
-        const root = this.#root_path === undefined ? undefined : String(this.#root_path).replace(/[\\/]+$/, "");
+        const root = this.#rootPath === undefined ? undefined : String(this.#rootPath).replace(/[\\/]+$/, "");
         const items = [];
         if (full.startsWith("/")) items.push({ title: "/", path: "/" });
         else if (/^[A-Za-z]:/.test(full)) items.push({ title: `${full.slice(0, 2)}/`, path: `${full.slice(0, 2)}/` });
@@ -875,14 +875,14 @@ class FileExplorer {
         const list = [...this.#body.querySelectorAll("file_explorer_row")];
         if (list.length === 0) return;
         const stop =
-            list.find((row) => row.dataset.path === this.#active_path) ??
-            list.find((row) => row.dataset.path === this.#focus_path) ??
+            list.find((row) => row.dataset.path === this.#activePath) ??
+            list.find((row) => row.dataset.path === this.#focusPath) ??
             list[0];
-        this.#active_path = stop.dataset.path;
+        this.#activePath = stop.dataset.path;
         for (const row of list) row.setAttribute("tabindex", row === stop ? "0" : "-1");
         // Фокус возвращаем только если он был в сетке: иначе перерисовка его бы украла
-        if (this.#focus_path !== undefined && stop.dataset.path === this.#focus_path) {
-            this.#focus_path = undefined;
+        if (this.#focusPath !== undefined && stop.dataset.path === this.#focusPath) {
+            this.#focusPath = undefined;
             stop.focus();
         }
         return this;
@@ -890,7 +890,7 @@ class FileExplorer {
 
     #focusRow(row = undefined) {
         if (row === undefined || row === null) return this;
-        this.#active_path = row.dataset.path;
+        this.#activePath = row.dataset.path;
         for (const other of this.#body.querySelectorAll("file_explorer_row")) {
             other.setAttribute("tabindex", other === row ? "0" : "-1");
         }
@@ -960,18 +960,18 @@ class FileExplorer {
                 : I18n.t("fileExplorer.selectedCount", { count: entries.length })
         );
         for (const listener of [...this.#listeners]) listener(entries, this);
-        if (this.#on_select !== undefined) this.#on_select(entries, this);
+        if (this.#onSelect !== undefined) this.#onSelect(entries, this);
         return this;
     }
 
     /** Что видно сейчас: количество, пустота, поиск и ошибка чтения */
     #announceState() {
-        if (this.#error_object !== undefined) {
+        if (this.#errorObject !== undefined) {
             this.#status.innerText = this.getErrorText();
             return this;
         }
         const visible = this.#visibleEntries().length;
-        const total = this.#entries.filter((entry) => this.#show_hidden || entry.hidden !== true).length;
+        const total = this.#entries.filter((entry) => this.#showHidden || entry.hidden !== true).length;
         if (this.isFiltered()) {
             this.#status.innerText =
                 visible === 0
@@ -980,7 +980,7 @@ class FileExplorer {
             return this;
         }
         this.#status.innerText =
-            visible === 0 ? this.#empty_text : I18n.t("fileExplorer.entriesCount", { count: visible });
+            visible === 0 ? this.#emptyText : I18n.t("fileExplorer.entriesCount", { count: visible });
         return this;
     }
 
@@ -993,12 +993,12 @@ class FileExplorer {
 
     /** Кнопка очистки видна, только когда есть что очищать */
     #syncClear() {
-        this.#search_clear.hidden = this.#filter === "";
+        this.#searchClear.hidden = this.#filter === "";
         return this;
     }
 
     #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");
         } else {
@@ -1009,8 +1009,8 @@ class FileExplorer {
     }
 
     #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("fileExplorer.title");
     }
 
@@ -1024,7 +1024,7 @@ class FileExplorer {
         // иначе ближайшая перерисовка вернула бы фокус не туда, где он был
         const row = event.target instanceof Element ? event.target.closest("file_explorer_row") : null;
         if (row === null || row.dataset.path === undefined) return;
-        this.#active_path = row.dataset.path;
+        this.#activePath = row.dataset.path;
     };
 
     #onClick = (event) => {

package/framework/components/chui_file_explorer/styles.css

@@ -7,14 +7,14 @@ chui_file_explorer {
     box-sizing: border-box;
     width: -webkit-fill-available;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
 }
 
 .file_explorer_title {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -57,7 +57,7 @@ chui_file_explorer {
     margin: 0;
     padding: 0;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     cursor: pointer;
@@ -111,7 +111,7 @@ chui_file_explorer {
     padding-block: 0 0;
     padding-inline: 12px 40px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -184,7 +184,7 @@ chui_file_explorer {
     max-width: 100%;
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
 }
 
@@ -362,7 +362,7 @@ file_explorer_name {
 .file_explorer_error {
     padding: 10px 12px;
     border: 1px solid var(--badge_error_text);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--badge_error_text);
     font-size: var(--font_labels_size);
 }