@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/Input/Input.spec.tsx

@@ -197,4 +197,115 @@ describe("Input", () => {
       expect(document.activeElement).toBe(input);
     });
   });
+
+  describe("LC-71 RING-ANATOMY", () => {
+    it("rings the Box (icons included), never the inner input", () => {
+      const result = renderWithProviders(
+        <Input
+          label="Search"
+          name="q"
+          leftIcon={<span data-testid="leading">L</span>}
+          rightIcon={<span data-testid="trailing">R</span>}
+        />,
+      );
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(box).toBeTruthy();
+      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.contains(result.getByTestId("leading"))).toBe(true);
+      expect(box.contains(result.getByTestId("trailing"))).toBe(true);
+      expect(box.contains(input)).toBe(true);
+      expect(input.className).toMatch(/mp-input-area/);
+      const inputCs = getComputedStyle(input);
+      expect(inputCs.outlineStyle === "none" || inputCs.outlineWidth === "0px").toBe(true);
+    });
+
+    it("chromeless keeps the Box ring contract (does not move it onto Area)", () => {
+      const result = renderWithProviders(
+        <Input
+          label="Filter"
+          name="f"
+          chromeless
+          leftIcon={<span data-testid="leading">L</span>}
+        />,
+      );
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.contains(result.getByTestId("leading"))).toBe(true);
+      expect(input.className).toMatch(/mp-input-area/);
+    });
+  });
+
+  describe("density ≠ size", () => {
+    it("compact steps density without requiring a size token", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" compact />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-density")).toBe("compact");
+      expect(box.getAttribute("data-size")).toBe("$3");
+    });
+
+    it("size ejects painted height and leaves density comfortable", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" size="$5" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-density")).toBe("comfortable");
+      expect(box.getAttribute("data-size")).toBe("$5");
+    });
+
+    it("compact + size stay orthogonal", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" compact size="$5" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-density")).toBe("compact");
+      expect(box.getAttribute("data-size")).toBe("$5");
+    });
+  });
+
+  describe("44px press floor", () => {
+    it("default painted box meets the 44px floor", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(Number(box.getAttribute("data-visual-height"))).toBe(44);
+      expect(box.getAttribute("data-press-floor")).toBe("box");
+    });
+
+    it("compact below the floor restores press via slop, not giant chrome", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" compact />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const visual = Number(box.getAttribute("data-visual-height"));
+      expect(visual).toBeLessThan(44);
+      expect(box.getAttribute("data-press-floor")).toBe("slop");
+    });
+  });
+
+  describe("text-field anatomy (Polaris / Primer / Spectrum / M3)", () => {
+    it("injects a trailing error icon when error is set and the slot is free", () => {
+      const result = renderWithProviders(
+        <Input label="Email" name="email" error="Enter a valid email" />,
+      );
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.querySelector("svg")).toBeTruthy();
+      expect(result.findTextElement("Enter a valid email")).toBeDefined();
+    });
+
+    it("does not steal a consumer trailing icon for the error glyph", () => {
+      const result = renderWithProviders(
+        <Input
+          label="Email"
+          name="email"
+          error="Enter a valid email"
+          rightIcon={<span data-testid="owned-trailing">x</span>}
+        />,
+      );
+      expect(result.getByTestId("owned-trailing")).toBeTruthy();
+    });
+
+    it("labelHidden keeps the accessible name without a visible label", () => {
+      const result = renderWithProviders(
+        <Input label="Search" name="q" labelHidden placeholder="Search…" />,
+      );
+      expect(result.container.querySelector("label")).toBeNull();
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("aria-label")).toBe("Search");
+    });
+  });
 });

package/src/fields/Input/Input.stories.tsx

@@ -19,7 +19,10 @@ const meta: Meta<typeof Input> = {
     error: { control: "text" },
     required: { control: "boolean" },
     disabled: { control: "boolean" },
-    size: { control: "select", options: ["$2", "$3", "$4"] },
+    compact: { control: "boolean" },
+    chromeless: { control: "boolean" },
+    labelHidden: { control: "boolean" },
+    size: { control: "select", options: ["$3", "$4", "$5"] },
     value: { control: "text" },
     defaultValue: { control: "text" },
   },
@@ -100,16 +103,46 @@ export const WithError: Story = {
   },
 };
 
+/**
+ * Density and size are orthogonal. Compact steps knob chrome; `size` ejects
+ * the painted box height. Default density is comfortable (44px box).
+ */
+export const Density: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Input label="Comfortable" placeholder="Default density — 44px box" />
+      <Input compact label="Compact" placeholder="Density step, same size axis" />
+    </YStack>
+  ),
+};
+
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
-      <Input label="Small" size="$2" placeholder="Small input" />
-      <Input label="Medium (default)" size="$3" placeholder="Medium input" />
-      <Input label="Large" size="$4" placeholder="Large input" />
+      <Input label="Default size" placeholder="sizeToken from knobs ($4 / 44px)" />
+      <Input size="$5" label="Size eject large" placeholder="Explicit size, comfortable density" />
     </YStack>
   ),
 };
 
+export const ReadOnly: Story = {
+  args: {
+    label: "Account id",
+    readOnly: true,
+    value: "ACC-1042",
+    helperText: "Assigned at create — not editable",
+  },
+};
+
+export const Chromeless: Story = {
+  args: {
+    label: "Toolbar search",
+    chromeless: true,
+    placeholder: "Filter…",
+    leftIcon: <MagnifyingGlassIcon />,
+  },
+};
+
 /** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */
 export const SkeletonState: Story = {
   args: { label: "Full name", skeleton: true },

package/src/fields/Input/index.tsx

@@ -1,44 +1,50 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { useRef } from "react";
-import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
+import { WarningCircleIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, pressTargetHitSlop } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
 import { Text } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
+import { formCommonColors } from "../../shared/colorRamps";
 import {
   getFieldError,
+  getFieldHeight,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
-import { FocusContext, Input as InputParts, useForwardFocus } from "../../InputParts";
+import { Input as InputParts, useForwardFocus } from "../../InputParts";
 import type { AnyFormApi, LinkResolver } from "../../types";
 import { LinkCell } from "../../utils/LinkCell";
 
 type InputAreaProps = ComponentProps<typeof InputParts.Area>;
 
-/**
- * The knob focus ring must be CSS-driven on the focused input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes (interact sweep) never
- * see. The Box ring is suppressed via this no-op FocusContext so the field
- * shows exactly one ring — same pattern as OTPInput/Stepper.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
-
 export interface InputProps {
   name?: string;
   form?: AnyFormApi;
   validators?: Record<string, unknown>;
   label?: ReactNode;
   labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+  /**
+   * Hide the visible label while keeping it as the accessible name
+   * (Polaris `labelHidden` / Primer visually-hidden label). Search-style
+   * fields are the usual caller; pass `aria-label` to override the name.
+   */
+  labelHidden?: boolean;
+  /** Accessible name when there is no visible label. */
+  "aria-label"?: string;
   helperText?: string;
   error?: string | boolean;
   required?: boolean;
   disabled?: boolean;
   readOnly?: boolean;
   linkResolver?: LinkResolver;
+  /**
+   * Painted control height (Tamagui size token). Orthogonal to `compact`:
+   * density steps the knob sizeToken, `size` ejects the box height.
+   */
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -72,7 +78,10 @@ export interface InputProps {
   children?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the input */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /**
+   * Density override. Compact steps knob size+space down one level; it is
+   * not a `size` token. Default remains comfortable (44px painted box).
+   */
   compact?: boolean;
   /** When true, renders without borders/background (for toolbar integration) */
   chromeless?: boolean;
@@ -84,6 +93,8 @@ export function Input({
   validators,
   label,
   labelProps,
+  labelHidden,
+  "aria-label": ariaLabel,
   helperText,
   error,
   required,
@@ -121,11 +132,6 @@ export function Input({
   });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
-  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
 
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
@@ -133,37 +139,82 @@ export function Input({
   // autoComplete/keyboardType/inputProps below eject per key.
   const purposeInputProps = resolveFieldInputProps(purpose, autoComplete);
 
-  // Render skeleton placeholder
+  // density ≠ size: compact steps knobProps.sizeToken; an explicit `size`
+  // ejects only the painted box height and leaves density alone.
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const visualHeight = getFieldHeight(resolvedSize);
+  const belowFloor = visualHeight < MIN_PRESS_TARGET;
+  const visibleLabel = labelHidden ? undefined : label;
+  const resolvedAriaLabel =
+    ariaLabel ?? (labelHidden && typeof label === "string" ? label : undefined);
+
+  const boxContract = {
+    size: resolvedSize,
+    "data-density": knobProps.density,
+    "data-size": String(resolvedSize),
+    "data-visual-height": String(visualHeight),
+    "data-press-floor": belowFloor ? "slop" : "box",
+    "data-ring-target": "box",
+    ...(belowFloor ? { hitSlop: pressTargetHitSlop(visualHeight) } : undefined),
+  } as const;
+
+  // Chromeless strips border + fill for toolbar bands. LC-71: the ring
+  // stays on InputParts.Box (whole frame, icons included; text-entry
+  // mouse carve-out). Do not paint a ring on Area and do not replace
+  // Box's focusVisibleStyle — that would drop the composite ring recipe.
+  const chromelessProps = chromeless
+    ? {
+        borderWidth: 0,
+        backgroundColor: "transparent" as const,
+        hoverStyle: {
+          borderColor: "transparent" as const,
+          ...control.hoverKnobProps,
+        },
+        focusStyle: {
+          borderColor: "transparent" as const,
+          ...control.focusKnobProps,
+        },
+      }
+    : undefined;
+
+  const layoutBind = {
+    id,
+    label: visibleLabel,
+    labelProps,
+    helperText,
+    required,
+    disabled,
+    size: resolvedSize,
+    knobProps,
+    purpose,
+    autoComplete,
+    placeholder,
+    "aria-label": resolvedAriaLabel,
+  };
+
+  const areaName =
+    visibleLabel || !resolvedAriaLabel ? undefined : { "aria-label": resolvedAriaLabel };
+
+  // Render skeleton placeholder — FieldLayout keeps label/helper anatomy
+  // (LC-20); only the control chrome is the skeleton.
   if (skeleton) {
     return (
-      <InputParts size={size || knobProps.sizeToken}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
-      </InputParts>
+      <FieldLayout {...layoutBind} error={error}>
+        <InputParts size={resolvedSize}>
+          <Skeleton variant="rounded" width="100%" height={visualHeight} />
+        </InputParts>
+      </FieldLayout>
     );
   }
 
   if (children) {
     return (
-      <InputParts size={size || knobProps.sizeToken} {...(error ? { theme: "red" } : undefined)}>
+      <InputParts size={resolvedSize} {...(error ? { theme: "red" } : undefined)}>
         {children}
       </InputParts>
     );
   }
 
-  // Chromeless strips the border + fill so the frame sits flush in a toolbar
-  // band — but never the focus ring: Axiom 12 / DG-A11Y-01 make the ≥2px
-  // focus-visible affordance a floor no variant may remove.
-  const chromelessProps = chromeless
-    ? {
-        borderWidth: 0,
-        backgroundColor: "transparent" as const,
-        hoverStyle: { borderColor: "transparent" as const },
-        focusStyle: { borderColor: "transparent" as const, ...ensureFocusVisibleRing() },
-        focusVisibleStyle: { borderColor: "transparent" as const, ...ensureFocusVisibleRing() },
-      }
-    : undefined;
-
   const renderInputBox = (
     inputValue: string | undefined,
     handleChange?: (text: string) => void,
@@ -171,6 +222,7 @@ export function Input({
     hasError?: boolean,
   ) => (
     <InputParts.Box
+      {...boxContract}
       {...(handleBlur ? { onBlur: handleBlur } : undefined)}
       // LC-40: the Box owns the disabled chrome treatment (read-only renders
       // its own branch below and never dims).
@@ -190,91 +242,79 @@ export function Input({
               aria-readonly="true"
               aria-required={required || undefined}
               aria-invalid={hasError || undefined}
+              {...areaName}
               color="$color"
             >
               {inputValue ?? ""}
             </Text>
           </LinkCell>
         ) : (
-          <FocusContext.Provider {...suppressBoxFocusRing}>
-            <InputParts.Area
-              ref={inputRef}
-              value={inputValue ?? ""}
-              readOnly
-              id={id}
-              focusStyle={areaFocusRing}
-              focusVisibleStyle={areaFocusRing}
-              aria-readonly="true"
-              aria-required={required || undefined}
-              aria-invalid={hasError || undefined}
-            />
-          </FocusContext.Provider>
-        )
-      ) : (
-        <FocusContext.Provider {...suppressBoxFocusRing}>
           <InputParts.Area
             ref={inputRef}
-            {...(purposeInputProps.inputMode !== undefined
-              ? { inputMode: purposeInputProps.inputMode }
-              : undefined)}
-            {...(purposeInputProps.keyboardType !== undefined
-              ? { keyboardType: purposeInputProps.keyboardType }
-              : undefined)}
-            {...(purposeInputProps.autoComplete !== undefined
-              ? { autoComplete: purposeInputProps.autoComplete }
-              : undefined)}
-            focusStyle={areaFocusRing}
-            focusVisibleStyle={areaFocusRing}
-            {...inputProps}
-            {...(multiline !== undefined ? { multiline } : undefined)}
-            {...(maxLength !== undefined ? { maxLength } : undefined)}
-            {...(keyboardType !== undefined ? { keyboardType } : undefined)}
-            {...(textContentType !== undefined ? { textContentType } : undefined)}
-            {...(autoComplete !== undefined ? { autoComplete } : undefined)}
-            {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
-            {...(placeholder !== undefined ? { placeholder } : undefined)}
-            disabled={disabled}
+            value={inputValue ?? ""}
+            readOnly
             id={id}
-            defaultValue={inputValue}
+            aria-readonly="true"
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
-            onChange={onChange}
-            onChangeText={(text) => {
-              if (disabled) return;
-              handleChange?.(text);
-              onChangeText?.(text);
-            }}
+            {...areaName}
           />
-        </FocusContext.Provider>
+        )
+      ) : (
+        <InputParts.Area
+          ref={inputRef}
+          {...(purposeInputProps.inputMode !== undefined
+            ? { inputMode: purposeInputProps.inputMode }
+            : undefined)}
+          {...(purposeInputProps.keyboardType !== undefined
+            ? { keyboardType: purposeInputProps.keyboardType }
+            : undefined)}
+          {...(purposeInputProps.autoComplete !== undefined
+            ? { autoComplete: purposeInputProps.autoComplete }
+            : undefined)}
+          {...inputProps}
+          {...(multiline !== undefined ? { multiline } : undefined)}
+          {...(maxLength !== undefined ? { maxLength } : undefined)}
+          {...(keyboardType !== undefined ? { keyboardType } : undefined)}
+          {...(textContentType !== undefined ? { textContentType } : undefined)}
+          {...(autoComplete !== undefined ? { autoComplete } : undefined)}
+          {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
+          {...(placeholder !== undefined ? { placeholder } : undefined)}
+          disabled={disabled}
+          id={id}
+          defaultValue={inputValue}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          {...areaName}
+          onChange={onChange}
+          onChangeText={(text) => {
+            if (disabled) return;
+            handleChange?.(text);
+            onChangeText?.(text);
+          }}
+        />
       )}
-      {rightIcon && (
+      {rightIcon ? (
         <InputParts.Icon
           adornment="trailing"
           {...(rightIconInteractive ? undefined : focusTrigger)}
         >
           {rightIcon}
         </InputParts.Icon>
-      )}
+      ) : hasError ? (
+        // M3 / Polaris / Spectrum: in-field error glyph (color is not the
+        // only channel). Omitted when the consumer owns the trailing slot.
+        <InputParts.Icon adornment="trailing" color={formCommonColors.error}>
+          <WarningCircleIcon aria-hidden />
+        </InputParts.Icon>
+      ) : null}
     </InputParts.Box>
   );
 
   if (!resolvedForm || !name) {
     return (
-      <FieldLayout
-        id={id}
-        label={label}
-        labelProps={labelProps}
-        error={error}
-        helperText={helperText}
-        required={required}
-        disabled={disabled}
-        size={size}
-        knobProps={knobProps}
-        onBlur={onBlur}
-        purpose={purpose}
-        autoComplete={autoComplete}
-      >
-        <InputParts size={size || knobProps.sizeToken}>
+      <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
+        <InputParts size={resolvedSize}>
           {renderInputBox(value ?? defaultValue, undefined, undefined, !!error)}
         </InputParts>
       </FieldLayout>
@@ -292,20 +332,11 @@ export function Input({
         const resolvedError = getFieldError(field, error);
         return (
           <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
+            {...layoutBind}
             error={resolvedError}
-            helperText={helperText}
-            required={required}
-            disabled={disabled}
-            size={size}
-            knobProps={knobProps}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-            purpose={purpose}
-            autoComplete={autoComplete}
           >
-            <InputParts size={size || knobProps.sizeToken}>
+            <InputParts size={resolvedSize}>
               {renderInputBox(
                 field.state.value as string,
                 (text) => field.handleChange(text as any),

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -104,6 +104,29 @@ describe("MentionInput", () => {
     expect(result.findTextElement("B")).toBeDefined(); // Bob initials fallback
   });
 
+  // Same contract every other FloatingPanel consumer honors, reached by a
+  // different route: this panel's open switch is derived from the text, not
+  // from a press, so gating the trigger alone would not have covered it.
+  it.each([
+    ["disabled", { disabled: true }],
+    ["readOnly", { readOnly: true }],
+  ])("opens no suggestion listbox when %s", (_name, props) => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} {...props} />,
+    );
+
+    const textArea = result.container.querySelector("textarea");
+    expect(textArea).toBeTruthy();
+    if (!textArea) return;
+
+    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
+    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
+    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
+    fireEvent.select(textArea);
+
+    expect(result.container.ownerDocument.querySelector('[role="listbox"]')).toBeNull();
+  });
+
   it("does not reserve a media slot for all-text triggers (hashtags)", () => {
     const result = renderWithProviders(
       <MentionInput
@@ -136,4 +159,96 @@ describe("MentionInput", () => {
     // No avatar / initials glyphs for an all-text list.
     expect(result.container.ownerDocument.querySelector("img")).toBeNull();
   });
+
+  it("keeps the listbox open with an empty state when the query matches nothing", () => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
+    );
+
+    const textArea = result.container.querySelector("textarea");
+    expect(textArea).toBeTruthy();
+    if (!textArea) return;
+
+    fireEvent.change(textArea, {
+      target: { value: "@zzzz", selectionStart: 5, selectionEnd: 5 },
+    });
+    Object.defineProperty(textArea, "selectionStart", { value: 5, configurable: true });
+    Object.defineProperty(textArea, "selectionEnd", { value: 5, configurable: true });
+    fireEvent.select(textArea);
+
+    const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
+    expect(listbox).toBeTruthy();
+    expect(listbox?.querySelectorAll('[role="option"]').length).toBe(0);
+    expect(result.findTextElement("No matches")).toBeDefined();
+  });
+
+  it("inserts the active suggestion on Tab (GitHub/Slack)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} onChange={onChange} />,
+    );
+
+    const textArea = result.container.querySelector("textarea");
+    expect(textArea).toBeTruthy();
+    if (!textArea) return;
+
+    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
+    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
+    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
+    fireEvent.select(textArea);
+
+    fireEvent.keyDown(textArea, { key: "Tab" });
+    expect(onChange).toHaveBeenCalledWith("@Alice ");
+  });
+
+  it("paints the LC-71 keyboard ring on the active option after typing, not after hover", () => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
+    );
+
+    const textArea = result.container.querySelector("textarea");
+    expect(textArea).toBeTruthy();
+    if (!textArea) return;
+
+    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
+    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
+    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
+    fireEvent.select(textArea);
+
+    const options = result.container.ownerDocument.querySelectorAll('[role="option"]');
+    expect(options.length).toBe(2);
+    expect(options[0]?.getAttribute("data-keyboard-ring")).toBe("true");
+    expect(options[1]?.getAttribute("data-keyboard-ring")).toBeNull();
+
+    fireEvent.mouseEnter(options[1] as Element);
+    expect(options[0]?.getAttribute("data-keyboard-ring")).toBeNull();
+    expect(options[1]?.getAttribute("data-keyboard-ring")).toBeNull();
+  });
+
+  it("deletes the whole mention token on Backspace at its end (Slack)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} onChange={onChange} />,
+    );
+
+    const textArea = result.container.querySelector("textarea");
+    expect(textArea).toBeTruthy();
+    if (!textArea) return;
+
+    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
+    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
+    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
+    fireEvent.select(textArea);
+    fireEvent.keyDown(textArea, { key: "Enter" });
+
+    expect(onChange).toHaveBeenCalledWith("@Alice ");
+
+    const mentionEnd = "@Alice".length;
+    Object.defineProperty(textArea, "selectionStart", { value: mentionEnd, configurable: true });
+    Object.defineProperty(textArea, "selectionEnd", { value: mentionEnd, configurable: true });
+    fireEvent.select(textArea);
+    fireEvent.keyDown(textArea, { key: "Backspace" });
+
+    expect(onChange).toHaveBeenLastCalledWith(" ");
+  });
 });

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -27,7 +27,7 @@ const meta: Meta<typeof MentionInput> = {
     required: { control: "boolean", description: "Mark field as required" },
     disabled: { control: "boolean", description: "Disable the input" },
     readOnly: { control: "boolean", description: "Read-only display" },
-    compact: { control: "boolean", description: "Use compact sizing" },
+    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
     minHeight: { control: "number", description: "Minimum height of input" },
     maxHeight: { control: "number", description: "Maximum height of input" },