chuijs 4.0.3 → 4.0.4

package/framework/components/chui_media/audio_styles.css

@@ -9,11 +9,11 @@ chui_ap_main {
     display: flex;
     flex-direction: column;
     border-radius: var(--radius_md);
-    background: var(--ap_main_background);
+    background: var(--player_background);
     border: 1px solid var(--border_color);
     overflow: hidden;
-    --seek-before-width: 0%;
-    --volume-before-width: 0%;
+    --seek_before_width: 0%;
+    --volume_before_width: 0%;
     min-width: 460px;
     height: max-content;
 }
@@ -40,21 +40,21 @@ chui_ap_main[data_pin] {
 chui_ap_main[data_pin="bottom"] {
     inset-inline: 0;
     bottom: 0;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_ap_main[data_pin="top"] {
     inset-inline: 0;
     top: 0;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 /* Боковые закрепления — компактная полоса у края, по центру высоты окна */
 chui_ap_main[data_pin="left"],
 chui_ap_main[data_pin="right"] {
     inset-block: 0;
-    width: min(460px, calc(100% - 2 * var(--margin)));
-    margin: auto var(--margin);
+    width: min(460px, calc(100% - 2 * var(--block_margin)));
+    margin: auto var(--block_margin);
 }
 
 chui_ap_main[data_pin="left"] {
@@ -112,7 +112,7 @@ chui_ap_seek_buf {
     width: 0;
     height: var(--player_track_height);
     border-radius: var(--radius_pill);
-    background: var(--ap_slider_buf_background);
+    background: var(--player_slider_buffer_background);
     position: absolute;
     inset-inline-start: 6px;
     max-width: calc(100% - 12px);
@@ -148,8 +148,8 @@ chui_ap_info chui_label {
 #chui_ap_seek {
     background-image: linear-gradient(
         to right,
-        var(--blue_prime_background) 0 var(--seek-before-width, 0%),
-        var(--ap_slider_background) var(--seek-before-width, 0%) 100%
+        var(--blue_prime_background) 0 var(--seek_before_width, 0%),
+        var(--player_slider_background) var(--seek_before_width, 0%) 100%
     );
 }
 
@@ -158,16 +158,16 @@ chui_ap_info chui_label {
 #chui_ap_volume {
     background-image: linear-gradient(
         to right,
-        var(--text_color) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+        var(--text_color) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
     );
 }
 
 #chui_ap_volume:disabled {
     background-image: linear-gradient(
         to right,
-        var(--ap_slider_buf_background) 0 var(--volume-before-width, 0%),
-        var(--ap_slider_background) var(--volume-before-width, 0%) 100%
+        var(--player_slider_buffer_background) 0 var(--volume_before_width, 0%),
+        var(--player_slider_background) var(--volume_before_width, 0%) 100%
     );
 }
 
@@ -191,9 +191,17 @@ chui_ap_info chui_label {
     width: 9px;
     border-radius: 50%;
     background-color: var(--player_thumb_background);
-    box-shadow: 0 0 0 2px var(--ap_main_background);
+    box-shadow: 0 0 0 2px var(--player_background);
     cursor: pointer;
     margin-top: calc((var(--player_track_height) - 9px) / 2);
+    /* Рост под курсором — тот же переход: своё время у ручки есть только здесь,
+       общее правило до псевдоэлементов бегунка не достаёт */
+    transition:
+        height var(--motion_fast) var(--motion_ease),
+        width var(--motion_fast) var(--motion_ease),
+        margin-top var(--motion_fast) var(--motion_ease),
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 /* У выключенной полосы ползунка нет: она и так приглушена заливкой */
@@ -215,7 +223,7 @@ chui_ap_main:hover #chui_ap_volume:not(:disabled)::-webkit-slider-thumb,
     margin-top: calc((var(--player_track_height) - 12px) / 2);
     background-color: var(--player_thumb_background);
     box-shadow:
-        0 0 0 2px var(--ap_main_background),
+        0 0 0 2px var(--player_background),
         var(--box_shadow_main);
 }
 
@@ -269,6 +277,14 @@ chui_ap_volume_icon {
     cursor: pointer;
 }
 
+/* Кегль глифа — ключом плеера: у `chui_icon` есть своё правило (размер шапки),
+   поэтому размер задаётся значку, а не кнопке. Прежде число стояло в коде (пять мест) */
+chui_ap_play_pause chui_icon,
+chui_ap_fx_icon chui_icon,
+chui_ap_volume_icon chui_icon {
+    font-size: var(--player_icon_size);
+}
+
 /* Главная кнопка — светлый круг с глифом цвета подложки, как у Spotify: роль акцента
    в плеере занята полосами прогресса, а круг читается кнопкой воспроизведения */
 chui_ap_play_pause {
@@ -313,6 +329,8 @@ chui_ap_fx_dropdown {
 
 chui_ap_fx_dropdown.fx_open {
     display: block;
+    /* Раскрытие панели — общим кадром: прежде секция вставала на место рывком */
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
 }
 
 /* Открытая кнопка — как у прочих выпадающих: состояние держит тонировка акцента */
@@ -333,7 +351,7 @@ chui_ap_equalizer_main {
 /* === ПРЕСЕТЫ И ВЫКЛЮЧАТЕЛЬ ЭКВАЛАЙЗЕРА === */
 /* Поле пресетов и выключатель — общекитовые `Select` и `Toggle`, вложенные в полосу панели:
    клавиатура, роли и состояния у них свои, а здесь только размеры. У `Select` ширина взята
-   токеном страницы (`--control_width`), у `Toggle` — свои поля `--margin`, из-за которых
+   токеном страницы (`--control_width`), у `Toggle` — свои поля `--block_margin`, из-за которых
    выключатель не вставал к краю */
 chui_ap_equalizer_controls chui_selectbox {
     flex: 0 1 260px;
@@ -419,7 +437,7 @@ chui_eq_slider_main slider_label:first-child {
     color: var(--text_color);
     text-align: center;
     opacity: 0;
-    transition: opacity 0.12s ease;
+    transition: opacity var(--motion_fast) var(--motion_ease);
     pointer-events: none;
 }
 
@@ -470,13 +488,13 @@ chui_eq_slider_main:focus-within slider_label:first-child {
     background-repeat: no-repeat;
     /* Заливка идёт от низа до ручки: полоса заливки короче рельса ровно на размер ручки
        и стоит по центру, поэтому её края совпадают с крайними положениями ручки при любом
-       значении (`--fx-before-width` считает скрипт, как у полос прогресса и громкости) */
+       значении (`--fx_before_width` считает скрипт, как у полос прогресса и громкости) */
     background-size: 100% calc(100% - var(--fx_knob));
     background-position: center;
     background-image: linear-gradient(
         to top,
-        var(--blue_prime_background) 0 var(--fx-before-width),
-        transparent var(--fx-before-width)
+        var(--blue_prime_background) 0 var(--fx_before_width),
+        transparent var(--fx_before_width)
     );
 }
 
@@ -505,8 +523,8 @@ chui_eq_slider_main:focus-within slider_label:first-child {
     accent-color: var(--text_color_disabled);
     background-image: linear-gradient(
         to top,
-        var(--text_color_disabled) 0 var(--fx-before-width),
-        transparent var(--fx-before-width)
+        var(--text_color_disabled) 0 var(--fx_before_width),
+        transparent var(--fx_before_width)
     );
 }
 

package/framework/components/chui_media/image.js

@@ -4,12 +4,12 @@ const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 // image-size 2.x отдаёт объект с функцией внутри (сборка ESM + CJS-обёртка), а 1.x — саму
 // функцию: разворачиваем оба варианта, чтобы модуль не зависел от установленной версии
-const image_size = require("image-size");
-const sizeOf = typeof image_size === "function" ? image_size : image_size.imageSize;
+const imageSizeModule = require("image-size");
+const sizeOf = typeof imageSizeModule === "function" ? imageSizeModule : imageSizeModule.imageSize;
 const { Icon, Icons } = require("../chui_icons/icons");
 
 class Image {
-    #chui_image = document.createElement("chui_image");
+    #chuiImage = document.createElement("chui_image");
     #image = document.createElement("img");
     #alt = "";
     #decorative = false;
@@ -28,31 +28,31 @@ class Image {
     ) {
         require("../../modules/chui_functions").setStyles(__dirname + "/image_styles.css", "chUiJS_Image");
         // Внешний отступ снимает класс: его читает CSS
-        if (options.disableMargin) this.#chui_image.classList.add("image_no_margin");
+        if (options.disableMargin) this.#chuiImage.classList.add("image_no_margin");
         // Источник — необязательная опция: пустая заготовка пути раньше читалась как файл (ENOENT)
         const path = optionOr(options.path, undefined);
         const base64 = optionOr(options.base64, undefined);
-        const http_path = optionOr(options.httpPath, undefined);
+        const httpPath = optionOr(options.httpPath, undefined);
         if (path !== undefined)
             this.#image.setAttribute(
                 "src",
                 `data:image/png;base64,${require("fs").readFileSync(path).toString("base64")}`
             );
         if (base64 !== undefined) this.#image.setAttribute("src", `data:image/png;base64,${base64}`);
-        if (http_path !== undefined) this.#image.setAttribute("src", http_path);
-        if (options.width !== undefined) this.#chui_image.style.width = options.width;
-        if (options.height !== undefined) this.#chui_image.style.height = options.height;
+        if (httpPath !== undefined) this.#image.setAttribute("src", httpPath);
+        if (options.width !== undefined) this.#chuiImage.style.width = options.width;
+        if (options.height !== undefined) this.#chuiImage.style.height = options.height;
         if (options.width !== undefined) this.#image.style.width = options.width;
         if (options.height !== undefined) this.#image.style.height = options.height;
-        this.#chui_image.appendChild(this.#image);
+        this.#chuiImage.appendChild(this.#image);
         // Alt по умолчанию пустой: без атрибута скринридер читал бы вместо подписи data-URL картинки
         this.setAlt(options.alt === undefined ? "" : options.alt);
         if (options.decorative !== undefined) this.setDecorative(options.decorative === true);
 
         if (options.openPopup) {
-            this.#chui_image.addEventListener("click", () => {
+            this.#chuiImage.addEventListener("click", () => {
                 let popup;
-                let widow_size = document.body.getBoundingClientRect();
+                const windowSize = document.body.getBoundingClientRect();
                 if (options.path !== undefined) {
                     //
                     let imageSet;
@@ -80,24 +80,27 @@ class Image {
                     }
                 }
                 if (options.base64 !== undefined) {
-                    let image_size;
-                    let imageSet;
-                    let img = Buffer.from(options.base64, "base64");
-                    let dimensions = sizeOf(img);
-                    if (dimensions.height > widow_size.height) {
-                        image_size = ["auto", `${widow_size.height}px`];
-                    } else if (dimensions.width > widow_size.width) {
-                        image_size = [`${widow_size.height}px`, "auto"];
+                    let imageSize;
+                    const img = Buffer.from(options.base64, "base64");
+                    const dimensions = sizeOf(img);
+                    // Картинка вписывается в окно по той стороне, которой не хватает: высокая
+                    // ограничивается высотой окна, широкая — шириной. Прежде в широкой ветке
+                    // стояла высота окна (опечатка): картинка 1600×400 в окне 1000×800
+                    // получала ширину 800 px вместо 1000
+                    if (dimensions.height > windowSize.height) {
+                        imageSize = ["auto", `${windowSize.height}px`];
+                    } else if (dimensions.width > windowSize.width) {
+                        imageSize = [`${windowSize.width}px`, "auto"];
                     } else {
-                        image_size = ["auto", `auto`];
+                        imageSize = ["auto", "auto"];
                     }
                     //
-                    imageSet = new Image({
+                    const imageSet = new Image({
                         disableMargin: true,
                         openPopup: false,
                         base64: options.base64,
-                        width: image_size[0],
-                        height: image_size[1],
+                        width: imageSize[0],
+                        height: imageSize[1],
                     });
                     popup = new ImagePopup(imageSet.set(), "max-content", "max-content");
                 }
@@ -107,11 +110,11 @@ class Image {
         }
     }
     setWidth(value) {
-        this.#chui_image.style.width = value;
+        this.#chuiImage.style.width = value;
         this.#image.style.width = value;
     }
     setHeight(value) {
-        this.#chui_image.style.height = value;
+        this.#chuiImage.style.height = value;
         this.#image.style.height = value;
     }
     /** Подпись изображения (пустая строка — декоративное) */
@@ -129,52 +132,52 @@ class Image {
     /** Декоративное изображение прячется от скринридера целиком (`aria-hidden`) */
     setDecorative(boolean = Boolean()) {
         this.#decorative = boolean;
-        if (this.#decorative) this.#chui_image.setAttribute("aria-hidden", "true");
-        else this.#chui_image.removeAttribute("aria-hidden");
+        if (this.#decorative) this.#chuiImage.setAttribute("aria-hidden", "true");
+        else this.#chuiImage.removeAttribute("aria-hidden");
         this.#image.setAttribute("alt", this.#decorative ? "" : this.#alt);
         return this;
     }
     set() {
-        return this.#chui_image;
+        return this.#chuiImage;
     }
 }
 
 class ImagePopup {
     #id = require("randomstring").generate();
-    #chui_image_popup = document.createElement(`chui_image_popup`);
-    #popup_content = document.createElement("popup_content_test");
-    #image_popup_content = document.createElement("image_popup_content");
-    #close_popup = document.createElement("image_popup_close");
+    #chuiImagePopup = document.createElement(`chui_image_popup`);
+    #popupContent = document.createElement("popup_content_test");
+    #imagePopupContent = document.createElement("image_popup_content");
+    #closePopup = document.createElement("image_popup_close");
     constructor(image, width, height) {
-        this.#chui_image_popup.id = this.#id;
+        this.#chuiImagePopup.id = this.#id;
         //ADDS
-        this.#image_popup_content.style.width = width;
-        this.#image_popup_content.style.height = height;
-        this.#image_popup_content.appendChild(image);
+        this.#imagePopupContent.style.width = width;
+        this.#imagePopupContent.style.height = height;
+        this.#imagePopupContent.appendChild(image);
 
-        this.#close_popup.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "30px", "").getHTML();
+        this.#closePopup.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "30px", "").getHTML();
         // Крестик без подписи читался бы как «кнопка» без имени: значок помечен aria-hidden,
         // а роль и Enter/Space даёт общий хелпер — клавиатурой слой тоже закрывается
-        makeKeyboardButton(this.#close_popup);
-        this.#close_popup.setAttribute("aria-label", I18n.t("common.close"));
-        this.#close_popup.addEventListener("click", () => this.close());
+        makeKeyboardButton(this.#closePopup);
+        this.#closePopup.setAttribute("aria-label", I18n.t("common.close"));
+        this.#closePopup.addEventListener("click", () => this.close());
 
-        this.#popup_content.appendChild(this.#image_popup_content);
-        this.#popup_content.appendChild(this.#close_popup);
-        this.#chui_image_popup.appendChild(this.#popup_content);
+        this.#popupContent.appendChild(this.#imagePopupContent);
+        this.#popupContent.appendChild(this.#closePopup);
+        this.#chuiImagePopup.appendChild(this.#popupContent);
     }
     open() {
-        let dialog = this.#chui_image_popup;
+        const dialog = this.#chuiImagePopup;
         new Animation(dialog).fadeIn();
         new Animation(dialog.firstChild).scaleIn();
     }
     close() {
-        let dialog = this.#chui_image_popup;
+        const dialog = this.#chuiImagePopup;
         new Animation(dialog.firstChild).scaleOut();
         new Animation(dialog).fadeOutAndRemove();
     }
     set() {
-        return this.#chui_image_popup;
+        return this.#chuiImagePopup;
     }
 }
 

package/framework/components/chui_media/image_compare.js

@@ -54,19 +54,19 @@ class ImageCompare {
     #after = document.createElement("img");
     #handle = document.createElement("image_compare_handle");
     #grip = document.createElement("image_compare_grip");
-    #badge_before = document.createElement("image_compare_badge");
-    #badge_after = document.createElement("image_compare_badge");
+    #badgeBefore = document.createElement("image_compare_badge");
+    #badgeAfter = document.createElement("image_compare_badge");
     #value = 50;
     #step = 1;
     #orientation = ImageCompare.ORIENTATION.HORIZONTAL;
     #labels = true;
     #disabled = false;
     #dragging = false;
-    #label_text = undefined;
-    #before_alt = undefined;
-    #after_alt = undefined;
-    #on_change = undefined;
-    #change_listeners = [];
+    #labelText = undefined;
+    #beforeAlt = undefined;
+    #afterAlt = undefined;
+    #onChange = undefined;
+    #changeListeners = [];
 
     constructor(
         options = {
@@ -91,11 +91,11 @@ class ImageCompare {
         ImageCompare.#counter += 1;
         this.#id = options.id === undefined ? `chui_image_compare_${ImageCompare.#counter}` : options.id;
         this.#root.id = this.#id;
-        this.#label_text = options.label === undefined ? undefined : options.label;
-        this.#before_alt = options.beforeAlt;
-        this.#after_alt = options.afterAlt;
+        this.#labelText = options.label === undefined ? undefined : options.label;
+        this.#beforeAlt = options.beforeAlt;
+        this.#afterAlt = options.afterAlt;
         this.#labels = options.labels !== false;
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.width !== undefined) this.#root.style.width = options.width;
         if (options.height !== undefined) this.#root.style.setProperty("--image_compare_height", options.height);
         if (options.value !== undefined) this.#value = this.#clamp(options.value);
@@ -114,8 +114,8 @@ class ImageCompare {
         this.#after.className = "image_compare_image";
         this.#before.setAttribute("draggable", "false");
         this.#after.setAttribute("draggable", "false");
-        this.#before.setAttribute("alt", this.#altText(this.#before_alt, "media.imageCompareBefore"));
-        this.#after.setAttribute("alt", this.#altText(this.#after_alt, "media.imageCompareAfter"));
+        this.#before.setAttribute("alt", this.#altText(this.#beforeAlt, "media.imageCompareBefore"));
+        this.#after.setAttribute("alt", this.#altText(this.#afterAlt, "media.imageCompareAfter"));
         // Ручка ведёт себя как ползунок: имя берётся из заголовка или из опции label
         this.#handle.setAttribute("role", "slider");
         this.#handle.setAttribute("tabindex", "0");
@@ -125,22 +125,22 @@ class ImageCompare {
         else
             this.#handle.setAttribute(
                 "aria-label",
-                this.#label_text === undefined ? I18n.t("media.imageCompareLabel") : this.#label_text
+                this.#labelText === undefined ? I18n.t("media.imageCompareLabel") : this.#labelText
             );
         this.#grip.setAttribute("aria-hidden", "true");
         this.#grip.innerText = "‹ ›";
-        this.#badge_before.className = "image_compare_badge image_compare_badge_before";
-        this.#badge_after.className = "image_compare_badge image_compare_badge_after";
-        this.#badge_before.innerText = I18n.t("media.imageCompareBefore");
-        this.#badge_after.innerText = I18n.t("media.imageCompareAfter");
+        this.#badgeBefore.className = "image_compare_badge image_compare_badge_before";
+        this.#badgeAfter.className = "image_compare_badge image_compare_badge_after";
+        this.#badgeBefore.innerText = I18n.t("media.imageCompareBefore");
+        this.#badgeAfter.innerText = I18n.t("media.imageCompareAfter");
 
         this.#handle.appendChild(this.#grip);
         this.#clip.appendChild(this.#after);
         this.#frame.appendChild(this.#before);
         this.#frame.appendChild(this.#clip);
         this.#frame.appendChild(this.#handle);
-        this.#frame.appendChild(this.#badge_before);
-        this.#frame.appendChild(this.#badge_after);
+        this.#frame.appendChild(this.#badgeBefore);
+        this.#frame.appendChild(this.#badgeAfter);
         this.#root.appendChild(this.#frame);
 
         // Перетаскивание идёт с захватом указателя на кадре: слушателей окна не нужно
@@ -209,7 +209,7 @@ class ImageCompare {
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
     set() {
@@ -218,8 +218,8 @@ class ImageCompare {
 
     // === ВНУТРЕННЕЕ ===
     #emit() {
-        for (const listener of this.#change_listeners) listener(this.#value);
-        if (this.#on_change !== undefined) this.#on_change(this.#value);
+        for (const listener of this.#changeListeners) listener(this.#value);
+        if (this.#onChange !== undefined) this.#onChange(this.#value);
     }
     #clamp(value) {
         return Math.max(0, Math.min(100, Number(value) || 0));
@@ -254,22 +254,22 @@ class ImageCompare {
             this.#syncBadges(this.#value, 100 - this.#value);
             return;
         }
-        const from_end = this.#isRTL();
+        const fromEnd = this.#isRTL();
         this.#handle.style.top = "";
-        this.#handle.style.left = from_end ? "" : percent;
-        this.#handle.style.right = from_end ? percent : "";
-        this.#clip.style.clipPath = from_end ? `inset(0 ${percent} 0 0)` : `inset(0 0 0 ${percent})`;
-        this.#syncBadges(from_end ? 100 - this.#value : this.#value, from_end ? this.#value : 100 - this.#value);
+        this.#handle.style.left = fromEnd ? "" : percent;
+        this.#handle.style.right = fromEnd ? percent : "";
+        this.#clip.style.clipPath = fromEnd ? `inset(0 ${percent} 0 0)` : `inset(0 0 0 ${percent})`;
+        this.#syncBadges(fromEnd ? 100 - this.#value : this.#value, fromEnd ? this.#value : 100 - this.#value);
     }
     /**
      * Подпись стороны видна, только если её половина кадра достаточно широка:
      * иначе «До» оказалось бы поверх картинки «после» и путало бы.
      */
-    #syncBadges(before_part, after_part) {
-        const enough = this.#labels !== false && before_part >= BADGE_MIN_PART;
-        const enough_after = this.#labels !== false && after_part >= BADGE_MIN_PART;
-        this.#badge_before.style.display = enough ? "" : "none";
-        this.#badge_after.style.display = enough_after ? "" : "none";
+    #syncBadges(beforePart, afterPart) {
+        const enough = this.#labels !== false && beforePart >= BADGE_MIN_PART;
+        const enoughAfter = this.#labels !== false && afterPart >= BADGE_MIN_PART;
+        this.#badgeBefore.style.display = enough ? "" : "none";
+        this.#badgeAfter.style.display = enoughAfter ? "" : "none";
     }
     /** Доля кадра под указателем: в RTL отсчёт идёт с другого края */
     #percentAt(clientX, clientY) {
@@ -278,8 +278,8 @@ class ImageCompare {
         if (this.#orientation === ImageCompare.ORIENTATION.VERTICAL) {
             return ((clientY - rect.top) / rect.height) * 100;
         }
-        const from_start = ((clientX - rect.left) / rect.width) * 100;
-        return this.#isRTL() ? 100 - from_start : from_start;
+        const fromStart = ((clientX - rect.left) / rect.width) * 100;
+        return this.#isRTL() ? 100 - fromStart : fromStart;
     }
 
     // === ОБРАБОТЧИКИ ===

package/framework/components/chui_media/image_compare_styles.css

@@ -4,14 +4,14 @@ chui_image_compare {
     flex-direction: column;
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }
 
 image_compare_title {
     display: block;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -73,8 +73,8 @@ image_compare_handle {
     justify-content: center;
     width: 2px;
     margin-inline: -1px;
-    background: var(--background_color);
-    box-shadow: 0 0 8px rgb(0 0 0 / 25%);
+    background: var(--element_background_2);
+    box-shadow: var(--box_shadow_halo);
     cursor: ew-resize;
     outline: none;
 }
@@ -102,7 +102,7 @@ image_compare_grip {
     width: 34px;
     height: 34px;
     border-radius: 50%;
-    background: var(--background_color);
+    background: var(--element_background_2);
     border: 1px solid var(--border_color);
     box-shadow: var(--box_shadow_drop);
     color: var(--text_color);

package/framework/components/chui_media/image_styles.css

@@ -2,7 +2,7 @@ chui_image {
     height: max-content;
     width: max-content;
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     display: flex;
 }