@multiplatform.one/forms 7.73.0 → 7.75.0

package/src/Button/Button.confirmFill.spec.tsx

@@ -0,0 +1,141 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-8439: an overlay's one confirm is the accent ✓ (IconButton
+ * plate="primary"), never a black pill. Clay on the FZ-8116 deck
+ * (rv_0ea65e640a0ef261): "The cancel and Move button are not how we like to
+ * do buttons." His complaint was the word in a pill, not ink: a hued preset
+ * fills the ✓ circle with its accent, and the hue-less house preset fills it
+ * with its ink under an inverse check, iOS's mono style (rv_d2757722a7cb0992,
+ * "ink").
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import {
+  contrastRatio,
+  createDefaultThemeConfig,
+  normalizeToHex,
+  relativeLuminance,
+} 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 Check({ size, color }: { size?: number; color?: string }) {
+  return <svg data-glyph="" width={size} height={size} color={color} />;
+}
+
+function renderIn(ui: ReactElement, theme: string) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={theme}>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function injectedRuleValue(className: string, property: string): string | null {
+  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(property);
+      if (value) return value.trim();
+    }
+  }
+  return null;
+}
+
+function resting(el: Element, prefix: string, property: string): string | null {
+  const cls = Array.from(el.classList).find(
+    (c) => c.startsWith(prefix) && !new RegExp(`^${prefix}0(hover|active|focus|press)`).test(c),
+  );
+  return cls ? injectedRuleValue(cls, property) : null;
+}
+
+/**
+ * Tamagui paints `$token` values as CSS variables from the theme the Button
+ * wraps itself in; jsdom drops tamagui's theme stylesheet, so read the
+ * variable off that theme in the config, as the browser would.
+ */
+function resolvePaint(paint: string, themeName: string): string {
+  const variable = /^var\(--([^)]+)\)$/.exec(paint)?.[1];
+  if (!variable) return paint;
+  const themes = houseConfig.tamagui.themes as Record<string, Record<string, { val?: unknown }>>;
+  const theme = themes[themeName];
+  if (!theme) {
+    const near = Object.keys(themes).filter((name) => name.endsWith("_accent"));
+    throw new Error(`no theme ${themeName}; accent themes: ${near.slice(0, 12).join(", ")}`);
+  }
+  const value = theme[variable]?.val;
+  return typeof value === "string" ? resolvePaint(value, themeName) : paint;
+}
+
+function luminance(paint: string): number {
+  const hex = normalizeToHex(paint);
+  if (!hex) throw new Error(`unreadable paint ${paint}`);
+  return relativeLuminance(hex);
+}
+
+function confirmPaint(scheme: string) {
+  const confirm = screen.getByRole("button", { name: "Move" });
+  const fill = resting(confirm, "_bg-", "background-color");
+  expect(fill).toBeTruthy();
+  const glyph = confirm.querySelector("[data-glyph]")!;
+  const glyphColor = glyph.getAttribute("color");
+  const ink =
+    glyphColor && glyphColor !== "currentColor" ? glyphColor : resting(confirm, "_col-", "color");
+  expect(ink).toBeTruthy();
+  return {
+    confirm,
+    fill: luminance(resolvePaint(fill!, `${scheme}_accent`)),
+    check: luminance(resolvePaint(ink!, `${scheme}_accent`)),
+    dark: scheme.startsWith("dark"),
+  };
+}
+
+describe("FZ-8439: the overlay confirm is a ✓ circle, never a word in a pill", () => {
+  for (const scheme of SCHEMES) {
+    it(`${scheme}: the confirm is an icon-only circle named by its action`, () => {
+      renderIn(<Button plate="primary" icon={Check} aria-label="Move" />, scheme);
+      const confirm = screen.getByRole("button", { name: "Move" });
+      expect(confirm.getAttribute("data-mp-icon-button")).toBe("primary");
+      expect(confirm.textContent).toBe("");
+    });
+
+    it(`${scheme}, hue-less house preset: an ink circle under an inverse check`, () => {
+      renderIn(<Button plate="primary" icon={Check} aria-label="Move" />, scheme);
+      const { fill, check, dark } = confirmPaint(scheme);
+      // Ink is the scheme's text pole: dark on a light page, light on a dark one.
+      if (dark) expect(fill).toBeGreaterThan(0.6);
+      else expect(fill).toBeLessThan(0.05);
+      expect(contrastRatio(check, fill)).toBeGreaterThanOrEqual(4.5);
+      // r3: white wherever it holds on the fill, so light mode's ✓ is white.
+      if (!dark) expect(check).toBeCloseTo(1, 5);
+    });
+
+    it(`${scheme}, hued preset: the circle takes the accent hue`, () => {
+      renderIn(<Button plate="primary" icon={Check} aria-label="Move" />, `${scheme}_blue`);
+      const { fill, check } = confirmPaint(`${scheme}_blue`);
+      expect(fill).toBeGreaterThan(0.05);
+      expect(fill).toBeLessThan(0.6);
+      expect(contrastRatio(check, fill)).toBeGreaterThanOrEqual(3);
+      // r3 (Clay): the ✓ on an accent fill is white, iOS's checkmark.
+      expect(check).toBeCloseTo(1, 5);
+    });
+
+    it(`${scheme}: the circle's rest fill is the accent as a literal, so native paints the browser's colour`, () => {
+      renderIn(<Button plate="primary" icon={Check} aria-label="Move" />, scheme);
+      const confirm = screen.getByRole("button", { name: "Move" });
+      const fill = resting(confirm, "_bg-", "background-color");
+      const accent = resolvePaint("var(--background)", `${scheme}_accent`);
+      expect(normalizeToHex(fill!)).toBe(normalizeToHex(accent));
+      expect(fill).not.toMatch(/^var\(/);
+    });
+  }
+});

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

@@ -14,16 +14,22 @@
  */
 
 import { cleanup, render, screen } from "@testing-library/react";
-import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
+import {
+  createDefaultThemeConfig,
+  GlyphTintFallbackProvider,
+  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,
+  GLYPH_BOLD_STROKE_UNITS,
   ICON_BUTTON_CIRCLE_GLYPH_RATIO,
   ICON_BUTTON_GLYPH_PX,
   ICON_BUTTON_NEUTRAL_GLYPH_PX,
   IconButton,
+  IconButtonGroup,
   iconButtonGlyphPx,
   labelLinePx,
 } from "./index";
@@ -44,8 +50,27 @@ 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 Glyph({
+  size,
+  color,
+  weight,
+  strokeWidth,
+}: {
+  size?: number;
+  color?: string;
+  weight?: string;
+  strokeWidth?: number;
+}) {
+  return (
+    <svg
+      data-glyph=""
+      data-weight={weight}
+      data-stroke-width={strokeWidth}
+      width={size}
+      height={size}
+      color={color}
+    />
+  );
 }
 
 function glyphOf(label: string): SVGElement {
@@ -144,6 +169,25 @@ describe("LC-176: an icon-only Button is a bare glyph", () => {
     },
   );
 
+  it.each(SCHEMES)("%s: a bare glyph fills its box less 2pt, up to the row's glyph", (scheme) => {
+    // Round 4's critique: the SHC "+" at $3 drew a 19pt ink beside a 23pt
+    // "+" at the default size in the same app.
+    houseRender(
+      <>
+        <Button size="$3" circular chromeless accentInk icon={Glyph} aria-label="Add" />
+        <Button size="$2" circular chromeless accentInk icon={Glyph} aria-label="Copy" />
+        <Button chromeless accentInk icon={Glyph} aria-label="Default" />
+      </>,
+      scheme,
+    );
+    const glyph = (label: string) => Number(glyphOf(label).getAttribute("width"));
+    const box = (label: string) =>
+      Number(screen.getByLabelText(label).getAttribute("data-mp-button-height"));
+    for (const label of ["Add", "Copy"])
+      expect(glyph(label)).toBe(Math.min(glyph("Default"), box(label) - 4));
+    expect(glyph("Add")).toBeGreaterThanOrEqual(ICON_BUTTON_GLYPH_PX);
+  });
+
   it.each(["$3", "$4"] as const)(
     "%s: a circle the caller asks for carries its glyph at the Settings ratio, bold",
     (size) => {
@@ -183,6 +227,22 @@ describe("LC-176: an icon-only Button is a bare glyph", () => {
     expect(rest(media, "_bg-").join(" ")).not.toMatch(/transparent/);
   });
 
+  it.each(SCHEMES)("%s: a lone media plate and a group's capsule are one material", (scheme) => {
+    // Round 4's critique: the lone heart painted the tinted tier's opaque
+    // ground beside the capsule's translucent material on the same tile.
+    const { container } = houseRender(
+      <>
+        <Button plate="media" icon={Glyph} aria-label="Favourite" />
+        <IconButtonGroup plate="media">
+          <Button plate="media" icon={Glyph} aria-label="Replace" />
+        </IconButtonGroup>
+      </>,
+      scheme,
+    );
+    const capsule = container.querySelector('[data-mp-icon-button-group="media"]')!;
+    expect(rest(screen.getByLabelText("Favourite"), "_bg-")).toEqual(rest(capsule, "_bg-"));
+  });
+
   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);
@@ -231,6 +291,9 @@ describe("LC-176: an icon-only Button is a bare glyph", () => {
     const search = screen.getByLabelText("Search");
     expect(search.getAttribute("data-mp-icon-button")).toBe("glass");
     expect(search.querySelector("[data-glass]")).not.toBeNull();
+    // iOS Safari: the button holds its absolute glass circle under the glyph.
+    expect(search.className).toMatch(/(?:^| )_pos-relative(?: |$)/);
+    expect(search.className).toMatch(/(?:^| )_zi-0(?: |$)/);
     expect(glyphOf("Search").getAttribute("data-weight")).toBe("bold");
     // Glass is the bar button; content and inline glyphs never float on it.
     expect(screen.getByLabelText("Content").querySelector("[data-glass]")).toBeNull();
@@ -313,6 +376,25 @@ describe("LC-176: an icon-only Button is a bare glyph", () => {
     }
   });
 
+  it("a caller's small px never shrinks a bar glyph (the DataTable toolbar's 14pt icons)", () => {
+    houseRender(
+      <Surface bar>
+        <Button chromeless size="$3" icon={Glyph} aria-label="Bare" />
+        <Button chromeless size="$3" icon={<Glyph size={14} />} aria-label="Save view" />
+        <Button icon={<Glyph size={40} />} aria-label="Large" />
+        <Button size="$3" icon={<Glyph size={14} />}>
+          Sort
+        </Button>
+      </Surface>,
+      "light",
+    );
+    const bar = Number(glyphOf("Bare").getAttribute("width"));
+    expect(Number(glyphOf("Save view").getAttribute("width"))).toBe(bar);
+    expect(Number(glyphOf("Large").getAttribute("width"))).toBe(40);
+    const sort = screen.getByText("Sort").closest("[role=button]")!.querySelector("[data-glyph]")!;
+    expect(Number(sort.getAttribute("width"))).toBe(14);
+  });
+
   it("an inline glyph is the text's size, 8pt after the value, bold and tinted in content", () => {
     houseRender(
       <>
@@ -338,4 +420,62 @@ describe("LC-176: an icon-only Button is a bare glyph", () => {
     );
     expect(glyphOf("Copy").getAttribute("data-weight")).toBe("bold");
   });
+
+  it("a bold glyph is stroked up to an SF Symbols semibold-bold stem; a regular one is not", () => {
+    // Clay's critique of round 3: the SHC + read thin. Phosphor bold's stem
+    // is 24 of a 200-unit plus (0.12); SF semibold's is 0.153, SF bold's 0.18.
+    // The trash lid's 16-unit slot must stay open, so the stroke stays under 16.
+    houseRender(
+      <>
+        <Button size="$3" circular chromeless accentInk icon={Glyph} aria-label="Add" />
+        <IconButton glyphWeight="regular" icon={Glyph} aria-label="Regular" />
+      </>,
+      "light",
+    );
+    expect(Number(glyphOf("Add").getAttribute("data-stroke-width"))).toBe(GLYPH_BOLD_STROKE_UNITS);
+    expect((24 + GLYPH_BOLD_STROKE_UNITS) / (200 + GLYPH_BOLD_STROKE_UNITS)).toBeGreaterThan(0.15);
+    expect(GLYPH_BOLD_STROKE_UNITS).toBeLessThan(16);
+    expect(glyphOf("Regular").hasAttribute("data-stroke-width")).toBe(false);
+  });
+
+  it.each(SCHEMES)(
+    "%s: a glyph on a plate takes the plate's on-colour at full strength",
+    (scheme) => {
+      houseRender(
+        <>
+          <Button plate="media" icon={Glyph} aria-label="Favourite" />
+          <Button size="$3" circular outlined icon={Glyph} aria-label="Update" />
+        </>,
+        scheme,
+      );
+      expect(rest(screen.getByLabelText("Favourite"), "_col-").join(" ")).toMatch(/color12/);
+      expect(rest(screen.getByLabelText("Update"), "_col-").length).toBeGreaterThan(0);
+    },
+  );
+
+  it.each(SCHEMES)(
+    "%s: with no hue in the theme, the tint follows the one fallback token",
+    (scheme) => {
+      houseRender(
+        <>
+          <GlyphTintFallbackProvider value="ink">
+            <Button chromeless accentInk icon={Glyph} aria-label="Ink" />
+          </GlyphTintFallbackProvider>
+          <GlyphTintFallbackProvider value="system">
+            <Button chromeless accentInk icon={Glyph} aria-label="System" />
+          </GlyphTintFallbackProvider>
+          <GlyphTintFallbackProvider value="accent">
+            <Button chromeless accentInk icon={Glyph} aria-label="Accent" />
+          </GlyphTintFallbackProvider>
+        </>,
+        scheme,
+      );
+      const ink = rest(screen.getByLabelText("Ink"), "_col-");
+      const system = rest(screen.getByLabelText("System"), "_col-");
+      const accent = rest(screen.getByLabelText("Accent"), "_col-");
+      expect(system).not.toEqual(ink);
+      expect(accent).not.toEqual(ink);
+      expect(accent).not.toEqual(system);
+    },
+  );
 });

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,42 @@ 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("a lone glass circle fills the button's border box, as wide as the ✓ beside it (FZ-8439)", () => {
+    glass.available = true;
+    houseRender(
+      <Surface bar>
+        <IconButton icon={Glyph} aria-label="Close" />
+      </Surface>,
+    );
+    const face = screen.getByLabelText("Close").querySelector<HTMLElement>("[data-glass]")!;
+    const inset = Number.parseFloat(face.style.top);
+    expect(inset).toBeLessThan(0);
+    for (const side of ["right", "bottom", "left"] as const)
+      expect(Number.parseFloat(face.style[side])).toBe(inset);
+  });
+
   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;
 }
 
 /**