chuijs 4.0.2 → 4.0.4

package/framework/appLayout/default/main_theme_style.css

@@ -1,10 +1,16 @@
-/* Палитры в стиле Apple flat (macOS/iOS system colors).
+/* Палитра собрана по двум нашим эталонным таблицам, светлая и тёмная колонки:
+   1) цвета акцентов (синий, красный, оранжевый, зелёный, серый…);
+   2) серая шкала — фоны и нейтрали (деления 1 (плотное) … 6 (светлое)),
+      плюс основной и приглушённый текст и заливки контролов по состояниям.
+   Сверку с эталоном и контраст печатает `npm run palette:check` — он читает значения
+   прямо из этого файла, поэтому палитра правится только здесь.
 
-   Иерархия поверхностей повторяет iOS/macOS «grouped»:
-   - --main_background  — подложка страницы (светло-серая / почти чёрная);
-   - --element_background_2 — карточки и контент-блоки (белые / #1c1c1e);
+   Порядок поверхностей повторяет «сгруппированный» вид списков:
+   - --main_background  — подложка страницы (деление 6 серой шкалы);
+   - --element_background_2 — карточки: светлая — белая, тёмная — деление 5
+     (в серой шкале белого нет: в светлой схеме карточка на шаг выше шкалы);
    - --element_background, --button_background — полупрозрачные нейтральные
-     заливки контролов (iOS systemFill), поэтому элемент читается и на белой
+     заливки контролов, поэтому элемент читается и на белой
      карточке, и на серой подложке, независимо от того, где он лежит;
    - --element_background_hover — та же заливка, но плотнее (ховер контрола);
    - --element_background_disabled_2 — полупрозрачный «белый» токен оставлен
@@ -15,140 +21,221 @@
 
 @media (prefers-color-scheme: light) {
     :root {
-        /* Текст */
-        --text_color: #1d1d1f;
+        /* --- Текст: основной и приглушённый --- */
+        --text_color: #000000;
         --text_color_disabled: rgba(60, 60, 67, 0.6);
         --text_color_hover: #ffffff;
-        --text_color_hover_disable: rgba(255, 255, 255, 0.7);
-        /* Поверхности: серая подложка страницы + белые карточки */
+        --text_color_hover_disabled: rgba(255, 255, 255, 0.7);
+        /* --- Фоны: светлая колонка серой шкалы ---
+           Подложка — деление 6; карточка — белая (в серой шкале белого нет: в светлой
+           схеме карточка на шаг выше шкалы). Материалы шапки и модалки — тот же цвет
+           таблицы при прозрачности 0.6: блюр лежит на них слоем
+           (`--global_blur` — `saturate(180%) blur(20px)`), и сквозь полупрозрачную заливку
+           содержимое читается как сквозь матовое стекло */
         --main_background: #f2f2f7;
-        --header_background: rgba(250, 250, 252, 0.72);
-        /* Шапка при прокрутке: материал плотнее, содержимое уходит под неё */
-        --header_background_scrolled: rgba(250, 250, 252, 0.88);
-        /* Обводка (hairline). Волосяные линии всей вёрстки: карточки, поля, разделители.
-           Плотность сознательно низкая: линия должна только намечать край, а не рисовать
-           рамку вокруг каждого блока (было 0.18). */
-        --border_color: rgba(60, 60, 67, 0.09);
-        /* Наведение на поле ввода: рамка приметнее волосяной, но не спорит с акцентом фокуса */
-        --border_color_hover: rgba(60, 60, 67, 0.26);
-        /* Кнопка */
-        --button_border_color: rgba(60, 60, 67, 0.1);
+        --element_background_2: #ffffff;
+        --element_background_disabled_2: rgba(255, 255, 255, 0.6);
+        --header_background: rgba(242, 242, 247, 0.6);
+        /* Полосы оболочки — шапка, меню маршрутов и ящик уведомлений — носят цвет
+           подложки, а не карточки: они читаются её продолжением, а не отдельной плашкой */
+        --bar_background: rgba(242, 242, 247, 0.6);
+        /* Шапка при прокрутке: тот же материал, а состояние показывает тень
+           (прежде материал был плотнее) */
+        --header_background_scrolled: rgba(242, 242, 247, 0.6);
+        --modal_background: rgba(242, 242, 247, 0.6);
+        /* Волосяная линия — деление 4: на шаг тише эталонного разделителя (#c6c6c8),
+           потому что в этой библиотеке рамку носит каждый блок, а не только разделитель
+           списка. Под курсором — деление 2: плотнее, но всё ещё не акцент */
+        --border_color: #d1d1d6;
+        --border_color_hover: #aeaeb2;
+        /* Кнопка: граница — та же волосяная линия, заливка — нейтральная */
+        --button_border_color: #d1d1d6;
         --button_border_color_hover: #007aff;
-        --button_background: rgba(120, 120, 128, 0.2);
-        --button_background_hover: #007aff;
-        --button_background_disabled: rgba(120, 120, 128, 0.09);
-        /* Модальное окно */
-        --modal_background: rgba(250, 250, 252, 0.78);
+        --button_background: rgba(120, 120, 128, 0.12);
+        --button_background_disabled: rgba(120, 120, 128, 0.08);
         /* Занавес под всплывающим слоем: подложка обязана отличаться от --modal_background,
            иначе материал модалки на ней не читается. */
         --modal_scrim: rgba(0, 0, 0, 0.18);
-        /* Элементы */
-        --element_background: rgba(120, 120, 128, 0.2);
-        --element_background_hover: rgba(120, 120, 128, 0.32);
-        --element_background_disabled: rgba(120, 120, 128, 0.09);
-        --element_background_2: #ffffff;
-        --element_background_disabled_2: rgba(255, 255, 255, 0.6);
+        /* Элементы — нейтральные заливки: в покое одна плотность, под курсором плотнее,
+           у выключенного слабее */
+        --element_background: rgba(120, 120, 128, 0.12);
+        --element_background_hover: rgba(120, 120, 128, 0.2);
+        --element_background_disabled: rgba(120, 120, 128, 0.08);
+        /* --- Акценты: светлая колонка --- */
         --element_background_prime: #007aff;
-        /* Акцент */
         --blue_prime_background: #007aff;
-        --blue_prime_background_trans: rgba(0, 122, 255, 0.6);
+        /* Плотная тонировка акцента — там, где полупрозрачного цвета мало (выбранная строка
+           в тёмном материале); слабая — в `--blue_prime_background_tint` */
+        --blue_prime_background_tint_strong: rgba(0, 122, 255, 0.6);
         /* Тонировка акцента: выбранный пункт оболочки (меню маршрутов, кнопка шапки),
            а не заливка во весь цвет. */
         --blue_prime_background_tint: rgba(0, 122, 255, 0.14);
         --red_prime_background: #ff3b30;
-        /* Ссылка в контенте: тёмный system blue — акцент #007aff на белом
+        /* Остальные цвета таблицы акцентов выставлены токенами, чтобы своим вариантам
+           не заводить цвет мимо палитры: оранжевый, жёлтый, зелёный, мята, бирюза, циан,
+           индиго, сиреневый, розовый, коричневый, серый */
+        --orange_prime_background: #ff9500;
+        --yellow_prime_background: #ffcc00;
+        --green_prime_background: #34c759;
+        --mint_prime_background: #00c7be;
+        --teal_prime_background: #30b0c7;
+        --cyan_prime_background: #32ade6;
+        --indigo_prime_background: #5856d6;
+        --purple_prime_background: #af52de;
+        --pink_prime_background: #ff2d55;
+        --brown_prime_background: #a2845e;
+        --gray_prime_background: #8e8e93;
+        /* Ссылка в контенте: затемнённый акцентный синий — #007aff на белом
            даёт контраст ~3.7 и для текста ссылки не подходит. */
         --link_color: #0066cc;
-        /* Бэйджи */
-        --badge_error_back: rgba(255, 59, 48, 0.16);
-        --badge_error_text: #d70015;
-        --badge_success_back: rgba(52, 199, 89, 0.16);
-        --badge_success_text: #248a3d;
-        --badge_cancel_back: rgba(142, 142, 147, 0.16);
-        --badge_cancel_text: #6c6c70;
-        --badge_warning_back: rgba(255, 204, 0, 0.2);
-        --badge_warning_text: #b25000;
+        /* Бэйджи: плашка — цвет акцента с прозрачностью, текст — сам цвет акцента
+           (красный, зелёный, серый, оранжевый) */
+        --badge_error_background: rgba(255, 59, 48, 0.16);
+        --badge_error_text: #ff3b30;
+        --badge_success_background: rgba(52, 199, 89, 0.16);
+        --badge_success_text: #34c759;
+        --badge_cancel_background: rgba(120, 120, 128, 0.16);
+        --badge_cancel_text: #8e8e93;
+        --badge_warning_background: rgba(255, 149, 0, 0.16);
+        --badge_warning_text: #ff9500;
         /* Аудиоплеер: полупрозрачные заливки под backdrop-filter */
-        --ap_main_background: rgba(120, 120, 128, 0.16);
-        --ap_main_background_2: rgba(120, 120, 128, 0.26);
-        --ap_slider_background: rgba(120, 120, 128, 0.3);
-        --ap_slider_buf_background: rgba(0, 122, 255, 0.65);
-        /* Скроллбар */
-        --scrollbar_thumb: rgba(120, 120, 128, 0.45);
+        --player_background: rgba(120, 120, 128, 0.1);
+        --player_slider_background: rgba(120, 120, 128, 0.24);
+        --player_slider_buffer_background: rgba(0, 122, 255, 0.65);
+        /* Ручка ползунка — белая деталь на дорожке: белый есть в палитре (карточка светлой
+           схемы и текст под курсором), поэтому у ручки свой ключ, а не заливка */
+        --player_thumb_background: #ffffff;
+        /* Тени — общий набор: форма с разлётом и прозрачностью из одной руки (чем крупнее
+           слой, тем мягче разлёт и ниже процент). В тёмной схеме проценты выше: чёрная
+           тень на тёмной подложке иначе не видна */
+        --box_shadow_main: 0 1px 2px rgb(0 0 0 / 4%), 0 3px 10px rgb(0 0 0 / 5%);
+        --box_shadow_drop: 0 2px 6px rgb(0 0 0 / 5%), 0 14px 36px rgb(0 0 0 / 9%);
+        --box_shadow_modal: 0 4px 12px rgb(0 0 0 / 6%), 0 28px 72px rgb(0 0 0 / 14%);
+        /* Поднятая деталь контрола: бегунок ползунка, головка переключателя */
+        --box_shadow_control: 0 1px 3px rgb(0 0 0 / 16%);
+        /* Край закреплённой колонки: тень направленная, вбок — общие тени накрывают
+           элемент со всех сторон */
+        --box_shadow_edge: 2px 0 8px rgb(0 0 0 / 6%);
+        /* Ореол вокруг ручки поверх содержимого — ползунок сравнения картинок */
+        --box_shadow_halo: 0 0 8px rgb(0 0 0 / 25%);
+        /* Затемняющая накладка: ею помечают выполненную часть цветной полосы (Gantt) */
+        --overlay_dim: rgba(0, 0, 0, 0.28);
+        /* Подсветка примеров кода: акценты палитры, приглушённые к заливке кода
+           (`--element_background` на карточке) до нормы 4.5 — чистый акцент на ней даёт
+           для текста от 1.3 до 3.6. Доли подмешивания — в `npm run palette:check`, он же
+           печатает вышедший контраст */
+        --code_token_comment: #6c6c70;
+        --code_token_string: #217d38;
+        --code_token_number: #9e5c00;
+        --code_token_keyword: #9847c1;
+        --code_token_function: #5856d6;
+        --code_token_property: #22749a;
+        --code_token_selector: #826800;
+        --code_token_color: var(--code_token_number);
+        /* Скроллбар — системный накладной */
+        --scrollbar_thumb: rgba(0, 0, 0, 0.3);
     }
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        /* Текст */
+        /* --- Текст: основной и приглушённый --- */
         --text_color: #ffffff;
         --text_color_disabled: rgba(235, 235, 245, 0.6);
         --text_color_hover: #ffffff;
-        --text_color_hover_disable: rgba(255, 255, 255, 0.7);
-        /* Основные цвета */
-        /* Подложка не чистый чёрный: на #000000 белый текст «звенит» (гало вокруг глифов),
-           а границы карточек #1c1c1e видны как окна в пустоте. #0e0e10 оставляет ощущение
-           чёрного, но даёт глазу уровень подложки — так делает и системная тёмная тема. */
-        --main_background: #0e0e10;
-        --header_background: rgba(28, 28, 30, 0.72);
-        /* Шапка при прокрутке: материал плотнее, содержимое уходит под неё */
-        --header_background_scrolled: rgba(22, 22, 24, 0.9);
-        /* Обводка (hairline). В тёмной схеме белая линия заметнее, чем чёрная в светлой,
-           поэтому плотность ещё ниже, чем в светлой теме (было 0.16). */
-        --border_color: rgba(255, 255, 255, 0.08);
-        /* Наведение на поле ввода: см. светлую тему */
-        --border_color_hover: rgba(255, 255, 255, 0.22);
-        /* Тени в тёмной схеме: форма та же, что в светлой (см. global_style.css), меняются
-           только проценты — чёрная тень на почти чёрной подложке иначе не видна.
-           Светлого внутреннего хайрлайна здесь больше нет: он был нужен на чистом чёрном,
-           а с подложкой #0e0e10 поверхность отделяет и разница яркости, и --border_color;
-           заодно обе схемы теперь тени одинаковые. */
+        --text_color_hover_disabled: rgba(255, 255, 255, 0.7);
+        /* --- Фоны: тёмная колонка серой шкалы ---
+           Подложка — деление 6 #1c1c1e, карточка — деление 5 #2c2c2e: ровно шаг шкалы,
+           как в системных настройках. Чистый чёрный (им помечена сгруппированная подложка
+           системы) не берём: на нём светлый текст «звенит», да и в шкале его нет */
+        --main_background: #1c1c1e;
+        --element_background_2: #2c2c2e;
+        --element_background_disabled_2: rgba(44, 44, 46, 0.6);
+        --header_background: rgba(44, 44, 46, 0.6);
+        /* Полосы оболочки — шапка, меню маршрутов и ящик уведомлений — носят цвет
+           подложки (деление 6), а не карточки (деление 5): в тёмной схеме это как раз
+           заметно, и полоса читается продолжением подложки */
+        --bar_background: rgba(28, 28, 30, 0.6);
+        /* Шапка при прокрутке: тот же материал, а состояние показывает тень
+           (прежде материал был плотнее) */
+        --header_background_scrolled: rgba(28, 28, 30, 0.6);
+        --modal_background: rgba(44, 44, 46, 0.6);
+        /* Волосяная линия — деление 3 #48484a, под курсором — деление 2 #636366: на карточке
+           (деление 5) рамка даёт шаг светлоты 12.6, как в светлой схеме 16.0. Деление 4,
+           которым эталон намекает разделитель, выбрано не было: на карточке оно даёт всего 6.4,
+           и рамка читалась только на подложке — там она и была видна */
+        --border_color: #48484a;
+        --border_color_hover: #636366;
+        /* Тени — форма та же, что в светлой колонке, меняются только проценты: чёрная
+           тень на тёмной подложке иначе не видна */
         --box_shadow_main: 0 1px 2px rgb(0 0 0 / 22%), 0 3px 10px rgb(0 0 0 / 26%);
         --box_shadow_drop: 0 2px 6px rgb(0 0 0 / 26%), 0 14px 36px rgb(0 0 0 / 38%);
         --box_shadow_modal: 0 4px 12px rgb(0 0 0 / 30%), 0 28px 72px rgb(0 0 0 / 46%);
-        /* Кнопка */
-        --button_border_color: rgba(255, 255, 255, 0.1);
+        --box_shadow_control: 0 1px 3px rgb(0 0 0 / 45%);
+        --box_shadow_edge: 2px 0 8px rgb(0 0 0 / 30%);
+        --box_shadow_halo: 0 0 8px rgb(0 0 0 / 55%);
+        /* Кнопка: граница — та же волосяная линия, заливка — нейтральная (тёмная) */
+        --button_border_color: #48484a;
         --button_border_color_hover: #0a84ff;
-        --button_background: rgba(120, 120, 128, 0.3);
-        --button_background_hover: #0a84ff;
-        --button_background_disabled: rgba(120, 120, 128, 0.14);
-        /* Модальное окно */
-        --modal_background: rgba(30, 30, 32, 0.78);
+        --button_background: rgba(120, 120, 128, 0.24);
+        --button_background_disabled: rgba(120, 120, 128, 0.18);
         /* Занавес под всплывающим слоем: подложка обязана отличаться от --modal_background,
            иначе материал модалки на ней не читается. */
         --modal_scrim: rgba(0, 0, 0, 0.5);
-        /* Элементы */
-        --element_background: rgba(120, 120, 128, 0.3);
-        --element_background_hover: rgba(120, 120, 128, 0.45);
-        --element_background_disabled: rgba(120, 120, 128, 0.14);
-        --element_background_2: #1c1c1e;
-        --element_background_disabled_2: rgba(28, 28, 30, 0.6);
+        /* Элементы — нейтральные заливки: в покое одна плотность, под курсором плотнее,
+           у выключенного слабее */
+        --element_background: rgba(120, 120, 128, 0.24);
+        --element_background_hover: rgba(120, 120, 128, 0.36);
+        --element_background_disabled: rgba(120, 120, 128, 0.18);
+        /* --- Акценты: тёмная колонка --- */
         --element_background_prime: #0a84ff;
-        /* Акцент */
         --blue_prime_background: #0a84ff;
-        --blue_prime_background_trans: rgba(10, 132, 255, 0.6);
+        --blue_prime_background_tint_strong: rgba(10, 132, 255, 0.6);
         /* Тонировка акцента: выбранный пункт оболочки (меню маршрутов, кнопка шапки),
            а не заливка во весь цвет. */
         --blue_prime_background_tint: rgba(10, 132, 255, 0.26);
         --red_prime_background: #ff453a;
-        /* Ссылка в контенте: тот же system blue, на тёмной карточке он даёт
-           контраст ~4.7 (UA-синий #0000ee — ~1.8 и не читается). */
-        --link_color: #0a84ff;
-        /* Бэйджи */
-        --badge_error_back: rgba(255, 69, 58, 0.2);
-        --badge_error_text: #ff6961;
-        --badge_success_back: rgba(48, 209, 88, 0.2);
+        /* Остальные цвета таблицы — токенами, как в светлой схеме */
+        --orange_prime_background: #ff9f0a;
+        --yellow_prime_background: #ffd60a;
+        --green_prime_background: #30d158;
+        --mint_prime_background: #63e6e2;
+        --teal_prime_background: #40c8e0;
+        --cyan_prime_background: #64d2ff;
+        --indigo_prime_background: #5e5ce6;
+        --purple_prime_background: #bf5af2;
+        --pink_prime_background: #ff375f;
+        --brown_prime_background: #ac8e68;
+        --gray_prime_background: #98989d;
+        /* Ссылка в контенте: акцентный синий #0a84ff на карточке #2c2c2e даёт 3.9 — для
+           текста ссылки мало (норма 4.5). Берём осветлённый вариант того же синего. */
+        --link_color: #2997ff;
+        /* Бэйджи — цвета акцентов тёмной колонки */
+        --badge_error_background: rgba(255, 69, 58, 0.2);
+        --badge_error_text: #ff453a;
+        --badge_success_background: rgba(48, 209, 88, 0.2);
         --badge_success_text: #30d158;
-        --badge_cancel_back: rgba(142, 142, 147, 0.2);
-        --badge_cancel_text: #aeaeb2;
-        --badge_warning_back: rgba(255, 214, 10, 0.2);
-        --badge_warning_text: #ffd60a;
+        --badge_cancel_background: rgba(120, 120, 128, 0.2);
+        --badge_cancel_text: #98989d;
+        --badge_warning_background: rgba(255, 159, 10, 0.2);
+        --badge_warning_text: #ff9f0a;
         /* Аудиоплеер: полупрозрачные заливки под backdrop-filter */
-        --ap_main_background: rgba(120, 120, 128, 0.24);
-        --ap_main_background_2: rgba(120, 120, 128, 0.36);
-        --ap_slider_background: rgba(120, 120, 128, 0.42);
-        --ap_slider_buf_background: rgba(10, 132, 255, 0.65);
-        /* Скроллбар */
-        --scrollbar_thumb: rgba(120, 120, 128, 0.5);
+        --player_background: rgba(120, 120, 128, 0.24);
+        --player_slider_background: rgba(120, 120, 128, 0.42);
+        --player_slider_buffer_background: rgba(10, 132, 255, 0.65);
+        --player_thumb_background: #ffffff;
+        /* Затемняющая накладка и подсветка кода: значения те же, что в светлой колонке,
+           но свои — схемы обязаны объявлять один и тот же набор ключей */
+        --overlay_dim: rgba(0, 0, 0, 0.28);
+        --code_token_comment: #aaaaae;
+        --code_token_string: #30d158;
+        --code_token_number: #ff9f0a;
+        --code_token_keyword: #d38df6;
+        --code_token_function: #a3a2f1;
+        --code_token_property: #64d2ff;
+        --code_token_selector: #ffd60a;
+        --code_token_color: var(--code_token_number);
+        /* Скроллбар — системный накладной */
+        --scrollbar_thumb: rgba(255, 255, 255, 0.35);
     }
 }

package/framework/components/chui_accordion/accordion.js

@@ -1,48 +1,48 @@
-const {Icon, Icons} = require("../chui_icons/icons");
+const { Icon, Icons } = require("../chui_icons/icons");
 
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /** Идентификаторы для aria-controls у панелей аккордеона */
-let disclosure_panel_counter = 0;
+let disclosurePanelCounter = 0;
 
 class Accordion {
     #name = require("randomstring").generate();
-    #chui_accordion = document.createElement(`chui_accordion`);
-    constructor(options = [ { b_text: undefined, p_text: undefined } ]) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Accordion');
+    #chuiAccordion = document.createElement(`chui_accordion`);
+    constructor(options = [{ b_text: undefined, p_text: undefined }]) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Accordion");
         // На вход идёт массив секций: объект — ошибка вызова, и объяснить её лучше словами
         if (Array.isArray(options) === false) {
             throw new Error("Accordion: нужен массив секций [{b_text, p_text}]");
         }
-        options.forEach(element => {
-            let main_test = document.createElement(`chui_accordion_section`);
-            let ab = document.createElement('accordion_button')
-            ab.setAttribute('name', this.#name)
-            let bt = document.createElement('accordion_button_text')
+        options.forEach((element) => {
+            const sectionNode = document.createElement(`chui_accordion_section`);
+            const ab = document.createElement("accordion_button");
+            ab.setAttribute("name", this.#name);
+            const bt = document.createElement("accordion_button_text");
             // Пустая заготовка — это «текста нет», а не слово «undefined» в разметке;
             // разметку секции принимает innerHTML, как и раньше
-            bt.innerHTML = element.b_text === undefined || element.b_text === null ? "" : String(element.b_text)
-            let barrow = document.createElement('accordion_button_arrow')
+            bt.innerHTML = element.b_text === undefined || element.b_text === null ? "" : String(element.b_text);
+            const barrow = document.createElement("accordion_button_arrow");
             barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-            ab.appendChild(bt)
-            ab.appendChild(barrow)
-            let ap = document.createElement('accordion_panel')
-            let html = document.createElement('accordion_panel_html')
-            html.innerHTML = element.p_text === undefined || element.p_text === null ? "" : String(element.p_text)
-            ap.appendChild(html)
-            main_test.appendChild(ab)
-            main_test.appendChild(ap)
-            this.#chui_accordion.appendChild(main_test)
+            ab.appendChild(bt);
+            ab.appendChild(barrow);
+            const ap = document.createElement("accordion_panel");
+            const html = document.createElement("accordion_panel_html");
+            html.innerHTML = element.p_text === undefined || element.p_text === null ? "" : String(element.p_text);
+            ap.appendChild(html);
+            sectionNode.appendChild(ab);
+            sectionNode.appendChild(ap);
+            this.#chuiAccordion.appendChild(sectionNode);
 
             //ФУНКЦИИ
-            let test = main_test.children;
+            const test = sectionNode.children;
             let i;
             for (i = 0; i < test.length; i++) {
-                let elem = test[i];
-                if (elem.tagName === 'ACCORDION_BUTTON') {
-                    let panel = elem.nextElementSibling;
+                const elem = test[i];
+                if (elem.tagName === "ACCORDION_BUTTON") {
+                    const panel = elem.nextElementSibling;
                     // Доступность: кнопка раскрытия — role=button с состоянием, панель — регион
-                    panel.id = "chui_accordion_panel_" + (disclosure_panel_counter += 1);
+                    panel.id = "chui_accordion_panel_" + (disclosurePanelCounter += 1);
                     panel.setAttribute("role", "region");
                     elem.setAttribute("aria-controls", panel.id);
                     elem.setAttribute("aria-expanded", "false");
@@ -50,9 +50,9 @@ class Accordion {
                     // в обходе Tab и в дереве доступности — поэтому свёрнутая панель помечается инерт
                     panel.inert = true;
                     makeKeyboardButton(elem);
-                    elem.addEventListener('click', () => {
-                        elem.classList.toggle('accordion_active')
-                        let panel = elem.nextElementSibling;
+                    elem.addEventListener("click", () => {
+                        elem.classList.toggle("accordion_active");
+                        const panel = elem.nextElementSibling;
                         // Стрелка и углы кнопки зависят от `aria-expanded` — их ведёт CSS,
                         // а инлайном остаётся только измеренная высота панели
                         if (panel.style.maxHeight) {
@@ -62,15 +62,18 @@ class Accordion {
                             panel.inert = false;
                             panel.style.maxHeight = panel.scrollHeight + "px";
                         }
-                        elem.setAttribute("aria-expanded", elem.classList.contains('accordion_active') ? "true" : "false");
-                    })
+                        elem.setAttribute(
+                            "aria-expanded",
+                            elem.classList.contains("accordion_active") ? "true" : "false"
+                        );
+                    });
                 }
             }
-        })
+        });
     }
     set() {
-        return this.#chui_accordion;
+        return this.#chuiAccordion;
     }
 }
 
-exports.Accordion = Accordion
+exports.Accordion = Accordion;

package/framework/components/chui_accordion/styles.css

@@ -8,9 +8,9 @@ chui_accordion {
     /* Зазор между секциями (прежде отдельной секции писал JS инлайном) */
     gap: 8px;
     font-size: var(--font_default_size);
-    font-weight:400;
+    font-weight: 400;
     border: none;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_accordion_section {
@@ -19,8 +19,8 @@ chui_accordion_section {
     height: max-content;
     width: -webkit-fill-available;
     font-size: var(--font_default_size);
-    font-weight:400;
-    border-radius: var(--border_radius);
+    font-weight: 400;
+    border-radius: var(--radius_sm);
     border: none;
 }
 
@@ -33,13 +33,13 @@ accordion_button_arrow {
 accordion_button {
     background: var(--element_background);
     cursor: pointer;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     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;
 }
@@ -51,19 +51,19 @@ accordion_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);
     /* Раскрытие идёт по `max-height`, которое считает JS: без перехода секция
        раскрывалась рывком */
-    transition: max-height var(--transition_time) var(--ease_out);
+    transition: max-height var(--motion_base) var(--motion_ease);
 }
 
 accordion_panel_html {
     padding: 8px 0;
     width: -webkit-fill-available;
     display: flex;
-    border: none
+    border: none;
 }
 
 accordion_button:hover {
@@ -71,7 +71,8 @@ accordion_button:hover {
 }
 
 accordion_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 accordion_button:hover accordion_button_text {
@@ -109,4 +110,4 @@ accordion_button[aria-expanded="true"] accordion_button_arrow chui_icon {
 
 accordion_button[aria-expanded="false"] accordion_button_arrow chui_icon {
     transform: rotate(0deg);
-}
+}