@multiplatform.one/components 7.6.3 → 7.7.0

package/src/SortableList/SortableList.spec.tsx

@@ -1,9 +1,14 @@
 import { fireEvent } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { SortableList } from "./index";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 const ITEMS = [
   { id: "mon", label: "Monday standup" },
   { id: "tue", label: "Tuesday review" },
@@ -14,10 +19,14 @@ const ITEMS = [
 function Harness({
   onChange = vi.fn(),
   readOnly,
+  disabled,
+  compact,
   canReorder,
 }: {
   onChange?: (next: typeof ITEMS) => void;
   readOnly?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
   canReorder?: (item: (typeof ITEMS)[number], index: number) => boolean;
 }) {
   const [items, setItems] = useState(ITEMS);
@@ -28,6 +37,8 @@ function Harness({
       getLabel={(item) => item.label}
       canReorder={canReorder}
       readOnly={readOnly}
+      disabled={disabled}
+      compact={compact}
       onChange={(next) => {
         setItems(next);
         onChange(next);
@@ -119,4 +130,34 @@ describe("SortableList", () => {
     const { container } = renderWithProviders(<Harness readOnly />);
     expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
   });
+
+  it("renders no handles when disabled (board 04)", () => {
+    const { container } = renderWithProviders(<Harness disabled />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
+  });
+
+  it("renders emptyMessage when there are no rows (board 04)", () => {
+    const { container } = renderWithProviders(
+      <SortableList
+        items={[]}
+        getId={(item: { id: string }) => item.id}
+        getLabel={(item: { label: string }) => item.label}
+        emptyMessage="No rows yet"
+      />,
+    );
+    expect(container.textContent).toContain("No rows yet");
+    expect(container.querySelectorAll("[data-sortable-row]")).toHaveLength(0);
+  });
+
+  it("compact still renders grab handles (LC-76: density does not drop controls)", () => {
+    const { container } = renderWithProviders(<Harness compact />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(4);
+    expect(container.querySelector('[role="list"]')).toBeTruthy();
+  });
+
+  it("spreads the outer radius fragment on the list frame, not the nested alias", () => {
+    const src = readFileSync(join(here, "index.tsx"), "utf8");
+    expect(src).toContain("{...knobProps.borderRadius}");
+    expect(src).not.toContain("knobProps.borderRadiusOuter");
+  });
 });

package/src/SortableList/SortableList.stories.tsx

@@ -21,13 +21,27 @@ const meta: Meta<typeof SortableList> = {
       },
     },
   },
+  argTypes: {
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    compact: { control: "boolean" },
+    disabledStyle: { control: "select", options: ["keepLabel", "dimWhole"] },
+    emptyMessage: { control: "text" },
+  },
 };
 export default meta;
 
 type Story = StoryObj<typeof SortableList>;
 
-function Demo(props: { readOnly?: boolean; locked?: string }) {
-  const [items, setItems] = useState(SEED);
+function Demo(props: {
+  readOnly?: boolean;
+  locked?: string;
+  disabled?: boolean;
+  compact?: boolean;
+  empty?: boolean;
+  disabledStyle?: "keepLabel" | "dimWhole";
+}) {
+  const [items, setItems] = useState(props.empty ? [] : SEED);
   return (
     <SortableList
       items={items}
@@ -35,6 +49,10 @@ function Demo(props: { readOnly?: boolean; locked?: string }) {
       getLabel={(item) => item.label}
       canReorder={props.locked ? (item) => item.id !== props.locked : undefined}
       readOnly={props.readOnly}
+      disabled={props.disabled}
+      compact={props.compact}
+      disabledStyle={props.disabledStyle}
+      emptyMessage="No rows yet"
       onChange={setItems}
       aria-label="Sprint rituals"
     />
@@ -53,3 +71,18 @@ export const ReadOnly: Story = {
 export const LockedRow: Story = {
   render: () => <Demo locked="tue" />,
 };
+
+/** Board 04 — empty is a real state, not an error. */
+export const Empty: Story = {
+  render: () => <Demo empty />,
+};
+
+/** Board 04 — disabled list keeps labels, drops the handles. */
+export const Disabled: Story = {
+  render: () => <Demo disabled />,
+};
+
+/** Board 04 — compact nested well. */
+export const Compact: Story = {
+  render: () => <Demo compact />,
+};

package/src/SortableList/index.tsx

@@ -90,7 +90,7 @@ export function SortableList<T>({
     <YStack
       ref={containerRef as never}
       {...knobProps.surface}
-      {...knobProps.borderRadiusOuter}
+      {...knobProps.borderRadius}
       overflow="hidden"
       role="list"
       aria-label={ariaLabel}

package/src/TreeSelect/TreeSelect.stories.tsx

@@ -47,7 +47,7 @@ export default meta;
 
 type Story = StoryObj<typeof TreeSelect>;
 
-export const Account: Story = {
+export const Default: Story = {
   render: function Render() {
     const [value, setValue] = useState("hdfc");
     return (
@@ -67,6 +67,31 @@ export const Account: Story = {
   },
 };
 
+export const Open: Story = {
+  render: function Render() {
+    const [value, setValue] = useState("hdfc");
+    const [open, setOpen] = useState(true);
+    return (
+      <YStack width={280} padding="$4">
+        <TreeSelect
+          label="Account"
+          nodes={accounts}
+          value={value}
+          onChange={setValue}
+          open={open}
+          onOpenChange={setOpen}
+          placeholder="Select account"
+          searchPlaceholder="Filter accounts"
+          emptyMessage="No matching accounts"
+          defaultExpandedIds={["assets", "current", "bank"]}
+        />
+      </YStack>
+    );
+  },
+};
+
+export const Account: Story = Default;
+
 export const Empty: Story = {
   render: () => (
     <YStack width={280} padding="$4">
@@ -74,3 +99,53 @@ export const Empty: Story = {
     </YStack>
   ),
 };
+
+export const Disabled: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        disabled
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        required
+        error="An account is required"
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        readOnly
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect label="Account" nodes={accounts} skeleton placeholder="Select account" />
+    </YStack>
+  ),
+};

package/src/Wheel/Wheel.spec.tsx

@@ -272,7 +272,7 @@ describe("Wheel design-law (MPO-60)", () => {
   it("exposes named exports and no default", async () => {
     const mod = await import("./index");
     expect(mod.Wheel).toBe(Wheel);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("selected row type stays on body weight 400, never 600 (R7 / design-audit)", () => {

package/src/code/Code/code.spec.tsx

@@ -1,5 +1,5 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { Code, CodeInline } from "./index";
 
 describe("Code", () => {
@@ -21,6 +21,15 @@ describe("Code", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("keeps data-code-font and does not emit a dataset attribute", () => {
+    const { container } = renderWithProviders(<Code>const test = "hello"</Code>);
+    const codeElement = container.querySelector("code");
+    expect(codeElement).toBeTruthy();
+    expect(codeElement!.getAttribute("data-code-font")).toBe("mono");
+    // React lowercases an unknown dataSet prop to dataset="[object Object]".
+    expect(codeElement!.hasAttribute("dataset")).toBe(false);
+  });
 });
 
 describe("CodeInline", () => {
@@ -42,4 +51,21 @@ describe("CodeInline", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("emits data-code-font on web without a dataSet host-prop leak", () => {
+    const leak = /does not recognize the `dataSet` prop on a DOM element/;
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const { container } = renderWithProviders(<CodeInline>npm install</CodeInline>);
+      const codeElement = container.querySelector("code");
+      expect(codeElement).toBeDefined();
+      expect(codeElement?.getAttribute("data-code-font")).toBe("mono");
+      const leaks = errorSpy.mock.calls
+        .map((args) => args.map(String).join(" "))
+        .filter((message) => leak.test(message));
+      expect(leaks).toEqual([]);
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
 });

package/src/code/Code/index.tsx

@@ -40,7 +40,6 @@ export const Code = CodeFrame.styleable((props, ref) => {
       fontFamily="$mono"
       letterSpacing={0}
       data-code-font="mono"
-      {...({ dataSet: { codeFont: "mono" } } as object)}
     />
   );
 });
@@ -57,6 +56,9 @@ const CodeInlineFrame = styled(Paragraph, {
   backgroundColor: componentColors.code.background,
   cursor: "inherit",
   borderRadius: "$3",
+  // Pin (dial: surrounding prose): 0.9× size / 0.7× leading. Size reaches
+  // the chip through context, not sizeToken. Lettered in spec § Code and
+  // CodeInline; these ratios are the house metrics already shipping.
   fontSize: "90%" as CSSProperties["fontSize"],
   lineHeight: "70%" as CSSProperties["lineHeight"],
   paddingHorizontal: "0.6%",
@@ -79,7 +81,12 @@ export const CodeInline = CodeInlineFrame.styleable((props, ref) => {
       fontFamily="$mono"
       letterSpacing={0}
       data-code-font="mono"
-      {...({ dataSet: { codeFont: "mono" } } as object)}
+      // react-native-web reads dataSet; React-DOM warns on the camel host
+      // prop. Keep the kebab attribute on every target; spread dataSet
+      // only when TAMAGUI_TARGET is native.
+      {...(process.env.TAMAGUI_TARGET === "native"
+        ? ({ dataSet: { codeFont: "mono" } } as object)
+        : {})}
     />
   );
 });

package/src/code/HighlightedCode/index.tsx

@@ -74,7 +74,6 @@ export function HighlightedCode({
             fontFamily="$mono"
             letterSpacing={0}
             data-code-font="mono"
-            {...({ dataSet: { codeFont: "mono" } } as object)}
           >
             {showLineNumbers && (
               <Text

package/src/code/highlightedCode.spec.tsx

@@ -115,9 +115,18 @@ describe("HighlightedCode", () => {
         <HighlightedCode tokens={tokens} />
       </Preset>,
     );
-    const line = container.querySelector("span");
+    // querySelector("span") used to land on renderWithProviders' Theme
+    // wrapper (`t_light _dsp_contents`), never the code line, so this guard
+    // asserted null and had been red on main. Select the line itself.
+    const line = container.querySelector("[data-code-font]") as HTMLElement | null;
     expect(line).toBeTruthy();
     expect(container.textContent).toContain("const");
     expect(line!.getAttribute("data-code-font")).toBe("mono");
+    // The actual LC-07 pin: bodyFont serif / fontWeight bold must not reach
+    // code text, so the line keeps the mono family class.
+    expect(line!.className).toContain("font_mono");
+    // React does not recognise `dataSet`; leaving it on the line logged an
+    // unknown-prop error and wrote dataset="[object Object]" on every node.
+    expect(container.querySelectorAll("[dataset]")).toHaveLength(0);
   });
 });

package/src/knobImmuneExports.ts

@@ -38,6 +38,17 @@ export const knobImmuneExports: Readonly<Record<string, string>> = {
   // qualifies for a row (house implementations ARE the knob story). The
   // weight-knob question stays an ADJUDICATION-CANDIDATE on the component
   // header (MPO-21 G10 / G0-clay R9).
+  // MPO-21 G1 — Fold's substrate. Logic shell only; Accordion (and Fold)
+  // own the painted chrome. Restored with the three below after MPO-21 R9 G8
+  // (the Adapt drop) rewrote this file from a pre-MPO-21 copy and took them
+  // out as collateral; Adapt itself stays dropped.
+  Collapsible:
+    "composition root (open/close shell); knobs land on composing surfaces (Accordion, Fold)",
+  Unspaced:
+    "spacing opt-out marker; paints nothing, tells the parent stack to skip gap on its children",
+  VisuallyHidden: "a11y hide utility; paints nothing visible, no chrome for knobs to reach",
+  LinearGradient:
+    "paint primitive (color stops are content); no opinionated chrome, consumers own the stops",
   ListItem:
     "raw list-row primitive consumed as lego by house list surfaces (List, sidebar, tags) which own the knob story. ADJUDICATION-CANDIDATE + BACKLOG: painted row with own padding/press states — deserves a house shadow or Tamagui* demotion once consumers migrate",
 

package/src/layouts/AsyncBoundary.spec.tsx

@@ -229,7 +229,7 @@ function SchemeWrap({
   children: ReactNode;
 }) {
   return (
-    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
       <YStack backgroundColor="$background">{children}</YStack>
     </TamaguiProvider>
   );

package/src/layouts/breadcrumbs.spec.tsx

@@ -1,5 +1,7 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { describe, expect, it, vi } from "vitest";
 import { Breadcrumbs } from "./breadcrumbs";
 
@@ -28,6 +30,21 @@ describe("Breadcrumbs", () => {
     expect(["400", "normal"]).toContain(String(linkWeight));
   });
 
+  it("hides the slash separators from AT and paints them as T-HELPER ink", () => {
+    const { container } = renderWithProviders(<Breadcrumbs items={items} />);
+    const separators = [...container.querySelectorAll('[data-testid="breadcrumb-separator"]')];
+    expect(separators).toHaveLength(2);
+    for (const sep of separators) {
+      expect(sep.getAttribute("aria-hidden")).toBe("true");
+      expect(sep.textContent).toBe("/");
+    }
+    // Distinct token from MPO-40: separators ride textAccentColor (AA floor
+    // at $color11), not componentColors.text.subtle ($color8).
+    const source = readFileSync(join(import.meta.dirname, "breadcrumbs.tsx"), "utf8");
+    expect(source).toMatch(/color=\{knobProps\.textAccentColor\}/);
+    expect(source).not.toMatch(/color=\{componentColors\.text\.subtle\}/);
+  });
+
   it("calls onNavigate from a path crumb and keeps the current page inert", () => {
     const onNavigate = vi.fn();
     const { container } = renderWithProviders(

package/src/layouts/breadcrumbs.tsx

@@ -2,9 +2,15 @@
  * Breadcrumbs — wayfinding trail (Polaris / Primer / GOV.UK).
  *
  * Landmark `<nav>` + ordered list; last crumb is the current page
- * (`aria-current="page"`, not a link). Separators stay the RTL-neutral `/`.
+ * (`aria-current="page"`, not a link). Separators stay the RTL-neutral `/`,
+ * `aria-hidden` (the list already names the trail), and T-HELPER ink via
+ * `knobProps.textAccentColor` — not `componentColors.text.subtle` ($color8),
+ * which measured 1.89:1 / 2.21:1 against the 4.5 floor. Distinct from
+ * MPO-40 / !272 (outlined intent `$color11` on the warning surface).
  * LC-71: keyboard ring on each link (and the overflow control), never the
  * trail container. LC-03 / LC-35: tight chromeless trail.
+ * Crumb `minHeight` is a Vocabulary `pin` at 44, not a size `floor` — see
+ * `docs/design/letters/breadcrumbs-size-pin.md`.
  */
 
 import {
@@ -120,12 +126,17 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
   // Tight trail: crumbs hug the "/" separators so the path reads as one unit.
   // The space knob still scales the gap, but from a tight base — not the
   // panel-level knobProps.gap (which is sized for stacked layout sections).
+  // Spec: separators are T-HELPER (`textAccentColor`), never the $color8
+  // `text.subtle` ramp that fails AA on the page.
   const spaceGap = knobProps.gap.gap;
   const trailGap =
     spaceGap === "$2" ? ("$1" as const) : spaceGap === "$5" ? ("$2" as const) : ("$1.5" as const);
   // Vertical pad only (theme-propagation SP-FIXED / DG-LAY-04 / LC-03): grow
   // the clickable box to ≥44 without horizontal padding that would re-spread
   // the trail. No minWidth floor — the ring must hug the link, not a 44px well.
+  // Height is PINNED at MIN_PRESS_TARGET across size stops (font still remaps).
+  // That is Vocabulary `pin (forced: WCAG 2.5.5)`, not `floor`. Do not raise
+  // the box at large — lettered in docs/design/letters/breadcrumbs-size-pin.md.
   const crumbPadY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - CRUMB_LINE_PX) / 2));
   const crumbRadius = knobProps.borderRadius.borderRadius;
 
@@ -238,7 +249,13 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
               </Text>
             )}
             {!isLastSlot && (
-              <Text color={componentColors.text.subtle} fontSize={separatorSize} userSelect="none">
+              <Text
+                aria-hidden
+                color={knobProps.textAccentColor}
+                data-testid="breadcrumb-separator"
+                fontSize={separatorSize}
+                userSelect="none"
+              >
                 /
               </Text>
             )}

package/src/layouts/tags.r7.spec.tsx

@@ -4,7 +4,9 @@ import { Tags } from "./tags";
 
 describe("Tags design law", () => {
   it("paints the field label at weight 400 (R7 / §6.1)", () => {
-    const { container } = renderWithProviders(<Tags tags={["alpha"]} label="Topics" />);
+    const { container } = renderWithProviders(
+      <Tags tags={[{ id: "alpha", label: "alpha" }]} label="Topics" />,
+    );
     const label = container.querySelector("label") as HTMLElement | null;
     const node = label ?? (container.querySelector("*") as HTMLElement);
     expect(container.textContent).toContain("Topics");

package/src/tamagui.ts

@@ -30,18 +30,26 @@
 // quiet = opacity 0.5). Raw stays reachable as TamaguiSeparator below.
 export {
   Circle,
+  Collapsible,
   Group,
   ListItem,
   ScrollView,
   Spacer,
   Square,
+  Unspaced,
   View,
+  VisuallyHidden,
   XGroup,
   XStack,
   YGroup,
   YStack,
 } from "tamagui";
 
+// MPO-21 G2: LinearGradient is NOT on the main tamagui barrel — it lives
+// on the `tamagui/linear-gradient` subpath.
+export { LinearGradient } from "tamagui/linear-gradient";
+export type { LinearGradientProps } from "tamagui/linear-gradient";
+
 // Text primitives: NONE re-exported raw anymore (MPO-20). The former
 // "typography substrate" registry rows were the single biggest knob hole in
 // the catalog: FontKnobStyles rescues family/leading/tracking on WEB ONLY,

package/src/views/Dashboard.tsx

@@ -379,7 +379,7 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
       {...stackProps}
     >
       <XStack justifyContent="space-between" alignItems="flex-start">
-        <Text {...knobProps.label} color={componentColors.text.muted} flex={1}>
+        <Text {...knobProps.label} color={knobProps.textAccentColor} flex={1}>
           {config.title}
         </Text>
         {config.icon ? (
@@ -408,7 +408,7 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
             label={knobProps.label}
           />
           {config.previousValue !== undefined && (
-            <Text {...knobProps.label} color={componentColors.text.muted}>
+            <Text {...knobProps.label} color={knobProps.textAccentColor}>
               {t("vs {{previousValue}}", { previousValue: formatMetric(config.previousValue) })}
             </Text>
           )}
@@ -689,7 +689,7 @@ export function Dashboard({
           </H3>
         )}
         {description && (
-          <Text {...knobProps.body} {...knobProps.label} color={componentColors.text.muted}>
+          <Text {...knobProps.body} {...knobProps.label} color={knobProps.textAccentColor}>
             {description}
           </Text>
         )}

package/src/views/List.spec.tsx

@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
+import { defaultKnobs, Preset, resolveKnobs } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
 import {
   List,
@@ -91,3 +91,44 @@ describe("List keyboard selection chrome (LC-71)", () => {
     expect(focused!.textContent).toContain("Q3 Vendor Contract");
   });
 });
+
+describe("ListRow ink — textAccent reaches the TEXT NODE (F11 / data-chrome honour)", () => {
+  function titleColor(title: string, accent: "high" | "low" | "medium"): string[] {
+    const { getByText } = renderWithProviders(
+      <Preset overrides={{ textAccent: accent }}>
+        <ListRow title={title} />
+      </Preset>,
+    );
+    return atoms(getByText(title), ["_col-"]);
+  }
+
+  it("changes title colour on a textAccent flip", () => {
+    const high = titleColor("ink-high", "high");
+    const low = titleColor("ink-low", "low");
+    expect(high).not.toHaveLength(0);
+    expect(low).not.toHaveLength(0);
+    expect(high).not.toEqual(low);
+  });
+
+  it("low and medium share the AA legibility floor on the title", () => {
+    const low = titleColor("ink-floor-low", "low");
+    const medium = titleColor("ink-floor-medium", "medium");
+    expect(low).toEqual(medium);
+  });
+
+  it("moves ListRowMeta default ink with textAccent", () => {
+    function metaColor(label: string, accent: "high" | "low"): string[] {
+      const { getByText } = renderWithProviders(
+        <Preset overrides={{ textAccent: accent }}>
+          <ListRowMeta>{label}</ListRowMeta>
+        </Preset>,
+      );
+      return atoms(getByText(label), ["_col-"]);
+    }
+    const high = metaColor("meta-high", "high");
+    const low = metaColor("meta-low", "low");
+    expect(high).not.toHaveLength(0);
+    expect(low).not.toHaveLength(0);
+    expect(high).not.toEqual(low);
+  });
+});

package/src/views/List.tsx

@@ -103,7 +103,7 @@ export function ListRowMeta({
 }) {
   const { knobProps } = useResolvedKnobs();
   const { selected, onAccent } = useListItemState();
-  const resolved = selected && onAccent ? onAccent : (color ?? componentColors.text.muted);
+  const resolved = selected && onAccent ? onAccent : (color ?? knobProps.textAccentColor);
   return (
     <Text
       {...knobProps.label}
@@ -121,8 +121,9 @@ export function ListRowMeta({
 export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
   const { knobProps } = useResolvedKnobs();
   const { selected, onAccent } = useListItemState();
-  const ink = selected && onAccent ? onAccent : componentColors.text.primary;
-  const muted = selected && onAccent ? onAccent : componentColors.text.muted;
+  // data-chrome family: textAccent = honour (F11). Same channel as house Text —
+  // componentColors.text.primary/muted pin $color/$color11 and ignore the knob.
+  const ink = selected && onAccent ? onAccent : knobProps.textAccentColor;
   const iconSize = knobProps.controlIcon.width;
   const leading = React.isValidElement(icon)
     ? React.cloneElement(icon as React.ReactElement<{ size?: number; color?: string }>, {
@@ -139,7 +140,7 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
           flexShrink={0}
           alignItems="center"
           justifyContent="center"
-          {...({ "data-list-slot": "icon", color: muted } as Record<string, unknown>)}
+          {...({ "data-list-slot": "icon", color: ink } as Record<string, unknown>)}
         >
           {leading}
         </View>
@@ -157,7 +158,7 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
         {subtitle != null && subtitle !== false ? (
           <RowText
             {...knobProps.label}
-            color={muted}
+            color={ink}
             opacity={selected ? 0.85 : 1}
             numberOfLines={1}
             userSelect="none"