@multiplatform.one/components 6.6.0 → 7.0.0

package/src/Alert/Alert.spec.tsx

@@ -51,11 +51,147 @@ describe("Alert", () => {
     const { container } = renderWithProviders(
       <Alert intent="error" title="Connection lost" actionLabel="Retry" onAction={onAction} />,
     );
-    const button = container.querySelector('[role="button"]');
+    const button = container.querySelector('[aria-label="Retry"]');
     expect(button?.textContent).toContain("Retry");
     fireEvent.click(button as Element);
     expect(onAction).toHaveBeenCalledTimes(1);
   });
+
+  it("stacks actions under title+body (Primer complex layout)", () => {
+    const { container } = renderWithProviders(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry">
+        Changes are no longer syncing.
+      </Alert>,
+    );
+    expect(container.querySelector('[data-layout="stacked"]')).toBeTruthy();
+  });
+
+  it("keeps a single-line title+action inline", () => {
+    const { container } = renderWithProviders(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry" />,
+    );
+    expect(container.querySelector('[data-layout="inline"]')).toBeTruthy();
+  });
+
+  it("exposes density and nested-scale on the frame", () => {
+    const compact = renderWithProviders(<Alert compact intent="info" title="Read-only" />);
+    const frame = compact.container.querySelector('[role="status"]') as HTMLElement;
+    expect(frame.getAttribute("data-density")).toBe("compact");
+    expect(Number(frame.getAttribute("data-nested-px"))).toBeGreaterThan(0);
+    expect(Number(frame.getAttribute("data-nested-px"))).toBeLessThan(44);
+    expect(frame.getAttribute("data-accent-stripe")).toBe("3");
+  });
+
+  it("wires aria-labelledby to the title and is programmatically focusable", () => {
+    const { container } = renderWithProviders(
+      <Alert intent="info" title="Heads up">
+        Something changed.
+      </Alert>,
+    );
+    const region = container.querySelector('[role="status"]') as HTMLElement;
+    const titleId = region.getAttribute("aria-labelledby");
+    expect(titleId).toBeTruthy();
+    expect(document.getElementById(titleId as string)?.textContent).toContain("Heads up");
+    expect(region.tabIndex).toBe(-1);
+    expect(region.getAttribute("aria-live")).toBe("polite");
+  });
+
+  it("uses assertive live region for error intents", () => {
+    const { container } = renderWithProviders(<Alert intent="error" title="Save failed" />);
+    const region = container.querySelector('[role="alert"]') as HTMLElement;
+    expect(region.getAttribute("aria-live")).toBe("assertive");
+  });
+
+  it("fires the secondary convenience action", () => {
+    const onSecondaryAction = vi.fn();
+    const { container } = renderWithProviders(
+      <Alert
+        intent="warning"
+        title="Trial expiring"
+        actionLabel="Upgrade"
+        secondaryActionLabel="Remind me"
+        onSecondaryAction={onSecondaryAction}
+      />,
+    );
+    fireEvent.click(container.querySelector('[aria-label="Remind me"]') as Element);
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+  });
+});
+
+// LC-54 amendment (2026-08-13) VERIFY arm: in hover/press the element
+// carrying the press-target outset keeps `background-color: transparent` —
+// painted feedback lives on the glyph-scale ring inside it. jsdom never
+// applies :hover, but tamagui compiles state backgrounds into value-carrying
+// atomic classes (`_bg-0hover-color5`, `_bg-0active-color6`), so the paint
+// channel is asserted through the atoms each node carries — red on the old
+// anatomy (the floor carried both atoms), green only when the floor is
+// paint-free in every state.
+describe("Alert dismiss press-floor paint (LC-54 amendment)", () => {
+  const paintedStateAtom = /_bg-0(?:hover|active)-(?!transparent)/;
+  const renderDismissible = (onDismiss: () => void = () => {}) =>
+    renderWithProviders(<Alert intent="info" title="Bye" dismissible onDismiss={onDismiss} />);
+
+  it("floor node carries no hover/press background paint", () => {
+    const { container } = renderDismissible();
+    const floor = container.querySelector('[aria-label="Dismiss"]') as HTMLElement;
+    expect(floor).not.toBeNull();
+    expect(floor.className).not.toMatch(paintedStateAtom);
+  });
+
+  it("positive control: the glyph-scale ring is where the hover fill lives", () => {
+    const { container } = renderDismissible();
+    const floor = container.querySelector('[aria-label="Dismiss"]') as HTMLElement;
+    const ring = floor.firstElementChild as HTMLElement;
+    expect(ring).not.toBeNull();
+    // Proves the atom detector can see hover paint in this harness (the
+    // no-paint assert above is meaningless without this arm), and pins the
+    // fill to the ring: icon + one space token, never the 44px floor.
+    expect(ring.className).toMatch(/_bg-0hover-color5/);
+    expect(ring.querySelector("svg")).not.toBeNull();
+  });
+
+  it("dismiss activates through the ring (pointer) and via Enter (keyboard)", () => {
+    const onDismiss = vi.fn();
+    const { container } = renderDismissible(onDismiss);
+    const floor = container.querySelector('[aria-label="Dismiss"]') as HTMLElement;
+    const ring = (floor.firstElementChild ?? floor) as HTMLElement;
+    fireEvent.click(ring);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismiss fires on Enter", () => {
+    const onDismiss = vi.fn();
+    const { container } = renderDismissible(onDismiss);
+    const floor = container.querySelector('[aria-label="Dismiss"]') as HTMLElement;
+    fireEvent.keyDown(floor, { key: "Enter" });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Alert nested action press-floor paint (LC-54 / LC-71 / LC-73)", () => {
+  const paintedStateAtom = /_bg-0(?:hover|active)-(?!transparent)/;
+
+  it("action floor is unpainted; hover fill lives on the nested pill", () => {
+    const { container } = renderWithProviders(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry" />,
+    );
+    const floor = container.querySelector('[aria-label="Retry"]') as HTMLElement;
+    expect(floor).not.toBeNull();
+    expect(floor.className).not.toMatch(paintedStateAtom);
+    const pill = floor.firstElementChild as HTMLElement;
+    expect(pill.className).toMatch(/_bg-0hover-color5/);
+  });
+
+  it("action activates via Enter on the floor", () => {
+    const onAction = vi.fn();
+    const { container } = renderWithProviders(
+      <Alert intent="error" title="Connection lost" actionLabel="Retry" onAction={onAction} />,
+    );
+    fireEvent.keyDown(container.querySelector('[aria-label="Retry"]') as HTMLElement, {
+      key: "Enter",
+    });
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("Alert banned-error-word DEV warn", () => {

package/src/Alert/Alert.stories.tsx

@@ -73,18 +73,17 @@ export const WithAction: Story = {
       >
         Changes are no longer syncing to the server.
       </Alert>
-      <Alert intent="warning" title="Trial expiring" actionLabel="Upgrade" onAction={() => {}}>
-        Your trial ends in 3 days.
-      </Alert>
       <Alert
-        intent="success"
-        title="Import finished"
-        action={
-          <Button compact onPress={() => {}}>
-            View log
-          </Button>
-        }
+        intent="warning"
+        title="Trial expiring"
+        actionLabel="Upgrade"
+        secondaryActionLabel="Remind me"
+        onAction={() => {}}
+        onSecondaryAction={() => {}}
       >
+        Your trial ends in 3 days.
+      </Alert>
+      <Alert intent="success" title="Import finished" actionLabel="View log" onAction={() => {}}>
         1,204 records imported, 0 errors.
       </Alert>
     </YStack>
@@ -100,7 +99,7 @@ export const Compact: Story = {
       <Alert compact intent="error" dismissible>
         Amount must be greater than zero.
       </Alert>
-      <Alert compact intent="success">
+      <Alert compact intent="success" title="Copied" actionLabel="Undo" onAction={() => {}}>
         Copied to clipboard.
       </Alert>
     </YStack>

package/src/Alert/index.tsx

@@ -1,17 +1,18 @@
-import { useState, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import { useId, useState, type ReactNode } from "react";
+import { useTranslation } from "../shared/i18n";
 import {
   Intent,
+  type KnobProps,
   MIN_PRESS_TARGET,
+  ensureCompositeFocusRing,
   pressTargetHitSlop,
   pressTargetStyle,
   useResolvedKnobs,
   warnBannedErrorWords,
 } from "@multiplatform.one/theme";
-import { Button } from "@multiplatform.one/forms";
 import { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react";
 import type { GetProps } from "tamagui";
-import { SizableText, View, XStack, YStack, styled, useTheme } from "tamagui";
+import { SizableText, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -28,10 +29,16 @@ export interface AlertProps extends Omit<GetProps<typeof AlertFrame>, "role" | "
   icon?: ReactNode | null;
   /** Custom trailing action slot (any node; Buttons inherit the intent and render solid). */
   action?: ReactNode;
-  /** Convenience action button label (renders a compact intent Button). */
+  /** Convenience action button label (nested-scale ghost control, 44px press floor). */
   actionLabel?: string;
   /** Press handler for the convenience action button. */
   onAction?: () => void;
+  /** Custom secondary action slot (Primer/Polaris: at most two actions). */
+  secondaryAction?: ReactNode;
+  /** Convenience secondary action label. */
+  secondaryActionLabel?: string;
+  /** Press handler for the convenience secondary action. */
+  onSecondaryAction?: () => void;
   /** Show a dismiss (X) button. */
   dismissible?: boolean;
   /** Called when the dismiss button is pressed. */
@@ -40,7 +47,7 @@ export interface AlertProps extends Omit<GetProps<typeof AlertFrame>, "role" | "
   visible?: boolean;
   /** Uncontrolled initial visibility (default true). */
   defaultVisible?: boolean;
-  /** Tighter padding/type for dense layouts. */
+  /** Tighter padding/type for dense layouts (density compact + nested-scale). */
   compact?: boolean;
 }
 
@@ -78,14 +85,22 @@ const AlertFrame = styled(XStack, {
 // $1 padding) but the press target is floored at 44 via the house
 // pressTarget* channel (grown transparent box + negative outset + hitSlop —
 // same anatomy as Chip dismiss / ColumnHeaderFilter).
-const DISMISS_VISUAL = 20;
-const DISMISS_OUTSET = Math.ceil((MIN_PRESS_TARGET - DISMISS_VISUAL) / 2);
+const DISMISS_ICON = 16;
+const DISMISS_ICON_COMPACT = 14;
+const DISMISS_RING_INSET = 4;
+const DISMISS_RING_INSET_COMPACT = 2;
 // With a trailing action button in the same row the full horizontal outset
 // would overlap the action's press target (overlapping targets are their own
 // DG-LAY-04 defect) — cap at less than half the row gap ($3 = 13px). Kept
 // symmetric so the glyph never shifts; the width is pitch-limited by design.
 const DISMISS_ADJACENT_OUTSET = 6;
 
+// LC-54 amendment (2026-08-13): this box is the grown transparent press
+// target — it stays UNPAINTED in every state, hover included. Painting it
+// was the flagged defect: the hover fill spread across the full 44px floor
+// (and past the alert's padding via the negative outsets) instead of
+// reading as dismiss feedback. Floor-wide feedback here is subtree opacity
+// only (Chip dismiss anatomy).
 const DismissButton = styled(View, {
   name: "AlertDismiss",
   role: "button",
@@ -94,20 +109,129 @@ const DismissButton = styled(View, {
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
-  padding: "$1",
   borderWidth: 0,
   backgroundColor: "transparent",
   borderRadius: "$2",
-  hoverStyle: { backgroundColor: "$color5" },
-  pressStyle: { backgroundColor: "$color6" },
+  opacity: 0.7,
+  outlineWidth: 0,
+  hoverStyle: {
+    opacity: 1,
+  },
+  pressStyle: {
+    opacity: 0.9,
+  },
+  focusStyle: { outlineWidth: 0 },
   focusVisibleStyle: {
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineColor: "$color8",
-    outlineOffset: 1,
+    opacity: 1,
+    outlineWidth: 0,
+  },
+});
+
+// The glyph-scale ring: all painted dismiss chrome lives here, inside the
+// transparent press target, so the hover fill can never reach neighboring
+// content — its painted box is the box the row already reserves (icon +
+// the $1 inset that used to pad the press target itself).
+const DismissRing = styled(View, {
+  name: "AlertDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$1",
+  borderRadius: "$2",
+  hoverStyle: {
+    backgroundColor: "$color5",
   },
 });
 
+// Nested-scale ghost action (Carbon inline notification / Primer compact
+// banner). Painted box is `nestedControl.px`; 44px press is the unpainted
+// floor. LC-71: ring rides the pill via the chip-dismiss CSS contract
+// (floor outline none, :focus-visible paints the inner ring).
+const AlertActionTarget = styled(View, {
+  name: "AlertAction",
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  opacity: 0.9,
+  outlineWidth: 0,
+  hoverStyle: { opacity: 1 },
+  pressStyle: { opacity: 0.95 },
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+});
+
+const AlertActionPill = styled(View, {
+  name: "AlertActionPill",
+  paddingHorizontal: "$2",
+  paddingVertical: "$1",
+  alignItems: "center",
+  justifyContent: "center",
+  hoverStyle: { backgroundColor: "$color5" },
+  pressStyle: { backgroundColor: "$color6" },
+});
+
+const activateOnEnterSpace = (onPress?: () => void) =>
+  ({
+    onKeyDown: (e: { key?: string; preventDefault?: () => void }) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault?.();
+        onPress?.();
+      }
+    },
+  }) as Record<string, unknown>;
+
+function AlertAction({
+  label,
+  onPress,
+  nestedPx,
+  hitSlop,
+  besideAdjacent,
+  body,
+  labelType,
+  pointy,
+  radiusOuter,
+}: {
+  label: string;
+  onPress?: () => void;
+  nestedPx: number;
+  hitSlop: { top: number; bottom: number; left: number; right: number };
+  besideAdjacent: boolean;
+  body: KnobProps["body"];
+  labelType: KnobProps["label"];
+  pointy: boolean;
+  radiusOuter: KnobProps["borderRadiusOuter"];
+}) {
+  const outset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - nestedPx) / 2));
+  const hOutset = besideAdjacent ? Math.min(outset, DISMISS_ADJACENT_OUTSET) : outset;
+  return (
+    <AlertActionTarget
+      className="mp-chip-dismiss"
+      aria-label={label}
+      {...pressTargetStyle()}
+      marginVertical={-outset}
+      marginHorizontal={-hOutset}
+      hitSlop={besideAdjacent ? undefined : hitSlop}
+      onPress={onPress}
+      {...activateOnEnterSpace(onPress)}
+    >
+      <AlertActionPill
+        className="mp-chip-dismiss-ring"
+        minHeight={nestedPx}
+        {...radiusOuter}
+        borderRadius={pointy ? 0 : radiusOuter.borderRadius}
+      >
+        <SizableText {...body} {...labelType} fontWeight="600" color="$color12" userSelect="none">
+          {label}
+        </SizableText>
+      </AlertActionPill>
+    </AlertActionTarget>
+  );
+}
+
 // ── Alert Component ───────────────────────────────────────────
 
 function AlertInner({
@@ -118,6 +242,9 @@ function AlertInner({
   action,
   actionLabel,
   onAction,
+  secondaryAction,
+  secondaryActionLabel,
+  onSecondaryAction,
   dismissible = false,
   onDismiss,
   visible,
@@ -126,15 +253,25 @@ function AlertInner({
   ...props
 }: AlertProps) {
   const { t } = useTranslation();
+  const titleId = useId();
   const { knobProps } = useResolvedKnobs({ component: "Alert", compact });
+  if (typeof document !== "undefined") ensureCompositeFocusRing();
   const theme = useTheme();
   // Step 11: lowest AA-safe step of the hue on the step-3 tint (resolves to a
   // CSS var on web, a concrete value on native).
   const iconColor = theme.color11?.get() as string | undefined;
+  const stripeColor = theme.color9?.get() as string | undefined;
   const [uncontrolledVisible, setUncontrolledVisible] = useState(defaultVisible);
   const shown = visible !== undefined ? visible : uncontrolledVisible;
   if (!shown) return null;
 
+  const compactDensity = knobProps.density === "compact";
+  const nestedPx = knobProps.nestedControl.px;
+  const dismissIcon = compactDensity ? DISMISS_ICON_COMPACT : DISMISS_ICON;
+  const dismissInset = compactDensity ? DISMISS_RING_INSET_COMPACT : DISMISS_RING_INSET;
+  const dismissVisual = dismissIcon + dismissInset * 2;
+  const dismissOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - dismissVisual) / 2));
+
   // JSX interpolation splits mixed literals into arrays of strings — those
   // must be wrapped in Text like plain strings or they end up as raw text
   // nodes inside the View row (RN "text node cannot be a child of a View").
@@ -161,52 +298,101 @@ function AlertInner({
   };
 
   const IconComponent = intentIconMap[intent];
+  const iconSize = compactDensity ? 16 : 20;
   const iconNode =
     icon === null
       ? null
-      : (icon ?? <IconComponent size={compact ? 18 : 20} weight="fill" color={iconColor} />);
-  const iconSlotHeight = compact ? 20 : 22;
+      : (icon ?? <IconComponent size={iconSize} weight="fill" color={iconColor} />);
+
+  const hasPrimary = action != null || Boolean(actionLabel);
+  const hasSecondary = secondaryAction != null || Boolean(secondaryActionLabel);
+  const hasActions = hasPrimary || hasSecondary;
+  // Primer: single-line keeps actions inline; title+body or two actions wrap
+  // below the copy so the dismiss X keeps a full 44px floor (LC-54).
+  const stackedActions = Boolean(
+    hasActions && ((title != null && children != null) || (hasPrimary && hasSecondary)),
+  );
+  const dismissBesideAction = hasActions && !stackedActions;
+  const actionBesideAdjacent = hasSecondary || dismissBesideAction;
+  const actionShared = {
+    nestedPx,
+    hitSlop: knobProps.nestedControl.hitSlop,
+    body: knobProps.body,
+    labelType: knobProps.label,
+    pointy: knobProps.pointy,
+    radiusOuter: knobProps.borderRadiusOuter,
+    besideAdjacent: actionBesideAdjacent,
+  };
 
-  const actionNode =
+  const primaryAction =
     action ??
-    (actionLabel ? (
-      <Button compact onPress={onAction}>
-        {actionLabel}
-      </Button>
+    (actionLabel ? <AlertAction label={actionLabel} onPress={onAction} {...actionShared} /> : null);
+  const secondaryNode =
+    secondaryAction ??
+    (secondaryActionLabel ? (
+      <AlertAction label={secondaryActionLabel} onPress={onSecondaryAction} {...actionShared} />
     ) : null);
 
+  const actionRow = hasActions ? (
+    <XStack
+      flexShrink={0}
+      flexWrap="wrap"
+      alignItems="center"
+      {...knobProps.gap}
+      data-alert-actions=""
+    >
+      {primaryAction}
+      {secondaryNode}
+    </XStack>
+  ) : null;
+
+  const assertive = intent === "error" || intent === "warning";
+  const hairline = Math.max(knobProps.borderRadius.borderWidth, 1);
+  const stripe = isWeb
+    ? {
+        style: {
+          borderInlineStartWidth: 3,
+          borderInlineStartStyle: "solid" as const,
+          borderInlineStartColor: stripeColor,
+        },
+      }
+    : { borderStartWidth: 3, borderStartColor: "$color9" as const };
+
   return (
     <AlertFrame
       // Interruptive intents announce assertively; the rest politely.
-      role={intent === "error" || intent === "warning" ? "alert" : "status"}
-      borderRadius={knobProps.borderRadius.borderRadius}
-      // Banner keeps at least a hairline so the tint reads as a surface even
-      // under borderWidth-none knob presets.
-      borderWidth={Math.max(knobProps.borderRadius.borderWidth, 1)}
-      padding={compact ? "$2.5" : knobProps.panelPadding.padding}
-      gap={compact ? "$2" : "$3"}
+      role={assertive ? "alert" : "status"}
+      aria-live={assertive ? "assertive" : "polite"}
+      aria-labelledby={title != null ? titleId : undefined}
+      // Polaris form-summary: parent may focus the banner on submit without
+      // adding a tab stop (LC-71: the frame is not a control).
+      tabIndex={-1}
+      data-density={knobProps.density}
+      data-layout={stackedActions ? "stacked" : "inline"}
+      data-nested-px={nestedPx}
+      data-accent-stripe="3"
+      {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      borderColor="$color6"
+      borderWidth={hairline}
+      {...stripe}
       transition={knobProps.transition}
       {...props}
     >
       {iconNode ? (
-        <View flexShrink={0} height={iconSlotHeight} justifyContent="center">
+        <View flexShrink={0} aria-hidden marginTop={1}>
           {iconNode}
         </View>
       ) : null}
-      <YStack
-        flexGrow={1}
-        flexShrink={1}
-        gap="$1"
-        justifyContent="center"
-        minHeight={iconSlotHeight}
-      >
+      <YStack flexGrow={1} flexShrink={1} gap="$1" justifyContent="center" minWidth={0}>
         {title ? (
           <SizableText
+            id={titleId}
             {...knobProps.body}
+            {...knobProps.label}
             fontWeight="600"
             color="$color12"
-            fontSize={compact ? "$3" : "$4"}
-            lineHeight={compact ? 20 : 22}
           >
             {title}
           </SizableText>
@@ -215,47 +401,43 @@ function AlertInner({
           (textualChildren !== null ? (
             <SizableText
               {...knobProps.body}
+              {...knobProps.label}
               // Step 12, not 11: $color11 on the step-3 tint measured 4.2:1
               // in the light semantic ramps (below the 4.5 floor); weight and
               // size keep the title/description hierarchy.
               color="$color12"
-              fontSize={compact ? "$2" : "$3"}
-              lineHeight={compact ? 18 : 20}
+              fontWeight="400"
             >
               {textualChildren}
             </SizableText>
           ) : (
             children
           ))}
+        {stackedActions ? actionRow : null}
       </YStack>
-      {actionNode ? (
-        // Same first-line slot as the icon: trailing controls center on the
-        // title line, so action + dismiss share one line (Axiom 15/16 —
-        // a content-sized slot floated the action ~11px below the dismiss X).
-        <View flexShrink={0} height={iconSlotHeight} justifyContent="center">
-          {actionNode}
-        </View>
-      ) : null}
+      {!stackedActions ? actionRow : null}
       {dismissible ? (
         <DismissButton
           aria-label={t("Dismiss")}
+          className="mp-chip-dismiss"
           {...pressTargetStyle()}
-          {...(actionNode ? { minWidth: DISMISS_VISUAL + DISMISS_ADJACENT_OUTSET * 2 } : null)}
-          marginVertical={-DISMISS_OUTSET}
-          marginHorizontal={-(actionNode ? DISMISS_ADJACENT_OUTSET : DISMISS_OUTSET)}
-          hitSlop={actionNode ? undefined : pressTargetHitSlop(DISMISS_VISUAL)}
+          {...(dismissBesideAction
+            ? { minWidth: dismissVisual + DISMISS_ADJACENT_OUTSET * 2 }
+            : null)}
+          marginVertical={-dismissOutset}
+          marginHorizontal={-(dismissBesideAction ? DISMISS_ADJACENT_OUTSET : dismissOutset)}
+          hitSlop={dismissBesideAction ? undefined : pressTargetHitSlop(dismissVisual)}
           onPress={handleDismiss}
           // role=button divs don't get free keyboard activation on web.
-          {...({
-            onKeyDown: (e: { key?: string; preventDefault?: () => void }) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault?.();
-                handleDismiss();
-              }
-            },
-          } as Record<string, unknown>)}
+          {...activateOnEnterSpace(handleDismiss)}
         >
-          <XIcon size={16} color={iconColor} />
+          <DismissRing
+            className="mp-chip-dismiss-ring"
+            padding={compactDensity ? "$0.5" : "$1"}
+            borderRadius={knobProps.pointy ? 0 : "$2"}
+          >
+            <XIcon size={dismissIcon} color={iconColor} />
+          </DismissRing>
         </DismissButton>
       ) : null}
     </AlertFrame>