@multiplatform.one/components 7.4.0 → 7.5.0

package/src/CardHeader.spec.tsx

@@ -0,0 +1,145 @@
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Card } from "./surfaces";
+import { CardHeader } from "./CardHeader";
+
+function readSibling(name: string) {
+  return readFileSync(join(import.meta.dirname, name), "utf8");
+}
+
+function atoms(el: Element | null, prefixes: string[]): string[] {
+  if (!el) return [];
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+function titleText(container: HTMLElement, label: string): HTMLElement {
+  return (container.querySelector("[data-heading-font]") ?? screen.getByText(label)) as HTMLElement;
+}
+
+describe("CardHeader named exports", () => {
+  it("is the Card.Header static and has no default export", async () => {
+    expect(Card.Header).toBe(CardHeader);
+    const mod = await import("./CardHeader");
+    expect(mod.CardHeader).toBe(CardHeader);
+    expect(mod.default).toBeUndefined();
+  });
+});
+
+describe("CardHeader R12 — no Tint wrap", () => {
+  it("source does not wrap Tint; NestedScale stays on Card", () => {
+    const src = readSibling("CardHeader.tsx");
+    expect(src).not.toMatch(/from ["'][^"']*Tint["']/);
+    expect(src).not.toMatch(/<[Tt]int[\s/>]/);
+    expect(src).not.toMatch(/function NestedScale/);
+    expect(src).toMatch(/padding=\{0\}/);
+  });
+});
+
+describe("CardHeader design-law — T-HEADING text node (R7 / LC-82)", () => {
+  afterEach(cleanup);
+
+  it("wraps bare strings so the title is not a DIV (LC-82)", () => {
+    renderWithProviders(
+      <Card>
+        <Card.Header>Header title</Card.Header>
+      </Card>,
+    );
+    const title = screen.getByText("Header title");
+    expect(title.tagName).not.toBe("DIV");
+    expect(title.getAttribute("data-heading-font")).toBeTruthy();
+  });
+
+  it("coalesces array-of-strings children into one wrapped label", () => {
+    renderWithProviders(
+      <Card>
+        <Card.Header>
+          {"Section"}
+          {" (3)"}
+        </Card.Header>
+      </Card>,
+    );
+    const title = screen.getByText("Section (3)");
+    expect(title.tagName).not.toBe("DIV");
+  });
+
+  it("keeps title text on the 400/700 weight ladder, never 600", () => {
+    const { container } = renderWithProviders(
+      <Card>
+        <Card.Header>Header title</Card.Header>
+      </Card>,
+    );
+    const weight = atoms(titleText(container, "Header title"), ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+
+  it("lets the fontWeight knob restyle the title text node", () => {
+    const regular = renderWithProviders(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Card>
+          <Card.Header>Header title</Card.Header>
+        </Card>
+      </Preset>,
+    );
+    const regularWeight = atoms(titleText(regular.container, "Header title"), ["_fow-"]).join(" ");
+    cleanup();
+
+    const bold = renderWithProviders(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Card>
+          <Card.Header>Header title</Card.Header>
+        </Card>
+      </Preset>,
+    );
+    const boldWeight = atoms(titleText(bold.container, "Header title"), ["_fow-"]).join(" ");
+    expect(regularWeight).not.toMatch(/600|weight-6|fow-6/);
+    expect(boldWeight).not.toMatch(/600|weight-6|fow-6/);
+    expect(boldWeight).not.toEqual(regularWeight);
+    expect(boldWeight).toMatch(/700|weight-7|fow-7/);
+  });
+
+  it("lets the headingFont knob restyle the title text node", () => {
+    const sans = renderWithProviders(
+      <Preset overrides={{ headingFont: "sans-serif" }}>
+        <Card>
+          <Card.Header>Header title</Card.Header>
+        </Card>
+      </Preset>,
+    );
+    const sansFamily = titleText(sans.container, "Header title").getAttribute("data-heading-font");
+    cleanup();
+
+    const mono = renderWithProviders(
+      <Preset overrides={{ headingFont: "mono" }}>
+        <Card>
+          <Card.Header>Header title</Card.Header>
+        </Card>
+      </Preset>,
+    );
+    expect(sansFamily).toBeTruthy();
+    expect(titleText(mono.container, "Header title").getAttribute("data-heading-font")).toBe(
+      "$mono",
+    );
+    expect(titleText(mono.container, "Header title").getAttribute("data-heading-font")).not.toBe(
+      sansFamily,
+    );
+  });
+
+  it("stamps data-slot=header and stays a zero-padding LC-09 slot", () => {
+    const src = readSibling("CardHeader.tsx");
+    expect(src).toMatch(/padding=\{0\}/);
+    const { container } = renderWithProviders(
+      <Card>
+        <Card.Header>Title</Card.Header>
+      </Card>,
+    );
+    expect(container.querySelector('[data-slot="header"]')?.textContent).toContain("Title");
+  });
+});

package/src/CardHeader.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18, UX-P06).
 import { Button } from "@multiplatform.one/forms";
 import { SizableText, XStack, YStack } from "tamagui";
-import { Card } from "./surfaces";
+import { Card } from "./Card";
 
 const CardHeader = Card.Header;
 
@@ -10,7 +10,7 @@ const meta: Meta<typeof CardHeader> = {
   title: "Components/CardHeader",
   component: CardHeader,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     docs: {
       description: {
         component:
@@ -28,7 +28,7 @@ export const Default: Story = {
   render: () => (
     <Card maxWidth={420}>
       <Card.Header>
-        <SizableText fontWeight="600">Header title</SizableText>
+        <SizableText fontWeight="700">Header title</SizableText>
       </Card.Header>
     </Card>
   ),
@@ -39,7 +39,7 @@ export const WithActions: Story = {
     <Card maxWidth={420}>
       <Card.Header>
         <XStack justifyContent="space-between" alignItems="center" gap="$2" flexWrap="wrap">
-          <SizableText fontWeight="600">Header with actions</SizableText>
+          <SizableText fontWeight="700">Header with actions</SizableText>
           <Button size="$2" variant="outlined">
             Edit
           </Button>
@@ -55,7 +55,7 @@ export const LongTitleNarrow: Story = {
       <Card>
         <Card.Header>
           <XStack justifyContent="space-between" alignItems="center" gap="$2" flexWrap="wrap">
-            <SizableText fontWeight="600" flexShrink={1}>
+            <SizableText fontWeight="700" flexShrink={1}>
               A very long header title that must wrap inside a narrow card without clipping
             </SizableText>
             <Button size="$2">Act</Button>

package/src/CardHeader.tsx

@@ -0,0 +1,50 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { Card as TamaguiCard, SizableText, type ViewProps } from "tamagui";
+import { wrapBareTextChildren } from "./shared/textRidesText";
+
+/**
+ * Card.Header title row.
+ *
+ * Nested hue is opt-in on the Card frame (R12) — this part does not wrap Tint.
+ * NestedScale stays on Card (LC-73). This host is a zero-padding slot
+ * (LC-09); T-HEADING rides the title TEXT node (LC-82 / R7), never the View.
+ */
+
+export type CardHeaderProps = ViewProps & { children?: ReactNode };
+
+/**
+ * Tamagui styled hosts drop JSX `data-*` (Toast gallery hole). RN-web reads
+ * `dataSet`; jsdom still accepts the kebab attributes. Write both.
+ */
+function hostData(attrs: Record<string, string>): Record<string, unknown> {
+  const dataSet: Record<string, string> = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    const camel = key.replace(/^data-/, "").replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+    dataSet[camel] = value;
+  }
+  return { ...attrs, dataSet };
+}
+
+export function CardHeader({ children, ...props }: CardHeaderProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+  return (
+    <TamaguiCard.Header
+      padding={0}
+      {...knobProps.gap}
+      {...hostData({ "data-slot": "header" })}
+      {...props}
+    >
+      {wrapBareTextChildren(children, (label, key) => (
+        <SizableText
+          key={key}
+          flexShrink={1}
+          {...knobProps.heading}
+          {...hostData({ "data-heading-font": String(knobProps.heading.fontFamily) })}
+        >
+          {label}
+        </SizableText>
+      ))}
+    </TamaguiCard.Header>
+  );
+}

package/src/Carousel/Carousel.spec.tsx

@@ -9,10 +9,15 @@
 import { act, fireEvent } from "@testing-library/react";
 import { Preset, isTouchSurface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, View, getTokens } from "tamagui";
 import { Carousel } from "./index";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 // ── happy-dom layout plumbing ─────────────────────────────────
 // react-native-web's onLayout rides a module-level ResizeObserver singleton
 // captured on first use, so the stub must exist before the first render and
@@ -422,3 +427,25 @@ describe("Carousel LC-71 ring anatomy, size recipes, 44px floor", () => {
     expect(sheet?.textContent ?? "").not.toContain("[data-carousel-track]");
   });
 });
+
+describe("Carousel live-media tile (R11 / media-19)", () => {
+  it("does not paint a status pip; viewport radius stays UNCLAMPED", async () => {
+    const src = readFileSync(join(here, "index.tsx"), "utf8");
+    expect(src).not.toMatch(
+      /knobProps\.containerRadius|knobProps\.cardSurface|capContainerRadius\(/,
+    );
+    expect(src).not.toMatch(/data-status-pip|StatusPip|statusPip/);
+    expect(src).toContain("knobProps.borderRadius");
+
+    const { container } = renderWithProviders(
+      <Carousel gap={0}>
+        {[0, 1, 2].map((index) => (
+          <Slide key={index} index={index} />
+        ))}
+      </Carousel>,
+    );
+    await flushMeasure();
+    expect(container.querySelector("[data-status-pip]")).toBeNull();
+    expect(container.querySelector("[data-media-tile='carousel']")).toBeTruthy();
+  });
+});

package/src/Carousel/Carousel.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Card, Text, View, YStack } from "tamagui";
+import { Text, View, YStack } from "tamagui";
 import { Image } from "../images/Image";
+import { Card } from "../surfaces";
 import { Carousel } from "./index";
 
 const meta: Meta<typeof Carousel> = {
@@ -12,11 +13,12 @@ const meta: Meta<typeof Carousel> = {
     docs: {
       description: {
         component:
-          "A horizontal scrolling carousel component with navigation arrows and dot indicators. Supports auto-play, looping, and snap scrolling.",
+          "Horizontal paging strip (LC-62): slides size from the measured viewport, never percent-of-track. Arrows ride size-recipe fragments + R-BINARY radius and A-STATE fill. Does not wrap Tint (R12) — nested hue is opt-in.",
       },
     },
   },
 };
+export { meta };
 export default meta;
 
 type Story = StoryObj<typeof Carousel>;
@@ -36,7 +38,7 @@ const SlideContent = ({
   // slides at the knob radius — a pinned $3 held a 7px arc at
   // borderRadius:none (UX-P06 "Carousel slides br=7").
   <View backgroundColor={`$${color}3`} height={height} alignItems="center" justifyContent="center">
-    <Text color={`$${color}12`} fontSize="$6" fontWeight="bold">
+    <Text color={`$${color}12`} fontSize="$6" fontWeight="400">
       Slide {index + 1}
     </Text>
   </View>
@@ -119,7 +121,7 @@ export const CustomGap: Story = {
   render: () => (
     <YStack gap="$4">
       <YStack gap="$2">
-        <Text fontWeight="600">Default gap ($3)</Text>
+        <Text fontWeight="400">Default gap ($3)</Text>
         <View width={400}>
           <Carousel>
             {colors.slice(0, 3).map((color, i) => (
@@ -129,7 +131,7 @@ export const CustomGap: Story = {
         </View>
       </YStack>
       <YStack gap="$2">
-        <Text fontWeight="600">Larger gap ($6)</Text>
+        <Text fontWeight="400">Larger gap ($6)</Text>
         <View width={400}>
           <Carousel gap="$6">
             {colors.slice(0, 3).map((color, i) => (
@@ -170,7 +172,7 @@ export const CardCarousel: Story = {
           <Card key={i} bordered padding="$4" height={200}>
             <YStack gap="$2">
               <View width={60} height={60} backgroundColor="$color5" />
-              <Text fontWeight="bold" fontSize="$5">
+              <Text fontWeight="400" fontSize="$5">
                 Card {i}
               </Text>
               <Text color="$color11" fontSize="$3">
@@ -246,7 +248,7 @@ export const AllStates: Story = {
   render: () => (
     <YStack gap="$6">
       <YStack gap="$2">
-        <Text fontWeight="600">Default (with arrows and dots)</Text>
+        <Text fontWeight="400">Default (with arrows and dots)</Text>
         <View width={350}>
           <Carousel>
             {colors.slice(0, 3).map((color, i) => (
@@ -257,7 +259,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Without arrows</Text>
+        <Text fontWeight="400">Without arrows</Text>
         <View width={350}>
           <Carousel showArrows={false}>
             {colors.slice(0, 3).map((color, i) => (
@@ -268,7 +270,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Without dots</Text>
+        <Text fontWeight="400">Without dots</Text>
         <View width={350}>
           <Carousel showDots={false}>
             {colors.slice(0, 3).map((color, i) => (
@@ -279,7 +281,7 @@ export const AllStates: Story = {
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Loop enabled</Text>
+        <Text fontWeight="400">Loop enabled</Text>
         <View width={350}>
           <Carousel loop>
             {colors.slice(0, 3).map((color, i) => (

package/src/Carousel/index.tsx

@@ -1,3 +1,12 @@
+/**
+ * Knob-aware Carousel.
+ *
+ * Nested hue is opt-in (R12): this module does not wrap a tint surface.
+ * Viewport clips via `containerRadius` (LC-55). Slides size from the
+ * measured scroll viewport (LC-62). Arrow chrome rides size-recipe
+ * fragments + R-BINARY radius and A-STATE fill.
+ */
+
 import type { KeyboardEvent, ReactNode } from "react";
 import { useState, useRef, useCallback, useEffect, Children } from "react";
 import { useTranslation } from "../shared/i18n";
@@ -5,10 +14,8 @@ import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { zIndex } from "@multiplatform.one/forms";
 import {
   MIN_PRESS_TARGET,
-  isTouchSurface,
   pressTargetHitSlop,
   pressTargetStyle,
-  sizeRecipeForToken,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import type { GetProps, ScrollView as TamaguiScrollView } from "tamagui";
@@ -90,9 +97,9 @@ const CarouselSlide = styled(View, {
 // DG-LAY-04 / D-02 press-floor: the interactive element is a transparent
 // absolute target floored at 44×44 (house pressTarget* channel); the painted
 // circle (ArrowVisual) keeps its knob-driven visual size centered inside.
-// Hover/press feedback (opacity/scale) lives on the target so the whole hit
-// area responds, but only the inner circle paints. LC-71: this node never
-// paints a ring — `:focus-visible` forwards it to ArrowVisual.
+// A-STATE hover/press fill lives on the visual (SF-CONTROL), never as
+// untokened scale on the hit box. LC-71: this node never paints a ring —
+// `:focus-visible` forwards it to ArrowVisual.
 const ArrowButton = styled(View, {
   name: "CarouselArrow",
   position: "absolute",
@@ -104,15 +111,7 @@ const ArrowButton = styled(View, {
   justifyContent: "center",
   backgroundColor: "transparent",
   cursor: "pointer",
-  opacity: 0.9,
   outlineWidth: 0,
-  hoverStyle: {
-    opacity: 1,
-    scale: 1.05,
-  },
-  pressStyle: {
-    scale: 0.95,
-  },
   focusStyle: {
     outlineWidth: 0,
   },
@@ -136,7 +135,6 @@ const ArrowVisual = styled(View, {
 
 const DotsWrapper = styled(View, {
   name: "CarouselDotsWrapper",
-  paddingVertical: "$3",
   alignItems: "center",
 });
 
@@ -153,12 +151,14 @@ export function Carousel({
   initialSlide = 0,
 }: CarouselProps) {
   const { t } = useTranslation();
-  const { knobProps, disabledState } = useResolvedKnobs();
+  const { knobProps, control, disabledState } = useResolvedKnobs({
+    component: "Carousel",
+  });
   ensureCarouselArrowRing();
-  // Inter-slide gap follows the space knob (SP-GAP); arrow chrome follows
-  // the size recipe (LC-75) — visual height/icon, not the flat $4=44 ramp.
+  // Inter-slide gap follows the space knob fragment (SP-GAP); an explicit
+  // `gap` prop ejects. Arrow chrome follows the size-recipe fragments
+  // (LC-75) — visual height/icon, not a parallel sizeRecipeForToken call.
   // Press target stays floored at 44 (MIN_PRESS_TARGET vs visual).
-  // Explicit props eject.
   const gap = gapProp ?? knobProps.gap.gap;
   // Scroll-offset math needs the gap in px — the slide pitch is
   // slideWidth + gap (LC-62). Space tokens resolve the way DotIndicator's do.
@@ -166,9 +166,7 @@ export function Carousel({
     typeof gap === "number"
       ? gap
       : ((getTokens().space as Record<string, { val?: number } | undefined>)?.[gap]?.val ?? 0);
-  const arrowRecipe = sizeRecipeForToken(knobProps.sizeToken, { touch: isTouchSurface() });
-  const arrowSize = arrowRecipe.height;
-  const arrowGlyphSize = arrowRecipe.iconSize;
+  const arrowSize = knobProps.control.height;
   // Arrows are R-BINARY (spec Carousel anatomy): square in the radius `none`
   // world, a full circle at every other value. The fixed 1000 arc was
   // knob-dead — an undeclared knob-immune shape the old geometric sweep
@@ -277,6 +275,8 @@ export function Carousel({
 
   const canGoPrev = loop || activeIndex > 0;
   const canGoNext = loop || activeIndex < slideCount - 1;
+  const [hoverSide, setHoverSide] = useState<"prev" | "next" | null>(null);
+  const [pressSide, setPressSide] = useState<"prev" | "next" | null>(null);
 
   // In RTL the slide track flows right-to-left, so "previous" lives on the
   // physical right and "next" on the physical left. Both the anchoring side
@@ -329,7 +329,7 @@ export function Carousel({
       width={arrowTargetSize}
       height={arrowTargetSize}
       hitSlop={arrowHitSlop}
-      {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+      transition={knobProps.transition}
       {...(!enabled ? disabledState.chromeKnobProps : undefined)}
       onPress={enabled ? onPress : undefined}
       role="button"
@@ -347,22 +347,35 @@ export function Carousel({
           }
         }) as unknown as () => void
       }
-      {...({ "data-carousel-arrow": side } as Record<string, unknown>)}
+      {...({
+        "data-carousel-arrow": side,
+        onHoverIn: () => {
+          if (enabled) setHoverSide(side);
+        },
+        onHoverOut: () => {
+          setHoverSide((current) => (current === side ? null : current));
+        },
+        onPressIn: () => {
+          if (enabled) setPressSide(side);
+        },
+        onPressOut: () => {
+          setPressSide((current) => (current === side ? null : current));
+        },
+      } as Record<string, unknown>)}
     >
       <ArrowVisual
         className="mp-carousel-arrow-visual"
         width={arrowSize}
         height={arrowSize}
         {...knobProps.surface}
-        // ArrowVisual (styled View) omits `elevation` from its prop type;
-        // Tamagui forwards it at runtime (house Record cast).
-        {...({ elevation: knobProps.elevation } as Record<string, unknown>)}
+        {...(hoverSide === side ? control.hoverKnobProps : undefined)}
+        {...(pressSide === side && enabled ? control.pressKnobProps : undefined)}
         // Surface is SF-CONTROL; radius stays R-BINARY (after the spread).
         borderRadius={arrowRadius}
-        {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+        transition={knobProps.transition}
         {...({ "data-carousel-arrow-visual": side } as Record<string, unknown>)}
       >
-        <Glyph size={arrowGlyphSize} />
+        <Glyph {...knobProps.controlIcon} />
       </ArrowVisual>
     </ArrowButton>
   );
@@ -373,6 +386,8 @@ export function Carousel({
       role="region"
       aria-roledescription="carousel"
       aria-label={t("Carousel")}
+      data-density={knobProps.density}
+      data-size={knobProps.size}
       onKeyDown={handleRegionKeyDown as unknown as () => void}
       // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored View
       // prop type omits them (house Record cast).
@@ -389,7 +404,11 @@ export function Carousel({
           halo is not severed by overflow:hidden (Apple focus-halo on the
           control, not the scroller). */}
       <CarouselStage>
-        <CarouselContainer {...knobProps.containerRadius}>
+        <CarouselContainer
+          {...knobProps.borderRadius}
+          borderWidth={0}
+          {...({ "data-media-tile": "carousel" } as Record<string, unknown>)}
+        >
           <ScrollView
             ref={trackRef}
             horizontal
@@ -413,7 +432,7 @@ export function Carousel({
             focusVisibleStyle={{ outlineWidth: 0, outlineStyle: "none" as any }}
             {...({ dataSet: { carouselTrack: "true" } } as Record<string, unknown>)}
           >
-            <XStack gap={gap}>
+            <XStack {...(gapProp != null ? { gap: gapProp } : knobProps.gap)}>
               {Children.map(children, (child, index) => (
                 <CarouselSlide
                   key={index}
@@ -444,7 +463,7 @@ export function Carousel({
       </CarouselStage>
 
       {showDots && slideCount > 1 && (
-        <DotsWrapper>
+        <DotsWrapper paddingVertical={knobProps.gap.gap}>
           <DotIndicator
             total={slideCount}
             activeIndex={activeIndex}

package/src/Chip/Chip.spec.tsx

@@ -1,8 +1,9 @@
 import { fireEvent } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { TagIcon } from "@phosphor-icons/react";
-import { Chip, chipTone } from "./index";
+import { Chip, ChipFrame, ChipText, chipIconSize, chipTone } from "./index";
 
 describe("Chip", () => {
   it("renders its label", () => {
@@ -63,6 +64,8 @@ describe("Chip", () => {
     expect(chipTone("subtle")).toBe("ghost");
     expect(chipTone("outline")).toBe("outlined");
     expect(chipTone("filled")).toBe("filled");
+    expect(chipTone("ghost")).toBe("ghost");
+    expect(chipTone(undefined)).toBe("ghost");
   });
 
   it("selected interactive chip is a pressed toggle and marks the fill", () => {
@@ -138,4 +141,79 @@ describe("Chip", () => {
     const result = renderWithProviders(<Chip icon={<TagIcon />}>Tagged</Chip>);
     expect(result.container.querySelector("svg")).not.toBeNull();
   });
+
+  it("exposes named Chip exports and no default", async () => {
+    const mod = await import("./index");
+    expect(mod.Chip).toBe(Chip);
+    expect(mod.ChipFrame).toBe(ChipFrame);
+    expect(mod.ChipText).toBe(ChipText);
+    expect(mod.chipTone).toBe(chipTone);
+    expect(typeof mod.chipIconSize).toBe("function");
+    expect(chipIconSize("$3")).toBeGreaterThan(0);
+    expect(mod.default).toBeUndefined();
+  });
+
+  it("label TEXT NODE weight is 400, never 500/600", () => {
+    const result = renderWithProviders(
+      <>
+        <Chip>Ghost-label</Chip>
+        <Chip variant="filled">Filled-label</Chip>
+        <Chip variant="outlined">Outlined-label</Chip>
+        <Chip selected onPress={() => {}}>
+          Selected-label
+        </Chip>
+      </>,
+    );
+    for (const text of ["Ghost-label", "Filled-label", "Outlined-label", "Selected-label"]) {
+      const node = result.findTextElement(text) as HTMLElement;
+      expect(node.className).toMatch(/_fow-400\b/);
+      expect(node.className).not.toMatch(/_fow-500\b/);
+      expect(node.className).not.toMatch(/_fow-600\b/);
+    }
+  });
+
+  it("DEFAULT radius class: frame squares at none and follows the scale to full", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Chip>Square</Chip>
+      </Preset>,
+    );
+    const noneFrame = none.container.querySelector("[data-chip]") as HTMLElement;
+    expect(
+      String(noneFrame.className)
+        .split(" ")
+        .filter((c) => c.startsWith("_btlr-")),
+    ).toEqual(["_btlr-t-radius-0"]);
+    expect(noneFrame.getAttribute("data-radius-class")).toBeNull();
+
+    const full = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Chip>Pill</Chip>
+      </Preset>,
+    );
+    const fullFrame = full.container.querySelector("[data-chip]") as HTMLElement;
+    expect(
+      String(fullFrame.className)
+        .split(" ")
+        .filter((c) => c.startsWith("_btlr-")),
+    ).toEqual(["_btlr-t-radius-12"]);
+  });
+
+  it("dismiss is R-BINARY: square at none, round at every other stop", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Chip onDismiss={() => {}}>None</Chip>
+      </Preset>,
+    );
+    const noneDismiss = none.container.querySelector("[aria-label='Remove']") as HTMLElement;
+    expect(noneDismiss.className).toMatch(/_btlr-0px\b/);
+
+    const full = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Chip onDismiss={() => {}}>Full</Chip>
+      </Preset>,
+    );
+    const fullDismiss = full.container.querySelector("[aria-label='Remove']") as HTMLElement;
+    expect(fullDismiss.className).toMatch(/_btlr-1000px\b/);
+  });
 });