@multiplatform.one/components 6.4.2 → 6.6.0

package/src/Pagination.tsx

@@ -12,7 +12,8 @@ import type React from "react";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@multiplatform.one/forms";
-import { Text, View, XStack, type XStackProps } from "tamagui";
+import { Text, XStack, type XStackProps } from "tamagui";
+import { DotIndicator } from "./DotIndicator";
 import { componentColors } from "./componentColors";
 import { useDirection } from "./hooks/useDirection";
 import { bidiIsolate, withInterp } from "./shared/t";
@@ -62,6 +63,21 @@ export function getPaginationItems(
   return items;
 }
 
+/**
+ * The size the pager pins its strip at, as steps on the size-token scale.
+ *
+ * The strip itself is `DotIndicator` (LC-16: one dot-strip implementation in
+ * the catalog), and `DotVariant` documents the one channel a mark's size may
+ * come from: a host pin, else the size knob's scale. This host pins, because
+ * its strip is seated on a rail between 44px controls and a bare strip's knob
+ * geometry reads lost there. Selecting a STEP keeps the pager on that channel
+ * instead of authoring a second geometry under a variant name.
+ */
+const stripSteps = {
+  base: { mark: "$0.75", active: "$2" },
+  large: { mark: "$1.5", active: "$3" },
+} as const;
+
 export interface PaginationProps extends Omit<XStackProps, "children" | "onChange"> {
   /** Total number of pages/steps */
   total: number;
@@ -85,7 +101,12 @@ export interface PaginationProps extends Omit<XStackProps, "children" | "onChang
   onSubmit?: () => void;
   /** Disable all navigation */
   disabled?: boolean;
-  /** Visual variant: dots/bars = carousel & wizard idiom, numbered = table & data idiom */
+  /**
+   * Visual variant: dots/bars = carousel & wizard idiom, numbered = table &
+   * data idiom. `bars` is the progress-tick idiom (never badges a completed
+   * step) at the pager's large step — see `DotVariant` for the one rule that
+   * governs a strip mark's size.
+   */
   variant?: "dots" | "bars" | "numbered";
   /** Total number of items across all pages (numbered summary slot) */
   totalItems?: number;
@@ -176,55 +197,78 @@ export function Pagination({
       }
     }) as unknown as () => void;
 
-  if (variant === "numbered") {
-    const items = getPaginationItems(total, currentPage, siblingCount, boundaryCount);
-    const canPrev = !disabled && currentPage > 1;
-    const canNext = !disabled && currentPage < total;
-    // Bidi-isolate the whole formatted range so an RTL paragraph can't
-    // reorder the latin/numeric runs ("1–5 of 5" ⇏ "of 5 5–1").
-    const summary =
-      showSummary && totalItems != null && pageSize != null
-        ? bidiIsolate(
-            totalItems === 0
-              ? t("0 of 0")
-              : withInterp(t("{{start}}–{{end}} of {{total}}"), {
-                  start: (currentPage - 1) * pageSize + 1,
-                  end: Math.min(currentPage * pageSize, totalItems),
-                  total: totalItems,
-                }),
-          )
-        : undefined;
+  const isNumbered = variant === "numbered";
+
+  // The two idioms differ in which glyphs the controls take, whether the
+  // control is circular, and whether the last step submits — not in structure.
+  const canPrev = !disabled && index > 0;
+  const canNext = isNumbered
+    ? !disabled && currentPage < total
+    : // dots/bars: an onSubmit makes the last step actionable, so the forward
+      // control is not dead there.
+      !(disabled || (!isLastStep && index >= total - 1 && !onSubmit));
+  const submits = !isNumbered && isLastStep;
+
+  const items = isNumbered
+    ? getPaginationItems(total, currentPage, siblingCount, boundaryCount)
+    : [];
+
+  // Bidi-isolate the whole formatted range so an RTL paragraph can't
+  // reorder the latin/numeric runs ("1–5 of 5" ⇏ "of 5 5–1").
+  const summary =
+    isNumbered && showSummary && totalItems != null && pageSize != null
+      ? bidiIsolate(
+          totalItems === 0
+            ? t("0 of 0")
+            : withInterp(t("{{start}}–{{end}} of {{total}}"), {
+                start: (currentPage - 1) * pageSize + 1,
+                end: Math.min(currentPage * pageSize, totalItems),
+                total: totalItems,
+              }),
+        )
+      : undefined;
 
-    return (
-      <XStack
-        alignItems="center"
-        justifyContent="center"
-        role="navigation"
-        aria-label={t("Pagination")}
-        {...knobProps.gap}
-        {...stackProps}
-      >
-        {showFirstLast && (
-          <Button
-            size={knobProps.sizeToken}
-            variant="outlined"
-            icon={FirstIcon}
-            onPress={() => goTo(0)}
-            disabled={!canPrev}
-            aria-label={t("Go to first page")}
-            onKeyDown={activateOnEnterSpace(() => goTo(0), canPrev)}
-          />
-        )}
+  // LC-15 dial, resolved: `bars` names the progress-TICK idiom (no completion
+  // badge), never a geometry. The pager pins the large step for it — that pin,
+  // and nothing about the name, is why this strip is chunkier than a bare
+  // `<DotIndicator variant="bars">`.
+  const step = variant === "bars" ? stripSteps.large : stripSteps.base;
+
+  return (
+    <XStack
+      alignItems="center"
+      justifyContent="center"
+      role="navigation"
+      aria-label={t("Pagination")}
+      {...knobProps.gap}
+      {...stackProps}
+    >
+      {isNumbered && showFirstLast && (
         <Button
           size={knobProps.sizeToken}
           variant="outlined"
-          icon={PrevIcon}
-          onPress={handlePrev}
+          icon={FirstIcon}
+          onPress={() => goTo(0)}
           disabled={!canPrev}
-          aria-label={t("Go to previous page")}
-          onKeyDown={activateOnEnterSpace(handlePrev, canPrev)}
+          aria-label={t("Go to first page")}
+          onKeyDown={activateOnEnterSpace(() => goTo(0), canPrev)}
         />
+      )}
 
+      <Button
+        size={knobProps.sizeToken}
+        circular={!isNumbered}
+        variant="outlined"
+        icon={isNumbered ? PrevIcon : PrevArrowIcon}
+        onPress={handlePrev}
+        disabled={!canPrev}
+        // LC-40: the Button's own disabled wash owns the treatment — the
+        // legacy opacity 0.3 dim stacked on top of it (double-dim).
+        aria-label={isNumbered ? t("Go to previous page") : t("Previous page")}
+        onKeyDown={activateOnEnterSpace(handlePrev, canPrev)}
+      />
+
+      {isNumbered ? (
         <XStack alignItems="center" gap="$1">
           {items.map((item) => {
             if (typeof item !== "number") {
@@ -262,145 +306,63 @@ export function Pagination({
             );
           })}
         </XStack>
-
-        <Button
-          size={knobProps.sizeToken}
-          variant="outlined"
-          icon={NextIcon}
-          onPress={handleNext}
-          disabled={!canNext}
-          aria-label={t("Go to next page")}
-          onKeyDown={activateOnEnterSpace(handleNext, canNext)}
+      ) : (
+        // LC-16: the dot strip IS `DotIndicator` — this component owns the
+        // pager frame around it, not a second strip. `completedSteps`, the
+        // wizard a11y idiom and the rail all ride the primitive, so the two
+        // strips in the catalog cannot drift apart again.
+        <DotIndicator
+          total={total}
+          activeIndex={index}
+          variant={variant}
+          idiom="step"
+          rail
+          completedSteps={completedSteps}
+          dotSize={step.mark}
+          activeDotSize={step.active}
+          transition={motionTransition}
+          dotStateAttribute="data-pagination-dot"
+          onChange={allowJumpTo && !disabled ? goTo : undefined}
+          // A strip nobody can press has no disabled state — only a jumpable
+          // one is "interactive but blocked".
+          disabled={allowJumpTo && disabled}
         />
-        {showFirstLast && (
-          <Button
-            size={knobProps.sizeToken}
-            variant="outlined"
-            icon={LastIcon}
-            onPress={() => goTo(total - 1)}
-            disabled={!canNext}
-            aria-label={t("Go to last page")}
-            onKeyDown={activateOnEnterSpace(() => goTo(total - 1), canNext)}
-          />
-        )}
+      )}
 
-        {summary && (
-          <Text
-            {...knobProps.body}
-            color={componentColors.text.muted}
-            aria-live="polite"
-            userSelect="none"
-          >
-            {summary}
-          </Text>
-        )}
-      </XStack>
-    );
-  }
-
-  const dotSize = variant === "bars" ? "$1.5" : "$0.75";
-  const activeDotSize = variant === "bars" ? "$3" : "$2";
-
-  return (
-    <XStack alignItems="center" justifyContent="center" {...knobProps.gap} {...stackProps}>
       <Button
         size={knobProps.sizeToken}
-        circular
-        icon={PrevArrowIcon}
-        onPress={handlePrev}
-        disabled={disabled || index === 0}
-        variant="outlined"
-        // LC-40: the Button's own disabled wash owns the treatment — the
-        // legacy opacity 0.3 dim stacked on top of it (double-dim).
-        aria-label={t("Previous page")}
-        onKeyDown={activateOnEnterSpace(handlePrev, !(disabled || index === 0))}
+        circular={!isNumbered}
+        variant={submits ? undefined : "outlined"}
+        theme={submits ? "active" : undefined}
+        icon={isNumbered ? NextIcon : submits ? CheckIcon : NextArrowIcon}
+        onPress={handleNext}
+        disabled={!canNext}
+        aria-label={isNumbered ? t("Go to next page") : submits ? t("Submit") : t("Next page")}
+        onKeyDown={activateOnEnterSpace(handleNext, canNext)}
       />
 
-      <XStack
-        alignItems="center"
-        justifyContent="center"
-        gap="$2"
-        backgroundColor={componentColors.interactive.background}
-        paddingHorizontal={knobProps.panelPadding.padding}
-        height={knobProps.sizeToken}
-        borderRadius="$10"
-      >
-        {Array.from({ length: total }).map((_, dotIndex) => {
-          const isActive = dotIndex === index;
-          const isCompleted = completedSteps?.has(dotIndex);
-          const canJump = allowJumpTo && !disabled;
-
-          const dotProps: any = {
-            width: isActive ? activeDotSize : dotSize,
-            height: dotSize,
-            borderRadius: "$10",
-            // LC-05 / D-01 rider (a): the current dot speaks the SAME selected
-            // language as this component's numbered body (accent) — it used to
-            // paint ink while the numbered page button painted accent, so one
-            // component taught two meanings for "current".
-            backgroundColor:
-              isCompleted && !isActive
-                ? componentColors.indicator.completed
-                : isActive
-                  ? componentColors.indicator.selected
-                  : componentColors.indicator.track,
-            transition: motionTransition,
-            cursor: canJump ? "pointer" : undefined,
-            alignItems: "center",
-            justifyContent: "center",
-            "aria-current": isActive ? "step" : undefined,
-            "data-pagination-dot": isActive ? "active" : "idle",
-            // Belt-and-suspenders for the CSS driver: named `transition` covers
-            // Tamagui layout props; explicit width/bg ensures measurable intermediates.
-            style: {
-              transition: `width var(--mp-transition, 100ms) ease, height var(--mp-transition, 100ms) ease, background-color var(--mp-transition, 100ms) ease`,
-            },
-            ...(canJump
-              ? {
-                  onPress: () => goTo(dotIndex),
-                  role: "button",
-                  "aria-label": withInterp(t("Go to step {{number}}"), { number: dotIndex + 1 }),
-                  tabIndex: 0,
-                  focusVisibleStyle: {
-                    outlineColor: "$outlineColor",
-                    outlineWidth: 2,
-                    outlineStyle: "solid",
-                    outlineOffset: 1,
-                  },
-                  onKeyDown: (e: React.KeyboardEvent) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      goTo(dotIndex);
-                    }
-                  },
-                }
-              : {}),
-          };
-
-          return (
-            <View key={dotIndex} {...dotProps}>
-              {isCompleted && !isActive && variant === "dots" && (
-                <CheckIcon size={8} color="white" weight="bold" />
-              )}
-            </View>
-          );
-        })}
-      </XStack>
+      {isNumbered && showFirstLast && (
+        <Button
+          size={knobProps.sizeToken}
+          variant="outlined"
+          icon={LastIcon}
+          onPress={() => goTo(total - 1)}
+          disabled={!canNext}
+          aria-label={t("Go to last page")}
+          onKeyDown={activateOnEnterSpace(() => goTo(total - 1), canNext)}
+        />
+      )}
 
-      <Button
-        size={knobProps.sizeToken}
-        circular
-        icon={isLastStep ? CheckIcon : NextArrowIcon}
-        onPress={handleNext}
-        disabled={disabled || (!isLastStep && index >= total - 1 && !onSubmit)}
-        variant={isLastStep ? undefined : "outlined"}
-        theme={isLastStep ? "active" : undefined}
-        aria-label={isLastStep ? t("Submit") : t("Next page")}
-        onKeyDown={activateOnEnterSpace(
-          handleNext,
-          !(disabled || (!isLastStep && index >= total - 1 && !onSubmit)),
-        )}
-      />
+      {summary && (
+        <Text
+          {...knobProps.body}
+          color={componentColors.text.muted}
+          aria-live="polite"
+          userSelect="none"
+        >
+          {summary}
+        </Text>
+      )}
     </XStack>
   );
 }

package/src/Panel.stories.tsx

@@ -1,7 +1,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 { Input, Paragraph, SizableText, XStack, YStack } from "tamagui";
+// Catalog Button + Input (G-15 story honesty / LC-56, UX-P06).
+import { Button, Input } from "@multiplatform.one/forms";
+import { Paragraph, SizableText, XStack, YStack } from "tamagui";
 import { Panel } from "./surfaces";
 
 const meta: Meta<typeof Panel> = {
@@ -50,7 +50,7 @@ export const InteractiveContent: Story = {
   render: () => (
     <Panel maxWidth={420}>
       <SizableText fontWeight="600">Interactive content</SizableText>
-      <Input placeholder="Focus me" />
+      <Input placeholder="Focus me" inputProps={{ "aria-label": "Focus demo" }} />
       <XStack gap="$2">
         <Button variant="outlined">Cancel</Button>
         <Button>Submit</Button>

package/src/ProgressSteps/ProgressSteps.spec.tsx

@@ -1,10 +1,34 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { fireEvent } from "@testing-library/react";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { fireEvent, render } from "@testing-library/react";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { ProgressSteps } from "./index";
 
 const steps = [{ label: "One" }, { label: "Two" }, { label: "Three" }];
 
+// 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("ProgressSteps", () => {
   it("marks the current step with aria-current=step", () => {
     const { container } = renderWithProviders(<ProgressSteps steps={steps} current={1} />);
@@ -13,6 +37,21 @@ describe("ProgressSteps", () => {
     expect(container.textContent).toContain("Two");
   });
 
+  // LC-05 ONE-EMPHASIS / D-01 (census addition): the current step marker is a
+  // selection mark, so it fills with the accent channel (indicator.selected),
+  // never the ink tier it used to take. House themes mounted because the
+  // stock test themes carry no $accentBackground.
+  it("paints the current marker with the accent mark", () => {
+    const { container } = render(
+      <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+        <ProgressSteps steps={steps} current={1} />
+      </TamaguiProvider>,
+    );
+    const current = container.querySelector('[aria-current="step"]') as HTMLElement;
+    expect(current).toBeTruthy();
+    expect(current.className).toContain("_bg-accentBackg");
+  });
+
   it("calls onStepChange when jumping to another step", () => {
     const onStepChange = vi.fn();
     const { container } = renderWithProviders(

package/src/ProgressSteps/ProgressSteps.stories.tsx

@@ -44,7 +44,9 @@ export const Default: Story = {
 
 export const Interactive: Story = {
   render: () => {
-    const [current, setCurrent] = useState(0);
+    // Rest mid-range: at step 0 the Back button is bare-disabled at rest
+    // (UX-P19 / DG-ST-03) and demos nothing; step 0 stays one click away.
+    const [current, setCurrent] = useState(1);
     return (
       <YStack gap="$4" maxWidth={720}>
         <ProgressSteps steps={demoSteps} current={current} onStepChange={setCurrent} />

package/src/ProgressSteps/index.tsx

@@ -69,7 +69,6 @@ const Marker = styled(View, {
   name: "ProgressStepMarker",
   alignItems: "center",
   justifyContent: "center",
-  borderRadius: 1000,
   borderWidth: 2,
   flexShrink: 0,
 });
@@ -108,6 +107,11 @@ export function ProgressSteps({
   const markerTextSize = markerTextSizeMap[knobProps.sizeToken] ?? "$2";
   const labelSize = labelSizeMap[knobProps.sizeToken] ?? "$3";
   const gaps = stepGapMap[knobProps.space] ?? stepGapMap.medium;
+  // R-BINARY (Axiom 3 NULL): the step marker is a round mode-mark like a radio
+  // dot — square in the `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 read as an identity circle (D-09 / LC-60).
+  const markerRadius = knobProps.pointy ? 0 : 1000;
   const connectorThickness = 2;
   const interactive = !!onStepChange && allowJump;
   const horizontal = orientation === "horizontal";
@@ -137,6 +141,7 @@ export function ProgressSteps({
             <Marker
               width={markerSize}
               height={markerSize}
+              borderRadius={markerRadius}
               backgroundColor={markerBg}
               borderColor={markerBorder}
               {...(state === "current"

package/src/charts/PieChart.tsx

@@ -130,10 +130,13 @@ export function PieChart({
         >
           {data.map((datum, index) => (
             <XStack key={`${datum.label}-${index}`} gap="$2" alignItems="center" minWidth={0}>
+              {/* Legend keys are chart CHROME, not marks: the swatch follows
+                  the radius knob and goes square in the `none` world (Axiom 3
+                  NULL). The pinned $2 arc was knob-dead (D-09 / LC-60). */}
               <YStack
                 width={12}
                 height={12}
-                borderRadius="$2"
+                borderRadius={knobProps.borderRadius.borderRadius}
                 flexShrink={0}
                 backgroundColor={fills[index] as never}
               />

package/src/feedback/ConfirmDialog.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from "react-i18next";
 import { Dialog, Paragraph, XStack, YStack } from "tamagui";
 import { countActionsInTree } from "../shared/actionScan";
 import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose";
-import { DialogContent } from "../surfaces";
+import { DialogContent, DialogOverlay } from "../surfaces";
 
 export interface ConfirmDialogProps {
   open: boolean;
@@ -126,7 +126,7 @@ export function ConfirmDialog({
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay key="overlay" backgroundColor="$shadow6" />
+        <DialogOverlay key="overlay" />
         <DialogContent
           key="content"
           maxWidth={440}

package/src/index.ts

@@ -58,6 +58,7 @@ export {
   CardHeader,
   CardFooter,
   DialogContent,
+  DialogOverlay,
   PopoverContent,
   SheetFrame,
   Panel,

package/src/layouts/PageHeader.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18): raw tamagui buttons ignored
 // the knobs and pinned a non-house radius (UX-P06).
 import { Button } from "@multiplatform.one/forms";
+import { Preset } from "@multiplatform.one/theme";
 import { YStack } from "tamagui";
 import { PageHeader } from "./page";
 
@@ -56,12 +57,29 @@ export const TitleOnly: Story = {
   render: (args) => <PageHeader {...args} />,
 };
 
-/** D-11 page-title dial: product screens step down from the 64px display H1. */
-export const ModerateScale: Story = {
-  args: { titleScale: "moderate", subtitle: undefined, divider: false },
+/**
+ * D-11 page-title dial: the default is the moderate step ($8 = 32px) because a
+ * page title is wayfinding, not content. `titleScale="display"` is the
+ * per-instance eject back to the 64px hero scale for one marketing header.
+ */
+export const DisplayScale: Story = {
+  args: { titleScale: "display", subtitle: undefined, divider: false },
   render: (args) => <PageHeader {...args} />,
 };
 
+/**
+ * D-11 surface-level opt-in: the `hero` preset re-scales every page title
+ * inside it, so a marketing surface asks once instead of per header.
+ */
+export const HeroPresetSurface: Story = {
+  args: { subtitle: undefined, divider: false },
+  render: (args) => (
+    <Preset preset="hero">
+      <PageHeader {...args} />
+    </Preset>
+  ),
+};
+
 export const NoTitle: Story = {
   args: { title: undefined, subtitle: undefined },
   render: (args) => <PageHeader {...args} actions={<Button>Only action</Button>} />,

package/src/layouts/ScreenToolbar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18): raw tamagui buttons pinned a
 // non-house radius and ignored every knob, poisoning the knob probes.
-import { Button, Spinner } from "@multiplatform.one/forms";
+import { Button } from "@multiplatform.one/forms";
 import { YStack } from "tamagui";
 import { ScreenToolbar } from "./page";
 
@@ -49,14 +49,21 @@ export const DisabledAndLoading: Story = {
   render: () => (
     <ScreenToolbar
       leading={
-        <Button variant="outlined" disabled>
+        // DG-ST-03: a disabled control explains itself; inline placement keeps
+        // the toolbar row's shared control height.
+        <Button
+          variant="outlined"
+          disabled
+          disabledReason="No screen to go back to"
+          disabledReasonPlacement="inline"
+        >
           Back
         </Button>
       }
       trailing={
-        <Button icon={<Spinner size="small" />} disabled>
-          Saving
-        </Button>
+        // The house loading state: `loading` renders the spinner and is a
+        // derived (never bare) disable.
+        <Button loading>Saving</Button>
       }
     />
   ),

package/src/layouts/ViewSwitcher.tsx

@@ -56,9 +56,15 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
   // its label/icon take the luminance-computed anchor for the actual tint.
   const selectedTint = useAccentTintedSurface();
   const onSelectedTint = useReadableTextOn(selectedTint);
-  const selectedChip = selectedTint
-    ? { backgroundColor: selectedTint, ...(onSelectedTint ? { color: onSelectedTint } : undefined) }
-    : undefined;
+  // Fill only — NO `color` here. `color` is a key of tamagui's Toggle styled
+  // context, so supplying it on selection alone makes createComponent wrap the
+  // segment in a context Provider; the <button> then sits at a different tree
+  // depth in the two states and React DESTROYS and recreates it (measured: 4
+  // childList mutations, 0 attribute mutations). CSS cannot transition a node
+  // that did not exist in the previous frame, so LC-25 is unreachable until
+  // the segment keeps its identity. The on-tint anchor the label and icon need
+  // is applied on the row below, which is not a context host.
+  const selectedChip = selectedTint ? { backgroundColor: selectedTint } : undefined;
   const sz = knobProps.sizeToken;
   // Segment inset ~$3 at medium; size knob steps it (small→$2, large→$4).
   // Vertical pad is floored so the segment hits DG-LAY-04 (≥44) even at small.
@@ -133,11 +139,24 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
             flexGrow={0}
             alignItems="center"
             justifyContent="center"
-            // The selected fill is re-applied through hover/press so the
+            // LC-25: selecting a segment is a discrete jump, so the fill
+            // tweens instead of snapping (undefined at animation=none).
+            transition={knobProps.transition}
+            // The selected fill is re-applied through hover/press/focus so the
             // neutral state layer never paints over the accent chip (the
-            // LC-05 rule the checked Switch track already follows).
+            // LC-05 rule the checked Switch track already follows). `focus` is
+            // not optional: selecting a segment focuses it, and ToggleFrame's
+            // own active recipe carries a neutral `$backgroundActive` focus
+            // fill that would otherwise grey out the chip the moment it is
+            // chosen. The remount used to hide that by discarding the node's
+            // focus state along with the node.
             {...(isSelected && selectedChip
-              ? { ...selectedChip, hoverStyle: selectedChip, pressStyle: selectedChip }
+              ? {
+                  ...selectedChip,
+                  hoverStyle: selectedChip,
+                  pressStyle: selectedChip,
+                  focusStyle: selectedChip,
+                }
               : undefined)}
             {...(isWeb
               ? {