flet-box 1.0.7 → 1.0.8

package/src/widgets/Skeleton.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 Skeleton = (props) => {
   const {
     variant = "text", // 'text', 'circular', 'avatar', 'image', 'card', 'listTile', 'button'
@@ -43,8 +45,12 @@ export const Skeleton = (props) => {
         return { width: "100%", height: 120, borderRadius: 12 };
       case "listTile":
         return { width: "100%", height: 56, borderRadius: 8 };
+      // The shape a button actually has: 40 units tall (the Fitts floor the Button
+      // preset uses) with the Button's own 16-unit corner, not an invented 36x24
+      // pill — a skeleton that does not match the control it replaces reads as a
+      // layout shift when the real one loads.
       case "button":
-        return { width: 120, height: 36, borderRadius: 24 };
+        return { width: 120, height: 40, borderRadius: 16 };
       default:
         return { width: "100%", height: 20, borderRadius: 4 };
     }
@@ -79,14 +85,11 @@ export const Skeleton = (props) => {
     if (variant === "button") {
       return WidgetFactory({
         tag: "div",
-        width: typeof finalWidth === "number" ? `${finalWidth}px` : finalWidth,
+        width: toREM(finalWidth),
         height:
-          typeof finalHeight === "number" ? `${finalHeight}px` : finalHeight,
+          toREM(finalHeight),
         backgroundColor: bgColor,
-        borderRadius:
-          typeof finalBorderRadius === "number"
-            ? `${finalBorderRadius}px`
-            : finalBorderRadius,
+        borderRadius: toREM(finalBorderRadius),
         ...getAnimationStyle(),
       });
     }
@@ -97,14 +100,14 @@ export const Skeleton = (props) => {
         tag: "div",
         display: "flex",
         alignItems: "center",
-        gap: "12px",
+        gap: 12,
         width: "100%",
       });
 
       const avatar = WidgetFactory({
         tag: "div",
-        width: "40px",
-        height: "40px",
+        width: 40,
+        height: 40,
         backgroundColor: bgColor,
         borderRadius: "50%",
         flexShrink: 0,
@@ -117,24 +120,24 @@ export const Skeleton = (props) => {
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        gap: "8px",
+        gap: 8,
       });
 
       const line1 = WidgetFactory({
         tag: "div",
         width: "80%",
-        height: "14px",
+        height: 14,
         backgroundColor: bgColor,
-        borderRadius: "4px",
+        borderRadius: 4,
         ...getAnimationStyle(),
       });
 
       const line2 = WidgetFactory({
         tag: "div",
         width: "60%",
-        height: "12px",
+        height: 12,
         backgroundColor: bgColor,
-        borderRadius: "4px",
+        borderRadius: 4,
         ...getAnimationStyle(),
       });
 
@@ -151,16 +154,16 @@ export const Skeleton = (props) => {
         tag: "div",
         display: "flex",
         flexDirection: "column",
-        gap: "12px",
+        gap: 12,
         width: "100%",
       });
 
       const imageArea = WidgetFactory({
         tag: "div",
         width: "100%",
-        height: "120px",
+        height: 120,
         backgroundColor: bgColor,
-        borderRadius: "8px",
+        borderRadius: 8,
         ...getAnimationStyle(),
       });
       container.appendChild(imageArea);
@@ -169,25 +172,25 @@ export const Skeleton = (props) => {
         tag: "div",
         display: "flex",
         flexDirection: "column",
-        gap: "8px",
-        padding: "0 8px",
+        gap: 8,
+        paddingHorizontal: 8,
       });
 
       const line1 = WidgetFactory({
         tag: "div",
         width: "90%",
-        height: "16px",
+        height: 16,
         backgroundColor: bgColor,
-        borderRadius: "4px",
+        borderRadius: 4,
         ...getAnimationStyle(),
       });
 
       const line2 = WidgetFactory({
         tag: "div",
         width: "70%",
-        height: "12px",
+        height: 12,
         backgroundColor: bgColor,
-        borderRadius: "4px",
+        borderRadius: 4,
         ...getAnimationStyle(),
       });
 
@@ -201,14 +204,11 @@ export const Skeleton = (props) => {
     // Simple variants (text, circular, avatar, image)
     return WidgetFactory({
       tag: "div",
-      width: typeof finalWidth === "number" ? `${finalWidth}px` : finalWidth,
+      width: toREM(finalWidth),
       height:
-        typeof finalHeight === "number" ? `${finalHeight}px` : finalHeight,
+        toREM(finalHeight),
       backgroundColor: bgColor,
-      borderRadius:
-        typeof finalBorderRadius === "number"
-          ? `${finalBorderRadius}px`
-          : finalBorderRadius,
+      borderRadius: toREM(finalBorderRadius),
       ...getAnimationStyle(),
     });
   };
@@ -219,7 +219,7 @@ export const Skeleton = (props) => {
     widgetName: "Skeleton",
     display: "flex",
     flexDirection: "column",
-    gap: typeof gap === "number" ? `${gap}px` : gap,
+    gap: toREM(gap),
     width: "100%",
   });
 

package/src/widgets/Slider.js

@@ -12,6 +12,9 @@ import { injectKeyframes } from "../utils/styleInjector.js";
  * Props owned by the Slider's closure state. Routed to the widget's `update`
  * and never to the factory's (see `composeUpdate`).
  */
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
+
 const SLIDER_PROP_KEYS = [
   "value", "min", "max", "step", "disabled",
   "width", "height", "thumbSize",
@@ -32,7 +35,7 @@ export const Slider = (props) => {
     // Appearance
     width = "100%",
     height = 4,
-    thumbSize = 20,
+    thumbSize = 24,
     color = colors.primary,
     trackColor = colors.border,
     thumbColor = "#fff",
@@ -45,7 +48,9 @@ export const Slider = (props) => {
     showMarks = false,
     marks = [], // ← implemented
     // Visual effects
-    striped = true,
+    // Off by default: diagonal stripes turn a value control into a progress bar
+    // that is saying something, and a text-size slider is not saying anything.
+    striped = false,
     animatedStripes = false,
     stripeColor = "rgba(255,255,255,0.25)",
     glow = false,
@@ -72,10 +77,10 @@ export const Slider = (props) => {
   let displayPercent = inverted ? 1 - rawPercent : rawPercent;
 
   let isHorizontal = orientation === "horizontal";
-  let trackSizePx = isHorizontal ? height : width;
-  let trackLengthPx =
-    typeof trackSizePx === "number" ? `${trackSizePx}px` : trackSizePx;
-  let thumbSizeNum = typeof thumbSize === "number" ? thumbSize : 20;
+  let trackSize = isHorizontal ? height : width;
+  let trackLength =
+    toREM(trackSize);
+  let thumbSizeNum = typeof thumbSize === "number" ? thumbSize : 24;
 
   // Positioning retries while the track still measures 0 (hidden parent, not laid
   // out yet). Both handles are tracked so unmounting can stop them: an untracked
@@ -109,11 +114,11 @@ export const Slider = (props) => {
     valueDisplay = WidgetFactory({
       tag: "div",
       textContent: `${valuePrefix}${currentValue}${valueSuffix}`,
-      fontSize: "14px",
+      fontSize: 14,
       color: colors.textSecondary,
       textAlign: "center",
-      marginBottom: isHorizontal ? "4px" : "0",
-      marginRight: !isHorizontal ? "4px" : "0",
+      marginBottom: isHorizontal ? 4 : 0,
+      marginRight: !isHorizontal ? 4 : 0,
     });
     container.appendChild(valueDisplay);
   }
@@ -125,12 +130,15 @@ export const Slider = (props) => {
     ...(isHorizontal
       ? {
           width: "100%",
-          height: trackLengthPx,
+          height: trackLength,
+          // The rail is 4 units of paint; the surface a thumb can grab is 40.
+          minHeight: TAP_MINIMUM,
           display: "flex",
           alignItems: "center",
         }
       : {
           height: "100%", // for vertical, the wrapper takes the full height
+          minWidth: TAP_MINIMUM,
           display: "flex",
           justifyContent: "center",
         }),
@@ -144,14 +152,14 @@ export const Slider = (props) => {
     ...(isHorizontal
       ? {
           width: "100%",
-          height: trackLengthPx,
+          height: trackLength,
         }
       : {
-          width: trackLengthPx,
+          width: trackLength,
           height: "100%",
         }),
     backgroundColor: trackColor,
-    borderRadius: trackLengthPx,
+    borderRadius: trackLength,
     cursor: disabled ? "not-allowed" : "pointer",
   });
   wrapper.appendChild(track);
@@ -161,7 +169,7 @@ export const Slider = (props) => {
     tag: "div",
     position: "absolute",
     backgroundColor: color,
-    borderRadius: trackLengthPx,
+    borderRadius: trackLength,
     transition: disabled ? "none" : "width 0.1s ease, height 0.1s ease",
     ...(isHorizontal
       ? {
@@ -191,8 +199,8 @@ export const Slider = (props) => {
   const thumb = WidgetFactory({
     tag: "div",
     position: "absolute",
-    width: `${thumbSizeNum}px`,
-    height: `${thumbSizeNum}px`,
+    width: toREM(thumbSizeNum),
+    height: toREM(thumbSizeNum),
     backgroundColor: thumbColor,
     borderRadius: "50%",
     boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
@@ -350,12 +358,15 @@ export const Slider = (props) => {
     }
     if (isHorizontal) {
       const left = displayPercent * trackRect.width;
-      thumb.style.left = `${left - thumbSizeNum / 2}px`;
+      // The half-thumb comes from the rendered box, not from `thumbSize`: that
+      // number is a framework unit and the handle is `rem`, so at a raised font
+      // size the handle is wider than the arithmetic says and sits off-centre.
+      thumb.style.left = `${left - thumb.offsetWidth / 2}px`;
       thumb.style.top = "50%";
       thumb.style.transform = "translateY(-50%)";
     } else {
       const bottom = displayPercent * trackRect.height;
-      thumb.style.bottom = `${bottom - thumbSizeNum / 2}px`;
+      thumb.style.bottom = `${bottom - thumb.offsetHeight / 2}px`;
       thumb.style.left = "50%";
       thumb.style.transform = "translateX(-50%)";
     }

package/src/widgets/SnackBar.js

@@ -5,27 +5,9 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { border } from "../tools/index.js";
 import { colors } from "../utils/themes.js";
+import { readableInk } from "../utils/readableInk.js";
 
-// Fallback colors (if the theme is not initialized yet)
-const FALLBACK = {
-  gray800: "#1e293b",
-  primary: "#6366f1",
-  success: "#10b981",
-  danger: "#ef4444",
-  warning: "#f59e0b",
-  info: "#3b82f6",
-  gray900: "#0f172a",
-  white: "#ffffff",
-};
-
-// Safe function to get theme color
-const getThemeColor = (name, fallback) => {
-  try {
-    return (colors && colors[name]) || fallback;
-  } catch {
-    return fallback;
-  }
-};
+import { toREM } from "../utils/units.js";
 
 /**
  * SnackBar - Notificación temporal
@@ -54,7 +36,20 @@ export function SnackBar(options) {
     onClose,
   } = options;
 
-  // Presets using theme colors (with fallback)
+  // A preset plate is a solid signal colour, and the theme's ink is not always
+  // readable on it: in dark mode `colors.text` is near-white, which measured
+  // 1.9:1 on the green. The label follows the plate it is painted on.
+  const plateInk = (bg) => {
+    if (bg === colors.primary) return colors.onPrimary;
+    if (bg === colors.secondary) return colors.onSecondary;
+    return readableInk(bg, colors.text);
+  };
+
+  const successInk = plateInk(colors.success);
+  const dangerInk = plateInk(colors.danger);
+  const warningInk = plateInk(colors.warning);
+  const infoInk = plateInk(colors.info);
+
   const presets = {
     normal: {
       bg: colors.surface,
@@ -63,42 +58,43 @@ export function SnackBar(options) {
     },
     success: {
       bg: colors.success,
-      text: colors.text,
-      action: colors.primary,
+      text: successInk,
+      action: successInk,
     },
     error: {
       bg: colors.danger,
-      text: colors.text,
-      action: colors.primary,
+      text: dangerInk,
+      action: dangerInk,
     },
     warning: {
       bg: colors.warning,
-      text: colors.text,
-      action: getThemeColor("gray900", FALLBACK.gray900),
+      text: warningInk,
+      action: warningInk,
     },
     info: {
       bg: colors.info,
-      text: colors.text,
-      action: FALLBACK.white,
+      text: infoInk,
+      action: infoInk,
     },
   };
 
   const preset = presets[type] || presets.normal;
   const finalBg = customBg || preset.bg;
-  const finalText = customText || preset.text;
-  const finalAction = customAction || preset.action;
+  const finalText = customText || (customBg ? plateInk(finalBg) : preset.text);
+  const finalAction =
+    customAction || (customBg ? finalText : preset.action);
 
   // Createste main container
   const snackbar = WidgetFactory({
     tag: "div",
     position: "fixed",
-    left: `${margin}px`,
+    left: toREM(margin),
     // borderRadius: borderRadius,
-    right: `${margin}px`,
-    [position]: `${margin}px`,
+    right: toREM(margin),
+    [position]: toREM(margin),
     backgroundColor: finalBg,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     padding: padding,
     border: border(1, "solid", colors.gray100),
     zIndex: zIndex,
@@ -109,8 +105,8 @@ export function SnackBar(options) {
     opacity: 0,
     transform:
       position === "bottom"
-        ? `translateY(calc(100% + ${margin}px))`
-        : `translateY(calc(-100% - ${margin}px))`,
+        ? `translateY(calc(100% + ${toREM(margin)}))`
+        : `translateY(calc(-100% - ${toREM(margin)}))`,
     transition: `opacity ${animationDuration}ms ease, transform ${animationDuration}ms ease`,
     display: "flex",
     alignItems: "center",
@@ -156,8 +152,8 @@ export function SnackBar(options) {
     snackbar.style.opacity = "0";
     snackbar.style.transform =
       position === "bottom"
-        ? `translateY(calc(100% + ${margin}px))`
-        : `translateY(calc(-100% - ${margin}px))`;
+        ? `translateY(calc(100% + ${toREM(margin)}))`
+        : `translateY(calc(-100% - ${toREM(margin)}))`;
     setTimeout(() => {
       if (snackbar.parentNode) snackbar.parentNode.removeChild(snackbar);
       if (onClose) onClose();

package/src/widgets/Stepper.js

@@ -11,6 +11,8 @@ import { Icon } from "./Icon.js";
 import { Button } from "./Button.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const Stepper = (props) => {
   const {
     steps = [],
@@ -32,7 +34,7 @@ export const Stepper = (props) => {
     borderColor = colors.border,
     borderWidth = 1,
     shadow,
-    padding = 20,
+    padding = 24,
     margin = 0,
     width = "100%",
     ...rest
@@ -85,7 +87,7 @@ export const Stepper = (props) => {
           bgColor: isActive
             ? colors.primary
             : isCompleted
-              ? colors.success
+              ? colors.successPlate
               : colors.gray300,
           justifyContent: "center",
           alignItems: "center",
@@ -95,7 +97,9 @@ export const Stepper = (props) => {
                 text: String(idx + 1),
                 size: 14,
                 weight: "bold",
-                color: isActive ? "#fff" : colors.textSecondary,
+                // On the grey step plate, `textSecondary` measured 4.07:1 in
+                // dark; gray700 stays muted and clears AA on both themes.
+                color: isActive ? colors.onPrimary : colors.gray700,
               }),
         });
       } else if (variant === "numbers") {
@@ -103,13 +107,13 @@ export const Stepper = (props) => {
           text: String(idx + 1),
           size: 16,
           weight: "bold",
-          color: isActive ? colors.primary : colors.textSecondary,
+          color: isActive ? colors.primary : colors.gray700,
         });
       } else {
         indicator = Icon({
           name: step.icon || "circle",
           size: 24,
-          color: isActive ? colors.primary : colors.gray300,
+          color: isActive ? colors.primary : colors.gray500,
         });
       }
 
@@ -215,12 +219,12 @@ export const Stepper = (props) => {
 
   // Build style for main container using WidgetFactory
   let style = {
-    width: typeof width === "number" ? `${width}px` : width,
+    width: toREM(width),
     backgroundColor: bgColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-    padding: typeof padding === "number" ? `${padding}px` : padding,
-    margin: typeof margin === "number" ? `${margin}px` : margin,
+      toREM(borderRadius),
+    padding: toREM(padding),
+    margin: toREM(margin),
     display: "flex",
     flexDirection: "column",
     gap: "24px",

package/src/widgets/Switch.js

@@ -3,7 +3,10 @@
  * @description iOS-style toggle switch with controlled/uncontrolled state.
  */
 import { WidgetFactory } from "../widget-factory/index.js";
+import { Text } from "./Text.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { PILL, TAP_MINIMUM, LABEL_TEXT } from "../tools/index.js";
 
 export const Switch = (props) => {
   const {
@@ -13,6 +16,7 @@ export const Switch = (props) => {
     disabled = false,
     size = "medium",
     activeColor = colors.success,
+    label = null,
     ...rest
   } = props;
 
@@ -20,13 +24,19 @@ export const Switch = (props) => {
   // onToggle kept as alias for backward compatibility
   const onPress = onPressProp || onToggle;
 
-  // Sizes
+  // Sizes. Track height is knob + 2 x pad, so the knob can never be asked to sit
+  // outside the pill it lives in.
   const sizes = {
-    small: { width: 40, height: 24, knob: 20 },
-    medium: { width: 51, height: 31, knob: 27 },
-    large: { width: 60, height: 36, knob: 32 },
+    small: { width: 40, height: 24, knob: 16 },
+    medium: { width: 48, height: 32, knob: 24 },
+    large: { width: 64, height: 40, knob: 32 },
   };
   const sz = sizes[size] || sizes.medium;
+  const PAD = 4;
+  /** The knob's travel, in framework units. It has to be rem, like the track: a
+   *  `px` offset here slides the knob short of the edge the moment the reader
+   *  raises their font and the (rem) track grows around it. */
+  const travel = () => toREM(sz.width - sz.knob - PAD * 2);
 
   let internalValue = value;
   let switchRef = null;
@@ -37,9 +47,7 @@ export const Switch = (props) => {
       switchRef.style.backgroundColor = newValue ? activeColor : colors.gray300;
     }
     if (knobRef) {
-      knobRef.style.transform = newValue
-        ? `translateX(${sz.width - sz.knob - 4}px)`
-        : "translateX(0)";
+      knobRef.style.transform = newValue ? `translateX(${travel()})` : "translateX(0)";
     }
   };
 
@@ -49,32 +57,65 @@ export const Switch = (props) => {
     height: sz.knob,
     backgroundColor: "#ffffff",
     borderRadius: "50%",
-    transform: internalValue
-      ? `translateX(${sz.width - sz.knob - 4}px)`
-      : "translateX(0)",
+    transform: internalValue ? `translateX(${travel()})` : "translateX(0)",
     transition: "transform 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
   });
   knobRef = knob;
 
-  // Createste main switch container
-  const switchContainer = WidgetFactory({
-    widgetName: "Switch",
+  // The visible pill. Everything the reader sees is painted here.
+  const track = WidgetFactory({
     width: sz.width,
     height: sz.height,
     backgroundColor: internalValue ? activeColor : colors.gray300,
-    borderRadius: sz.height / 2,
+    borderRadius: PILL,
     display: "flex",
     alignItems: "center",
-    padding: "2px",
+    padding: PAD,
     transition: "all 0.2s ease",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
     boxSizing: "border-box",
     child: knob,
+  });
+  switchRef = track;
+
+  // The pressable box is the track's parent, not the track: a 32-unit pill is not
+  // a Fitts target, and stretching the pill to 40 would make it look like a
+  // button. The hit area grows, the switch does not.
+  //
+  // With a `label` the box grows further into the whole row, because a reader
+  // aiming at the words must still land on the toggle: the label is part of the
+  // control, not a caption beside it.
+  const isLabelled = label !== null && label !== undefined && label !== "";
+
+  const switchContainer = WidgetFactory({
+    widgetName: "Switch",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: isLabelled ? "space-between" : "center",
+    gap: 12,
+    width: isLabelled ? "100%" : undefined,
+    minHeight: TAP_MINIMUM,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    // The root carries the click, so the default press effect scaled whatever
+    // the root happens to be — with a label that is the whole row, and the words
+    // shrank with the switch. The knob's slide is this control's feedback; the
+    // row must not behave like a button.
+    disableTransform: true,
+    child: isLabelled
+      ? [
+          Text({
+            text: label,
+            size: LABEL_TEXT,
+            fontWeight: 500,
+            color: disabled ? colors.textDisabled : colors.text,
+          }),
+          track,
+        ]
+      : track,
     ...rest,
   });
-  switchRef = switchContainer;
 
   // Handle click
   if (!disabled) {