flet-box 1.0.4 → 1.0.6

package/src/widgets/AlertDialog.js

@@ -40,7 +40,7 @@ export const AlertDialog = (props) => {
     onConfirm,
     onCancel,
     onClose,
-    variant = "normal", // 'normal', 'danger', 'warning', 'success'
+    variant = "normal",
     showCancel = true,
     confirmText = "Accept",
     cancelText = "Cancel",
@@ -83,14 +83,16 @@ export const AlertDialog = (props) => {
     children: [
       icon,
       Text({
-        value: title,
+        // FIX: `value` no aplica a <span> → título quedaba vacío. Usar `text`.
+        text: title,
         size: 24,
         fontWeight: "bold",
         color: colors.text,
         textAlign: "center",
       }),
       Text({
-        value: message,
+        // FIX: idem para el mensaje.
+        text: message,
         size: 18,
         fontWeight: "bold",
         color: colors.textSecondary,
@@ -134,7 +136,7 @@ export const AlertDialog = (props) => {
 
   let modal = null;
   // Placeholder until the modal is created below — avoids a temporal dead-zone
-  let closeModal = () => {};
+  let closeModal = () => { };
 
   // Delegate to the base Modal widget, passing our content and actions
   modal = Modal({
@@ -159,4 +161,4 @@ export const AlertDialog = (props) => {
   return { open, close, modal };
 };
 
-export default AlertDialog;
+export default AlertDialog;

package/src/widgets/Checkbox.js

@@ -12,6 +12,7 @@ export const Checkbox = (props) => {
     onPress: onPressProp,
     disabled = false,
     size = 20,
+    activeColor = colors.primary,
     ...rest
   } = props;
 
@@ -25,10 +26,8 @@ export const Checkbox = (props) => {
 
   const updateUI = (newChecked) => {
     if (checkboxRef) {
-      checkboxRef.style.backgroundColor = newChecked
-        ? colors.primary
-        : "transparent";
-      checkboxRef.style.border = `2px solid ${newChecked ? colors.primary : colors.border}`;
+      checkboxRef.style.backgroundColor = newChecked ? activeColor : "transparent";
+      checkboxRef.style.border = `2px solid ${newChecked ? activeColor : colors.border}`;
     }
     if (checkMarkRef) {
       checkMarkRef.style.display = newChecked ? "inline-block" : "none";
@@ -51,9 +50,9 @@ export const Checkbox = (props) => {
     widgetName: "Checkbox",
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalChecked ? colors.primary : colors.border}`,
+    border: `2px solid ${disabled ? colors.border : internalChecked ? activeColor : colors.border}`,
     borderRadius: 6,
-    backgroundColor: internalChecked ? colors.primary : "transparent",
+    backgroundColor: internalChecked ? activeColor : "transparent",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -84,7 +83,10 @@ export const Checkbox = (props) => {
     // Hover effect
     checkbox.addEventListener("mouseenter", () => {
       if (!disabled && !internalChecked) {
-        checkbox.style.backgroundColor = colors.primary + "20";
+        // `color-mix` rather than `activeColor + "20"`: that string concat only
+        // produced a valid color for `#rrggbb` hexes and silently broke on
+        // `rgba()`, named colors and 3-digit hex `activeColor` values.
+        checkbox.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
       }
     });
 

package/src/widgets/CircularBar.js

@@ -104,7 +104,18 @@ export const CircularBar = (props) => {
     if (!gradient) return color;
     if (typeof gradient === "string") return gradient;
     if (Array.isArray(gradient)) {
-      const grad = ctx.createLinearGradient(0, 0, currentWidth, currentWidth);
+      // CSS angle convention: 0deg points up and angles grow clockwise, so the
+      // default 135deg keeps the historical top-left to bottom-right sweep.
+      const rad = (gradientAngle * Math.PI) / 180;
+      const centre = currentWidth / 2;
+      const dx = Math.sin(rad) * centre;
+      const dy = -Math.cos(rad) * centre;
+      const grad = ctx.createLinearGradient(
+        centre - dx,
+        centre - dy,
+        centre + dx,
+        centre + dy,
+      );
       gradient.forEach((c, i) => {
         grad.addColorStop(i / (gradient.length - 1), c);
       });

package/src/widgets/FloatingActionButton.js

@@ -2,11 +2,6 @@
  * @file FloatingActionButton.js
  * @description Circular floating action button anchored to a corner.
  */
-/**
- * FloatingActionButton Component
- * @module widgets/FloatingActionButton
- */
-
 import { Container } from "./Container.js";
 import { Row } from "./Row.js";
 import { Text } from "./Text.js";
@@ -45,7 +40,9 @@ export const FloatingActionButton = (props) => {
   if (extended && label) {
     children.push(
       Text({
-        value: label,
+        // FIX: `value` es special y `applySpecial` solo lo aplica en inputs
+        // → en un <span> no hacía nada y el label quedaba vacío.
+        text: label,
         size: 14,
         fontWeight: "500",
         color: foregroundColor,
@@ -88,4 +85,4 @@ export const FloatingActionButton = (props) => {
   return button;
 };
 
-export default FloatingActionButton;
+export default FloatingActionButton;

package/src/widgets/Image.js

@@ -5,18 +5,16 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 
 export const Image = (props) => {
-  // `fit` and `circular` are documented Image props with no entry in the prop
-  // database, so forwarding them raw only produced an "unknown prop" warning
-  // while images stayed stretched (`object-fit: fill`) and square. Map them onto
-  // real CSS. `...rest` comes last so an explicit `borderRadius` still wins.
-  const { fit, circular, ...rest } = props || {};
+  // `fit` is now a proper style prop in translateProps (→ object-fit), so it
+  // flows through the factory like any other CSS property. Only `circular`
+  // needs special handling — it maps to borderRadius 50%.
+  const { circular, ...rest } = props || {};
   return WidgetFactory({
     tag: "img",
     widgetName: "Image",
-    ...(fit !== undefined ? { objectFit: fit } : null),
     ...(circular ? { borderRadius: "50%" } : null),
     ...rest,
   });
 };
 
-export default Image;
+export default Image;

package/src/widgets/Input.js

@@ -26,6 +26,9 @@ import { composeUpdate } from "../utils/composeUpdate.js";
  * @property {string} [iconColor] - Color of the icons.
  * @property {number} [iconSize=20] - Size of the icons in pixels.
  * @property {Function} [onIconPress] - Called when either icon is pressed.
+ * @property {boolean} [clearable=false] - Shows a trailing button that empties the field.
+ * @property {boolean} [passwordToggle=false] - Shows a trailing button that reveals or hides the value.
+ * @property {Function} [onEnter] - Called with (value, event) when the user presses Enter in the field.
  * @property {"none"|"letters"|"numbers"|"email"|"alphanumeric"|"safe"|"custom"} [validation="none"] - Validation mode applied on each keystroke and on blur.
  * @property {number} [maxLength] - Maximum number of characters allowed.
  * @property {boolean} [required=false] - Marks the field as required; validation fails on empty values.
@@ -39,6 +42,9 @@ import { composeUpdate } from "../utils/composeUpdate.js";
  * @property {Function} [onBlur] - Called when the input loses focus and final validation runs.
  */
 
+/** Suffix for generated field ids, so two Inputs never share one. */
+let inputIdSeed = 0;
+
 /**
  * A fully-featured text input widget with built-in validation, icons, and theme support.
  *
@@ -78,6 +84,9 @@ export const Input = (props) => {
     iconSize = 20,
     onIconPress,
 
+    clearable = false,
+    passwordToggle = false,
+
     validation = "none",
     maxLength,
     required = false,
@@ -90,6 +99,7 @@ export const Input = (props) => {
     onChange,
     onFocus,
     onBlur,
+    onEnter,
     ...rest
   } = props;
 
@@ -98,12 +108,22 @@ export const Input = (props) => {
   let isValid = true;
   let validationMessage = "";
 
+  // The `<label>` needs a `for` that matches the native input's `id`, otherwise
+  // assistive tech never hears the field's name — the click-to-focus handler is
+  // not an association. Deriving it from the caller's `id` keeps the generated
+  // DOM predictable when the field is inside a form.
+  const fieldId =
+    typeof rest.id === "string" && rest.id
+      ? `${rest.id}-input`
+      : `fletbox-input-${++inputIdSeed}`;
+
   // DOM element references — populated during the build phase below
   let inputElement = null;
   let validationIcon = null;
   let errorMessageElement = null;
   let inputWrapper = null;
   let container = null;
+  let clearButton = null;
 
   // Whether the native input currently holds focus. Used to keep the focus
   // ring (a box-shadow) in sync with validation colors without ever changing
@@ -286,6 +306,7 @@ export const Input = (props) => {
     if (inputElement) {
       inputElement.value = filtered;
     }
+    if (clearButton) clearButton.style.display = filtered ? "flex" : "none";
 
     const result = validateValue(filtered);
     isValid = result.valid;
@@ -324,6 +345,7 @@ export const Input = (props) => {
     if (!text) return;
     labelEl = WidgetFactory({
       tag: "label",
+      for: fieldId,
       text,
       fontSize: 12,
       fontWeight: 500,
@@ -406,6 +428,7 @@ export const Input = (props) => {
   //   - Accessibility (label association, screen readers)
   //   - Browser autofill support
   inputElement = document.createElement("input");
+  inputElement.id = fieldId;
   inputElement.type = type;
   inputElement.placeholder = placeholder || "";
   inputElement.disabled = disabled || false;
@@ -468,6 +491,75 @@ export const Input = (props) => {
 
   inputWrapper.appendChild(inputElement);
 
+  inputElement.addEventListener("keydown", (e) => {
+    // Enter is not a DOM event of its own: the callback receives the value the
+    // user just confirmed, after the same filtering `onChange` applies.
+    if (e.key === "Enter" && onEnter) onEnter(currentValue, e);
+  });
+
+  // --- Trailing controls (clear / reveal) ---
+  // Real `<button type="button">` elements: they are keyboard-reachable, and the
+  // `type` keeps them from submitting a form the input happens to live in.
+  const makeTrailingButton = (glyph, label, onPress) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = glyph;
+    btn.setAttribute("aria-label", label);
+    btn.style.width = "28px";
+    btn.style.height = "28px";
+    btn.style.flexShrink = "0";
+    btn.style.marginRight = "6px";
+    btn.style.padding = "0";
+    btn.style.border = "none";
+    btn.style.background = "transparent";
+    btn.style.color = colors.textSecondary;
+    btn.style.fontSize = "15px";
+    btn.style.lineHeight = "1";
+    btn.style.cursor = disabled ? "not-allowed" : "pointer";
+    btn.style.display = "flex";
+    btn.style.alignItems = "center";
+    btn.style.justifyContent = "center";
+    btn.addEventListener("click", (e) => {
+      // The wrapper focuses the input on any click; a trailing control must not
+      // steal that, and it must stay out of the form's submit path.
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled || readonly) return;
+      onPress(e);
+    });
+    inputWrapper.appendChild(btn);
+    return btn;
+  };
+
+  if (clearable) {
+    clearButton = makeTrailingButton("✕", "Clear", () => {
+      handleInput("", null);
+      inputElement.focus();
+    });
+    clearButton.style.display = currentValue ? "flex" : "none";
+  }
+
+  if (passwordToggle) {
+    let revealed = type !== "password";
+    const paint = (btn) => {
+      btn.textContent = revealed ? "🙈" : "👁";
+      btn.setAttribute("aria-label", revealed ? "Hide value" : "Show value");
+    };
+    const btn = makeTrailingButton("👁", "Show value", () => {
+      revealed = !revealed;
+      inputElement.type = revealed ? "text" : "password";
+      paint(btn);
+      // Keep the caret where the user left it: swapping the type recreates the
+      // native field's rendering, so refocusing without restoring the selection
+      // would jump the cursor to the end.
+      const end = inputElement.value.length;
+      inputElement.setSelectionRange?.(end, end);
+      inputElement.focus();
+    });
+    paint(btn);
+    // `inputElement.type` was already set from `type`; the button only mirrors it.
+  }
+
   // --- Inline validation icon (✓ / ✗) shown inside the input on the right ---
   if (showValidationIcon && validation !== "none") {
     validationIcon = document.createElement("span");

package/src/widgets/ListView.js

@@ -128,6 +128,9 @@ export const ListView = (props) => {
   let visibleStart = 0,
     visibleEnd = 0; // current render window (avoids redundant re-renders when nothing changed)
   let ticking = false; // requestAnimationFrame guard for the scroll handler
+  let scrollRaf = 0; // id of the frame the scroll handler queued, so unmount can cancel it
+  let mountRaf = 0; // id of the first-render frame
+  let disposed = false; // after unmount no queued frame may touch the DOM or call back
   let headerElement = null,
     footerElement = null,
     emptyElement = null;
@@ -140,27 +143,35 @@ export const ListView = (props) => {
   /** @returns {number} Total number of rows (accounting for grid columns). */
   const getTotalRows = () => Math.ceil(_data.length / cols);
 
+  /** @returns {number} Height the header occupies inside the scroll container. */
+  const getHeaderHeight = () => headerElement?.offsetHeight || 0;
+
   /**
-   * Calculates the absolute top offset of an item, accounting for the header height.
+   * Calculates the absolute top offset of an item inside `innerContainer`.
+   *
+   * The header is a SIBLING placed above `innerContainer`, so the browser already
+   * pushes every row down by the header's height. Adding it here counted it twice:
+   * rows sat one header below where the window math expected them, and
+   * `scrollToIndex` overshot by the same amount.
+   *
    * @param {number} index - Zero-based item index.
    * @returns {number} Top position in pixels.
    */
   const getItemTop = (index) => {
     const row = Math.floor(index / cols);
-    const headerHeight = headerElement?.offsetHeight || 0;
-    return headerHeight + row * (itemSize + gap);
+    return row * (itemSize + gap);
   };
 
   /**
-   * Calculates the total logical height of the list including header and footer.
-   * This value is set on `innerContainer` so the scrollbar reflects the full list size.
+   * Calculates the logical height of the virtual item area. Header and footer are
+   * siblings of `innerContainer` and contribute to the scrollbar through their own
+   * layout boxes, so they must not be added here.
    * @returns {number} Total height in pixels.
    */
   const getTotalHeight = () => {
     const rows = getTotalRows();
-    const headerH = headerElement?.offsetHeight || 0;
-    const footerH = footerElement?.offsetHeight || 0;
-    return headerH + (rows * (itemSize + gap) - gap) + footerH;
+    if (rows === 0) return 0;
+    return Math.max(0, rows * (itemSize + gap) - gap);
   };
 
   /** Applies the correct logical height to the inner container. */
@@ -178,15 +189,17 @@ export const ListView = (props) => {
   const renderVisibleItems = () => {
     if (!scrollContainer) return;
 
-    const scrollTop = scrollContainer.scrollTop;
     const viewportH = scrollContainer.clientHeight;
     const itemTotalH = itemSize + gap;
+    // Convert the scroll position into ITEM space: rows start below the header, so
+    // the first rows are still on screen while `scrollTop` is inside the header.
+    const itemsTop = Math.max(0, scrollContainer.scrollTop - getHeaderHeight());
 
     // Clamp start/end rows to valid range, including the buffer zone
-    let startRow = Math.max(0, Math.floor(scrollTop / itemTotalH) - bufferSize);
+    let startRow = Math.max(0, Math.floor(itemsTop / itemTotalH) - bufferSize);
     let endRow = Math.min(
       getTotalRows(),
-      Math.ceil((scrollTop + viewportH) / itemTotalH) + bufferSize,
+      Math.ceil((itemsTop + viewportH) / itemTotalH) + bufferSize,
     );
 
     let start = startRow * cols;
@@ -247,24 +260,39 @@ export const ListView = (props) => {
    * Scroll event handler. Uses `requestAnimationFrame` throttling so the handler
    * runs at most once per frame even during rapid scroll events. Also checks
    * whether the user has scrolled close to the bottom and triggers `onEndReached`.
+   *
+   * The queued frame is tracked so unmounting can cancel it: an untracked frame
+   * rendered into a detached DOM and called `onEndReached` on a widget nobody owns
+   * anymore — which, for an infinite-scroll handler that appends data, is an
+   * unbounded fetch loop.
    */
   const handleScroll = () => {
-    if (!ticking) {
-      requestAnimationFrame(() => {
-        renderVisibleItems();
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-        if (
-          onEndReached &&
-          _data.length &&
-          scrollHeight - (scrollTop + clientHeight) <=
-            clientHeight * onEndReachedThreshold
-        ) {
-          onEndReached();
-        }
-        ticking = false;
-      });
-      ticking = true;
-    }
+    if (ticking || disposed) return;
+    ticking = true;
+    scrollRaf = requestAnimationFrame(() => {
+      scrollRaf = 0;
+      ticking = false;
+      if (disposed) return;
+      renderVisibleItems();
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      if (
+        onEndReached &&
+        _data.length &&
+        scrollHeight - (scrollTop + clientHeight) <=
+          clientHeight * onEndReachedThreshold
+      ) {
+        onEndReached();
+      }
+    });
+  };
+
+  /**
+   * Recomputes the render window when the viewport itself changes size (window
+   * resize, a collapsing panel above the list). Without this, more rows becoming
+   * visible never triggered a render because no scroll event fired.
+   */
+  const handleViewportResize = () => {
+    if (!disposed) renderVisibleItems();
   };
 
   // ---- Header / footer / empty-state ----
@@ -424,7 +452,8 @@ export const ListView = (props) => {
    */
   const scrollToIndex = (index, animated = true) => {
     if (index < 0 || index >= _data.length) return;
-    const top = getItemTop(index);
+    // Back to SCROLL space: the header's height sits in front of the item area.
+    const top = getItemTop(index) + getHeaderHeight();
     scrollContainer.scrollTo({ top, behavior: animated ? "smooth" : "auto" });
   };
 
@@ -475,6 +504,8 @@ export const ListView = (props) => {
   });
 
   // ---- Lifecycle hooks ----
+  let resizeObserver = null;
+
   element.onMount(() => {
     renderHeader();
     renderFooter();
@@ -482,13 +513,21 @@ export const ListView = (props) => {
 
     // Defer the first actual render to the next animation frame so the header/footer
     // have already been measured and their heights are available.
-    requestAnimationFrame(() => {
+    mountRaf = requestAnimationFrame(() => {
+      mountRaf = 0;
+      if (disposed) return;
       updateInnerHeight(); // Recalculate total height now that header/footer are in the DOM
       renderVisibleItems(); // Render the initially visible rows
     });
 
     renderEmpty();
     scrollContainer.addEventListener("scroll", handleScroll);
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleViewportResize);
+      resizeObserver.observe(scrollContainer);
+    } else {
+      window.addEventListener("resize", handleViewportResize);
+    }
     if (onRefresh) setupPullToRefresh();
 
     // Inject the spinner keyframes once, globally, so pull-to-refresh has its animation
@@ -499,6 +538,11 @@ export const ListView = (props) => {
   });
 
   element.onUnmount(() => {
+    disposed = true;
+    if (scrollRaf) cancelAnimationFrame(scrollRaf);
+    if (mountRaf) cancelAnimationFrame(mountRaf);
+    if (resizeObserver) resizeObserver.disconnect();
+    else window.removeEventListener("resize", handleViewportResize);
     scrollContainer.removeEventListener("scroll", handleScroll);
     itemCache.clear();
   });

package/src/widgets/Pagination.js

@@ -72,7 +72,10 @@ export const Pagination = (props) => {
 
   const createPageButton = (page, isActive = false) => {
     const buttonVariant = isActive ? "filled" : variant;
-    const buttonColor = isActive ? color : colors.textSecondary;
+    // FIX: antes `isActive ? color : colors.textSecondary` — pero bgColor también
+    // es `color`, así que texto y fondo eran el mismo tono → número invisible.
+    // Uso blanco para el activo (texto sobre fondo de color).
+    const buttonColor = isActive ? "#ffffff" : colors.textSecondary;
 
     return Button({
       text: String(page),
@@ -98,7 +101,7 @@ export const Pagination = (props) => {
       ...buttonBase,
       onPress: onClick,
       disabled: disabled || isDisabled,
-      disableNativeEffects: true,
+      disableTransform: true,
     });
   };
 
@@ -192,4 +195,4 @@ export const Pagination = (props) => {
   return container;
 };
 
-export default Pagination;
+export default Pagination;

package/src/widgets/ProgressBar.js

@@ -43,9 +43,9 @@ export const ProgressBar = (props) => {
     position: "relative",
     ...(striped || indeterminate
       ? {
-          backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 10px, transparent 10px, transparent 20px)`,
-          backgroundSize: "28px 28px",
-        }
+        backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 10px, transparent 10px, transparent 20px)`,
+        backgroundSize: "28px 28px",
+      }
       : {}),
   });
 
@@ -115,9 +115,15 @@ export const ProgressBar = (props) => {
     );
   }
 
-  // Value percentage
+  // Value percentage.
+  // FIX: guardo referencia directa al span del valor (`valueElRef`) en vez de
+  // buscarlo con `querySelector("span:last-child")` — la versión anterior
+  // podía escribir el porcentaje dentro del label (si el label estaba a la
+  // derecha, era el último span) y el check `valueEl !== label` nunca fallaba
+  // porque `label` era un string.
+  let valueElRef = null;
   if (showValue && !indeterminate) {
-    const valueEl = WidgetFactory({
+    valueElRef = WidgetFactory({
       tag: "span",
       textContent: `${Math.round(percentage)}%`,
       fontSize: "12px",
@@ -129,9 +135,9 @@ export const ProgressBar = (props) => {
     });
 
     if (valuePosition === "left" || valuePosition === "top") {
-      children.unshift(valueEl);
+      children.unshift(valueElRef);
     } else {
-      children.push(valueEl);
+      children.push(valueElRef);
     }
   }
 
@@ -154,11 +160,8 @@ export const ProgressBar = (props) => {
     percentage = (progressValue / max) * 100;
     fill.style.width = `${percentage}%`;
 
-    if (showValue) {
-      const valueEl = container.querySelector("span:last-child");
-      if (valueEl && valueEl !== label) {
-        valueEl.textContent = `${Math.round(percentage)}%`;
-      }
+    if (valueElRef) {
+      valueElRef.textContent = `${Math.round(percentage)}%`;
     }
   };
 
@@ -175,4 +178,4 @@ export const ProgressBar = (props) => {
   return container;
 };
 
-export default ProgressBar;
+export default ProgressBar;

package/src/widgets/Radio.js

@@ -13,6 +13,7 @@ export const Radio = (props) => {
     disabled = false,
     size = 20,
     name,
+    activeColor = colors.primary,
     ...rest
   } = props;
 
@@ -26,10 +27,8 @@ export const Radio = (props) => {
 
   const updateUI = (newSelected) => {
     if (radioRef) {
-      radioRef.style.backgroundColor = newSelected
-        ? colors.primary
-        : "transparent";
-      radioRef.style.border = `2px solid ${newSelected ? colors.primary : colors.border}`;
+      radioRef.style.backgroundColor = newSelected ? activeColor : "transparent";
+      radioRef.style.border = `2px solid ${newSelected ? activeColor : colors.border}`;
     }
     if (dotRef) {
       dotRef.style.display = newSelected ? "block" : "none";
@@ -51,9 +50,9 @@ export const Radio = (props) => {
     widgetName: "Radio",
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalSelected ? colors.primary : colors.border}`,
+    border: `2px solid ${disabled ? colors.border : internalSelected ? activeColor : colors.border}`,
     borderRadius: "50%",
-    backgroundColor: internalSelected ? colors.primary : "transparent",
+    backgroundColor: internalSelected ? activeColor : "transparent",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -96,7 +95,7 @@ export const Radio = (props) => {
     // Hover effect
     radio.addEventListener("mouseenter", () => {
       if (!disabled && !internalSelected) {
-        radio.style.backgroundColor = colors.primary + "20";
+        radio.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
       }
     });