@multiplatform.one/components 7.83.1 → 7.84.0

package/src/layouts/Screen.chromeClearance.spec.tsx

@@ -7,6 +7,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, screen } from "@testing-library/react";
 import { afterEach, expect, it } from "vitest";
 import { setBottomChromeInset } from "../appShell/bottomChrome";
+import { BottomAccessory } from "./bottomAccessory";
 import { Screen } from "./page";
 
 const bar = Symbol("bar");
@@ -39,3 +40,30 @@ it("clears the bar on a screen that does not scroll", () => {
   renderWithProviders(<Screen scroll={false}>row</Screen>);
   expect(screen.getByTestId("screen-chrome-clearance")).toBeTruthy();
 });
+
+it("hands the clearance to a slot accessory that stands on a bar it does not ride (FZ-7995)", () => {
+  act(() => setBottomChromeInset(bar, 83));
+  renderWithProviders(
+    <Screen>
+      row
+      <BottomAccessory>
+        <span data-testid="pager">pager</span>
+      </BottomAccessory>
+    </Screen>,
+  );
+  expect(screen.queryByTestId("screen-chrome-clearance")).toBeNull();
+  const lift = screen.getByTestId("bottom-accessory-lift");
+  expect(lift.contains(screen.getByTestId("pager"))).toBe(true);
+  expect(getComputedStyle(lift).paddingBottom === "83px" || /83px/.test(lift.outerHTML)).toBe(true);
+});
+
+it("grows its scrolling column to its content, so the clearance ends the content, not the viewport", () => {
+  act(() => setBottomChromeInset(bar, 77));
+  renderWithProviders(<Screen>row</Screen>);
+  const column = screen.getByTestId("screen");
+  const style = getComputedStyle(column);
+  const html = column.outerHTML;
+  expect(style.flexShrink === "0" || /_fs-0\b|flex-shrink: 0/.test(html)).toBe(true);
+  expect(style.flexBasis === "0px" || /_fb-0px\b|flex-basis: 0px/.test(html)).toBe(false);
+  expect(column.nextElementSibling).toBe(screen.getByTestId("screen-chrome-clearance"));
+});

package/src/layouts/bottomAccessory.tsx

@@ -4,7 +4,10 @@
  * UIPageControl under a paged list), not inline after the content.
  *
  * Under a floating TabBar the accessory moves into the bar, which floats it
- * as its own capsule above the tab capsule (LC-150). Otherwise a page shell
+ * as its own capsule above the tab capsule (LC-150), and under the system tab
+ * bar on iOS 26 into its bottom accessory (FZ-7995). A tab bar that hosts no
+ * accessory (the system bar before iOS 26) still covers the bottom of the
+ * screen, so the slot's bar stands on it instead of on the home indicator. Otherwise a page shell
  * (`Screen`) owns one bottom-accessory slot. Any component
  * hands it a control with `<BottomAccessory>`; the shell draws it in a bar
  * under its scroll view that stays put while the content scrolls, so the
@@ -30,7 +33,11 @@ import {
   type ReactNode,
 } from "react";
 import { YStack, isWeb } from "tamagui";
-import { setBottomAccessory, useFloatingBarMounted } from "../appShell/bottomChrome";
+import {
+  setBottomAccessory,
+  useBottomChromeInset,
+  useFloatingBarMounted,
+} from "../appShell/bottomChrome";
 import { componentColors } from "../componentColors";
 import { BottomSafeArea } from "./bottomSafeArea";
 
@@ -140,6 +147,15 @@ export function BottomAccessory({ children }: BottomAccessoryProps) {
 }
 
 /** A page shell's slot: the bar the registered accessories render in. */
+/** True while a page's slot holds an accessory. */
+export function useBottomAccessoryOccupied(store: BottomAccessoryStore): boolean {
+  return useSyncExternalStore(
+    store.subscribe,
+    () => store.getSnapshot().length > 0,
+    () => false,
+  );
+}
+
 export function BottomAccessoryHost({
   store,
   inset,
@@ -161,8 +177,8 @@ export function BottomAccessoryHost({
 }
 
 /**
- * The bar: the page's fill under a top hairline, and the home indicator's
- * inset below the controls.
+ * The bar: the page's fill under a top hairline, and below the controls the
+ * home indicator's inset, or in a page's slot the height a tab bar covers.
  */
 function BottomAccessoryBar({
   children,
@@ -176,6 +192,20 @@ function BottomAccessoryBar({
   hosted?: boolean;
 }) {
   const { knobProps } = useResolvedKnobs({ component: "ScreenToolbar" });
+  const chromeInset = useBottomChromeInset();
+  const lift = hosted && chromeInset > 0;
+  const controls = (
+    <YStack
+      width="100%"
+      {...(maxWidth ? { maxWidth, alignSelf: "center" as const } : null)}
+      alignItems="center"
+      paddingHorizontal={(inset ?? knobProps.panelPadding.padding) as "$4"}
+      paddingVertical={knobProps.gap.gap as "$2"}
+      {...knobProps.gap}
+    >
+      {children}
+    </YStack>
+  );
   return (
     <Surface bar>
       <YStack
@@ -188,18 +218,13 @@ function BottomAccessoryBar({
         borderColor={componentColors.divider as never}
         style={webSticky as never}
       >
-        <BottomSafeArea>
-          <YStack
-            width="100%"
-            {...(maxWidth ? { maxWidth, alignSelf: "center" as const } : null)}
-            alignItems="center"
-            paddingHorizontal={(inset ?? knobProps.panelPadding.padding) as "$4"}
-            paddingVertical={knobProps.gap.gap as "$2"}
-            {...knobProps.gap}
-          >
-            {children}
+        {lift ? (
+          <YStack width="100%" paddingBottom={chromeInset} data-testid="bottom-accessory-lift">
+            {controls}
           </YStack>
-        </BottomSafeArea>
+        ) : (
+          <BottomSafeArea>{controls}</BottomSafeArea>
+        )}
       </YStack>
     </Surface>
   );

package/src/layouts/page.tsx

@@ -40,7 +40,7 @@ import {
   type ButtonProps,
 } from "@multiplatform.one/forms";
 import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
-import { useState, type ReactNode } from "react";
+import { createContext, useContext, useState, type ReactNode } from "react";
 import { barTitleSpan, sideExtents } from "./barTitleSpan";
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import type { ScrollViewProps as TamaguiScrollViewProps, XStackProps, YStackProps } from "tamagui";
@@ -66,6 +66,7 @@ import { ScrollView } from "../ScrollView";
 import { KeyboardAvoidingWrapper } from "./KeyboardAvoidingWrapper";
 import {
   BottomAccessoryHost,
+  useBottomAccessoryOccupied,
   BottomAccessoryScope,
   createBottomAccessoryStore,
 } from "./bottomAccessory";
@@ -293,7 +294,10 @@ function PageShell({
     <YStack
       ref={scrollState.contentRoot as never}
       data-testid="screen"
-      flex={1}
+      // In a scroll view the column grows to its content (basis auto, no
+      // shrink): with flex 1 it was held to the viewport on web, its rows
+      // overflowed it, and the chrome clearance after it landed mid-list.
+      {...(scroll ? { flexGrow: 1, flexShrink: 0, flexBasis: "auto" as const } : { flex: 1 })}
       width="100%"
       {...(maxWidth && !bleed ? { maxWidth, alignSelf: "center" } : null)}
       {...(noPadding ? null : knobProps.panelPadding)}
@@ -334,8 +338,12 @@ function PageShell({
   };
 
   // The floating tab bar covers the bottom of the screen; content scrolls
-  // under it, and this clears its last row.
-  const chromeClearance = <BottomChromeClearance testID="screen-chrome-clearance" />;
+  // under it, and this clears its last row. A slot accessory stands on the bar
+  // and ends the scroll view above it, so it takes the clearance instead.
+  const accessoryOccupied = useBottomAccessoryOccupied(accessories);
+  const chromeClearance = accessoryOccupied ? null : (
+    <BottomChromeClearance testID="screen-chrome-clearance" />
+  );
 
   if (!scroll) {
     return shell(
@@ -416,6 +424,32 @@ export interface PageHeaderProps extends YStackProps {
   titleScale?: PageTitleScale;
 }
 
+const PushedPageContext = createContext<"inline" | "hero" | null>(null);
+
+/**
+ * LC-270 PUSHED-PAGE-INLINE-TITLE: marks a pushed page, a detail or form page
+ * reached through a back control. At compact width its title rides the top
+ * bar, centred between back and the actions, and its `PageHeader` draws no
+ * large title. Root pages keep LC-157's large title. `hero` is the App Store
+ * and Music variant: the page's own title (an identity block's name) stays in
+ * the content, the bar shows nothing at rest, and the same title fades into
+ * the bar once that name scrolls out of view (LC-157's measured collapse).
+ */
+export function PushedPage({ hero = false, children }: { hero?: boolean; children: ReactNode }) {
+  return (
+    <PushedPageContext.Provider value={hero ? "hero" : "inline"}>
+      {children}
+    </PushedPageContext.Provider>
+  );
+}
+
+/** True when the page's title belongs in its top bar from rest (LC-270). */
+export function useInlinePageTitle(): boolean {
+  const pushed = useContext(PushedPageContext);
+  const compact = useLayoutSizeClass() === "compact";
+  return pushed === "inline" && compact;
+}
+
 /**
  * Standard page header (Polaris Page / Primer PageHeader / Linear).
  *
@@ -452,24 +486,32 @@ export function PageHeader({
   // LC-157: the page title is the Screen's large title; its top bar shows it
   // once it scrolls away.
   const largeTitle = useLargeTitle(title, headingLevel === 1 && !heading);
+  // LC-270: a pushed page's title is in its top bar at compact width.
+  const inlineTitle = useInlinePageTitle() && headingLevel === 1;
+  // LC-143: a phone's page title takes the width its actions leave, on one
+  // line, so wide actions truncate it instead of breaking it into letters.
+  const compact = useLayoutSizeClass() === "compact";
   // D-11: the page-title step comes from the knob (`moderate` by default), so
   // one dial re-scales every composed screen; `titleScale` is the explicit
   // per-instance eject and resolves through the same table. The semantic tag
   // still follows headingLevel — the step is emphasis, not structure.
   const titleSize = titleScale ? resolvePageTitleScale(titleScale) : knobProps.pageTitle;
-  const titleNode =
-    heading ??
-    (title ? (
-      <TitleTag
-        margin={0}
-        {...largeTitle}
-        {...titleSize}
-        {...knobProps.heading}
-        {...(knobProps.heading.fontWeight ? { "data-font-weight-knob": "bold" } : null)}
-      >
-        {title}
-      </TitleTag>
-    ) : null);
+  const titleNode = inlineTitle
+    ? null
+    : (heading ??
+      (title ? (
+        <TitleTag
+          margin={0}
+          {...(compact ? { numberOfLines: 1 } : null)}
+          {...largeTitle}
+          {...titleSize}
+          {...knobProps.heading}
+          {...(knobProps.heading.fontWeight ? { "data-font-weight-knob": "bold" } : null)}
+        >
+          {title}
+        </TitleTag>
+      ) : null));
+  if (inlineTitle && !subtitle && !status && !actions && !nav && !children) return null;
 
   // When nav is present the strip's active indicator sits ON this rule, so
   // there is one hairline — not a second competing line. The header then
@@ -688,6 +730,9 @@ function useBarTitleSpan() {
   };
 }
 
+// LC-270: the pushed page's bar title is the page's heading.
+const pageTitleRole = { role: "heading", "aria-level": 1 } as const;
+
 function BarTitle({
   title,
   span,
@@ -766,6 +811,7 @@ function InlineToolbar({ leading, trailing, title, children, ...rest }: ScreenTo
   const bleed = insetToken ? { marginHorizontal: negateSpaceToken(insetToken) as "$4" } : null;
   // LC-145: a phone top bar is one row; the leading group shrinks first.
   const oneRow = useLayoutSizeClass() === "compact";
+  const pushedTitle = useInlinePageTitle();
   // LC-153: the toolbar is a bar, so its neutral buttons paint plain.
   return (
     <Surface bar>
@@ -804,7 +850,12 @@ function InlineToolbar({ leading, trailing, title, children, ...rest }: ScreenTo
           {trailing}
         </IconButtonGroup>
         {title ? (
-          <BarTitle title={title} span={titleSpan.span} onTitleWidth={titleSpan.measureTitle} />
+          <BarTitle
+            title={title}
+            span={titleSpan.span}
+            onTitleWidth={titleSpan.measureTitle}
+            {...(pushedTitle ? pageTitleRole : null)}
+          />
         ) : null}
       </XStack>
     </Surface>
@@ -834,6 +885,8 @@ function PinnedTopBar({
   const titleSpan = useBarTitleSpan();
   const motion = transitionProps(knobProps.motion.control);
   const title = inlineTitle ?? largeTitle;
+  // LC-270: a pushed page shows its title in the bar from rest, as its heading.
+  const pushedTitle = useInlinePageTitle();
   // LC-153: the pinned bar is a bar, so its neutral buttons paint plain.
   return (
     <Surface bar>
@@ -888,7 +941,8 @@ function PinnedTopBar({
               title={title}
               span={titleSpan.span}
               onTitleWidth={titleSpan.measureTitle}
-              shown={Boolean(inlineTitle) || collapsed}
+              shown={Boolean(inlineTitle) || collapsed || pushedTitle}
+              {...(pushedTitle ? pageTitleRole : null)}
               {...motion}
             />
           ) : null}

package/src/layouts/pageTitleOneLine.spec.tsx

@@ -0,0 +1,42 @@
+/**
+ * LC-143: on a phone a page title takes the width its actions leave, on one
+ * line with an ellipsis. Wide actions beside it (a view switcher, "…", Add)
+ * once squeezed the title column until it broke one letter per line.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PageHeader } from "./page";
+
+const layout = vi.hoisted(() => ({ size: "wide" }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return { ...actual, useLayoutSizeClass: () => layout.size };
+});
+
+afterEach(() => {
+  layout.size = "wide";
+  cleanup();
+});
+
+function header() {
+  return (
+    <PageHeader title="Pokemon" actions={<div style={{ width: 320 }}>List · Report · … · +</div>} />
+  );
+}
+
+describe("page title width (LC-143)", () => {
+  it("keeps a phone's page title on one line and truncates it beside wide actions", () => {
+    layout.size = "compact";
+    renderWithProviders(header());
+    const style = getComputedStyle(screen.getByRole("heading", { name: "Pokemon" }));
+    expect(style.textOverflow).toBe("ellipsis");
+    expect(style.whiteSpace).toBe("nowrap");
+  });
+
+  it("lets a wide screen's page title wrap", () => {
+    renderWithProviders(header());
+    const style = getComputedStyle(screen.getByRole("heading", { name: "Pokemon" }));
+    expect(style.textOverflow).not.toBe("ellipsis");
+  });
+});

package/src/layouts/pushedPageTitle.spec.tsx

@@ -0,0 +1,116 @@
+/**
+ * LC-270 PUSHED-PAGE-INLINE-TITLE: on a phone a pushed page (a detail or form
+ * page under a back control) shows its title centred in its top bar from rest,
+ * with no large title under the bar. Root pages keep LC-157's large title,
+ * and a pushed page keeps it at regular width.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PageBackButton, PageHeader, PushedPage, Screen, ScreenToolbar } from "./page";
+import { DetailPageLayout } from "./PageTemplates";
+
+const layout = vi.hoisted(() => ({ size: "wide" }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return { ...actual, useLayoutSizeClass: () => layout.size };
+});
+
+const TITLE_BOTTOM = 120;
+
+beforeEach(() => {
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(function (this: Element) {
+    const bottom = this.tagName === "H1" ? TITLE_BOTTOM : 0;
+    return { top: 0, bottom, left: 0, right: 0, width: 0, height: bottom, x: 0, y: 0 } as DOMRect;
+  });
+});
+
+afterEach(() => {
+  layout.size = "wide";
+  vi.restoreAllMocks();
+  cleanup();
+});
+
+function detail() {
+  return (
+    <DetailPageLayout
+      toolbarLeading={<PageBackButton label="Pokemon" onPress={vi.fn()} />}
+      header={<PageHeader title="caterpie" divider={false} />}
+    >
+      <div>fields</div>
+    </DetailPageLayout>
+  );
+}
+
+function barTitle(): HTMLElement | null {
+  return document.querySelector("[data-top-bar] [data-bar-title]");
+}
+
+describe("pushed page title (LC-270)", () => {
+  it("puts a pushed page's title in its phone bar at rest, as the page heading", () => {
+    layout.size = "compact";
+    renderWithProviders(detail());
+    expect(document.querySelector("h1")).toBeNull();
+    const title = barTitle();
+    expect(title?.textContent).toBe("caterpie");
+    expect(title?.getAttribute("aria-hidden")).not.toBe("true");
+    expect(title?.getAttribute("role")).toBe("heading");
+    expect(screen.getByRole("heading", { name: "caterpie" })).toBe(title);
+  });
+
+  it("keeps the large title under the bar on a wide screen", () => {
+    renderWithProviders(detail());
+    expect(screen.getByRole("heading", { name: "caterpie" }).tagName).toBe("H1");
+    expect(barTitle()?.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("keeps a root page's large title on a phone", () => {
+    layout.size = "compact";
+    renderWithProviders(
+      <Screen topBar={<ScreenToolbar trailing={<span>New</span>} />}>
+        <PageHeader title="Pokemon" />
+      </Screen>,
+    );
+    expect(screen.getByRole("heading", { name: "Pokemon" }).tagName).toBe("H1");
+  });
+
+  it("keeps a pushed page's status under the bar when the title moves up", () => {
+    layout.size = "compact";
+    renderWithProviders(
+      <DetailPageLayout
+        toolbarLeading={<PageBackButton label="Pokemon" onPress={vi.fn()} />}
+        header={<PageHeader title="caterpie" status={<span>Draft</span>} divider={false} />}
+      >
+        <div>fields</div>
+      </DetailPageLayout>,
+    );
+    expect(screen.getByText("Draft")).toBeTruthy();
+    expect(document.querySelector("h1")).toBeNull();
+  });
+
+  it("keeps a hero page's name in the content at rest and fades it into the bar once scrolled away", async () => {
+    layout.size = "compact";
+    renderWithProviders(
+      <PushedPage hero>
+        <Screen
+          scrollViewProps={{ testID: "page-scroll" } as never}
+          topBar={<ScreenToolbar leading={<PageBackButton label="Pokemon" onPress={vi.fn()} />} />}
+        >
+          <div>art stage</div>
+          <PageHeader title="caterpie" divider={false} />
+          <div style={{ height: 2000 }} />
+        </Screen>
+      </PushedPage>,
+    );
+    expect(screen.getByRole("heading", { name: "caterpie" }).tagName).toBe("H1");
+    expect(barTitle()?.getAttribute("aria-hidden")).toBe("true");
+    await act(async () => {
+      fireEvent.scroll(screen.getByTestId("page-scroll"), {
+        target: { scrollTop: TITLE_BOTTOM + 10 },
+      });
+      await new Promise((resolve) => setTimeout(resolve, 120));
+    });
+    expect(barTitle()?.getAttribute("aria-hidden")).not.toBe("true");
+    expect(barTitle()?.textContent).toBe("caterpie");
+  });
+});

package/src/layouts/tags-token-field.spec.tsx

@@ -7,7 +7,7 @@ import { TamaguiProvider } from "tamagui";
 // asserts on the atomic classes (same approach as timeline-radius.spec.tsx).
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset, createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { Preset, createDefaultThemeConfig, sizeRecipeForToken } from "@multiplatform.one/theme";
 import * as React from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { Tags } from "./tags";
@@ -49,9 +49,12 @@ describe("Tags token field: one way to add (FZ-8018)", () => {
     expect(addInput().getAttribute("placeholder")).toBe("Add tag...");
   });
 
-  it("the input's font size class matches the chip label", () => {
+  it("the input takes the text field's font size, not the chip label's (FZ-8018 round 3)", () => {
     renderTags();
-    expect(classesByPrefix(addInput(), ["_fos-"])).toEqual(
+    expect(classesByPrefix(addInput(), ["_fos-"])).toEqual([
+      `_fos-${sizeRecipeForToken("$4").fontSize}px`,
+    ]);
+    expect(classesByPrefix(addInput(), ["_fos-"])).not.toEqual(
       classesByPrefix(screen.getByText("urgent"), ["_fos-"]),
     );
   });
@@ -80,14 +83,27 @@ describe("Tags token field: one way to add (FZ-8018)", () => {
     },
   );
 
-  it("the chip label keeps the $3 body line height", () => {
+  it("chips sit one size below the field: the label takes the $2 body line height (FZ-8018 round 3)", () => {
     renderWithProviders(
       <TamaguiProvider config={createDefaultThemeConfig().tamagui} defaultTheme="light">
         <Tags tags={tags} onAdd={vi.fn()} onRemove={vi.fn()} />
       </TamaguiProvider>,
       { tamagui: false },
     );
-    expect(getComputedStyle(screen.getByText("urgent")).lineHeight).toBe("21px");
+    expect(getComputedStyle(screen.getByText("urgent")).lineHeight).toBe("20px");
+  });
+
+  it("with chips, the entry's text starts at a chip label's inset: edge plus padding (FZ-8018 round 3b)", () => {
+    renderTags();
+    const [chipPad] = classesByPrefix(chipFrameOf(screen.getByText("urgent")), ["_pl-"]);
+    const chipInset = Number.parseFloat(chipPad.slice("_pl-".length));
+    expect(chipInset).toBeGreaterThan(0);
+    expect(classesByPrefix(addInput(), ["_pl-"])).toEqual([`_pl-${chipInset + 1}px`]);
+  });
+
+  it("with no chips, the entry sits on the field's own inset (FZ-8018 round 3b)", () => {
+    renderWithProviders(<Tags tags={[]} onAdd={vi.fn()} onRemove={vi.fn()} />);
+    expect(classesByPrefix(addInput(), ["_pl-"]).filter((c) => c !== "_pl-0px")).toEqual([]);
   });
 
   it("Return and comma commit the typed tag", () => {

package/src/layouts/tags.tsx

@@ -6,7 +6,9 @@ import {
   ensureKeyboardModalityTracking,
   menuRowFrame,
   sizeKeyBelow,
+  sizeRecipeForToken,
   sizeTokenStep,
+  textFieldInset,
   useGlyphColor,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -23,16 +25,21 @@ import {
   XStack,
   YStack,
   isWeb,
+  styled,
   type InputProps,
   type SizeTokens,
   type YStackProps,
 } from "tamagui";
 import { ScrollView } from "../ScrollView";
-import { Chip, chipTextSize, type ChipColor, type ChipSize, type ChipVariant } from "../Chip";
+import { Chip, chipFrameGeometry, type ChipColor, type ChipSize, type ChipVariant } from "../Chip";
 import { componentColors } from "../componentColors";
 import { withInterp } from "../shared/t";
 import { Text } from "../Text";
 
+// The text field's component theme, so the token field's fill and edge are the
+// sibling text field's in every preset (FZ-8018 round 3).
+const TagsFieldFrame = styled(XStack, { name: "InputContainerFrame" });
+
 // ---------------------------------------------------------------------------
 // Types  (generic -- no Frappe dependency)
 // ---------------------------------------------------------------------------
@@ -163,7 +170,12 @@ export function Tags({
     ensureKeyboardModalityTracking();
   }
 
-  const chipSize = (small ? sizeKeyBelow(knobProps.sizeToken) : knobProps.sizeToken) as ChipSize;
+  const chipSize = sizeKeyBelow(knobProps.sizeToken) as ChipSize;
+  const fieldRecipe = sizeRecipeForToken(String(knobProps.sizeToken));
+  const [chipHeight, setChipHeight] = useState<number | null>(null);
+  // The entry's text starts where a chip's label would: the chip's 1px edge
+  // plus its padding, so it gets the room a tag gets (FZ-8018 round 3b).
+  const entryInset = tags.length > 0 ? 1 + chipFrameGeometry(chipSize).paddingHorizontal : 0;
 
   const [inputValue, setInputValue] = useState("");
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -361,6 +373,11 @@ export function Tags({
     ? (chipTheme as ChipColor)
     : "gray";
 
+  const onChipLayout = (e: { nativeEvent: { layout: { height: number } } }) => {
+    const h = e.nativeEvent.layout.height;
+    if (h > 0 && Math.abs((chipHeight ?? 0) - h) > 0.5) setChipHeight(h);
+  };
+
   const renderTagItem = (tag: TagItem) => {
     const actions = {
       onRemove: () => onRemove?.(tag),
@@ -385,6 +402,7 @@ export function Tags({
         key={tag.id}
         cursor="pointer"
         data-tag-chip=""
+        onLayout={onChipLayout}
         onPress={(e) => {
           e.stopPropagation?.();
           onTagClick(tag);
@@ -397,7 +415,9 @@ export function Tags({
         {chip}
       </XStack>
     ) : (
-      <View data-tag-chip="">{chip}</View>
+      <View data-tag-chip="" onLayout={onChipLayout}>
+        {chip}
+      </View>
     );
 
     if (renderTag) {
@@ -512,27 +532,25 @@ export function Tags({
     setIsPopoverOpen(true);
   }, [canAdd]);
 
-  const fieldPadH = small ? ("$2" as const) : ("$2.5" as const);
-  const fieldPadV = small ? ("$1.5" as const) : ("$2" as const);
-
   const field = (
-    <XStack
+    <TagsFieldFrame
       data-testid="tags-field"
       flexWrap="wrap"
       alignItems="center"
-      gap="$1.5"
+      alignContent="center"
+      gap="$2"
       width="100%"
-      minHeight={knobProps.sizeToken}
-      paddingHorizontal={fieldPadH}
-      paddingVertical={fieldPadV}
-      backgroundColor={componentColors.surface.background}
+      minHeight={fieldRecipe.height}
+      paddingHorizontal={textFieldInset(fieldRecipe)}
+      paddingVertical="$2"
+      backgroundColor={knobProps.inputBackground}
       {...knobProps.inputSurface}
       {...knobProps.borderRadius}
       overflow="hidden"
       cursor={canAdd ? "text" : "default"}
       {...(isWeb ? { className: "mp-composite-ring" } : {})}
       outlineWidth={0}
-      hoverStyle={canAdd ? { borderColor: componentColors.interactive.border } : undefined}
+      hoverStyle={canAdd ? { borderColor: "$borderColorHover" } : undefined}
       focusStyle={{ outlineWidth: 0 }}
       focusVisibleStyle={{ outlineWidth: 0 }}
       {...(disabled
@@ -566,21 +584,19 @@ export function Tags({
           flexBasis={96}
           minWidth={96}
           height="auto"
+          minHeight={chipHeight ?? undefined}
           padding={0}
           margin={0}
+          paddingLeft={entryInset}
           borderWidth={0}
           backgroundColor="transparent"
           outlineWidth={0}
           focusStyle={{ outlineWidth: 0, borderWidth: 0 }}
           focusVisibleStyle={{ outlineWidth: 0 }}
           {...knobProps.body}
-          // Chip-scale type: the input shares its row with the tag chips, so
-          // it rides the same recipe font channel their labels do -- with
-          // the body size it set the text a step larger and the placeholder
-          // sat off the chips' optical line.
-          fontSize={chipTextSize(chipSize)}
+          fontSize={fieldRecipe.fontSize}
           color={componentColors.text.primary}
-          placeholderTextColor={knobProps.textAccentColor as InputProps["placeholderTextColor"]}
+          placeholderTextColor={"$placeholderColor" as InputProps["placeholderTextColor"]}
           autoComplete="off"
           role="combobox"
           aria-label={addTagLabel}
@@ -590,7 +606,7 @@ export function Tags({
           aria-activedescendant={activeOptionId}
         />
       )}
-    </XStack>
+    </TagsFieldFrame>
   );
 
   return (

package/types/Carousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Carousel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtD,OAAO,KAAK,EAAE,QAAQ,EAAmC,MAAM,SAAS,CAAC;AAGzE,OAAO,EAAY,KAAK,YAAY,EAAe,MAAM,aAAa,CAAC;AAOvE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CACpC;AAkCD,QAAA,MAAM,iBAAiB,kPAKrB,CAAC;AAQH,QAAA,MAAM,aAAa,kPAGjB,CAAC;AAgDH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,UAAiB,EACjB,QAAe,EACf,QAAY,EACZ,IAAY,EACZ,GAAG,EAAE,OAAO,EACZ,aAAa,EACb,YAAgB,EAChB,QAAQ,GACT,EAAE,aAAa,2CA4Wf;yBAtXe,QAAQ;;;AA4XxB,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACxE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Carousel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtD,OAAO,KAAK,EAAE,QAAQ,EAAmC,MAAM,SAAS,CAAC;AAGzE,OAAO,EAAY,KAAK,YAAY,EAAe,MAAM,aAAa,CAAC;AAOvE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CACpC;AAkCD,QAAA,MAAM,iBAAiB,kPAKrB,CAAC;AAQH,QAAA,MAAM,aAAa,kPAGjB,CAAC;AAgDH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,UAAiB,EACjB,QAAe,EACf,QAAY,EACZ,IAAY,EACZ,GAAG,EAAE,OAAO,EACZ,aAAa,EACb,YAAgB,EAChB,QAAQ,GACT,EAAE,aAAa,2CAmXf;yBA7Xe,QAAQ;;;AAmYxB,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACxE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC"}