@multiplatform.one/forms 7.81.2 → 7.82.1

package/src/Button/index.tsx

@@ -37,6 +37,7 @@ import {
   normalizeToHex,
   relativeLuminance,
   useBarSurface,
+  useFieldSurface,
   useElevatedSurface,
   useGlyphTintOnSurface,
   useResolvedKnobs,
@@ -80,7 +81,11 @@ import { useControlGrouped } from "../shared/groupContext";
 import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
 import { loadGlassView } from "./glass";
 import { boldStroke, GLYPH_BOLD_STROKE_UNITS, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "./circleGlyph";
-import { useIconButtonGroupGround, useIconButtonGroupMember } from "./iconButtonGroupContext";
+import {
+  GlyphPlateContext,
+  useIconButtonGroupGround,
+  useIconButtonGroupMember,
+} from "./iconButtonGroupContext";
 
 export { GLYPH_BOLD_STROKE_UNITS, ICON_BUTTON_CIRCLE_GLYPH_RATIO };
 
@@ -614,14 +619,24 @@ export function Button({
   // (`outlined`, `circular`, `chromeless={false}`) or a segment owns it.
   const labelled = verb != null || (children != null && children !== false && children !== "");
   const iconOnly = !labelled && Boolean(icon || iconAfter);
+  // LC-176 (FZ-8711): an icon button in a field's leading or trailing slot is
+  // part of the field: the bare tinted glyph on every platform, with no glass,
+  // plate, frame or fill of its own, whatever the caller or the bar asked for.
+  const fieldSurface = useFieldSurface();
+  const fieldGlyph = iconOnly && fieldSurface;
+  if (fieldGlyph) {
+    outlined = false;
+    if (chromeless === false) chromeless = undefined;
+  }
   // LC-176: `circular chromeless` paints no plate, so an icon-only one is an
   // icon button like any other (the SHC console's add and copy buttons).
-  const circular = circularProp && !(iconOnly && chromeless === true && plate == null);
+  const circular =
+    circularProp && !fieldGlyph && !(iconOnly && chromeless === true && plate == null);
   // LC-176: inside a group's shared capsule a button draws its glyph alone.
   const groupGround = useIconButtonGroupGround();
   useIconButtonGroupMember(iconOnly);
-  const mediaPlate = iconOnly && plate === "media" && groupGround !== "media";
-  const confirmPlate = iconOnly && primaryPlate;
+  const mediaPlate = iconOnly && plate === "media" && groupGround !== "media" && !fieldGlyph;
+  const confirmPlate = iconOnly && primaryPlate && !fieldGlyph;
   const iconButton =
     iconOnly &&
     !mediaPlate &&
@@ -642,10 +657,15 @@ export function Button({
   // An action inline with a value (copy beside an address) is tinted like a
   // link, so it reads as the one pressable thing on the line.
   const neutralGlyph =
-    iconButton && !(theme ?? intent) && !barSurface && accentInk == null && inline !== true;
+    iconButton &&
+    !(theme ?? intent) &&
+    !barSurface &&
+    !fieldGlyph &&
+    accentInk == null &&
+    inline !== true;
   if (iconButton) {
     chromeless = true;
-    accentInk = accentInk ?? (!(theme ?? intent) && (barSurface || inline === true));
+    accentInk = accentInk ?? (!(theme ?? intent) && (barSurface || fieldGlyph || inline === true));
   }
   // LC-176: a glyph that is the whole button is bold, so it reads as one.
   const resolvedGlyphWeight = glyphWeight ?? (iconOnly ? "bold" : "regular");
@@ -845,7 +865,7 @@ export function Button({
     selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : undefined);
   // 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 selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate && !fieldGlyph;
   // A glyph alone holds 3:1; beside a label both take the label's AA tint.
   const barInk =
     accentInk && chromeless && !selectedFill && !unavailable && !confirmPlate
@@ -863,10 +883,18 @@ export function Button({
   const glyphFloor = iconButtonGlyphPx(labelLine);
   // LC-176: on iOS 26 a bar's icon button sits in system Liquid Glass, the
   // native bar button, and iOS Safari draws its web face. Elsewhere, and on a
-  // binary without the module, it stays the bare tinted glyph (FZ-8666).
+  // binary without the module, it stays the bare tinted glyph (FZ-8666). In a
+  // field's slot it is always that glyph (FZ-8711).
   const glassGroup = groupGround === "glass";
   const GlassView =
-    iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill && !glassGroup
+    iconButton &&
+    !inlineGlyph &&
+    !nested &&
+    accentInk &&
+    barSurface &&
+    !fieldGlyph &&
+    !selectedFill &&
+    !glassGroup
       ? loadGlassView()
       : null;
   const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
@@ -1125,11 +1153,18 @@ export function Button({
     : mediaPlate
       ? { backgroundColor: "$shadow5" }
       : undefined;
+  // LC-176: a glyph on a visible ground sits at that ground's centre, and
+  // the ground, not the glyph, takes the gutter (FZ-8442).
+  const glyphPlated = Boolean(
+    GlassView || groupGround || mediaPlate || confirmPlate || framedCircle,
+  );
   // A square box, so an `edge` pull puts the glyph itself on the gutter.
-  // On glass the circle, not the glyph, sits on the margin.
   const glassInset = typeof resolvedBorderWidth === "number" ? -resolvedBorderWidth : 0;
-  const glyphEdgePull =
-    GlassView || glassGroup ? 0 : iconButton ? -Math.max(0, (visualPx - iconSize) / 2) : edgePull;
+  const glyphEdgePull = glyphPlated
+    ? 0
+    : iconButton
+      ? -Math.max(0, (visualPx - iconSize) / 2)
+      : edgePull;
   const buttonElement = (
     <ButtonFrame
       // DG-ST-03: an explained disable is aria-disabled (focusable, press
@@ -1355,29 +1390,31 @@ export function Button({
       data-size-token={knobProps.sizeToken}
       {...(selectedFill ? { "aria-pressed": true, "data-mp-selected": "true" } : undefined)}
     >
-      {GlassView ? (
-        <GlassView
-          glassEffectStyle="regular"
-          isInteractive={!unavailable}
-          colorScheme={darkScheme ? "dark" : "light"}
-          style={{
-            position: "absolute",
-            top: glassInset,
-            right: glassInset,
-            bottom: glassInset,
-            left: glassInset,
-            borderRadius: visualPx / 2,
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          {iconElement}
-        </GlassView>
-      ) : (
-        iconElement
-      )}
-      {labelContent}
-      {iconAfterElement}
+      <GlyphPlateContext.Provider value={glyphPlated}>
+        {GlassView ? (
+          <GlassView
+            glassEffectStyle="regular"
+            isInteractive={!unavailable}
+            colorScheme={darkScheme ? "dark" : "light"}
+            style={{
+              position: "absolute",
+              top: glassInset,
+              right: glassInset,
+              bottom: glassInset,
+              left: glassInset,
+              borderRadius: visualPx / 2,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {iconElement}
+          </GlassView>
+        ) : (
+          iconElement
+        )}
+        {labelContent}
+        {iconAfterElement}
+      </GlyphPlateContext.Provider>
     </ButtonFrame>
   );
 
@@ -1445,4 +1482,5 @@ export function IconButton(props: IconButtonProps) {
 }
 
 export { IconButtonGroup } from "./IconButtonGroup";
+export { useGlyphOnPlate } from "./iconButtonGroupContext";
 export type { IconButtonGroupProps } from "./IconButtonGroup";

package/src/FloatingPanel/FloatingPanel.menuFace.native.spec.tsx

@@ -631,10 +631,10 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    expect(menu()).toBeNull();
+    act(() => answer?.(plate));
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 180);
-    expect(panel.style.opacity).toBe("0");
-    act(() => answer?.(plate));
     expect(panel.style.opacity).toBe("1");
     expect(panel.style.left).toBe(`${plate.x + plate.width - MENU_MIN_WIDTH}px`);
   });

package/src/FloatingPanel/FloatingPanel.openOnMount.native.spec.tsx

@@ -0,0 +1,198 @@
+/**
+ * FZ-8725: a menu opened on mount, before its trigger is measured, presents
+ * its Modal only once the measure lands, and no backdrop ever stands without
+ * a placed panel. The Kitchen Sink Account Menu deep link froze the screen:
+ * the previous story's menu presented in its mount commit and was torn down
+ * mid-presentation, leaving an invisible modal over every tap.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useState, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { MENU_MIN_WIDTH } from "./compactFace";
+import { FloatingPanel } from "./index.native";
+
+const modal = vi.hoisted(() => ({ visible: [] as boolean[] }));
+
+vi.mock("react-native-web", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return {
+    ...actual,
+    ActionSheetIOS: undefined,
+    Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) => {
+      modal.visible.push(visible);
+      return visible ? children : null;
+    },
+    useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+  };
+});
+
+const trigger = { x: 334, y: 292, width: 44, height: 44 };
+beforeEach(() => {
+  vi.useFakeTimers();
+  modal.visible = [];
+  // RN-web's measureInWindow reads the node's client rect on a timer.
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+    x: trigger.x,
+    y: trigger.y,
+    left: trigger.x,
+    top: trigger.y,
+    width: trigger.width,
+    height: trigger.height,
+    right: trigger.x + trigger.width,
+    bottom: trigger.y + trigger.height,
+    toJSON: () => ({}),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+function AccountMenu({ label = "Account" }: { label?: string }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      anchorMode="cover-trigger"
+      triggerEcho={false}
+      iconCover
+      coverAlign="auto"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Button icon={PlusIcon} aria-label={label} />}
+      triggerA11y={{ label }}
+    >
+      <Text>Sign out</Text>
+    </FloatingPanel>
+  );
+}
+
+const layer = () => document.querySelector('[data-testid="floating-panel-menu-layer"]');
+const menu = () => document.querySelector<HTMLElement>('[data-testid="floating-panel-menu"]');
+const backdrop = (result: ReturnType<typeof renderWithProviders>) =>
+  result.queryByRole("button", { name: "Close" });
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+}
+
+type FiberLike = { memoizedProps?: Record<string, unknown>; return?: FiberLike };
+
+/** The live prop a component took: RN-web drops the ones it has no DOM use for. */
+function propOf<T>(node: Element, name: string): T | undefined {
+  const key = Object.keys(node).find((candidate) => candidate.startsWith("__reactFiber$"));
+  let fiber = (node as unknown as Record<string, FiberLike | undefined>)[key ?? ""];
+  while (fiber) {
+    const value = fiber.memoizedProps?.[name];
+    if (value !== undefined) return value as T;
+    fiber = fiber.return;
+  }
+  return undefined;
+}
+
+function measure() {
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+/** RN-web parks onLayout on the node for a ResizeObserver happy-dom never fires. */
+function layout(node: Element, width: number, height: number) {
+  const onLayout = (node as unknown as { __reactLayoutHandler?: (event: unknown) => void })
+    .__reactLayoutHandler;
+  expect(onLayout).toBeTypeOf("function");
+  act(() => {
+    onLayout?.({ nativeEvent: { layout: { x: 0, y: 0, width, height } } });
+  });
+}
+
+/** Never a backdrop on screen without the panel it closes. */
+function expectNoBareBackdrop(result: ReturnType<typeof renderWithProviders>) {
+  if (backdrop(result)) expect(menu()?.style.opacity).toBe("1");
+}
+
+describe("FloatingPanel opened on mount (FZ-8725)", () => {
+  it("presents nothing until the trigger is measured", () => {
+    const result = renderWithProviders(<AccountMenu />);
+    expect(modal.visible.length).toBeGreaterThan(0);
+    expect(modal.visible.every((visible) => !visible)).toBe(true);
+    expect(layer()).toBeNull();
+    expect(backdrop(result)).toBeNull();
+    expect(result.getAllByRole("button", { name: "Account" }).length).toBeGreaterThan(0);
+  });
+
+  it("shows the panel over its trigger once the measure lands", () => {
+    const result = renderWithProviders(<AccountMenu />);
+    measure();
+    expect(modal.visible.at(-1)).toBe(true);
+    expect(menu()).not.toBeNull();
+    expectNoBareBackdrop(result);
+    layout(menu() as HTMLElement, MENU_MIN_WIDTH, 120);
+    expect(menu()?.style.opacity).toBe("1");
+    expect(menu()?.style.top).toBe(`${trigger.y}px`);
+    expect(menu()?.style.left).toBe(`${trigger.x + trigger.width - MENU_MIN_WIDTH}px`);
+    expect(backdrop(result)).not.toBeNull();
+    expectNoBareBackdrop(result);
+  });
+
+  it("keeps the backdrop and the modal flag off while the panel is still unplaced", () => {
+    const result = renderWithProviders(<AccountMenu />);
+    measure();
+    expect(menu()?.style.opacity).toBe("0");
+    expect(backdrop(result)).toBeNull();
+    expect(propOf<boolean>(layer() as Element, "accessibilityViewIsModal")).toBe(false);
+    layout(menu() as HTMLElement, MENU_MIN_WIDTH, 120);
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(backdrop(result)).not.toBeNull();
+    expect(propOf<boolean>(layer() as Element, "accessibilityViewIsModal")).toBe(true);
+  });
+
+  it("closes from the backdrop and leaves the screen tappable", () => {
+    const result = renderWithProviders(<AccountMenu />);
+    measure();
+    layout(menu() as HTMLElement, MENU_MIN_WIDTH, 120);
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    tap(backdrop(result) as HTMLElement);
+    expect(layer()).toBeNull();
+    expect(modal.visible.at(-1)).toBe(false);
+    tap(result.getAllByRole("button", { name: "Account" })[0]!);
+    measure();
+    expect(menu()).not.toBeNull();
+  });
+
+  it("never presents a menu that is swapped out before its measure lands", () => {
+    let swap = () => {};
+    function Stories() {
+      const [second, setSecond] = useState(false);
+      swap = () => setSecond(true);
+      return second ? (
+        <AccountMenu key="b" label="Account" />
+      ) : (
+        <AccountMenu key="a" label="Main" />
+      );
+    }
+    renderWithProviders(<Stories />);
+    act(() => swap());
+    const beforeMeasure = modal.visible.slice();
+    expect(beforeMeasure.every((visible) => !visible)).toBe(true);
+    measure();
+    expect(modal.visible.at(-1)).toBe(true);
+    layout(menu() as HTMLElement, MENU_MIN_WIDTH, 120);
+    expect(menu()?.style.opacity).toBe("1");
+    expect(document.querySelectorAll('[data-testid="floating-panel-menu-layer"]')).toHaveLength(1);
+  });
+});

package/src/FloatingPanel/RegularPanel.tsx

@@ -89,12 +89,14 @@ export function RegularPanel({
     ) : null;
   return (
     <RNView style={StyleSheet.absoluteFill}>
-      <Pressable
-        style={StyleSheet.absoluteFill}
-        onPress={onBackdropPress}
-        accessibilityRole="button"
-        accessibilityLabel={t("Close")}
-      />
+      {placement ? (
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={onBackdropPress}
+          accessibilityRole="button"
+          accessibilityLabel={t("Close")}
+        />
+      ) : null}
       <RNView
         testID="floating-panel-regular"
         onLayout={(e) => {

package/src/FloatingPanel/index.native.tsx

@@ -43,6 +43,11 @@
  *   and the sheet never appears. Fields should not also toggle open on native.
  * - Opening a Modal under the same finger can synthesize a backdrop press;
  *   backdrop dismiss is armed a short delay after the present begins.
+ * - An anchored panel opened before its trigger is measured (`open` on
+ *   mount) presents its Modal only once the measure lands (FZ-8725). A Modal
+ *   presented in the mount commit and torn down mid-presentation (a remount,
+ *   a story switch) left UIKit an invisible view controller over the screen:
+ *   no panel, and every tap under it dead.
  *
  * Menu face (`compactFace`, FZ-7830): instead of the sheet, a menu opens
  * over the trigger (LC-112), its top start corner on the trigger's, the
@@ -318,6 +323,8 @@ export function FloatingPanel({
     };
   }, [anchored, open, iconCover, anchorMode, groupSurface]);
 
+  const shown = open && (!anchored || (anchor !== null && group !== undefined));
+
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
   }, [backdropArmed, close]);
@@ -568,10 +575,10 @@ export function FloatingPanel({
 
   useEffect(() => {
     presentationRef.current += 1;
-    activeRef.current = open;
+    activeRef.current = shown;
     restHeightRef.current = null;
     frameCap.setValue(maxHeightRef.current);
-    if (open) {
+    if (shown) {
       enter();
     } else {
       setBackdropArmed(false);
@@ -590,7 +597,7 @@ export function FloatingPanel({
       }
       translateY.stopAnimation();
     };
-  }, [open, enter, frameCap, translateY]);
+  }, [shown, enter, frameCap, translateY]);
 
   const content = scrollable ? (
     <RNScrollView
@@ -658,7 +665,7 @@ export function FloatingPanel({
         <TrailingActionOverlay>{triggerEnd}</TrailingActionOverlay>
       </RNView>
       <Modal
-        visible={open}
+        visible={shown}
         transparent
         animationType={knobProps.motion.scrim.transition ? "fade" : "none"}
         statusBarTranslucent
@@ -1018,14 +1025,16 @@ function TriggerMenuPanel({
     <RNView
       style={StyleSheet.absoluteFill}
       testID="floating-panel-menu-layer"
-      accessibilityViewIsModal
+      accessibilityViewIsModal={placement != null}
     >
-      <Pressable
-        style={StyleSheet.absoluteFill}
-        onPress={onBackdropPress}
-        accessibilityRole="button"
-        accessibilityLabel={t("Close")}
-      />
+      {placement ? (
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={onBackdropPress}
+          accessibilityRole="button"
+          accessibilityLabel={t("Close")}
+        />
+      ) : null}
       <RNView
         testID="floating-panel-menu"
         onLayout={(e) => {
@@ -1223,14 +1232,16 @@ function PointPanel({
     <RNView
       style={StyleSheet.absoluteFill}
       testID="floating-panel-point-layer"
-      accessibilityViewIsModal
+      accessibilityViewIsModal={placement != null}
     >
-      <Pressable
-        style={StyleSheet.absoluteFill}
-        onPress={onBackdropPress}
-        accessibilityRole="button"
-        accessibilityLabel={t("Close")}
-      />
+      {placement ? (
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={onBackdropPress}
+          accessibilityRole="button"
+          accessibilityLabel={t("Close")}
+        />
+      ) : null}
       <RNView
         testID="floating-panel-point"
         onLayout={(e) => {

package/src/InputParts/index.tsx

@@ -47,6 +47,7 @@ import {
   resolveControlRadius,
   resolveGlyphPaint,
   SIZE_RECIPE_RADIUS_TOKEN_TO_STOP,
+  Surface,
   sizeRecipeBoxVariants,
   sizeRecipeForToken,
   sizeRecipeIconVariants,
@@ -530,7 +531,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
-    return (
+    return inFieldFrame(
       <FocusContext.Provider focused={focused} setFocused={setFocused}>
         {wrapNativePressable(
           onPress,
@@ -569,38 +570,40 @@ const InputGroupImpl = InputGroupFrame.styleable<{
             {trailingSlot}
           </InputGroupFrame>,
         )}
-      </FocusContext.Provider>
+      </FocusContext.Provider>,
     );
   }
 
   if (grouped) {
-    return wrapNativePressable(
-      onPress,
-      disabled,
-      <InputGroupFrame
-        touch={hydrationTouch}
-        ref={forwardedRef}
-        borderWidth={0}
-        borderRadius={0}
-        backgroundColor="transparent"
-        {...(groupedVertical
-          ? { flexGrow: 0, flexShrink: 0, flexBasis: "auto", height: controlFragment.height }
-          : { flex: 1 })}
-        elevation={undefined}
-        {...props}
-        {...passthroughSizeProps}
-        {...insetPadProps}
-        {...sizeRecipeEscapeOverride}
-        {...framePressProps}
-        {...boxRingAttrs}
-        overflow={boxOverflow}
-      >
-        {children}
-      </InputGroupFrame>,
+    return inFieldFrame(
+      wrapNativePressable(
+        onPress,
+        disabled,
+        <InputGroupFrame
+          touch={hydrationTouch}
+          ref={forwardedRef}
+          borderWidth={0}
+          borderRadius={0}
+          backgroundColor="transparent"
+          {...(groupedVertical
+            ? { flexGrow: 0, flexShrink: 0, flexBasis: "auto", height: controlFragment.height }
+            : { flex: 1 })}
+          elevation={undefined}
+          {...props}
+          {...passthroughSizeProps}
+          {...insetPadProps}
+          {...sizeRecipeEscapeOverride}
+          {...framePressProps}
+          {...boxRingAttrs}
+          overflow={boxOverflow}
+        >
+          {children}
+        </InputGroupFrame>,
+      ),
     );
   }
 
-  return (
+  return inFieldFrame(
     <FocusContext.Provider focused={focused} setFocused={setFocused}>
       {wrapNativePressable(
         onPress,
@@ -651,10 +654,20 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {trailingSlot}
         </InputGroupFrame>,
       )}
-    </FocusContext.Provider>
+    </FocusContext.Provider>,
   );
 });
 
+/**
+ * LC-176 (FZ-8711): everything inside a field's frame is part of the field,
+ * so an icon button in its leading or trailing slot draws the bare tinted
+ * glyph, never bar glass or a plate. Wrapped outside the XGroup frame so the
+ * group's own children stay its items.
+ */
+function inFieldFrame(frame: ReactNode) {
+  return <Surface field>{frame}</Surface>;
+}
+
 // ---------------------------------------------------------------------------
 // Input size variant helper
 // ---------------------------------------------------------------------------

package/src/index.ts

@@ -120,6 +120,7 @@ export {
   ICON_BUTTON_GLYPH_PX,
   ICON_BUTTON_NEUTRAL_GLYPH_PX,
   ICON_BUTTON_PRESS_OPACITY,
+  useGlyphOnPlate,
 } from "./Button";
 export type {
   ButtonProps,

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,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAA4C,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAmBrF,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,gEAAgE;IAChE,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,2CAyIjF"}
+{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAA4C,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAmBrF,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,gEAAgE;IAChE,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,2CAkJjF"}

package/types/Button/iconButtonGroupContext.d.ts

@@ -6,6 +6,14 @@
 export type IconButtonGroupGround = "media" | "glass" | null;
 export declare const IconButtonGroupContext: import("react").Context<IconButtonGroupGround>;
 export declare function useIconButtonGroupGround(): IconButtonGroupGround;
+/**
+ * LC-176: true while a glyph is drawn centred on a visible ground (a glass
+ * circle or capsule, the media plate, a framed circle). An icon that pulls
+ * itself toward a container edge for optical alignment, such as the back
+ * caret, keeps its ink centred instead.
+ */
+export declare const GlyphPlateContext: import("react").Context<boolean>;
+export declare function useGlyphOnPlate(): boolean;
 /**
  * An icon button counts itself into the group around it, so a bar group of
  * only non-icon children (a status badge in a page head) paints no capsule

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;AAED;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC;CACvE;AAED,eAAO,MAAM,6BAA6B,wDAAqD,CAAC;AAEhG,wBAAgB,yBAAyB,IAAI,sBAAsB,GAAG,IAAI,CAEzE"}
+{"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;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,kCAAuB,CAAC;AAEtD,wBAAgB,eAAe,IAAI,OAAO,CAEzC;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,iCAAwB,MAAM,IAAI,SAAe,CAAC;AAEtF,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAMhE;AAED;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC;CACvE;AAED,eAAO,MAAM,6BAA6B,wDAAqD,CAAC;AAEhG,wBAAgB,yBAAyB,IAAI,sBAAsB,GAAG,IAAI,CAEzE"}

package/types/Button/index.d.ts

@@ -197,5 +197,6 @@ export interface IconButtonProps extends Omit<ButtonProps, "children" | "icon" |
  */
 export declare function IconButton(props: IconButtonProps): import("react/jsx-runtime").JSX.Element;
 export { IconButtonGroup } from "./IconButtonGroup";
+export { useGlyphOnPlate } from "./iconButtonGroupContext";
 export type { IconButtonGroupProps } from "./IconButtonGroup";
 //# sourceMappingURL=index.d.ts.map