@multiplatform.one/components 7.7.6 → 7.8.0

package/src/charts/svg.ts

@@ -19,8 +19,10 @@
 
 import {
   Circle as TCircle,
+  Defs as TDefs,
   G as TG,
   Line as TLine,
+  Mask as TMask,
   Path as TPath,
   Rect as TRect,
   Svg as TSvg,
@@ -29,8 +31,10 @@ import {
 import { isWeb } from "@multiplatform.one/platform";
 import type {
   Circle as RNCircle,
+  Defs as RNDefs,
   G as RNG,
   Line as RNLine,
+  Mask as RNMask,
   Path as RNPath,
   Rect as RNRect,
   Svg as RNSvg,
@@ -38,6 +42,8 @@ import type {
 } from "react-native-svg";
 
 export const Svg = TSvg as unknown as typeof RNSvg;
+export const Defs = TDefs as unknown as typeof RNDefs;
+export const Mask = TMask as unknown as typeof RNMask;
 export const G = TG as unknown as typeof RNG;
 export const Rect = TRect as unknown as typeof RNRect;
 export const Circle = TCircle as unknown as typeof RNCircle;
@@ -46,11 +52,59 @@ export const Path = TPath as unknown as typeof RNPath;
 export const SvgText = TSvgText as unknown as typeof RNSvgText;
 
 /** Accessible-image props for the chart root (Axiom 12). */
-export function chartRootA11yProps(label: string): Record<string, unknown> {
-  if (isWeb) return { role: "img", "aria-label": label };
+export interface ChartProofDeclaration {
+  kind: "bar" | "pie" | "donut" | "line" | "area";
+  separated: boolean;
+  datumText: boolean;
+  datumCount: number;
+  datumValues?: Array<[string, string]>;
+}
+
+export function chartRootA11yProps(
+  label: string,
+  proof?: ChartProofDeclaration,
+): Record<string, unknown> {
+  if (isWeb)
+    return {
+      role: "img",
+      "aria-label": label,
+      ...(proof
+        ? {
+            "data-mpo-chart": proof.kind,
+            "data-mpo-chart-separated": String(proof.separated),
+            "data-mpo-chart-datum-text": String(proof.datumText),
+            "data-mpo-chart-datum-count": proof.datumCount,
+            ...(proof.datumValues
+              ? { "data-mpo-chart-data-expected": JSON.stringify(proof.datumValues) }
+              : {}),
+          }
+        : {}),
+    };
   return { accessible: true, accessibilityRole: "image", accessibilityLabel: label };
 }
 
+/** Audit declarations carry no paint and are never sent to native SVG. */
+export function chartMarkProps(label: string): Record<string, unknown> {
+  return isWeb ? { "data-mpo-chart-mark": label } : {};
+}
+
+export function chartChromeProps(kind: "axis" | "grid"): Record<string, unknown> {
+  return isWeb ? { "data-mpo-chart-chrome": kind } : {};
+}
+
+export function chartDatumTextProps(index: number): Record<string, unknown> {
+  return isWeb ? { "data-mpo-chart-datum-text": String(index) } : {};
+}
+
+export function chartWebProps(props: Record<string, unknown>): Record<string, unknown> {
+  return isWeb ? props : {};
+}
+
+/** SVG's web presentation attribute and RNSVG's explicit native prop. */
+export function luminanceMaskProps(): Record<string, unknown> {
+  return isWeb ? { "mask-type": "luminance" } : { maskType: "luminance" };
+}
+
 export interface DatumTargetInput {
   /** Per-datum accessible name (describeDatum output). */
   label?: string;

package/src/code/CodeBlock/CodeBlock.copy.spec.tsx

@@ -105,4 +105,27 @@ describe("CodeBlock copy (Input.Button + notify)", () => {
     expect(getFeedback()[0]?.scope).toBe("field");
     expect(getFeedback()[0]?.surface).toBe("alert");
   });
+
+  it("keeps failures with their block and clears them on a successful retry", async () => {
+    const result = renderWithProviders(
+      <>
+        <div data-testid="first-code">
+          <CodeBlock>{"const first = 1;"}</CodeBlock>
+        </div>
+        <div data-testid="second-code">
+          <CodeBlock>{"const second = 2;"}</CodeBlock>
+        </div>
+      </>,
+    );
+    const first = result.getByTestId("first-code");
+    const second = result.getByTestId("second-code");
+    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.");
+    fireEvent.click(copyOf(first)!);
+    await vi.waitFor(() => expect(first.textContent).not.toContain("Copy failed."));
+    expect(getFeedback()).toHaveLength(0);
+    expect(getToasts()).toHaveLength(1);
+  });
 });

package/src/code/CodeBlock/index.tsx

@@ -24,7 +24,7 @@ import { Spacer, XStack, YStack } from "tamagui";
 import { settleMs } from "../../AnimateHeight";
 import { ErrorBoundary } from "../../ErrorBoundary";
 import { NotifyRegion } from "../../feedback/NotifyHost";
-import { copyAndNotify } from "../../feedback/copy";
+import { useCopyFeedback } from "../../feedback/copy";
 import { Code } from "../Code";
 import { HighlightedCode } from "../HighlightedCode";
 import { useShikiTokens } from "../Highlighter";
@@ -72,6 +72,7 @@ export function CodeBlock({
   disableCopy,
   size,
 }: CodeBlockProps) {
+  const { region, copy } = useCopyFeedback();
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   // Content type scale follows the size knob (T-VALUE via sizeToken, LC-18);
@@ -123,7 +124,7 @@ export function CodeBlock({
   // (DG-FB-01 — the D-copyfield verdict replaces TooltipSimple + icon-swap).
   const showCopy = Boolean(codeText) && !disableCopy;
   const activateCopy = () => {
-    void copyAndNotify(codeText);
+    void copy(codeText);
   };
   const capSquare = sizeRecipeForToken(String(codeSize), { touch: isTouchSurface() }).height;
 
@@ -211,7 +212,7 @@ export function CodeBlock({
           )}
         </YStack>
       </ErrorBoundary>
-      <NotifyRegion scope="field" compact />
+      <NotifyRegion scope="field" region={region} compact />
     </YStack>
   );
 }

package/src/feedback/ConfirmDialog.nativeFocus.spec.tsx

@@ -0,0 +1,52 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+const nativeHost = vi.hoisted(() => ({
+  query: vi.fn(() => []),
+  focus: vi.fn(),
+  preventDefault: vi.fn(),
+}));
+
+vi.mock("tamagui", async (original) => ({
+  ...(await original<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+vi.mock("../surfaces", async (original) => {
+  const React = await import("react");
+  return {
+    ...(await original<typeof import("../surfaces")>()),
+    DialogContent: React.forwardRef(function NativeContent(
+      {
+        children,
+        onOpenAutoFocus,
+      }: { children?: React.ReactNode; onOpenAutoFocus?: (event: Event) => void },
+      ref,
+    ) {
+      React.useImperativeHandle(ref, () => {
+        // RN 0.83 exposes HTMLElement for native host refs, without web focus APIs.
+        const host = Object.create(HTMLElement.prototype);
+        host.querySelectorAll = nativeHost.query;
+        host.focus = nativeHost.focus;
+        return host;
+      }, []);
+      React.useEffect(() => {
+        onOpenAutoFocus?.({ preventDefault: nativeHost.preventDefault } as unknown as Event);
+      }, [onOpenAutoFocus]);
+      return <div>{children}</div>;
+    }),
+  };
+});
+
+import { ConfirmDialog } from "./ConfirmDialog";
+
+describe("ConfirmDialog native focus ownership", () => {
+  it("leaves native host refs and open focus to the platform", () => {
+    renderWithProviders(
+      <ConfirmDialog open title="Delete project?" body="This cannot be undone." />,
+    );
+    expect(nativeHost.query).not.toHaveBeenCalled();
+    expect(nativeHost.focus).not.toHaveBeenCalled();
+    expect(nativeHost.preventDefault).not.toHaveBeenCalled();
+  });
+});

package/src/feedback/ConfirmDialog.spec.tsx

@@ -31,6 +31,26 @@ function alertdialog(): Element | null {
 }
 
 describe("ConfirmDialog", () => {
+  it("keeps a disabled destructive label on Button's readable text tier", () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        destructive
+        confirmDisabled
+        confirmDisabledReason="Type the project name"
+        title="Delete project?"
+        confirmLabel="Delete"
+      />,
+    );
+    const button = buttonByLabel("Delete");
+    const label = Array.from(button.querySelectorAll("span")).find(
+      (node) => node.textContent === "Delete",
+    );
+    expect(label).toBeTruthy();
+    expect(label?.className).toContain("_col-color11");
+    expect(label?.className).toContain("_fow-400");
+  });
+
   it("renders title, body, confirm, and cancel", () => {
     renderWithProviders(
       <ConfirmDialog

package/src/feedback/ConfirmDialog.tsx

@@ -27,9 +27,10 @@ import {
 } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import { Dialog, Paragraph, SizableText, XStack, YStack, type TamaguiElement } from "tamagui";
+import { Dialog, Paragraph, XStack, YStack, isWeb, type TamaguiElement } from "tamagui";
 import { countActionsInTree } from "../shared/actionScan";
 import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose";
+import { useKeyboardInset } from "../shared/useKeyboardInset";
 import { DialogContent, DialogOverlay } from "../surfaces";
 
 const TAB_STOPS =
@@ -55,16 +56,6 @@ function isTextEntry(el: HTMLElement): boolean {
   return Boolean(el.querySelector("input, textarea, [contenteditable='true']"));
 }
 
-/** R7 / §6.1: action labels are weight 400 on the TEXT NODE, never 500/600. */
-function ActionLabel({ children }: { children: string }) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <SizableText {...knobProps.body} {...knobProps.label} fontWeight="400" userSelect="none">
-      {children}
-    </SizableText>
-  );
-}
-
 function firstTabStop(root: HTMLElement): HTMLElement | null {
   const nodes = root.querySelectorAll<HTMLElement>(TAB_STOPS);
   for (const el of nodes) {
@@ -155,6 +146,7 @@ export function ConfirmDialog({
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const confirmLabel = confirmLabelProp ?? t("Confirm");
+  const keyboardInset = useKeyboardInset();
   const cancelLabel = cancelLabelProp ?? t("Cancel");
   const description = body ?? children;
   const contentRef = useRef<TamaguiElement | null>(null);
@@ -195,6 +187,7 @@ export function ConfirmDialog({
   };
 
   const handleOpenAutoFocus = useCallback((event: Event) => {
+    if (!isWeb) return;
     event.preventDefault();
     const panel = panelNode(contentRef.current);
     if (panel) applyOpenFocus(panel);
@@ -203,7 +196,8 @@ export function ConfirmDialog({
   // Radix onOpenAutoFocus is the web path; this effect covers jsdom and the
   // frame where the portal ref is not ready in the auto-focus callback.
   useEffect(() => {
-    if (!open) return;
+    // RN 0.83 also exposes HTMLElement, but native refs have no DOM query API.
+    if (!open || !isWeb) return;
     let cancelled = false;
     let frames = 0;
     const run = () => {
@@ -223,7 +217,7 @@ export function ConfirmDialog({
 
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
-      <Dialog.Portal>
+      <Dialog.Portal paddingBottom={keyboardInset || undefined}>
         <DialogOverlay key="overlay" />
         <DialogContent
           ref={contentRef}
@@ -279,7 +273,7 @@ export function ConfirmDialog({
                 handleOpenChange(false);
               }}
             >
-              <ActionLabel>{cancelLabel}</ActionLabel>
+              {cancelLabel}
             </Button>
             <Button
               compact
@@ -300,7 +294,7 @@ export function ConfirmDialog({
                 handleOpenChange(false);
               }}
             >
-              <ActionLabel>{confirmLabel}</ActionLabel>
+              {confirmLabel}
             </Button>
           </XStack>
         </DialogContent>

package/src/feedback/NotifyHost.tsx

@@ -120,17 +120,26 @@ function FeedbackDialog({ entry }: { entry: FeedbackEntry | undefined }) {
  */
 export function NotifyRegion({
   scope,
+  region,
   compact,
 }: {
   scope: "section" | "field";
+  /** Match one target; omitted regions display only untargeted feedback. */
+  region?: string;
   compact?: boolean;
 }) {
   const all = useFeedbackEntries();
   // SP-GAP (LC-18): inline alert stacking rides the space knob.
   const { knobProps } = useResolvedKnobs();
   const entries = useMemo(
-    () => all.filter((e) => e.surface === "alert" && e.scope === scope),
-    [all, scope],
+    () =>
+      all.filter(
+        (e) =>
+          e.surface === "alert" &&
+          e.scope === scope &&
+          (region != null ? e.region === region : e.region == null),
+      ),
+    [all, scope, region],
   );
   if (entries.length === 0) return null;
   return (

package/src/feedback/copy.ts

@@ -4,20 +4,52 @@
  */
 import { copyToClipboard } from "../hooks/useClipboard";
 import { notify } from "./notify";
+import { useCallback, useEffect, useId, useRef } from "react";
+import { dismissFeedbackByRegion } from "./store";
 
 export const COPY_OK = "Copied to clipboard.";
 export const COPY_FAIL = "Copy failed.";
 
-export function reportCopy(ok: boolean): void {
+export function reportCopy(ok: boolean, options?: { region?: string }): void {
+  const region = options?.region;
+  if (region != null) dismissFeedbackByRegion(region);
   if (ok) {
     notify({ severity: "success", scope: "page", body: COPY_OK });
     return;
   }
-  notify({ severity: "error", scope: "field", body: COPY_FAIL });
+  notify({ severity: "error", scope: "field", region, body: COPY_FAIL });
 }
 
-export async function copyAndNotify(text: string): Promise<boolean> {
+export async function copyAndNotify(text: string, options?: { region?: string }): Promise<boolean> {
   const ok = await copyToClipboard(text).catch(() => false);
-  reportCopy(ok);
+  reportCopy(ok, options);
   return ok;
 }
+
+/** Keeps copy failures beside their owner, including asynchronous clipboard results. */
+export function useCopyFeedback() {
+  const region = useId();
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      dismissFeedbackByRegion(region);
+    };
+  }, [region]);
+  const report = useCallback(
+    (ok: boolean) => {
+      if (mounted.current) reportCopy(ok, { region });
+    },
+    [region],
+  );
+  const copy = useCallback(
+    async (text: string) => {
+      const ok = await copyToClipboard(text).catch(() => false);
+      report(ok);
+      return ok;
+    },
+    [report],
+  );
+  return { region, report, copy };
+}

package/src/feedback/index.ts

@@ -13,6 +13,7 @@ export { NotifyHost, NotifyRegion, type NotifyHostProps } from "./NotifyHost";
 export { ConfirmDialog, type ConfirmDialogProps } from "./ConfirmDialog";
 export {
   dismissFeedback,
+  dismissFeedbackByRegion,
   dismissFeedbackBySurface,
   getFeedback,
   pushFeedback,

package/src/feedback/notify.spec.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { getToasts, resetToasts, TOAST_ACTION_MIN_MS } from "../Toast/store";
 import { notify } from "./notify";
 import { routeNotify, type NotifyEvent } from "./route";
-import { getFeedback, resetFeedback } from "./store";
+import { dismissFeedbackByRegion, getFeedback, resetFeedback } from "./store";
 
 afterEach(() => {
   resetToasts();
@@ -103,6 +103,20 @@ describe("routeNotify (DG-FB-01 routing table)", () => {
 });
 
 describe("notify() delivery", () => {
+  it("targets and clears one inline region without disturbing another", () => {
+    const route = notify({
+      severity: "error",
+      scope: "field",
+      region: "first",
+      body: "First failed",
+    });
+    notify({ severity: "error", scope: "field", region: "second", body: "Second failed" });
+    expect(route.region).toBe("first");
+    expect(getFeedback().map((entry) => entry.region)).toEqual(["first", "second"]);
+    dismissFeedbackByRegion("first");
+    expect(getFeedback().map((entry) => entry.region)).toEqual(["second"]);
+  });
+
   it("success path shows a one-liner toast", () => {
     const route = notify({
       severity: "success",

package/src/feedback/notify.ts

@@ -45,6 +45,7 @@ export function notify(event: NotifyEvent): NotifyRoute {
     surface: route.surface,
     severity: route.severity,
     scope: route.scope,
+    region: route.region,
     title: route.title,
     body: route.body,
     action: route.action,

package/src/feedback/route.ts

@@ -20,6 +20,8 @@ export interface NotifyAction {
 export interface NotifyEvent {
   severity: NotifySeverity;
   scope: NotifyScope;
+  /** Target one inline region instead of broadcasting to every region of the scope. */
+  region?: string;
   /** Escalate to a blocking dialog (error/warning only). Ignored for info/success. */
   blocking?: boolean;
   action?: NotifyAction;
@@ -40,6 +42,7 @@ export interface NotifyRoute {
   surface: NotifySurface;
   severity: NotifySeverity;
   scope: NotifyScope;
+  region?: string;
   /** Toast intent (info → accent). Banner/alert/dialog use `severity` as Alert intent. */
   toastIntent: NotifyToastIntent;
   title?: string;
@@ -81,6 +84,7 @@ export function routeNotify(event: NotifyEvent): NotifyRoute {
   const base = {
     severity,
     scope,
+    ...(event.region != null ? { region: event.region } : {}),
     toastIntent,
     title,
     body,

package/src/feedback/store.ts

@@ -10,6 +10,7 @@ export interface FeedbackEntry {
   surface: Exclude<NotifySurface, "toast">;
   severity: NotifySeverity;
   scope: NotifyScope;
+  region?: string;
   title?: string;
   body: string;
   action?: NotifyAction;
@@ -64,6 +65,12 @@ export function dismissFeedbackBySurface(surface: FeedbackEntry["surface"]): voi
   if (entries.length !== before) emit();
 }
 
+export function dismissFeedbackByRegion(region: string): void {
+  const before = entries.length;
+  entries = entries.filter((entry) => entry.region !== region);
+  if (entries.length !== before) emit();
+}
+
 /** Hard-reset (tests / story decorators). */
 export function resetFeedback(): void {
   entries = [];

package/src/icons/lucide.ts

@@ -1,5 +1,5 @@
 /** Thin re-export so apps/packages/features never import @tamagui/lucide-icons-2. */
-export { Eye, EyeOff, Github, Info, Mail } from "@tamagui/lucide-icons-2";
+export { Eye, EyeOff, Github, Info, Mail, Pencil } from "@tamagui/lucide-icons-2";
 // Aliased: bare `Menu` is the lucide hamburger. Tamagui Menu / create-menu
 // are unused leftovers and are not house barrel names (R9 G7). Package
 // root re-exports this as `Menu` after the curated tamagui surface.

package/src/images/SvgUri/index.native.ts

@@ -1,6 +1,14 @@
-import { SvgUri as RNSvgUri } from "react-native-svg";
-import { styled } from "tamagui";
+import { SvgUri as RNSvgUri, type UriProps } from "react-native-svg";
+import { styled, type TamaguiComponent } from "tamagui";
+import type { StackStyleBase, TamaDefer, TamaguiComponentPropsBaseBase } from "@tamagui/core";
 
-export const SvgUri = styled(RNSvgUri, { name: "SvgUri", uri: null, color: "$color" });
+export const SvgUri: TamaguiComponent<
+  TamaDefer,
+  unknown,
+  TamaguiComponentPropsBaseBase & UriProps,
+  StackStyleBase,
+  {},
+  {}
+> = styled(RNSvgUri, { name: "SvgUri", uri: null, color: "$color" });
 
 export type SvgUriProps = React.ComponentProps<typeof SvgUri>;

package/src/layouts/EmptyState.stories.tsx

@@ -77,7 +77,7 @@ export const MultipleActions: Story = {
         action={
           <>
             <Button>Create record</Button>
-            <Button variant="outlined">Learn more</Button>
+            <Button>Learn more</Button>
           </>
         }
       />
@@ -132,7 +132,7 @@ export const NoResults: Story = {
       <EmptyState
         {...args}
         icon={<MagnifyingGlassIcon size={40} />}
-        action={<Button variant="outlined">Clear filters</Button>}
+        action={<Button>Clear filters</Button>}
       />
     </PageCanvas>
   ),

package/src/layouts/Page.weight.spec.tsx

@@ -0,0 +1,75 @@
+import { defaultConfig } from "@tamagui/config/v5";
+import { createTamagui, TamaguiProvider } from "tamagui";
+import type { ReactElement } from "react";
+import { defaultHeadingFont, Preset } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { PageHeader } from "./page";
+
+const config = createTamagui({
+  ...defaultConfig,
+  fonts: { ...defaultConfig.fonts, heading: defaultHeadingFont },
+});
+function renderWithProviders(node: ReactElement) {
+  return render(
+    <TamaguiProvider config={config} defaultTheme="light">
+      {node}
+    </TamaguiProvider>,
+  );
+}
+afterEach(cleanup);
+
+describe("PageHeader rendered Tamagui title recipes", () => {
+  for (const scale of ["moderate", "display"] as const) {
+    for (const weight of ["regular", "bold"] as const) {
+      it(`${scale} preserves ${weight} independently of size`, () => {
+        renderWithProviders(
+          <Preset overrides={{ pageTitleScale: scale, fontWeight: weight }}>
+            <PageHeader title="Measured title" />
+          </Preset>,
+        );
+        const title = screen.getByRole("heading", { name: "Measured title" });
+        expect(getComputedStyle(title).fontSize).toBe(scale === "moderate" ? "26px" : "40px");
+        expect(getComputedStyle(title).fontWeight).toBe(weight === "regular" ? "400" : "700");
+        expect(title.tagName).toBe("H1");
+        expect(title).toHaveAttribute("data-font-weight-knob", weight);
+        expect(title.className).toContain("font_heading");
+      });
+
+      it(`${scale}/${weight} survives nested overrides and a titleScale eject`, () => {
+        renderWithProviders(
+          <Preset
+            overrides={{
+              pageTitleScale: scale,
+              fontWeight: weight === "bold" ? "regular" : "bold",
+            }}
+          >
+            <Preset overrides={{ fontWeight: weight }}>
+              <PageHeader
+                title="Nested title"
+                headingLevel={2}
+                titleScale={scale === "moderate" ? "display" : "moderate"}
+              />
+            </Preset>
+          </Preset>,
+        );
+        const title = screen.getByRole("heading", { name: "Nested title" });
+        expect(getComputedStyle(title).fontSize).toBe(scale === "moderate" ? "40px" : "26px");
+        expect(getComputedStyle(title).fontWeight).toBe(weight === "regular" ? "400" : "700");
+        expect(title.tagName).toBe("H2");
+      });
+    }
+  }
+
+  it("preserves the consumer heading eject and wrapper props", () => {
+    renderWithProviders(
+      <PageHeader
+        heading={<h3 style={{ fontWeight: 600 }}>Custom</h3>}
+        data-testid="eject"
+        padding={7}
+      />,
+    );
+    expect(getComputedStyle(screen.getByRole("heading")).fontWeight).toBe("600");
+    expect(getComputedStyle(screen.getByTestId("eject")).paddingTop).toBe("7px");
+  });
+});

package/src/layouts/PageHeader.stories.tsx

@@ -67,7 +67,7 @@ export const WithActions: Story = {
         {...args}
         actions={
           <>
-            <Button variant="outlined">Secondary</Button>
+            <Button>Secondary</Button>
             <Button>Primary</Button>
           </>
         }
@@ -83,7 +83,7 @@ export const WithNav: Story = {
         {...args}
         actions={
           <>
-            <Button variant="outlined">Secondary</Button>
+            <Button>Secondary</Button>
             <Button>Primary</Button>
           </>
         }
@@ -155,8 +155,8 @@ export const LongTitleNarrow: Story = {
         actions={
           <>
             <Button>First action</Button>
-            <Button variant="outlined">Second action</Button>
-            <Button variant="outlined">Third action</Button>
+            <Button>Second action</Button>
+            <Button>Third action</Button>
           </>
         }
       />

package/src/layouts/PageTemplates.stories.tsx

@@ -68,7 +68,7 @@ export const DetailPage: StoryObj<typeof DetailPageLayout> = {
       sizeClass="expanded"
       title="Bulbasaur"
       subtitle="Pokemon · #0001"
-      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarLeading={<Button>Back</Button>}
       toolbarTrailing={<Button theme="accent">Edit</Button>}
       aside={<ContentBox label="Aside (meta / timeline) ⅓" minHeight={240} />}
     >
@@ -82,7 +82,7 @@ export const DetailPageCompact: StoryObj<typeof DetailPageLayout> = {
     <DetailPageLayout
       sizeClass="compact"
       title="Bulbasaur"
-      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarLeading={<Button>Back</Button>}
       aside={<ContentBox label="Aside — stacked below, never hidden" minHeight={140} />}
     >
       <ContentBox label="Main content" minHeight={200} />