chuijs 3.6.4 → 3.6.5

package/framework/appLayout/default/global_style.css

@@ -168,7 +168,6 @@ header {
     align-items: start;
     background-color: var(--header_background);
     backdrop-filter: var(--global_blur);
-    background-blend-mode: overlay;
     justify-content: space-between;
     border-bottom: 1px solid var(--border_color);
 }
@@ -278,25 +277,29 @@ notification_button {
     border-radius: var(--border_radius);
     padding: var(--test_padding);
     margin: var(--margin);
-    font-size: 22pt;
     background: transparent;
     color: var(--text_color);
     -webkit-app-region: no-drag;
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 notification_button:hover {
-    background: var(--blue_prime_background);
+    background: var(--element_background);
 }
 
-.notification_button_active {
-    background: var(--blue_prime_background);
+notification_button:active {
+    background: var(--element_background_hover);
 }
 
-.notification_button_active chui_icon {
+/* Открытый ящик уведомлений: акцент, а не ховер */
+.notification_button_active,
+.notification_button_active:hover {
+    background: var(--blue_prime_background);
     color: var(--text_color_hover);
 }
 
-notification_button:hover chui_icon {
+.notification_button_active chui_icon,
+.notification_button_active:hover chui_icon {
     color: var(--text_color_hover);
 }
 
@@ -309,28 +312,40 @@ app_menu_button {
     border-radius: var(--border_radius);
     padding: var(--test_padding);
     margin: var(--margin);
-    font-size: 22pt;
     background: transparent;
     color: var(--text_color);
     -webkit-app-region: no-drag;
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 app_menu_button:hover {
-    background: var(--blue_prime_background);
+    background: var(--element_background);
 }
 
-.app_menu_button_active {
-    background: var(--blue_prime_background);
+app_menu_button:active {
+    background: var(--element_background_hover);
 }
 
-.app_menu_button_active chui_icon {
+/* Открытое меню маршрутов: акцент, а не ховер */
+.app_menu_button_active,
+.app_menu_button_active:hover {
+    background: var(--blue_prime_background);
     color: var(--text_color_hover);
 }
 
-app_menu_button:hover chui_icon {
+.app_menu_button_active chui_icon,
+.app_menu_button_active:hover chui_icon {
     color: var(--text_color_hover);
 }
 
+/* Клавиатурный фокус элементов шапки (мышь его не показывает) */
+notification_button:focus-visible,
+app_menu_button:focus-visible,
+header_button:focus-visible {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+}
+
 route_views {
     display: flex;
     flex-direction: column;
@@ -525,7 +540,7 @@ header_button {
     display: flex;
     flex-direction: row;
     -webkit-app-region: no-drag;
-
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
 header_button header_button_title {
@@ -533,22 +548,18 @@ header_button header_button_title {
 }
 
 header_button:hover {
-    background: var(--blue_prime_background);
+    background: var(--element_background);
 }
 
-header_button:hover header_button_title {
-    color: var(--text_color_hover);
+header_button:active {
+    background: var(--element_background_hover);
 }
 
-header_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-/*Управление окном*/
+/*Управление окном — те же кнопки-иконки, что и остальные в шапке:
+  прозрачный фон, видимый символ, нейтральный ховер. */
 wc_box {
     -webkit-app-region: no-drag;
-    color: var(--text_color);
-    margin: 0 3px;
+    margin: 0 var(--margin);
     padding: 0 3px;
     display: flex;
     align-items: center;
@@ -556,23 +567,35 @@ wc_box {
 }
 
 wc_close, wc_maximize, wc_minimize {
+    cursor: pointer;
     margin: 6px 3px;
-    padding: 3px;
-    border-radius: 50%;
-    /*background: var(--element_background);*/
-    box-shadow: 0 0 1px 0 var(--border_color);
+    padding: 5px;
+    border-radius: var(--radius_circle);
+    background: transparent;
+    color: var(--text_color);
+    transition: background-color var(--transition_time) ease, color var(--transition_time) ease;
 }
 
+wc_maximize:hover, wc_minimize:hover {
+    background: var(--element_background);
+}
+
+wc_maximize:active, wc_minimize:active {
+    background: var(--element_background_hover);
+}
+
+/* Закрытие окна — единственное место, где уместен красный */
 wc_close:hover {
-    background-color: var(--red_prime_background);
+    background: var(--red_prime_background);
 }
 
-wc_maximize:hover, wc_minimize:hover {
-    background-color: var(--blue_prime_background);
+wc_close:hover chui_icon {
+    color: var(--text_color_hover);
 }
 
-wc_close:hover chui_icon, wc_maximize:hover chui_icon, wc_minimize:hover chui_icon {
-    color: white;
+wc_close:focus-visible, wc_maximize:focus-visible, wc_minimize:focus-visible {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
 }
 
 header_tabs {

package/framework/appLayout/default/main_theme_style.css

@@ -33,6 +33,9 @@
         --button_background_disabled: rgba(120, 120, 128, 0.09);
         /* Модальное окно */
         --modal_background: rgba(250, 250, 252, 0.78);
+        /* Занавес под всплывающим слоем: подложка обязана отличаться от --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);
@@ -85,6 +88,9 @@
         --button_background_disabled: rgba(120, 120, 128, 0.14);
         /* Модальное окно */
         --modal_background: rgba(30, 30, 32, 0.78);
+        /* Занавес под всплывающим слоем: подложка обязана отличаться от --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);

package/framework/components/chui_inputs/chui_multi_combo_box/multi_combo_box.js

@@ -58,7 +58,7 @@ class MultiComboBox {
         this.#button_open_disabled.style.cursor = "not-allowed";
         this.#dropdown.setAttribute('id', this.#id);
         this.#MultiComboBox_second.appendChild(this.#MultiComboBox_options)
-        this.#MultiComboBox_second.appendChild(this.#input)
+        this.#MultiComboBox_options.appendChild(this.#input)
         this.#MultiComboBox_second.appendChild(this.#button_open)
         this.#MultiComboBox_second.appendChild(this.#dropdown)
         //LISTENERS
@@ -74,7 +74,8 @@ class MultiComboBox {
         })
         this.#MultiComboBox_second.addEventListener('click', (event) => {
             if (!this.#input.disabled) {
-                if (event.target.parentNode === this.#MultiComboBox_second) {
+                if (event.target.closest('multicombobox_dropdown') === null &&
+                    event.target.closest('multicombobox_option_added_main') === null) {
                     this.#input.focus()
                     new Animation(this.#dropdown).fadeIn();
                     setOptionDisplay(document.getElementById(this.#id));
@@ -134,12 +135,13 @@ class MultiComboBox {
                         test_main.id = id_name
                         const test_body = document.createElement("multicombobox_option_added_body")
                         test_body.innerText = sect.title + ": " + opt.title;
+                        test_body.title = sect.title + ": " + opt.title;
                         const test_remove = document.createElement("multicombobox_option_added_remove")
                         test_remove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "10pt").getHTML()
                         test_remove.addEventListener("click", () => checkbox_input.click())
                         test_main.appendChild(test_body)
                         test_main.appendChild(test_remove)
-                        this.#MultiComboBox_options.appendChild(test_main)
+                        this.#MultiComboBox_options.insertBefore(test_main, this.#input)
                         this.#value.push({
                             id: id_name,
                             section: sect.title,
@@ -203,6 +205,7 @@ class MultiComboBox {
                 test_main.id = opt.title
                 const test_body = document.createElement("multicombobox_option_added_body")
                 test_body.innerText = opt.title;
+                test_body.title = opt.title;
                 const test_remove = document.createElement("multicombobox_option_added_remove")
                 test_remove.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "10pt").getHTML()
                 test_main.appendChild(test_body)
@@ -211,7 +214,7 @@ class MultiComboBox {
                 test_remove.addEventListener("click", () => checkbox_input.click())
                 //
                 if (evt.target.checked) {
-                    this.#MultiComboBox_options.appendChild(test_main)
+                    this.#MultiComboBox_options.insertBefore(test_main, this.#input)
                     this.#value.push(opt)
                 } else {
                     for (let node of this.#MultiComboBox_options.childNodes) {
@@ -275,7 +278,9 @@ class MultiComboBox {
     clear() {
         this.#input.value = ""
         this.#value = []
-        this.#MultiComboBox_options.innerHTML = ""
+        for (let node of [...this.#MultiComboBox_options.childNodes]) {
+            if (node !== this.#input) node.remove()
+        }
         for (let checkbox of this.#dropdown.querySelectorAll('input[type="checkbox"]')) {
             checkbox.checked = false;
         }

package/framework/components/chui_inputs/chui_multi_combo_box/styles.css

@@ -21,11 +21,17 @@ multicombobox {
 
 multicombobox_options {
     display: flex;
-    flex-direction: column;
+    flex: 1 1 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
 }
 
 .multicombobox_input {
-    width: 100%;
+    flex: 1 1 40px;
+    min-width: 40px;
     margin: 0;
     padding: var(--test_padding) 0 var(--test_padding) 10px;
     background: transparent;
@@ -108,7 +114,8 @@ multicombo_button_open {
     background: transparent;
     color: var(--text_color_disabled);
     text-align: start;
-    width: 100%;
+    flex: 1 1 40px;
+    min-width: 40px;
     margin: 0;
     padding: var(--test_padding) 0 var(--test_padding) 10px;
     border: none;
@@ -130,8 +137,10 @@ multicombobox_option_added_main {
     display: flex;
     flex-direction: row;
     height: max-content;
-    margin: 3px;
+    margin: 2px;
     width: max-content;
+    min-width: 0;
+    max-width: calc(100% - 6px);
     background: var(--element_background_2);
     border-radius: var(--border_radius);
     font-weight: 500;
@@ -140,12 +149,18 @@ multicombobox_option_added_main {
 }
 
 multicombobox_option_added_body {
-    padding: 5px 8px;
-    width: max-content;
+    padding: 5px 6px;
+    flex: 0 1 auto;
+    width: auto;
+    min-width: 0;
     height: max-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 multicombobox_option_added_remove {
+    flex: 0 0 auto;
     width: max-content;
     height: max-content;
     font-weight: 600;

package/framework/components/chui_popups/styles.css

@@ -7,7 +7,7 @@ chui_popup {
     width: 100%;
     height: 100%;
     overflow: auto;
-    background-color: var(--header_background);
+    background-color: var(--modal_scrim);
     padding: 0;
     border: none;
     backdrop-filter: var(--global_blur);
@@ -20,22 +20,25 @@ popup_content {
     height: max-content;
     display: flex;
     flex-direction: column;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_md);
     color: var(--text_color);
-    background: var(--element_background_2);
-    box-shadow: var(--box_shadow_drop);
-    border: none;
+    background: var(--modal_background);
+    box-shadow: var(--box_shadow_modal);
+    border: 1px solid var(--border_color);
+    backdrop-filter: var(--global_blur);
 }
 
 popup_body {
-    padding: 10px;
+    padding: var(--test_padding);
     display: flex;
     height: -webkit-fill-available;
     width: -webkit-fill-available;
     overflow: auto;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
+    /* stretch, а не center: поле ввода в prompt заполняет карточку,
+       а центрирование текста задаётся через text-align у title/message */
+    align-items: stretch;
 }
 
 popup_buttons {
@@ -43,7 +46,7 @@ popup_buttons {
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    padding: 8px;
+    padding: var(--test_padding);
 }
 
 popup_title {
@@ -51,80 +54,48 @@ popup_title {
     text-align: center;
     font-size: var(--font_default_size);
     font-weight: 500;
-    padding: 6px;
+    padding: var(--margin);
 }
 
 popup_message {
     display: block;
     text-align: center;
     font-size: var(--font_labels_size);
-    font-weight: 500;
-    padding: 6px;
-}
-/* ALERT */
-popup_button_ok {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: -webkit-fill-available;
-    padding: 10px;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    font-weight: 500;
-    font-size: var(--font_default_size);
-}
-
-popup_button_ok:hover {
-    color: var(--text_color_hover);
-    background: var(--blue_prime_background);
-}
-/* CONFIRM */
-popup_button_accept {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: -webkit-fill-available;
-    padding: 10px;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    font-weight: 500;
-    font-size: var(--font_default_size);
+    font-weight: 400;
+    padding: var(--margin);
 }
-
-popup_button_accept:hover {
-    color: var(--text_color_hover);
-    background: var(--blue_prime_background);
-}
-
+/* Кнопки — как .chui_button: заполненный контрол с хайрлайном, но равной ширины */
+popup_button_ok,
+popup_button_accept,
 popup_button_cancel {
+    cursor: pointer;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     width: -webkit-fill-available;
-    padding: 10px;
+    padding: var(--main_padding);
+    margin: var(--margin);
     border-radius: var(--border_radius);
+    background: var(--button_background);
+    border: 1px solid var(--button_border_color);
     color: var(--text_color);
-    font-weight: 500;
+    font-weight: 400;
     font-size: var(--font_default_size);
 }
 
+popup_button_ok:hover,
+popup_button_accept:hover,
 popup_button_cancel:hover {
+    background: var(--button_background_hover);
+    border: 1px solid var(--button_border_color_hover);
     color: var(--text_color_hover);
-    background: var(--red_prime_background);
-}
-
-popup_button_ok,
-popup_button_accept,
-popup_button_cancel {
-    cursor: pointer;
 }
 
 popup_button_ok:active,
 popup_button_accept:active,
 popup_button_cancel:active {
     background: var(--element_background_prime);
+    border: 1px solid var(--button_border_color_hover);
     color: var(--text_color_hover);
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "chuijs",
   "productName": "chuijs",
   "description": "component framework chUiJS",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "private": false,
   "main": "index.js",
   "author": {