@multiplatform.one/forms 7.54.1 → 7.56.0

package/src/DescriptionList/DescriptionList.spec.tsx

@@ -8,7 +8,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
 import { FORM_GRID_COLLAPSE_WIDTH } from "../FormGrid";
 import { EMPTY, formatDateText, formatNumericText } from "../FieldDisplay/formatters";
-import { DescriptionList, PropertyList } from "./index";
+import { DescriptionList, PropertyList, middleSplit } from "./index";
 
 afterEach(() => {
   vi.unstubAllGlobals();
@@ -278,3 +278,89 @@ describe("DescriptionList", () => {
     expect(root?.querySelectorAll("[data-mpo-description-list-row]").length).toBe(1);
   });
 });
+
+describe("DescriptionList hierarchy (LC-169)", () => {
+  const issuer = "https://91-98-47-56.sslip.io/auth/realms/master";
+
+  it("middleSplit keeps the last path segments that fit, or the last 12 characters", () => {
+    expect(middleSplit(issuer)).toEqual(["https://91-98-47-56.sslip.io", "/auth/realms/master"]);
+    expect(middleSplit("master")).toEqual(["master", ""]);
+    const digest = "sha256:9f2c41a7e0b3d5c8a1f4e6b2c9d0";
+    const [head, tail] = middleSplit(digest);
+    expect(tail).toHaveLength(12);
+    expect(head + tail).toBe(digest);
+  });
+
+  it("an identifier row is mono, one line, cut in the middle, with copy", () => {
+    const result = renderWithProviders(
+      <DescriptionList
+        placement="top"
+        items={[{ term: "Issuer", value: issuer, identifier: true }]}
+      />,
+    );
+    const row = result.container.querySelector(
+      "[data-mpo-description-list-identifier]",
+    ) as HTMLElement;
+    expect(row).not.toBeNull();
+    expect(row.textContent).toContain(issuer);
+    const parts = Array.from(row.querySelectorAll("span")).filter((node) =>
+      ["https://91-98-47-56.sslip.io", "/auth/realms/master"].includes(node.textContent ?? ""),
+    );
+    expect(parts).toHaveLength(2);
+    expect(result.getByLabelText("Copy to clipboard")).toBeTruthy();
+  });
+
+  it("the term is the label role, a size under the value's body", () => {
+    const result = renderWithProviders(
+      <DescriptionList placement="top" items={[{ term: "Realm", value: "master" }]} />,
+    );
+    const term = result.container.querySelector("[data-mpo-description-list-term]") as HTMLElement;
+    const value = result.container.querySelector(
+      "[data-mpo-description-list-value]",
+    ) as HTMLElement;
+    const size = (el: Element) =>
+      String((el as HTMLElement).className)
+        .split(" ")
+        .filter((c) => c.startsWith("_fos-"));
+    const valueText = value.querySelector("span, div[class*='_fos-']") ?? value;
+    expect(size(term)).not.toEqual(size(valueText));
+  });
+
+  it("inline: glyph and label lead, the value trails on the same line, an identifier still stacks", () => {
+    const result = renderWithProviders(
+      <DescriptionList
+        placement="inline"
+        items={[
+          { term: "Realm", value: "master", icon: <span data-testid="glyph" /> },
+          {
+            term: "Issuer",
+            value: "https://91-98-47-56.sslip.io/auth/realms/master",
+            identifier: true,
+          },
+        ]}
+      />,
+    );
+    const list = result.container.querySelector("[data-mpo-description-list]") as HTMLElement;
+    expect(list.getAttribute("data-placement")).toBe("inline");
+    const [realmRow, issuerRow] = Array.from(
+      result.container.querySelectorAll("[data-mpo-description-list-row]"),
+    ) as HTMLElement[];
+    const realmTerm = realmRow.querySelector("[data-mpo-description-list-term]") as HTMLElement;
+    const realmValue = realmRow.querySelector("[data-mpo-description-list-value]") as HTMLElement;
+    const line = realmTerm.closest("[class*='_fd-row']") as HTMLElement;
+    expect(line).not.toBeNull();
+    expect(line.contains(realmValue) || realmRow.contains(realmValue)).toBe(true);
+    expect(result.getByTestId("glyph")).toBeTruthy();
+    // The inline label takes its value's size and differs from it by ink.
+    const fontSize = (el: Element) => String(el.className).match(/_fos-\S+/)?.[0];
+    const valueText = realmValue.querySelector(
+      "[data-component='FieldDisplay'] [class*='_fos-']",
+    ) as HTMLElement;
+    expect(fontSize(realmTerm)).toBeDefined();
+    expect(fontSize(realmTerm)).toEqual(fontSize(valueText));
+    // The value trails: its frame packs to the end of the line.
+    const frame = realmValue.querySelector("[data-component='FieldDisplay']") as HTMLElement;
+    expect(String(frame.className)).toMatch(/_jc-flex-end/);
+    expect(issuerRow.querySelector("[data-mpo-description-list-identifier]")).not.toBeNull();
+  });
+});

package/src/DescriptionList/index.tsx

@@ -7,15 +7,20 @@
  * read/edit flip moves no label (LC-44). Chromeless by default (LC-39);
  * the framed variant paints, so it earns the Card inset.
  *
- * House Text (14/25 + body fragment + textAccent) and house Separator
- * (1px `$borderColor`, quiet = opacity 0.5) own the term and the row rule.
+ * LC-169 CARD-HIERARCHY: the term is the label role (footnote size,
+ * secondary ink) and the value the body in the primary ink, so a label never
+ * reads at its value's size, weight and ink. An `identifier` row (a URL, an
+ * id) is mono, one line, truncated in the middle, with copy. House Separator
+ * (1px `$borderColor`, quiet = opacity 0.5) owns the row rule.
  * Forms cannot import `@multiplatform.one/components` (that package depends
  * on forms); the recipes are the same measured law.
  */
 
 import {
   Children,
+  createContext,
   isValidElement,
+  useContext,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -25,7 +30,14 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
-import { compareSizeTokens, useResolvedKnobs } from "@multiplatform.one/theme";
+import { writeToClipboard } from "@multiplatform.one/platform";
+import {
+  IconSlot,
+  compareSizeTokens,
+  useGlyphColor,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { CopyIcon } from "@phosphor-icons/react";
 import { type SizeTokens, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { Button } from "../Button";
 import { FORM_GRID_COLLAPSE_WIDTH } from "../FormGrid";
@@ -34,10 +46,17 @@ import { formReadableMaxWidth } from "../formSpacing";
 import { DescriptionListSlotProvider, FieldDisplay, type FieldDisplayType } from "../FieldDisplay";
 import { t } from "../shared/t";
 
-export type DescriptionListPlacement = "side" | "top";
+/**
+ * `inline` is the card fact row (LC-169): glyph and label leading, the value
+ * trailing on the same line, a hairline between rows. An identifier row still
+ * stacks, since a long mono id cannot share its line.
+ */
+export type DescriptionListPlacement = "side" | "top" | "inline";
 
 export interface DescriptionListItem {
   term: ReactNode;
+  /** A glyph that names the fact's kind, before the term in the secondary ink. */
+  icon?: ReactNode;
   /** FieldDisplay type — every typed value mounts FieldDisplay (LC-12). */
   field?: FieldDisplayType;
   value?: any;
@@ -45,6 +64,11 @@ export interface DescriptionListItem {
   linkedValue?: any;
   /** Opt-in ellipsis for identifier-class values (DG-OVF). */
   truncate?: boolean;
+  /**
+   * A long identifier (URL, id, digest): mono, one line, truncated in the
+   * middle so both ends stay legible, with a copy action (LC-169).
+   */
+  identifier?: boolean;
   /** Optional per-row Change action. */
   onChange?: () => void;
   changeLabel?: string;
@@ -83,6 +107,8 @@ export interface DescriptionListProps {
    * tight rhythm (shorter rows, `gapSm` columns).
    */
   size?: SizeTokens;
+  /** Called after an identifier row's copy, for the owner's confirm (CopyField precedent). */
+  onCopyResult?: (ok: boolean) => void;
   testID?: string;
 }
 
@@ -114,7 +140,7 @@ function resolvePlacement(
   prop: DescriptionListPlacement | undefined,
   knobPlacement: string,
 ): DescriptionListPlacement {
-  if (prop === "side" || prop === "top") return prop;
+  if (prop === "side" || prop === "top" || prop === "inline") return prop;
   if (knobPlacement === "top" || knobPlacement === "side") {
     return knobPlacement;
   }
@@ -154,15 +180,17 @@ function ListRule({ quiet }: { quiet?: boolean }) {
   );
 }
 
-function TermText({ children }: { children: ReactNode }) {
+function TermText({ children, inline = false }: { children: ReactNode; inline?: boolean }) {
   const { knobProps } = useResolvedKnobs();
   return (
     <Text
       data-mpo-description-list-term=""
-      fontSize={14}
-      lineHeight={25}
-      {...knobProps.body}
-      color="$color11"
+      // LC-169: a stacked term is the label role (a size under its value, the
+      // secondary ink); an inline one shares the value's line, so it takes the
+      // value's size and differs by ink.
+      {...(inline
+        ? { ...knobProps.body, ...knobProps.label, color: "$textMuted" }
+        : knobProps.textRole.label)}
       minWidth={0}
       // `overflowWrap` is not a tamagui style prop; passed as one it reaches
       // the DOM host as an unknown React prop. Web takes it through `style`.
@@ -173,6 +201,24 @@ function TermText({ children }: { children: ReactNode }) {
   );
 }
 
+function TermLead({ row, inline = false }: { row: DescriptionListItem; inline?: boolean }) {
+  const { knobProps } = useResolvedKnobs();
+  const ink = useGlyphColor("$textMuted");
+  if (row.icon == null) return <TermText inline={inline}>{row.term}</TermText>;
+  return (
+    <XStack alignItems="center" minWidth={0} {...knobProps.gapSm}>
+      <View
+        aria-hidden
+        flexShrink={0}
+        {...(isWeb && ink ? ({ style: { color: ink } } as Record<string, unknown>) : {})}
+      >
+        <IconSlot icon={row.icon} color={ink} size={16} />
+      </View>
+      <TermText inline={inline}>{row.term}</TermText>
+    </XStack>
+  );
+}
+
 function ChangeAction({ onChange, label }: { onChange: () => void; label?: string }) {
   return (
     <View data-mpo-description-list-action="" alignItems="flex-start" justifyContent="flex-end">
@@ -183,21 +229,105 @@ function ChangeAction({ onChange, label }: { onChange: () => void; label?: strin
   );
 }
 
-function ValueSlot({ row }: { row: DescriptionListItem }) {
+/**
+ * Where a long identifier splits for middle truncation: the tail keeps the
+ * last path segments that fit in 20 characters (`/auth/realms/master`), or
+ * the last 12 characters when there is no path.
+ */
+export function middleSplit(text: string): [string, string] {
+  if (text.length <= 24) return [text, ""];
+  let start = text.length - 12;
+  let from = text.length - 2;
+  for (;;) {
+    const slash = text.lastIndexOf("/", from);
+    if (slash <= 0 || text.length - slash > 20) break;
+    start = slash;
+    from = slash - 1;
+  }
+  return [text.slice(0, start), text.slice(start)];
+}
+
+/**
+ * The glyph never flips (DG-FB-01 / LC-16): the confirm is the owner's, through
+ * `onCopyResult`, the same channel Input's copy end-cap uses (CopyField routes
+ * it to notify()).
+ */
+const CopyResultContext = createContext<((ok: boolean) => void) | undefined>(undefined);
+
+function IdentifierValue({ text }: { text: string }) {
+  const onCopyResult = useContext(CopyResultContext);
+  const { knobProps } = useResolvedKnobs();
+  const [head, tail] = middleSplit(text);
+  const ink = { ...knobProps.body, fontFamily: "$mono", color: "$color" } as const;
+  const copy = async () => {
+    const ok = await writeToClipboard(text);
+    onCopyResult?.(ok);
+  };
+  return (
+    <XStack
+      data-mpo-description-list-identifier=""
+      alignItems="center"
+      minWidth={0}
+      width="100%"
+      {...knobProps.gapSm}
+    >
+      {isWeb ? (
+        <XStack flex={1} minWidth={0} {...({ title: text } as Record<string, unknown>)}>
+          <Text {...ink} numberOfLines={1} flexShrink={1} minWidth={0}>
+            {head}
+          </Text>
+          {tail ? (
+            <Text {...ink} numberOfLines={1} flexShrink={0}>
+              {tail}
+            </Text>
+          ) : null}
+        </XStack>
+      ) : (
+        <Text {...ink} flex={1} minWidth={0} numberOfLines={1} ellipsizeMode="middle">
+          {text}
+        </Text>
+      )}
+      <Button
+        nested
+        chromeless
+        circular
+        flexShrink={0}
+        icon={<CopyIcon />}
+        aria-label={t("Copy to clipboard")}
+        onPress={() => void copy()}
+      />
+    </XStack>
+  );
+}
+
+function ValueSlot({ row, trailing = false }: { row: DescriptionListItem; trailing?: boolean }) {
   return (
     <View data-mpo-description-list-value="" minWidth={0} width="100%">
       {row.children != null ? (
-        row.children
+        trailing ? (
+          <XStack justifyContent="flex-end" alignItems="center" minWidth={0} width="100%">
+            {row.children}
+          </XStack>
+        ) : (
+          row.children
+        )
+      ) : row.identifier && row.value != null && row.value !== "" ? (
+        <IdentifierValue text={String(row.value)} />
       ) : (
-        <FieldDisplay
-          field={row.field ?? "input"}
-          value={row.value}
-          fieldProps={row.fieldProps}
-          linkedValue={row.linkedValue}
-          chromeless
-          align="left"
-          truncate={row.truncate}
-        />
+        // FieldDisplay grows on flex 1 from a zero basis; in a column with no
+        // height of its own that collapsed it to 0 and the next rule ran
+        // through the value. A row lets it grow across and keep its height.
+        <XStack minWidth={0} width="100%">
+          <FieldDisplay
+            field={row.field ?? "input"}
+            value={row.value}
+            fieldProps={row.fieldProps}
+            linkedValue={row.linkedValue}
+            chromeless
+            align={trailing ? "right" : "left"}
+            truncate={trailing || row.truncate}
+          />
+        </XStack>
       )}
     </View>
   );
@@ -206,6 +336,7 @@ function ValueSlot({ row }: { row: DescriptionListItem }) {
 function DescriptionListRowView({
   row,
   stacked,
+  inline = false,
   hasActionColumn,
   rhythm,
   showRule,
@@ -213,6 +344,7 @@ function DescriptionListRowView({
 }: {
   row: DescriptionListItem;
   stacked: boolean;
+  inline?: boolean;
   hasActionColumn: boolean;
   rhythm: ReturnType<typeof listItemRhythm>;
   showRule: boolean;
@@ -224,20 +356,23 @@ function DescriptionListRowView({
     <View data-mpo-description-list-action="" />
   ) : null;
 
-  const rowStyle: CSSProperties | undefined = isWeb
-    ? stacked
-      ? {
-          display: "grid",
-          gridTemplateColumns: hasActionColumn ? "minmax(0,1fr) max-content" : "minmax(0,1fr)",
-          columnGap: undefined,
-          rowGap: undefined,
-        }
-      : {
-          display: "grid",
-          gridTemplateColumns: "subgrid",
-          gridColumn: "1 / -1",
-        }
-    : undefined;
+  const oneLine = inline && !row.identifier;
+  const rowStyle: CSSProperties | undefined = oneLine
+    ? undefined
+    : isWeb
+      ? stacked
+        ? {
+            display: "grid",
+            gridTemplateColumns: hasActionColumn ? "minmax(0,1fr) max-content" : "minmax(0,1fr)",
+            columnGap: undefined,
+            rowGap: undefined,
+          }
+        : {
+            display: "grid",
+            gridTemplateColumns: "subgrid",
+            gridColumn: "1 / -1",
+          }
+      : undefined;
 
   const termStyle: CSSProperties | undefined = isWeb
     ? stacked
@@ -255,10 +390,20 @@ function DescriptionListRowView({
       : { justifySelf: "end" }
     : undefined;
 
-  const body = stacked ? (
+  const body = oneLine ? (
+    <XStack alignItems="center" width="100%" minWidth={0} gap={rhythm.columnGap as never}>
+      <View flexShrink={0} maxWidth="60%" minWidth={0}>
+        <TermLead row={row} inline />
+      </View>
+      <View flex={1} minWidth={0}>
+        <ValueSlot row={row} trailing />
+      </View>
+      {action}
+    </XStack>
+  ) : stacked ? (
     <>
       <View style={termStyle}>
-        <TermText>{row.term}</TermText>
+        <TermLead row={row} />
       </View>
       {action ? <View style={actionStyle}>{action}</View> : null}
       <View style={valueStyle} paddingTop={rhythm.stackGap as never}>
@@ -268,7 +413,7 @@ function DescriptionListRowView({
   ) : isWeb ? (
     <>
       <View style={termStyle}>
-        <TermText>{row.term}</TermText>
+        <TermLead row={row} />
       </View>
       <View style={valueStyle}>
         <ValueSlot row={row} />
@@ -283,7 +428,7 @@ function DescriptionListRowView({
         flexShrink={0}
         width={`${purposeMaxCh()}ch` as never}
       >
-        <TermText>{row.term}</TermText>
+        <TermLead row={row} />
       </View>
       <View flex={1} minWidth={0}>
         <ValueSlot row={row} />
@@ -314,6 +459,7 @@ function DescriptionListRowView({
 function DescriptionListWeb({
   rows,
   stacked,
+  inline,
   hasAction,
   rhythm,
   quiet,
@@ -324,6 +470,7 @@ function DescriptionListWeb({
 }: {
   rows: DescriptionListItem[];
   stacked: boolean;
+  inline: boolean;
   hasAction: boolean;
   rhythm: ReturnType<typeof listItemRhythm>;
   quiet?: boolean;
@@ -374,6 +521,7 @@ function DescriptionListWeb({
           key={index}
           row={row}
           stacked={stacked}
+          inline={inline}
           hasActionColumn={hasAction}
           rhythm={rhythm}
           showRule={index > 0}
@@ -443,6 +591,7 @@ export function DescriptionList({
   maxWidth = formReadableMaxWidth,
   labelColumnWidth = LABEL_COLUMN_WIDTH,
   size,
+  onCopyResult,
   testID,
 }: DescriptionListProps) {
   const { knobProps } = useResolvedKnobs({ size });
@@ -456,50 +605,55 @@ export function DescriptionList({
   const hasAction = rows.some(rowHasAction);
   const measureCollapse = placement === "side";
   const { ref, wide, onLayout } = useContainerWide(measureCollapse);
-  const stacked = placement === "top" || (placement === "side" && !wide);
+  const inline = placement === "inline";
+  const stacked = placement === "top" || inline || (placement === "side" && !wide);
 
   const list = (
-    <DescriptionListSlotProvider>
-      {isWeb ? (
-        <DescriptionListWeb
-          rows={rows}
-          stacked={stacked}
-          hasAction={hasAction}
-          rhythm={rhythm}
-          quiet={quiet}
-          labelColumnWidth={labelColumnWidth}
-          sizeToken={knobProps.sizeToken}
-          placement={placement}
-          framed={framed}
-        />
-      ) : (
-        <YStack
-          data-mpo-description-list=""
-          data-placement={placement}
-          data-stacked={stacked ? "true" : "false"}
-          data-rhythm={rhythm.tight ? "tight" : "regular"}
-          data-framed={framed ? "true" : "false"}
-          data-quiet={quiet ? "true" : "false"}
-          data-has-action={hasAction ? "true" : "false"}
-          data-label-column-width={labelColumnWidth}
-          data-size-token={knobProps.sizeToken}
-          width="100%"
-          minWidth={0}
-        >
-          {rows.map((row, index) => (
-            <DescriptionListRowView
-              key={index}
-              row={row}
-              stacked={stacked}
-              hasActionColumn={hasAction}
-              rhythm={rhythm}
-              showRule={index > 0}
-              quiet={quiet}
-            />
-          ))}
-        </YStack>
-      )}
-    </DescriptionListSlotProvider>
+    <CopyResultContext.Provider value={onCopyResult}>
+      <DescriptionListSlotProvider>
+        {isWeb ? (
+          <DescriptionListWeb
+            rows={rows}
+            stacked={stacked}
+            inline={inline}
+            hasAction={hasAction}
+            rhythm={rhythm}
+            quiet={quiet}
+            labelColumnWidth={labelColumnWidth}
+            sizeToken={knobProps.sizeToken}
+            placement={placement}
+            framed={framed}
+          />
+        ) : (
+          <YStack
+            data-mpo-description-list=""
+            data-placement={placement}
+            data-stacked={stacked ? "true" : "false"}
+            data-rhythm={rhythm.tight ? "tight" : "regular"}
+            data-framed={framed ? "true" : "false"}
+            data-quiet={quiet ? "true" : "false"}
+            data-has-action={hasAction ? "true" : "false"}
+            data-label-column-width={labelColumnWidth}
+            data-size-token={knobProps.sizeToken}
+            width="100%"
+            minWidth={0}
+          >
+            {rows.map((row, index) => (
+              <DescriptionListRowView
+                key={index}
+                row={row}
+                stacked={stacked}
+                inline={inline}
+                hasActionColumn={hasAction}
+                rhythm={rhythm}
+                showRule={index > 0}
+                quiet={quiet}
+              />
+            ))}
+          </YStack>
+        )}
+      </DescriptionListSlotProvider>
+    </CopyResultContext.Provider>
   );
 
   const widthProps = {

package/src/FieldDisplay/index.tsx

@@ -193,8 +193,10 @@ function useDisplayChrome() {
   };
 }
 
+const frameJustify = { left: "flex-start", center: "center", right: "flex-end" } as const;
+
 function DisplayFrame({ field, children }: { field: FieldDisplayType; children: ReactNode }) {
-  const { knobProps, chromeless } = useDisplayChrome();
+  const { knobProps, chromeless, align } = useDisplayChrome();
   if (chromeless) {
     return (
       <XStack
@@ -202,7 +204,7 @@ function DisplayFrame({ field, children }: { field: FieldDisplayType; children:
         data-field={field}
         data-chromeless=""
         alignItems="center"
-        justifyContent="flex-start"
+        justifyContent={frameJustify[align ?? "left"]}
         minWidth={0}
         flex={1}
         width="100%"

package/src/fields/Progress/Progress.spec.tsx

@@ -320,6 +320,27 @@ describe("Progress", () => {
       expect(radiusAtoms).not.toContain("_btlr-100000px");
     });
 
+    it("rounds the fill's leading end at large and full, where the rail is already a capsule (LC-132)", () => {
+      const fillRadiusAtoms = (borderRadius: "medium" | "large" | "full") => {
+        const { container, unmount } = renderWithProviders(
+          <Preset overrides={{ borderRadius }}>
+            <Progress label="Fill end" value={50} />
+          </Preset>,
+        );
+        const atoms = String(getIndicator(container)?.className || "")
+          .split(" ")
+          .filter((c) => c.startsWith("_bbrr-"));
+        unmount();
+        return atoms;
+      };
+      const medium = fillRadiusAtoms("medium");
+      const large = fillRadiusAtoms("large");
+      const full = fillRadiusAtoms("full");
+      expect(medium).toContain("_bbrr-t-radius-0");
+      expect(large).toContain("_bbrr-t-radius-2");
+      expect(full).toContain("_bbrr-t-radius-12");
+    });
+
     it("skeleton track height matches the live 0.25× size formula, not a 6px leftover", () => {
       const live = renderWithProviders(<Progress label="Upload" value={50} />);
       const bar = live.container.querySelector("[role='progressbar']") as HTMLElement;

package/src/fields/Progress/index.tsx

@@ -1,7 +1,13 @@
 import { transitionOrInstant } from "../../shared/instantMotion";
 import type { ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
-import { Intent, transitionProps, type MotionRole } from "@multiplatform.one/theme";
+import {
+  Intent,
+  radiusStopFromToken,
+  railFillRadius,
+  transitionProps,
+  type MotionRole,
+} from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
 import type { LabelProps, SizeTokens } from "tamagui";
@@ -86,11 +92,18 @@ function indicatorMotion(role: MotionRole) {
  * `ProgressIndicator` component sub-theme. Capturing here keeps the hue
  * scope explicit. useTheme() subscribes, so scheme changes stay live.
  */
-function HueFillIndicator({ motion }: { motion: MotionRole }) {
+function HueFillIndicator({
+  motion,
+  radius,
+}: {
+  motion: MotionRole;
+  radius: ReturnType<typeof railFillRadius>;
+}) {
   const theme = useTheme();
   const fill = theme.color9?.val;
   return (
     <ProgressIndicator
+      borderRadius={radius}
       {...(fill ? { backgroundColor: fill as any } : undefined)}
       {...indicatorMotion(motion)}
     />
@@ -176,6 +189,7 @@ function ProgressTrack({
   const trackSize = size ?? sizeToken;
   const percent = Math.round((progressValue / max) * 100);
   const motion = indicatorMotion(knobProps.motion.slide);
+  const fillRadius = railFillRadius(radiusStopFromToken(knobProps.borderRadius.borderRadius));
   const name = typeof label === "string" && label ? label : t("Progress");
 
   const progressElement = (
@@ -203,12 +217,13 @@ function ProgressTrack({
     >
       {intent && intent !== "accent" ? (
         <Intent name={intent}>
-          <HueFillIndicator motion={knobProps.motion.slide} />
+          <HueFillIndicator motion={knobProps.motion.slide} radius={fillRadius} />
         </Intent>
       ) : (
         // Accent fills use the mark channel without a solid sub-theme scope.
         // The default fill must hold 3:1 against both the track and page (DF-06).
         <ProgressIndicator
+          borderRadius={fillRadius}
           backgroundColor={
             intent === "accent" ? formSelectedColors.mark : formControlColors.boundary
           }