@multiplatform.one/components 6.4.2 → 6.6.0

package/src/Carousel/index.tsx

@@ -79,7 +79,6 @@ const ArrowButton = styled(View, {
 
 const ArrowVisual = styled(View, {
   name: "CarouselArrowVisual",
-  borderRadius: 1000,
   backgroundColor: "$background",
   alignItems: "center",
   justifyContent: "center",
@@ -112,8 +111,19 @@ export function Carousel({
   // follows the size knob (spec Carousel arrows: sizeToken, SP-FIXED).
   // 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.
+  const gapPx =
+    typeof gap === "number"
+      ? gap
+      : ((getTokens().space as Record<string, { val?: number } | undefined>)?.[gap]?.val ?? 0);
   const arrowSize = (getTokens().size as any)?.[knobProps.sizeToken]?.val ?? 40;
   const arrowGlyphSize = Math.round(arrowSize / 2);
+  // 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
+  // silently read as an identity circle (D-09 / LC-60).
+  const arrowRadius = knobProps.pointy ? 0 : 1000;
   // Press-floor target around the painted circle; the edge inset shifts so
   // the circle still sits 8px from the container edge (clamped ≥0 so the
   // container's overflow:hidden never clips the enlarged target).
@@ -122,17 +132,22 @@ export function Carousel({
   const [activeIndex, setActiveIndex] = useState(initialSlide);
   const trackRef = useRef<TamaguiScrollView | null>(null);
   const slideCount = Children.count(children);
-  const slideWidthRef = useRef<number>(0);
+  // LC-62 SLIDE-VIEWPORT-WIDTH: slides size from the MEASURED scroll viewport,
+  // so the measurement is state (slides re-render on measure/resize). On web a
+  // slide's `width="100%"` resolves against the track's CONTENT size, not the
+  // clipping viewport — N fixed-width slides inflate to N×W each and slides
+  // 2..N land beyond max scroll while the dots animate at nothing.
+  const [slideWidth, setSlideWidth] = useState(0);
   const autoPlayRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const scrollToSlide = useCallback(
     (index: number) => {
       if (!trackRef.current) return;
       if (index < 0 || index >= slideCount) return;
-      const offset = index * slideWidthRef.current;
+      const offset = index * (slideWidth + gapPx);
       trackRef.current.scrollTo({ x: offset, animated: true });
     },
-    [slideCount],
+    [slideCount, slideWidth, gapPx],
   );
 
   const goToSlide = useCallback(
@@ -154,19 +169,18 @@ export function Carousel({
   const goNext = useCallback(() => goToSlide(activeIndex + 1), [activeIndex, goToSlide]);
   const goPrev = useCallback(() => goToSlide(activeIndex - 1), [activeIndex, goToSlide]);
 
-  // Handle scroll to update active index
+  // Handle scroll to update active index (pitch = slideWidth + gap)
   const handleScroll = useCallback(
     (event: { nativeEvent: { contentOffset: { x: number } } }) => {
       const scrollX = event.nativeEvent.contentOffset.x;
-      const width = slideWidthRef.current;
-      if (!width) return;
-      const newIndex = Math.round(scrollX / width);
+      if (!slideWidth) return;
+      const newIndex = Math.round(scrollX / (slideWidth + gapPx));
       if (newIndex !== activeIndex && newIndex >= 0 && newIndex < slideCount) {
         setActiveIndex(newIndex);
         onSlideChange?.(newIndex);
       }
     },
-    [activeIndex, slideCount, onSlideChange],
+    [activeIndex, slideCount, onSlideChange, slideWidth, gapPx],
   );
 
   // Auto-play
@@ -183,12 +197,17 @@ export function Carousel({
     }
   }, [autoPlay, goNext]);
 
-  // Initial scroll
+  // Anchor the active slide whenever geometry changes: the first measure
+  // (which also lands `initialSlide` — activeIndex starts there), a resize
+  // re-measure, or a gap change. Index offsets are only valid at the pitch
+  // they were computed for, so re-derive and snap without animating.
+  const activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
   useEffect(() => {
-    if (initialSlide > 0) {
-      scrollToSlide(initialSlide);
-    }
-  }, [initialSlide, scrollToSlide]);
+    if (!slideWidth || slideCount === 0 || !trackRef.current) return;
+    const index = Math.max(0, Math.min(activeIndexRef.current, slideCount - 1));
+    trackRef.current.scrollTo({ x: index * (slideWidth + gapPx), animated: false });
+  }, [slideWidth, gapPx, slideCount]);
 
   const canGoPrev = loop || activeIndex > 0;
   const canGoNext = loop || activeIndex < slideCount - 1;
@@ -215,13 +234,19 @@ export function Carousel({
           style={{ scrollSnapType: "x mandatory" } as any}
           onScroll={handleScroll}
           scrollEventThrottle={16}
-          onLayout={(e) => {
-            slideWidthRef.current = e.nativeEvent.layout.width;
-          }}
+          onLayout={(e) => setSlideWidth(e.nativeEvent.layout.width)}
+          {...({ dataSet: { carouselTrack: "true" } } as Record<string, unknown>)}
         >
           <XStack gap={gap}>
             {Children.map(children, (child, index) => (
-              <CarouselSlide key={index} width="100%" style={{ scrollSnapAlign: "start" } as any}>
+              <CarouselSlide
+                key={index}
+                // Measured-viewport width (LC-62), never a percentage; slides
+                // stay content-sized only for the pre-measure frame.
+                width={slideWidth > 0 ? slideWidth : undefined}
+                style={{ scrollSnapAlign: "start" } as any}
+                {...({ "data-carousel-slide": index } as Record<string, unknown>)}
+              >
                 {child}
               </CarouselSlide>
             ))}
@@ -253,7 +278,7 @@ export function Carousel({
                 }) as unknown as () => void
               }
             >
-              <ArrowVisual width={arrowSize} height={arrowSize}>
+              <ArrowVisual width={arrowSize} height={arrowSize} borderRadius={arrowRadius}>
                 <PrevGlyph size={arrowGlyphSize} />
               </ArrowVisual>
             </ArrowButton>
@@ -278,7 +303,7 @@ export function Carousel({
                 }) as unknown as () => void
               }
             >
-              <ArrowVisual width={arrowSize} height={arrowSize}>
+              <ArrowVisual width={arrowSize} height={arrowSize} borderRadius={arrowRadius}>
                 <NextGlyph size={arrowGlyphSize} />
               </ArrowVisual>
             </ArrowButton>

package/src/DialogContent.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 // Catalog Button (G-15 story honesty / LC-18, UX-P06).
 import { Button } from "@multiplatform.one/forms";
 import { Dialog, Paragraph, Unspaced, YStack } from "tamagui";
-import { DialogContent } from "./surfaces";
+import { DialogContent, DialogOverlay } from "./surfaces";
 
 function DialogHarness({
   long = false,
@@ -20,7 +20,7 @@ function DialogHarness({
           <Button>Open dialog</Button>
         </Dialog.Trigger>
         <Dialog.Portal>
-          <Dialog.Overlay key="overlay" backgroundColor="$shadow6" />
+          <DialogOverlay key="overlay" />
           <DialogContent key="content" maxWidth={480} maxHeight={520}>
             <Dialog.Title size="$7">Dialog title</Dialog.Title>
             <Dialog.Description>Knob-aware dialog content surface.</Dialog.Description>

package/src/DotIndicator/dotIndicator.spec.tsx

@@ -6,11 +6,35 @@
  * blocking activation.
  */
 
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { DotIndicator } from "./index";
 
+// House builder themes for the LC-05 mark assertion — created at MODULE
+// scope: tamagui registers a config's theme variables globally at
+// createTamagui time, and a config created after the first render (inside a
+// test body) never resolves its tokens (forms Progress.spec pattern).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
 describe("DotIndicator", () => {
   it("renders one labeled dot per item with aria-current on the active dot", () => {
     const { container } = renderWithProviders(
@@ -72,4 +96,22 @@ describe("DotIndicator", () => {
     fireEvent.click(dots[1]);
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  // LC-05 ONE-EMPHASIS / D-01: the active dot is the selection mark, so it
+  // fills with the accent channel (indicator.selected = $accentBackground);
+  // idle dots stay neutral chrome. Stock test themes carry no
+  // $accentBackground, so mount the house builder themes for real resolution.
+  it("paints the active dot with the accent mark and idle dots neutral", () => {
+    const { container } = render(
+      <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+        <DotIndicator total={3} activeIndex={1} />
+      </TamaguiProvider>,
+    );
+    const active = container.querySelector('[data-dot-state="active"]') as HTMLElement;
+    const idle = container.querySelector('[data-dot-state="idle"]') as HTMLElement;
+    expect(active).toBeTruthy();
+    expect(idle).toBeTruthy();
+    expect(active.className).toContain("_bg-accentBackg");
+    expect(idle.className).not.toContain("_bg-accentBackg");
+  });
 });

package/src/DotIndicator/index.tsx

@@ -1,4 +1,5 @@
-import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useTranslation } from "react-i18next";
 import type { GetProps } from "tamagui";
@@ -8,8 +9,33 @@ import { withInterp } from "../shared/t";
 
 // ── Types ─────────────────────────────────────────────────────
 
+/**
+ * Which IDIOM the strip paints — never a size of its own (LC-15 / Axiom 5).
+ *
+ * - `dots` / `pills` — the badge-capable idiom: the mark takes the scale's
+ *   `dot` metric and may carry a completion check.
+ * - `bars` — the progress-TICK idiom: the mark takes the scale's `bar` metric
+ *   and never carries a completion badge (a tick is not a badge).
+ *
+ * **The mark's size resolves through exactly one channel**, in this order:
+ * 1. the host's pin — `dotSize` / `activeDotSize`;
+ * 2. otherwise the size knob's scale (`dotGeometryMap`), read at the metric
+ *    the idiom selects.
+ *
+ * That single rule is why `<Pagination variant="bars">` is chunkier than a
+ * bare `<DotIndicator variant="bars">`: the pager PINS a larger step, because
+ * its strip sits on a rail between 44px controls. Same idiom, one channel,
+ * two sizes — `bars` does not name a second geometry.
+ */
 export type DotVariant = "dots" | "bars" | "pills";
 
+/**
+ * What the dots stand for. The two idioms differ only in a11y vocabulary:
+ * a carousel marks its current slide (`aria-current="true"`, "Go to item N"),
+ * a wizard marks its current step (`aria-current="step"`, "Go to step N").
+ */
+export type DotIdiom = "item" | "step";
+
 export interface DotIndicatorProps {
   /** Total number of dots */
   total: number;
@@ -23,6 +49,24 @@ export interface DotIndicatorProps {
   gap?: number | string;
   /** Disable interaction */
   disabled?: boolean;
+  /** Indices already completed — painted in the completion ramp with a check */
+  completedSteps?: Set<number>;
+  /** A11y vocabulary: carousel position (default) or wizard progress */
+  idiom?: DotIdiom;
+  /** Seat the strip on a filled capsule rail (the wizard/pager chrome) */
+  rail?: boolean;
+  /** Painted dot size; defaults to the size knob's geometry */
+  dotSize?: number | string;
+  /** Painted width of the active dot; defaults to the size knob's geometry */
+  activeDotSize?: number | string;
+  /** LC-25: named transition tweening the active dot's geometry and color */
+  transition?: string;
+  /**
+   * Name of the per-dot state attribute (`active` / `idle`). Hosts that
+   * publish their own DOM contract pass theirs — Pagination keeps
+   * `data-pagination-dot`, which probes and specs already assert against.
+   */
+  dotStateAttribute?: string;
 }
 
 // ── Knob mappings ─────────────────────────────────────────────
@@ -37,12 +81,34 @@ const dotGapMap: Record<string, string> = {
 
 // R-PILL items scale their geometry with the size knob (spec:526-528);
 // medium keeps the previous 8/6/24 geometry.
+//
+// This table is the ONLY place an unpinned mark's pixels are defined: the
+// idiom picks `dot` or `bar`, the size knob picks the row. A host that needs
+// another size pins one (`dotSize`/`activeDotSize`) rather than declaring a
+// second geometry under a variant name.
 const dotGeometryMap: Record<string, { dot: number; bar: number; active: number }> = {
   $3: { dot: 6, bar: 5, active: 18 },
   $4: { dot: 8, bar: 6, active: 24 },
   $5: { dot: 10, bar: 8, active: 30 },
 };
 
+/**
+ * Smallest dot that can legibly hold the completion checkmark. The tick idiom
+ * never carries one at ANY size — that is what makes it a tick rather than a
+ * badge — so the size floor only guards the badge-capable idioms.
+ */
+const CHECK_MIN_DOT = 8;
+
+/** Resolve a size token (`$0.75`) or raw px to the number the press-target math needs. */
+function sizePx(value: number | string | undefined, fallback: number): number {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const token = (getTokens().size as Record<string, { val?: number } | undefined>)?.[value]?.val;
+    if (typeof token === "number") return token;
+  }
+  return fallback;
+}
+
 // ── Styled components ─────────────────────────────────────────
 
 const DotsContainer = styled(XStack, {
@@ -50,6 +116,22 @@ const DotsContainer = styled(XStack, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$2",
+  variants: {
+    // A rail seats the strip on a filled capsule instead of the page. It is a
+    // variant of the strip rather than host chrome because the rail and the
+    // idle dot color are ONE decision: idle dots have to step up the ramp to
+    // stay visible on the rail's fill, and split across two files that pairing
+    // drifts (LC-16).
+    rail: {
+      true: {
+        backgroundColor: componentColors.interactive.background,
+        // R-PILL (D-09 / LC-60): the rail is a capsule at every radius value,
+        // like the dots it holds.
+        ...radiusClassProps("R-PILL", "DotIndicator rail"),
+        borderRadius: "$10",
+      },
+    },
+  } as const,
 });
 
 // DG-LAY-04 / D-02 press-floor: the painted dot stays tiny (6–10px) but the
@@ -73,6 +155,13 @@ const DotTarget = styled(View, {
 
 const Dot = styled(View, {
   name: "Dot",
+  // R-PILL (D-09 / LC-60): an ornamental dot is a circle at every radius
+  // value — the knob moves its size, never its shape — so it declares the
+  // class the `radius:none` sweep licenses it under.
+  ...radiusClassProps("R-PILL", "DotIndicator dot"),
+  // Centers the completion checkmark; inert for the empty dots.
+  alignItems: "center",
+  justifyContent: "center",
   borderRadius: 1000,
   backgroundColor: componentColors.indicator.inactive,
   hoverStyle: {
@@ -86,31 +175,11 @@ const Dot = styled(View, {
         backgroundColor: componentColors.indicator.selected,
       },
     },
-    variant: {
-      dots: {
-        width: 8,
-        height: 8,
-      },
-      bars: {
-        width: 6,
-        height: 6,
-      },
-      pills: {
-        width: 8,
-        height: 8,
-      },
-    },
-    activeVariant: {
-      dots: {
-        width: 24,
-      },
-      bars: {
-        width: 24,
-      },
-      pills: {
-        width: 24,
-      },
-    },
+    // No `variant` geometry here: the mark's width/height are always passed
+    // explicitly from the one size channel below, so a per-variant pixel table
+    // on the styled component could only ever be a second, silently-losing
+    // definition of the same thing (it already disagreed with the scale at
+    // size knob `$3`, where a tick is 5px, not 6).
     disabled: {
       true: {
         opacity: 0.5,
@@ -128,30 +197,73 @@ export function DotIndicator({
   variant = "dots",
   gap: gapProp,
   disabled = false,
+  completedSteps,
+  idiom = "item",
+  rail = false,
+  dotSize,
+  activeDotSize,
+  transition,
+  dotStateAttribute = "data-dot-state",
 }: DotIndicatorProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   // Consumer gap ejects; otherwise the space knob drives the inter-item gap.
   const gap = gapProp ?? dotGapMap[knobProps.space] ?? "$2";
   const geometry = dotGeometryMap[knobProps.sizeToken] ?? dotGeometryMap.$4;
-  const itemSize = variant === "bars" ? geometry.bar : geometry.dot;
+  // The tick idiom (`bars`) is ONE flag: it picks the scale's thinner metric
+  // AND withholds the completion badge, so the name cannot come to mean one
+  // thing for size and another for badging.
+  const isTick = variant === "bars";
+  // A host may pin the painted geometry (Pagination's token sizes); otherwise
+  // the size knob drives it. Pin first, scale second — one channel.
+  const itemSize = sizePx(dotSize, isTick ? geometry.bar : geometry.dot);
+  const activeSize = sizePx(activeDotSize, geometry.active);
 
   // Horizontal slop is capped at just under half the resolved gap so two
   // enlarged targets keep ≥1px of dead space between them.
-  const gapPx =
-    typeof gap === "number" ? gap : ((getTokens().space as any)?.[gap]?.val ?? 7);
+  const gapPx = typeof gap === "number" ? gap : ((getTokens().space as any)?.[gap]?.val ?? 7);
   const slopX = Math.max(0, Math.floor((gapPx - 1) / 2));
-  const outsetY = Math.ceil((MIN_PRESS_TARGET - itemSize) / 2);
+  const outsetY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - itemSize) / 2));
 
   // No onChange means the indicator is read-only (informational), which is
   // different from disabled (interactive but blocked)
   const interactive = !disabled && !!onChange;
+  const isStep = idiom === "step";
+  const label = isStep ? t("Go to step {{number}}") : t("Go to item {{number}}");
+  const currentValue = isStep ? "step" : "true";
+  // LC-25: discrete jumps tween the indicator; the explicit CSS shorthand is
+  // the belt-and-suspenders arm for the web driver, which only picks up
+  // Tamagui's named transition on some props.
+  const motionStyle = transition
+    ? {
+        transition:
+          "width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease",
+      }
+    : undefined;
 
   return (
-    <DotsContainer gap={gap}>
+    <DotsContainer
+      gap={gap}
+      rail={rail}
+      {...(rail
+        ? { paddingHorizontal: knobProps.panelPadding.padding, height: knobProps.sizeToken }
+        : undefined)}
+    >
       {Array.from({ length: total }).map((_, index) => {
         const isActive = index === activeIndex;
-        const dotWidth = isActive ? geometry.active : itemSize;
+        // Completion is what a step ALREADY did; the current step outranks it.
+        const isCompleted = !isActive && !!completedSteps?.has(index);
+        const dotWidth = isActive ? activeSize : itemSize;
+        // Only the NON-selected fills are computed here. The selected mark
+        // stays on the `active` variant so no later prop can paint over the
+        // accent — the D-01 failure mode this component was fixed for.
+        const restingFill = isCompleted
+          ? componentColors.indicator.completed
+          : rail
+            ? // Idle chrome steps up the ramp on a rail so the dot still
+              // separates from the capsule fill it sits on.
+              componentColors.indicator.track
+            : componentColors.indicator.inactive;
         return (
           <DotTarget
             key={index}
@@ -161,8 +273,10 @@ export function DotIndicator({
             marginVertical={-outsetY}
             cursor={interactive ? "pointer" : disabled ? "not-allowed" : "default"}
             onPress={interactive ? () => onChange?.(index) : undefined}
-            aria-label={withInterp(t("Go to item {{number}}"), { number: index + 1 })}
-            {...(isActive ? ({ "aria-current": "true" } as Record<string, unknown>) : undefined)}
+            aria-label={withInterp(label, { number: index + 1 })}
+            {...(isActive
+              ? ({ "aria-current": currentValue } as Record<string, unknown>)
+              : undefined)}
             {...(interactive
               ? {
                   role: "button" as const,
@@ -179,13 +293,32 @@ export function DotIndicator({
                 : undefined)}
           >
             <Dot
-              variant={variant}
               active={isActive}
-              activeVariant={isActive ? variant : undefined}
+              {...(isActive
+                ? undefined
+                : {
+                    backgroundColor: restingFill,
+                    // A completed dot and a rail dot both hold their fill on
+                    // hover: the neutral hover step is PALER than either, so
+                    // the page-level hover would read as a dim.
+                    ...(isCompleted || rail
+                      ? { hoverStyle: { backgroundColor: restingFill } }
+                      : undefined),
+                  })}
               width={dotWidth}
               height={itemSize}
               disabled={disabled}
-            />
+              transition={transition}
+              style={motionStyle}
+              {...({ [dotStateAttribute]: isActive ? "active" : "idle" } as Record<
+                string,
+                unknown
+              >)}
+            >
+              {isCompleted && !isTick && itemSize >= CHECK_MIN_DOT && (
+                <CheckIcon size={8} color="white" weight="bold" />
+              )}
+            </Dot>
           </DotTarget>
         );
       })}