@multiplatform.one/forms 7.73.0 → 7.74.0

package/src/Button/Button.stories.tsx

@@ -5,8 +5,11 @@ import {
   FOCUS_RING_CLIPPED_OFFSET,
   FOCUS_RING_MIN_CONTRAST,
   ensureFocusVisibleRing,
+  GlyphTintFallbackProvider,
   Paragraph,
   Surface,
+  glyphTintFallback,
+  type GlyphTintFallback,
 } from "@multiplatform.one/theme";
 import { Button as TamaguiButton, XStack, YStack, useTheme } from "tamagui";
 import {
@@ -539,25 +542,36 @@ export const IconButtons: Story = {
 // SHC's own code rather than this reproduction.
 const shcRoundGlyph = { circular: true, chromeless: true, accentInk: true } as const;
 
+// FZ-8020 r4: the house theme has no hue, so `tint` renders each fallback
+// (ink, the system tint, a house hue) from one build for Clay's compare.
+type TintStory = StoryObj<{ tint: GlyphTintFallback }>;
+const tintArgs: Pick<TintStory, "args" | "argTypes"> = {
+  args: { tint: glyphTintFallback },
+  argTypes: { tint: { control: "inline-radio", options: ["ink", "system", "accent"] } },
+};
+
 /** Clay's SHC Nodes screen (IMG_1925 on FZ-8020): the add and the copy. */
-export const ShcNodesScreen: Story = {
-  render: () => (
-    <YStack gap="$4" padding="$4" backgroundColor="$background" data-testid="shc-nodes">
-      <XStack alignItems="center" gap="$2">
-        <Paragraph flex={1} size="$9" fontWeight="700">
-          Nodes
-        </Paragraph>
-        <Button size="$3" {...shcRoundGlyph} icon={PlusIcon} aria-label="Add node" />
-      </XStack>
-      <XStack alignItems="center" gap="$2">
-        <Paragraph fontFamily="$mono">shc node join</Paragraph>
-        <Button size="$2" {...shcRoundGlyph} icon={CopyIcon} aria-label="Copy" />
-      </XStack>
-      <XStack alignItems="center">
-        <Paragraph fontFamily="$mono">shc node join</Paragraph>
-        <IconButton inline icon={CopyIcon} aria-label="Copy (inline)" />
-      </XStack>
-    </YStack>
+export const ShcNodesScreen: TintStory = {
+  ...tintArgs,
+  render: ({ tint }) => (
+    <GlyphTintFallbackProvider value={tint}>
+      <YStack gap="$4" padding="$4" backgroundColor="$background" data-testid="shc-nodes">
+        <XStack alignItems="center" gap="$2">
+          <Paragraph flex={1} size="$9" fontWeight="700">
+            Nodes
+          </Paragraph>
+          <Button size="$3" {...shcRoundGlyph} icon={PlusIcon} aria-label="Add node" />
+        </XStack>
+        <XStack alignItems="center" gap="$2">
+          <Paragraph fontFamily="$mono">shc node join</Paragraph>
+          <Button size="$2" {...shcRoundGlyph} icon={CopyIcon} aria-label="Copy" />
+        </XStack>
+        <XStack alignItems="center">
+          <Paragraph fontFamily="$mono">shc node join</Paragraph>
+          <IconButton inline icon={CopyIcon} aria-label="Copy (inline)" />
+        </XStack>
+      </YStack>
+    </GlyphTintFallbackProvider>
   ),
 };
 
@@ -568,30 +582,33 @@ const shcUpdatePlate = { circular: true, outlined: true } as const;
  * Clay's SHC Updates rows (IMG_1926 on FZ-8020): the plate SHC asks for, its
  * glyph now at the circle ratio, above the bare tinted glyph LC-176 wants.
  */
-export const ShcUpdateRows: Story = {
-  render: () => (
-    <YStack gap="$2" padding="$4" backgroundColor="$background" data-testid="shc-update-rows">
-      {(["$3", "$4"] as const).map((size) => (
-        <XStack key={size} alignItems="center" gap="$3" minHeight="$5">
+export const ShcUpdateRows: TintStory = {
+  ...tintArgs,
+  render: ({ tint }) => (
+    <GlyphTintFallbackProvider value={tint}>
+      <YStack gap="$2" padding="$4" backgroundColor="$background" data-testid="shc-update-rows">
+        {(["$3", "$4"] as const).map((size) => (
+          <XStack key={size} alignItems="center" gap="$3" minHeight="$5">
+            <YStack flex={1}>
+              <Paragraph fontWeight="600">pokemon</Paragraph>
+              <Paragraph color="$color11">1.2.0+34</Paragraph>
+            </YStack>
+            <Button
+              size={size}
+              {...shcUpdatePlate}
+              icon={ArrowCircleUpIcon}
+              aria-label={`Update pokemon (plate ${size})`}
+            />
+          </XStack>
+        ))}
+        <XStack alignItems="center" gap="$3" minHeight="$5">
           <YStack flex={1}>
             <Paragraph fontWeight="600">pokemon</Paragraph>
             <Paragraph color="$color11">1.2.0+34</Paragraph>
           </YStack>
-          <Button
-            size={size}
-            {...shcUpdatePlate}
-            icon={ArrowCircleUpIcon}
-            aria-label={`Update pokemon (plate ${size})`}
-          />
+          <IconButton accentInk icon={ArrowCircleUpIcon} aria-label="Update pokemon" />
         </XStack>
-      ))}
-      <XStack alignItems="center" gap="$3" minHeight="$5">
-        <YStack flex={1}>
-          <Paragraph fontWeight="600">pokemon</Paragraph>
-          <Paragraph color="$color11">1.2.0+34</Paragraph>
-        </YStack>
-        <IconButton accentInk icon={ArrowCircleUpIcon} aria-label="Update pokemon" />
-      </XStack>
-    </YStack>
+      </YStack>
+    </GlyphTintFallbackProvider>
   ),
 };

package/src/Button/IconButtonGroup.spec.tsx

@@ -29,10 +29,14 @@ vi.mock("./glass", () => ({
 
 afterEach(() => {
   cleanup();
+  vi.unstubAllGlobals();
   glass.available = false;
   glass.containerLoads = 0;
 });
 
+const IPHONE =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1";
+
 const houseConfig = createDefaultThemeConfig();
 
 function Glyph({ size, weight }: { size?: number; weight?: string }) {
@@ -48,6 +52,28 @@ function houseRender(ui: ReactElement) {
 }
 
 describe("LC-176: IconButtonGroup", () => {
+  it("on iOS Safari a bar group is one glass capsule, its buttons bare glyphs on it", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    glass.available = true;
+    houseRender(
+      <Surface bar>
+        <IconButtonGroup data-testid="group">
+          <IconButton icon={Glyph} aria-label="Archive" />
+          <IconButton icon={Glyph} aria-label="Delete" />
+        </IconButtonGroup>
+        <IconButton icon={Glyph} aria-label="Back" />
+      </Surface>,
+    );
+    const group = screen.getByTestId("group");
+    expect(group.getAttribute("data-mp-icon-button-group")).toBe("glass");
+    expect(group.querySelectorAll('[data-mp-glass="web"]')).toHaveLength(1);
+    expect(group.querySelector("[data-glass]")).toBeNull();
+    for (const name of ["Archive", "Delete"])
+      expect(screen.getByLabelText(name).getAttribute("data-mp-icon-button")).not.toBe("glass");
+    // A lone bar button keeps its own circle.
+    expect(screen.getByLabelText("Back").querySelector("[data-glass]")).not.toBeNull();
+  });
+
   it("over media, the group is one capsule and its buttons draw their glyphs alone", () => {
     houseRender(
       <>

package/src/Button/IconButtonGroup.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState, type ReactNode } from "react";
 import { isWeb, Theme, View, XStack, type XStackProps } from "tamagui";
 import { loadGlassView } from "./glass";
 import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+import { isAppleTouchWeb, WebGlassFace } from "./webGlass";
 import { IconButtonGroupContext, IconButtonGroupRegistry } from "./iconButtonGroupContext";
 
 /**
@@ -55,6 +56,44 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
       </IconButtonGroupContext.Provider>
     );
   }
+  if (bar && isWeb && isAppleTouchWeb()) {
+    // The caller's layout props stay on the outer row; the capsule hugs the
+    // buttons inside it, so a stretched slot never draws a wide empty pill.
+    return (
+      <IconButtonGroupRegistry.Provider value={register}>
+        <IconButtonGroupContext.Provider value="glass">
+          <XStack
+            alignItems="center"
+            data-mp-icon-button-group={members > 0 ? "glass" : "bar"}
+            {...rest}
+          >
+            <XStack
+              alignItems="center"
+              position="relative"
+              zIndex={0}
+              paddingHorizontal="$2"
+              gap="$1"
+              data-mp-glass-capsule=""
+            >
+              {members > 0 ? (
+                <WebGlassFace
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0,
+                    borderRadius: 100000,
+                  }}
+                />
+              ) : null}
+              {children}
+            </XStack>
+          </XStack>
+        </IconButtonGroupContext.Provider>
+      </IconButtonGroupRegistry.Provider>
+    );
+  }
   const GlassView = bar ? loadGlassView() : null;
   const row = (
     <XStack

package/src/Button/glass.spec.ts

@@ -0,0 +1,73 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-176 / LC-266: on the web only iOS Safari takes the glass face (Clay on
+ * rv_3bb3f1f65d6b981f).
+ */
+
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { cleanup, render } from "@testing-library/react";
+import { createElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { isAppleTouchWeb, loadGlassView } from "./glass";
+
+const IPHONE =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1";
+const MAC_SAFARI =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15";
+const houseConfig = createDefaultThemeConfig();
+const PIXEL =
+  "Mozilla/5.0 (Linux; Android 15; Pixel 9) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36";
+
+describe("isAppleTouchWeb", () => {
+  it("an iPhone's Safari takes the glass face", () => {
+    expect(isAppleTouchWeb({ userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 })).toBe(
+      true,
+    );
+  });
+
+  it("iPadOS reports a Mac with touch, and is iOS", () => {
+    expect(
+      isAppleTouchWeb({ userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 5 }),
+    ).toBe(true);
+  });
+
+  it("a Mac, an Android phone and no navigator draw the bare glyph", () => {
+    expect(
+      isAppleTouchWeb({ userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 0 }),
+    ).toBe(false);
+    expect(isAppleTouchWeb({ userAgent: PIXEL, platform: "Linux armv8l", maxTouchPoints: 5 })).toBe(
+      false,
+    );
+    expect(isAppleTouchWeb(undefined)).toBe(false);
+  });
+});
+
+describe("loadGlassView on the web", () => {
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it("iOS Safari's glass circle sits under the glyph it backs", () => {
+    vi.stubGlobal("navigator", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 });
+    const Glass = loadGlassView();
+    expect(Glass).not.toBeNull();
+    const { container } = render(
+      createElement(
+        TamaguiProvider,
+        { config: houseConfig.tamagui, defaultTheme: "light", disableInjectCSS: true },
+        createElement(Glass!, { style: { position: "absolute" } }),
+      ),
+    );
+    const face = container.querySelector('[data-mp-glass="web"]') as HTMLElement | null;
+    expect(face).not.toBeNull();
+    expect(face!.style.zIndex).toBe("-1");
+  });
+
+  it("every other browser draws the bare glyph", () => {
+    vi.stubGlobal("navigator", { userAgent: PIXEL, platform: "Linux armv8l", maxTouchPoints: 5 });
+    expect(loadGlassView()).toBeNull();
+  });
+});

package/src/Button/glass.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from "react";
+import { isAppleTouchWeb, WebGlassFace } from "./webGlass";
 
 /** The slice of expo-glass-effect's `GlassView` an icon button draws. */
 export type GlassViewComponent = ComponentType<{
@@ -15,13 +16,17 @@ export type GlassContainerComponent = ComponentType<{
   children?: ReactNode;
 }>;
 
+export { isAppleTouchWeb } from "./webGlass";
+
 /**
  * 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.
+ * Native iOS draws it from expo-glass-effect (`glass.native.ts`; Android
+ * probes null). On the web only iOS Safari takes the glass face (Clay on
+ * rv_3bb3f1f65d6b981f: "Is there a way to have the buttons at the bottom be
+ * liquid glass if it's an iPhone"); every other browser draws the bare glyph.
  */
 export function loadGlassView(): GlassViewComponent | null {
-  return null;
+  return isAppleTouchWeb() ? (WebGlassFace as GlassViewComponent) : null;
 }
 
 /**

package/src/Button/iconButtonGroupContext.ts

@@ -4,7 +4,8 @@ const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : us
 
 /**
  * LC-176: the ground an `IconButtonGroup` paints under its buttons. `media`
- * is one shared material capsule and `glass` one shared Liquid Glass capsule,
+ * is one shared material capsule and `glass` one shared glass capsule (Liquid
+ * Glass on iOS 26, its web twin in iOS Safari),
  * so a button inside draws its bare glyph instead of its own circle.
  */
 export type IconButtonGroupGround = "media" | "glass" | null;

package/src/Button/index.tsx

@@ -34,7 +34,7 @@ import {
   ensureKeyboardModalityTracking,
   useBarSurface,
   useElevatedSurface,
-  useIdentityInkOnSurface,
+  useGlyphTintOnSurface,
   useResolvedKnobs,
   useTouchSurface,
   type ControlTier,
@@ -443,22 +443,45 @@ export function iconButtonGlyphPx(rowLinePx: number | undefined): number {
 /** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
 const INLINE_GLYPH_RATIO = 1.2;
 
+/**
+ * LC-176: Phosphor bold's stem is 0.12 of its ink, an SF Symbols bold plus's
+ * 0.18 (measured at 17 and 24pt). An outline stroke this wide, in the 256-unit
+ * grid, brings a bold glyph to SF semibold-bold (0.154); a wider one closes
+ * Phosphor bold's 16-unit counters (the trash lid, copy's overlap).
+ */
+export const GLYPH_BOLD_STROKE_UNITS = 8;
+
+function boldStroke(weight: "regular" | "bold", color = "currentColor") {
+  return weight === "bold"
+    ? {
+        stroke: color,
+        strokeWidth: GLYPH_BOLD_STROKE_UNITS,
+        strokeLinejoin: "round" as const,
+      }
+    : undefined;
+}
+
 function withGlyphWeight(
   icon: IconLike | undefined,
   size: number,
   weight: "regular" | "bold",
+  floor = false,
 ): IconLike | undefined {
   if (icon == null || icon === false) return icon;
-  if (isValidElement<{ size?: number; weight?: string }>(icon)) {
+  if (isValidElement<{ size?: number; weight?: string; color?: string }>(icon)) {
+    const resolved = (icon.props.weight ?? weight) as "regular" | "bold";
+    const own = icon.props.size;
     return cloneElement(icon, {
-      ...(icon.props.size == null ? { size } : undefined),
+      ...(own == null || (floor && typeof own === "number" && own < size) ? { size } : undefined),
       ...(icon.props.weight == null ? { weight } : undefined),
+      ...boldStroke(resolved, icon.props.color),
     });
   }
   if (typeof icon === "function" || (typeof icon === "object" && "$$typeof" in icon)) {
     return createElement(icon as ComponentType<{ size?: number; weight?: string }>, {
       size,
       weight,
+      ...boldStroke(weight),
     });
   }
   return icon;
@@ -568,7 +591,7 @@ export function Button({
   const parentScopeTheme = useTheme();
   const pageOutlineColor = parentScopeTheme.outlineColor?.val as string | undefined;
   const hostAccentInk = useAccentOnSurface();
-  const hostIdentityInk = useIdentityInkOnSurface();
+  const glyphTint = useGlyphTintOnSurface();
   const grouped = useControlGrouped();
   // LC-176 ICON-BUTTON: with no label, the button is its glyph. It paints no
   // plate at rest and takes the bar tint, unless the caller asked for a frame
@@ -693,7 +716,7 @@ export function Button({
   // Accent and intent buttons, chromeless, and grouped segments keep their
   // own contracts.
   const tier: ControlTier | undefined =
-    activeThemeName || chromeless || grouped
+    activeThemeName || chromeless || grouped || mediaPlate
       ? undefined
       : barSurface
         ? "plain"
@@ -806,7 +829,13 @@ export function Button({
   // The media plate is its own state ground; a toggle over media shows its
   // state in the glyph.
   const selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate;
-  const barInk = accentInk && chromeless && !selectedFill && !unavailable ? hostIdentityInk : null;
+  // A glyph alone holds 3:1; beside a label both take the label's AA tint.
+  const barInk =
+    accentInk && chromeless && !selectedFill && !unavailable
+      ? labelled
+        ? glyphTint.label
+        : glyphTint.glyph
+      : null;
   const inlineGlyph = iconButton && inline === true && !nested;
   // LC-176: back's caret beside its label is a bar glyph too, and so is the
   // glyph on a plate (media, or the overlay's confirm).
@@ -824,6 +853,17 @@ export function Button({
       ? loadGlassView()
       : null;
   const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
+  // LC-176: a glyph on a plate takes the plate's on-colour at full strength,
+  // never the frame's quieter default: white on the media material, the text
+  // colour on a neutral circle.
+  const plateInk =
+    unavailable || barInk || outlinedInk
+      ? undefined
+      : mediaPlate || (iconButton && groupGround === "media")
+        ? "$color12"
+        : framedCircle && !activeThemeName
+          ? hostScoped({ color: "$color12" }).color
+          : undefined;
   const framedCirclePx =
     touch && typeof sizeProp !== "number"
       ? Math.max(sizeTokenPx(resolvedSize), MIN_PRESS_TARGET)
@@ -837,13 +877,22 @@ export function Button({
         : barGlyph
           ? touch
             ? Math.max(glyphFloor, resolveButtonSizeRecipe("$6", recipeFamily, touch).iconSize)
-            : // A pointer toolbar keeps its token box (LC-54); the glyph fills it
-              // up to the same floor.
-              Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
+            : iconButton
+              ? // A bare glyph has no plate to inset from, so it takes its box
+                // less a 2pt optical margin, up to the row's glyph: the SHC
+                // "+" at $3 reaches the bar's glyph, a $2 copy beside mono
+                // text stays in proportion.
+                Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 4))
+              : // A pointer toolbar keeps its token box (LC-54); the glyph fills
+                // it up to the same floor.
+                Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
           : recipe.iconSize;
+  // LC-176: a bar glyph is never smaller than its row, whatever px the caller
+  // passed (the DataTable toolbar's 14pt token icons).
+  const barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
   const glyph =
     barGlyph || inlineGlyph || framedCircle
-      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight)
+      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor)
       : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
@@ -908,6 +957,7 @@ export function Button({
     props.color ??
     (unavailable ? disabledText.color : undefined) ??
     barInk ??
+    plateInk ??
     (textColor
       ? outlinedOnHost
         ? hostScoped({ color: textColor }).color
@@ -929,7 +979,7 @@ export function Button({
   ) : null;
   const glyphAfter =
     iconAfter && (barGlyph || inlineGlyph || framedCircle)
-      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight)
+      ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor)
       : iconAfter;
   const iconAfterElement = glyphAfter ? (
     <View flexShrink={0}>
@@ -1094,6 +1144,10 @@ export function Button({
       {...(inlineGlyph ? { marginInlineStart: "$2" as const } : undefined)}
       // The glass rounds itself, unclipped.
       {...(GlassView ? { borderRadius: 100000 } : undefined)}
+      // On the web the absolute glass circle needs its button as the
+      // containing block and stacking context, or it fills the page and
+      // paints over the glyph.
+      {...(GlassView && isWeb ? { position: "relative" as const, zIndex: 0 } : undefined)}
       {...(confirmPlate ? { borderRadius: 100000 } : undefined)}
       {...(mediaPlate
         ? {
@@ -1113,6 +1167,7 @@ export function Button({
       // text/icon color (currentColor) to the hue's readable text tier.
       {...(outlinedInk ? { color: outlinedInk } : undefined)}
       {...(barInk ? { color: barInk } : undefined)}
+      {...(plateInk ? { color: plateInk } : undefined)}
       // LC-40 DISABLED-VISIBLE: keepLabel washes the chrome (muted fill/
       // border) while label/glyphs re-anchor to the lowest AA text tier
       // (`color` inherits into currentColor icons); dimWhole dims the

package/src/Button/webGlass.ts

@@ -0,0 +1,42 @@
+import { isDarkThemeName } from "@multiplatform.one/theme";
+import { createElement } from "react";
+import { useThemeName, YStack } from "tamagui";
+import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+
+type GlassNavigator = { userAgent?: string; platform?: string; maxTouchPoints?: number };
+
+/**
+ * LC-266: iOS Safari, iPadOS included (it reports itself as a Mac with a
+ * touch screen). The one place web asks which platform it is on, so an iPhone
+ * user gets the iPhone's bar buttons in the browser too.
+ */
+export function isAppleTouchWeb(
+  nav: GlassNavigator | undefined = typeof navigator === "undefined" ? undefined : navigator,
+): boolean {
+  if (!nav) return false;
+  if (/iPhone|iPad|iPod/.test(nav.userAgent ?? "")) return true;
+  return /Mac/.test(nav.platform ?? nav.userAgent ?? "") && (nav.maxTouchPoints ?? 0) > 1;
+}
+
+const webGlassMarker = { "data-mp-glass": "web" };
+
+/**
+ * LC-176: the Liquid Glass face iOS Safari draws under a bar's icon buttons,
+ * one circle for a lone button or one capsule for an `IconButtonGroup`. It is
+ * a layer under the glyphs (absolute, z -1 in the button's stacking context):
+ * a near-white material in light and a raised grey in dark, edged by a soft
+ * drop shadow alone, with the media plate's blur.
+ */
+export function WebGlassFace({ style }: { style?: unknown }) {
+  const dark = isDarkThemeName(useThemeName());
+  return createElement(YStack, {
+    pointerEvents: "none",
+    backgroundColor: dark ? "$color4" : "$color1",
+    opacity: 0.92,
+    shadowColor: "$shadowColor",
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 3 },
+    ...webGlassMarker,
+    style: { ...(style as object), zIndex: -1, ...MEDIA_PLATE_WEB_STYLE },
+  });
+}

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -80,6 +80,14 @@ describe("FileUpload", () => {
     expect(result.container.textContent).not.toContain("Choose File");
     expect(result.container.textContent).not.toContain("Drag a file");
     expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
+    // FZ-8020 r4: the capsule floats inside the visible tile's top-trailing
+    // corner, as Photos does, never over empty dropzone.
+    const tile = result.container.querySelector('[data-file-upload="preview-tile"]');
+    expect(tile?.querySelector("img")).toBeTruthy();
+    expect(tile?.contains(actions!)).toBe(true);
+    // Round 4's critique: a $color3 tile read 1.06:1 on the page in dark, so
+    // the corner the capsule anchors to was invisible.
+    expect(tile?.className).toMatch(/_bg-color5/);
     fireEvent.click(result.getButton("Remove sprite.png")!);
     expect(remove).toHaveBeenCalledTimes(1);
   });

package/src/fields/FileUpload/index.tsx

@@ -1065,13 +1065,21 @@ export function FileUpload<
                 width="100%"
               >
                 {singlePreview ? (
-                  <YStack position="relative" maxWidth="100%">
+                  <YStack
+                    data-file-upload="preview-tile"
+                    position="relative"
+                    width="$14"
+                    height="$14"
+                    maxWidth="100%"
+                    borderRadius={cappedRadius}
+                    overflow="hidden"
+                    backgroundColor="$color5"
+                  >
                     <Image
                       src={singlePreview}
                       alt={singleFile?.name ?? existingName}
-                      width="$14"
-                      height="$14"
-                      maxWidth="100%"
+                      width="100%"
+                      height="100%"
                       objectFit="contain"
                       onLoad={(event) => {
                         if (!isWeb) return;

package/types/Button/IconButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAKvE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAoEjF"}
+{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAMvE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CA0GjF"}

package/types/Button/glass.d.ts

@@ -12,10 +12,13 @@ export type GlassContainerComponent = ComponentType<{
     style?: unknown;
     children?: ReactNode;
 }>;
+export { isAppleTouchWeb } from "./webGlass";
 /**
  * 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.
+ * Native iOS draws it from expo-glass-effect (`glass.native.ts`; Android
+ * probes null). On the web only iOS Safari takes the glass face (Clay on
+ * rv_3bb3f1f65d6b981f: "Is there a way to have the buttons at the bottom be
+ * liquid glass if it's an iPhone"); every other browser draws the bare glyph.
  */
 export declare function loadGlassView(): GlassViewComponent | null;
 /**

package/types/Button/glass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../../src/Button/glass.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,yEAAyE;AACzE,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CAC3D,CAAC,CAAC;AAEH,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,GAAG,IAAI,CAEzD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAEnE"}
+{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../../src/Button/glass.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,yEAAyE;AACzE,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CAC3D,CAAC,CAAC;AAEH,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,GAAG,IAAI,CAEzD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAEnE"}

package/types/Button/iconButtonGroupContext.d.ts

@@ -1,6 +1,7 @@
 /**
  * LC-176: the ground an `IconButtonGroup` paints under its buttons. `media`
- * is one shared material capsule and `glass` one shared Liquid Glass capsule,
+ * is one shared material capsule and `glass` one shared glass capsule (Liquid
+ * Glass on iOS 26, its web twin in iOS Safari),
  * so a button inside draws its bare glyph instead of its own circle.
  */
 export type IconButtonGroupGround = "media" | "glass" | null;

package/types/Button/iconButtonGroupContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconButtonGroupContext.d.ts","sourceRoot":"","sources":["../../src/Button/iconButtonGroupContext.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,sBAAsB,gDAA6C,CAAC;AAEjF,wBAAgB,wBAAwB,IAAI,qBAAqB,CAEhE;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,iCAAwB,MAAM,IAAI,SAAe,CAAC;AAEtF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAMhE"}
+{"version":3,"file":"iconButtonGroupContext.d.ts","sourceRoot":"","sources":["../../src/Button/iconButtonGroupContext.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,sBAAsB,gDAA6C,CAAC;AAEjF,wBAAgB,wBAAwB,IAAI,qBAAqB,CAEhE;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,iCAAwB,MAAM,IAAI,SAAe,CAAC;AAEtF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAMhE"}

package/types/Button/index.d.ts

@@ -173,6 +173,13 @@ export declare const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
  * target.
  */
 export declare function iconButtonGlyphPx(rowLinePx: number | undefined): number;
+/**
+ * LC-176: Phosphor bold's stem is 0.12 of its ink, an SF Symbols bold plus's
+ * 0.18 (measured at 17 and 24pt). An outline stroke this wide, in the 256-unit
+ * grid, brings a bold glyph to SF semibold-bold (0.154); a wider one closes
+ * Phosphor bold's 16-unit counters (the trash lid, copy's overlap).
+ */
+export declare const GLYPH_BOLD_STROKE_UNITS = 8;
 export declare function Button({ children, action, form: formProp, loading, accent, error, warning, success, skeleton, outlined, disabled, theme, onPress, onKeyDown, tabIndex, icon, iconAfter, selected, nested, circular: circularProp, chromeless, edge, accentInk, plate, inline, glyphWeight, verb, noun, actionRole, disabledReason, disabledReasonPlacement, sizeRecipeEscape, recipeFamily, height: heightProp, paddingHorizontal: paddingHorizontalProp, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var Icon: (props: {