@seed-design/lynx-react 0.7.1 → 0.8.0

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,374 @@
+import {
+  DialogBackdrop as DialogBackdropPrimitive,
+  DialogClose as DialogClosePrimitive,
+  DialogContent as DialogContentPrimitive,
+  DialogRoot as DialogRootPrimitive,
+  DialogTrigger as DialogTriggerPrimitive,
+  DialogView as DialogViewPrimitive,
+  type DialogBackdropProps as DialogPrimitiveBackdropProps,
+  type DialogCloseProps as DialogPrimitiveCloseProps,
+  type DialogContentProps as DialogPrimitiveContentProps,
+  type DialogRootProps as DialogPrimitiveRootProps,
+  type DialogTriggerProps as DialogPrimitiveTriggerProps,
+  type DialogViewProps as DialogPrimitiveViewProps,
+} from "@lynx-js/lynx-ui-dialog";
+import {
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type ReactElement,
+  type RefAttributes,
+} from "@lynx-js/react";
+import {
+  alertDialog,
+  type AlertDialogVariantProps,
+} from "@seed-design/lynx-css/recipes/alert-dialog";
+import clsx from "clsx";
+
+import type {
+  LynxAccessibilityProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+
+type AlertDialogComponent<Props> = ((props: Props) => ReactElement) & {
+  displayName?: string;
+};
+type LynxForwardRefComponent<T, Props> = ForwardRefExoticComponent<
+  PropsWithoutRef<Props> & RefAttributes<T>
+>;
+
+type NativeLifecycleHandlers = {
+  bindanimationstart?: unknown;
+  bindanimationend?: unknown;
+  bindanimationcancel?: unknown;
+  bindtransitionstart?: unknown;
+  bindtransitionend?: unknown;
+  bindtap?: unknown;
+};
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
+  createSlotRecipeContext(alertDialog);
+
+function omitHeadlessLifecycleHandlers<Props extends object>(
+  props: Props | undefined,
+): Props | undefined {
+  if (!props) return props;
+
+  const {
+    bindanimationstart: _bindanimationstart,
+    bindanimationend: _bindanimationend,
+    bindanimationcancel: _bindanimationcancel,
+    bindtransitionstart: _bindtransitionstart,
+    bindtransitionend: _bindtransitionend,
+    bindtap: _bindtap,
+    ...nativeProps
+  } = props as Props & NativeLifecycleHandlers;
+
+  return nativeProps as Props;
+}
+
+function useAlertDialogTransition(transition: boolean | undefined) {
+  const skipAnimation = useProps()?.skipAnimation === true;
+
+  return skipAnimation ? false : (transition ?? true);
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+// Root
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogRootProps
+  extends AlertDialogVariantProps,
+    Omit<DialogPrimitiveRootProps, "show" | "defaultShow" | "onShowChange"> {
+  /** Whether the alert dialog is open (controlled mode). */
+  open?: boolean;
+  /** Whether the alert dialog is open by default (uncontrolled mode). */
+  defaultOpen?: boolean;
+  /** Called when the alert dialog's open state changes. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-dialog` as an alert dialog.
+ * Refs, `asChild`, focus management, Escape-key dismissal, and close reasons are
+ * not supported by the Lynx primitive.
+ */
+export const AlertDialogRoot = forwardRef<never, AlertDialogRootProps>((props, _ref) => {
+  const [variantProps, restProps] = alertDialog.splitVariantProps(props);
+  const { children, open, defaultOpen, onOpenChange, ...nativeProps } = restProps;
+  const classNames = alertDialog(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <PropsProvider value={variantProps}>
+        <DialogRootPrimitive
+          {...nativeProps}
+          show={open}
+          defaultShow={defaultOpen}
+          onShowChange={onOpenChange}
+        >
+          {children}
+        </DialogRootPrimitive>
+      </PropsProvider>
+    </ClassNamesProvider>
+  );
+}) as AlertDialogComponent<AlertDialogRootProps>;
+AlertDialogRoot.displayName = "AlertDialogRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Trigger
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogTriggerProps extends DialogPrimitiveTriggerProps {}
+
+/** @platform Lynx — `asChild` and refs are unsupported. */
+export const AlertDialogTrigger = forwardRef<never, AlertDialogTriggerProps>((props, _ref) => {
+  const { children, transition, ...nativeProps } = props;
+  const resolvedTransition = useAlertDialogTransition(transition);
+
+  return (
+    <DialogTriggerPrimitive {...nativeProps} transition={resolvedTransition}>
+      {children}
+    </DialogTriggerPrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogTriggerProps>;
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Positioner
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogPositionerProps extends DialogPrimitiveViewProps {}
+
+/** @platform Lynx — maps to `DialogView`; refs are unsupported. */
+export const AlertDialogPositioner = forwardRef<never, AlertDialogPositionerProps>(
+  (props, _ref) => {
+    const { children, className, container, style, transition, ...nativeProps } = props;
+    const classNames = useClassNames();
+    const resolvedTransition = useAlertDialogTransition(transition);
+    const positionerStyle = container ? { width: "100%", height: "100%", ...style } : style;
+
+    return (
+      <DialogViewPrimitive
+        {...nativeProps}
+        container={container}
+        className={clsx(classNames.positioner, className)}
+        style={positionerStyle}
+        transition={resolvedTransition}
+      >
+        {children}
+      </DialogViewPrimitive>
+    );
+  },
+) as AlertDialogComponent<AlertDialogPositionerProps>;
+AlertDialogPositioner.displayName = "AlertDialogPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Backdrop
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogBackdropProps extends DialogPrimitiveBackdropProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogBackdropProps` are reserved by the headless primitive and are omitted.
+ * Alert dialogs do not dismiss when the backdrop is tapped by default.
+ */
+export const AlertDialogBackdrop = forwardRef<never, AlertDialogBackdropProps>((props, _ref) => {
+  const {
+    children,
+    className,
+    transition,
+    clickToClose = false,
+    dialogBackdropProps,
+    ...nativeProps
+  } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useAlertDialogTransition(transition);
+
+  return (
+    <DialogBackdropPrimitive
+      {...nativeProps}
+      className={clsx(classNames.backdrop, className)}
+      transition={resolvedTransition}
+      clickToClose={clickToClose}
+      dialogBackdropProps={omitHeadlessLifecycleHandlers(dialogBackdropProps)}
+    >
+      {children}
+    </DialogBackdropPrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogBackdropProps>;
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Content
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogContentProps
+  extends DialogPrimitiveContentProps,
+    LynxAccessibilityProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogContentProps` are reserved by the headless primitive and are omitted.
+ */
+export const AlertDialogContent = forwardRef<never, AlertDialogContentProps>((props, _ref) => {
+  const {
+    children,
+    className,
+    transition,
+    dialogContentProps,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "alertdialog",
+    ...nativeProps
+  } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useAlertDialogTransition(transition);
+  const resolvedDialogContentProps = {
+    "accessibility-element": accessibilityElement,
+    "accessibility-role-description": accessibilityRoleDescription,
+    ...omitHeadlessLifecycleHandlers(dialogContentProps),
+  };
+
+  return (
+    <DialogContentPrimitive
+      {...nativeProps}
+      className={clsx(classNames.content, className)}
+      transition={resolvedTransition}
+      dialogContentProps={resolvedDialogContentProps}
+    >
+      {children}
+    </DialogContentPrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogContentProps>;
+AlertDialogContent.displayName = "AlertDialogContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Local slots
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogHeaderProps extends StyleProps, LynxStyledElementProps {}
+
+export const AlertDialogHeader: LynxForwardRefComponent<unknown, AlertDialogHeaderProps> =
+  forwardRef<unknown, AlertDialogHeaderProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <view
+        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.header, className)}
+        style={style as never}
+      >
+        {children}
+      </view>
+    );
+  });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+export interface AlertDialogTitleProps
+  extends StyleProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps {}
+
+export const AlertDialogTitle: LynxForwardRefComponent<unknown, AlertDialogTitleProps> = forwardRef<
+  unknown,
+  AlertDialogTitleProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const {
+    children,
+    className,
+    "accessibility-heading": accessibilityHeading = true,
+    ...nativeProps
+  } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      className={clsx(classNames.title, className)}
+      style={style as never}
+      accessibility-heading={accessibilityHeading}
+    >
+      {children}
+    </text>
+  );
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+
+export interface AlertDialogDescriptionProps
+  extends StyleProps,
+    LynxStyledElementProps,
+    LynxAccessibilityProps {}
+
+export const AlertDialogDescription: LynxForwardRefComponent<unknown, AlertDialogDescriptionProps> =
+  forwardRef<unknown, AlertDialogDescriptionProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <text
+        {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.description, className)}
+        style={style as never}
+      >
+        {children}
+      </text>
+    );
+  });
+AlertDialogDescription.displayName = "AlertDialogDescription";
+
+export interface AlertDialogFooterProps extends StyleProps, LynxStyledElementProps {}
+
+export const AlertDialogFooter: LynxForwardRefComponent<unknown, AlertDialogFooterProps> =
+  forwardRef<unknown, AlertDialogFooterProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <view
+        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.footer, className)}
+        style={style as never}
+      >
+        {children}
+      </view>
+    );
+  });
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Action
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AlertDialogActionProps extends DialogPrimitiveCloseProps {}
+
+/** @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported. */
+export const AlertDialogAction = forwardRef<never, AlertDialogActionProps>((props, _ref) => {
+  const { children, className, transition, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useAlertDialogTransition(transition);
+
+  return (
+    <DialogClosePrimitive
+      {...nativeProps}
+      className={clsx(classNames.action, className)}
+      transition={resolvedTransition}
+    >
+      {children}
+    </DialogClosePrimitive>
+  );
+}) as AlertDialogComponent<AlertDialogActionProps>;
+AlertDialogAction.displayName = "AlertDialogAction";

package/src/components/AlertDialog/index.ts

@@ -0,0 +1,24 @@
+export {
+  AlertDialogAction,
+  type AlertDialogActionProps,
+  AlertDialogBackdrop,
+  type AlertDialogBackdropProps,
+  AlertDialogContent,
+  type AlertDialogContentProps,
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+  AlertDialogFooter,
+  type AlertDialogFooterProps,
+  AlertDialogHeader,
+  type AlertDialogHeaderProps,
+  AlertDialogPositioner,
+  type AlertDialogPositionerProps,
+  AlertDialogRoot,
+  type AlertDialogRootProps,
+  AlertDialogTitle,
+  type AlertDialogTitleProps,
+  AlertDialogTrigger,
+  type AlertDialogTriggerProps,
+} from "./AlertDialog";
+
+export * as AlertDialog from "./AlertDialog.namespace";

package/src/components/AppBar/AppBar.namespace.ts

@@ -7,6 +7,7 @@ export {
   AppBarSlot as Slot,
   AppBarSubtitle as Subtitle,
   AppBarTitle as Title,
+  type AppBarEdge as Edge,
   type AppBarIconButtonProps as IconButtonProps,
   type AppBarLeftProps as LeftProps,
   type AppBarMainProps as MainProps,

package/src/components/AppBar/AppBar.test.tsx

@@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
 import * as React from "@lynx-js/react";
 import type { MainThread } from "@lynx-js/types";
 import type { LynxIconElementProps } from "../../types";
+import { Fragment, useEffect } from "@lynx-js/react";
 import {
   act,
   fireEvent,
@@ -271,6 +272,236 @@ describe("AppBar", () => {
       expect(main).toHaveStyle({ paddingLeft: "72px", paddingRight: "72px" });
     });
   });
+
+  it.each([
+    "left",
+    "right",
+  ] as const)("bleeds both sides of a single button in the %s slot", (side) => {
+    const Slot = side === "left" ? AppBar.Left : AppBar.Right;
+    render(
+      <AppBar.Root>
+        <Slot>
+          <AppBar.IconButton accessibility-label="Back" />
+        </Slot>
+      </AppBar.Root>,
+    );
+    const button = getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+    expect(button).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(button).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it.each([
+    "left",
+    "right",
+  ] as const)("bleeds only the outer sides of buttons in the %s slot", (side) => {
+    const Slot = side === "left" ? AppBar.Left : AppBar.Right;
+    render(
+      <AppBar.Root>
+        <Slot>
+          <AppBar.IconButton accessibility-label="Search" />
+          <AppBar.IconButton accessibility-label="Share" />
+          <AppBar.IconButton accessibility-label="Close" />
+        </Slot>
+      </AppBar.Root>,
+    );
+    const buttons = getAppBarRoot().querySelectorAll(".seed-app-bar__iconButton");
+    expect(buttons).toHaveLength(3);
+    expect(buttons[0]).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[0]).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(buttons[1]).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[1]).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(buttons[2]).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[2]).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it("updates both edges when a conditional sibling changes without remounting the button", () => {
+    const mount = vi.fn();
+    function WrappedButton() {
+      useEffect(() => {
+        mount();
+      }, []);
+      return <AppBar.IconButton accessibility-label="Back" />;
+    }
+    function Example({ showCustom }: { showCustom: boolean }) {
+      return (
+        <AppBar.Root>
+          <AppBar.Left>
+            <WrappedButton />
+            {showCustom && (
+              <AppBar.Slot>
+                <text>Done</text>
+              </AppBar.Slot>
+            )}
+          </AppBar.Left>
+        </AppBar.Root>
+      );
+    }
+    const { rerender } = render(<Example showCustom={false} />);
+    const button = () => getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    rerender(<Example showCustom />);
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(button()).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    rerender(<Example showCustom={false} />);
+    expect(button()).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(mount).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not bleed a custom slot sitting at the slot edge", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <text>Done</text>
+          </AppBar.Slot>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const custom = getAppBarRoot().querySelector<HTMLElement>(".seed-app-bar__custom");
+    expect(custom).toBeInTheDocument();
+    expect(custom!.style.getPropertyValue("margin-left")).toBe("");
+    expect(custom!.style.getPropertyValue("margin-right")).toBe("");
+  });
+
+  it("bleeds the trailing icon button but not a preceding custom slot", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <text>Done</text>
+          </AppBar.Slot>
+          <AppBar.IconButton accessibility-label="Close" />
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const root = getAppBarRoot();
+    const custom = root.querySelector<HTMLElement>(".seed-app-bar__custom");
+    const iconButton = root.querySelector<HTMLElement>(".seed-app-bar__iconButton");
+    expect(custom!.style.getPropertyValue("margin-right")).toBe("");
+    expect(iconButton).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it.each([
+    "leading",
+    "trailing",
+    "both",
+  ] as const)("respects explicit edge=%s over automatic edges", (edge) => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Back" edge={edge} />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    const button = getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+    expect(button?.classList.contains("seed-app-bar__icon-button-edge-leading")).toBe(
+      edge !== "trailing",
+    );
+    expect(button?.classList.contains("seed-app-bar__icon-button-edge-trailing")).toBe(
+      edge !== "leading",
+    );
+  });
+
+  it("preserves caller styles when automatic edge compensation applies", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton
+            accessibility-label="Back"
+            {...{ style: { width: "60px", opacity: 0.5 } }}
+          />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    const button = getAppBarRoot().querySelector<HTMLElement>(".seed-app-bar__iconButton");
+    expect(button).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expectStyle(button!.style, { width: "60px", opacity: "0.5" });
+  });
+
+  it("finds the physical edge through nested fragments and conditional children", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Right>
+          <Fragment>
+            {false && <AppBar.IconButton accessibility-label="Hidden" />}
+            <AppBar.IconButton accessibility-label="Search" />
+            <Fragment key="actions">
+              <AppBar.IconButton accessibility-label="Close" />
+              {null}
+              <Fragment />
+            </Fragment>
+          </Fragment>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+    const buttons = getAppBarRoot().querySelectorAll<HTMLElement>(".seed-app-bar__iconButton");
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[0]).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    expect(buttons[1]).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+    expect(buttons[1]).toHaveClass("seed-app-bar__icon-button-edge-trailing");
+  });
+
+  it("does not leak edge to native children or bleed buttons inside custom layout boxes", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <view id="native-edge">
+            <AppBar.IconButton accessibility-label="Nested" />
+          </view>
+        </AppBar.Left>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <AppBar.IconButton accessibility-label="Custom" />
+          </AppBar.Slot>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+    const root = getAppBarRoot();
+    expect(root.querySelector("#native-edge")).not.toHaveAttribute("edge");
+    expect(root.querySelector("[edge]")).toBeNull();
+    for (const button of root.querySelectorAll(".seed-app-bar__iconButton")) {
+      expect(button).not.toHaveClass("seed-app-bar__icon-button-edge-leading");
+      expect(button).not.toHaveClass("seed-app-bar__icon-button-edge-trailing");
+    }
+  });
+
+  it("passes edge through wrapper components without changing their props or remounting", () => {
+    const mount = vi.fn();
+    const received = vi.fn();
+    function WrappedButton(props: { edge?: "leading" | "trailing" }) {
+      received(props);
+      useEffect(() => {
+        mount();
+      }, []);
+      return <AppBar.IconButton accessibility-label="Wrapped" {...props} />;
+    }
+    const { rerender } = render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <WrappedButton />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    expect(getAppBarRoot().querySelector(".seed-app-bar__iconButton")).toHaveClass(
+      "seed-app-bar__icon-button-edge-leading",
+    );
+    expect(received.mock.lastCall?.[0]).not.toHaveProperty("edge");
+    rerender(
+      <AppBar.Root>
+        <AppBar.Left>
+          <WrappedButton edge="trailing" />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+    expect(getAppBarRoot().querySelector(".seed-app-bar__iconButton")).toHaveClass(
+      "seed-app-bar__icon-button-edge-trailing",
+    );
+    expect(mount).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("AppBar icon recipe ownership", () => {