@multiplatform.one/forms 7.5.0 → 7.6.0

package/src/InputParts/index.tsx

@@ -819,6 +819,7 @@ const InputAreaImpl = InputFrame.styleable<{
         {...knobProps.body}
         type={secureTextEntry ? "password" : props.type}
         padding={0}
+        // size-recipe-escape: zero-reset — Input.Box owns the inset (LC-71); the inner field paints no padding
         paddingHorizontal={0}
         paddingVertical={0}
         keyboardType={resolvedKeyboardType}
@@ -907,24 +908,115 @@ const InputButton = styled(TButton, {
   } as const,
 });
 
-const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
+/**
+ * LC-71 RING-ANATOMY / LC-49 ONE-TAB-STOP — the `glyphRing` end cap.
+ *
+ * A bare Input.Button is DECORATIVE: the Box rings for it and it takes no
+ * tab stop of its own (Stepper carets, Select/Combobox chevrons). Pass
+ * `glyphRing` to promote it to the field's SECOND focusable — the Password
+ * reveal, the CopyField copy — where it must ring its own GLYPH, not the
+ * 44px hit box. A band on the box would double with the Box's composite
+ * ring; a band on the glyph is the chip-dismiss recipe
+ * (`.mp-chip-dismiss` + `.mp-chip-dismiss-ring`, keyboardFocusRing.ts).
+ *
+ * It renders a View rather than TButton because TButton swallows a consumer
+ * className and pins its own tabIndex, so the ring class never reaches the
+ * node that actually receives focus. SearchInput hand-rolled exactly this
+ * pair for that reason (fields/SearchInput/index.tsx:348-380) and left a
+ * note saying the classes "cannot ride Input.Button until glyphRing" lands.
+ * This is that pair made reusable, so the square comes from the size recipe
+ * (LC-70) instead of every call site measuring its own.
+ */
+const InputGlyphButton = styled(View, {
+  name: "InputGlyphButton",
+  context: InputContext,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  borderRadius: 0,
+  cursor: "pointer",
+  flexShrink: 0,
+  outlineWidth: 0,
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
+
+  variants: {
+    scaleIcon: {
+      ":number": {} as any,
+    },
+    size: {
+      ...sizeRecipeEndCapVariants,
+      "...size": sizeRecipeEndCapFallback,
+    },
+  } as const,
+});
+
+const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonProps, ref) => {
   const {
     children,
     color: colorProp,
+    glyphRing,
+    size: sizeProp,
+    tabIndex: tabIndexProp,
+    className,
     ...props
   } = buttonProps as typeof buttonProps & {
     color?: string;
+    glyphRing?: boolean;
+    size?: FontSizeTokens;
+    tabIndex?: number;
+    className?: string;
   };
-  const { size, color: contextColor } = InputContext.useStyledContext();
+  const { size: contextSize, color: contextColor } = InputContext.useStyledContext();
   const { knobProps } = useResolvedKnobs();
   const theme = useTheme();
-  const square = knobProps.control.height;
+  const size = (sizeProp ?? contextSize) as FontSizeTokens;
   const paint = resolveGlyphPaint(theme as never, colorProp ?? contextColor);
   const getThemedIcon = useGetThemedIcon({
     size: knobProps.controlIcon.width,
     color: paint as never,
   });
 
+  if (glyphRing) {
+    // A real tab stop must square off the token it was HANDED, not the
+    // knob's: a $2 field inside a $4 knob would otherwise ship a 44px stop
+    // on a 32px frame. LC-77 keeps the sub-floor case pressable via the
+    // caller's hitSlop, never by inflating the cap.
+    const square = sizeRecipeForToken(String(size ?? "$true"), { touch: isTouchSurface() }).height;
+    const disabled = (props as { disabled?: boolean }).disabled === true;
+    if (isWeb) ensureCompositeFocusRing();
+    return (
+      <InputGlyphButton
+        ref={ref as never}
+        role="button"
+        size={size}
+        height={square}
+        width={square}
+        paddingHorizontal={0} // size-recipe-escape: square end-cap; pad lives on Input.Box
+        opacity={disabled ? 0.5 : 1}
+        {...props}
+        aria-disabled={disabled || undefined}
+        tabIndex={tabIndexProp ?? (disabled ? -1 : 0)}
+        className={
+          isWeb
+            ? ["mp-chip-dismiss", className].filter(Boolean).join(" ")
+            : (className ?? undefined)
+        }
+        data-end-cap={square}
+      >
+        <View
+          className={isWeb ? "mp-chip-dismiss-ring" : undefined}
+          alignItems="center"
+          justifyContent="center"
+        >
+          {children}
+        </View>
+      </InputGlyphButton>
+    );
+  }
+
+  const square = knobProps.control.height;
   return (
     <InputButton
       ref={ref}
@@ -933,7 +1025,12 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
       width={square}
       paddingHorizontal={0} // size-recipe-escape: square end-cap; pad lives on Input.Box
       color={paint}
+      // LC-49: the decorative cap is not a tab stop. tabIndex alone is not
+      // enough — TButton re-derives focusability and stamps tabindex="0".
+      focusable={false}
       tabIndex={-1}
+      className={className}
+      data-end-cap={square}
       {...props}
     >
       {getThemedIcon(children)}

package/src/fields/Barcode/BarcodePreview.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { BarcodePreview, barcodePreviewSymbology } from "./BarcodePreview";
 import { countModules, encodeCode128B } from "./code128";
-import { encodeQr } from "./qr";
+import { QR_QUIET_ZONE_MODULES, encodeQr } from "./qr";
 import { resolveHtml5FormatIds, resolveNativeBarcodeTypes } from "./scannerTypes";
 
 /** Rebuild the module string ("1" = bar) from the encoder's runs. */
@@ -101,8 +101,13 @@ describe("barcodePreviewSymbology — scanner round trip", () => {
 });
 
 describe("BarcodePreview — qr format", () => {
+  /** The field's own default bound (Barcode/index.tsx): 36 comfortable, 24 compact. */
+  const formHeight = 36;
+
   it("draws the QR matrix canvas-free (labeled image, real module rows)", () => {
-    const result = renderWithProviders(<BarcodePreview value="SKU-001234" format="qr" />);
+    const result = renderWithProviders(
+      <BarcodePreview value="SKU-001234" format="qr" height={formHeight} />,
+    );
     const preview = result.container.querySelector('[data-testid="barcode-preview"]');
     expect(preview).not.toBeNull();
     expect(preview?.getAttribute("aria-label")).toContain("SKU-001234");
@@ -114,12 +119,16 @@ describe("BarcodePreview — qr format", () => {
   });
 
   it("draws QR for the Frappe fieldtype's qrcode token via the shared alias table", () => {
-    const result = renderWithProviders(<BarcodePreview value="SKU-001234" format="qrcode" />);
+    const result = renderWithProviders(
+      <BarcodePreview value="SKU-001234" format="qrcode" height={formHeight} />,
+    );
     expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
   });
 
   it("draws values the 1-D strip cannot encode (the closed asymmetry)", () => {
-    const result = renderWithProviders(<BarcodePreview value="héllo" format="qr" />);
+    const result = renderWithProviders(
+      <BarcodePreview value="héllo" format="qr" height={formHeight} />,
+    );
     expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
   });
 
@@ -130,7 +139,9 @@ describe("BarcodePreview — qr format", () => {
 
   it("falls back to honest mono text past version 10 capacity", () => {
     const long = "x".repeat(214);
-    const result = renderWithProviders(<BarcodePreview value={long} format="qr" />);
+    const result = renderWithProviders(
+      <BarcodePreview value={long} format="qr" height={formHeight} />,
+    );
     expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
     expect(result.container.textContent).toContain(long);
   });
@@ -141,3 +152,126 @@ describe("BarcodePreview — qr format", () => {
     expect(result.container.querySelector('[data-testid="barcode-preview"]')).not.toBeNull();
   });
 });
+
+/**
+ * Whole-pixel modules. Measured on the media-11 board at DPR 2 BEFORE this
+ * rule existed: bounds 33, 72 and 96 decoded and bounds 18, 24, 44 and 56 did
+ * not — not a size floor (33 read, 44 did not) but a resampling one. 33/33
+ * modules is exactly 1.000 px per module; 44/33 is 1.333, and a fractional
+ * module rounds to different widths across the grid. It reached the field's
+ * own default path: at height 36 / moduleWidth 1 a payload over 26 bytes
+ * clamps under one pixel per module and stops reading, which is precisely the
+ * scan-to-draw round trip MPO-53 AC-9 exists to close.
+ */
+describe("BarcodePreview — qr geometry is whole-pixel or nothing", () => {
+  const qrSquare = (ui: React.ReactElement) =>
+    renderWithProviders(ui).container.querySelector(
+      '[data-testid="barcode-preview-qr"]',
+    ) as HTMLElement | null;
+
+  /**
+   * Tamagui compiles geometry to atomic classes (`_w-87px`, `_pt-12px`), not
+   * inline style, so the measurement reads the class list. Same numbers, and
+   * it is the class the browser actually applies.
+   */
+  const px = (el: HTMLElement, prefix: string) => {
+    const hit = (el.getAttribute("class") ?? "")
+      .split(/\s+/)
+      .find((c) => c.startsWith(`_${prefix}-`));
+    return hit ? Number.parseFloat(hit.slice(prefix.length + 2)) : Number.NaN;
+  };
+  const edgeOf = (el: HTMLElement) => px(el, "w");
+  const quietOf = (el: HTMLElement) => px(el, "pt");
+
+  /** Modules per side including the 4-module quiet zone on each side. */
+  const totalModules = (value: string) => encodeQr(value)!.size + 2 * QR_QUIET_ZONE_MODULES;
+
+  it("draws at the natural size when moduleWidth fits under the bound", () => {
+    // 6 bytes → version 1 → 21 + 8 = 29 modules. moduleWidth 3 asks for 3px
+    // modules and the 120px bound allows 4, so 3 wins: 29 × 3 = 87.
+    const value = "SHC-42";
+    expect(totalModules(value)).toBe(29);
+    const square = qrSquare(
+      <BarcodePreview value={value} format="qr" height={120} moduleWidth={3} />,
+    );
+    expect(square).not.toBeNull();
+    expect(edgeOf(square!)).toBe(87);
+    expect(px(square!, "h")).toBe(87);
+    expect(quietOf(square!)).toBe(12); // 4 modules × 3px
+  });
+
+  it("treats the height bound as a CEILING, never a target", () => {
+    // 18 bytes → version 2 → 25 + 8 = 33 modules at moduleWidth 1 = 33px. A
+    // 44px bound does not stretch it to 44 and a fractional 1.333px module.
+    const value = "SHC-COMPOSE01-0417";
+    expect(totalModules(value)).toBe(33);
+    for (const height of [36, 44, 56]) {
+      const square = qrSquare(<BarcodePreview value={value} format="qr" height={height} />);
+      expect(edgeOf(square!)).toBe(33);
+      expect(quietOf(square!)).toBe(4);
+    }
+  });
+
+  it("snaps the module DOWN to a whole pixel rather than draw a fractional one", () => {
+    // 33 modules under a 96px bound would be 2.909px per module. Snap to 2.
+    const square = qrSquare(
+      <BarcodePreview value="SHC-COMPOSE01-0417" format="qr" height={96} moduleWidth={9} />,
+    );
+    expect(edgeOf(square!)).toBe(66);
+    expect(quietOf(square!)).toBe(8);
+  });
+
+  it("never draws a module narrower than one whole pixel — every bound, every payload", () => {
+    for (const value of ["SHC-42", "SHC-COMPOSE01-0417", "SHC-COMPOSE01-BACKUP-2026-08-28"]) {
+      for (const height of [18, 24, 29, 33, 36, 37, 44, 66, 96, 120]) {
+        for (const moduleWidth of [1, 2, 3]) {
+          const square = qrSquare(
+            <BarcodePreview value={value} format="qr" height={height} moduleWidth={moduleWidth} />,
+          );
+          if (!square) continue; // honest text fallback — asserted below
+          const edge = edgeOf(square);
+          const pad = quietOf(square);
+          const cell = edge / totalModules(value);
+          expect(Number.isInteger(cell)).toBe(true);
+          expect(cell).toBeGreaterThanOrEqual(1);
+          expect(cell).toBeLessThanOrEqual(moduleWidth);
+          expect(edge).toBeLessThanOrEqual(height); // LC-10 containment
+          expect(pad).toBe(cell * QR_QUIET_ZONE_MODULES);
+        }
+      }
+    }
+  });
+
+  it("falls back to honest text under one whole pixel per module", () => {
+    // compact (24) cannot hold 33 modules at a whole pixel each.
+    const value = "SHC-COMPOSE01-0417";
+    const result = renderWithProviders(<BarcodePreview value={value} format="qr" height={24} />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).toContain(value);
+  });
+
+  it("falls back to honest text when the payload outgrows the form bound", () => {
+    // 31 bytes → version 3 → 29 + 8 = 37 modules, which does not fit 36px at
+    // one whole pixel each. This is the case that silently shipped unreadable.
+    const value = "SHC-COMPOSE01-BACKUP-2026-08-28";
+    expect(totalModules(value)).toBe(37);
+    const result = renderWithProviders(<BarcodePreview value={value} format="qr" height={36} />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).toContain(value);
+  });
+
+  it("draws nothing at all when the host already shows the value (textFallback false)", () => {
+    const value = "SHC-COMPOSE01-0417";
+    const result = renderWithProviders(
+      <BarcodePreview value={value} format="qr" height={24} textFallback={false} />,
+    );
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).not.toContain(value);
+  });
+
+  it("leaves the 1-D strip's geometry untouched", () => {
+    const result = renderWithProviders(<BarcodePreview value="SKU-001234" height={18} />);
+    expect(result.container.querySelector('[data-testid="barcode-preview"]')).not.toBeNull();
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+  });
+});

package/src/fields/Barcode/BarcodePreview.tsx

@@ -11,15 +11,16 @@
  *
  * Containment contract (LC-10): the symbol never exceeds its host. The strip
  * caps width at 100% and bars shrink proportionally (preserving relative
- * module widths) instead of painting past the frame; the QR square renders at
- * its natural module size and shrinks uniformly once the `height` bound
- * clamps it — always square, never letterboxed or clipped. Hosts bound the
- * height via the `height` prop (table cells keep it under the row height).
+ * module widths) instead of painting past the frame; the QR square is drawn at
+ * a WHOLE number of pixels per module, capped by `moduleWidth` and by the
+ * `height` bound — always square, never letterboxed or clipped. Hosts bound
+ * the height via the `height` prop (table cells keep it under the row height).
  *
  * Honest states: an empty value renders nothing (hosts show their own empty
  * marker); a value the symbology cannot encode (non-ASCII for Code 128 B,
- * over version 10 capacity for QR) falls back to the raw value as mono text —
- * never a fake or truncated symbol.
+ * over version 10 capacity for QR), or a QR whose modules would be under one
+ * whole pixel at the host's bound, falls back to the raw value as mono text —
+ * never a fake, truncated or unreadable symbol.
  */
 
 import { Text, View, XStack, YStack } from "tamagui";
@@ -44,10 +45,11 @@ export interface BarcodePreviewProps {
   value?: string;
   /**
    * Symbol height bound in px — content geometry, bounded by the host. The
-   * 1-D strip always fills it; the QR square uses it as a maximum edge.
+   * 1-D strip always fills it; the QR square uses it as a CEILING and draws at
+   * the largest whole-pixel module that fits under it.
    */
   height?: number;
-  /** Width of one barcode module in px. */
+  /** Width of one barcode module in px. Fractional values floor for QR. */
   moduleWidth?: number;
   /** Render the human-readable value under the symbol. */
   showText?: boolean;
@@ -56,6 +58,15 @@ export interface BarcodePreviewProps {
    * alias of `qr` draws the QR matrix; others draw the Code 128 strip.
    */
   format?: string;
+  /**
+   * Render the raw value as mono text when the symbology cannot draw it —
+   * non-ASCII for Code 128 B, over capacity or under one whole pixel per
+   * module for QR. Default true, which is right for a standalone preview:
+   * disappearing silently would be worse than an honest string. A host that
+   * ALREADY shows the value beside the symbol (FieldDisplay) passes false, so
+   * an undrawable symbol contributes nothing instead of printing it twice.
+   */
+  textFallback?: boolean;
 }
 
 /** Mono value text (LC-07 CODE-KNOB-IMMUNE) — both the honest fallback for
@@ -74,15 +85,22 @@ export function BarcodePreview({
   moduleWidth = 1,
   showText = false,
   format,
+  textFallback = true,
 }: BarcodePreviewProps) {
   if (!value) return null;
   if (barcodePreviewSymbology(format) === "qr") {
     return (
-      <QrPreview value={value} height={height} moduleWidth={moduleWidth} showText={showText} />
+      <QrPreview
+        value={value}
+        height={height}
+        moduleWidth={moduleWidth}
+        showText={showText}
+        textFallback={textFallback}
+      />
     );
   }
   const runs = encodeCode128B(value);
-  if (!runs) return <MonoValue value={value} />;
+  if (!runs) return textFallback ? <MonoValue value={value} /> : null;
   const quietZone = moduleWidth * 10;
   return (
     <View
@@ -126,19 +144,33 @@ function QrPreview({
   height,
   moduleWidth,
   showText,
+  textFallback,
 }: {
   value: string;
   height: number;
   moduleWidth: number;
   showText: boolean;
+  textFallback: boolean;
 }) {
   const matrix = encodeQr(value);
-  if (!matrix) return <MonoValue value={value} />;
-  // Natural module size until the host's height bound clamps the square —
-  // then every module shrinks uniformly so the symbol stays square (LC-10).
+  if (!matrix) return textFallback ? <MonoValue value={value} /> : null;
+  // A module must land on a WHOLE pixel. A fractional module width rounds to
+  // different widths across the grid, so a decoder cannot resample the symbol —
+  // measured on the media-11 board at DPR 2: the 33px square (1.000 px/module)
+  // decoded and the 44px one (1.333 px/module) did not, in either scheme. So
+  // the module is the largest whole pixel that fits, capped by `moduleWidth`
+  // and by the host's `height` bound (LC-10 — the square never exceeds its
+  // host, and the bound is a ceiling, never a target).
   const totalModules = matrix.size + 2 * QR_QUIET_ZONE_MODULES;
-  const edge = Math.min(totalModules * moduleWidth, height);
-  const cell = edge / totalModules;
+  const cell = Math.floor(Math.min(moduleWidth, height / totalModules));
+  // Under one whole pixel there is no readable symbol to draw at all. Fall
+  // back to the value as text, the same honest contract the over-capacity and
+  // non-ASCII cases have: a symbol no reader can resample is decoration, and
+  // decoration that looks like data is the one thing this component refuses to
+  // paint. This is what a `compact` bound (24) or a table-row bound does to
+  // anything past a short SKU.
+  if (cell < 1) return textFallback ? <MonoValue value={value} /> : null;
+  const edge = cell * totalModules;
   const quietZone = cell * QR_QUIET_ZONE_MODULES;
   const rows = qrRowRuns(matrix);
   return (

package/src/fields/Combobox/Combobox.spec.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Combobox } from "./index";
@@ -313,5 +313,68 @@ describe("Combobox", () => {
       expect(activeOption(result.container)?.textContent).toContain("Carrot");
       expect(activeOption(result.container)?.getAttribute("role")).toBe("option");
     });
+
+    // The sheet core (<= OVERLAY_BREAKPOINT, and every native render) used to
+    // build headers itself from source order, so interleaved groups emitted a
+    // REPEAT header and the rows stayed unclustered — two different lists from
+    // one set of props. Both cores now go through groupComboboxOptions.
+    it("the sheet renders the same headers and row order as the desktop panel", async () => {
+      function shot(root: HTMLElement) {
+        return {
+          headers: [...root.querySelectorAll("[data-combobox-group-header]")].map(
+            (el) => el.textContent,
+          ),
+          rows: [...root.querySelectorAll('[role="option"]')].map((el) => ({
+            label: el.textContent,
+            index: el.getAttribute("data-combobox-index"),
+          })),
+        };
+      }
+
+      window.innerWidth = 1200;
+      const desktop = renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const onDesktop = shot(document.body);
+      desktop.unmount();
+
+      window.innerWidth = 500;
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+      const onSheet = shot(document.body);
+
+      expect(onDesktop.headers).toEqual(["Fruit", "Vegetable"]);
+      expect(onSheet.headers).toEqual(onDesktop.headers);
+      expect(onSheet.rows).toEqual(onDesktop.rows);
+      // One header per group: a repeated label is the defect this guards.
+      expect(new Set(onSheet.headers).size).toBe(onSheet.headers.length);
+    });
+
+    // The sheet's activeIndex indexes the same grouped list the sheet renders,
+    // so arrows land on the row the user sees rather than the source-order row.
+    it("sheet ArrowDown follows the rendered row order, not source order", async () => {
+      window.innerWidth = 500;
+      renderWithProviders(
+        <Combobox label="Produce" name="produce" options={groupedOptions} multiple open />,
+      );
+      await act(async () => {});
+
+      const rows = [...document.body.querySelectorAll('[role="option"]')];
+      expect(rows.map((el) => el.textContent?.trim())).toEqual(["Apple", "Banana", "Carrot"]);
+
+      const search = document.body.querySelector("input");
+      expect(search).toBeTruthy();
+      // activeIndex starts at 0 (Apple); one ArrowDown must highlight the row
+      // rendered second (Banana), which is sortedFiltered[2], not [1].
+      await act(async () => {
+        fireEvent.keyDown(search!, { key: "ArrowDown" });
+      });
+      const active = document.body.querySelector('[data-active="true"]');
+      expect(active?.textContent).toContain("Banana");
+      expect(active?.getAttribute("data-combobox-index")).toBe("1");
+    });
   });
 });

package/src/fields/Combobox/index.tsx

@@ -1918,6 +1918,17 @@ function NativeComboboxCore({
     return orderOptionsBySelected(filtered, current, selectedOrder);
   }, [filtered, value, filter, selectedOrder]);
 
+  // Same grouping the floating core uses (`groupComboboxOptions`, the mechanism
+  // mpo-floating-measured.md §2.3 names as ours): rows cluster by group so each
+  // group gets exactly ONE header. Rendering source order here emitted a repeat
+  // header for interleaved groups and disagreed with the desktop panel for
+  // identical props. `activeIndex` indexes `navigableOptions`, which IS the
+  // render order, so arrows still land on the row the user sees (MPO-38 AC-6).
+  const { flatOptions: navigableOptions } = useMemo(
+    () => groupComboboxOptions(sortedFiltered),
+    [sortedFiltered],
+  );
+
   const searchCleanupRef = useRef<(() => void) | null>(null);
   useEffect(() => {
     if (!onSearch || !open) return;
@@ -1942,8 +1953,8 @@ function NativeComboboxCore({
     }
   }, [open]);
 
-  const totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
-  const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  const totalItems = navigableOptions.length + (showCreateOption ? 1 : 0);
+  const createOptionIndex = showCreateOption ? navigableOptions.length : -1;
   const listboxId = comboboxListboxId(id);
   const activeDescendant =
     open && activeIndex != null && activeIndex >= 0 ? comboboxOptionId(id, activeIndex) : undefined;
@@ -2028,8 +2039,8 @@ function NativeComboboxCore({
         e.preventDefault();
         if (activeIndex === createOptionIndex && showCreateOption) {
           handleCreate();
-        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
-          handleSelect(sortedFiltered[activeIndex]);
+        } else if (activeIndex != null && activeIndex >= 0 && navigableOptions[activeIndex]) {
+          handleSelect(navigableOptions[activeIndex]);
           if (e.key === "Enter" || !multiple) setOpen(false);
         }
       }
@@ -2039,7 +2050,7 @@ function NativeComboboxCore({
       createOptionIndex,
       showCreateOption,
       activeIndex,
-      sortedFiltered,
+      navigableOptions,
       handleCreate,
       handleSelect,
       multiple,
@@ -2066,8 +2077,8 @@ function NativeComboboxCore({
         e.stopPropagation();
         if (activeIndex === createOptionIndex && showCreateOption) {
           handleCreate();
-        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
-          handleSelect(sortedFiltered[activeIndex]);
+        } else if (activeIndex != null && activeIndex >= 0 && navigableOptions[activeIndex]) {
+          handleSelect(navigableOptions[activeIndex]);
           if (e.key === "Enter" || !multiple) setOpen(false);
         } else {
           setOpen(false);
@@ -2081,7 +2092,7 @@ function NativeComboboxCore({
     activeIndex,
     createOptionIndex,
     showCreateOption,
-    sortedFiltered,
+    navigableOptions,
     handleCreate,
     handleSelect,
     multiple,
@@ -2138,12 +2149,12 @@ function NativeComboboxCore({
             {searchError}
           </Text>
         </View>
-      ) : sortedFiltered.length > 0 ? (
+      ) : navigableOptions.length > 0 ? (
         <>
-          {sortedFiltered.map((option, i) => {
+          {navigableOptions.map((option, i) => {
             const selected = isSelectedFn(option.value);
             const active = i === activeIndex;
-            const prevGroup = i > 0 ? sortedFiltered[i - 1].group : undefined;
+            const prevGroup = i > 0 ? navigableOptions[i - 1].group : undefined;
             const showGroupHeader = option.group && option.group !== prevGroup;
             const optionRow = (
               <View

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -134,6 +134,34 @@ describe("FileUpload", () => {
     expect(dropzone?.getAttribute("data-kb-ring")).toBe("true");
   });
 
+  // MPO-57 regression. `data-kb-ring="true"` proved the STATE, never the paint.
+  // The frame's LC-71 kill is a `:focus-visible` rule; a keyboard-origin focus
+  // matches `:focus-visible` too, so the base-state ring atom lost on
+  // specificity and the browser computed outline-width 0px while every
+  // assertion passed. Measured on the Storybook harness, not read off source.
+  // The ring must therefore also win INSIDE the focus-visible layer.
+  it("beats its own LC-71 focus-visible kill — the ring wins in the layer that suppresses it", () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    const zone = getZone(container);
+    fireEvent.keyDown(document.body, { key: "Tab", code: "Tab" });
+    fireEvent.focus(zone);
+    expect(zone.getAttribute("data-kb-ring")).toBe("true");
+
+    // Base-state ring (2px solid $outlineColor at offset 0).
+    expect(zone.className).toMatch(/_outlineWidth-2px/);
+    expect(zone.className).toMatch(/_outlineStyle-solid/);
+    expect(zone.className).toMatch(/_outlineOffset-0px/);
+
+    // …restated in the focus-visible layer, so the kill cannot outrank it.
+    expect(zone.className).toMatch(/_outlineWidth-0focus-visible-2px/);
+    expect(zone.className).toMatch(/_outlineStyle-0focus-visible-solid/);
+    // …and the zeroing atoms are gone from that layer while the ring is up.
+    expect(zone.className).not.toMatch(/_outlineWidth-0focus-visible-0px/);
+    expect(zone.className).not.toMatch(/_outlineStyle-0focus-visible-none/);
+  });
+
   it("keeps Choose File out of the tab order so the dropzone is the one stop", () => {
     const result = renderWithProviders(
       <FileUpload label="Attachment" name="attachment" buttonText="Pick file" />,