flet-box 1.0.7 → 1.0.8

package/src/widget-factory/translateProps.js

@@ -183,6 +183,34 @@ export const ALL_PROPS = [
   { prop: "boxShadow", domProp: "boxShadow", type: "style", unit: "none", reactive: true },
   { prop: "elevation", domProp: "boxShadow", type: "style", unit: "none", reactive: true },
 
+  // ============================================================
+  // GLASS & FILTERS
+  // ============================================================
+  // A translucent card is only glass when what sits behind it blurs, and there
+  // is no `style` object in this API — so if `backdrop-filter` were not routed,
+  // the effect would be unreachable rather than merely undocumented.
+  //
+  // Both names are written because WebKit only lifted the `-webkit-` requirement
+  // for `backdrop-filter` in Safari 18, and this framework ships iOS apps.
+  {
+    prop: "backdropFilter",
+    domProp: "backdropFilter",
+    type: "style",
+    unit: "none",
+    reactive: true,
+    targets: ["backdropFilter", "WebkitBackdropFilter"],
+  },
+  // Composes with the object builder in `src/tools/filter.js`.
+  { prop: "filter", domProp: "filter", type: "style", unit: "none", reactive: true },
+  {
+    prop: "maskImage",
+    domProp: "maskImage",
+    type: "style",
+    unit: "none",
+    reactive: true,
+    targets: ["maskImage", "WebkitMaskImage"],
+  },
+
   // ============================================================
   // DISPLAY & LAYOUT
   // ============================================================

package/src/widgets/Accordion.js

@@ -8,11 +8,13 @@
 
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
 import { Container } from "./Container.js";
 import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
+import { SHADOW_LEVELS } from "../tools/shadow.js";
 
 /**
  * Props owned by the Accordion's own closure state. They are routed to the
@@ -41,14 +43,14 @@ const ACCORDION_PROP_KEYS = [
  * @param {number} [props.borderRadius=8] - Corner radius in pixels.
  * @param {string} [props.bgColor=colors.surface] - Background color of the container (used in 'contained' variant).
  * @param {string} [props.titleColor=colors.text] - Text color of the title when collapsed.
- * @param {string} [props.expandedColor=colors.primary] - Accent color applied to the title and background when expanded.
+ * @param {string} [props.expandedColor=colors.primary] - Accent color applied to the title-bar background when expanded.
  * @param {string|null} [props.border=null] - Explicit CSS border shorthand. Overrides variant-based border logic.
  * @param {string} [props.borderColor=colors.border] - Border color used in 'outlined' variant.
  * @param {number} [props.borderWidth=1] - Border width in pixels (outlined variant).
  * @param {number} [props.titleSize=14] - Font size of the title text in pixels.
  * @param {string} [props.titleWeight='500'] - Font weight of the title text.
- * @param {string} [props.titlePadding='12px 16px'] - CSS padding for the title bar.
- * @param {string} [props.contentPadding='16px'] - CSS padding applied to the inner content area.
+ * @param {string} [props.titlePadding='0.75rem 1rem'] - CSS padding for the title bar.
+ * @param {string} [props.contentPadding='1rem'] - CSS padding applied to the inner content area.
  * @param {string} [props.iconCollapsed='chevron_right'] - Material icon name shown when collapsed.
  * @param {string} [props.iconExpanded='expand_more'] - Material icon name shown when expanded.
  * @param {string} [props.iconColor=colors.textSecondary] - Color of the expand/collapse icon.
@@ -83,7 +85,7 @@ export const Accordion = (props) => {
     titleWeight = "500",
     titlePadding = "12px 16px",
     // Content
-    contentPadding = "16px",
+    contentPadding = 16,
     // Icon
     iconCollapsed = "chevron_right",
     iconExpanded = "expand_more",
@@ -149,11 +151,11 @@ export const Accordion = (props) => {
       titleElement.textContent = currentTitle;
     }
 
-    // Title color shifts to the accent color when expanded
-    titleElement.style.color = isExpanded
-      ? currentExpandedColor
-      : currentTitleColor;
-    titleElement.style.fontSize = `${currentTitleSize}px`;
+    // The accent marks the open state through the title-bar tint; the title
+    // itself keeps `titleColor`. Painting it with `primary` put #00A5FF words
+    // on a 6% primary wash (2.4:1) in the light theme.
+    titleElement.style.color = currentTitleColor;
+    titleElement.style.fontSize = toREM(currentTitleSize);
     titleElement.style.fontWeight = currentTitleWeight;
 
     // Swap icon based on current expanded state. `Icon` renders its glyph as
@@ -163,12 +165,12 @@ export const Accordion = (props) => {
       ? currentIconExpanded
       : currentIconCollapsed;
     iconElement.style.color = currentIconColor;
-    iconElement.style.fontSize = `${currentIconSize}px`;
+    iconElement.style.fontSize = toREM(currentIconSize);
 
     // Title bar cursor and opacity reflect the disabled state
     titleBar.style.cursor = currentDisabled ? "not-allowed" : "pointer";
     titleBar.style.opacity = currentDisabled ? "0.5" : "1";
-    titleBar.style.padding = currentTitlePadding;
+    titleBar.style.padding = toREM(currentTitlePadding);
 
     // Tint the title bar background slightly when expanded (contained only)
     if (currentVariant === "contained") {
@@ -202,23 +204,18 @@ export const Accordion = (props) => {
       container.style.backgroundColor = "transparent";
     }
 
-    container.style.borderRadius = `${currentBorderRadius}px`;
+    container.style.borderRadius = toREM(currentBorderRadius);
     container.style.overflow = "hidden";
 
-    // Predefined shadow presets keyed by elevation level
+    // The framework's depth scale, not a local copy of it (src/tools/shadow.js).
     if (currentElevation > 0) {
-      const shadows = {
-        1: "0 1px 3px rgba(0,0,0,0.12)",
-        2: "0 3px 6px rgba(0,0,0,0.16)",
-        3: "0 6px 12px rgba(0,0,0,0.2)",
-        4: "0 10px 20px rgba(0,0,0,0.25)",
-      };
-      container.style.boxShadow = shadows[currentElevation] || shadows[2];
+      container.style.boxShadow =
+        SHADOW_LEVELS[currentElevation] || SHADOW_LEVELS[2];
     } else {
       container.style.boxShadow = "none";
     }
 
-    contentInner.style.padding = currentContentPadding;
+    contentInner.style.padding = toREM(currentContentPadding);
   };
 
   // ========== HEIGHT ANIMATION ==========
@@ -238,7 +235,7 @@ export const Accordion = (props) => {
     clone.style.visibility = "hidden";
     clone.style.display = "block";
     clone.style.height = "auto";
-    clone.style.padding = currentContentPadding;
+    clone.style.padding = toREM(currentContentPadding);
     document.body.appendChild(clone);
     const height = clone.offsetHeight;
     document.body.removeChild(clone);
@@ -508,7 +505,7 @@ export const Accordion = (props) => {
       currentTitlePadding = newProps.titlePadding;
     if (newProps.contentPadding !== undefined) {
       currentContentPadding = newProps.contentPadding;
-      contentInner.style.padding = currentContentPadding;
+      contentInner.style.padding = toREM(currentContentPadding);
     }
     if (newProps.iconCollapsed !== undefined)
       currentIconCollapsed = newProps.iconCollapsed;

package/src/widgets/AdMob.js

@@ -205,7 +205,7 @@ export const AdMob = (props) => {
   }
 
   const showBanner = () => {
-    if (disposed || !autoShow || bannerVisible) return Promise.resolve(null);
+    if (disposed || bannerVisible) return Promise.resolve(null);
     return withPlugin((plugin) =>
       Promise.resolve(
         plugin.showBanner({
@@ -305,7 +305,12 @@ export const AdMob = (props) => {
   };
   container.onUnmount(dispose);
 
-  container.onMount(showBanner);
+  // `autoShow` is the mount switch, nothing more. An app that holds the banner
+  // back for a paywall moment still has to be able to ask for it later with
+  // `container.show()`, so the flag must not gate that method.
+  container.onMount(() => {
+    if (autoShow) showBanner();
+  });
 
   refreshPlaceholder();
 

package/src/widgets/Avatar.js

@@ -30,6 +30,8 @@ import { Text } from "./Text.js";
  * them (`backgroundColor`, `font-size`), so it can re-apply and re-subscribe
  * them better than this widget can.
  */
+import { toREM } from "../utils/units.js";
+
 const AVATAR_PROPS = [
   "src",
   "name",
@@ -53,8 +55,7 @@ const DOT_SIZE_RATIO = 0.3;
  */
 const DOT_INSET_RATIO = 0.12;
 
-/** CSS length for a number of pixels; any other value is passed through. */
-const px = (value) => (typeof value === "number" ? `${value}px` : value);
+/** Framework units → a CSS length that scales with the reader's base font. */
 
 /**
  * Extracts up to two initials from a full name.
@@ -87,7 +88,7 @@ const getInitials = (fullName) => {
  * @param {number} [props.fontSize=16] - Font size of the avatar box in pixels; initials are sized from `size`.
  * @param {'circle'|'rounded'|'square'} [props.shape='circle'] - Shape of the avatar container.
  * @param {string} [props.bgColor=colors.primary] - Background color shown behind icons or initials.
- * @param {string} [props.textColor=colors.text] - Color of icon or initials.
+ * @param {string} [props.textColor=colors.onPrimary] - Color of icon or initials.
  * @param {string} [props.icon] - Material icon name to display instead of an image or initials.
  * @param {boolean} [props.online=false] - Shows a presence dot in the bottom-right corner.
  * @param {string} [props.badgeColor=colors.success] - Color of the presence dot.
@@ -117,7 +118,9 @@ export const Avatar = (inputProps = {}) => {
     fontSize = 16,
     shape = "circle",
     bgColor = colors.primary,
-    textColor = colors.text,
+    // The default plate is `primary`, so the initials are its ink. Reading
+    // `colors.text` here put near-white letters on a near-white avatar in dark.
+    textColor = colors.onPrimary,
     icon,
     online = false,
     badgeColor = colors.success,
@@ -131,7 +134,7 @@ export const Avatar = (inputProps = {}) => {
    * previous shape would stay on the element.
    */
   const radiusFor = () => {
-    if (shape === "rounded") return `${size * 0.2}px`;
+    if (shape === "rounded") return toREM(size * 0.2);
     if (shape === "square") return "0";
     return "50%";
   };
@@ -180,9 +183,12 @@ export const Avatar = (inputProps = {}) => {
    * `height` or `borderRadius` still wins, as it always has.
    */
   const paintGeometry = () => {
-    avatar.style.width = px(rest.width ?? size);
-    avatar.style.height = px(rest.height ?? size);
-    avatar.style.borderRadius = rest.borderRadius ?? radiusFor();
+    avatar.style.width = toREM(rest.width ?? size);
+    avatar.style.height = toREM(rest.height ?? size);
+    // `radiusFor()` is already a CSS value; a caller's `borderRadius: 8` is a
+    // framework number, and written straight to `style` it is an invalid value
+    // the browser drops. toREM tells the two apart and scales the first.
+    avatar.style.borderRadius = toREM(rest.borderRadius ?? radiusFor());
   };
 
   paintGeometry();
@@ -201,10 +207,10 @@ export const Avatar = (inputProps = {}) => {
   avatar.appendChild(dot);
 
   const paintDot = () => {
-    dot.style.width = `${Math.round(size * DOT_SIZE_RATIO)}px`;
-    dot.style.height = `${Math.round(size * DOT_SIZE_RATIO)}px`;
-    dot.style.right = `${Math.round(size * DOT_INSET_RATIO)}px`;
-    dot.style.bottom = `${Math.round(size * DOT_INSET_RATIO)}px`;
+    dot.style.width = toREM(Math.round(size * DOT_SIZE_RATIO));
+    dot.style.height = toREM(Math.round(size * DOT_SIZE_RATIO));
+    dot.style.right = toREM(Math.round(size * DOT_INSET_RATIO));
+    dot.style.bottom = toREM(Math.round(size * DOT_INSET_RATIO));
     dot.style.backgroundColor = badgeColor;
     dot.style.display = online ? "block" : "none";
   };

package/src/widgets/Badge.js

@@ -13,6 +13,7 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { Stack } from "./Stack.js";
 import { Text } from "./Text.js";
 import { colors, subscribeTheme } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 
 /**
  * Creates a Badge widget that overlays a small count or status indicator on
@@ -40,7 +41,7 @@ export const Badge = (props) => {
     value,
     child,
     bgColor = colors.secondary,
-    color = colors.text,
+    color = colors.onSecondary,
     size = 20,
     position = "top-right",
     borderWidth = 2,
@@ -113,7 +114,7 @@ export const Badge = (props) => {
     minWidth: size,
     height: size,
     // Extra horizontal padding for two-digit numbers so they don't clip
-    padding: size > 20 ? `0 ${size / 3}px` : 0,
+    padding: size > 20 ? `0 ${toREM(size / 3)}` : 0,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

package/src/widgets/BottomSheet.js

@@ -9,6 +9,7 @@ import { Column } from "./Column.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { Container } from "./Container.js";
+import { toREM } from "../utils/units.js";
 
 export const BottomSheet = (props) => {
   const {
@@ -31,14 +32,16 @@ export const BottomSheet = (props) => {
     actionBorderColor = colors.border,
 
     // Borders and shadows
-    borderRadius = 24,
+    borderRadius = 16,
     shadow = "0 -4px 12px rgba(0,0,0,0.1)",
 
-    // Spacing
-    headerPadding = "0 16px 8px 16px",
-    contentPadding = "0 16px",
-    actionPadding = "12px 16px",
-    dragHandlePadding = "14px 0 8px 0",
+    // Spacing. These are CSS shorthands the widget writes by hand, so each
+    // number goes through `toREM` — a literal "16px" here would leave the sheet
+    // frozen at one text size while its own type grew.
+    headerPadding = `0 ${toREM(16)} ${toREM(8)} ${toREM(16)}`,
+    contentPadding = `0 ${toREM(16)}`,
+    actionPadding = `${toREM(12)} ${toREM(16)}`,
+    dragHandlePadding = `${toREM(16)} 0 ${toREM(8)} 0`,
     dragHandleWidth = 40,
     dragHandleHeight = 4,
 
@@ -76,12 +79,10 @@ export const BottomSheet = (props) => {
     opacity: 0,
     visibility: "hidden",
     transition: `opacity ${animationDuration}ms ease, visibility ${animationDuration}ms ease`,
-    // onclick: (e) => {
-    //   // ✅ Only close if the click was directly on the overlay (not on the sheet)
-    //   if (e.target === overlay && closeOnOverlayClick) {
-    //     close();
-    //   }
-    // },
+    onclick: (e) => {
+      // Only close if the click was directly on the overlay, not on the sheet.
+      if (e.target === e.currentTarget && closeOnOverlayClick) close();
+    },
   });
 
   // ✅ Drag handle with stopPropagation
@@ -166,7 +167,7 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     right: 0,
     paddingBottom: 12,
     backgroundColor: backgroundColor,
-    borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
+    borderRadius: `${toREM(borderRadius)} ${toREM(borderRadius)} 0 0`,
     boxShadow: shadow,
     transform: "translateY(100%)",
     transition: `transform ${animationDuration}ms ease`,

package/src/widgets/Button.js

@@ -3,6 +3,8 @@
  * @description Button with size presets, variants, icons and gradient support.
  */
 import { WidgetFactory } from "../widget-factory/index.js";import { colors } from "../utils/themes.js";
+import { SHADOW_LEVELS, TAP_MINIMUM } from "../tools/index.js";
+import { readableInk } from "../utils/readableInk.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 
@@ -10,19 +12,20 @@ import { Icon } from "./Icon.js";
 // CONFIGURATION
 // ============================================================
 
+/**
+ * Every number here is a framework unit — the factory converts lengths to `rem`,
+ * so the whole preset grows with the reader's font size instead of freezing at
+ * the pixel it was written in.
+ *
+ * `minHeight` is the Fitts floor: a pressable box the finger can hit, set on the
+ * box rather than reached through padding, so `small` stays a small *looking*
+ * control that is still a real target. `medium` and `large` land on 40 and 48;
+ * `small` is 32 and is a desktop-density escape hatch, not a touch target.
+ */
 const SIZE_PRESETS = {
-  small: { padding: [6, 12], fontSize: 12, gap: 6, iconSize: 16 },
-  medium: { padding: [10, 20], fontSize: 14, gap: 8, iconSize: 20 },
-  large: { padding: [14, 28], fontSize: 16, gap: 10, iconSize: 24 },
-};
-
-const SHADOW_LEVELS = {
-  0: "none",
-  1: "0 1px 3px rgba(0,0,0,0.12)",
-  2: "0 3px 6px rgba(0,0,0,0.16)",
-  3: "0 6px 12px rgba(0,0,0,0.2)",
-  4: "0 10px 20px rgba(0,0,0,0.25)",
-  5: "0 15px 30px rgba(0,0,0,0.3)",
+  small: { padding: [4, 12], fontSize: 12, gap: 4, iconSize: 16, minHeight: 32 },
+  medium: { padding: [8, 16], fontSize: 14, gap: 8, iconSize: 20, minHeight: TAP_MINIMUM },
+  large: { padding: [12, 24], fontSize: 16, gap: 12, iconSize: 24, minHeight: 48 },
 };
 
 // ============================================================
@@ -42,20 +45,35 @@ function computeBackground(variant, disabled, bgColor, gradient) {
   return "transparent";
 }
 
-function computeTextColor(variant, disabled, color, bgColor) {
+function computeTextColor(variant, disabled, color, background, inkFromFill) {
   if (disabled) return colors.textDisabled;
-  if (variant === "filled") return color || "#fff";
-  return color || bgColor || colors.primary;
+  if (variant === "filled") {
+    // The default `color` is the theme's ink, which is the right answer for a
+    // filled button sitting on the default surface. Once the caller names the
+    // fill, that ink can be the fill itself (dark on the light theme's primary,
+    // near-white on the dark theme's), so the label has to follow the plate.
+    if (!inkFromFill) return color;
+    if (background === colors.primary) return colors.onPrimary;
+    if (background === colors.secondary) return colors.onSecondary;
+    return readableInk(background, colors.text);
+  }
+  return color || background || colors.primary;
 }
 
-function computeBorder(variant, disabled, color, bgColor) {
+function computeBorder(variant, disabled, color, bgColor, borderColor, namesItsOwnFill) {
   if (disabled) return `1px solid ${colors.gray300}`;
   if (variant === "outlined") {
-    const borderColor = color || bgColor || colors.primary;
-    return `2px solid ${borderColor}`;
+    const tint = color || bgColor || colors.primary;
+    return `2px solid ${tint}`;
   }
   if (variant === "text") return "none";
-  return `1px solid ${colors.border}`;
+  // A filled button whose caller named the fill is a colour decision; a neutral
+  // grey ring around it is an edge that belongs to no token and reads as a
+  // rendering bug on the deep variants. A button that names no fill lands on
+  // `colors.surface`, and there the hairline is what keeps the control findable
+  // on a card of the same colour. An explicit `borderColor` always wins.
+  if (borderColor) return `1px solid ${borderColor}`;
+  return namesItsOwnFill ? "none" : `1px solid ${colors.border}`;
 }
 
 function createIcon(name, size, color) {
@@ -120,11 +138,8 @@ function buildButtonChildren(text, textColor, fontSize, gap, iconElements) {
   return children;
 }
 
-function applySpacingToProps(buttonProps, padding, margin) {
-  const normalizedPadding = normalizeSpacing(
-    padding,
-    SIZE_PRESETS.medium.padding,
-  );
+function applySpacingToProps(buttonProps, padding, margin, fallbackPadding) {
+  const normalizedPadding = normalizeSpacing(padding, fallbackPadding);
   const normalizedMargin = normalizeSpacing(margin, undefined);
 
   if (Array.isArray(normalizedPadding)) {
@@ -165,8 +180,8 @@ export const Button = (props) => {
     iconPosition = "left",
     variant = "filled",
     size = "medium",
-    borderRadius = 24,
-    elevation = 2,
+    borderRadius = 16,
+    elevation = null,
     disabled = false,
     fullWidth = false,
     bgColor = colors.surface,
@@ -175,11 +190,34 @@ export const Button = (props) => {
   } = props;
 
   const sizePreset = SIZE_PRESETS[size] || SIZE_PRESETS.medium;
-  const shadow = SHADOW_LEVELS[elevation] || SHADOW_LEVELS[0];
+  // Depth follows the variant: a text or outlined button is not a surface lifted
+  // off the page, and a shadow drawn around a transparent box paints a grey blob
+  // where the label should sit alone. An explicit `elevation` still wins.
+  const lifted = elevation === null ? (variant === "filled" ? 2 : 0) : elevation;
+  const shadow = SHADOW_LEVELS[lifted] || SHADOW_LEVELS[0];
 
   const background = computeBackground(variant, disabled, bgColor, gradient);
-  const textColor = computeTextColor(variant, disabled, color, bgColor);
-  const border = computeBorder(variant, disabled, color, bgColor);
+  // `bgColor` above always has a value (the default is the surface), so whether
+  // the caller chose the fill has to be read off the props, not the local.
+  const namesItsOwnFill =
+    props.bgColor !== undefined ||
+    props.backgroundColor !== undefined ||
+    !!gradient;
+  const textColor = computeTextColor(
+    variant,
+    disabled,
+    color,
+    background,
+    props.color === undefined && namesItsOwnFill,
+  );
+  const border = computeBorder(
+    variant,
+    disabled,
+    color,
+    bgColor,
+    rest.borderColor,
+    namesItsOwnFill,
+  );
 
   const iconNames = resolveIconNames({
     icon,
@@ -216,6 +254,7 @@ export const Button = (props) => {
     justifyContent: "center",
     gap: sizePreset.gap,
     borderRadius,
+    minHeight: sizePreset.minHeight,
     width: fullWidth ? "100%" : "auto",
     backgroundColor: background,
     border,
@@ -231,7 +270,7 @@ export const Button = (props) => {
     ...rest,
   };
 
-  applySpacingToProps(buttonProps, padding, margin);
+  applySpacingToProps(buttonProps, padding, margin, sizePreset.padding);
 
   if (gradient) {
     buttonProps.background = gradient;

package/src/widgets/Card.js

@@ -4,7 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
-import { border } from "../tools/index.js";
+import { border, SHADOW_LEVELS } from "../tools/index.js";
 
 export const Card = (props = {}) => {
   const {
@@ -24,7 +24,11 @@ export const Card = (props = {}) => {
     backgroundColor: bgColor,
     borderRadius: borderRadius,
     padding: padding,
-    elevation: elevation,
+    // The engine routes `elevation` straight into `style.boxShadow`, and CSS drops
+    // a bare number: forwarding it left every card flat, whatever depth was asked
+    // for. Depth is a scale, so the level is read here into a real shadow — and an
+    // explicit `shadow`/`boxShadow` in `rest` still wins over the scale.
+    boxShadow: SHADOW_LEVELS[elevation] ?? SHADOW_LEVELS[2],
     border: showBorder ? border(borderWidth, borderStyle, borderColor) : "none",
     ...rest,
   });

package/src/widgets/Carousel.js

@@ -6,6 +6,8 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const Carousel = (props) => {
   const {
     items = [],
@@ -59,12 +61,12 @@ export const Carousel = (props) => {
         dot.style.backgroundColor = dotActiveColor;
         dot.style.width =
           typeof dotActiveSize === "number"
-            ? `${dotActiveSize}px`
+            ? toREM(dotActiveSize)
             : dotActiveSize;
       } else {
         dot.style.backgroundColor = dotColor;
         dot.style.width =
-          typeof dotSize === "number" ? `${dotSize}px` : dotSize;
+          toREM(dotSize);
       }
     }
   };
@@ -154,8 +156,8 @@ export const Carousel = (props) => {
       cursor: "pointer",
       backgroundColor: buttonBgColor,
       borderRadius: "50%",
-      width: typeof buttonSize === "number" ? `${buttonSize}px` : buttonSize,
-      height: typeof buttonSize === "number" ? `${buttonSize}px` : buttonSize,
+      width: toREM(buttonSize),
+      height: toREM(buttonSize),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -173,11 +175,11 @@ export const Carousel = (props) => {
   const container = WidgetFactory({
     widgetName: "Carousel",
     position: "relative",
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height,
+    width: toREM(width),
+    height: toREM(height),
     overflow: "hidden",
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     ...rest,
   });
 
@@ -255,12 +257,12 @@ export const Carousel = (props) => {
         width:
           index === currentIndex
             ? typeof dotActiveSize === "number"
-              ? `${dotActiveSize}px`
+              ? toREM(dotActiveSize)
               : dotActiveSize
             : typeof dotSize === "number"
-              ? `${dotSize}px`
+              ? toREM(dotSize)
               : dotSize,
-        height: typeof dotSize === "number" ? `${dotSize}px` : dotSize,
+        height: toREM(dotSize),
         borderRadius: "4px",
         backgroundColor: index === currentIndex ? dotActiveColor : dotColor,
         cursor: "pointer",

package/src/widgets/Chart.js

@@ -42,6 +42,8 @@ import { colors } from "../utils/themes.js";
  * @param {number} [props.borderRadius=8] - Corner radius of the chart container in pixels.
  * @returns {HTMLElement} The chart container element, augmented with `updateData` and `redraw` methods.
  */
+import { toREM } from "../utils/units.js";
+
 export const Chart = (props) => {
   const {
     type = "candle",
@@ -130,6 +132,19 @@ export const Chart = (props) => {
       maxVal = Math.max(...data);
       minVal = Math.min(...data);
     }
+    // Bars are measured from zero: if the scale started at the smallest
+    // value instead, `getYPosition(0)` fell below the axis and every bar
+    // ran past the baseline to the canvas edge, so the bottom label (6)
+    // did not describe where the bars started.
+    if (type === "bar") {
+      maxVal = Math.max(0, maxVal);
+      minVal = Math.min(0, minVal);
+      const barRange = maxVal - minVal || 1;
+      return {
+        maxValue: maxVal + (maxVal > 0 ? barRange * 0.1 : 0),
+        minValue: minVal - (minVal < 0 ? barRange * 0.1 : 0),
+      };
+    }
     const range = maxVal - minVal;
     const paddingRange = range * 0.1;
     return {
@@ -170,8 +185,11 @@ export const Chart = (props) => {
    */
   const drawBar = (ctx, canvasWidth, chartHeight, maxValue, minValue) => {
     const availableWidth = canvasWidth - pad.left - pad.right;
-    const barWidth = (availableWidth / data.length) * 0.7;
-    const barSpacing = (availableWidth / data.length) * 0.3;
+    const bandWidth = availableWidth / data.length;
+    // 70/30 left a gap 43% as wide as the bar; on a wide chart the columns
+    // read as unrelated blocks instead of one series.
+    const barWidth = bandWidth * 0.8;
+    const barSpacing = bandWidth - barWidth;
 
     data.forEach((value, index) => {
       const x = pad.left + index * (barWidth + barSpacing) + barSpacing / 2;
@@ -186,6 +204,11 @@ export const Chart = (props) => {
         ctx.fillStyle = textColor;
         ctx.font = "8px sans-serif";
         ctx.fillText(value, x + barWidth / 2 - 5, y - 2);
+      }
+      // Bars are data points too: `showLabels` used to be ignored here
+      // unless `showValues` was on, so the documented default drew no
+      // x-axis labels at all.
+      if (showLabels && labels[index]) {
         ctx.save();
         ctx.translate(x + barWidth / 2, chartHeight - pad.bottom + 8);
         ctx.rotate(-0.3);
@@ -525,11 +548,11 @@ export const Chart = (props) => {
 
   const container = WidgetFactory({
     widgetName: "Chart",
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height,
+    width: toREM(width),
+    height: toREM(height),
     backgroundColor: bgColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",