@multiplatform.one/components 7.7.6 → 7.10.0

package/src/CopyField/CopyField.spec.tsx

@@ -3,6 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { getToasts, resetToasts } from "../Toast/store";
 import { getFeedback, resetFeedback } from "../feedback/store";
+import { NotifyHost } from "../feedback";
 import { CopyField } from "./index";
 
 function copyOf(container: HTMLElement) {
@@ -35,13 +36,16 @@ describe("CopyField", () => {
     const copy = copyOf(result.container);
     if (!copy) throw new Error("copy not found");
     expect(copy.getAttribute("tabindex")).toBe("0");
+    expect(copy.getAttribute("aria-label")).toBe("Copy to clipboard");
     expect(copy.className).toMatch(/mp-chip-dismiss/);
     expect(copy.querySelector(".mp-chip-dismiss-ring")).not.toBeNull();
   });
 
   it("success routes through notify() as a one-line past-tense toast", async () => {
     const result = renderWithProviders(
-      <CopyField label="API token" value="mpo_live_4f2a9c81e0b3" />,
+      <NotifyHost>
+        <CopyField label="API token" value="mpo_live_4f2a9c81e0b3" />
+      </NotifyHost>,
     );
     const copy = copyOf(result.container);
     if (!copy) throw new Error("copy not found");
@@ -54,6 +58,11 @@ describe("CopyField", () => {
     expect(toast?.title).not.toMatch(/success/i);
     expect(getFeedback()).toHaveLength(0);
     expect(copyOf(result.container)?.querySelector(".mp-chip-dismiss-ring")).not.toBeNull();
+    expect(await result.findByText("Copied to clipboard.")).toBeInTheDocument();
+    await vi.waitFor(() => {
+      const live = document.querySelector("[aria-live]:not([aria-live='off'])");
+      expect(live?.textContent ?? "").toMatch(/Copied to clipboard/);
+    });
   });
 
   it("failure is a field-scoped inline alert and never a toast", async () => {
@@ -72,5 +81,61 @@ describe("CopyField", () => {
     expect(alert?.scope).toBe("field");
     expect(alert?.body).toBe("Copy failed.");
     expect(alert?.body).not.toMatch(/success/i);
+    expect(await result.findByText("Copy failed.")).toBeInTheDocument();
+  });
+
+  it("shows a failed copy only beside its own field and clears it after success", async () => {
+    const result = renderWithProviders(
+      <>
+        <div data-testid="first-copy">
+          <CopyField label="First token" value="first" />
+        </div>
+        <div data-testid="second-copy">
+          <CopyField label="Second token" value="second" />
+        </div>
+      </>,
+    );
+    const first = result.getByTestId("first-copy");
+    const second = result.getByTestId("second-copy");
+    writeText.mockRejectedValueOnce(new Error("Denied"));
+    fireEvent.click(copyOf(first)!);
+    await vi.waitFor(() => expect(first.textContent).toContain("Copy failed."));
+    expect(second.textContent).not.toContain("Copy failed.");
+    writeText.mockRejectedValueOnce(new Error("Denied"));
+    fireEvent.click(copyOf(second)!);
+    await vi.waitFor(() => expect(second.textContent).toContain("Copy failed."));
+    fireEvent.click(copyOf(first)!);
+    await vi.waitFor(() => expect(first.textContent).not.toContain("Copy failed."));
+    expect(second.textContent).toContain("Copy failed.");
+    expect(getToasts()).toHaveLength(1);
+  });
+
+  it("replaces repeated failures and removes its feedback on unmount", async () => {
+    writeText.mockRejectedValue(new Error("Denied"));
+    const result = renderWithProviders(<CopyField label="Token" value="first" />);
+    fireEvent.click(copyOf(result.container)!);
+    await vi.waitFor(() => expect(getFeedback()).toHaveLength(1));
+    fireEvent.click(copyOf(result.container)!);
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledTimes(2));
+    expect(result.getAllByText("Copy failed.")).toHaveLength(1);
+    expect(getFeedback()).toHaveLength(1);
+    result.unmount();
+    expect(getFeedback()).toHaveLength(0);
+  });
+
+  it("ignores a clipboard result after its field unmounts", async () => {
+    let rejectCopy!: (reason: Error) => void;
+    writeText.mockReturnValue(
+      new Promise((_, reject) => {
+        rejectCopy = reject;
+      }),
+    );
+    const result = renderWithProviders(<CopyField label="Token" value="first" />);
+    fireEvent.click(copyOf(result.container)!);
+    result.unmount();
+    rejectCopy(new Error("Denied"));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(getFeedback()).toHaveLength(0);
+    expect(getToasts()).toHaveLength(0);
   });
 });

package/src/CopyField/index.tsx

@@ -12,15 +12,16 @@
 import { Input, type InputProps } from "@multiplatform.one/forms";
 import { YStack } from "tamagui";
 import { NotifyRegion } from "../feedback/NotifyHost";
-import { reportCopy } from "../feedback/copy";
+import { useCopyFeedback } from "../feedback/copy";
 
 export type CopyFieldProps = Omit<InputProps, "copy" | "onCopyResult" | "secureTextEntry">;
 
 export function CopyField(props: CopyFieldProps) {
+  const { region, report } = useCopyFeedback();
   return (
     <YStack width="100%">
-      <Input {...props} readOnly copy onCopyResult={reportCopy} />
-      <NotifyRegion scope="field" compact />
+      <Input {...props} readOnly copy onCopyResult={report} />
+      <NotifyRegion scope="field" region={region} compact />
     </YStack>
   );
 }

package/src/DropdownMenu/DropdownMenu.spec.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { __resetDevWarnSeen } from "@multiplatform.one/theme";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -509,3 +510,113 @@ describe("DropdownMenu FloatingPanel cover contract", () => {
     expect(edit.getAttribute("data-mp-ring-offset")).toBe("0");
   });
 });
+
+describe("DropdownMenu.Content onCloseAutoFocus (MPO-29)", () => {
+  for (const preventRestore of [false, true]) {
+    it(`${preventRestore ? "suppresses" : "performs"} actual delayed trigger restoration on Escape`, async () => {
+      const onCloseAutoFocus = vi.fn((event) => {
+        if (preventRestore) event.preventDefault();
+      });
+      const result = renderWithProviders(
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <Button>Heading</Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content onCloseAutoFocus={onCloseAutoFocus}>
+            <DropdownMenu.Item>H1</DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>,
+      );
+      const trigger = result.getByText("Heading").closest("button")!;
+      trigger.focus();
+      fireEvent.click(trigger);
+      await waitFor(() => expect(document.querySelector('[role="menuitem"]')).toBeTruthy());
+      const item = document.querySelector('[role="menuitem"]') as HTMLElement;
+      item.focus();
+      fireEvent.keyDown(item, { key: "Escape" });
+      await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeFalsy());
+      await act(() => new Promise((resolve) => setTimeout(resolve, 400)));
+      expect(onCloseAutoFocus).toHaveBeenCalledTimes(1);
+      if (preventRestore) expect(document.activeElement).not.toBe(trigger);
+      else expect(document.activeElement).toBe(trigger);
+    });
+  }
+
+  it("fires once when an item select closes the menu", async () => {
+    const onCloseAutoFocus = vi.fn();
+    renderWithProviders(
+      <DropdownMenu defaultOpen>
+        <DropdownMenu.Trigger asChild>
+          <Button>Actions</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content onCloseAutoFocus={onCloseAutoFocus}>
+          <DropdownMenu.Item>Edit</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitem"]') as HTMLElement);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+    expect(onCloseAutoFocus).toHaveBeenCalledTimes(1);
+    const event = onCloseAutoFocus.mock.calls[0][0] as {
+      preventDefault: () => void;
+      defaultPrevented: boolean;
+    };
+    expect(event.defaultPrevented).toBe(false);
+    event.preventDefault();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("fires once when a closeOnSelect=false item closes via the parent open state", async () => {
+    // HeadingPicker / ListPicker / MoreDropdown: they keep closeOnSelect
+    // false so the item does not ctx.close(), then they setOpen(false)
+    // themselves after executeCommand. That is a controlled close, not
+    // ctx.close() and not FloatingPanel dismissing on its own.
+    const onCloseAutoFocus = vi.fn();
+    function Harness() {
+      const [open, setOpen] = useState(true);
+      return (
+        <DropdownMenu open={open} onOpenChange={setOpen}>
+          <DropdownMenu.Trigger asChild>
+            <Button>Heading</Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content onCloseAutoFocus={onCloseAutoFocus}>
+            <DropdownMenu.Item closeOnSelect={false} onSelect={() => setOpen(false)}>
+              H1
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      );
+    }
+    renderWithProviders(<Harness />);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    fireEvent.click(document.querySelector('[role="menuitem"]') as HTMLElement);
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeFalsy();
+    });
+    expect(onCloseAutoFocus).toHaveBeenCalledTimes(1);
+  });
+
+  it("puts Content aria-label on the role=menu node", async () => {
+    renderWithProviders(
+      <DropdownMenu defaultOpen>
+        <DropdownMenu.Trigger asChild>
+          <Button>Status</Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content aria-label="Status">
+          <DropdownMenu.Item>Open</DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>,
+    );
+    await waitFor(() => {
+      expect(document.querySelector('[role="menu"]')).toBeTruthy();
+    });
+    expect(document.querySelector('[role="menu"]')?.getAttribute("aria-label")).toBe("Status");
+  });
+});

package/src/DropdownMenu/DropdownMenu.stories.tsx

@@ -220,9 +220,7 @@ export const Controlled: Story = {
           >
             <Button>Controlled menu</Button>
           </DropdownMenu>
-          <Button variant="outlined" onPress={() => setOpen(!open)}>
-            Toggle from outside
-          </Button>
+          <Button onPress={() => setOpen(!open)}>Toggle from outside</Button>
         </XStack>
         <Text color="$color11" fontSize="$2">
           {last ? `Last action: ${last}` : "No action selected yet"}

package/src/DropdownMenu/index.tsx

@@ -23,6 +23,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -290,10 +291,38 @@ function DropdownMenuRoot({
   });
   const pendingFocusRef = useRef<"first" | "last">("first");
 
+  // Content's onCloseAutoFocus, read off the Content child below during the
+  // same render. A ref because the child scan happens after these callbacks
+  // are defined, and both close paths have to reach the same handler.
+  const closeAutoFocusRef = useRef<DropdownMenuContentProps["onCloseAutoFocus"]>(undefined);
+  // Notify on the actual state transition, including parent-controlled closes.
+  // A rejected controlled close request must not move focus out of an open menu.
+  const wasOpenRef = useRef(false);
+  const skipReturnFocusRef = useRef(false);
+
+  const fireCloseAutoFocus = useCallback(() => {
+    const handler = closeAutoFocusRef.current;
+    if (!handler) return;
+    handler({
+      preventDefault: () => {
+        skipReturnFocusRef.current = true;
+      },
+      get defaultPrevented() {
+        return skipReturnFocusRef.current;
+      },
+    });
+  }, []);
+
   const close = useCallback(() => {
     setOpen(false);
   }, [setOpen]);
 
+  useLayoutEffect(() => {
+    if (wasOpenRef.current && !open) fireCloseAutoFocus();
+    wasOpenRef.current = !!open;
+    if (open) skipReturnFocusRef.current = false;
+  }, [open, fireCloseAutoFocus]);
+
   const ctx = useMemo<DropdownMenuContextValue>(
     () => ({ open, setOpen, close, closeOnSelect, pendingFocusRef }),
     [open, setOpen, close, closeOnSelect],
@@ -311,6 +340,8 @@ function DropdownMenuRoot({
   let body: ReactNode = null;
   let contentMaxHeight = maxHeight;
   let contentMaxWidth: number | undefined;
+  let contentAriaLabel: string | undefined;
+  closeAutoFocusRef.current = undefined;
   if (items) {
     body = renderEntries(items);
   } else if (Array.isArray(children) || isValidElement(children)) {
@@ -326,14 +357,13 @@ function DropdownMenuRoot({
       if (type === DropdownMenuTrigger) {
         triggerParts.push((child.props as { children?: ReactNode }).children);
       } else if (type === DropdownMenuContent) {
-        const contentProps = child.props as {
-          children?: ReactNode;
-          maxHeight?: number;
-          maxWidth?: number;
-        };
+        const contentProps = child.props as DropdownMenuContentProps;
         contentParts.push(contentProps.children);
         if (contentProps.maxHeight != null) contentMaxHeight = contentProps.maxHeight;
         if (contentProps.maxWidth != null) contentMaxWidth = contentProps.maxWidth;
+        if (contentProps.onCloseAutoFocus)
+          closeAutoFocusRef.current = contentProps.onCloseAutoFocus;
+        if (contentProps["aria-label"] != null) contentAriaLabel = contentProps["aria-label"];
       } else {
         triggerParts.push(child);
       }
@@ -347,12 +377,17 @@ function DropdownMenuRoot({
       <FloatingPanel
         open={open}
         onOpenChange={setOpen}
+        skipReturnFocusRef={skipReturnFocusRef}
         trigger={decorateTrigger(trigger, open, onArrow)}
         contentPadding="none"
         {...coverContract}
         {...(placement ? { placement } : {})}
       >
-        <DropdownMenuList maxHeight={contentMaxHeight} maxWidth={contentMaxWidth}>
+        <DropdownMenuList
+          maxHeight={contentMaxHeight}
+          maxWidth={contentMaxWidth}
+          aria-label={contentAriaLabel}
+        >
           {body}
         </DropdownMenuList>
       </FloatingPanel>
@@ -387,6 +422,29 @@ export interface DropdownMenuContentProps {
    * owns this now — kept so existing callers type-check.
    */
   minWidth?: number;
+  /**
+   * Fired as the menu closes, before focus would return to the trigger.
+   * Call `preventDefault()` to keep the trigger from taking focus back —
+   * the rich-text toolbars do exactly that and hand focus to the editor
+   * instead, so the user can keep typing after picking a heading or a list.
+   */
+  onCloseAutoFocus?: (event: DropdownMenuCloseAutoFocusEvent) => void;
+  /**
+   * Accessible name for the menu. Lands on the `role="menu"` element, which
+   * is the node a screen reader announces — a facet menu whose trigger is an
+   * icon has no other name. DataTableFacetMenu passes its column label.
+   */
+  "aria-label"?: string;
+}
+
+/**
+ * The minimal preventable event `onCloseAutoFocus` receives. Deliberately not
+ * a DOM event: the close can originate from a native sheet or a keyboard
+ * dismissal where there is no DOM event to forward.
+ */
+export interface DropdownMenuCloseAutoFocusEvent {
+  preventDefault: () => void;
+  readonly defaultPrevented: boolean;
 }
 
 function DropdownMenuContent({ children }: DropdownMenuContentProps) {
@@ -397,10 +455,12 @@ function DropdownMenuList({
   children,
   maxHeight,
   maxWidth,
+  "aria-label": ariaLabel,
 }: {
   children?: ReactNode;
   maxHeight?: number;
   maxWidth?: number;
+  "aria-label"?: string;
 }) {
   const ctx = useDropdownMenuContext("Content");
   const innerRef = useRef<TamaguiElement | null>(null);
@@ -494,6 +554,7 @@ function DropdownMenuList({
     <YStack
       ref={innerRef}
       role="menu"
+      {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
       data-dismiss-class="commit"
       data-mp-width-mode="at-least-trigger"
       width="100%"
@@ -678,7 +739,7 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
             </Text>
             <Text
               {...knobProps.body}
-              color={componentColors.text.muted}
+              color={knobProps.textAccentColor}
               fontSize="$1"
               data-mp-disabled-reason="true"
             >
@@ -701,7 +762,7 @@ const DropdownMenuItemBody = forwardRef<TamaguiElement, ItemBodyProps>(
         {shortcut ? (
           <Text
             {...knobProps.body}
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             fontSize="$1"
             flexShrink={0}
             marginInlineStart="$4"
@@ -783,7 +844,7 @@ function DropdownMenuLabel({ children, ...props }: DropdownMenuLabelProps) {
       {...knobProps.body}
       fontWeight="600"
       fontSize="$1"
-      color={componentColors.text.muted}
+      color={knobProps.textAccentColor}
       paddingHorizontal="$3"
       paddingVertical="$1.5"
       userSelect="none"

package/src/LinearGradient.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, YStack } from "tamagui";
-import { LinearGradient } from "./tamagui";
+import { Text } from "./Text";
+import { LinearGradient, YStack } from "./tamagui";
 
 const meta: Meta<typeof LinearGradient> = {
   title: "Components/LinearGradient",

package/src/Meter/Meter.spec.tsx

@@ -8,7 +8,7 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset, resolveRadiusClass } from "@multiplatform.one/theme";
+import { Preset, resolveRadiusClass, type Knobs } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { Theme } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
@@ -36,7 +36,7 @@ const BATTERY = { min: 0, max: 100, low: 10, high: 20, optimum: 100 } as const;
 function renderMeter(
   ui: ReactElement,
   scheme: "light" | "dark" = "light",
-  knobs?: { borderRadius?: "none" | "small" | "medium" | "large" | "full" },
+  knobs?: Partial<Pick<Knobs, "borderRadius" | "fillStyle" | "borderWidth">>,
 ) {
   return renderWithProviders(
     <Theme name={scheme}>
@@ -77,12 +77,16 @@ describe("threshold intents map to theme intents, never raw brand", () => {
     for (const zone of Object.keys(METER_ZONE_PAINT) as MeterZone[]) {
       const paint = METER_ZONE_PAINT[zone];
       expect(paint.fill, `${zone} fill`).toMatch(token);
-      expect(paint.value, `${zone} value`).toMatch(token);
       expect(paint.fill).not.toMatch(/^#/);
-      expect(paint.value).not.toMatch(/^#/);
       expect(paint.fill).not.toContain("accent");
-      expect(paint.value).not.toContain("accent");
+      if ("value" in paint) {
+        expect(paint.value, `${zone} value`).toMatch(token);
+        expect(paint.value).not.toMatch(/^#/);
+        expect(paint.value).not.toContain("accent");
+      }
     }
+    // MPO-154: ok declares no value ink — the resolver owns it.
+    expect("value" in METER_ZONE_PAINT.ok).toBe(false);
     expect(METER_ZONE_PAINT.ok.fill).toBe("$color11");
     expect(METER_ZONE_PAINT.warn.fill).toBe("$orange9");
     expect(METER_ZONE_PAINT.warn.value).toBe("$orange11");
@@ -154,7 +158,11 @@ describe("render spec at each intent in both schemes", () => {
         expect(node.getAttribute("data-meter-zone")).toBe(zone);
         expect(node.getAttribute("data-meter-fill")).toBe(paint.fill);
         const valueNode = container.querySelector("[data-meter-value]");
-        expect(valueNode?.getAttribute("data-meter-value-color")).toBe(paint.value);
+        // ok declares no value ink, so the readout rides textAccent — "high"
+        // in the default preset these cases render under.
+        expect(valueNode?.getAttribute("data-meter-value-color")).toBe(
+          "value" in paint ? paint.value : "$color",
+        );
         expect(node.getAttribute("data-meter-fill")).not.toMatch(/^#/);
       });
     }
@@ -192,6 +200,63 @@ describe("Meter a11y and the Progress semantic line", () => {
     expect(formatMeterValue({ value: 78, min: 0, max: 100, format: "percent" })).toMatch(/%$/);
     expect(formatMeterValue({ value: undefined, min: 0, max: 8, format: "number" })).toBe("\u2014");
   });
+
+  it("outlined chrome spreads inputSurface — borderWidth is the knob, not a hardcoded 1", () => {
+    const { container: filled } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "filled", borderWidth: "large" },
+    );
+    expect(rail(filled).getAttribute("data-meter-border-width")).toBe("0");
+
+    cleanup();
+    const { container: hairline } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "outlined", borderWidth: "none" },
+    );
+    // LC-86: outlined + none still draws the small hairline, not 0.
+    expect(rail(hairline).getAttribute("data-meter-border-width")).toBe("0.5");
+
+    cleanup();
+    const { container: large } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "outlined", borderWidth: "large" },
+    );
+    expect(rail(large).getAttribute("data-meter-border-width")).toBe("2");
+  });
+
+  it("loading is a skeleton, not an indeterminate meter", () => {
+    const { container } = renderMeter(<Meter label="Disk usage" min={0} max={8} loading />);
+    expect(container.querySelector("[role='meter']")).toBeNull();
+    expect(container.querySelector("[role='progressbar']")).toBeNull();
+  });
+
+  for (const discrete of [0, 5]) {
+    for (const [borderWidth, expected] of [
+      ["none", "0.5px"],
+      ["small", "0.5px"],
+      ["large", "2px"],
+    ] as const) {
+      it(`paints ${borderWidth} outline on ${discrete ? "every segment" : "the continuous rail"}`, () => {
+        const { container } = renderMeter(
+          <Meter label="Disk" value={5} min={0} max={8} segments={discrete} />,
+          "light",
+          { fillStyle: "outlined", borderWidth },
+        );
+        const parts = discrete
+          ? Array.from(container.querySelector("[data-meter-segments]")!.children)
+          : [rail(container)];
+        expect(parts).toHaveLength(discrete || 1);
+        for (const part of parts) expect(getComputedStyle(part).borderTopWidth).toBe(expected);
+        if (discrete) {
+          expect(getComputedStyle(parts[0]).backgroundColor).not.toBe("transparent");
+          expect(getComputedStyle(parts.at(-1)!).backgroundColor).toBe("transparent");
+        }
+      });
+    }
+  }
 });
 
 describe("barrel exports (the ProgressCard export gap)", () => {

package/src/Meter/Meter.stories.tsx

@@ -117,3 +117,41 @@ export const Unknown: Story = {
     unit: "GB",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    label: "Disk usage",
+    min: 0,
+    max: 8,
+    unit: "GB",
+    loading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disk usage",
+    value: 6.2,
+    min: 0,
+    max: 8,
+    low: 6.4,
+    high: 7.6,
+    optimum: 0,
+    unit: "GB",
+    disabled: true,
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    label: "Disk usage",
+    value: 6.2,
+    min: 0,
+    max: 8,
+    low: 6.4,
+    high: 7.6,
+    optimum: 0,
+    format: "percent",
+    layout: "inline",
+  },
+};

package/src/Meter/index.tsx

@@ -149,11 +149,17 @@ export function Meter({
   const outlined = knobProps.outlined;
   const trackH = meterTrackHeightPx(size);
   const railRadius = resolveMeterRailRadius(stop);
+  // Spread the fragment (AGENTS.md). Hardcoded 1px ignored the borderWidth knob.
+  const outlineChrome = outlined
+    ? { ...knobProps.inputSurface, borderColor: "$color6" as const }
+    : { borderWidth: 0 };
+  const paintedBorder = outlined ? knobProps.inputSurface.borderWidth : 0;
   const known = value != null && Number.isFinite(value);
   const zone = known
     ? resolveMeterZone({ value: value as number, min, max, low, high, optimum })
     : "ok";
   const paint = METER_ZONE_PAINT[zone];
+  const valueInk = "value" in paint ? paint.value : knobProps.textAccentColor;
   const ratio = meterFillRatio(value, min, max);
   const visible = formatMeterValue({ value, min, max, unit, format, valueLabel });
   const valuetext = valueText ?? defaultValueText({ value, visible, unit, format });
@@ -172,10 +178,10 @@ export function Meter({
       <Text
         {...knobProps.label}
         fontFamily="$mono"
-        color={paint.value}
+        color={valueInk}
         whiteSpace="nowrap"
         data-meter-value=""
-        data-meter-value-color={paint.value}
+        data-meter-value-color={valueInk}
         {...(isWeb ? { style: { fontVariantNumeric: "tabular-nums" } } : null)}
       >
         {visible}
@@ -209,9 +215,8 @@ export function Meter({
           width={19}
           height={trackH}
           borderRadius={railRadius}
+          {...outlineChrome}
           backgroundColor={i < filledCount ? paint.fill : outlined ? "transparent" : METER_TRACK}
-          borderWidth={outlined ? 1 : 0}
-          borderColor={outlined ? "$color6" : undefined}
         />
       ))}
     </XStack>
@@ -220,9 +225,8 @@ export function Meter({
       height={trackH}
       minHeight={trackH}
       borderRadius={railRadius}
+      {...outlineChrome}
       backgroundColor={outlined ? "transparent" : METER_TRACK}
-      borderWidth={outlined ? 1 : 0}
-      borderColor={outlined ? "$color6" : undefined}
       opacity={disabled ? 0.5 : 1}
       role="meter"
       aria-label={label}
@@ -232,6 +236,7 @@ export function Meter({
       aria-valuetext={valuetext}
       data-meter-radius-class={METER_RADIUS_CLASS}
       data-meter-rail-radius={railRadius}
+      data-meter-border-width={paintedBorder}
       data-meter-zone={zone}
       data-meter-fill={known && ratio != null ? paint.fill : undefined}
       data-meter-track-height={trackH}
@@ -261,6 +266,7 @@ export function Meter({
         aria-valuetext={valuetext}
         data-meter-radius-class={METER_RADIUS_CLASS}
         data-meter-rail-radius={railRadius}
+        data-meter-border-width={paintedBorder}
         data-meter-zone={zone}
         data-meter-fill={known ? paint.fill : undefined}
         data-meter-track-height={trackH}

package/src/Meter/meter.ts

@@ -26,9 +26,14 @@ export const METER_RADIUS_CLASS = "DEFAULT" as const;
  * Zone paint — theme intent tokens, never raw brand or `$accentBackground`.
  * ok is the LAW pairing (no verdict under threshold, DG-FB-06). warn/critical
  * are the same step-9 solid / step-11 ink channel Progress uses (DG-FB-05).
+ *
+ * MPO-154: ok carries no `value`. Under no verdict the readout is ordinary
+ * secondary text, so its ink is `knobProps.textAccentColor` — a static
+ * `$color11` here was a second answer to what the resolver already decides,
+ * and it pinned the readout dim at `textAccent: high`.
  */
 export const METER_ZONE_PAINT = {
-  ok: { fill: "$color11", value: "$color11" },
+  ok: { fill: "$color11" },
   warn: { fill: "$orange9", value: "$orange11" },
   critical: { fill: "$red9", value: "$red11" },
 } as const;