@multiplatform.one/components 7.83.1 → 7.84.0

package/src/Alert/Alert.spec.tsx

@@ -203,7 +203,7 @@ describe("Alert nested action press-floor paint (LC-54 / LC-71 / LC-73)", () =>
     expect(floor).not.toBeNull();
     expect(floor.className).not.toMatch(paintedStateAtom);
     const pill = floor.firstElementChild as HTMLElement;
-    expect(pill.className).toMatch(/_bg-0hover-color5/);
+    expect(pill.className).toMatch(/_bg-_groupalertAction-hover_color5/);
   });
 
   it("action activates via Enter on the floor", () => {
@@ -320,6 +320,87 @@ describe("Alert action targets size to their labels on web (FZ-8000)", () => {
   });
 });
 
+// FZ-7792: with a mouse the pointer is still over the pill while it is held,
+// so the hover fill and the press fill both match. The press fill has to win
+// the cascade, or the pill never shows its press colour on web.
+describe("Alert action pill press fill beats its hover fill on web (FZ-7792)", () => {
+  afterEach(cleanup);
+
+  type Painted = { selector: string; important: boolean; specificity: number[]; order: number };
+
+  function specificity(selector: string): number[] {
+    const s = selector.replace(/::[\w-]+/g, "");
+    const ids = (s.match(/#[\w-]+/g) ?? []).length;
+    const classes = (s.match(/\.[\w-]+|\[[^\]]*\]|:(?!:)[\w-]+/g) ?? []).length;
+    const types = (s.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) ?? []).length;
+    return [ids, classes, types];
+  }
+
+  function backgroundRules(classes: string[]): Painted[] {
+    const found: Painted[] = [];
+    let order = 0;
+    const walk = (rules: CSSRuleList) => {
+      for (const rule of Array.from(rules)) {
+        order += 1;
+        if (rule instanceof CSSStyleRule) {
+          const value = rule.style.getPropertyValue("background-color");
+          if (!value) continue;
+          for (const selector of rule.selectorText.split(",").map((part) => part.trim())) {
+            const last = selector.split(/[\s>+~]+/).pop() ?? "";
+            if (!classes.some((c) => last.includes(`.${c}`))) continue;
+            found.push({
+              selector,
+              important: rule.style.getPropertyPriority("background-color") === "important",
+              specificity: specificity(selector),
+              order,
+            });
+          }
+        } else if ("cssRules" in rule) {
+          walk((rule as CSSGroupingRule).cssRules);
+        }
+      }
+    };
+    for (const sheet of Array.from(document.styleSheets)) walk(sheet.cssRules);
+    return found;
+  }
+
+  const weight = (r: Painted) => [r.important ? 1 : 0, ...r.specificity, r.order];
+  const outranks = (a: Painted, b: Painted) => {
+    const wa = weight(a);
+    const wb = weight(b);
+    for (let i = 0; i < wa.length; i++) if (wa[i] !== wb[i]) return wa[i] > wb[i];
+    return false;
+  };
+
+  it("the held pill paints $color6 over the $color5 hover fill", () => {
+    renderWithProviders(
+      <Alert
+        intent="warning"
+        title="Trial expiring"
+        actionLabel="Upgrade"
+        secondaryActionLabel="Remind me"
+        onAction={() => {}}
+        onSecondaryAction={() => {}}
+      >
+        Your trial ends in 3 days.
+      </Alert>,
+    );
+    for (const label of ["Upgrade", "Remind me"]) {
+      const pill = (document.querySelector(`[aria-label="${label}"]`) as HTMLElement)
+        .firstElementChild as HTMLElement;
+      const classes = String(pill.className).split(/\s+/).filter(Boolean);
+      const painted = backgroundRules(classes);
+      const hover = painted.find((r) => /hover/.test(r.selector));
+      const press = painted.find((r) => /:active|press/.test(r.selector));
+      expect(hover?.selector, `${label} hover fill`).toMatch(/color5/);
+      expect(press?.selector, `${label} press fill`).toMatch(/color6/);
+      expect(outranks(press as Painted, hover as Painted), JSON.stringify({ hover, press })).toBe(
+        true,
+      );
+    }
+  });
+});
+
 describe("Alert spacing roles hold at every size token (LC-100)", () => {
   afterEach(cleanup);
 

package/src/Alert/index.tsx

@@ -197,7 +197,7 @@ const AlertActionPill = styled(View, {
   paddingVertical: "$1",
   alignItems: "center",
   justifyContent: "center",
-  hoverStyle: { backgroundColor: "$color5" },
+  "$group-alertAction-hover": { backgroundColor: "$color5" },
   "$group-alertAction-press": { backgroundColor: "$color6" },
 });
 

package/src/Carousel/Carousel.native.spec.tsx

@@ -110,8 +110,7 @@ describe("Carousel native snapping (FZ-7677)", () => {
     expect(host().onMomentumScrollEnd).toBeTypeOf("function");
   });
 
-  it.each([false, true])("settles logical offsets and dots only after momentum, RTL=%s", (rtl) => {
-    state.rtl = rtl;
+  it("settles offsets and dots only after momentum", () => {
     const onSlideChange = vi.fn();
     render({ gap: 16, onSlideChange });
     measure();
@@ -138,24 +137,26 @@ describe("Carousel native snapping (FZ-7677)", () => {
     "preserves loop navigation and ignores duplicate settle events, RTL=%s",
     (rtl) => {
       state.rtl = rtl;
+      const x = (index: number) => (rtl ? 2 - index : index) * 416;
       const onSlideChange = vi.fn();
       render({ gap: 16, loop: true, onSlideChange });
       measure();
       act(() => (state.dots.onChange as Function)(-1));
-      expect(scrollTo).toHaveBeenLastCalledWith({ x: 832, animated: true });
-      settle(832);
+      expect(scrollTo).toHaveBeenLastCalledWith({ x: x(2), animated: true });
+      settle(x(2));
       expect(state.dots.activeIndex).toBe(2);
       expect(onSlideChange).toHaveBeenCalledExactlyOnceWith(2);
       act(() => (state.dots.onChange as Function)(3));
-      expect(scrollTo).toHaveBeenLastCalledWith({ x: 0, animated: true });
-      settle(0);
+      expect(scrollTo).toHaveBeenLastCalledWith({ x: x(0), animated: true });
+      settle(x(0));
       expect(state.dots.activeIndex).toBe(0);
       expect(onSlideChange).toHaveBeenCalledTimes(2);
     },
   );
-  it("uses physical left-edge offsets on Android RTL", () => {
+
+  it.each(["ios", "android"])("uses physical left-edge offsets in RTL on %s", (os) => {
     state.rtl = true;
-    (runtime.reactNative.Platform as { OS: string }).OS = "android";
+    (runtime.reactNative.Platform as { OS: string }).OS = os;
     render({ gap: 16 });
     measure();
     expect(scrollTo).toHaveBeenLastCalledWith({ x: 832, animated: false });
@@ -195,4 +196,20 @@ describe("Carousel native snapping (FZ-7677)", () => {
     settle(-1000);
     expect(state.dots.activeIndex).toBe(0);
   });
+
+  it.each([false, true])("puts next on the trailing edge, RTL=%s", (rtl) => {
+    state.rtl = rtl;
+    render({ gap: 16 });
+    measure();
+    const side = (label: string) => {
+      const props = runtime
+        .allHostProps("View")
+        .filter((p) => p["aria-label"] === label || p.accessibilityLabel === label)
+        .at(-1);
+      const style = Object.assign({}, props, ...[props?.style].flat(Infinity));
+      return "left" in style ? "left" : "right" in style ? "right" : undefined;
+    };
+    expect(side("Previous slide")).toBe("left");
+    expect(side("Next slide")).toBe("right");
+  });
 });

package/src/Carousel/index.tsx

@@ -16,7 +16,7 @@ import {
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import type { KeyboardEvent, ReactNode } from "react";
-import { Platform } from "react-native";
+import { I18nManager } from "react-native";
 import { useState, useRef, useCallback, useEffect, Children } from "react";
 import { useTranslation } from "../shared/i18n";
 import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
@@ -194,7 +194,10 @@ export function Carousel({
   const arrowHitSlop = pressTargetHitSlop(arrowSize);
   const [activeIndex, setActiveIndex] = useState(initialSlide);
   const isRTL = useDirection() === "rtl";
-  const isAndroidRTL = !isWeb && isRTL && Platform.OS === "android";
+  // A native RTL track lays slide 0 at the physical right, but contentOffset
+  // and scrollTo stay physical on iOS (Fabric) and Android alike, so slide i
+  // sits at offset (count - 1 - i) × pitch (FZ-7677, iOS 27 simulator).
+  const isNativeRTL = !isWeb && isRTL;
   const activeIndexRef = useRef(activeIndex);
   activeIndexRef.current = activeIndex;
   const trackRef = useRef<TamaguiScrollView | null>(null);
@@ -219,10 +222,10 @@ export function Carousel({
     (index: number) => {
       if (!trackRef.current) return;
       if (index < 0 || index >= slideCount) return;
-      const offset = (isAndroidRTL ? slideCount - 1 - index : index) * (slideWidth + gapPx);
+      const offset = (isNativeRTL ? slideCount - 1 - index : index) * (slideWidth + gapPx);
       trackRef.current.scrollTo({ x: offset, animated: animateSnaps });
     },
-    [slideCount, slideWidth, gapPx, animateSnaps, isAndroidRTL],
+    [slideCount, slideWidth, gapPx, animateSnaps, isNativeRTL],
   );
 
   const goToSlide = useCallback(
@@ -250,7 +253,7 @@ export function Carousel({
     (event: { nativeEvent: { contentOffset: { x: number } } }) => {
       if (!slideWidth || slideCount === 0) return;
       const offset = event.nativeEvent.contentOffset.x;
-      const scrollX = isAndroidRTL ? (slideCount - 1) * (slideWidth + gapPx) - offset : offset;
+      const scrollX = isNativeRTL ? (slideCount - 1) * (slideWidth + gapPx) - offset : offset;
       const roundedIndex = Math.round(scrollX / (slideWidth + gapPx));
       const newIndex = isWeb ? roundedIndex : Math.max(0, Math.min(roundedIndex, slideCount - 1));
       if (newIndex !== activeIndexRef.current && newIndex >= 0 && newIndex < slideCount) {
@@ -259,7 +262,7 @@ export function Carousel({
         onSlideChange?.(newIndex);
       }
     },
-    [slideCount, onSlideChange, slideWidth, gapPx, isAndroidRTL],
+    [slideCount, onSlideChange, slideWidth, gapPx, isNativeRTL],
   );
 
   const handleScrollEndDrag = useCallback(
@@ -302,10 +305,10 @@ export function Carousel({
     if (!slideWidth || slideCount === 0 || !trackRef.current) return;
     const index = Math.max(0, Math.min(activeIndexRef.current, slideCount - 1));
     trackRef.current.scrollTo({
-      x: (isAndroidRTL ? slideCount - 1 - index : index) * (slideWidth + gapPx),
+      x: (isNativeRTL ? slideCount - 1 - index : index) * (slideWidth + gapPx),
       animated: false,
     });
-  }, [slideWidth, gapPx, slideCount, isAndroidRTL]);
+  }, [slideWidth, gapPx, slideCount, isNativeRTL]);
 
   const canGoPrev = loop || activeIndex > 0;
   const canGoNext = loop || activeIndex < slideCount - 1;
@@ -317,9 +320,13 @@ export function Carousel({
   // and the glyph mirror together (glyph swap keyed on useDirection — the
   // one mechanism for directional chrome): each edge button keeps pointing
   // outward, toward the slide it navigates to. Semantics (labels, disabled)
-  // stay bound to the prev/next action, not the physical side.
-  const prevSide = isRTL ? ("right" as const) : ("left" as const);
-  const nextSide = isRTL ? ("left" as const) : ("right" as const);
+  // stay bound to the prev/next action, not the physical side. Native RN
+  // already swaps left and right in RTL (doLeftAndRightSwapInRTL), so there
+  // the side prop stays logical or the arrows land back where LTR has them.
+  const swapsSides = isNativeRTL && I18nManager.getConstants?.().doLeftAndRightSwapInRTL !== false;
+  const mirrorSides = isRTL && !swapsSides;
+  const prevSide = mirrorSides ? ("right" as const) : ("left" as const);
+  const nextSide = mirrorSides ? ("left" as const) : ("right" as const);
   const PrevGlyph = isRTL ? CaretRightIcon : CaretLeftIcon;
   const NextGlyph = isRTL ? CaretLeftIcon : CaretRightIcon;
 

package/src/Chip/Chip.spec.tsx

@@ -284,6 +284,39 @@ describe("Chip on a preset's token scale (FZ-7158 WP-a2)", () => {
   });
 });
 
+describe("Chip vertical inset on every preset's scale (FZ-8018 theme matrix)", () => {
+  const sizes = ["$2", "$3", "$4", "$5"] as const;
+
+  it("draws the default scale exactly as a quarter of padX", () => {
+    for (const size of sizes) {
+      const { paddingHorizontal, paddingVertical } = chipFrameGeometry(size);
+      expect(paddingVertical).toBe(Math.round(paddingHorizontal * 0.25));
+    }
+  });
+
+  it("paints a space token on the installed scale wherever the default does", () => {
+    const themeConfig = createDefaultThemeConfig({ presets: { dense: densePreset } });
+    const dense = themeConfig.scales?.dense;
+    const defaults = themeConfig.scales?.[DEFAULT_SCALE_ID];
+    if (!dense || !defaults) throw new Error("scales missing");
+    const onDefault = Object.fromEntries(
+      sizes.map((size) => [size, chipFrameGeometry(size).paddingVertical]),
+    );
+    const defaultSpace = new Set(Object.values(defaults.tokens.space));
+    const denseSpace = new Set(Object.values(dense.tokens.space));
+    expect(defaultSpace.has(onDefault.$3)).toBe(true);
+    try {
+      applyThemeScale(dense);
+      for (const size of sizes) {
+        if (!defaultSpace.has(onDefault[size])) continue;
+        expect(denseSpace.has(chipFrameGeometry(size).paddingVertical)).toBe(true);
+      }
+    } finally {
+      applyThemeScale(defaults);
+    }
+  });
+});
+
 describe("Chip label line height", () => {
   for (const [size, key] of [
     [undefined, "3"],

package/src/Chip/index.tsx

@@ -8,6 +8,7 @@ import {
   pressTargetHitSlop,
   radiusStopFromToken,
   resolveRadiusClass,
+  scaleSpaceFractionPx,
   sizeRecipeForToken,
   sizeKeyBelow,
   useGlyphColor,
@@ -192,9 +193,11 @@ export function chipTone(variant: ChipVariant | undefined): ChipTone {
  * Chip geometry rides the GENERATED `chip` family (LC-75 / LC-80):
  * padX / font / icon / inner gap come from the recipe table — no handwritten
  * per-size px map. The pill has no recipe height: it hugs its label, and the
- * vertical inset derives as a quarter of the recipe padX (preserves the
- * audited $3/$4 pill height). Module-eval objects so styled() can flatten
- * (pilot pattern: InputParts spreads `recipeFamilies.control.boxVariants`).
+ * vertical inset is a quarter of the recipe padX (preserves the audited $3/$4
+ * pill height), painted as the installed scale's `$space` token where the
+ * default scale's quarter lands on one (`scaleSpaceFractionPx`). Module-eval
+ * objects so styled() can flatten (pilot pattern: InputParts spreads
+ * `recipeFamilies.control.boxVariants`).
  * Kept in lockstep with the forms Chip.
  */
 const CHIP_RECIPE_FAMILY = "chip" as const;
@@ -209,7 +212,7 @@ export function chipFrameGeometry(token: string) {
   const recipe = sizeRecipeForToken(token, { family: CHIP_RECIPE_FAMILY });
   return {
     paddingHorizontal: recipe.paddingHorizontal,
-    paddingVertical: Math.round(recipe.paddingHorizontal * 0.25),
+    paddingVertical: scaleSpaceFractionPx(recipe.paddingHorizontal, 0.25),
     gap: recipe.gap,
   };
 }
@@ -419,7 +422,8 @@ export function Chip({
   const frameGeometry = chipFrameGeometry(resolvedSize);
   // End cap: the dismiss box stretches to the pill's padding-box height and
   // mirrors it into its width, so the glyph's gap to the trailing edge equals
-  // its gap to top and bottom at every size token (forms Chip, FZ-8018).
+  // its gap to top and bottom at every size token (forms Chip, FZ-8018). The
+  // cap abuts the label: its own inset is the label-to-x gap.
   const [dismissSide, setDismissSide] = useState<number | null>(null);
   const dismissHitOutset = dismissSide ? Math.max(0, (MIN_PRESS_TARGET - dismissSide) / 2) : 0;
   // DG-RAD-02 CIRCULAR-AT-FULL. At full, 1000 paints the same h/2 circle
@@ -621,6 +625,7 @@ export function Chip({
           position="relative"
           marginVertical={-frameGeometry.paddingVertical}
           marginRight={-frameGeometry.paddingHorizontal}
+          marginLeft={typeof frameGeometry.gap === "number" ? -frameGeometry.gap : 0}
           width={dismissSide ?? undefined}
           hitSlop={pressTargetHitSlop(dismissSide ?? dismissVisual)}
           onLayout={(e) => {

package/src/Meter/Meter.spec.tsx

@@ -78,13 +78,13 @@ describe("threshold intents map to theme intents, never raw brand", () => {
     expect(resolveMeterZone({ value: 80, ...BATTERY })).toBe("ok");
   });
 
-  it("paints each zone with theme intent tokens, never hex or $accent", () => {
+  it("paints each zone with theme tokens, never hex or the accent solid", () => {
     const token = /^\$(color|orange|red)\d+$/;
     for (const zone of Object.keys(METER_ZONE_PAINT) as MeterZone[]) {
       const paint = METER_ZONE_PAINT[zone];
-      expect(paint.fill, `${zone} fill`).toMatch(token);
       expect(paint.fill).not.toMatch(/^#/);
-      expect(paint.fill).not.toContain("accent");
+      expect(paint.fill).not.toBe("$accentBackground");
+      if (zone !== "ok") expect(paint.fill, `${zone} fill`).toMatch(token);
       if ("value" in paint) {
         expect(paint.value, `${zone} value`).toMatch(token);
         expect(paint.value).not.toMatch(/^#/);
@@ -93,7 +93,8 @@ describe("threshold intents map to theme intents, never raw brand", () => {
     }
     // MPO-154: ok declares no value ink — the resolver owns it.
     expect("value" in METER_ZONE_PAINT.ok).toBe(false);
-    expect(METER_ZONE_PAINT.ok.fill).toBe("$color11");
+    // LC-172 (FZ-8044): ok is a fill on a track, the theme's accent ink, as Progress paints it.
+    expect(METER_ZONE_PAINT.ok.fill).toBe("$accentColor");
     expect(METER_ZONE_PAINT.warn.fill).toBe("$orange9");
     expect(METER_ZONE_PAINT.warn.value).toBe("$orange11");
     expect(METER_ZONE_PAINT.critical.fill).toBe("$red9");

package/src/Meter/meter.ts

@@ -23,9 +23,11 @@ export type MeterLayout = "adjacent" | "inline" | "bare";
 export const METER_RADIUS_CLASS = "DEFAULT" as const;
 
 /**
- * Zone paint — theme intent tokens, never raw brand or the accent solid.
- * ok is the LAW pairing (no verdict under threshold, DG-FB-06). warn/critical
- * are the same step-9 solid / step-11 ink channel Progress uses (DG-FB-05).
+ * Zone paint — theme tokens, never raw brand or the accent solid. ok carries
+ * no verdict (DG-FB-06), so it is the plain fill on a track Progress paints:
+ * the theme's accent ink, `formSelectedColors.trackFill` (LC-172, FZ-8044).
+ * warn/critical are the same step-9 solid / step-11 ink channel Progress uses
+ * (DG-FB-05).
  *
  * MPO-154: ok carries no `value`. Under no verdict the readout is ordinary
  * secondary text, so its ink is `knobProps.textAccentColor` — a static
@@ -33,7 +35,7 @@ export const METER_RADIUS_CLASS = "DEFAULT" as const;
  * and it pinned the readout dim at `textAccent: high`.
  */
 export const METER_ZONE_PAINT = {
-  ok: { fill: "$color11" },
+  ok: { fill: "$accentColor" },
   warn: { fill: "$orange9", value: "$orange11" },
   critical: { fill: "$red9", value: "$red11" },
 } as const;

package/src/SheetModal/SheetModal.regularWidth.spec.tsx

@@ -0,0 +1,87 @@
+/**
+ * FZ-8939 (LC-266): the web SheetModal at regular width is the native
+ * panel's twin (FZ-8116). On a desktop window the Tier 2 cells
+ * `components-sheetframe--default` and `components-formlayouts--sign-in-in-sheet`
+ * drew the sheet as a band across the whole window. It is a bottom panel
+ * SHEET_PANEL_WIDTH wide, centred, with the scrim showing on both sides, and a
+ * press beside it dismisses. At compact width it stays the full-width sheet.
+ */
+import { SHEET_PANEL_WIDTH } from "@multiplatform.one/forms";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { SheetModal } from "./index";
+
+// The DOM under test reports no window width of its own, so the window is
+// set here, as the native regular-width spec does.
+const screen = vi.hoisted(() => ({ width: 1280, height: 800 }));
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  useWindowDimensions: () => ({ ...screen, scale: 1, fontScale: 1 }),
+}));
+
+function setWindowWidth(width: number) {
+  screen.width = width;
+}
+
+afterEach(() => {
+  cleanup();
+  screen.width = 1280;
+});
+
+async function openAt(width: number) {
+  setWindowWidth(width);
+  const onOpenChange = vi.fn();
+  const view = renderWithProviders(
+    <SheetModal open onOpenChange={onOpenChange}>
+      <Text>Sign in</Text>
+    </SheetModal>,
+  );
+  // tamagui draws a cover under the frame with the frame's own props; the
+  // frame is the one that is not the cover.
+  let frame: HTMLElement | null = null;
+  await waitFor(() => {
+    frame = document.querySelector('[role="dialog"]:not([data-sheet-cover])');
+    expect(frame).not.toBeNull();
+  });
+  return { view, frame: frame as unknown as HTMLElement, onOpenChange };
+}
+
+const atoms = (node: Element) => String(node.className).split(/\s+/).filter(Boolean);
+
+describe("SheetModal web at regular width (FZ-8939, LC-266)", () => {
+  it("is a centred panel capped at the panel width on a desktop window", async () => {
+    const { frame } = await openAt(1280);
+    expect(frame.getAttribute("data-sheet-form")).toBe("panel");
+    const width = frame.style.width || atoms(frame).find((a) => a.startsWith("_w-")) || "";
+    expect(width).toContain(`${SHEET_PANEL_WIDTH}px`);
+    expect(atoms(frame).some((a) => a === "_als-center")).toBe(true);
+    // A panel keeps its side edges; the compact band drops them.
+    expect(atoms(frame)).not.toContain("_blw-0px");
+    expect(atoms(frame)).not.toContain("_brw-0px");
+  });
+
+  it("dismisses on a press beside the panel, not on a press inside it", async () => {
+    const { frame, onOpenChange } = await openAt(1280);
+    await act(async () => {
+      fireEvent.click(frame);
+    });
+    expect(onOpenChange).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.click(frame.parentElement as HTMLElement);
+    });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("stays the full-width bottom sheet at phone width", async () => {
+    const { frame, onOpenChange } = await openAt(390);
+    expect(frame.getAttribute("data-sheet-form")).toBe("bottom");
+    expect(atoms(frame)).toContain("_blw-0px");
+    expect(atoms(frame)).toContain("_brw-0px");
+    await act(async () => {
+      fireEvent.click(frame.parentElement as HTMLElement);
+    });
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});

package/src/SheetModal/index.tsx

@@ -15,7 +15,12 @@ import {
   transitionProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { OverlayStackProvider, useOverlayZIndex } from "@multiplatform.one/forms";
+import {
+  OverlayStackProvider,
+  overlaySizeClass,
+  sheetPanelWidth,
+  useOverlayZIndex,
+} from "@multiplatform.one/forms";
 import { useEffect, useId, useRef, type ReactNode } from "react";
 import { isWeb, Sheet, View, useWindowDimensions } from "tamagui";
 import { OverlayTitleIdContext } from "../actions/StandardAction";
@@ -69,6 +74,47 @@ const IN_DIALOG_REGION = { inDialogRegion: true } as const;
 const fillSlot = { flex: 1, minHeight: 0 } as const;
 const nonShrinking = { flexShrink: 0 } as const;
 
+/** A compact sheet spans the window: only its top edge meets the page. */
+const bottomEdges = { borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 } as const;
+
+/**
+ * LC-266 (FZ-8939): at regular width the sheet is the native panel's twin, a
+ * bottom panel `sheetPanelWidth` wide and centred with the scrim on both
+ * sides. Its side edges stay, so it reads as a panel rather than a band.
+ */
+function regularPanel(windowWidth: number) {
+  return {
+    width: sheetPanelWidth(windowWidth),
+    alignSelf: "center",
+    borderBottomWidth: 0,
+  } as const;
+}
+
+/**
+ * The sheet's frame sits in a window-wide band that tamagui's pan responder
+ * owns, so a press on the band beside a regular-width panel never reaches the
+ * scrim. A press that lands on the band itself, not inside the panel or the
+ * grabber, is a press outside the sheet, and dismisses it (LC-266).
+ */
+function useBandDismiss(
+  enabled: boolean,
+  frameRef: { current: HTMLElement | null },
+  onDismiss: () => void,
+) {
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  useEffect(() => {
+    if (!isWeb || !enabled) return;
+    const band = frameRef.current?.parentElement;
+    if (!band) return;
+    const onClick = (event: MouseEvent) => {
+      if (event.target === band) onDismissRef.current();
+    };
+    band.addEventListener("click", onClick);
+    return () => band.removeEventListener("click", onClick);
+  });
+}
+
 /** LC-71: the sheet frame is not a control. Auto-focus must not paint a ring. */
 const frameRingReset = {
   outlineWidth: 0,
@@ -112,7 +158,8 @@ export function SheetModal({
       />
     ) : null;
   const snap = resolveWebSnap({ snapPoint, fill });
-  const { height: windowHeight } = useWindowDimensions();
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+  const regular = overlaySizeClass(windowWidth) === "regular";
   const { knobProps } = useResolvedKnobs();
   const sheetZIndex = useOverlayZIndex("sheet");
   const transition = knobProps.motion.slide.transition;
@@ -120,6 +167,7 @@ export function SheetModal({
 
   useSheetFrameFocus(open, frameRef);
   useSheetEscapeDismiss(open, () => onOpenChange(false));
+  useBandDismiss(open && regular, frameRef, () => onOpenChange(false));
 
   return (
     <Sheet
@@ -147,6 +195,7 @@ export function SheetModal({
           role: "dialog",
           "aria-modal": true,
           "aria-labelledby": headerContent ? titleId : undefined,
+          "data-sheet-form": regular ? "panel" : "bottom",
         } as Record<string, unknown>)}
         {...knobProps.gap}
         {...(snap.snapPointsMode === "fit"
@@ -154,9 +203,7 @@ export function SheetModal({
           : null)}
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
-        borderLeftWidth={0}
-        borderRightWidth={0}
-        borderBottomWidth={0}
+        {...(regular ? regularPanel(windowWidth) : bottomEdges)}
         overflow="hidden"
         {...frameRingReset}
       >

package/src/Text.stories.tsx

@@ -71,6 +71,19 @@ export const FontWeightFlip: Story = {
   ),
 };
 
+export const InterFaces: Story = {
+  name: "Inter faces (400 to 800)",
+  render: () => (
+    <YStack gap="$2" maxWidth={520}>
+      {(["400", "500", "600", "700", "800"] as const).map((weight) => (
+        <SizableText key={weight} size="$6" fontWeight={weight}>
+          {weight} Hamburgefonstiv 0123
+        </SizableText>
+      ))}
+    </YStack>
+  ),
+};
+
 const digitPresets = {
   Default: defaultPreset,
   Bold: boldPreset,

package/src/appShell/TabBar.spec.tsx

@@ -10,8 +10,9 @@ import {
   Preset,
   createDefaultThemeConfig,
   normalizeToHex,
-  useAccentOnSurface,
+  useActiveTabInk,
   useGlyphColor,
+  useIdentityInkOnSurface,
 } from "@multiplatform.one/theme";
 import { act, cleanup, fireEvent, renderHook, screen } from "@testing-library/react";
 import fs from "node:fs";
@@ -67,9 +68,10 @@ function probeItems(seen: Record<string, GlyphProps>): TabBarItem[] {
   ];
 }
 
-const expected: { accent?: string; secondary?: string; primary?: string } = {};
+const expected: { accent?: string; secondary?: string; primary?: string; identity?: string } = {};
 function InkProbe() {
-  expected.accent = useAccentOnSurface();
+  expected.accent = useActiveTabInk();
+  expected.identity = useIdentityInkOnSurface();
   expected.secondary = useGlyphColor(tabBarInactiveInk);
   expected.primary = useGlyphColor("$color");
   return null;
@@ -152,9 +154,13 @@ describe("TabBar (LC-150 TAB-BAR-ANATOMY)", () => {
       });
     }
 
-    it(`${scheme}, no hue: the active tab is the preset's accent ink, inactive the secondary ink`, () => {
+    it(`${scheme}, no hue: the active tab is the neutral accent's ink, bold mono, never grey`, () => {
       const seen = renderBar(scheme, "/");
       expect(expected.accent).toBeTruthy();
+      // The house accent is the neutral inverse: the active tab is the same
+      // ink the system bar draws, never the grey accent-ramp step (Round 54).
+      expect(expected.accent).toBe(expected.identity);
+      expect(expected.accent).not.toBe(expected.secondary);
       expect(seen["/"]).toMatchObject({ color: expected.accent, weight: "fill" });
       expect(seen["/moves"]).toMatchObject({ color: expected.secondary, weight: "regular" });
     });