flet-box 1.0.7 → 1.0.9

package/src/widgets/ListView.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { injectKeyframes } from "../utils/styleInjector.js";
+import { toREM, getBaseFontSize } from "../utils/units.js";
 
 /**
  * @typedef {Object} ListViewProps
@@ -11,8 +12,8 @@ import { injectKeyframes } from "../utils/styleInjector.js";
  * @property {Function} renderItem - Called with `(item, index)` and must return an `HTMLElement`.
  * @property {number|string} [height=400] - Height of the scroll container. Overridden when `expand` is true.
  * @property {number|string} [width="100%"] - Width of the widget.
- * @property {number} [itemSize=60] - Fixed height of each row in pixels (required for virtualization math).
- * @property {number} [gap=0] - Vertical gap between rows in pixels.
+ * @property {number} [itemSize=60] - Fixed height of each row in framework units, i.e. it grows with the base font (required for virtualization math).
+ * @property {number} [gap=0] - Vertical gap between rows in framework units.
  * @property {number} [bufferSize=5] - Number of extra rows to render above and below the visible viewport.
  *   Larger values reduce the chance of blank flashes during fast scrolling at the cost of more DOM nodes.
  * @property {boolean} [showsScrollIndicator=true] - Whether to show the native scrollbar.
@@ -140,6 +141,23 @@ export const ListView = (props) => {
 
   // ---- Helper functions ----
 
+  /**
+   * Rendered pixels per framework unit, read from the live root font size.
+   *
+   * `itemSize` and `gap` are framework units, so the row they reserve grows with
+   * the reader's font like every other box. The virtualisation math compares
+   * against `scrollTop` and `clientHeight`, which are always CSS pixels, so the
+   * two spaces have to be joined here: a 60-unit row is 90px of scroll space for
+   * a reader on a 24px base, and rows written straight from the unit overlap.
+   */
+  const unitPx = () => {
+    if (typeof document === "undefined") return 1;
+    const root = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return root > 0 ? root / getBaseFontSize() : 1;
+  };
+  const slotHeight = () => (itemSize + gap) * unitPx();
+  const gapHeight = () => gap * unitPx();
+
   /** @returns {number} Total number of rows (accounting for grid columns). */
   const getTotalRows = () => Math.ceil(_data.length / cols);
 
@@ -159,7 +177,7 @@ export const ListView = (props) => {
    */
   const getItemTop = (index) => {
     const row = Math.floor(index / cols);
-    return row * (itemSize + gap);
+    return row * slotHeight();
   };
 
   /**
@@ -171,7 +189,7 @@ export const ListView = (props) => {
   const getTotalHeight = () => {
     const rows = getTotalRows();
     if (rows === 0) return 0;
-    return Math.max(0, rows * (itemSize + gap) - gap);
+    return Math.max(0, rows * slotHeight() - gapHeight());
   };
 
   /** Applies the correct logical height to the inner container. */
@@ -190,7 +208,7 @@ export const ListView = (props) => {
     if (!scrollContainer) return;
 
     const viewportH = scrollContainer.clientHeight;
-    const itemTotalH = itemSize + gap;
+    const itemTotalH = slotHeight();
     // 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());
@@ -228,7 +246,7 @@ export const ListView = (props) => {
           console.error("Error in renderItem:", err);
           itemEl = document.createElement("div");
           itemEl.textContent = "Error";
-          itemEl.style.padding = "8px";
+          itemEl.style.padding = toREM(8);
         }
       }
       if (!itemEl) continue;
@@ -240,12 +258,12 @@ export const ListView = (props) => {
         const col = i % cols;
         wrapper.style.left = `${(col / cols) * 100}%`;
         wrapper.style.width = `${100 / cols}%`;
-        wrapper.style.padding = `0 ${gap / 2}px`;
+        wrapper.style.padding = `0 ${toREM(gap / 2)}`;
         wrapper.style.boxSizing = "border-box";
       } else {
         wrapper.style.left = "0";
         wrapper.style.right = "0";
-        wrapper.style.padding = `0 ${gap}px`;
+        wrapper.style.padding = `0 ${toREM(gap)}`;
       }
       wrapper.appendChild(itemEl);
       fragment.appendChild(wrapper);
@@ -367,8 +385,8 @@ export const ListView = (props) => {
     refreshIndicator.style.transition = "height 0.2s";
 
     const spinner = document.createElement("div");
-    spinner.style.width = "24px";
-    spinner.style.height = "24px";
+    spinner.style.width = toREM(24);
+    spinner.style.height = toREM(24);
     spinner.style.border = "2px solid #e0e0e0";
     spinner.style.borderTop = "2px solid #007aff";
     spinner.style.borderRadius = "50%";
@@ -401,7 +419,7 @@ export const ListView = (props) => {
         if (h >= 60) {
           // Threshold met — trigger the refresh
           _refreshing = true;
-          refreshIndicator.style.height = "60px";
+          refreshIndicator.style.height = toREM(60);
           onRefresh(() => {
             _refreshing = false;
             refreshIndicator.style.height = "0";
@@ -498,7 +516,7 @@ export const ListView = (props) => {
     set: (val) => {
       _refreshing = val;
       if (refreshIndicator)
-        refreshIndicator.style.height = _refreshing ? "60px" : "0";
+        refreshIndicator.style.height = _refreshing ? toREM(60) : "0";
     },
     enumerable: true,
   });

package/src/widgets/Markdown.js

@@ -16,6 +16,8 @@ import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
  * @param {string} text - Raw text to escape.
  * @returns {string} Text with `&`, `<`, `>`, `"` and `'` replaced by entities.
  */
+import { toREM } from "../utils/units.js";
+
 const escapeCode = (text) =>
   String(text)
     .replace(/&/g, "&amp;")
@@ -633,25 +635,31 @@ const parseMarkdown = (text) => {
       `<a href="${escapeCode(href)}" target="_blank" rel="noopener">${label}</a>`,
   );
 
-  // Unordered lists — wrap consecutive <li> items produced by the "-" rule in
-  // a single <ul>. The replacement uses a non-greedy match anchored to the
-  // first <li> so it does not accidentally swallow ordered-list items too.
-  // Step 1: convert each "- item" line into a raw <li>.
-  html = html.replace(/^[ \t]*-[ \t]+(.*$)/gm, "<li>$1</li>");
-  // Step 2: group consecutive unordered <li> runs. We tag them with a
-  // data-ul attribute so the ordered-list pass below does not re-wrap them.
+  // Unordered lists — tag each "- item" line as an unordered <li>, then group
+  // the consecutive runs. `*` and `+` are CommonMark markers for the same list,
+  // so they are accepted too: `* uno` used to stay a literal paragraph. Emphasis
+  // has already run by now, which is why `**bold**` and `*italic*` at the start
+  // of a line are no longer reachable here. The tag is what keeps the ordered
+  // pass below from touching these items; without it, a `- a\n- b` run came out
+  // as `<ul><ol><li>a</li></ol><li>b</li></ul>`, so the first bullet rendered as
+  // the number "1." one indent level deeper than the second.
+  html = html.replace(/^[ \t]*[-*+][ \t]+(.*$)/gm, '<li data-list="ul">$1</li>');
   html = html.replace(
-    /(<li>(?:(?!<\/ol>).)*?<\/li>(\n|$))+/gs,
-    (match) => `<ul>${match.replace(/\n$/, "")}</ul>\n`,
+    /(<li data-list="ul">(?:(?!<\/li>).)*?<\/li>(\n|$))+/g,
+    (match) =>
+      `<ul>${match
+        .replace(/\n$/, "")
+        .replace(/<li data-list="(?:ul|ol)">/g, "<li>")}</ul>\n`,
   );
 
-  // Ordered lists
-  // Step 1: convert each "1. item" line into a raw <li>.
-  html = html.replace(/^[ \t]*\d+\.[ \t]+(.*$)/gm, "<li>$1</li>");
-  // Step 2: group consecutive ordered <li> runs that are NOT already inside a <ul>.
+  // Ordered lists — the same two steps with their own tag.
+  html = html.replace(/^[ \t]*\d+\.[ \t]+(.*$)/gm, '<li data-list="ol">$1</li>');
   html = html.replace(
-    /(<li>(?:(?!<\/ul>).)*?<\/li>(\n|$))+/gs,
-    (match) => `<ol>${match.replace(/\n$/, "")}</ol>\n`,
+    /(<li data-list="ol">(?:(?!<\/li>).)*?<\/li>(\n|$))+/g,
+    (match) =>
+      `<ol>${match
+        .replace(/\n$/, "")
+        .replace(/<li data-list="(?:ul|ol)">/g, "<li>")}</ol>\n`,
   );
 
   // Blockquotes
@@ -842,7 +850,10 @@ export const Markdown = (props) => {
 
     // List styling
     listMargin = "0em 0",
-    listPadding = "0 0 0 1em",
+    // An outside marker hangs 1.5px left of the li text at 14px font, so a 1em
+    // indent leaves the disc straddling the root's left edge and `overflow: auto`
+    // clips half of it. The extra 0.25em keeps the whole marker inside.
+    listPadding = "0 0 0 1.25em",
     listItemMargin = "0.0em 0",
 
     // Image styling
@@ -877,15 +888,15 @@ export const Markdown = (props) => {
     tag: "div",
     widgetName: "Markdown",
     fontFamily: fontFamily,
-    fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+    fontSize: toREM(fontSize),
     lineHeight: lineHeight,
     color: color,
-    padding: typeof padding === "number" ? `${padding}px` : padding,
-    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+    padding: toREM(padding),
+    maxHeight: toREM(maxHeight),
     overflow: overflow,
     backgroundColor: backgroundColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     ...rest,
   });
 
@@ -1026,9 +1037,9 @@ export const Markdown = (props) => {
                 background-color: ${codeBgColor};
                 color: ${codeColor};
                 padding: ${codePadding};
-                border-radius: ${typeof codeBorderRadius === "number" ? `${codeBorderRadius}px` : codeBorderRadius};
+                border-radius: ${toREM(codeBorderRadius)};
                 font-family: ${codeFontFamily};
-                font-size: ${typeof codeFontSize === "number" ? `${codeFontSize}px` : codeFontSize};
+                font-size: ${toREM(codeFontSize)};
             }
             
             /* Bare <pre> elements (raw HTML injected via allowDangerousHtml or future extensions).
@@ -1036,7 +1047,7 @@ export const Markdown = (props) => {
             .markdown-content pre:not(.md-code-block pre) {
                 background-color: ${preBgColor};
                 padding: ${prePadding};
-                border-radius: ${typeof preBorderRadius === "number" ? `${preBorderRadius}px` : preBorderRadius};
+                border-radius: ${toREM(preBorderRadius)};
                 overflow: auto;
                 overflow-x: auto;
                 margin: ${preMargin};
@@ -1076,7 +1087,7 @@ export const Markdown = (props) => {
             .markdown-content img {
                 max-width: ${imageMaxWidth};
                 height: auto;
-                border-radius: ${typeof imageBorderRadius === "number" ? `${imageBorderRadius}px` : imageBorderRadius};
+                border-radius: ${toREM(imageBorderRadius)};
             }
             
             .markdown-content hr {
@@ -1096,7 +1107,7 @@ export const Markdown = (props) => {
                 max-width: 100%;
                 min-width: 0;
                 box-sizing: border-box;
-                border-radius: ${typeof preBorderRadius === "number" ? `${preBorderRadius}px` : preBorderRadius};
+                border-radius: ${toREM(preBorderRadius)};
                 overflow: hidden;
                 margin-top: 1em;
                 margin-bottom: 1em;
@@ -1172,7 +1183,7 @@ export const Markdown = (props) => {
                 /* Padding on <code> (not <pre>) keeps the scrollbar aligned. */
                 padding: ${prePadding};
                 font-family: ${codeFontFamily};
-                font-size: ${typeof codeFontSize === "number" ? `${codeFontSize}px` : codeFontSize};
+                font-size: ${toREM(codeFontSize)};
                 /* 1.5 matches VS Code / GitHub's code block density.
                    Setting it here AND on md-code-line stops any ancestor
                    line-height (the widget's default 1.6) from bleeding in. */

package/src/widgets/Modal.js

@@ -14,6 +14,8 @@ import { Icon } from "./Icon.js";
 
 // ========== INTERNAL COMPONENTS ==========
 
+import { toREM } from "../utils/units.js";
+
 const ModalOverlay = ({
   closeOnOverlayClick,
   onClose,
@@ -42,10 +44,11 @@ const ModalOverlay = ({
       timing: "ease",
       delay: 0.1,
     }),
-    // transition: "opacity 0.3s ease, visibility 0.3s ease",
-    // onclick: () => {
-    //   if (closeOnOverlayClick) onClose();
-    // },
+    onclick: (e) => {
+      // The panel is the overlay's only child, so a click whose target is the
+      // overlay itself landed on the backdrop and nowhere else.
+      if (e.target === e.currentTarget && closeOnOverlayClick) onClose();
+    },
   });
 };
 
@@ -224,10 +227,10 @@ const ModalContainer = ({
     backgroundColor: backgroundColor || colors.surface,
     borderRadius:
       typeof borderRadius === "number"
-        ? `${borderRadius}px`
+        ? toREM(borderRadius)
         : borderRadius || "16px",
-    width: typeof width === "number" ? `${width}px` : width,
-    minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth,
+    width: toREM(width),
+    minWidth: toREM(minWidth),
     maxWidth: maxWidth || "90%",
     maxHeight: maxHeight || "80vh",
     overflow: "hidden",
@@ -273,7 +276,7 @@ export const Modal = (props = {}) => {
 
     // Main container styles
     backgroundColor = colors.surface,
-    borderRadius = 20,
+    borderRadius = 16,
     border = null,
     borderColor = colors.border,
     borderWidth = 1,
@@ -281,7 +284,7 @@ export const Modal = (props = {}) => {
     elevation = 3, // ← New: shadow by elevation
 
     // Content padding
-    padding = "20px",
+    padding = 24,
     contentBgColor = colors.surface,
     contentElevation = 0, // ← Optional inner shadow
 
@@ -374,7 +377,7 @@ export const Modal = (props = {}) => {
 
   const contentElement = ModalContent({
     content,
-    padding: typeof padding === "number" ? `${padding}px` : padding,
+    padding: toREM(padding),
     contentBgColor,
     contentElevation,
   });
@@ -468,7 +471,7 @@ export const Modal = (props = {}) => {
     updatePadding: (newPadding) => {
       if (contentElement) {
         contentElement.style.padding =
-          typeof newPadding === "number" ? `${newPadding}px` : newPadding;
+          toREM(newPadding);
       }
     },
 

package/src/widgets/Pagination.js

@@ -8,6 +8,8 @@ import { Button } from "./Button.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/scale.js";
 
 export const Pagination = (props) => {
   const {
@@ -56,26 +58,29 @@ export const Pagination = (props) => {
   };
 
   const pageNumbers = getPageNumbers();
+  // Every size is at least TAP_MINIMUM units tall: a page number is a thumb
+  // target, and the strip may only get smaller by type and gap, never below the
+  // 40-unit floor the rest of the framework holds itself to.
   const sizes = {
-    small: { buttonSize: 32, fontSize: 12, iconSize: 16, gap: 4 },
-    medium: { buttonSize: 36, fontSize: 14, iconSize: 20, gap: 6 },
-    large: { buttonSize: 42, fontSize: 16, iconSize: 24, gap: 8 },
+    small: { buttonSize: TAP_MINIMUM, fontSize: 12, iconSize: 16, gap: 4 },
+    medium: { buttonSize: TAP_MINIMUM, fontSize: 14, iconSize: 20, gap: 6 },
+    large: { buttonSize: 48, fontSize: 16, iconSize: 24, gap: 8 },
   };
   const sz = sizes[size] || sizes.medium;
 
   const buttonBase = {
-    minWidth: `${sz.buttonSize}px`,
-    height: `${sz.buttonSize}px`,
+    minWidth: toREM(sz.buttonSize),
+    height: toREM(sz.buttonSize),
     padding: "0",
-    fontSize: `${sz.fontSize}px`,
+    fontSize: toREM(sz.fontSize),
   };
 
   const createPageButton = (page, isActive = false) => {
     const buttonVariant = isActive ? "filled" : variant;
-    // 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;
+    // The active page is a primary plate, so its number is the theme's ink. It
+    // is disabled only to say "you are already here" — disabling it made Button
+    // repaint the plate grey and the number grey, erasing the accent.
+    const buttonColor = isActive ? colors.onPrimary : colors.textSecondary;
 
     return Button({
       text: String(page),
@@ -85,7 +90,7 @@ export const Pagination = (props) => {
       size: size,
       ...buttonBase,
       onPress: () => handlePageChange(page),
-      disabled: disabled || isActive,
+      disabled: disabled,
     });
   };
 

package/src/widgets/ProgressBar.js

@@ -6,6 +6,8 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { injectKeyframes } from "../utils/styleInjector.js";
 
+import { toREM } from "../utils/units.js";
+
 export const ProgressBar = (props) => {
   const {
     value = 0,
@@ -37,7 +39,7 @@ export const ProgressBar = (props) => {
     backgroundColor: color,
     borderRadius:
       typeof finalBorderRadius === "number"
-        ? `${finalBorderRadius}px`
+        ? toREM(finalBorderRadius)
         : finalBorderRadius,
     transition: indeterminate ? "none" : "width 0.3s ease",
     position: "relative",
@@ -73,11 +75,11 @@ export const ProgressBar = (props) => {
   // Track background
   const track = WidgetFactory({
     flex: 1,
-    height: typeof height === "number" ? `${height}px` : height,
+    height: toREM(height),
     backgroundColor: backgroundColor,
     borderRadius:
       typeof finalBorderRadius === "number"
-        ? `${finalBorderRadius}px`
+        ? toREM(finalBorderRadius)
         : finalBorderRadius,
     overflow: "hidden",
     position: "relative",
@@ -148,7 +150,7 @@ export const ProgressBar = (props) => {
     flexDirection: isColumn ? "column" : "row",
     alignItems: "center",
     gap: "8px",
-    width: typeof width === "number" ? `${width}px` : width,
+    width: toREM(width),
     children: children,
     ...rest,
   });

package/src/widgets/Radio.js

@@ -3,7 +3,9 @@
  * @description Radio input with controlled/uncontrolled selection state.
  */
 import { WidgetFactory } from "../widget-factory/index.js";
+import { Text } from "./Text.js";
 import { colors } from "../utils/themes.js";
+import { TAP_MINIMUM, LABEL_TEXT } from "../tools/index.js";
 
 export const Radio = (props) => {
   const {
@@ -14,6 +16,7 @@ export const Radio = (props) => {
     size = 20,
     name,
     activeColor = colors.primary,
+    label = null,
     ...rest
   } = props;
 
@@ -25,10 +28,16 @@ export const Radio = (props) => {
   let radioRef = null;
   let dotRef = null;
 
+  // The ring's "off" rim is a control outline, not a hairline: `colors.border`
+  // measured 1.2:1 on the dark card and 1.3:1 on white, so an unselected radio
+  // was invisible in both themes. `gray500` is the same #71717A in both
+  // palettes and clears the 3:1 non-text minimum on each surface.
+  const offColor = disabled ? colors.border : colors.gray500;
+
   const updateUI = (newSelected) => {
     if (radioRef) {
       radioRef.style.backgroundColor = newSelected ? activeColor : "transparent";
-      radioRef.style.border = `2px solid ${newSelected ? activeColor : colors.border}`;
+      radioRef.style.border = `2px solid ${newSelected ? activeColor : offColor}`;
     }
     if (dotRef) {
       dotRef.style.display = newSelected ? "block" : "none";
@@ -37,32 +46,81 @@ export const Radio = (props) => {
 
   // Createste dot
   const dot = WidgetFactory({
-    width: size / 2,
-    height: size / 2,
-    backgroundColor: "#fff",
+    width: Math.max(8, Math.round(size * 0.4)),
+    height: Math.max(8, Math.round(size * 0.4)),
+    backgroundColor: colors.onPrimary,
     borderRadius: "50%",
     display: internalSelected ? "block" : "none",
   });
   dotRef = dot;
 
-  // Createste main radio container
-  const radio = WidgetFactory({
-    widgetName: "Radio",
+  // The visual circle: a 2-unit ring and the fill, nothing else.
+  const circle = WidgetFactory({
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalSelected ? activeColor : colors.border}`,
+    border: `2px solid ${disabled ? colors.border : internalSelected ? activeColor : offColor}`,
     borderRadius: "50%",
     backgroundColor: internalSelected ? activeColor : "transparent",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     transition: "all 0.2s ease",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
+    boxSizing: "border-box",
     child: dot,
-    ...rest,
   });
-  radioRef = radio;
+  radioRef = circle;
+
+  // Createste main radio container — the finger's box, larger than the ring it
+  // centres, because radios are chosen with a thumb and a 20-unit circle is not
+  // something a thumb hits reliably.
+  //
+  // The overhang is given back with a negative margin. A 40-unit box in the
+  // layout next to a label stretched the row to 40 and left the text at the top
+  // of it, so the ring sat ~10 units below the words and the requested `gap` was
+  // silently doubled. The press still lands on the full 40-unit box, which now
+  // overflows its layout footprint instead of pushing the row around it.
+  const overhang = Math.max(0, (TAP_MINIMUM - size) / 2);
+
+  // A `label` is part of the control, not a caption beside it: the whole row is
+  // pressable. It also cannot reach the factory as a flat prop, which would set
+  // the root's `textContent` and render the words *before* the ring it describes,
+  // outside the hit box, while leaving the requested `gap` unused.
+  const isLabelled = label !== null && label !== undefined && label !== "";
+
+  const rootProps = {
+    widgetName: "Radio",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: isLabelled ? "flex-start" : "center",
+    gap: isLabelled ? 12 : undefined,
+    minWidth: isLabelled ? undefined : TAP_MINIMUM,
+    minHeight: TAP_MINIMUM,
+    margin: isLabelled ? 0 : -overhang,
+    flexShrink: 0,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    child: isLabelled
+      ? [
+          circle,
+          Text({
+            text: label,
+            size: LABEL_TEXT,
+            fontWeight: 500,
+            color: disabled ? colors.textDisabled : colors.text,
+          }),
+        ]
+      : circle,
+  };
+
+  // Pressing the words must not scale the words. The ring on its own keeps the
+  // default press feedback, because there the root *is* the control.
+  if (isLabelled) rootProps.disableTransform = true;
+
+  const radio = WidgetFactory({ ...rootProps, ...rest });
+
+  // Inline usage (a radio dropped mid-paragraph) would otherwise baseline-align
+  // the box's bottom edge and lift the ring above the text.
+  radio.style.verticalAlign = "middle";
 
   // Handle click
   if (!disabled) {
@@ -92,16 +150,16 @@ export const Radio = (props) => {
     // direct assignment died on the first `update()` or reactive setter.
     radio.update({ onPress: handleClick });
 
-    // Hover effect
+    // Hover effect — on the drawn ring, not the hit box around it.
     radio.addEventListener("mouseenter", () => {
       if (!disabled && !internalSelected) {
-        radio.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
+        circle.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
       }
     });
 
     radio.addEventListener("mouseleave", () => {
       if (!disabled && !internalSelected) {
-        radio.style.backgroundColor = "transparent";
+        circle.style.backgroundColor = "transparent";
       }
     });
   }

package/src/widgets/Rating.js

@@ -7,6 +7,7 @@ import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { colors, subscribeTheme } from "../utils/themes.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 
 export const Rating = (props) => {
   const {
@@ -21,7 +22,7 @@ export const Rating = (props) => {
     iconActive = "star",
     iconInactive = "star_border",
     iconHalf = "star_half",
-    gap = 2,
+    gap = 4,
     allowHalf = false,
     showValue = false,
     valueColor = colors.textSecondary,
@@ -52,12 +53,22 @@ export const Rating = (props) => {
       let iconName = iconInactive;
       let color = inactiveColor;
 
-      if (starNumber <= currentValue) {
+      // A score like 4.4 must still show a half star. Matching `starNumber - 0.5
+      // === currentValue` only covered exact halves, so every fractional score
+      // fell through and the last star stayed empty.
+      const whole = Math.floor(currentValue);
+      const fraction = currentValue - whole;
+      if (starNumber <= whole) {
         iconName = iconActive;
         color = activeColor;
-      } else if (allowHalf && starNumber - 0.5 === currentValue) {
-        iconName = iconHalf;
-        color = activeColor;
+      } else if (allowHalf && starNumber === whole + 1) {
+        if (fraction >= 0.75) {
+          iconName = iconActive;
+          color = activeColor;
+        } else if (fraction >= 0.25) {
+          iconName = iconHalf;
+          color = activeColor;
+        }
       }
 
       span.textContent = iconName;
@@ -108,10 +119,17 @@ export const Rating = (props) => {
     });
     const wrapper = WidgetFactory({
       display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
       cursor: readOnly ? "default" : "pointer",
       transition: "transform 0.1s ease",
       child: icon,
-      padding: "4px", // larger touch area
+      // A star is picked with a thumb, so the cell — not the glyph — is the
+      // target: 20 units of star inside a 40-unit box. A read-only rating shows a
+      // score instead of a control, so it keeps its compact 4-unit gutter.
+      ...(readOnly
+        ? { padding: 4 }
+        : { minWidth: TAP_MINIMUM, minHeight: TAP_MINIMUM }),
     });
 
     starIcons.push(icon);