@multiplatform.one/forms 7.67.0 → 7.68.0

package/src/AdaptivePopup/index.tsx

@@ -27,6 +27,8 @@ import {
   YStack,
 } from "tamagui";
 import { X } from "@tamagui/lucide-icons-2";
+import { IconButton } from "../Button";
+import { standardActions } from "../standardActions";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { t } from "../shared/t";
@@ -71,6 +73,18 @@ export interface AdaptivePopupProps {
   showCloseButton?: boolean;
   /** Custom footer content (e.g. action buttons) */
   footer?: ReactNode;
+  /**
+   * LC-260: the popup's one confirm. The header becomes the iOS 26 sheet
+   * bar: cancel (X) leading, the title centred, the accent check trailing,
+   * and the corner close goes.
+   */
+  onConfirm?: () => void;
+  confirmKind?: "confirm" | "done" | "save" | "submit";
+  /** The confirm's accessible name when its kind is too thin ("Save profile"). */
+  confirmLabel?: string;
+  confirmDisabled?: boolean;
+  confirmDisabledReason?: string;
+  confirmLoading?: boolean;
   /** Whether to disable the trigger */
   disabled?: boolean;
 }
@@ -210,6 +224,12 @@ export function AdaptivePopup({
   showCloseButton = true,
   footer,
   disabled,
+  onConfirm,
+  confirmKind = "done",
+  confirmLabel,
+  confirmDisabled,
+  confirmDisabledReason,
+  confirmLoading,
 }: AdaptivePopupProps) {
   const { knobProps } = useResolvedKnobs({ painted: false });
   const { knobProps: nestedKnobs } = useResolvedKnobs();
@@ -282,22 +302,54 @@ export function AdaptivePopup({
       : { onPress: openFromTrigger }),
   };
 
-  const headerContent = (title || showCloseButton) && (
-    <Unspaced>
-      <XStack
-        justifyContent="space-between"
-        alignItems="center"
-        paddingRight={showCloseButton ? closePx : undefined}
-        minHeight={showCloseButton ? closePx : undefined}
-      >
+  const confirms = onConfirm != null;
+  const cornerClose = showCloseButton && !confirms;
+  const confirmBar = confirms && (
+    <XStack alignItems="center" data-mp-overlay-header="confirm" {...knobProps.gapSm}>
+      <IconButton
+        icon={standardActions.cancel.icon}
+        aria-label={t("Cancel")}
+        data-testid="adaptive-popup-cancel"
+        onPress={() => onOpenChange(false)}
+      />
+      <XStack flex={1} minWidth={0} justifyContent="center">
         {title ? (
-          <YStack flex={1}>
-            <Dialog.Title {...knobProps.heading}>{title}</Dialog.Title>
-          </YStack>
+          <Dialog.Title {...knobProps.heading} textAlign="center">
+            {title}
+          </Dialog.Title>
         ) : null}
       </XStack>
-    </Unspaced>
+      <IconButton
+        icon={standardActions[confirmKind].icon}
+        plate="primary"
+        aria-label={confirmLabel ?? t(standardActions[confirmKind].label)}
+        data-testid="adaptive-popup-confirm"
+        loading={confirmLoading}
+        disabled={confirmDisabled}
+        disabledReason={confirmDisabledReason}
+        disabledReasonPlacement="inline"
+        onPress={onConfirm}
+      />
+    </XStack>
   );
+  const headerContent = confirms
+    ? confirmBar
+    : (title || showCloseButton) && (
+        <Unspaced>
+          <XStack
+            justifyContent="space-between"
+            alignItems="center"
+            paddingRight={cornerClose ? closePx : undefined}
+            minHeight={cornerClose ? closePx : undefined}
+          >
+            {title ? (
+              <YStack flex={1}>
+                <Dialog.Title {...knobProps.heading}>{title}</Dialog.Title>
+              </YStack>
+            ) : null}
+          </XStack>
+        </Unspaced>
+      );
 
   const footerContent = footer && <YStack paddingTop="$2">{footer}</YStack>;
 
@@ -320,7 +372,7 @@ export function AdaptivePopup({
       )}
       <YStack flex={size === "fullscreen" ? 1 : undefined}>{children}</YStack>
       {footerContent}
-      {showCloseButton ? <PopupCloseButton onPress={() => onOpenChange(false)} /> : null}
+      {cornerClose ? <PopupCloseButton onPress={() => onOpenChange(false)} /> : null}
     </YStack>
   );
 

package/src/Button/Button.disabledGlyph.spec.tsx

@@ -0,0 +1,111 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-40 DISABLED-VISIBLE for a frameless control (FZ-7889 round 4). A
+ * disabled chromeless Button is its enabled twin dimmed: the same transparent
+ * frame and ink, at the recipe's glyph opacity. The keepLabel wash once
+ * filled it, so a pager's first-page chevron read as more prominent than the
+ * enabled next chevron beside it.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads the atomic classes each frame
+ * asks for and the opacity rule behind its `_o-` class.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+
+const SCHEMES = ["light", "dark"] as const;
+
+function houseRender(ui: ReactElement, scheme: string, disabledStyle = "keepLabel") {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <Preset overrides={{ disabledStyle: disabledStyle as "keepLabel" | "dimWhole" }}>
+        <YStack backgroundColor="$background">{ui}</YStack>
+      </Preset>
+    </TamaguiProvider>,
+  );
+}
+
+function injectedOpacity(className: string): number {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue("opacity");
+      if (value) return Number(value);
+    }
+  }
+  throw new Error(`no injected opacity rule for .${className}`);
+}
+
+function opacityOf(el: Element): number {
+  const cls = Array.from(el.classList).find((c) => c.startsWith("_o-"));
+  return cls ? injectedOpacity(cls) : 1;
+}
+
+/** Resting paint classes for one property prefix (`_bg-`, `_col-`, `_bc-`). */
+function rest(el: Element, prefix: string): string[] {
+  return Array.from(el.classList)
+    .filter((c) => c.startsWith(prefix) && !/0(hover|active|focus|press)/.test(c))
+    .sort();
+}
+
+function pair(scheme: string, disabledStyle?: string) {
+  houseRender(
+    <>
+      <Button chromeless aria-label="Next">
+        Next
+      </Button>
+      <Button chromeless aria-label="Previous" disabled>
+        Previous
+      </Button>
+    </>,
+    scheme,
+    disabledStyle,
+  );
+  return {
+    enabled: screen.getByLabelText("Next"),
+    disabled: screen.getByLabelText("Previous"),
+    enabledLabel: screen.getByText("Next"),
+    disabledLabel: screen.getByText("Previous"),
+  };
+}
+
+describe("LC-40: a disabled chromeless Button is its enabled twin, dimmed", () => {
+  it.each(SCHEMES)("%s keepLabel: no wash, same ink, glyph opacity", (scheme) => {
+    const { enabled, disabled, enabledLabel, disabledLabel } = pair(scheme);
+    expect(rest(disabled, "_bg-")).toEqual(rest(enabled, "_bg-"));
+    expect(rest(disabled, "_bc-")).toEqual(rest(enabled, "_bc-"));
+    expect(rest(disabledLabel, "_col-")).toEqual(rest(enabledLabel, "_col-"));
+    expect(opacityOf(enabled)).toBe(1);
+    expect(opacityOf(disabled)).toBeCloseTo(0.35);
+  });
+
+  it.each(SCHEMES)("%s dimWhole: no wash, the assembly dim alone", (scheme) => {
+    const { enabled, disabled } = pair(scheme, "dimWhole");
+    expect(rest(disabled, "_bg-")).toEqual(rest(enabled, "_bg-"));
+    expect(opacityOf(disabled)).toBeCloseTo(0.5);
+  });
+
+  it("a framed Button keeps the keepLabel wash", () => {
+    houseRender(
+      <>
+        <Button>Enabled</Button>
+        <Button disabled>Disabled</Button>
+      </>,
+      "light",
+    );
+    const enabled = screen.getByText("Enabled").closest("[role=button]")!;
+    const disabled = screen.getByText("Disabled").closest("[role=button]")!;
+    expect(rest(disabled, "_bg-")).not.toEqual(rest(enabled, "_bg-"));
+    expect(opacityOf(disabled)).toBe(1);
+  });
+});

package/src/Button/Button.iconButton.spec.tsx

@@ -0,0 +1,279 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-176 ICON-BUTTON (FZ-8020). Clay: square or round buttons holding a
+ * single icon felt wrong, "it's not supposed to have background or border
+ * around it". An icon-only Button paints no plate: a square box on the 44pt
+ * slop, and a plate only over media. Round 3 (Clay's compare pick, "USE the
+ * native look where possible"): the context picks the treatment. In a bar it
+ * is the bar tint, on Liquid Glass where iOS draws it; in content with no
+ * intent it is a bold glyph in the text colour.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads the atomic classes each frame
+ * asks for.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button, ICON_BUTTON_GLYPH_PX, ICON_BUTTON_NEUTRAL_GLYPH_PX, IconButton } from "./index";
+
+const glass = vi.hoisted(() => ({ available: false }));
+vi.mock("./glass", () => ({
+  loadGlassView: () =>
+    glass.available ? (props: object) => <div data-glass="" {...props} /> : null,
+}));
+
+afterEach(() => {
+  cleanup();
+  glass.available = false;
+});
+
+const houseConfig = createDefaultThemeConfig();
+
+const SCHEMES = ["light", "dark"] as const;
+
+function Glyph({ size, color, weight }: { size?: number; color?: string; weight?: string }) {
+  return <svg data-glyph="" data-weight={weight} width={size} height={size} color={color} />;
+}
+
+function glyphOf(label: string): SVGElement {
+  return screen.getByLabelText(label).querySelector("[data-glyph]") as SVGElement;
+}
+
+function houseRender(ui: ReactElement, scheme: string) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+/** Resting paint classes for one property prefix (`_bg-`, `_col-`, `_bc-`). */
+function rest(el: Element, prefix: string): string[] {
+  return Array.from(el.classList)
+    .filter((c) => c.startsWith(prefix) && !/0(hover|active|focus|press)/.test(c))
+    .sort();
+}
+
+describe("LC-176: an icon-only Button is a bare glyph", () => {
+  it.each(SCHEMES)("%s: in a bar, no fill and no border at rest, the bar tint as ink", (scheme) => {
+    houseRender(
+      <>
+        <Surface bar>
+          <Button icon={Glyph} aria-label="More" />
+          <Button chromeless accentInk icon={Glyph} aria-label="Bar" />
+        </Surface>
+        <Button icon={Glyph}>Labelled</Button>
+      </>,
+      scheme,
+    );
+    const glyph = screen.getByLabelText("More");
+    const bar = screen.getByLabelText("Bar");
+    const labelled = screen.getByText("Labelled").closest("[role=button]")!;
+    expect(glyph.getAttribute("data-mp-icon-button")).toBe("glyph");
+    expect(rest(glyph, "_bg-")).toEqual(rest(bar, "_bg-"));
+    expect(rest(glyph, "_bc-")).toEqual(rest(bar, "_bc-"));
+    expect(rest(glyph, "_col-")).toEqual(rest(bar, "_col-"));
+    expect(rest(glyph, "_bg-")).not.toEqual(rest(labelled, "_bg-"));
+    expect(labelled.hasAttribute("data-mp-icon-button")).toBe(false);
+  });
+
+  it("web hover and press light a soft plate", () => {
+    houseRender(<Button icon={Glyph} aria-label="More" />, "light");
+    const classes = Array.from(screen.getByLabelText("More").classList);
+    expect(classes.some((c) => /^_bg-0hover-/.test(c))).toBe(true);
+    expect(classes.some((c) => /^_bg-0active-/.test(c))).toBe(true);
+  });
+
+  it("sits in a square box with the press slop", () => {
+    houseRender(<Button icon={Glyph} aria-label="More" />, "light");
+    const glyph = screen.getByLabelText("More");
+    const height = glyph.getAttribute("data-mp-button-height");
+    expect(Number(height)).toBeGreaterThan(0);
+    expect(Array.from(glyph.classList).some((c) => /^_w-/.test(c))).toBe(true);
+    expect(Array.from(glyph.classList).some((c) => /^_pr-0px|^_pr-0\b/.test(c))).toBe(true);
+  });
+
+  it("an explicit frame is honoured, so the design lint can name it", () => {
+    houseRender(
+      <>
+        <Button outlined icon={Glyph} aria-label="Outlined" />
+        <Button circular icon={Glyph} aria-label="Circular" />
+        <Button chromeless={false} icon={Glyph} aria-label="Filled" />
+      </>,
+      "light",
+    );
+    for (const label of ["Outlined", "Circular", "Filled"])
+      expect(screen.getByLabelText(label).hasAttribute("data-mp-icon-button")).toBe(false);
+  });
+
+  it("a selected icon toggle keeps the LC-131 selected fill", () => {
+    houseRender(<Button icon={Glyph} aria-label="Shuffle" selected />, "light");
+    expect(screen.getByLabelText("Shuffle").getAttribute("data-mp-selected")).toBe("true");
+  });
+
+  it.each(SCHEMES)("%s: plate=media is the one plated icon button", (scheme) => {
+    houseRender(
+      <>
+        <Button plate="media" icon={Glyph} aria-label="Remove" />
+        <Button icon={Glyph} aria-label="More" />
+      </>,
+      scheme,
+    );
+    const media = screen.getByLabelText("Remove");
+    expect(media.getAttribute("data-mp-icon-button")).toBe("media");
+    expect(rest(media, "_bg-")).not.toEqual(rest(screen.getByLabelText("More"), "_bg-"));
+    expect(rest(media, "_bg-").join(" ")).not.toMatch(/transparent/);
+  });
+
+  it("a toggle over media shows its state in the glyph, not a selected fill", () => {
+    houseRender(<Button plate="media" icon={Glyph} aria-label="Like" aria-pressed />, "light");
+    expect(screen.getByLabelText("Like").hasAttribute("data-mp-selected")).toBe(false);
+  });
+
+  it.each(SCHEMES)(
+    "%s: in content with no intent, a bold glyph in the text colour, 24pt or more",
+    (scheme) => {
+      houseRender(
+        <>
+          <Button icon={Glyph} aria-label="Neutral" />
+          <Button error icon={Glyph} aria-label="Delete" />
+          <Surface bar>
+            <Button icon={Glyph} aria-label="Bar" />
+          </Surface>
+        </>,
+        scheme,
+      );
+      const neutral = screen.getByLabelText("Neutral");
+      expect(neutral.getAttribute("data-mp-icon-button")).toBe("neutral");
+      expect(rest(neutral, "_bg-").join(" ")).not.toMatch(/background|color\d/);
+      expect(rest(neutral, "_col-")).not.toEqual(rest(screen.getByLabelText("Bar"), "_col-"));
+      expect(glyphOf("Neutral").getAttribute("data-weight")).toBe("bold");
+      expect(ICON_BUTTON_NEUTRAL_GLYPH_PX).toBeGreaterThanOrEqual(24);
+      expect(Number(glyphOf("Neutral").getAttribute("width"))).toBeGreaterThanOrEqual(
+        ICON_BUTTON_NEUTRAL_GLYPH_PX,
+      );
+      // An intent keeps its own on-page ink and the regular stroke.
+      expect(screen.getByLabelText("Delete").getAttribute("data-mp-icon-button")).toBe("glyph");
+      expect(glyphOf("Delete").getAttribute("data-weight")).toBe("regular");
+    },
+  );
+
+  it("on iOS 26 with the glass module, a bar's icon button floats on Liquid Glass", () => {
+    glass.available = true;
+    houseRender(
+      <>
+        <Surface bar>
+          <Button icon={Glyph} aria-label="Search" />
+          <IconButton inline icon={Glyph} aria-label="InlineInBar" />
+        </Surface>
+        <Button icon={Glyph} aria-label="Content" />
+      </>,
+      "light",
+    );
+    const search = screen.getByLabelText("Search");
+    expect(search.getAttribute("data-mp-icon-button")).toBe("glass");
+    expect(search.querySelector("[data-glass]")).not.toBeNull();
+    expect(glyphOf("Search").getAttribute("data-weight")).toBe("regular");
+    // Glass is the bar button; content and inline glyphs never float on it.
+    expect(screen.getByLabelText("Content").querySelector("[data-glass]")).toBeNull();
+    expect(screen.getByLabelText("InlineInBar").querySelector("[data-glass]")).toBeNull();
+  });
+
+  it("without the glass module (web, Android, older iOS, an older binary) the bar glyph stays bare", () => {
+    houseRender(
+      <Surface bar>
+        <Button icon={Glyph} aria-label="Search" />
+      </Surface>,
+      "light",
+    );
+    const search = screen.getByLabelText("Search");
+    expect(search.getAttribute("data-mp-icon-button")).toBe("glyph");
+    expect(search.querySelector("[data-glass]")).toBeNull();
+  });
+
+  it("IconButton is the same glyph", () => {
+    houseRender(
+      <Surface bar>
+        <IconButton icon={Glyph} aria-label="Named" />
+        <Button icon={Glyph} aria-label="Plain" />
+      </Surface>,
+      "light",
+    );
+    const named = screen.getByLabelText("Named");
+    const plain = screen.getByLabelText("Plain");
+    expect(named.getAttribute("data-mp-icon-button")).toBe("glyph");
+    expect(rest(named, "_bg-")).toEqual(rest(plain, "_bg-"));
+  });
+
+  it("a bar glyph carries the weight: 22pt or more, Phosphor regular, in its box", () => {
+    houseRender(
+      <Surface bar>
+        <Button size="$2" icon={Glyph} aria-label="Small" />
+        <Button icon={Glyph} aria-label="Default" />
+        <IconButton glyphWeight="bold" icon={Glyph} aria-label="Bold" />
+        <Button size="$2" icon={Glyph}>
+          Label
+        </Button>
+      </Surface>,
+      "light",
+    );
+    expect(ICON_BUTTON_GLYPH_PX).toBeGreaterThanOrEqual(22);
+    expect(Number(glyphOf("Default").getAttribute("width"))).toBeGreaterThanOrEqual(
+      ICON_BUTTON_GLYPH_PX,
+    );
+    for (const label of ["Small", "Default"]) {
+      const glyph = glyphOf(label);
+      expect(glyph.getAttribute("data-weight")).toBe("regular");
+      const box = Number(screen.getByLabelText(label).getAttribute("data-mp-button-height"));
+      expect(box).toBeGreaterThanOrEqual(Number(glyph.getAttribute("width")));
+    }
+    expect(glyphOf("Bold").getAttribute("data-weight")).toBe("bold");
+    const labelled = screen.getByText("Label").closest("[role=button]")!;
+    const labelGlyph = labelled.querySelector("[data-glyph]")!;
+    expect(Number(labelGlyph.getAttribute("width"))).toBeLessThan(ICON_BUTTON_GLYPH_PX);
+    expect(labelGlyph.hasAttribute("data-weight")).toBe(false);
+  });
+
+  it("a plate never shrinks its glyph: media and confirm take the bar size", () => {
+    houseRender(
+      <>
+        <Surface bar>
+          <Button icon={Glyph} aria-label="Bar" />
+        </Surface>
+        <Button plate="media" icon={Glyph} aria-label="Remove photo" />
+        <Button plate="primary" icon={Glyph} aria-label="Done" />
+      </>,
+      "light",
+    );
+    const bar = Number(glyphOf("Bar").getAttribute("width"));
+    for (const label of ["Remove photo", "Done"]) {
+      expect(Number(glyphOf(label).getAttribute("width"))).toBe(bar);
+      expect(glyphOf(label).getAttribute("data-weight")).toBe("regular");
+    }
+  });
+
+  it("an inline glyph is the text's size, 8pt after the value, bold in content", () => {
+    houseRender(
+      <>
+        <IconButton inline icon={Glyph} aria-label="Copy" />
+        <IconButton icon={Glyph} aria-label="Bar" />
+      </>,
+      "light",
+    );
+    const copy = screen.getByLabelText("Copy");
+    expect(copy.getAttribute("data-mp-icon-button")).toBe("inline");
+    const size = Number(glyphOf("Copy").getAttribute("width"));
+    expect(size).toBeGreaterThan(12);
+    expect(size).toBeLessThan(ICON_BUTTON_GLYPH_PX);
+    expect(Number(copy.getAttribute("data-mp-button-height"))).toBe(size);
+    expect(copy.hasAttribute("data-mp-press-slop")).toBe(true);
+    expect(Array.from(copy.classList).some((c) => /^_(mis|ms|ml|marginInlineStart)-/.test(c))).toBe(
+      true,
+    );
+    expect(glyphOf("Copy").getAttribute("data-weight")).toBe("bold");
+  });
+});

package/src/Button/Button.stories.tsx

@@ -1,14 +1,15 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Activity, Airplay, Download, Trash } from "@tamagui/lucide-icons-2";
+import { Activity, Airplay, Copy, Download, Trash } from "@tamagui/lucide-icons-2";
 import {
   FOCUS_RING_CLIPPED_OFFSET,
   FOCUS_RING_MIN_CONTRAST,
   ensureFocusVisibleRing,
   Paragraph,
+  Surface,
 } from "@multiplatform.one/theme";
 import { Button as TamaguiButton, XStack, YStack, useTheme } from "tamagui";
-import { Button, type ButtonProps } from "./index";
+import { Button, IconButton, type ButtonProps } from "./index";
 import { useState } from "react";
 
 const pressed = (name: string) => () => action(name)();
@@ -411,10 +412,65 @@ export const DisabledReasons: Story = {
             Publish
           </Button>
           <Button disabled disabledReason="No saved changes" disabledReasonPlacement={placement}>
-            Save
+            Save draft
           </Button>
         </YStack>
       ))}
     </YStack>
   ),
 };
+
+/**
+ * LC-176 ICON-BUTTON, by context. In a bar the glyph takes the bar tint (on
+ * Liquid Glass on iOS 26); in content with no intent it is a bold glyph in the
+ * text colour; an intent keeps its ink; a selected toggle keeps LC-131; inline
+ * beside a value it is the text's size; over media it rides the one plate.
+ */
+export const IconButtons: Story = {
+  render: () => {
+    const [on, setOn] = useState(false);
+    return (
+      <YStack gap="$4" padding="$4" backgroundColor="$background">
+        <Surface bar>
+          <XStack gap="$1" alignItems="center" data-testid="icon-button-toolbar">
+            <IconButton icon={Activity} aria-label="Activity" onPress={pressed("activity")} />
+            <IconButton icon={Airplay} aria-label="Cast" onPress={pressed("cast")} />
+            <IconButton icon={Download} aria-label="Download" onPress={pressed("download")} />
+            <IconButton icon={Download} aria-label="Download (nothing to download)" disabled />
+            <IconButton
+              icon={Airplay}
+              aria-label="Toggle cast"
+              selected={on}
+              onPress={() => setOn((v) => !v)}
+            />
+          </XStack>
+        </Surface>
+        <XStack gap="$1" alignItems="center" data-testid="icon-button-content">
+          <IconButton icon={Download} aria-label="Download" onPress={pressed("download")} />
+          <IconButton icon={Trash} error aria-label="Delete" onPress={pressed("delete")} />
+        </XStack>
+        <XStack alignItems="center" data-testid="icon-button-inline">
+          <Paragraph>shc node join</Paragraph>
+          <IconButton inline icon={Copy} aria-label="Copy" onPress={pressed("copy")} />
+        </XStack>
+        <YStack
+          position="relative"
+          width="$20"
+          height="$12"
+          backgroundColor="$blue9"
+          borderRadius="$4"
+          data-testid="icon-button-media"
+        >
+          <YStack position="absolute" top="$2" right="$2">
+            <IconButton
+              plate="media"
+              icon={Trash}
+              aria-label="Remove photo"
+              onPress={pressed("remove")}
+            />
+          </YStack>
+        </YStack>
+      </YStack>
+    );
+  },
+};

package/src/Button/glass.native.ts

@@ -0,0 +1,38 @@
+import type { GlassViewComponent } from "./glass";
+
+export type { GlassViewComponent } from "./glass";
+
+let cachedGlassView: GlassViewComponent | null | undefined;
+
+/**
+ * LC-176: expo-glass-effect's `GlassView`, when this binary links its native
+ * module and the OS draws Liquid Glass (iOS 26+); Android never links it. The module is probed through
+ * `requireOptionalNativeModule` BEFORE the guarded `require`, so an OTA on a
+ * binary built without it, or an older iOS, falls back to the bare tinted
+ * glyph instead of throwing mid-render (the `nativePickerLoader.ts` contract).
+ */
+export function loadGlassView(): GlassViewComponent | null {
+  if (cachedGlassView !== undefined) return cachedGlassView;
+  cachedGlassView = null;
+  try {
+    const core = require("expo-modules-core") as {
+      requireOptionalNativeModule?: (moduleName: string) => unknown;
+    };
+    if (core.requireOptionalNativeModule?.("ExpoGlassEffect") == null) return cachedGlassView;
+    const glass = require("expo-glass-effect") as {
+      GlassView?: GlassViewComponent;
+      isLiquidGlassAvailable?: () => boolean;
+      isGlassEffectAPIAvailable?: () => boolean;
+    };
+    if (
+      glass.GlassView &&
+      glass.isLiquidGlassAvailable?.() &&
+      glass.isGlassEffectAPIAvailable?.()
+    ) {
+      cachedGlassView = glass.GlassView;
+    }
+  } catch {
+    cachedGlassView = null;
+  }
+  return cachedGlassView;
+}

package/src/Button/glass.ts

@@ -0,0 +1,18 @@
+import type { ComponentType } from "react";
+
+/** The slice of expo-glass-effect's `GlassView` an icon button draws. */
+export type GlassViewComponent = ComponentType<{
+  style?: unknown;
+  glassEffectStyle?: "regular" | "clear";
+  isInteractive?: boolean;
+  pointerEvents?: "none" | "auto" | "box-none" | "box-only";
+}>;
+
+/**
+ * LC-176: the iOS 26 Liquid Glass material an icon button floats on in a bar.
+ * Only iOS has it (`glass.native.ts`; the native module is Apple-only, so Android probes null); web, Android and GNOME draw the bare
+ * tinted glyph.
+ */
+export function loadGlassView(): GlassViewComponent | null {
+  return null;
+}