@multiplatform.one/components 7.11.0 → 7.16.0

package/src/TreeSelect/TreeSelect.spec.tsx

@@ -84,7 +84,7 @@ describe("TreeSelect cover + width (MPO-53 AC-3)", () => {
         open
       />,
     );
-    const trigger = result.container.querySelector(
+    const trigger = result.baseElement.querySelector(
       '[data-testid="tree-select-trigger"]',
     ) as HTMLElement;
     expect(trigger).toBeTruthy();
@@ -93,7 +93,7 @@ describe("TreeSelect cover + width (MPO-53 AC-3)", () => {
 
     try {
       await waitFor(() => {
-        const panel = result.container.querySelector(
+        const panel = result.baseElement.querySelector(
           '[data-testid="tree-select-panel"]',
         ) as HTMLElement | null;
         expect(panel).toBeTruthy();
@@ -114,7 +114,7 @@ describe("TreeSelect LC-49 one tab stop", () => {
     const result = renderWithProviders(
       <TreeSelect label="Account" nodes={accounts} value="hdfc" />,
     );
-    const closedStops = tabStops(result.container);
+    const closedStops = tabStops(result.baseElement);
     expect(closedStops.length).toBe(1);
     expect(closedStops[0]?.getAttribute("data-testid")).toBe("tree-select-trigger");
 
@@ -128,7 +128,7 @@ describe("TreeSelect LC-49 one tab stop", () => {
       />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
+      expect(result.baseElement.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
     });
     const openRoot = result.baseElement;
     const search = openRoot.querySelector(
@@ -169,16 +169,16 @@ describe("TreeSelect LC-21 commit vs expand", () => {
       />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector("[data-treeselect-caret]")).toBeTruthy();
+      expect(result.baseElement.querySelector("[data-treeselect-caret]")).toBeTruthy();
     });
-    const caret = result.container.querySelector("[data-treeselect-caret]") as HTMLElement;
+    const caret = result.baseElement.querySelector("[data-treeselect-caret]") as HTMLElement;
     await act(async () => {
       fireEvent.click(caret);
     });
     expect(onChange).not.toHaveBeenCalled();
     expect(onOpenChange).not.toHaveBeenCalledWith(false);
 
-    const cash = result.container.querySelector(
+    const cash = result.baseElement.querySelector(
       '[data-treeselect-row="liabilities"]',
     ) as HTMLElement;
     await act(async () => {
@@ -201,10 +201,10 @@ describe("TreeSelect sheet at <=640", () => {
       />,
     );
     await waitFor(() => {
-      expect(desktop.container.querySelector("[data-treeselect-row]")).toBeTruthy();
+      expect(desktop.baseElement.querySelector("[data-treeselect-row]")).toBeTruthy();
     });
-    const desktopTree = desktop.container.querySelector('[data-testid="tree-select-tree"]');
-    const desktopRows = [...desktop.container.querySelectorAll("[data-treeselect-row]")].map(
+    const desktopTree = desktop.baseElement.querySelector('[data-testid="tree-select-tree"]');
+    const desktopRows = [...desktop.baseElement.querySelectorAll("[data-treeselect-row]")].map(
       (el) => ({
         id: el.getAttribute("data-treeselect-row"),
         depth: el.getAttribute("data-depth"),
@@ -226,7 +226,7 @@ describe("TreeSelect sheet at <=640", () => {
     await waitFor(() => {
       expect(mobile.baseElement.querySelector("[data-treeselect-row]")).toBeTruthy();
     });
-    expect(mobile.container.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
+    expect(mobile.baseElement.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
     const mobileTree = mobile.baseElement.querySelector('[data-testid="tree-select-tree"]');
     const mobileRows = [...mobile.baseElement.querySelectorAll("[data-treeselect-row]")].map(
       (el) => ({
@@ -247,19 +247,19 @@ describe("TreeSelect empty filter", () => {
       <TreeSelect label="Account" nodes={accounts} open emptyMessage="No matching accounts" />,
     );
     await waitFor(() => {
-      expect(result.container.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
+      expect(result.baseElement.querySelector('[data-testid="tree-select-search"]')).toBeTruthy();
     });
-    const search = result.container.querySelector(
+    const search = result.baseElement.querySelector(
       '[data-testid="tree-select-search"] input',
     ) as HTMLInputElement;
     await act(async () => {
       fireEvent.change(search, { target: { value: "xyzzy" } });
     });
-    const empty = result.container.querySelector(
+    const empty = result.baseElement.querySelector(
       '[data-testid="tree-select-empty"]',
     ) as HTMLElement;
     expect(empty).toBeTruthy();
     expect(empty.textContent).toContain("No matching accounts");
-    expect(result.container.querySelector('[data-testid="empty-state"]')).toBeNull();
+    expect(result.baseElement.querySelector('[data-testid="empty-state"]')).toBeNull();
   });
 });

package/src/TreeSelect/index.tsx

@@ -3,6 +3,7 @@ import {
   FloatingPanel,
   formCommonColors,
   InputParts,
+  PanelPortal,
   useFloatingPanel,
   useFormField,
   useViewportGtSm,
@@ -751,59 +752,61 @@ function FloatingTreeSelect({
         accessibilityLabel={accessibilityLabel}
       />
       {panel.mounted && (
-        <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
-          <YStack
-            {...getFloatingProps({
-              ref: panel.refs.setFloating,
-            })}
-            data-testid="tree-select-panel"
-            data-cover=""
-            data-width-mode={TREE_SELECT_WIDTH_MODE}
-            data-dismiss-class="commit"
-            data-fp-panel=""
-            outlineWidth={0}
-            pointerEvents={panel.visible ? "auto" : "none"}
-            {...panel.knobProps.elevatedSurface}
-            borderRadius={panel.dropdownRadius}
-            overflow="hidden"
-            style={
-              {
-                position: "fixed",
-                top: overlayStyle.current?.top ?? 0,
-                left: 0,
-                zIndex: zIndex.dropdown,
-                opacity: panel.visible ? 1 : 0,
-                transform: panel.visible ? "scale(1)" : "scale(0.96)",
-                transition: panelTransition,
-                boxSizing: "border-box",
-              } as Record<string, unknown>
-            }
-          >
-            <SearchRow
-              value={state.filter}
-              placeholder={searchPlaceholder}
-              inputRef={searchRef}
-              onChange={state.setFilter}
-              onKeyDown={onSearchKeyDown}
-              treeId={treeId}
-              activeDescendant={activeDescendant}
-              sizeToken={sizeToken}
-            />
-            <YStack overflow="scroll" maxHeight={320} id={treeId}>
-              <TreeSelectPanelBody
-                rows={state.rows}
-                selectedId={value}
-                activeIndex={state.activeIndex}
-                keyboardRing={state.keyboardRing}
+        <PanelPortal anchor={panel.triggerRef.current}>
+          <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
+            <YStack
+              {...getFloatingProps({
+                ref: panel.refs.setFloating,
+              })}
+              data-testid="tree-select-panel"
+              data-cover=""
+              data-width-mode={TREE_SELECT_WIDTH_MODE}
+              data-dismiss-class="commit"
+              data-fp-panel=""
+              outlineWidth={0}
+              pointerEvents={panel.visible ? "auto" : "none"}
+              {...panel.knobProps.elevatedSurface}
+              borderRadius={panel.dropdownRadius}
+              overflow="hidden"
+              style={
+                {
+                  position: "fixed",
+                  top: overlayStyle.current?.top ?? 0,
+                  left: 0,
+                  zIndex: zIndex.dropdown,
+                  opacity: panel.visible ? 1 : 0,
+                  transform: panel.visible ? "scale(1)" : "scale(0.96)",
+                  transition: panelTransition,
+                  boxSizing: "border-box",
+                } as Record<string, unknown>
+              }
+            >
+              <SearchRow
+                value={state.filter}
+                placeholder={searchPlaceholder}
+                inputRef={searchRef}
+                onChange={state.setFilter}
+                onKeyDown={onSearchKeyDown}
                 treeId={treeId}
-                emptyMessage={emptyMessage}
-                loading={loading}
-                onCommit={commit}
-                onToggle={state.toggle}
+                activeDescendant={activeDescendant}
+                sizeToken={sizeToken}
               />
+              <YStack overflow="scroll" maxHeight={320} id={treeId}>
+                <TreeSelectPanelBody
+                  rows={state.rows}
+                  selectedId={value}
+                  activeIndex={state.activeIndex}
+                  keyboardRing={state.keyboardRing}
+                  treeId={treeId}
+                  emptyMessage={emptyMessage}
+                  loading={loading}
+                  onCommit={commit}
+                  onToggle={state.toggle}
+                />
+              </YStack>
             </YStack>
-          </YStack>
-        </FloatingFocusManager>
+          </FloatingFocusManager>
+        </PanelPortal>
       )}
     </>
   );

package/src/Video/PlayerChrome.tsx

@@ -2,6 +2,7 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   useResolvedKnobs,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import {
   CornersInIcon,
@@ -83,7 +84,7 @@ function ChromeButton({
       hoverStyle={{ backgroundColor: "$color4" }}
       pressStyle={{ opacity: 0.85 }}
       focusVisibleStyle={{ ...control.focusVisibleKnobProps }}
-      {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+      {...transitionProps(knobProps.transition)}
       onPress={(e: { stopPropagation?: () => void }) => {
         e.stopPropagation?.();
         onPress();
@@ -205,7 +206,7 @@ function SeekBar({
           backgroundColor="$color8"
           borderRadius={radius}
           overflow="hidden"
-          {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+          {...transitionProps(knobProps.transition)}
         >
           <YStack
             height="100%"
@@ -300,7 +301,7 @@ export function PlayerChrome({
             onFocusChange(false);
           },
         } as Record<string, unknown>)}
-        {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+        {...transitionProps(knobProps.transition)}
       >
         <YStack flex={1} alignItems="center" justifyContent="center" pointerEvents="none">
           {playing ? null : (

package/src/Wheel/Wheel.spec.tsx

@@ -275,7 +275,7 @@ describe("Wheel design-law (MPO-60)", () => {
     expect("default" in mod).toBe(false);
   });
 
-  it("selected row type stays on body weight 400, never 600 (R7 / design-audit)", () => {
+  it("selected row type stays on the body weight channel (400/700), never 500/600 (R7 / design-audit)", () => {
     renderWithProviders(
       <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
     );
@@ -284,7 +284,7 @@ describe("Wheel design-law (MPO-60)", () => {
       .querySelector('[data-testid="wheel-item"][data-selected="true"]') as HTMLElement;
     expect(selected).toBeTruthy();
     const text = selected.querySelector("[class]") as HTMLElement;
-    expect(text.className).toMatch(/_fow-400\b/);
+    expect(text.className).toMatch(/_fow-(400|700|bold)\b/);
     expect(text.className).not.toMatch(/_fow-600\b/);
     expect(text.className).not.toMatch(/_fow-500\b/);
   });
@@ -298,7 +298,7 @@ describe("Wheel design-law (MPO-60)", () => {
     const noneFrame = none.container.querySelector('[data-testid="wheel"]') as HTMLElement;
     const noneAtoms = String(noneFrame.className)
       .split(" ")
-      .filter((c) => c.startsWith("_btlr-"));
+      .filter((c) => c.startsWith("_btlr-") && c !== "_btlr-0px");
     none.unmount();
 
     const full = renderWithProviders(
@@ -309,7 +309,7 @@ describe("Wheel design-law (MPO-60)", () => {
     const fullFrame = full.container.querySelector('[data-testid="wheel"]') as HTMLElement;
     const fullAtoms = String(fullFrame.className)
       .split(" ")
-      .filter((c) => c.startsWith("_btlr-"));
+      .filter((c) => c.startsWith("_btlr-") && c !== "_btlr-0px");
     expect(noneAtoms).toEqual([]);
     expect(fullAtoms).toEqual([]);
   });

package/src/adjacency.l1.spec.tsx

@@ -0,0 +1,175 @@
+/**
+ * `00` L1 test 1, the adjacency check (MPO-23, gap ledger GL-41). A Button,
+ * an Input, a Select trigger and a ListItem in one `XStack` at the same size
+ * token, with only a `gap`, must agree on height and on radius. They differ
+ * only in interior padding (`00` L9f). `constraintAudit` checks that each
+ * value lands on a token step; nothing checked that siblings agree.
+ *
+ * The DOM here cannot lay out and does not resolve Tamagui's CSS variables,
+ * so each frame's box is read from the atoms it paints (`_h-44px`,
+ * `_btlr-t-radius-4`, `_mih-t-size-4`) and resolved through the live token
+ * table. That is the same box a browser computes for these frames: none of
+ * them grows past its height or min-height with one line of content.
+ *
+ * The law holds for height at every size stop and for the controls' radius at
+ * the default stop. ListItem joins the height check only: it is a flush row
+ * (SP-EDGE, radius 0) and never takes the controls' radius (Clay 2026-09-26,
+ * MPO-23 ruling 1A). Two disagreements are open and pinned below as expected
+ * failures, each naming its culprit. Fixing one makes its `it.fails` go red,
+ * which is the signal to turn it into a plain assertion.
+ */
+
+import { Input, Select } from "@multiplatform.one/forms";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, type Size } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { getTokens } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./Button";
+import { ListItem, XStack } from "./tamagui";
+
+afterEach(cleanup);
+
+type Box = { height: number; radius: number };
+type Row = Record<"Button" | "Input" | "Select trigger" | "ListItem", Box>;
+
+const stops = [
+  ["small", "$3"],
+  ["medium", "$4"],
+  ["large", "$5"],
+] as const satisfies readonly (readonly [Size, string])[];
+
+function atom(el: HTMLElement, prop: string) {
+  for (const cls of String(el.className || "").split(/\s+/)) {
+    if (!cls.startsWith(`_${prop}-`)) continue;
+    const value = cls.slice(prop.length + 2);
+    if (/^-?\d+(?:\.\d+)?px$|^t-(?:size|radius)-\d+$/.test(value)) return value;
+  }
+  return undefined;
+}
+
+function px(value: string | undefined): number | undefined {
+  if (value === undefined) return undefined;
+  const literal = value.match(/^(-?\d+(?:\.\d+)?)px$/);
+  if (literal) return Number(literal[1]);
+  const [, scale, step] = value.match(/^t-(size|radius)-(\d+)$/) ?? [];
+  const tokens = getTokens() as unknown as Record<string, Record<string, { val: unknown }>>;
+  return Number.parseFloat(String(tokens[scale ?? ""]?.[`$${step}`]?.val));
+}
+
+function box(el: HTMLElement | null, name: string): Box {
+  if (!el) throw new Error(`${name} frame not rendered`);
+  const height = px(atom(el, "h") ?? atom(el, "mih"));
+  if (height === undefined) throw new Error(`${name} paints no height`);
+  return { height, radius: px(atom(el, "btlr")) ?? 0 };
+}
+
+function measure(ui: ReactElement): Row {
+  const { container } = renderWithProviders(ui);
+  const frame = (selector: string) => container.querySelector<HTMLElement>(selector);
+  return {
+    Button: box(frame("[data-mp-button-height]"), "Button"),
+    Input: box(frame("[data-mp-input-box]"), "Input"),
+    "Select trigger": box(frame('[data-testid="select-trigger"]'), "Select trigger"),
+    ListItem: box(frame('[data-testid="l1-list-item"]'), "ListItem"),
+  };
+}
+
+/** The mpo size channel: the size knob, which every house control reads. */
+function atKnob(knob: Size, token: string) {
+  return measure(
+    <Preset overrides={{ size: knob }}>
+      <XStack gap="$2">
+        <Button>Save</Button>
+        <Input placeholder="Name" />
+        <Select options={[{ value: "a", label: "A" }]} placeholder="Pick" />
+        <ListItem size={token as "$4"} title="Row" data-testid="l1-list-item" />
+      </XStack>
+    </Preset>,
+  );
+}
+
+/** The same token handed to each component directly. */
+function atSizeProp(token: "$3" | "$4" | "$5") {
+  return measure(
+    <XStack gap="$2">
+      <Button size={token}>Save</Button>
+      <Input size={token} placeholder="Name" />
+      <Select size={token} options={[{ value: "a", label: "A" }]} placeholder="Pick" />
+      <ListItem size={token} title="Row" data-testid="l1-list-item" />
+    </XStack>,
+  );
+}
+
+function heights(row: Row) {
+  return Object.fromEntries(Object.entries(row).map(([name, b]) => [name, b.height]));
+}
+
+function radii(row: Row, names: (keyof Row)[]) {
+  return Object.fromEntries(names.map((name) => [name, row[name].radius]));
+}
+
+function agreed(values: Record<string, number>) {
+  const first = Object.values(values)[0];
+  return Object.fromEntries(Object.keys(values).map((name) => [name, first]));
+}
+
+const controls: (keyof Row)[] = ["Button", "Input", "Select trigger"];
+
+describe("00 L1 adjacency: Button, Input, Select trigger and ListItem at one size token", () => {
+  for (const [knob, token] of stops) {
+    it(`all four paint one height at size ${knob} (${token})`, () => {
+      const row = heights(atKnob(knob, token));
+      expect(row).toEqual(agreed(row));
+    });
+  }
+
+  it("catches a deliberate violation: a Button ejected to its own height", () => {
+    const row = heights(
+      measure(
+        <XStack gap="$2">
+          <Button height={30} sizeRecipeEscape="L1 adjacency fixture">
+            Save
+          </Button>
+          <Input placeholder="Name" />
+          <Select options={[{ value: "a", label: "A" }]} placeholder="Pick" />
+          <ListItem size="$4" title="Row" data-testid="l1-list-item" />
+        </XStack>,
+      ),
+    );
+    expect(row.Button).toBe(30);
+    expect(row).not.toEqual(agreed(row));
+  });
+
+  it("Button, Input and Select trigger paint one radius at the default size", () => {
+    const row = radii(atKnob("medium", "$4"), controls);
+    expect(row).toEqual(agreed(row));
+    expect(row.Button).toBeGreaterThan(0);
+  });
+
+  it("ListItem stays a flush row beside them: radius 0, never the controls' radius", () => {
+    const row = radii(atKnob("medium", "$4"), [...controls, "ListItem"]);
+    expect(row.ListItem).toBe(0);
+    expect(row.Button).toBeGreaterThan(0);
+  });
+
+  for (const [knob, token] of stops.filter(([k]) => k !== "medium")) {
+    it.fails(`OPEN: Button and Input paint one radius at size ${knob} (Button's radius follows size, Input's only the radius knob)`, () => {
+      const row = radii(atKnob(knob, token), controls);
+      expect(row).toEqual(agreed(row));
+    });
+  }
+
+  it("an explicit size prop agrees with itself at the default token", () => {
+    const row = heights(atSizeProp("$4"));
+    expect(row).toEqual(agreed(row));
+  });
+
+  for (const token of ["$3", "$5"] as const) {
+    it.fails(`OPEN: an explicit size=${token} moves Input and Select trigger with Button (Input paints the knob height, Select ignores size)`, () => {
+      const row = heights(atSizeProp(token));
+      expect(row).toEqual(agreed(row));
+    });
+  }
+});

package/src/charts/charts.spec.tsx

@@ -33,10 +33,15 @@ function PaletteProbe({ into }: { into: { current?: ChartPalette } }) {
 }
 
 function markRects(): Element[] {
-  // Mark rects carry a resolved fill; interaction targets are transparent.
-  return Array.from(document.querySelectorAll("svg rect")).filter(
-    (rect) => rect.getAttribute("fill") !== "transparent",
-  );
+  // Bar marks are value-end-rounded paths with a resolved fill.
+  return Array.from(document.querySelectorAll("svg [data-mpo-chart-bar]"));
+}
+
+function barBox(bar: Element) {
+  const [x, y, width, height, radius] = String(bar.getAttribute("data-mpo-chart-bar"))
+    .split(",")
+    .map(Number);
+  return { x, y, width, height, radius };
 }
 
 function targetRects(): Element[] {
@@ -165,13 +170,13 @@ describe("BarChart", () => {
     const { unmount: unmountShort } = renderWithProviders(
       <BarChart data={[{ label: "atk", value: 90 }]} width={WIDTH} domain={[0, 180]} />,
     );
-    const shortHeight = Number(markRects()[0].getAttribute("height"));
+    const shortHeight = barBox(markRects()[0]).height;
     unmountShort();
 
     const { unmount: unmountFull } = renderWithProviders(
       <BarChart data={[{ label: "atk", value: 180 }]} width={WIDTH} domain={[0, 180]} />,
     );
-    const fullHeight = Number(markRects()[0].getAttribute("height"));
+    const fullHeight = barBox(markRects()[0]).height;
     expect(fullHeight).toBeGreaterThan(0);
     expect(shortHeight / fullHeight).toBeCloseTo(0.5, 1);
     unmountFull();
@@ -461,3 +466,41 @@ describe("charts barrel", () => {
     }
   });
 });
+
+describe("BarChart corners: DEFAULT class on the value end only (Part 2b, R-SCALE-DATA, MPO-56)", () => {
+  const radii = (borderRadius: "none" | "small" | "medium" | "large" | "full") => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius }}>
+        <BarChart data={data} width={WIDTH} />
+      </Preset>,
+    );
+    const boxes = markRects().map(barBox);
+    cleanup();
+    return boxes;
+  };
+
+  it("takes 0 / 5 / 9 / 16 px below full", () => {
+    expect(radii("none").map((b) => b.radius)).toEqual(data.map(() => 0));
+    expect(radii("small").map((b) => b.radius)).toEqual(data.map(() => 5));
+    expect(radii("medium").map((b) => b.radius)).toEqual(data.map(() => 9));
+    for (const box of radii("large")) expect(box.radius).toBe(Math.min(16, box.width / 2));
+  });
+
+  it("caps full at half the band, a round value end on a square foot", () => {
+    for (const box of radii("full")) {
+      expect(box.radius).toBe(Math.min(box.width / 2, box.height));
+    }
+  });
+
+  it("draws the baseline corners square", () => {
+    renderWithProviders(
+      <Preset overrides={{ borderRadius: "large" }}>
+        <BarChart data={data} width={WIDTH} />
+      </Preset>,
+    );
+    for (const bar of markRects()) {
+      const { x, y, height } = barBox(bar);
+      expect(bar.getAttribute("d")).toMatch(new RegExp(`^M${x},${y + height}V`));
+    }
+  });
+});

package/src/charts/math.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import { describeChart, describeDatum } from "./accessibility";
 import {
   approximateTextWidth,
+  barPath,
   arcCentroid,
   arcPath,
   areaPath,
@@ -201,3 +202,32 @@ describe("charts/accessibility", () => {
     expect(describeDatum({ datum: data[1], total: 2400 })).toBe("May: 1,200 (50%)");
   });
 });
+
+describe("charts/math barPath rounds only the value end (R-SCALE-DATA, MPO-56)", () => {
+  it("draws a square box at radius 0", () => {
+    expect(barPath({ x: 0, y: 10, width: 20, height: 40, radius: 0, valueEnd: "top" })).toBe(
+      "M0,10H20V50H0Z",
+    );
+  });
+
+  it("rounds the top corners of a positive bar and keeps the baseline square", () => {
+    expect(barPath({ x: 0, y: 10, width: 20, height: 40, radius: 5, valueEnd: "top" })).toBe(
+      "M0,50V15A5,5 0 0 1 5,10H15A5,5 0 0 1 20,15V50Z",
+    );
+  });
+
+  it("rounds the bottom corners of a negative bar", () => {
+    expect(barPath({ x: 0, y: 10, width: 20, height: 40, radius: 5, valueEnd: "bottom" })).toBe(
+      "M0,10H20V45A5,5 0 0 1 15,50H5A5,5 0 0 1 0,45Z",
+    );
+  });
+
+  it("clamps the radius to half the width and to the height", () => {
+    expect(barPath({ x: 0, y: 0, width: 20, height: 40, radius: 50, valueEnd: "top" })).toBe(
+      "M0,40V10A10,10 0 0 1 10,0H10A10,10 0 0 1 20,10V40Z",
+    );
+    expect(barPath({ x: 0, y: 0, width: 20, height: 4, radius: 9, valueEnd: "top" })).toBe(
+      "M0,4V4A4,4 0 0 1 4,0H16A4,4 0 0 1 20,4V4Z",
+    );
+  });
+});

package/src/charts/math.ts

@@ -165,6 +165,42 @@ const curveFactories: Record<ChartCurve, CurveFactory> = {
   step: curveStepAfter,
 };
 
+export interface BarPathInput {
+  x: number;
+  /** Top edge of the bar box (the value end for a positive bar). */
+  y: number;
+  width: number;
+  height: number;
+  /** Corner radius on the value end; the baseline corners stay square. */
+  radius: number;
+  /** The value end is the top edge (value above the baseline) or the bottom. */
+  valueEnd: "top" | "bottom";
+}
+
+/**
+ * SVG path for a bar that rounds only its value-end corners (R-SCALE-DATA):
+ * the baseline corners stay square so the mark sits on its axis. The radius
+ * is clamped to half the width and to the height, so a short bar never
+ * rounds past its own box.
+ */
+export function barPath(input: BarPathInput): string {
+  const { x, y, width: w, height: h, valueEnd } = input;
+  const r = Math.max(0, Math.min(input.radius, w / 2, h));
+  const right = x + w;
+  const bottom = y + h;
+  if (r === 0) return `M${x},${y}H${right}V${bottom}H${x}Z`;
+  if (valueEnd === "top") {
+    return (
+      `M${x},${bottom}V${y + r}A${r},${r} 0 0 1 ${x + r},${y}` +
+      `H${right - r}A${r},${r} 0 0 1 ${right},${y + r}V${bottom}Z`
+    );
+  }
+  return (
+    `M${x},${y}H${right}V${bottom - r}A${r},${r} 0 0 1 ${right - r},${bottom}` +
+    `H${x + r}A${r},${r} 0 0 1 ${x},${bottom - r}Z`
+  );
+}
+
 export interface LinePathOptions {
   curve?: ChartCurve;
 }