chuijs 4.0.3 → 4.0.4

package/framework/components/chui_data_grid/styles.css

@@ -3,7 +3,7 @@ chui_data_grid {
     flex-direction: column;
     /* fill-available учитывает собственный margin, 100% — нет */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     /* Локальные поверхности сетки: систему токенов не трогаем, но полный
        `--element_background` давал плотный серый блок, поэтому тело — только часть
@@ -59,8 +59,8 @@ data_grid_error {
     margin-bottom: 6px;
     padding-block: 6px 6px;
     padding-inline: 12px 12px;
-    border: 1px solid var(--badge_error_back);
-    border-radius: var(--border_radius);
+    border: 1px solid var(--badge_error_background);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     font-size: var(--font_default_size);
 }
@@ -99,10 +99,10 @@ data_grid_head data_grid_cell.data_grid_cell_pinned {
 
 data_grid_cell.data_grid_cell_pinned_last {
     border-inline-end: 1px solid var(--border_color);
-    /* Тень закреплённой колонки направленная (вбок), поэтому своего токена у неё нет:
-       общие тени накрывают элемент со всех сторон. Разлёт больше, процент меньше —
-       чтобы край колонки читался мягкой границей, а не линией. */
-    box-shadow: 2px 0 8px rgb(0 0 0 / 6%);
+    /* Тень закреплённой колонки — общий ключ: она направленная, вбок, а общие тени
+       накрывают элемент со всех сторон. Разлёт больше, процент меньше — чтобы край
+       колонки читался мягкой границей, а не линией */
+    box-shadow: var(--box_shadow_edge);
 }
 
 /* Наведение на строку: у закреплённой ячейки свой непрозрачный фон, поэтому заливку
@@ -131,7 +131,7 @@ data_grid_head {
     box-sizing: border-box;
     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(--data_grid_head);
@@ -323,7 +323,7 @@ data_grid_body {
     height: 340px;
     margin: 0;
     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(--data_grid_surface);
@@ -338,7 +338,7 @@ data_grid_spacer {
 
 data_grid_body_empty {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
 }
@@ -351,7 +351,7 @@ data_grid_body_empty[hidden] {
    когда пользователь долистал до конца уже загруженного */
 data_grid_body_loader {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
     border-top: 1px solid var(--border_color);
@@ -420,13 +420,13 @@ data_grid_cell.data_grid_cell_editing {
     min-width: 0;
     min-height: var(--control_height);
     box-sizing: border-box;
-    /* Отступ снимаем: у своих редакторов-компонентов он свой (`margin: var(--margin)`),
+    /* Отступ снимаем: у своих редакторов-компонентов он свой (`margin: var(--block_margin)`),
        и поле съезжало в ячейке */
     margin: 0;
     padding-block: 0 0;
     padding-inline: 8px 8px;
     border: 1px solid var(--blue_prime_background);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Приподнятая непрозрачная поверхность — та же, что у полей фреймворка: непрозрачная,
        чтобы в выделенной строке поле не заливалось тонировкой, и светлее тела, чтобы поле
        читалось как поле, а не как дыра в строке */
@@ -445,7 +445,7 @@ data_grid_cell.data_grid_cell_editing_select {
     padding: 0 4px;
 }
 
-/* Корень Select — целый компонент: у него свой внешний отступ (`margin: var(--margin)`)
+/* Корень Select — целый компонент: у него свой внешний отступ (`margin: var(--block_margin)`)
    и ширина контрола (`width: var(--control_width)`). Внутри ячейки это лишнее: из-за отступа
    ячейка вырастала до 29 + 12 = 41 px и перекрывала соседей, а поле сужалось и съезжало
    вправо. Растягиваем поле на ячейку и снимаем отступ */

package/framework/components/chui_descriptions/styles.css

@@ -8,7 +8,7 @@ chui_descriptions {
     /* Компонент сам задаёт ширину: в flex-колонке с align-items: flex-start
        блок без ширины получил бы max-content и вылез за карточку */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     --descriptions_columns: 1;
     color: var(--text_color);
     font-size: var(--font_default_size);

package/framework/components/chui_details/details.js

@@ -3,11 +3,11 @@ const { Icon, Icons } = require("../chui_icons/icons");
 const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /** Идентификаторы для aria-controls у раскрывающихся панелей */
-let disclosure_panel_counter = 0;
+let disclosurePanelCounter = 0;
 
 class Details {
     #name = require("randomstring").generate();
-    #chui_details = document.createElement(`chui_details`);
+    #chuiDetails = document.createElement(`chui_details`);
     //
     #ab = document.createElement("details_button");
     #bt = document.createElement("details_button_text");
@@ -46,7 +46,7 @@ class Details {
         if (this.#align !== undefined) this.#html.style.alignItems = this.#align;
         if (this.#justify !== undefined) this.#html.style.justifyContent = this.#justify;
         if (this.#width !== undefined) {
-            this.#chui_details.style.width = this.#width;
+            this.#chuiDetails.style.width = this.#width;
             this.#ab.style.width = this.#width;
             this.#ap.style.width = this.#width;
             this.#html.style.width = this.#width;
@@ -60,18 +60,18 @@ class Details {
         this.#ab.appendChild(this.#bt);
         this.#ab.appendChild(this.#barrow);
         this.#ap.appendChild(this.#html);
-        this.#chui_details.appendChild(this.#ab);
-        this.#chui_details.appendChild(this.#ap);
+        this.#chuiDetails.appendChild(this.#ab);
+        this.#chuiDetails.appendChild(this.#ap);
 
         //ФУНКЦИИ
-        let test = this.#chui_details.children;
+        const test = this.#chuiDetails.children;
         let i;
         for (i = 0; i < test.length; i++) {
-            let elem = test[i];
+            const elem = test[i];
             if (elem.tagName === "DETAILS_BUTTON") {
-                let panel = elem.nextElementSibling;
+                const panel = elem.nextElementSibling;
                 // Доступность: кнопка раскрытия — role=button с состоянием, панель — отдельный регион
-                panel.id = "chui_details_panel_" + (disclosure_panel_counter += 1);
+                panel.id = "chui_details_panel_" + (disclosurePanelCounter += 1);
                 panel.setAttribute("role", "region");
                 elem.setAttribute("aria-controls", panel.id);
                 elem.setAttribute("aria-expanded", "false");
@@ -81,7 +81,7 @@ class Details {
                 makeKeyboardButton(elem);
                 elem.addEventListener("click", () => {
                     elem.classList.toggle("details_active");
-                    let panel = elem.nextElementSibling;
+                    const panel = elem.nextElementSibling;
                     // Стрелка и углы кнопки зависят от `aria-expanded` — их ведёт CSS,
                     // а инлайном остаётся только измеренная высота панели
                     if (panel.style.maxHeight) {
@@ -97,12 +97,12 @@ class Details {
         }
     }
     add(...components) {
-        for (let component of components) {
+        for (const component of components) {
             this.#html.appendChild(component.set());
         }
     }
     set() {
-        return this.#chui_details;
+        return this.#chuiDetails;
     }
 }
 

package/framework/components/chui_details/styles.css

@@ -5,10 +5,10 @@ chui_details {
     /* Ширина по умолчанию — по колонке: с `max-content` заголовок сжимался в плашку
        по тексту и блок читался незаконченным (опция `width` перекрывает это значение) */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     font-weight: 400;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     border: none;
 }
 
@@ -21,14 +21,14 @@ details_button_arrow {
 details_button {
     background: var(--element_background);
     cursor: pointer;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     width: -webkit-fill-available;
     text-align: start;
     outline: none;
     display: flex;
     align-items: center;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     border: none;
 }
@@ -40,13 +40,13 @@ details_panel {
     overflow: hidden;
     width: -webkit-fill-available;
     max-height: 0;
-    border-end-end-radius: var(--border_radius);
-    border-end-start-radius: var(--border_radius);
+    border-end-end-radius: var(--radius_sm);
+    border-end-start-radius: var(--radius_sm);
     color: var(--text_color);
     border: none;
     /* Раскрытие идёт по `max-height`, которое считает JS: без перехода панель
        раскрывалась рывком */
-    transition: max-height var(--transition_time) var(--ease_out);
+    transition: max-height var(--motion_base) var(--motion_ease);
 }
 
 details_panel_html {