@multiplatform.one/components 6.4.0 → 6.4.2

package/dist/cjs/icons/index.cjs

@@ -19,4 +19,5 @@ var icons_exports = {};
 module.exports = __toCommonJS(icons_exports);
 __reExport(icons_exports, require("./CheckRegular.cjs"), module.exports);
 __reExport(icons_exports, require("./MinusRegular.cjs"), module.exports);
-__reExport(icons_exports, require("./lucide.cjs"), module.exports);
+__reExport(icons_exports, require("./lucide.cjs"), module.exports);
+__reExport(icons_exports, require("./themed.cjs"), module.exports);

package/dist/cjs/icons/index.native.js

@@ -22,4 +22,5 @@ module.exports = __toCommonJS(icons_exports);
 __reExport(icons_exports, require("./CheckRegular.native.js"), module.exports);
 __reExport(icons_exports, require("./MinusRegular.native.js"), module.exports);
 __reExport(icons_exports, require("./lucide.native.js"), module.exports);
+__reExport(icons_exports, require("./themed.native.js"), module.exports);
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/icons/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","icons_exports","module","exports","__reExport","require"],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA;AACdG,UAAA,CAAAH,aAAA,EAAcI,OAAA,8BADdH,MAAA,CAAAC,OAAA;AAEAC,UAAA,CAAAH,aAAA,EAAcI,OAAA,2BAFd,GAAAH,MAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","icons_exports","module","exports","__reExport","require"],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA;AACdG,UAAA,CAAAH,aAAA,EAAcI,OAAA,8BADdH,MAAA,CAAAC,OAAA;AAEAC,UAAA,CAAAH,aAAA,EAAcI,OAAA,2BAFd,GAAAH,MAAA,CAAAC,OAAA;AAMAC,UAAA,CAAAH,aAAA,EAAcI,OAAA,wBANdH,MAAA,CAAAC,OAAA","ignoreList":[]}

package/dist/esm/icons/index.mjs

@@ -1,4 +1,5 @@
 export * from "./CheckRegular.mjs";
 export * from "./MinusRegular.mjs";
 export * from "./lucide.mjs";
+export * from "./themed.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/esm/icons/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc","ignoreList":[]}

package/dist/esm/icons/index.native.js

@@ -1,4 +1,5 @@
 export * from "./CheckRegular.native.js";
 export * from "./MinusRegular.native.js";
 export * from "./lucide.native.js";
+export * from "./themed.native.js";
 //# sourceMappingURL=index.native.js.map

package/dist/esm/icons/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc","ignoreList":[]}

package/dist/jsx/icons/index.mjs

@@ -1,4 +1,5 @@
 export * from "./CheckRegular.mjs";
 export * from "./MinusRegular.mjs";
 export * from "./lucide.mjs";
+export * from "./themed.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/jsx/icons/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc","ignoreList":[]}

package/dist/jsx/icons/index.native.js

@@ -22,4 +22,5 @@ module.exports = __toCommonJS(icons_exports);
 __reExport(icons_exports, require("./CheckRegular.native.js"), module.exports);
 __reExport(icons_exports, require("./MinusRegular.native.js"), module.exports);
 __reExport(icons_exports, require("./lucide.native.js"), module.exports);
+__reExport(icons_exports, require("./themed.native.js"), module.exports);
 //# sourceMappingURL=index.native.js.map

package/dist/jsx/icons/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor"],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAA,GAAcC,MAAA,CAAAC,cAAA;AACd,IAAAC,gBAAc,GAAAF,MAAA,CAAAG,wBAAA","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames"],"sources":["../../../src/icons/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAA,GAAcC,MAAA,CAAAC,cAAA;AACd,IAAAC,gBAAc,GAAAF,MAAA,CAAAG,wBAAA;AAId,IAAAC,iBAAc,GAAAJ,MAAA,CAAAK,mBAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "6.4.0",
+  "version": "6.4.2",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -74,11 +74,11 @@
     "link": "^2.1.2",
     "shiki": "^4.0.2",
     "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/forms": "6.4.0",
-    "@multiplatform.one/i18n": "6.4.0",
-    "@multiplatform.one/router": "6.4.0",
-    "@multiplatform.one/theme": "6.4.0",
-    "@multiplatform.one/platform": "6.4.0"
+    "@multiplatform.one/forms": "6.4.2",
+    "@multiplatform.one/i18n": "6.4.2",
+    "@multiplatform.one/router": "6.4.2",
+    "@multiplatform.one/theme": "6.4.2",
+    "@multiplatform.one/platform": "6.4.2"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
@@ -96,9 +96,9 @@
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.2",
     "vitest": "^4.1.5",
-    "@multiplatform.one/storybook": "6.4.0",
-    "@multiplatform.one/config": "6.4.0",
-    "@multiplatform.one/test-utils": "6.4.0"
+    "@multiplatform.one/test-utils": "6.4.2",
+    "@multiplatform.one/config": "6.4.2",
+    "@multiplatform.one/storybook": "6.4.2"
   },
   "peerDependencies": {
     "@mdx-js/mdx": "^3.1.1",

package/src/Carousel/index.tsx

@@ -207,7 +207,7 @@ export function Carousel({
 
   return (
     <View>
-      <CarouselContainer {...knobProps.borderRadius}>
+      <CarouselContainer {...knobProps.containerRadius}>
         <ScrollView
           ref={trackRef}
           horizontal

package/src/DotIndicator/index.tsx

@@ -81,7 +81,9 @@ const Dot = styled(View, {
   variants: {
     active: {
       true: {
-        backgroundColor: componentColors.indicator.active,
+        // LC-05: the active dot is the selected mark, so it carries the accent
+        // (it read $color9 neutral — indistinguishable from idle chrome).
+        backgroundColor: componentColors.indicator.selected,
       },
     },
     variant: {

package/src/Pagination.tsx

@@ -334,11 +334,15 @@ export function Pagination({
             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.current
+                  ? componentColors.indicator.selected
                   : componentColors.indicator.track,
             transition: motionTransition,
             cursor: canJump ? "pointer" : undefined,

package/src/ProgressSteps/index.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import type { ReactNode } from "react";
 import type { GetProps } from "tamagui";
@@ -100,6 +100,9 @@ export function ProgressSteps({
 }: ProgressStepsProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs({ component: "ProgressSteps", compact });
+  // LC-05: the current marker rides the accent fill, so its step number takes
+  // the luminance-computed paper/ink anchor rather than an assumed `$color1`.
+  const onSelected = useReadableTextOn(componentColors.indicator.selected);
   const markerSize = markerSizeMap[knobProps.sizeToken] ?? 28;
   const markerIconSize = markerIconSizeMap[knobProps.sizeToken] ?? 14;
   const markerTextSize = markerTextSizeMap[knobProps.sizeToken] ?? "$2";
@@ -125,7 +128,7 @@ export function ProgressSteps({
             state === "completed"
               ? componentColors.indicator.completed
               : state === "current"
-                ? componentColors.indicator.current
+                ? componentColors.indicator.selected
                 : componentColors.interactive.background;
           const markerBorder = state === "upcoming" ? componentColors.indicator.track : markerBg;
           const markerFg = state === "upcoming" ? componentColors.text.muted : "$color1";
@@ -146,7 +149,7 @@ export function ProgressSteps({
                 <SizableText
                   fontSize={markerTextSize as any}
                   fontWeight="600"
-                  color={state === "current" ? "$color1" : markerFg}
+                  color={state === "current" ? (onSelected ?? "$color1") : markerFg}
                 >
                   {index + 1}
                 </SizableText>

package/src/Skeleton/Skeleton.stories.tsx

@@ -7,10 +7,16 @@ const meta: Meta<typeof Skeleton> = {
   component: Skeleton,
   parameters: {
     status: { type: "stable" },
+    // D-10 SKELETONS-RESOLVE carve-out: this is the component's own anatomy
+    // catalog, so its skeletons are the subject rather than a promise about
+    // data that never arrives. Explicitly labeled so the skeleton-at-rest
+    // probe exempts it; every non-specimen surface must show zero skeletons
+    // after settle.
+    skeletonSpecimen: true,
     docs: {
       description: {
         component:
-          "A loading placeholder component that displays a pulsing animation to indicate content is being loaded. Supports multiple variants for different content types.",
+          "SKELETON SPECIMEN (D-10). A loading placeholder that pulses to indicate content is being loaded. Supports multiple variants for different content types. The skeletons on this page persist by design because the skeleton itself is the subject — in product surfaces a skeleton may only persist while a real pending source exists.",
       },
     },
   },

package/src/Skeleton/SkeletonCircle.stories.tsx

@@ -7,9 +7,13 @@ const meta: Meta<typeof SkeletonCircle> = {
   component: SkeletonCircle,
   parameters: {
     status: { type: "beta" },
+    // D-10 SKELETONS-RESOLVE: explicitly-labeled skeleton specimen (the
+    // skeleton is the subject here, not a promise about pending data).
+    skeletonSpecimen: true,
     docs: {
       description: {
-        component: "Circular loading placeholder (avatar-shaped). Default diameter 40px.",
+        component:
+          "SKELETON SPECIMEN (D-10). Circular loading placeholder (avatar-shaped). Default diameter 40px. Skeletons persist on this page by design; product surfaces must show zero skeletons once their pending source settles.",
       },
     },
   },

package/src/Skeleton/SkeletonText.stories.tsx

@@ -7,10 +7,13 @@ const meta: Meta<typeof SkeletonText> = {
   component: SkeletonText,
   parameters: {
     status: { type: "beta" },
+    // D-10 SKELETONS-RESOLVE: explicitly-labeled skeleton specimen (the
+    // skeleton is the subject here, not a promise about pending data).
+    skeletonSpecimen: true,
     docs: {
       description: {
         component:
-          "Multi-line text loading placeholder. Last line renders at lastLineWidth (default 70%).",
+          "SKELETON SPECIMEN (D-10). Multi-line text loading placeholder. Last line renders at lastLineWidth (default 70%). Skeletons persist on this page by design; product surfaces must show zero skeletons once their pending source settles.",
       },
     },
   },

package/src/Wheel/index.tsx

@@ -666,7 +666,7 @@ export function Wheel<T = string | number>({
   return (
     <WheelContainer
       height={containerHeight}
-      {...knobProps.borderRadius}
+      {...knobProps.containerRadius}
       data-testid="wheel"
       data-disabled={disabled ? true : undefined}
       aria-disabled={disabled || undefined}

package/src/charts/Axis.tsx

@@ -1,5 +1,5 @@
 import type { ScaleBand, ScaleLinear, ScalePoint } from "d3-scale";
-import { getLinearTicks, truncateLabel } from "./math";
+import { formatAxisTick, getLinearTicks, truncateLabel } from "./math";
 import { G, Line, SvgText } from "./svg";
 import type { PlotArea } from "./types";
 import { useChartTheme } from "./useChartTheme";
@@ -122,7 +122,9 @@ export function YAxis({
 }: YAxisProps) {
   const { axisColor, gridColor, labelColor, labelFontFamily, labelFontSize } = useChartTheme();
   const tickNumbers = getLinearTicks(scale, ticks);
-  const format = tickFormat ?? ((value: number) => value.toLocaleString());
+  // Axis ticks ride the charts package's own density register — the declared
+  // exemption to the house number channel (see `formatAxisTick`).
+  const format = tickFormat ?? ((value: number) => formatAxisTick(value));
 
   return (
     <G>

package/src/charts/BarChart.tsx

@@ -4,7 +4,13 @@ import { XAxis, YAxis } from "./Axis";
 import { ChartSurface } from "./ChartSurface";
 import { describeChart, describeDatum } from "./accessibility";
 import { computeCartesianPlot, resolveSeriesFills, thinCategories } from "./composeChart";
-import { createBandScale, createLinearScale, getLinearTicks, valueDomain } from "./math";
+import {
+  createBandScale,
+  createLinearScale,
+  formatChartValue,
+  getLinearTicks,
+  valueDomain,
+} from "./math";
 import { BarSeries } from "./series";
 import type { ChartDatum, ChartDatumEvents } from "./types";
 import { useChartTheme } from "./useChartTheme";
@@ -64,7 +70,7 @@ export function BarChart({
   const { t } = useTranslation();
   const { palette, labelFontSize } = useChartTheme();
   const fills = resolveSeriesFills(data, palette, { color, colors, categorical });
-  const format = valueFormatter ?? ((value: number) => value.toLocaleString());
+  const format = valueFormatter ?? formatChartValue;
   const ariaLabel =
     label ?? describeChart({ typeLabel: t("Bar chart"), title, data, formatValue: valueFormatter });
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);

package/src/charts/LineChart.tsx

@@ -4,7 +4,13 @@ import { XAxis, YAxis } from "./Axis";
 import { ChartSurface } from "./ChartSurface";
 import { describeChart, describeDatum } from "./accessibility";
 import { computeCartesianPlot, thinCategories } from "./composeChart";
-import { createLinearScale, createPointScale, getLinearTicks, valueDomain } from "./math";
+import {
+  createLinearScale,
+  createPointScale,
+  formatChartValue,
+  getLinearTicks,
+  valueDomain,
+} from "./math";
 import { AreaSeries, LineSeries } from "./series";
 import type { ChartCurve, ChartDatum, ChartDatumEvents } from "./types";
 import { useChartTheme } from "./useChartTheme";
@@ -71,7 +77,7 @@ export function LineChart({
   // One line = one series: explicit `color` is a data value and passes
   // through; the default is the theme identity (LC-27).
   const stroke = color ?? palette.single;
-  const format = valueFormatter ?? ((value: number) => value.toLocaleString());
+  const format = valueFormatter ?? formatChartValue;
   const ariaLabel =
     label ??
     describeChart({

package/src/charts/PieChart.tsx

@@ -5,6 +5,7 @@ import { componentColors } from "../componentColors";
 import { ChartSurface } from "./ChartSurface";
 import { describeChart, describeDatum } from "./accessibility";
 import { resolveSeriesFills } from "./composeChart";
+import { formatChartValue } from "./math";
 import { PieSeries } from "./series";
 import type { ChartDatum, ChartDatumEvents } from "./types";
 import { useChartTheme } from "./useChartTheme";
@@ -65,7 +66,7 @@ export function PieChart({
   const { knobProps } = useResolvedKnobs();
   const { palette } = useChartTheme();
   const fills = resolveSeriesFills(data, palette, { colors, categorical: true });
-  const format = valueFormatter ?? ((value: number) => value.toLocaleString());
+  const format = valueFormatter ?? formatChartValue;
   const total = data.reduce((sum, datum) => sum + datum.value, 0);
   const ariaLabel =
     label ??

package/src/charts/accessibility.ts

@@ -4,7 +4,8 @@
  * Every chart surface exposes `role="img"` with a generated text summary so
  * screen-reader users get the shape of the data, not silence. The functions
  * are pure; components pass already-translated type/title labels in, and the
- * numbers format through `toLocaleString` like every other catalog value.
+ * numbers format through the house number register (`formatChartValue`) so a
+ * summary speaks the same value a sighted reader sees.
  */
 
 import { formatChartValue } from "./math";
@@ -16,7 +17,7 @@ export interface DescribeChartInput {
   /** Optional already-translated chart title. */
   title?: string;
   data: ChartDatum[];
-  /** Value formatter (defaults to `toLocaleString`). */
+  /** Value formatter (defaults to the house number register). */
   formatValue?: (value: number) => string;
   /**
    * Include each datum's share of the total (pie/donut summaries).

package/src/charts/index.ts

@@ -8,6 +8,7 @@ export {
   createLinearScale,
   createPointScale,
   createTimeScale,
+  formatAxisTick,
   formatChartValue,
   getLinearTicks,
   getTimeTicks,

package/src/charts/math.ts

@@ -7,6 +7,7 @@
  * tests exercise them directly.
  */
 
+import { formatNumber } from "@multiplatform.one/theme";
 import { scaleBand, scaleLinear, scalePoint, scaleTime } from "d3-scale";
 import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from "d3-scale";
 import {
@@ -132,11 +133,29 @@ export function getTimeTicks(scale: ScaleTime<number, number>, count = 4): Date[
   return scale.ticks(count);
 }
 
-/** Locale-aware default value format (matches catalog `toLocaleString` use). */
-export function formatChartValue(value: number): string {
+/**
+ * Chart AXIS tick register — the one DECLARED exemption to the house number
+ * channel (LC-12 render channel / D-04). Tick labels answer to axis density,
+ * not to the human-register rules the catalog applies elsewhere: this
+ * package owns the right to thin, shorten or re-scale them (k/M suffixes,
+ * dropped fraction digits) as ticks crowd, without dragging every number in
+ * the catalog along. Keeping the exemption in one named function is what
+ * makes it a decision instead of an accident — anything outside this
+ * function belongs on the shared channel.
+ */
+export function formatAxisTick(value: number): string {
   return value.toLocaleString();
 }
 
+/**
+ * Chart data VALUE labels — NOT exempt. A value printed next to a mark is
+ * the same number class as the same figure in a table cell or a KPI tile,
+ * so it rides the shared register (`formatNumber`).
+ */
+export function formatChartValue(value: number): string {
+  return formatNumber(value);
+}
+
 // ── Shape generators ──────────────────────────────────────────
 
 const curveFactories: Record<ChartCurve, CurveFactory> = {

package/src/componentColors.ts

@@ -40,13 +40,21 @@ export const componentColors = {
     highlightLine: "$yellow3",
   },
 
-  /** Dot/step indicators */
+  /**
+   * Dot/step indicators.
+   *
+   * LC-05 ONE-EMPHASIS: the selected/current mark IS the active accent, so
+   * every strip in the catalog (DotIndicator, Pagination dots, ProgressSteps)
+   * reads one selected-state language. This is deliberately ONE key — the
+   * former `active` ($color9) / `current` ($color12) pair was two dialects for
+   * one concept and let the catalog drift back into ink (LC-16). Completion
+   * keeps its own semantic ramp; idle/track/hover stay neutral chrome.
+   */
   indicator: {
-    active: "$color9",
+    selected: "$accentBackground",
     inactive: "$color5",
     hover: "$color6",
     completed: "$green9",
-    current: "$color12",
     track: "$color8",
   },
 

package/src/icons/index.ts

@@ -1,3 +1,7 @@
 export * from "./CheckRegular";
 export * from "./MinusRegular";
 export * from "./lucide";
+// Token-resolving icon wrapper (LC-53 GLYPH-SLOT): icon-only controls slot
+// `themed(Icon)` elements and color them with bare theme keys ("red9"),
+// instead of baseline-shifting Text wrappers around raw icons.
+export * from "./themed";

package/src/layouts/ViewSwitcher.tsx

@@ -4,6 +4,8 @@ import {
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   pressTargetHitSlop,
+  useAccentTintedSurface,
+  useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
@@ -46,6 +48,17 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
   // segment); when focus leaves, the anchor returns to the selection.
   const [focusValue, setFocusValue] = useState<string | null>(null);
   if (isWeb) ensureKeyboardModalityTracking();
+  // LC-05 / D-01 rider (b): the selected segment carried a neutral `$color3`
+  // -tier fill, so a segmented control marked its choice in the same grey it
+  // marks hover with. Selection is the accent language; segmented-control
+  // STRENGTH is pinned at tinted (not the solid an accent CTA takes), so the
+  // chip resolves the accent-ramp analogue of that neutral surface tier and
+  // 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;
   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.
@@ -103,6 +116,7 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
           return activeIdx >= 0 ? activeIdx : 0;
         })();
         const isTabStop = viewIndex === anchorIndex;
+        const isSelected = view.type === currentView;
         return (
           // no size prop: ToggleGroup.Item's size makes square icon-buttons
           // (fixed width) that clip text labels -- let content + pad size the item.
@@ -119,6 +133,12 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
             flexGrow={0}
             alignItems="center"
             justifyContent="center"
+            // The selected fill is re-applied through hover/press so the
+            // neutral state layer never paints over the accent chip (the
+            // LC-05 rule the checked Switch track already follows).
+            {...(isSelected && selectedChip
+              ? { ...selectedChip, hoverStyle: selectedChip, pressStyle: selectedChip }
+              : undefined)}
             {...(isWeb
               ? {
                   onFocus: () => {
@@ -133,9 +153,22 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
               : undefined)}
             {...(kbFocusValue === view.type ? keyboardFocusRingProps : undefined)}
           >
-            <XStack alignItems="center" gap={rowGap} flexShrink={0}>
+            <XStack
+              alignItems="center"
+              gap={rowGap}
+              flexShrink={0}
+              // Icons paint `currentColor`, so the row carries the resolved
+              // on-tint anchor for the glyph and the label takes it explicitly
+              // (tamagui Text resolves `$color` from the theme, not by CSS
+              // inheritance).
+              {...(isSelected && onSelectedTint ? { color: onSelectedTint } : undefined)}
+            >
               {Icon && <Icon size={iconPx} />}
-              <Text fontSize={labelSize} numberOfLines={1}>
+              <Text
+                fontSize={labelSize}
+                numberOfLines={1}
+                {...(isSelected && onSelectedTint ? { color: onSelectedTint } : undefined)}
+              >
                 {view.label}
               </Text>
             </XStack>

package/src/layouts/page.tsx

@@ -19,7 +19,9 @@ import {
   hairline,
   layoutBreakpoints,
   readingWidthStyle,
+  resolvePageTitleScale,
   useResolvedKnobs,
+  type PageTitleScale,
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import type { ScrollViewProps as TamaguiScrollViewProps, XStackProps, YStackProps } from "tamagui";
@@ -156,13 +158,14 @@ export interface PageHeaderProps extends YStackProps {
    */
   headingLevel?: PageHeadingLevel;
   /**
-   * Visual scale of the built-in title (D-11 hero-H1 dial). "display" keeps
-   * the heading scale's own size (H1 = 64px — marketing/hero surfaces);
-   * "moderate" pins the title to the $8 heading step (32px) — the page-title
-   * class product screens should use. Semantics (headingLevel) are unchanged.
-   * Default: "display" (the catalog default is a separate owner dial).
+   * Per-instance eject for the page-title step (D-11 hero-H1 dial).
+   * Omitted — the default — the title follows the `pageTitleScale` knob, which
+   * ships `moderate` ($8 = 32px): a page title is wayfinding, not content.
+   * Pass `"display"` ($10 = 64px) for a single marketing hero, or reach for
+   * the `hero` preset / a `pageTitleScale` override to re-scale a whole
+   * surface. Semantics (headingLevel) are unchanged either way.
    */
-  titleScale?: "display" | "moderate";
+  titleScale?: PageTitleScale;
 }
 
 /**
@@ -176,7 +179,7 @@ export function PageHeader({
   actions,
   divider = true,
   headingLevel = 1,
-  titleScale = "display",
+  titleScale,
   children,
   ...rest
 }: PageHeaderProps) {
@@ -196,9 +199,11 @@ export function PageHeader({
   // heading scale).
   const headingFamily = isWeb ? null : { fontFamily: knobProps.heading.fontFamily };
   const TitleTag = PAGE_HEADING_TAGS[headingLevel];
-  // "moderate" pins the visual step to $8 (32px on the heading scale) while
-  // the semantic tag still follows headingLevel — wayfinding, not display.
-  const titleSize = titleScale === "moderate" ? ({ size: "$8" } as const) : null;
+  // 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 ? (

package/src/views/Calendar.tsx

@@ -18,6 +18,10 @@ import {
   type CalendarRange,
 } from "./calendarMath";
 import {
+  formatDayLong,
+  formatTimeOfDay,
+  getMonthNames,
+  getWeekdayNames,
   hairline,
   hairlineWidth,
   pressTargetHitSlop,
@@ -389,34 +393,13 @@ const DAY_DISC_PX = 22;
 /** Month-view chip visual floor (hit slop fills the 44px target, DG-LAY-04). */
 const MONTH_CHIP_MIN_PX = 24;
 
-function getWeekdayNames(): string[] {
-  const formatter = new Intl.DateTimeFormat(undefined, { weekday: "short" });
-  return Array.from({ length: 7 }, (_, i) => formatter.format(new Date(2004, 0, 4 + i)));
-}
-
-function getMonthNames(): string[] {
-  const formatter = new Intl.DateTimeFormat(undefined, { month: "long" });
-  return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2000, i, 1)));
-}
-
 function getHours(): number[] {
   return Array.from({ length: 24 }, (_, i) => i);
 }
 
+/** Hour ticks speak the house time-of-day register without minutes ("2 PM"). */
 function formatHour(hour: number): string {
-  const date = new Date(2000, 0, 1, hour, 0, 0);
-  return new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    hour12: true,
-  }).format(date);
-}
-
-function formatDayLong(date: Date): string {
-  return new Intl.DateTimeFormat(undefined, {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-  }).format(date);
+  return formatTimeOfDay(new Date(2000, 0, 1, hour, 0, 0), { minutes: false });
 }
 
 const weekdayNames = getWeekdayNames();

package/src/views/Dashboard.tsx

@@ -3,8 +3,13 @@ import { LineChart } from "../charts/LineChart";
 import { PieChart } from "../charts/PieChart";
 import { componentColors, sectionHeading } from "../componentColors";
 import { AsyncBoundary } from "../layouts/AsyncBoundary";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import React, { useMemo, type ReactNode } from "react";
+import {
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import React, { useCallback, useMemo, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Card,
@@ -168,18 +173,27 @@ export function resolveTrendColor(
  */
 export function KPICard({ config, ...stackProps }: KPICardProps) {
   const { knobProps } = useResolvedKnobs();
-  const formattedValue = useMemo(() => {
-    if (typeof config.value === "string") return config.value;
-
-    const num = config.value;
-    if (config.format === "currency") {
-      return `${config.currencySymbol || "$"}${num.toLocaleString()}`;
-    }
-    if (config.format === "percent") {
-      return `${num.toLocaleString()}%`;
-    }
-    return num.toLocaleString();
-  }, [config.value, config.format, config.currencySymbol]);
+  // One register for the metric, wherever the card shows it (LC-12 render
+  // channel): the headline value and the "vs previous" comparison are the
+  // same data class and may not speak in two voices. Summary tiles take the
+  // money register's `auto` variant — cents only when the value has them.
+  const formatMetric = useCallback(
+    (num: number) => {
+      if (config.format === "currency") {
+        return formatCurrency(num, {
+          symbol: config.currencySymbol || "$",
+          fractionDigits: "auto",
+        });
+      }
+      if (config.format === "percent") return formatPercent(num);
+      return formatNumber(num);
+    },
+    [config.format, config.currencySymbol],
+  );
+  const formattedValue = useMemo(
+    () => (typeof config.value === "string" ? config.value : formatMetric(config.value)),
+    [config.value, formatMetric],
+  );
 
   const trendColor = useMemo(
     () => resolveTrendColor(config.trend, config.goodDirection),
@@ -240,7 +254,7 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
               )}
               {config.previousValue !== undefined && (
                 <Text fontSize="$2" color={componentColors.text.muted}>
-                  vs {config.previousValue.toLocaleString()}
+                  vs {formatMetric(config.previousValue)}
                 </Text>
               )}
             </XStack>

package/src/views/ReportBuilder.tsx

@@ -2,7 +2,12 @@ import { BarChart } from "../charts/BarChart";
 import { componentColors } from "../componentColors";
 import { AsyncBoundary, AsyncSkeleton, resolveAsyncStatus } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 // House Button (not raw tamagui): carries the DG-LAY-04 / D-02 ≥44px press
 // floor — the raw tamagui Button rendered these toolbar actions at 28px.
 import { Button } from "@multiplatform.one/forms";
@@ -114,21 +119,22 @@ function formatCellValue(value: unknown, fieldtype: string): string {
   switch (fieldtype) {
     case "Check":
       return value ? "Yes" : "No";
+    // Report cells take the fixed-precision variants of the house number
+    // registers (LC-12 render channel): money keeps its two digits so a
+    // column stays aligned, floats keep report precision, ints stay whole.
     case "Currency":
-      return Number(value).toLocaleString(undefined, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      });
+      // No symbol travels with a report column, so the money register
+      // renders the amount alone — still the money register, not a
+      // hand-rolled one.
+      return formatCurrency(value as number);
     case "Float":
-      return Number(value).toLocaleString(undefined, {
-        maximumFractionDigits: 4,
-      });
+      return formatNumber(value as number, { maximumFractionDigits: 4 });
     case "Int":
-      return Number(value).toLocaleString();
+      return formatNumber(value as number, { maximumFractionDigits: 0 });
     case "Percent":
-      return `${Number(value).toFixed(1)}%`;
+      return formatPercent(value as number, { precision: 1 });
     case "Rating":
-      return `${(Number(value) * 5).toFixed(1)} / 5`;
+      return `${formatNumber(Number(value) * 5, { precision: 1 })} / 5`;
     default:
       return String(value);
   }
@@ -409,14 +415,15 @@ export function ReportBuilder({
 
     return Object.entries(groupedData).map(([groupKey, group]) => {
       const isCollapsed = collapsedGroups.has(groupKey);
+      // Group aggregates are the same number class as the cells below them,
+      // so they take the same register (LC-12 render channel) instead of
+      // dropping into raw digits.
       const aggDisplay =
         groupBy.aggregation === "count"
-          ? `${aggLabel}: ${group.aggregationValue}`
-          : `${aggLabel}(${aggFieldCol?.label ?? groupBy.aggregationField ?? ""}): ${
-              Number.isInteger(group.aggregationValue)
-                ? group.aggregationValue
-                : group.aggregationValue.toFixed(2)
-            }`;
+          ? `${aggLabel}: ${formatNumber(group.aggregationValue, { maximumFractionDigits: 0 })}`
+          : `${aggLabel}(${aggFieldCol?.label ?? groupBy.aggregationField ?? ""}): ${formatNumber(
+              group.aggregationValue,
+            )}`;
 
       return (
         <YStack key={groupKey}>

package/src/views/TreeView.tsx

@@ -1038,10 +1038,12 @@ export function TreeView<T = unknown>({
   const handleOutset = Math.max(0, (MIN_PRESS_TARGET - estimateSize) / 2);
 
   // Rows span edge-to-edge inside the frame (SP-EDGE / LC-01): the container
-  // owns only its border; rows own their inset, so hover/selection fills and
-  // hit targets reach both edges.
+  // owns only the corner clip; rows own their inset, so hover/selection fills
+  // and hit targets reach both edges. The tree is SF-TRANSPARENT, so it takes
+  // the radius-only fragment — a border-bearing one would be unlicensed chrome
+  // on a chromeless part (D-03).
   return (
-    <YStack {...knobProps.borderRadius} overflow="hidden" {...stackProps}>
+    <YStack {...knobProps.containerRadius} overflow="hidden" {...stackProps}>
       <View
         ref={containerRef as any}
         role="tree"

package/src/views/calendarMath.ts

@@ -10,8 +10,14 @@
  * values — the component layer tweens between them with `knobProps.transition`
  * (LC-25 CONTROL-SMOOTH-JUMP) while raw pointer tracking stays 1:1
  * (A-GESTURE).
+ *
+ * Every visible/spoken date string here routes through the canonical
+ * registers in `@multiplatform.one/theme` (LC-12 render channel) — the
+ * calendar speaks the same date voice as tables, feeds and pickers.
  */
 
+import { formatDayLong, formatTimeOfDay } from "@multiplatform.one/theme";
+
 export const MINUTES_PER_DAY = 1440;
 
 /** Wall-clock minutes since midnight for a date. */
@@ -201,9 +207,9 @@ export function moveFocusSlot(
 
 // ── Formatting / accessible names ─────────────────────────────
 
-/** "2:00 PM" (locale-aware, minutes only when meaningful). */
+/** "2:00 PM" — the house time-of-day register. */
 export function formatTimeShort(date: Date): string {
-  return new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" }).format(date);
+  return formatTimeOfDay(date);
 }
 
 /** "2:00 PM – 3:30 PM" visible label used by resize / create sketches. */
@@ -217,11 +223,7 @@ export function formatTimeRangeLabel(start: Date, end: Date): string {
  * Untimed events fall back to the day name alone.
  */
 export function eventAccessibleLabel(event: { title: string; start: Date; end?: Date }): string {
-  const dayLabel = new Intl.DateTimeFormat(undefined, {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-  }).format(event.start);
+  const dayLabel = formatDayLong(event.start);
   if (!event.end || event.end.getTime() === event.start.getTime()) {
     return `${event.title}, ${dayLabel}`;
   }

package/src/views/ganttMath.ts

@@ -9,8 +9,13 @@
  * All day math is LOCAL wall-clock (date-component construction, deltas
  * rounded) so ranges survive DST boundaries — the Calendar view's
  * `computeEventMoveRange` convention.
+ *
+ * Visible and spoken labels route through the canonical date registers in
+ * `@multiplatform.one/theme` (LC-12 render channel).
  */
 
+import { formatAbsoluteDate, formatDayOfMonth, formatMonthYear } from "@multiplatform.one/theme";
+
 export type GanttZoom = "day" | "week" | "month";
 
 export const MS_PER_DAY = 86_400_000;
@@ -241,9 +246,12 @@ export interface GanttTick {
   label?: string;
 }
 
-const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { day: "numeric" });
-const monthDayFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" });
-const monthYearFormatter = new Intl.DateTimeFormat(undefined, { month: "short", year: "numeric" });
+// Timeline labels ride the canonical date registers (LC-12 render channel).
+// Ticks take `year: "never"` — the header states the year, and a widened
+// "Mar 10, 2025" tick would collide with its neighbour.
+const dayLabel = (date: Date) => formatDayOfMonth(date);
+const monthDayLabel = (date: Date) => formatAbsoluteDate(date, { year: "never" });
+const monthYearLabel = (date: Date) => formatMonthYear(date);
 
 /**
  * Axis ticks for a range at a zoom level.
@@ -271,7 +279,7 @@ export function generateTicks(
         x,
         date,
         major: true,
-        label: monthEdge ? monthDayFormatter.format(date) : dayLabelFormatter.format(date),
+        label: monthEdge ? monthDayLabel(date) : dayLabel(date),
       });
       continue;
     }
@@ -281,7 +289,7 @@ export function generateTicks(
         x,
         date,
         major: weekStart,
-        label: weekStart ? monthDayFormatter.format(date) : undefined,
+        label: weekStart ? monthDayLabel(date) : undefined,
       });
       continue;
     }
@@ -292,7 +300,7 @@ export function generateTicks(
       x,
       date,
       major: monthStart,
-      label: monthStart ? monthYearFormatter.format(date) : undefined,
+      label: monthStart ? monthYearLabel(date) : undefined,
     });
   }
   return ticks;
@@ -300,8 +308,8 @@ export function generateTicks(
 
 /** Visible header label for the chart range: "Mar 2026 – Jun 2026". */
 export function formatRangeLabel(range: GanttRange): string {
-  const start = monthYearFormatter.format(range.start);
-  const end = monthYearFormatter.format(addDays(range.end, -1));
+  const start = monthYearLabel(range.start);
+  const end = monthYearLabel(addDays(range.end, -1));
   return start === end ? start : `${start} – ${end}`;
 }
 
@@ -312,8 +320,8 @@ export function formatRangeLabel(range: GanttRange): string {
 export function ganttTaskAccessibleLabel(task: { title: string; start: Date; end: Date }): string {
   const { startEdge, endEdge } = normalizeSpanEdges(task);
   const lastDay = addDays(endEdge, -1);
-  const startLabel = monthDayFormatter.format(startEdge);
-  const endLabel = monthDayFormatter.format(
+  const startLabel = monthDayLabel(startEdge);
+  const endLabel = monthDayLabel(
     lastDay.getTime() >= startEdge.getTime() ? lastDay : startEdge,
   );
   return startLabel === endLabel
@@ -325,8 +333,8 @@ export function ganttTaskAccessibleLabel(task: { title: string; start: Date; end
 export function formatSpanLabel(span: GanttSpan): string {
   const { startEdge, endEdge } = normalizeSpanEdges(span);
   const lastDay = addDays(endEdge, -1);
-  const startLabel = monthDayFormatter.format(startEdge);
-  const endLabel = monthDayFormatter.format(
+  const startLabel = monthDayLabel(startEdge);
+  const endLabel = monthDayLabel(
     lastDay.getTime() >= startEdge.getTime() ? lastDay : startEdge,
   );
   return startLabel === endLabel ? startLabel : `${startLabel} – ${endLabel}`;

package/types/icons/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./CheckRegular";
 export * from "./MinusRegular";
 export * from "./lucide";
+export * from "./themed";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AAIzB,cAAc,UAAU,CAAC"}