@multiplatform.one/components 7.28.1 → 7.29.1

package/src/Accordion/index.tsx

@@ -11,6 +11,7 @@ import {
   stackEdgeRadius,
   useAccentTintedSurface,
   useGroupPosition,
+  useLegibleInkOn,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -165,6 +166,20 @@ const AccordionItemCtx = createContext<AccordionItemCtxValue>({
   position: "only",
 });
 
+/** The fill an open trigger paints under its title (the accent tint). */
+const AccordionTriggerFillCtx = createContext<string | undefined>(undefined);
+
+/**
+ * Ink for a title node a consumer renders inside `Accordion.Trigger`:
+ * `preferred` while it clears AA on the open trigger's fill, the fill's
+ * readable anchor where it does not (a muted `$color11` title on the dark
+ * accent tint measured 4.05:1, MPO-448). Bare string titles already get this
+ * from the trigger.
+ */
+export function useAccordionTriggerInk(preferred: string): string {
+  return useLegibleInkOn(useContext(AccordionTriggerFillCtx), preferred);
+}
+
 function useAccordionKnobs() {
   const { compact, size } = useContext(AccordionCtx);
   return useResolvedKnobs({ component: "Accordion", compact, size });
@@ -490,9 +505,11 @@ const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
       : item.open && onSelectedTint
         ? onSelectedTint
         : componentColors.text.primary;
-    const descriptionColor = item.disabled
-      ? disabledState.textKnobProps.color
-      : knobProps.textAccentColor;
+    const openDescriptionInk = useLegibleInkOn(
+      item.open ? selectedTint : undefined,
+      knobProps.textAccentColor,
+    );
+    const descriptionColor = item.disabled ? disabledState.textKnobProps.color : openDescriptionInk;
     const visualPx = tokenPx(knobProps.sizeToken, MIN_PRESS_TARGET, "size");
     const chevronPx = tokenPx(
       knobProps.label.fontSize,
@@ -568,24 +585,26 @@ const AccordionTrigger = forwardRef<TamaguiElement, AccordionTriggerProps>(
               {icon}
             </View>
           ) : null}
-          <YStack flex={1} minWidth={0} alignItems="flex-start">
-            {/* LC-82 TEXT-RIDES-TEXT: wrap ALL bare string/number children
+          <AccordionTriggerFillCtx.Provider value={item.open ? selectedTint : undefined}>
+            <YStack flex={1} minWidth={0} alignItems="flex-start">
+              {/* LC-82 TEXT-RIDES-TEXT: wrap ALL bare string/number children
                 (coalesced runs), not just the singleton case. */}
-            {/* Label weight rides the fontWeight knob (400 / 700). Never 500
+              {/* Label weight rides the fontWeight knob (400 / 700). Never 500
                 or 600 — those are not house label weights (§6.1 / R7 text-node
                 trap). Selected state is fill (LC-71), not a heavier weight. */}
-            {wrapBareTextChildren(children, (label, key) => (
-              <Text key={key} {...knobProps.label} textAlign="left" color={titleColor}>
-                {label}
-              </Text>
-            ))}
-            {description != null &&
-              wrapBareTextChildren(description, (label, key) => (
-                <Text key={key} {...knobProps.label} textAlign="left" color={descriptionColor}>
+              {wrapBareTextChildren(children, (label, key) => (
+                <Text key={key} {...knobProps.label} textAlign="left" color={titleColor}>
                   {label}
                 </Text>
               ))}
-          </YStack>
+              {description != null &&
+                wrapBareTextChildren(description, (label, key) => (
+                  <Text key={key} {...knobProps.label} textAlign="left" color={descriptionColor}>
+                    {label}
+                  </Text>
+                ))}
+            </YStack>
+          </AccordionTriggerFillCtx.Provider>
         </TamaguiAccordion.Trigger>
       </View>
     );

package/src/Heading.stories.tsx

@@ -69,3 +69,16 @@ export const FontWeightFlip: Story = {
     </YStack>
   ),
 };
+
+export const SizedHeadings: Story = {
+  name: "Sized headings",
+  render: () => (
+    <YStack gap="$3" maxWidth={640}>
+      <H2 size="$6">H2 at $6: weight follows fontWeight in every headingFont</H2>
+      <Heading size="$4">Heading at $4</Heading>
+      <H2 size="$6" fontWeight="700">
+        H2 at $6 with an explicit 700
+      </H2>
+    </YStack>
+  ),
+};

package/src/Heading.tsx

@@ -41,39 +41,80 @@ import {
 
 export type { HeadingProps };
 
-/** Subordinate heading voice — mono, weight 400. Consumer props still eject. */
-const SUBORDINATE = { fontFamily: "$mono", fontWeight: "400" } as const;
+/** Subordinate heading voice: mono, weight 400. Consumer props still eject. */
+const SUBORDINATE_FAMILY = "$mono";
+const SUBORDINATE_WEIGHT = "400";
 
-export function Heading(props: HeadingProps) {
+type Weight = HeadingProps["fontWeight"];
+
+/**
+ * The heading fragment without its weight, and the weight a heading writes
+ * as its last prop, so neither a `size` nor a `fontFamily` variant can paint
+ * the font ramp's weight over it (MPO-446, ./Text.tsx WEIGHT RIDES LAST).
+ * That ramp is why a sized heading swapped to `headingFont: serif` fell from
+ * Inter's 600 to the category font's 400.
+ */
+function useHeadingVoice(fontWeight: Weight) {
   const { knobProps } = useResolvedKnobs();
-  return <RawHeading {...knobProps.heading} {...props} />;
+  const { fontWeight: knobWeight, ...heading } = knobProps.heading;
+  return {
+    heading,
+    pageTitle: knobProps.pageTitle,
+    weight: fontWeight ?? (knobWeight as Weight),
+  };
 }
 
-export function H1(props: HeadingProps) {
-  const { knobProps } = useResolvedKnobs();
-  // pageTitle first: H1's size variant paints `_fow-f-weight-8` (the $8
-  // heading-weight token). heading.fontWeight must land AFTER that so
-  // regular/bold reach the TEXT NODE instead of being swallowed.
-  return <RawH1 {...knobProps.pageTitle} {...knobProps.heading} {...props} />;
+export function Heading({ fontWeight, ...props }: HeadingProps) {
+  const { heading, weight } = useHeadingVoice(fontWeight);
+  return <RawHeading {...heading} {...props} fontWeight={weight} />;
 }
 
-export function H2(props: HeadingProps) {
-  const { knobProps } = useResolvedKnobs();
-  return <RawH2 {...knobProps.heading} {...props} />;
+export function H1({ fontWeight, ...props }: HeadingProps) {
+  const { heading, pageTitle, weight } = useHeadingVoice(fontWeight);
+  return <RawH1 {...pageTitle} {...heading} {...props} fontWeight={weight} />;
+}
+
+export function H2({ fontWeight, ...props }: HeadingProps) {
+  const { heading, weight } = useHeadingVoice(fontWeight);
+  return <RawH2 {...heading} {...props} fontWeight={weight} />;
 }
 
-export function H3(props: HeadingProps) {
-  return <RawH3 {...SUBORDINATE} {...props} />;
+export function H3({ fontWeight, ...props }: HeadingProps) {
+  return (
+    <RawH3
+      fontFamily={SUBORDINATE_FAMILY}
+      {...props}
+      fontWeight={fontWeight ?? SUBORDINATE_WEIGHT}
+    />
+  );
 }
 
-export function H4(props: HeadingProps) {
-  return <RawH4 {...SUBORDINATE} {...props} />;
+export function H4({ fontWeight, ...props }: HeadingProps) {
+  return (
+    <RawH4
+      fontFamily={SUBORDINATE_FAMILY}
+      {...props}
+      fontWeight={fontWeight ?? SUBORDINATE_WEIGHT}
+    />
+  );
 }
 
-export function H5(props: HeadingProps) {
-  return <RawH5 {...SUBORDINATE} {...props} />;
+export function H5({ fontWeight, ...props }: HeadingProps) {
+  return (
+    <RawH5
+      fontFamily={SUBORDINATE_FAMILY}
+      {...props}
+      fontWeight={fontWeight ?? SUBORDINATE_WEIGHT}
+    />
+  );
 }
 
-export function H6(props: HeadingProps) {
-  return <RawH6 {...SUBORDINATE} {...props} />;
+export function H6({ fontWeight, ...props }: HeadingProps) {
+  return (
+    <RawH6
+      fontFamily={SUBORDINATE_FAMILY}
+      {...props}
+      fontWeight={fontWeight ?? SUBORDINATE_WEIGHT}
+    />
+  );
 }

package/src/ProgressSteps/ProgressSteps.spec.tsx

@@ -52,7 +52,7 @@ describe("ProgressSteps", () => {
     expect(current.className).toContain("_bg-accentBackg");
   });
 
-  it("walks the current fill off the dark mid-solid so the numeral can clear 4.5", () => {
+  it("keeps the dark current fill on $accentBackground now the build holds it to 4.5 (MPO-448)", () => {
     const { container } = render(
       <TamaguiProvider config={houseConfig} defaultTheme="dark" disableInjectCSS>
         <ProgressSteps steps={steps} current={1} />
@@ -60,8 +60,7 @@ describe("ProgressSteps", () => {
     );
     const current = container.querySelector('[aria-current="step"]') as HTMLElement;
     expect(current).toBeTruthy();
-    expect(current.className).toMatch(/_bg-accent/);
-    expect(current.className).not.toContain("_bg-accentBackg");
+    expect(current.className).toContain("_bg-accentBackg");
   });
 
   it("calls onStepChange when jumping back to a completed step", () => {

package/src/ProgressSteps/index.tsx

@@ -158,10 +158,9 @@ export function ProgressSteps({
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbFocusIndex, setKbFocusIndex] = useState<number | null>(null);
   // LC-05: current marker rides an accent solid; completed/error fills pick
-  // paper/ink from luminance rather than an assumed white glyph. The stock
-  // dark `$accentBackground` tops out at 4.02:1 against either scheme
-  // anchor, under the in-repo 4.5 text floor, so the current fill walks to
-  // the nearest accent solid that can carry the numeral.
+  // paper/ink from luminance rather than an assumed white glyph. An
+  // `$accentBackground` under the 4.5 text floor against both scheme anchors
+  // walks to the nearest accent solid that can carry the numeral.
   const currentFill = useAaSolidFill(componentColors.indicator.selected);
   const onSelected = useReadableTextOn(currentFill);
   const onCompleted = useReadableTextOn(componentColors.indicator.completed);

package/src/ScrollView/ScrollView.native.spec.tsx

@@ -4,7 +4,7 @@
  * ../../tests/nativeTamagui.ts); vitest's usual web build keeps onScroll and
  * would pass with or without the fix.
  */
-import { readdirSync, readFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { join, relative } from "node:path";
 import { act, createElement, createRef } from "react";
 import { createRoot, type Root } from "react-dom/client";
@@ -78,6 +78,35 @@ describe("tamagui native ScrollView (upstream control)", () => {
     expect(host.onContentSizeChange).toBe(props.onContentSizeChange);
     expect(host.onScroll).toBeUndefined();
   });
+
+  it("leaves keyboardShouldPersistTaps unset, so RN falls back to never", () => {
+    const host = render(createElement(runtime.RawScrollView as AnyScrollView, { testID: "probe" }));
+    expect(host.keyboardShouldPersistTaps).toBeUndefined();
+  });
+});
+
+describe("components ScrollView keyboard taps on native (MPO-457)", () => {
+  it("hands keyboardShouldPersistTaps=handled to the RN ScrollView by default", () => {
+    const host = render(createElement(ScrollView as unknown as AnyScrollView, { testID: "probe" }));
+    expect(host.keyboardShouldPersistTaps).toBe("handled");
+  });
+
+  it("keeps the default through a styled() extension", () => {
+    const Extended = styled(ScrollView, { name: "Extended" });
+    const host = render(createElement(Extended as unknown as AnyScrollView, { testID: "probe" }));
+    expect(host.keyboardShouldPersistTaps).toBe("handled");
+  });
+
+  it("lets a consumer value win", () => {
+    for (const value of ["never", "always"]) {
+      const host = render(
+        createElement(ScrollView as unknown as AnyScrollView, { keyboardShouldPersistTaps: value }),
+      );
+      expect(host.keyboardShouldPersistTaps).toBe(value);
+      act(() => root.unmount());
+      container.remove();
+    }
+  });
 });
 
 describe("components ScrollView on native", () => {
@@ -137,6 +166,35 @@ describe("catalog onScroll consumers", () => {
   });
 });
 
+describe("catalog scroll owners (MPO-457)", () => {
+  it("take the components ScrollView, or declare keyboardShouldPersistTaps", () => {
+    const publicDir = join(import.meta.dirname, "../../..");
+    const house = join(import.meta.dirname, "index.native.tsx");
+    const raw: Array<[binding: string, from: string]> = [
+      ["ScrollView", "tamagui"],
+      ["ScrollView", "react-native"],
+      ["FlashList", "@shopify/flash-list"],
+    ];
+    const offenders = readdirSync(publicDir, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .flatMap((entry) => {
+        const src = join(publicDir, entry.name, "src");
+        return existsSync(src) ? sourceFiles(src) : [];
+      })
+      .filter((file) => file !== house)
+      .flatMap((file) => {
+        const code = readFileSync(file, "utf8");
+        return raw
+          .flatMap(([name, from]) => importedAs(code, name, from))
+          .flatMap((local) => [local, ...aliasesOf(code, local)])
+          .flatMap((local) => openingTags(code, local))
+          .filter((tag) => !/\bkeyboardShouldPersistTaps\b/.test(tag.text))
+          .map((tag) => `${relative(publicDir, file)}:${tag.line}`);
+      });
+    expect(offenders).toEqual([]);
+  });
+});
+
 function sourceFiles(dir: string): string[] {
   const out: string[] = [];
   for (const entry of readdirSync(dir, { withFileTypes: true })) {
@@ -155,3 +213,41 @@ function importsScrollView(code: string, from: string): boolean {
     match[1]!.split(",").some((part) => /^ScrollView\b/.test(part.trim())),
   );
 }
+
+/** Local names a value import of `name` from `from` binds. */
+function importedAs(code: string, name: string, from: string): string[] {
+  const re = new RegExp(`import\\s+\\{([^}]*)\\}\\s+from\\s+["']${from}["']`, "g");
+  const alias = new RegExp(`^${name}(?:\\s+as\\s+(\\w+))?$`);
+  return [...code.matchAll(re)].flatMap((match) =>
+    match[1]!.split(",").flatMap((part) => {
+      const found = part.trim().match(alias);
+      return found ? [found[1] ?? name] : [];
+    }),
+  );
+}
+
+/** Consts that pick `local`, e.g. `const Scroller = isWeb ? ScrollView : RNScrollView`. */
+function aliasesOf(code: string, local: string): string[] {
+  const re = new RegExp(`const\\s+(\\w+)\\s*=[^;\\n]*\\b${local}\\b`, "g");
+  return [...code.matchAll(re)].map((match) => match[1]!);
+}
+
+/** Every JSX opening tag of `name`, props included, with its line. */
+function openingTags(code: string, name: string): Array<{ text: string; line: number }> {
+  const out: Array<{ text: string; line: number }> = [];
+  for (const match of code.matchAll(new RegExp(`<${name}(?![\\w.])`, "g"))) {
+    let depth = 0;
+    let end = match.index + match[0].length;
+    for (; end < code.length; end++) {
+      const char = code[end];
+      if (char === "{") depth++;
+      else if (char === "}") depth--;
+      else if (char === ">" && depth === 0) break;
+    }
+    out.push({
+      text: code.slice(match.index, end + 1),
+      line: code.slice(0, match.index).split("\n").length,
+    });
+  }
+  return out;
+}

package/src/ScrollView/index.native.tsx

@@ -27,6 +27,10 @@ const ScrollFrame = styled(
   {
     name: "ScrollView",
     scrollEnabled: true,
+    // MPO-457: at RN's "never" a ScrollView claims, in the capture phase, the
+    // first tap on any descendant while the keyboard is up, and a native
+    // sheet's rows are React descendants of the screen that opened it.
+    keyboardShouldPersistTaps: "handled",
     variants: {
       fullscreen: {
         true: { position: "absolute", inset: 0 },

package/src/SortableList/SortableHandle.tsx

@@ -27,7 +27,7 @@ export interface SortableHandleProps {
 }
 
 /**
- * Leading grab handle: nested well, 16px 6-dot grip, opacity .45 → 1.
+ * Leading grab handle: nested well, 16px 6-dot grip, opacity .6 → 1.
  * Focusable (W1-focus-ring): 2px ring, offset 0. Keyboard path can also
  * live on the row — this control is tabIndex 0 so tables have a target
  * that is not an in-cell editor.
@@ -58,7 +58,7 @@ export function SortableHandle({
       minHeight={well}
       alignItems="center"
       justifyContent="center"
-      opacity={isDragging ? 1 : 0.45}
+      opacity={isDragging ? 1 : 0.6}
       hoverStyle={{ opacity: 1 }}
       {...({
         tag: "button",

package/src/Tabs/Tabs.lifecycle.spec.tsx

@@ -18,7 +18,9 @@ vi.mock("tamagui", async (original) => {
 const observers: ControlledResizeObserver[] = [];
 class ControlledResizeObserver {
   elements = new Set<Element>();
-  constructor(readonly callback: ResizeObserverCallback) {
+  readonly callback: ResizeObserverCallback;
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
     observers.push(this);
   }
   observe(element: Element) {

package/src/Text.tsx

@@ -18,6 +18,14 @@
  * — the text node itself carries fontFamily/fontWeight/color on every
  * platform (the MPO-44/48 lesson: the frame is not the text node).
  *
+ * WEIGHT RIDES LAST (MPO-446). `size` and `fontFamily` are variants on the
+ * raw primitive, and tamagui's getFontSized writes the font ramp's weight
+ * (`var(--f-weight-N)`) at the position that key holds in the props object.
+ * A knob weight spread before a consumer `size` lost to it, and a consumer
+ * `fontWeight` sat at the knob's position too, since a spread key keeps its
+ * first slot. So the weight is split off the fragment and written as the
+ * final prop: the knob's, or the consumer's when one is passed.
+ *
  * Knob channels wired here:
  *  - bodyFont   → knobProps.body.fontFamily  (every platform, not just web)
  *  - fontWeight → knobProps.body.fontWeight  (regular 400 / bold 700 —
@@ -55,32 +63,36 @@ export type { AnchorProps, ParagraphProps, SizableTextProps, TextProps };
 /** Measured $4 label ramp — Inter 14/25, weight from the fontWeight knob. */
 const LABEL_RAMP = { fontSize: 14, lineHeight: 25 } as const;
 
-export function Text(props: TextProps) {
+type Weight = TextProps["fontWeight"];
+
+/** The body fragment without its weight, and the weight a voice writes last. */
+function useBodyVoice(fontWeight: Weight) {
   const { knobProps } = useResolvedKnobs();
-  return (
-    <RawText {...LABEL_RAMP} {...knobProps.body} color={knobProps.textAccentColor} {...props} />
-  );
+  const { fontWeight: knobWeight, ...body } = knobProps.body;
+  return {
+    body,
+    color: knobProps.textAccentColor,
+    weight: fontWeight ?? (knobWeight as Weight),
+  };
 }
 
-export function SizableText(props: SizableTextProps) {
-  const { knobProps } = useResolvedKnobs();
-  return <RawSizableText {...knobProps.body} color={knobProps.textAccentColor} {...props} />;
+export function Text({ fontWeight, ...props }: TextProps) {
+  const { body, color, weight } = useBodyVoice(fontWeight);
+  return <RawText {...LABEL_RAMP} {...body} color={color} {...props} fontWeight={weight} />;
 }
 
-export function Paragraph(props: ParagraphProps) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <RawParagraph
-      {...LABEL_RAMP}
-      {...knobProps.body}
-      color={knobProps.textAccentColor}
-      {...props}
-    />
-  );
+export function SizableText({ fontWeight, ...props }: SizableTextProps) {
+  const { body, color, weight } = useBodyVoice(fontWeight);
+  return <RawSizableText {...body} color={color} {...props} fontWeight={weight} />;
 }
 
-export function Anchor(props: AnchorProps) {
-  const { knobProps } = useResolvedKnobs();
+export function Paragraph({ fontWeight, ...props }: ParagraphProps) {
+  const { body, color, weight } = useBodyVoice(fontWeight);
+  return <RawParagraph {...LABEL_RAMP} {...body} color={color} {...props} fontWeight={weight} />;
+}
+
+export function Anchor({ fontWeight, ...props }: AnchorProps) {
+  const { body, weight } = useBodyVoice(fontWeight);
   const linkInk = useAccentOnSurface();
-  return <RawAnchor {...knobProps.body} color={linkInk} {...props} />;
+  return <RawAnchor {...body} color={linkInk} {...props} fontWeight={weight} />;
 }

package/src/Toast/index.tsx

@@ -364,9 +364,10 @@ function useToastVisuals(intent: ToastIntent, compact?: boolean) {
   const isAccent = intent === "accent";
   // Semantic hues: step 11 — lowest AA-safe step of the hue on the step-1/2
   // surface (resolves to a CSS var on web, concrete value on native).
-  // Accent action ink: $accentColor is the on-fill foreground (~1.9:1 on the
-  // dark toast surface). useAccentOnSurface picks the most chromatic accent
-  // step that still clears AA 4.5:1 on color1/color2 (R7 / MPO-48).
+  // Accent glyphs ride $accentColor, which the build holds to 4.5:1 on the
+  // page surfaces in both schemes (MPO-449). The action label takes
+  // useAccentOnSurface: the most chromatic accent step that still clears AA
+  // 4.5:1 on color1/color2 (R7 / MPO-48).
   const iconColor = (isAccent ? theme.accentColor?.get() : theme.color11?.get()) as
     | string
     | undefined;

package/src/charts/ChartDataView.tsx

@@ -2,7 +2,8 @@ import { Button } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { createContext, useContext, useId, useState, type ReactNode } from "react";
-import { Dialog, Paragraph, ScrollView, XStack, YStack } from "tamagui";
+import { Dialog, Paragraph, XStack, YStack } from "tamagui";
+import { ScrollView } from "../ScrollView";
 import { sectionHeading } from "../componentColors";
 import { useTranslation } from "../shared/i18n";
 import { DialogContent, DialogOverlay } from "../surfaces";

package/src/code/CodeBlock/index.tsx

@@ -19,7 +19,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "../../shared/i18n";
 import type { TamaguiElement } from "tamagui";
-import { ScrollView } from "tamagui";
+import { ScrollView } from "../../ScrollView";
 import { Button, Input, zIndex } from "@multiplatform.one/forms";
 import { Spacer, XStack, YStack } from "tamagui";
 import { settleMs } from "../../AnimateHeight";

package/src/feedback/ConfirmDialog.spec.tsx

@@ -31,7 +31,7 @@ function alertdialog(): Element | null {
 }
 
 describe("ConfirmDialog", () => {
-  it("keeps a disabled destructive label on Button's readable text tier", () => {
+  it("inks a disabled destructive label on the error hue's $color12 text step (LC-40)", () => {
     renderWithProviders(
       <ConfirmDialog
         open
@@ -47,7 +47,7 @@ describe("ConfirmDialog", () => {
       (node) => node.textContent === "Delete",
     );
     expect(label).toBeTruthy();
-    expect(label?.className).toContain("_col-color11");
+    expect(label?.className).toContain("_col-color12");
     expect(label?.className).toContain("_fow-400");
   });
 

package/src/icons/phosphorTokenColor.spec.tsx

@@ -0,0 +1,86 @@
+/**
+ * MPO-450. A phosphor glyph handed a Tamagui token paints that token's colour
+ * on web. Raw @phosphor-icons/react writes `color` straight into `<svg fill>`;
+ * "$color9" is not a paint, the browser drops it and the glyph falls back to
+ * black. createVitestConfig carries the same IconBase resolution every web
+ * bundle gets (phosphorTokenColorPlugin), so these renders go through it.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { FolderIcon, HeartIcon } from "@phosphor-icons/react";
+import { Theme, useTheme } from "tamagui";
+import { describe, expect, it } from "vitest";
+
+function ThemeValue({ name }: { name: string }) {
+  const theme = useTheme() as unknown as Record<string, { val?: unknown } | undefined>;
+  return <span data-theme-value={name} data-val={String(theme[name]?.val ?? "")} />;
+}
+
+function fillOf(container: HTMLElement, testId: string) {
+  return container.querySelector(`[data-testid="${testId}"]`)?.getAttribute("fill") ?? "";
+}
+
+function valueOf(container: HTMLElement, name: string) {
+  return container.querySelector(`[data-theme-value="${name}"]`)?.getAttribute("data-val") ?? "";
+}
+
+describe("phosphor glyph token colour on web (MPO-450)", () => {
+  it("paints $color9 with the theme's resolved colour, not the token string", () => {
+    const { container } = renderWithProviders(
+      <>
+        <FolderIcon data-testid="glyph" color="$color9" />
+        <ThemeValue name="color9" />
+      </>,
+    );
+    const fill = fillOf(container, "glyph");
+    expect(valueOf(container, "color9")).not.toBe("");
+    expect(fill).toBe(valueOf(container, "color9"));
+    expect(fill.startsWith("$")).toBe(false);
+  });
+
+  it("resolves against the theme in scope, so dark paints the dark step", () => {
+    const { container } = renderWithProviders(
+      <>
+        <HeartIcon data-testid="light" color="$color11" />
+        <Theme name="dark">
+          <HeartIcon data-testid="dark" color="$color11" />
+          <ThemeValue name="color11" />
+        </Theme>
+      </>,
+    );
+    const dark = fillOf(container, "dark");
+    expect(dark).toBe(valueOf(container, "color11"));
+    expect(dark).not.toBe(fillOf(container, "light"));
+  });
+
+  it("resolves a palette token such as the liked heart's $red11", () => {
+    const { container } = renderWithProviders(
+      <>
+        <HeartIcon data-testid="glyph" weight="fill" color="$red11" />
+        <ThemeValue name="red11" />
+      </>,
+    );
+    expect(valueOf(container, "red11")).not.toBe("");
+    expect(fillOf(container, "glyph")).toBe(valueOf(container, "red11"));
+  });
+
+  it("leaves a literal colour alone", () => {
+    const { container } = renderWithProviders(<HeartIcon data-testid="glyph" color="#123456" />);
+    expect(fillOf(container, "glyph")).toBe("#123456");
+  });
+
+  it("inherits currentColor when no colour is given", () => {
+    const { container } = renderWithProviders(<HeartIcon data-testid="glyph" />);
+    expect(fillOf(container, "glyph")).toBe("currentColor");
+  });
+
+  it("takes the theme's ink, never black, for a token the theme does not carry", () => {
+    const { container } = renderWithProviders(
+      <>
+        <HeartIcon data-testid="glyph" color="$notAThemeKey" />
+        <ThemeValue name="color" />
+      </>,
+    );
+    expect(valueOf(container, "color")).not.toBe("");
+    expect(fillOf(container, "glyph")).toBe(valueOf(container, "color"));
+  });
+});

package/src/index.ts

@@ -51,7 +51,7 @@ export type { WizardFormLike, WizardProps, WizardStatus, WizardStep } from "./Wi
 export { unwrapText } from "./utils/unwrapText";
 export { Pagination, getPaginationItems } from "./Pagination";
 export type { PaginationProps, PaginationItem } from "./Pagination";
-export { Accordion } from "./Accordion";
+export { Accordion, useAccordionTriggerInk } from "./Accordion";
 export type {
   AccordionProps,
   AccordionVariant,

package/src/layouts/EmptyState.spec.tsx

@@ -41,6 +41,23 @@ describe("EmptyState", () => {
     expect(container.querySelector("h2")?.textContent).toBe("Create your first record");
     expect(container.textContent).toContain("Records you add will show up here.");
   });
+
+  // MPO-473: a refusal's server reason arrives as one message per line. One
+  // web paragraph collapsed the break, so the lines read as a single sentence.
+  it("renders each line of the description as its own paragraph", () => {
+    const { container } = renderWithProviders(
+      <EmptyState
+        title="You can't create Pokemon"
+        description={
+          "You are not permitted to access this resource. Login to access\nFunction frappe.desk.form.load.getdoctype is not whitelisted.\n"
+        }
+      />,
+    );
+    expect(Array.from(container.querySelectorAll("p")).map((node) => node.textContent)).toEqual([
+      "You are not permitted to access this resource. Login to access",
+      "Function frappe.desk.form.load.getdoctype is not whitelisted.",
+    ]);
+  });
 });
 
 /**