@multiplatform.one/forms 7.77.1 → 7.78.0

package/src/Button/IconButtonGroup.tsx

@@ -1,40 +1,64 @@
-import { radiusClassProps, useBarSurface } from "@multiplatform.one/theme";
-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";
+import { isDarkThemeName, radiusClassProps, useBarSurface } from "@multiplatform.one/theme";
+import { Children, useCallback, useMemo, useRef, useState, type ReactNode } from "react";
+import { isWeb, Theme, useThemeName, View, XStack, type XStackProps } from "tamagui";
+import { loadGlassContainer, loadGlassView } from "./glass";
+import { isAppleTouchWeb } from "./webGlass";
+import {
+  IconButtonGroupContext,
+  IconButtonGroupRegistry,
+  IconButtonGroupSurfaceContext,
+  type IconButtonGroupSurface,
+} from "./iconButtonGroupContext";
 
-/**
- * LC-176: how far apart two Liquid Glass circles may sit and still merge. Half
- * the 44pt target, so neighbours on the bar's gap always join.
- */
-export const ICON_BUTTON_GLASS_MERGE_PX = 22;
+/** UIGlassContainerEffect's own default: the system decides when glass merges. */
+const SYSTEM_GLASS_SPACING = 0;
+
+type MeasurableView = {
+  measureInWindow?: (
+    callback: (x: number, y: number, width: number, height: number) => void,
+  ) => void;
+};
 
 export interface IconButtonGroupProps extends XStackProps {
-  /** Over imagery or video: the group shares one material capsule. */
+  /** Over imagery or video: the group shares one dark capsule. */
   plate?: "media";
   children?: ReactNode;
 }
 
 /**
  * LC-176: icon buttons that sit side by side. Grounds merge, they never stand
- * as a row of separate circles: on iOS 26 the bar's group is one Liquid Glass
- * capsule, as the system draws a bar's item group (merging each circle through
- * the glass container left a waist between them, FZ-8158); over media the
- * group shares one material capsule; a bare row stays bare. A lone button
- * keeps its own circle, and a bar group with no icon button in it paints no
- * capsule (FZ-8494).
+ * as a row of separate circles: on iOS 26 the bar's group sits in one system
+ * Liquid Glass capsule, as the system draws a bar's item group (merging each
+ * circle through the glass container left a waist between them, FZ-8158), so
+ * press and merge are the system's; over media the group shares one dark
+ * capsule; a bare row stays bare. A lone button keeps its own circle, and a
+ * bar group with no icon button in it paints no capsule (FZ-8494).
  */
 export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupProps) {
   const bar = useBarSurface();
+  const dark = isDarkThemeName(useThemeName());
   const [capsuleHeight, setCapsuleHeight] = useState(0);
   const [members, setMembers] = useState(0);
   const register = useCallback(() => {
     setMembers((count) => count + 1);
     return () => setMembers((count) => count - 1);
   }, []);
+  const capsuleRef = useRef<MeasurableView | null>(null);
+  const surface = useMemo<IconButtonGroupSurface>(
+    () => ({
+      measure(callback) {
+        const node = capsuleRef.current;
+        if (typeof node?.measureInWindow !== "function") {
+          callback(null);
+          return;
+        }
+        node.measureInWindow((x, y, width, height) =>
+          callback(width > 0 && height > 0 ? { x, y, width, height, radius: height / 2 } : null),
+        );
+      },
+    }),
+    [],
+  );
   if (plate === "media") {
     return (
       <IconButtonGroupContext.Provider value="media">
@@ -47,7 +71,6 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
             overflow="hidden"
             data-mp-icon-button-group="media"
             {...radiusClassProps("R-IDENTITY", "icon button plate")}
-            {...(isWeb ? { style: MEDIA_PLATE_WEB_STYLE } : undefined)}
             {...rest}
           >
             {children}
@@ -56,7 +79,8 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
       </IconButtonGroupContext.Provider>
     );
   }
-  if (bar && isWeb && isAppleTouchWeb()) {
+  const GlassView = bar ? loadGlassView() : null;
+  if (GlassView && 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 (
@@ -76,7 +100,7 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
               data-mp-glass-capsule=""
             >
               {members > 0 ? (
-                <WebGlassFace
+                <GlassView
                   style={{
                     position: "absolute",
                     top: 0,
@@ -94,42 +118,56 @@ export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupPro
       </IconButtonGroupRegistry.Provider>
     );
   }
-  const GlassView = bar ? loadGlassView() : null;
+  const capsule = GlassView != null && members > 0;
+  // The capsule hugs its buttons with the web twin's $2 end inset and $1 gap,
+  // so its first and last items never sit on its curve (FZ-8550). A group of
+  // one button is a lone button, and keeps its circle.
+  const lone = members === 1 && Children.toArray(children).length === 1;
   const row = (
     <XStack
       alignItems="center"
-      data-mp-icon-button-group={GlassView && members > 0 ? "glass" : bar ? "bar" : "row"}
+      data-mp-icon-button-group={capsule ? "glass" : bar ? "bar" : "row"}
       {...rest}
+      {...(capsule && !lone ? { paddingHorizontal: "$2" as const, gap: "$1" as const } : null)}
     >
       {children}
     </XStack>
   );
   if (!GlassView) return row;
+  // The buttons sit inside the glass, so touches reach it and the system
+  // answers the press. It stays mounted with no effect until a button
+  // registers, or the swap would remount the buttons that are registering.
+  const glass = (
+    <GlassView
+      glassEffectStyle={capsule ? "regular" : "none"}
+      isInteractive={capsule}
+      colorScheme={dark ? "dark" : "light"}
+      style={{ borderRadius: capsuleHeight / 2, flexShrink: 1, minWidth: 0 }}
+    >
+      {row}
+    </GlassView>
+  );
+  const GlassContainer = loadGlassContainer();
   return (
     <IconButtonGroupRegistry.Provider value={register}>
       <IconButtonGroupContext.Provider value="glass">
-        <View
-          position="relative"
-          flexShrink={1}
-          minWidth={0}
-          onLayout={(event) => setCapsuleHeight(event.nativeEvent.layout.height)}
-        >
-          {members > 0 ? (
-            <GlassView
-              glassEffectStyle="regular"
-              pointerEvents="none"
-              style={{
-                position: "absolute",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-                borderRadius: capsuleHeight / 2,
-              }}
-            />
-          ) : null}
-          {row}
-        </View>
+        <IconButtonGroupSurfaceContext.Provider value={members > 0 ? surface : null}>
+          <View
+            ref={capsuleRef as never}
+            collapsable={false}
+            flexShrink={1}
+            minWidth={0}
+            onLayout={(event) => setCapsuleHeight(event.nativeEvent.layout.height)}
+          >
+            {GlassContainer ? (
+              <GlassContainer spacing={SYSTEM_GLASS_SPACING} style={{ flexShrink: 1, minWidth: 0 }}>
+                {glass}
+              </GlassContainer>
+            ) : (
+              glass
+            )}
+          </View>
+        </IconButtonGroupSurfaceContext.Provider>
       </IconButtonGroupContext.Provider>
     </IconButtonGroupRegistry.Provider>
   );

package/src/Button/circleGlyph.ts

@@ -4,3 +4,21 @@
  * ratio, never a small glyph lost in a big plate.
  */
 export const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+
+/**
+ * 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;
+
+export function boldStroke(weight: "regular" | "bold", color = "currentColor") {
+  return weight === "bold"
+    ? {
+        stroke: color,
+        strokeWidth: GLYPH_BOLD_STROKE_UNITS,
+        strokeLinejoin: "round" as const,
+      }
+    : undefined;
+}

package/src/Button/glass.native.spec.ts

@@ -0,0 +1,62 @@
+/**
+ * LC-176 (FZ-8666): real Liquid Glass or none. An Android binary, a binary
+ * without the module and an iOS before 26 get no glass at all, so the icon
+ * button is its plain glyph.
+ */
+import { describe, expect, it, vi } from "vitest";
+import type { GlassContainerComponent, GlassViewComponent } from "./glass";
+import { resolveSystemGlass, type GlassSources } from "./glass.native";
+
+const view = (() => null) as unknown as GlassViewComponent;
+const container = (() => null) as unknown as GlassContainerComponent;
+
+function sources(
+  nativeModule: unknown,
+  overrides: Partial<ReturnType<GlassSources["glass"]>> = {},
+): GlassSources {
+  return {
+    core: () => ({ requireOptionalNativeModule: () => nativeModule }),
+    glass: () => ({
+      GlassView: view,
+      GlassContainer: container,
+      isLiquidGlassAvailable: () => true,
+      isGlassEffectAPIAvailable: () => true,
+      ...overrides,
+    }),
+  };
+}
+
+describe("resolveSystemGlass", () => {
+  it("iOS 26 with the module gets the system's views", () => {
+    expect(resolveSystemGlass(sources({}))).toEqual({ view, container });
+  });
+
+  it("no native module (Android, a binary built without it) never requires the package", () => {
+    const glass = vi.fn();
+    const source = { ...sources(null), glass };
+    expect(resolveSystemGlass(source as unknown as GlassSources)).toBeNull();
+    expect(glass).not.toHaveBeenCalled();
+  });
+
+  it("an iOS before 26 and a beta without the API get no glass", () => {
+    expect(resolveSystemGlass(sources({}, { isLiquidGlassAvailable: () => false }))).toBeNull();
+    expect(resolveSystemGlass(sources({}, { isGlassEffectAPIAvailable: () => false }))).toBeNull();
+  });
+
+  it("a package that throws on load gets no glass", () => {
+    const source = {
+      ...sources({}),
+      glass: () => {
+        throw new Error("no module");
+      },
+    };
+    expect(resolveSystemGlass(source)).toBeNull();
+  });
+
+  it("a module with no container keeps the view", () => {
+    expect(resolveSystemGlass(sources({}, { GlassContainer: undefined }))).toEqual({
+      view,
+      container: null,
+    });
+  });
+});

package/src/Button/glass.native.ts

@@ -2,50 +2,71 @@ import type { GlassContainerComponent, GlassViewComponent } from "./glass";
 
 export type { GlassContainerComponent, GlassViewComponent } from "./glass";
 
-let cachedGlassView: GlassViewComponent | null | undefined;
-let cachedGlassContainer: GlassContainerComponent | null | undefined;
+export interface GlassSources {
+  core: () => { requireOptionalNativeModule?: (moduleName: string) => unknown };
+  glass: () => {
+    GlassView?: GlassViewComponent;
+    GlassContainer?: GlassContainerComponent;
+    isLiquidGlassAvailable?: () => boolean;
+    isGlassEffectAPIAvailable?: () => boolean;
+  };
+}
+
+// Each require sits in its own try: Metro only treats a require as optional
+// inside one, and an app without the package must still bundle.
+const liveSources: GlassSources = {
+  core: () => {
+    try {
+      return require("expo-modules-core");
+    } catch {
+      return {};
+    }
+  },
+  glass: () => {
+    try {
+      return require("expo-glass-effect");
+    } catch {
+      return {};
+    }
+  },
+};
+
+export interface SystemGlass {
+  view: GlassViewComponent;
+  container: GlassContainerComponent | null;
+}
 
 /**
- * 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).
+ * LC-176: expo-glass-effect's views, when this binary links the 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). A binary whose module predates the container keeps its capsule.
  */
-export function loadGlassView(): GlassViewComponent | null {
-  if (cachedGlassView !== undefined) return cachedGlassView;
-  cachedGlassView = null;
+export function resolveSystemGlass(sources: GlassSources = liveSources): SystemGlass | 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;
-      GlassContainer?: GlassContainerComponent;
-      isLiquidGlassAvailable?: () => boolean;
-      isGlassEffectAPIAvailable?: () => boolean;
-    };
-    if (
-      glass.GlassView &&
-      glass.isLiquidGlassAvailable?.() &&
-      glass.isGlassEffectAPIAvailable?.()
-    ) {
-      cachedGlassView = glass.GlassView;
-      cachedGlassContainer = glass.GlassContainer ?? null;
-    }
+    if (sources.core().requireOptionalNativeModule?.("ExpoGlassEffect") == null) return null;
+    const glass = sources.glass();
+    if (!glass.GlassView || !glass.isLiquidGlassAvailable?.()) return null;
+    if (!glass.isGlassEffectAPIAvailable?.()) return null;
+    return { view: glass.GlassView, container: glass.GlassContainer ?? null };
   } catch {
-    cachedGlassView = null;
+    return null;
   }
-  return cachedGlassView;
 }
 
-/**
- * LC-176: expo-glass-effect's `GlassContainer`, present exactly when
- * `loadGlassView` found Liquid Glass. A binary whose module predates the
- * container keeps separate circles rather than throwing.
- */
+let cached: SystemGlass | null | undefined;
+
+function systemGlass(): SystemGlass | null {
+  if (cached === undefined) cached = resolveSystemGlass();
+  return cached;
+}
+
+export function loadGlassView(): GlassViewComponent | null {
+  return systemGlass()?.view ?? null;
+}
+
 export function loadGlassContainer(): GlassContainerComponent | null {
-  if (cachedGlassView === undefined) loadGlassView();
-  return cachedGlassContainer ?? null;
+  return systemGlass()?.container ?? null;
 }

package/src/Button/glass.spec.ts

@@ -1,16 +1,19 @@
 /**
  * @vitest-environment jsdom
  *
- * LC-176 / LC-266: on the web only iOS Safari takes the glass face (Clay on
- * rv_3bb3f1f65d6b981f).
+ * LC-176 / LC-266 (FZ-8666): no browser can draw Liquid Glass, so no browser
+ * draws glass, iOS Safari included. The drawn face stays behind one switch in
+ * `glass.ts` until Clay answers the compare.
  */
 
-import { createDefaultThemeConfig } from "@multiplatform.one/theme";
-import { cleanup, render } from "@testing-library/react";
+import { createDefaultThemeConfig, Surface } from "@multiplatform.one/theme";
+import { cleanup, render, screen } 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";
+import { isAppleTouchWeb, loadGlassContainer, loadGlassView } from "./glass";
+import { IconButton, IconButtonGroup } from "./index";
+import { WebGlassFace } from "./webGlass";
 
 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";
@@ -44,30 +47,75 @@ describe("isAppleTouchWeb", () => {
   });
 });
 
-describe("loadGlassView on the web", () => {
+function Glyph({ size }: { size?: number }) {
+  return createElement("svg", { "data-glyph": "", width: size, height: size });
+}
+
+function renderBar(ui: ReturnType<typeof createElement>) {
+  return render(
+    createElement(
+      TamaguiProvider,
+      { config: houseConfig.tamagui, defaultTheme: "light", disableInjectCSS: true },
+      createElement(Surface, { bar: true }, ui),
+    ),
+  );
+}
+
+describe("no glass on the web (LC-176)", () => {
   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();
+  it.each([
+    ["iOS Safari", { userAgent: IPHONE, platform: "iPhone", maxTouchPoints: 5 }],
+    ["iPadOS Safari", { userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 5 }],
+    ["desktop Safari", { userAgent: MAC_SAFARI, platform: "MacIntel", maxTouchPoints: 0 }],
+    ["Android Chrome", { userAgent: PIXEL, platform: "Linux armv8l", maxTouchPoints: 5 }],
+  ])("%s loads no glass and draws the plain glyph", (_browser, nav) => {
+    vi.stubGlobal("navigator", nav);
+    expect(loadGlassView()).toBeNull();
+    expect(loadGlassContainer()).toBeNull();
+    renderBar(
+      createElement(
+        "div",
+        null,
+        createElement(
+          IconButtonGroup,
+          null,
+          createElement(IconButton, { icon: Glyph, "aria-label": "Search" }),
+          createElement(IconButton, { icon: Glyph, "aria-label": "More" }),
+        ),
+        createElement(IconButton, { icon: Glyph, "aria-label": "Back" }),
+      ),
+    );
+    expect(document.querySelector("[data-mp-glass]")).toBeNull();
+    expect(document.querySelector("[data-mp-glass-capsule]")).toBeNull();
+    expect(document.querySelector('[data-mp-icon-button-group="bar"]')).not.toBeNull();
+    for (const name of ["Search", "More", "Back"])
+      expect(screen.getByLabelText(name).getAttribute("data-mp-icon-button")).toBe("glyph");
+  });
+});
+
+describe("the drawn web face behind the switch", () => {
+  afterEach(cleanup);
+
+  it("sits under the glyph it backs, which stays its sibling", () => {
     const { container } = render(
       createElement(
         TamaguiProvider,
         { config: houseConfig.tamagui, defaultTheme: "light", disableInjectCSS: true },
-        createElement(Glass!, { style: { position: "absolute" } }),
+        createElement(
+          WebGlassFace,
+          { style: { position: "absolute" } },
+          createElement("svg", { "data-glyph": "" }),
+        ),
       ),
     );
     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();
+    expect(face!.querySelector("[data-glyph]")).toBeNull();
+    expect(face!.nextElementSibling?.hasAttribute("data-glyph")).toBe(true);
   });
 });

package/src/Button/glass.ts

@@ -4,9 +4,10 @@ import { isAppleTouchWeb, WebGlassFace } from "./webGlass";
 /** The slice of expo-glass-effect's `GlassView` an icon button draws. */
 export type GlassViewComponent = ComponentType<{
   style?: unknown;
-  glassEffectStyle?: "regular" | "clear";
+  glassEffectStyle?: "regular" | "clear" | "none";
   isInteractive?: boolean;
-  pointerEvents?: "none" | "auto" | "box-none" | "box-only";
+  colorScheme?: "auto" | "light" | "dark";
+  children?: ReactNode;
 }>;
 
 /** The slice of expo-glass-effect's `GlassContainer` an icon button group draws. */
@@ -19,20 +20,23 @@ export type GlassContainerComponent = ComponentType<{
 export { isAppleTouchWeb } from "./webGlass";
 
 /**
- * LC-176: the iOS 26 Liquid Glass material an icon button floats on in a bar.
- * 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.
+ * LC-176 (FZ-8666): iOS Safari cannot draw Liquid Glass, so it draws no glass.
+ * This is the one switch for the drawn face Clay asked for on
+ * rv_3bb3f1f65d6b981f, off since his note on rv_d481d34557e702ef, until he
+ * answers rv_c6369c2bab2ffea0.
  */
-export function loadGlassView(): GlassViewComponent | null {
-  return isAppleTouchWeb() ? (WebGlassFace as GlassViewComponent) : null;
-}
+const iosSafariGlassFace = false;
 
 /**
- * LC-176: the container that merges neighbouring Liquid Glass circles into one
- * shape, as iOS 26 groups bar buttons. Only iOS has it.
+ * LC-176: the system Liquid Glass an icon button sits in on a bar. Only native
+ * iOS 26 has it, from expo-glass-effect (`glass.native.ts`; Android probes
+ * null), so the web draws the plain glyph.
  */
+export function loadGlassView(): GlassViewComponent | null {
+  return iosSafariGlassFace && isAppleTouchWeb() ? (WebGlassFace as GlassViewComponent) : null;
+}
+
+/** LC-176: the system's Liquid Glass container. Only iOS has it. */
 export function loadGlassContainer(): GlassContainerComponent | null {
   return null;
 }

package/src/Button/iconButtonGroupContext.ts

@@ -4,9 +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 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.
+ * is one shared dark capsule and `glass` one shared Liquid Glass capsule, so
+ * a button inside draws its bare glyph instead of its own circle.
  */
 export type IconButtonGroupGround = "media" | "glass" | null;
 
@@ -30,3 +29,28 @@ export function useIconButtonGroupMember(iconOnly: boolean): void {
     [iconOnly, register],
   );
 }
+
+/**
+ * The window frame and corner radius of the plate an `IconButtonGroup` paints
+ * (a native Liquid Glass capsule). Native has no DOM to walk, so a panel
+ * opening from a grouped button reads the plate it covers here (LC-112,
+ * FZ-8550).
+ */
+export interface IconButtonGroupPlate {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+}
+
+export interface IconButtonGroupSurface {
+  /** Answers once: the plate, or null when it cannot be measured. */
+  measure(callback: (plate: IconButtonGroupPlate | null) => void): void;
+}
+
+export const IconButtonGroupSurfaceContext = createContext<IconButtonGroupSurface | null>(null);
+
+export function useIconButtonGroupSurface(): IconButtonGroupSurface | null {
+  return useContext(IconButtonGroupSurfaceContext);
+}