chuijs 4.0.3 → 4.0.4

package/framework/components/chui_actions_bar/styles.css

@@ -0,0 +1,139 @@
+/* ── ActionsBar — панель действий ───────────────────────────────
+   Что можно сделать с тем, о чём сейчас речь: подпись и ряд кнопок со значками.
+   Панель не полагает, о чём действия: в переписке она встаёт под шапкой разговора,
+   в карточке — над содержимым, и в обоих случаях разделяется волосяной линией снизу. */
+
+chui_actions_bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--control_padding_sm);
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    padding: var(--control_padding) var(--block_padding);
+    background: var(--element_background_2);
+    border-bottom: 1px solid var(--border_color);
+    font-size: var(--font_labels_size);
+    color: var(--text_color);
+}
+
+actions_bar_title {
+    display: block;
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}
+
+actions_bar_title[hidden] {
+    display: none;
+}
+
+/* Полоса действий внутри панели своей кромки не рисует: панель и полоса — одна поверхность,
+   и вложенная ступень поверхности здесь была бы лишней. Кнопки переносятся по строкам:
+   в узкой колонке длинный ряд не ломает раскладку */
+chui_actions_bar chui_toolbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+
+/* Столбец — вид меню: действия идут друг под другом во всю ширину, как пункты списка */
+chui_actions_bar[data-orientation="vertical"] chui_toolbar {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 2px;
+}
+
+/* Кнопка действия: значок и подпись, одна мера с остальными контролами семьи */
+.actions_bar_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    min-height: var(--control_height);
+    padding: var(--control_padding_sm) 10px;
+    border: none;
+    border-radius: var(--radius_sm);
+    background: transparent;
+    color: var(--text_color);
+    font-family: inherit;
+    font-size: var(--font_labels_size);
+    cursor: pointer;
+}
+
+.actions_bar_button:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — заливка контрола, как у кнопок панели ввода */
+.actions_bar_button:active:not(:disabled) {
+    background: var(--element_background);
+}
+
+/* Включённый переключатель: «закреплено», «без звука» — состояние видно подложкой */
+.actions_bar_button[data-active="true"] {
+    background: var(--blue_prime_background_tint);
+    color: var(--blue_prime_background);
+}
+
+.actions_bar_button[data-danger="true"] {
+    color: var(--red_prime_background);
+}
+
+/* Пункт меню: подпись слева, счётчик у правого края */
+chui_actions_bar[data-orientation="vertical"] .actions_bar_button {
+    width: -webkit-fill-available;
+    justify-content: flex-start;
+    text-align: start;
+}
+
+chui_actions_bar[data-orientation="vertical"] .actions_bar_button_text {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.actions_bar_button:disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text_color_disabled);
+}
+
+.actions_bar_button_icon {
+    display: flex;
+    align-items: center;
+}
+
+/* Значка нет — узел не занимает зазор строки */
+.actions_bar_button_icon:empty {
+    display: none;
+}
+
+.actions_bar_button chui_icon {
+    color: inherit;
+}
+
+.actions_bar_button_text {
+    white-space: nowrap;
+}
+
+/* Счётчик действия: число показывает плашка, скринридеру оно попадает в имя */
+actions_bar_badge {
+    box-sizing: border-box;
+    min-width: 16px;
+    padding-inline: 4px;
+    border-radius: var(--radius_pill);
+    background: var(--red_prime_background);
+    color: var(--text_color_hover);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    text-align: center;
+}
+
+actions_bar_badge[hidden] {
+    display: none;
+}

package/framework/components/chui_affix/affix.js

@@ -42,7 +42,7 @@ class Affix {
     #observer = undefined;
     #pending = undefined;
     #destroyed = false;
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -63,7 +63,7 @@ class Affix {
         this.#root.appendChild(this.#body);
         this.#root.appendChild(this.#content);
         this.#target = options.target;
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         this.setOffset(options.offset === undefined ? 0 : options.offset);
         this.#observe();
     }
@@ -123,7 +123,7 @@ class Affix {
     }
 
     setOnChange(listener = undefined) {
-        this.#on_change = listener;
+        this.#onChange = listener;
         return this;
     }
 
@@ -228,7 +228,7 @@ class Affix {
         this.#fixed = fixed;
         this.#root.dataset.fixed = fixed ? "true" : "false";
         this.#root.classList.toggle("affix_fixed", fixed);
-        if (typeof this.#on_change === "function") this.#on_change(fixed, this);
+        if (typeof this.#onChange === "function") this.#onChange(fixed, this);
     }
 }
 

package/framework/components/chui_affix/styles.css

@@ -23,6 +23,11 @@ affix_body {
     inset-block-start: var(--affix_offset);
     z-index: 5;
     box-sizing: border-box;
+    /* Закрепление включает радиус и тень сразу: если тень гаснет плавно, а радиус щёлкает,
+       переход читается рваным. Свой список потому и перечисляет оба свойства */
+    transition:
+        border-radius var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 affix_content {

package/framework/components/chui_alert/alert.js

@@ -48,7 +48,7 @@ class Alert {
     #id = undefined;
     #style = Alert.STYLE.INFO;
     #dismissed = false;
-    #custom_icon = false;
+    #customIcon = false;
 
     constructor(
         options = {
@@ -127,7 +127,7 @@ class Alert {
         this.#root.setAttribute("aria-live", assertive ? "assertive" : "polite");
         // Цвет и глиф плашки выбирает общий помощник семьи — по ключу стиля (`alert_error` → `error`).
         // Своя иконка (`setIcon`) важнее статусного глифа и остаётся собой
-        if (this.#custom_icon === false)
+        if (this.#customIcon === false)
             setStatusPlate(this.#icon, typeof style === "string" ? style.replace("alert_", "") : undefined);
         return this;
     }
@@ -135,7 +135,7 @@ class Alert {
     /** Своя иконка вместо значка состояния (экземпляр `Icon` или готовый узел); цвет статуса остаётся */
     setIcon(icon = undefined) {
         if (icon === undefined || icon === null) return this;
-        this.#custom_icon = true;
+        this.#customIcon = true;
         this.#icon.innerHTML = "";
         this.#icon.appendChild(icon instanceof Element ? icon : icon.set());
         return this;
@@ -233,11 +233,17 @@ class Alert {
         return this;
     }
 
-    /** Убрать сообщение из документа */
+    /** Убрать сообщение из документа: уход идёт движением, узел убирается по концу кадра */
     dismiss() {
         if (this.#dismissed) return this;
         this.#dismissed = true;
-        this.#root.remove();
+        this.#root.classList.add("alert_leaving");
+        const remove = (event) => {
+            if (event.target !== this.#root) return;
+            this.#root.removeEventListener("animationend", remove);
+            this.#root.remove();
+        };
+        this.#root.addEventListener("animationend", remove);
         return this;
     }
 

package/framework/components/chui_alert/styles.css

@@ -18,6 +18,13 @@ chui_alert {
     color: var(--text_color);
     font-size: var(--font_default_size);
     text-align: start;
+    /* Появление: сообщение встаёт на место — общий кадр из global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Уход: сообщение гаснет и сходит вверх, узел убирается по концу кадра */
+.alert_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 alert_content {

package/framework/components/chui_avatar/avatar.js

@@ -48,8 +48,8 @@ class Avatar {
 
     #root = document.createElement("chui_avatar");
     #image = document.createElement("img");
-    #initials_node = document.createElement("avatar_initials");
-    #status_node = document.createElement("avatar_status");
+    #initialsNode = document.createElement("avatar_initials");
+    #statusNode = document.createElement("avatar_status");
     #id = undefined;
     #name = undefined;
     #initials = undefined;
@@ -57,7 +57,7 @@ class Avatar {
     #status = undefined;
     #shape = Avatar.SHAPE.CIRCLE;
     #decorative = false;
-    #click_listeners = [];
+    #clickListeners = [];
 
     constructor(
         options = {
@@ -84,9 +84,9 @@ class Avatar {
         this.#image.setAttribute("alt", "");
         this.#image.setAttribute("aria-hidden", "true");
         this.#root.appendChild(this.#image);
-        this.#root.appendChild(this.#initials_node);
-        this.#root.appendChild(this.#status_node);
-        this.#status_node.setAttribute("aria-hidden", "true");
+        this.#root.appendChild(this.#initialsNode);
+        this.#root.appendChild(this.#statusNode);
+        this.#statusNode.setAttribute("aria-hidden", "true");
         this.setSize(options.size === undefined ? Avatar.SIZE.DEFAULT : options.size);
         this.setShape(options.shape === undefined ? Avatar.SHAPE.CIRCLE : options.shape);
         this.#renderInitials();
@@ -106,7 +106,7 @@ class Avatar {
     }
 
     getInitials() {
-        return this.#initials_node.innerText;
+        return this.#initialsNode.innerText;
     }
 
     getImageSource() {
@@ -180,9 +180,9 @@ class Avatar {
     /** Значок состояния; `undefined` убирает его и слово из доступного имени */
     setStatus(status = undefined) {
         this.#status = status;
-        this.#status_node.hidden = status === undefined;
-        if (status !== undefined) this.#status_node.dataset.status = status;
-        else this.#status_node.removeAttribute("data-status");
+        this.#statusNode.hidden = status === undefined;
+        if (status !== undefined) this.#statusNode.dataset.status = status;
+        else this.#statusNode.removeAttribute("data-status");
         this.#syncAria();
         return this;
     }
@@ -202,7 +202,7 @@ class Avatar {
     }
 
     addClickListener(listener = () => {}) {
-        this.#click_listeners.push(listener);
+        this.#clickListeners.push(listener);
         return this;
     }
 
@@ -244,7 +244,7 @@ class Avatar {
     }
 
     #renderInitials() {
-        this.#initials_node.innerText = this.#deriveInitials();
+        this.#initialsNode.innerText = this.#deriveInitials();
         this.#syncAria();
     }
 
@@ -264,7 +264,7 @@ class Avatar {
     }
 
     #onClick = (event) => {
-        for (const listener of [...this.#click_listeners]) listener(event);
+        for (const listener of [...this.#clickListeners]) listener(event);
     };
 }
 

package/framework/components/chui_avatar/styles.css

@@ -20,7 +20,7 @@ chui_avatar[data-shape="circle"] {
 }
 
 chui_avatar[data-shape="square"] {
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 chui_avatar img {

package/framework/components/chui_avatar_group/avatar_group.js

@@ -45,7 +45,7 @@ class AvatarGroup {
     #size = Avatar.SIZE.DEFAULT;
     #shape = undefined;
     #extra = undefined;
-    #extra_listener = undefined;
+    #extraListener = undefined;
     #label = undefined;
 
     constructor(
@@ -64,7 +64,7 @@ class AvatarGroup {
         this.#id = optionOr(options.id, `chui_avatar_group_${AvatarGroup.#counter}`);
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#extra_listener = options.extraClickListener;
+        this.#extraListener = options.extraClickListener;
         this.setSize(optionOr(options.size, Avatar.SIZE.DEFAULT));
         if (options.shape !== undefined) this.#shape = options.shape;
         if (options.max !== undefined) this.setMax(options.max);
@@ -215,7 +215,7 @@ class AvatarGroup {
         const extra = document.createElement("avatar_group_extra");
         extra.className = "avatar_group_extra";
         extra.innerText = `+${hidden}`;
-        if (this.#extra_listener === undefined) {
+        if (this.#extraListener === undefined) {
             extra.setAttribute("role", "img");
             extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupMore", { count: hidden }));
         } else {
@@ -223,7 +223,7 @@ class AvatarGroup {
             extra.classList.add("avatar_group_extra_button");
             extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupShowAll", { count: hidden }));
             makeKeyboardButton(extra);
-            extra.addEventListener("click", (event) => this.#extra_listener(event, hidden, this));
+            extra.addEventListener("click", (event) => this.#extraListener(event, hidden, this));
         }
         this.#extra = extra;
         this.#root.appendChild(extra);

package/framework/components/chui_avatar_group/styles.css

@@ -7,7 +7,7 @@ chui_avatar_group {
     flex-wrap: nowrap;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     --avatar_size: 40px;
     --avatar_group_ring: var(--element_background_2);
 }

package/framework/components/chui_backtop/backtop.js

@@ -198,6 +198,7 @@ class Backtop {
         if (this.#destroyed) return this;
         this.#destroyed = true;
         window.removeEventListener("scroll", this.#onScroll, { capture: true });
+        this.#root.removeEventListener("transitionend", this.#onHideEnd);
         this.#root.remove();
         return this;
     }
@@ -238,9 +239,31 @@ class Backtop {
         const visible = top > this.#threshold;
         if (visible === this.#visible) return;
         this.#visible = visible;
-        this.#root.hidden = visible === false;
-        this.#root.classList.toggle("backtop_visible", visible);
+        this.#show(visible);
     }
+
+    /**
+     * Показ и уход идут движением (переход в styles.css). Узел встаёт в раскладку до класса —
+     * иначе перехода не было бы вовсе, — а `hidden` возвращается по концу ухода: в закреплённом
+     * положении он держит место в раскладке панели, и снять его до ухода значило бы оборвать его.
+     */
+    #show(visible) {
+        if (visible) {
+            this.#root.hidden = false;
+            requestAnimationFrame(() => {
+                if (this.#visible === true) this.#root.classList.add("backtop_visible");
+            });
+            return;
+        }
+        this.#root.classList.remove("backtop_visible");
+        this.#root.addEventListener("transitionend", this.#onHideEnd);
+    }
+
+    #onHideEnd = (event) => {
+        if (event.target !== this.#root || event.propertyName !== "opacity") return;
+        this.#root.removeEventListener("transitionend", this.#onHideEnd);
+        if (this.#visible === false) this.#root.hidden = true;
+    };
 }
 
 exports.Backtop = Backtop;

package/framework/components/chui_backtop/styles.css

@@ -6,6 +6,27 @@ chui_backtop {
     --backtop_inline_end: 24px;
     width: max-content;
     height: max-content;
+    opacity: 1;
+    transform: none;
+    /* Появление и уход — движение, а не снятие узла: кнопка поднимается на месте и гаснет.
+       `hidden` включает JS по концу ухода: в закреплённом положении он держит место
+       в раскладке панели, поэтому снимать его заранее нельзя */
+    transition:
+        opacity var(--motion_base) var(--motion_ease),
+        transform var(--motion_base) var(--motion_ease),
+        visibility var(--motion_none) linear;
+}
+
+/* Скрытая кнопка не ловит курсор и не попадает в обход Tab: `visibility` переключается
+   сразу при показе и только в конце ухода */
+chui_backtop:not(.backtop_visible) {
+    opacity: 0;
+    transform: translateY(8px);
+    visibility: hidden;
+    transition:
+        opacity var(--motion_fast) var(--motion_ease),
+        transform var(--motion_fast) var(--motion_ease),
+        visibility var(--motion_none) linear var(--motion_fast);
 }
 
 chui_backtop[hidden] {

package/framework/components/chui_badge/badge.js

@@ -1,7 +1,7 @@
 const { setStyles, markdownToHtml, htmlToMarkdown, optionOr } = require("../../modules/chui_functions");
 
 class Badge {
-    #chui_badge = document.createElement(`chui_badge`);
+    #chuiBadge = document.createElement(`chui_badge`);
     constructor(
         options = {
             id: String(),
@@ -11,47 +11,47 @@ class Badge {
         }
     ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Badge");
-        if (options.id !== undefined) this.#chui_badge.id = options.id;
+        if (options.id !== undefined) this.#chuiBadge.id = options.id;
         const style = optionOr(options.style, undefined);
-        if (style !== undefined) this.#chui_badge.classList.add(style);
+        if (style !== undefined) this.#chuiBadge.classList.add(style);
         // Стили текста баджей: пустая заготовка опции равносильна отсутствующей
         const text = optionOr(options.text, undefined);
-        const markdown_text = optionOr(options.markdownText, undefined);
-        if (text !== undefined && markdown_text !== undefined) {
+        const markdownText = optionOr(options.markdownText, undefined);
+        if (text !== undefined && markdownText !== undefined) {
             throw new Error("Должна быть установлена одна опция text или markdownText");
         } else {
-            if (text !== undefined) this.#chui_badge.innerText = text;
-            if (markdown_text !== undefined) this.#chui_badge.innerHTML = markdownToHtml(markdown_text);
+            if (text !== undefined) this.#chuiBadge.innerText = text;
+            if (markdownText !== undefined) this.#chuiBadge.innerHTML = markdownToHtml(markdownText);
         }
     }
     // GET
     getId() {
-        return this.#chui_badge.id;
+        return this.#chuiBadge.id;
     }
     getText() {
-        return this.#chui_badge.innerText;
+        return this.#chuiBadge.innerText;
     }
     getMarkdownText() {
-        return htmlToMarkdown(this.#chui_badge.innerHTML);
+        return htmlToMarkdown(this.#chuiBadge.innerHTML);
     }
     // SET
     setText(text = String()) {
-        this.#chui_badge.innerText = text;
+        this.#chuiBadge.innerText = text;
     }
     setMarkdownText(text = String()) {
-        this.#chui_badge.innerHTML = markdownToHtml(text);
+        this.#chuiBadge.innerHTML = markdownToHtml(text);
     }
     setId(id = String()) {
-        this.#chui_badge.id = id;
+        this.#chuiBadge.id = id;
     }
     setStyle(style = String()) {
         // Пустая строка — «не задана»: `classList.add("")` бросает исключение
         const known = optionOr(style, undefined);
-        if (known !== undefined) this.#chui_badge.classList.add(known);
+        if (known !== undefined) this.#chuiBadge.classList.add(known);
     }
     // RENDER
     set() {
-        return this.#chui_badge;
+        return this.#chuiBadge;
     }
     static STYLE = {
         ERROR: "badge_error",

package/framework/components/chui_badge/styles.css

@@ -12,9 +12,9 @@ chui_badge {
     height: max-content;
     width: max-content;
     padding: 2px 8px;
-    margin: var(--margin);
+    margin: var(--block_margin);
     border-radius: var(--radius_pill);
-    background: var(--badge_cancel_back);
+    background: var(--badge_cancel_background);
     color: var(--badge_cancel_text);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -41,20 +41,20 @@ chui_badge strong {
 
 /* Код в метке — тем же моношрифтом, что в остальных местах с разметкой */
 chui_badge code {
-    font-family: var(--code_font, monospace);
+    font-family: var(--font_mono);
 }
 
 .badge_error {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }
 
 .badge_success {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 .badge_warning {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }