@multiplatform.one/forms 7.67.0 → 7.69.0

package/src/AdaptivePopup/index.tsx

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

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

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

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

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