flet-box 1.0.6 → 1.0.8

package/src/widgets/CircularChart.js

@@ -4,6 +4,9 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { readableInk } from "../utils/readableInk.js";
+
+import { toREM } from "../utils/units.js";
 
 export const CircularChart = (props) => {
   let {
@@ -21,7 +24,10 @@ export const CircularChart = (props) => {
     centerContent = null,
     showLabels = false,
     labelSize = 12,
-    labelColor = colors.text,
+    // Unset by default: every slice has its own fill, and the theme's ink is
+    // the same colour as the primary slice in both palettes, so the label has
+    // to be chosen against the slice it sits on (see `labelInk`).
+    labelColor = null,
     onClick = null,
     onHover = null,
     defaultColors = [
@@ -42,7 +48,7 @@ export const CircularChart = (props) => {
     borderColor = null,
     borderWidth = 0,
     sliceBorderWidth = 0,
-    sliceBorderColor = "#ffffff",
+    sliceBorderColor = colors.card,
     ...rest
   } = props;
 
@@ -117,10 +123,15 @@ export const CircularChart = (props) => {
   const updateCanvasSize = () => {
     if (!canvas) return;
     if (isFixedSize) {
-      canvas.width = canvasWidth;
-      canvas.height = canvasHeight;
-      currentWidth = canvasWidth;
-      currentHeight = canvasHeight;
+      // The box is routed through rem, so `size: 160` is 240px wide for a reader
+      // on a 24px base font. The buffer has to follow the rendered box or the
+      // chart grows and turns soft; the numbers are the fallback for a node
+      // that has no layout yet.
+      const { width, height } = container.getBoundingClientRect();
+      canvas.width = width > 0 ? width : canvasWidth;
+      canvas.height = height > 0 ? height : canvasHeight;
+      currentWidth = canvas.width;
+      currentHeight = canvas.height;
     } else {
       const rect = container.getBoundingClientRect();
       let w = rect.width;
@@ -192,6 +203,13 @@ export const CircularChart = (props) => {
     return defaultColors[index % defaultColors.length];
   };
 
+  const labelInk = (fill) => {
+    if (labelColor) return labelColor;
+    if (fill === colors.primary) return colors.onPrimary;
+    if (fill === colors.secondary) return colors.onSecondary;
+    return readableInk(fill, colors.text);
+  };
+
   // Draw each segment with rounded ends (each one with its own color)
   const drawRoundedSegment = (slice, index) => {
     const r = getRadiusVal() / 2;
@@ -269,7 +287,7 @@ export const CircularChart = (props) => {
       const x = cx + labelRadius * Math.cos(midAngle);
       const y = cy + labelRadius * Math.sin(midAngle);
       ctx.font = `${labelSize}px system-ui`;
-      ctx.fillStyle = labelColor;
+      ctx.fillStyle = labelInk(color);
       ctx.shadowBlur = 0;
       const percent = Math.round(
         (slice.value / (slice.end - slice.start)) * 100,
@@ -463,7 +481,7 @@ export const CircularChart = (props) => {
       position: "relative",
       overflow: "hidden",
       borderRadius:
-        typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+        toREM(borderRadius),
       border:
         borderWidth > 0 && borderColor
           ? `${borderWidth}px solid ${borderColor}`

package/src/widgets/CodeViewer.js

@@ -5,7 +5,10 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
-import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
+import { generateHighlightedHtml, syntaxPaletteFor } from "../utils/syntaxHighlight.js";
+import { clipboard } from "../tools/clipboard.js";
+
+import { toREM } from "../utils/units.js";
 
 export const CodeViewer = (props) => {
   const {
@@ -20,22 +23,32 @@ code = "",
     showLineNumbers = false,
     startingLineNumber = 1,
     lineNumberWidth = 40,
-    lineNumberColor = colors.secondary,
+    lineNumberColor,
     ...rest
   } = props;
 
+  // The token map follows the block's own surface: the light theme's #F4F4F5
+  // pane needs the light map, and a caller that paints a dark pane on the light
+  // theme still gets spans that read.
+  const syntaxPalette = syntaxPaletteFor(backgroundColor);
+  // The gutter is not a token: it takes the muted ink of the pane's palette, so
+  // a custom pane does not get the page theme's grey on top of it.
+  const gutterInk = lineNumberColor || syntaxPalette.muted;
+
   let currentCode =
     typeof code === "string" ? code : JSON.stringify(code, null, 2);
   let currentTitle = title;
   let headerRef = null;
+  let headerTitleRef = null;
   let scrollWrapperRef = null;
   let lineNumbersColRef = null;
   let codeColRef = null;
   let codeWrapperRef = null;
+  let copyResetTimer = null;
 
   const refreshContent = () => {
     const lines = currentCode.split("\n");
-    const highlightedLines = lines.map((line) => generateHighlightedHtml(line));
+    const highlightedLines = lines.map((line) => generateHighlightedHtml(line, syntaxPalette));
 
     if (showLineNumbers) {
       // Update line numbers
@@ -44,7 +57,7 @@ code = "",
         for (let i = 0; i < lines.length; i++) {
           const numberDiv = WidgetFactory({
             tag: "div",
-            padding: `0 ${padding / 2}px 0 ${padding}px`,
+            padding: `0 ${toREM(padding / 2)} 0 ${toREM(padding)}`,
             whiteSpace: "pre",
             textContent: String(startingLineNumber + i),
           });
@@ -79,28 +92,86 @@ code = "",
     width: "100%",
     display: "flex",
     flexDirection: "column",
+    position: "relative",
     ...rest,
   });
 
+  // The copy button carries its own solid plate, so it reads on the primary
+  // header and on any caller-painted pane, and it never relies on the page ink.
+  const copyButtonRef = WidgetFactory({
+    tag: "button",
+    type: "button",
+    textContent: "Copy",
+    backgroundColor: colors.card,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: 6,
+    padding: "2px 8px",
+    fontFamily: "monospace",
+    fontSize: 11,
+    lineHeight: "1.6",
+    flexShrink: 0,
+    cursor: "pointer",
+    onclick: () => {
+      clipboard.copy(currentCode);
+      copyButtonRef.textContent = "Copied";
+      clearTimeout(copyResetTimer);
+      copyResetTimer = setTimeout(() => {
+        copyButtonRef.textContent = "Copy";
+      }, 1500);
+    },
+  });
+
+  // Inside the header when there is one; floating over the block otherwise.
+  const attachCopyButton = () => {
+    if (headerRef) {
+      copyButtonRef.style.position = "";
+      copyButtonRef.style.top = "";
+      copyButtonRef.style.right = "";
+      copyButtonRef.style.zIndex = "";
+      headerRef.appendChild(copyButtonRef);
+    } else {
+      copyButtonRef.style.position = "absolute";
+      copyButtonRef.style.top = toREM(8);
+      copyButtonRef.style.right = toREM(8);
+      copyButtonRef.style.zIndex = "3";
+      container.appendChild(copyButtonRef);
+    }
+  };
+
   // Header. Built through a helper so a later `title` update can create one on a
   // widget that was constructed without it.
   const ensureHeader = (text) => {
     if (!showHeader || !text) return null;
     if (headerRef) {
-      headerRef.textContent = text;
+      headerTitleRef.textContent = text;
       return headerRef;
     }
     headerRef = WidgetFactory({
       tag: "div",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 8,
       padding: "8px 12px",
       backgroundColor: colors.primary,
-      borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
-      color: "#fff",
+      borderRadius: `${toREM(borderRadius)} ${toREM(borderRadius)} 0 0`,
+      // The header is a primary plate; in dark mode that plate is near-white,
+      // so a literal white title disappeared into it.
+      color: colors.onPrimary,
       fontSize: "14px",
       fontWeight: "bold",
+    });
+    headerTitleRef = WidgetFactory({
+      tag: "span",
       textContent: text,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
     });
+    headerRef.appendChild(headerTitleRef);
     container.insertBefore(headerRef, container.firstChild);
+    attachCopyButton();
     return headerRef;
   };
   ensureHeader(currentTitle);
@@ -110,10 +181,10 @@ code = "",
     tag: "div",
     backgroundColor,
     borderRadius: currentTitle
-      ? `0 0 ${borderRadius}px ${borderRadius}px`
-      : `${borderRadius}px`,
+      ? `0 0 ${toREM(borderRadius)} ${toREM(borderRadius)}`
+      : toREM(borderRadius),
     overflow: "auto",
-    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+    maxHeight: toREM(maxHeight),
     overflowX: "auto",
     overflowY: "auto",
   });
@@ -132,22 +203,22 @@ code = "",
       tag: "div",
       backgroundColor,
       borderRight: `1px solid ${colors.border}`,
-      padding: `${padding}px 0`,
+      padding: `${toREM(padding)} 0`,
       fontFamily: "monospace",
-      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      fontSize: toREM(fontSize),
       lineHeight: "1.5",
       textAlign: "right",
-      color: lineNumberColor,
+      color: gutterInk,
       userSelect: "none",
-      width: `${lineNumberWidth}px`,
+      width: toREM(lineNumberWidth),
       flexShrink: 0,
     });
 
     codeColRef = WidgetFactory({
       tag: "div",
-      padding: `${padding}px`,
+      padding: toREM(padding),
       fontFamily: "monospace",
-      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      fontSize: toREM(fontSize),
       lineHeight: "1.5",
       whiteSpace: "pre",
       flex: 1,
@@ -170,9 +241,9 @@ code = "",
   } else {
     codeWrapperRef = WidgetFactory({
       tag: "div",
-      padding: typeof padding === "number" ? `${padding}px` : padding,
+      padding: toREM(padding),
       fontFamily: "monospace",
-      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      fontSize: toREM(fontSize),
       whiteSpace: "pre",
       lineHeight: "1.5",
     });
@@ -180,16 +251,18 @@ code = "",
   }
 
   container.appendChild(scrollWrapperRef);
+  if (!headerRef) attachCopyButton();
+  container.onUnmount(() => clearTimeout(copyResetTimer));
 
   // Fill initial content
   const lines = currentCode.split("\n");
-  const highlightedLines = lines.map((line) => generateHighlightedHtml(line));
+  const highlightedLines = lines.map((line) => generateHighlightedHtml(line, syntaxPalette));
 
   if (showLineNumbers) {
     for (let i = 0; i < lines.length; i++) {
       const numberDiv = WidgetFactory({
         tag: "div",
-        padding: `0 ${padding / 2}px 0 ${padding}px`,
+        padding: `0 ${toREM(padding / 2)} 0 ${toREM(padding)}`,
         whiteSpace: "pre",
         textContent: String(startingLineNumber + i),
       });

package/src/widgets/Container.js

@@ -13,9 +13,21 @@ export const Container = (props = {}) => {
     overflow = "auto",
     boxSizing = "border-box",
     bgColor = colors.surface,
+    flex,
+    flexGrow,
+    flexShrink,
     ...rest
   } = props;
 
+  // Container paints `overflow: auto`, and a flex item whose overflow is not
+  // `visible` has an automatic minimum size of zero — so by default it shrank
+  // to nothing inside a column that overflows. Opting into the flex shorthand
+  // still wins, which is how a stretchable body keeps working.
+  const flexDefaults =
+    flex === undefined && flexGrow === undefined && flexShrink === undefined
+      ? { flexShrink: 0 }
+      : { flex, flexGrow, flexShrink };
+
   return WidgetFactory({
     tag: "div",
     widgetName: "Container",
@@ -24,6 +36,7 @@ export const Container = (props = {}) => {
     overflow: overflow,
     boxSizing: boxSizing,
     backgroundColor: bgColor,
+    ...flexDefaults,
     ...rest,
   });
 };

package/src/widgets/DataTable.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const DataTable = (props) => {
   const {
     columns,
@@ -22,7 +24,7 @@ export const DataTable = (props) => {
 
     rowBgColor = "transparent",
     rowTextColor = colors.text,
-    rowFontSize = 13,
+    rowFontSize = 14,
 
     stripedRowBgColor = colors.gray50,
 
@@ -31,8 +33,12 @@ export const DataTable = (props) => {
     borderColor = colors.border,
     borderWidth = 1,
 
-    cellPadding = "10px 12px",
-    headerCellPadding = "12px",
+    // A padding the caller can hand as `8`, `"8px 12px"` or `"1rem"`: every
+    // write below goes through toREM, which scales the first two and leaves the
+    // third alone. Written straight to `style`, a bare number is an invalid CSS
+    // value the browser drops, and a string is a frozen pixel.
+    cellPadding = "8px 12px",
+    headerCellPadding = 12,
 
     // ========== OTHER PROPS ==========
     ...rest
@@ -61,7 +67,7 @@ export const DataTable = (props) => {
   for (const col of columns) {
     const th = document.createElement("th");
     th.textContent = typeof col === "string" ? col : col.label;
-    th.style.padding = headerCellPadding;
+    th.style.padding = toREM(headerCellPadding);
     th.style.textAlign = "left";
     th.style.borderBottom = `2px solid ${borderColor}`;
     th.style.backgroundColor = headerBgColor;
@@ -69,7 +75,7 @@ export const DataTable = (props) => {
     th.style.fontWeight = headerFontWeight;
     th.style.fontSize =
       typeof headerFontSize === "number"
-        ? `${headerFontSize}px`
+        ? toREM(headerFontSize)
         : headerFontSize;
 
     // Custom alignment per column
@@ -122,11 +128,11 @@ export const DataTable = (props) => {
       const value = row[key];
 
       td.textContent = value !== undefined ? String(value) : "";
-      td.style.padding = cellPadding;
+      td.style.padding = toREM(cellPadding);
       td.style.borderBottom = `${borderWidth}px solid ${borderColor}`;
       td.style.color = rowTextColor;
       td.style.fontSize =
-        typeof rowFontSize === "number" ? `${rowFontSize}px` : rowFontSize;
+        toREM(rowFontSize);
 
       // Custom alignment per column
       if (typeof col !== "string" && col.align) {
@@ -195,11 +201,11 @@ export const DataTable = (props) => {
         const value = row[key];
 
         td.textContent = value !== undefined ? String(value) : "";
-        td.style.padding = cellPadding;
+        td.style.padding = toREM(cellPadding);
         td.style.borderBottom = `${borderWidth}px solid ${borderColor}`;
         td.style.color = rowTextColor;
         td.style.fontSize =
-          typeof rowFontSize === "number" ? `${rowFontSize}px` : rowFontSize;
+          toREM(rowFontSize);
 
         if (typeof col !== "string" && col.align) {
           td.style.textAlign = col.align;
@@ -236,7 +242,7 @@ export const DataTable = (props) => {
     for (const col of newColumns) {
       const th = document.createElement("th");
       th.textContent = typeof col === "string" ? col : col.label;
-      th.style.padding = headerCellPadding;
+      th.style.padding = toREM(headerCellPadding);
       th.style.textAlign = "left";
       th.style.borderBottom = `2px solid ${borderColor}`;
       th.style.backgroundColor = headerBgColor;
@@ -244,7 +250,7 @@ export const DataTable = (props) => {
       th.style.fontWeight = headerFontWeight;
       th.style.fontSize =
         typeof headerFontSize === "number"
-          ? `${headerFontSize}px`
+          ? toREM(headerFontSize)
           : headerFontSize;
 
       if (typeof col !== "string" && col.align) {

package/src/widgets/DraggBox.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 
 export const DraggBox = (props) => {
   const {
@@ -53,7 +54,7 @@ export const DraggBox = (props) => {
     clone.style.zIndex = "99999";
     clone.style.backgroundColor = dragOverlayColor;
     clone.style.border = `2px dashed ${dragBorderColor}`;
-    clone.style.borderRadius = "8px";
+    clone.style.borderRadius = toREM(8);
     document.body.appendChild(clone);
     return clone;
   };

package/src/widgets/Dropdown.js

@@ -5,11 +5,15 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
+import { isReactive, reactiveKeyOf, resolveReactive } from "../widget-factory/reactiveValue.js";
+import { registerWidget } from "../tools/useState.js";
 import { Container } from "./Container.js";
 import { Row } from "./Row.js";
 import { Column } from "./Column.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 
 /**
  * Props owned by the Dropdown's closure state. Routed to the widget's `update`
@@ -22,7 +26,32 @@ const DROPDOWN_PROP_KEYS = [
   "width", "portal",
 ];
 
-export const Dropdown = (props) => {
+/**
+ * The owned keys `update()` can actually apply, so they are also the ones worth
+ * subscribing. A callback is never bound: `onChange` has no branch in `update()`.
+ */
+const BINDABLE_KEYS = [
+  "options", "value", "placeholder", "disabled", "label", "error", "variant",
+  "size", "borderRadius", "color", "bgColor", "textColor", "optionHoverColor",
+  "clearable",
+];
+
+export const Dropdown = (inputProps = {}) => {
+  // The factory never receives these keys, so it can neither resolve a `useState`
+  // value for them (a live reactive is a *function*, and `findSelected()` would
+  // compare it against the option list and never match) nor subscribe this widget
+  // to the key. Both happen here instead: read once, keep the keys, bind after
+  // `composeUpdate` has routed a later patch into `update()`.
+  const boundKeys = new Map();
+  const props = { ...inputProps };
+  for (const key of BINDABLE_KEYS) {
+    const value = inputProps[key];
+    if (!isReactive(value)) continue;
+    props[key] = resolveReactive(value);
+    const stateKey = reactiveKeyOf(value);
+    if (stateKey) boundKeys.set(key, stateKey);
+  }
+
   const {
     options = [],
     value = null,
@@ -70,10 +99,12 @@ export const Dropdown = (props) => {
   let resizeListener = null;
   let scrollListener = null;
 
+  /** [vertical, horizontal] in framework units — see `Input`: a `"8px 14px"`
+   *  string is raw CSS and stops the field growing with the reader's font. */
   const sizes = {
-    small: { padding: "6px 12px", fontSize: 12 },
-    medium: { padding: "8px 14px", fontSize: 14 },
-    large: { padding: "12px 16px", fontSize: 16 },
+    small: { padding: [4, 12], fontSize: 12, minHeight: 32 },
+    medium: { padding: [8, 12], fontSize: 14, minHeight: TAP_MINIMUM },
+    large: { padding: [12, 16], fontSize: 16, minHeight: 48 },
   };
   let currentSize = sizes[size] || sizes.medium;
 
@@ -170,14 +201,16 @@ export const Dropdown = (props) => {
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%",
-    padding: currentSize.padding,
+    paddingVertical: currentSize.padding[0],
+    paddingHorizontal: currentSize.padding[1],
+    minHeight: currentSize.minHeight,
     backgroundColor:
       currentVariant === "filled" ? `${currentBgColor}CC` : "transparent",
     border:
       currentVariant === "outlined"
         ? `1px solid ${currentError ? colors.danger : colors.border}`
         : "none",
-    borderRadius: `${currentBorderRadius}px`,
+    borderRadius: currentBorderRadius,
     cursor: currentDisabled ? "not-allowed" : "pointer",
     opacity: currentDisabled ? 0.5 : 1,
     boxSizing: "border-box",
@@ -209,11 +242,15 @@ export const Dropdown = (props) => {
     ],
   });
 
-  // Main container
+  // The root must not paint a surface: only the selector does, and an
+  // `outlined` selector is deliberately transparent. Container's default
+  // background otherwise showed through behind the label as a full-width
+  // block, and painted the outlined field as if it were filled.
   const container = Container({
     widgetName: "Dropdown",
     position: "relative",
     width: width,
+    bgColor: "transparent",
     ...rest,
   });
 
@@ -221,9 +258,9 @@ export const Dropdown = (props) => {
     const labelEl = WidgetFactory({
       tag: "label",
       textContent: currentLabel,
-      fontSize: "12px",
+      fontSize: 12,
       color: currentError ? colors.danger : colors.textSecondary,
-      marginBottom: "4px",
+      marginBottom: 4,
       display: "block",
     });
     container.appendChild(labelEl);
@@ -291,7 +328,7 @@ export const Dropdown = (props) => {
       zIndex: 10000,
       border: `1px solid ${colors.border}`,
       backgroundColor: currentBgColor,
-      borderRadius: `${currentBorderRadius}px`, // same borderRadius
+      borderRadius: currentBorderRadius, // same borderRadius
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
       maxHeight: "250px",
       overflowY: "auto",
@@ -321,12 +358,14 @@ export const Dropdown = (props) => {
       );
 
       const optionItem = Row({
-        padding: "10px 16px",
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        minHeight: TAP_MINIMUM,
         cursor: "pointer",
         backgroundColor: isSelected ? currentColor + "15" : "transparent",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: "8px",
+        gap: 8,
         children: [
           Row({
             alignItems: "center",
@@ -469,8 +508,9 @@ export const Dropdown = (props) => {
     }
     if (needsDisplayUpdate) {
       updateDisplay();
-      selector.style.padding = currentSize.padding;
-      selector.style.borderRadius = `${currentBorderRadius}px`;
+      selector.style.padding = `${toREM(currentSize.padding[0])} ${toREM(currentSize.padding[1])}`;
+      selector.style.minHeight = toREM(currentSize.minHeight);
+      selector.style.borderRadius = toREM(currentBorderRadius);
       if (currentVariant === "outlined")
         selector.style.border = `1px solid ${currentError ? colors.danger : colors.border}`;
       else selector.style.border = "none";
@@ -499,6 +539,11 @@ export const Dropdown = (props) => {
   container.close = closeMenu;
   composeUpdate(container, DROPDOWN_PROP_KEYS, update);
 
+  // Bind after composing: `registerWidget` pushes the current store value through
+  // `update`, which must be the composed one that routes owned keys into this
+  // widget's closure. It also releases the subscription on unmount by itself.
+  for (const [propName, stateKey] of boundKeys) registerWidget(stateKey, container, propName);
+
   container.onUnmount(() => {
     closeMenu();
   });

package/src/widgets/DroppBox.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const DroppBox = (props) => {
   const {
     child,
@@ -58,12 +60,12 @@ export const DroppBox = (props) => {
     transition: `all ${transitionDuration} ${transitionTiming}`,
     backgroundColor: bgColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     borderWidth: `${borderWidth}px`,
     borderStyle: borderStyle,
     borderColor: borderColor,
     boxShadow: shadow,
-    padding: typeof padding === "number" ? `${padding}px` : padding,
+    padding: toREM(padding),
     ...rest,
   });
 

package/src/widgets/FloatingActionButton.js

@@ -7,6 +7,8 @@ import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { SHADOW_LEVELS, PILL } from "../tools/index.js";
 
 export const FloatingActionButton = (props) => {
   const {
@@ -14,9 +16,11 @@ export const FloatingActionButton = (props) => {
     label,
     onPress,
     backgroundColor = colors.primary,
-    foregroundColor = "#ffffff",
-    elevation = 6,
-    borderRadius = 48,
+    foregroundColor = colors.onPrimary,
+    // Depth is the 0-5 scale, like every other widget; 6 was a number the scale
+    // does not have, which only worked because this widget built its own string.
+    elevation = 4,
+    borderRadius = PILL,
     padding = 12,
     mini = false,
     extended = false,
@@ -24,7 +28,9 @@ export const FloatingActionButton = (props) => {
     ...rest
   } = props;
 
-  const size = mini ? 40 : 56;
+  // 48 and 40 are both scale steps, and both clear the Fitts floor: the mini FAB
+  // sits exactly on it, which is as small as a floating target may get.
+  const size = mini ? 40 : 48;
   const iconSize = mini ? 20 : 24;
 
   const children = [
@@ -58,14 +64,14 @@ export const FloatingActionButton = (props) => {
     gap: 8,
     width: extended ? "auto" : size,
     height: size,
-    borderRadius: extended ? "24px" : "50%",
+    borderRadius: extended ? borderRadius : "50%",
     backgroundColor: backgroundColor,
     color: foregroundColor,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.6 : 1,
-    boxShadow: `0 ${elevation / 2}px ${elevation}px rgba(0,0,0,0.3)`,
+    boxShadow: SHADOW_LEVELS[elevation] ?? SHADOW_LEVELS[4],
     transition: "all 0.2s ease",
-    padding: extended ? "0 20px" : 0,
+    padding: extended ? `0 ${toREM(16)}` : 0,
     child: extended
       ? Row({ alignItems: "center", gap: 8, children })
       : children[0],