@12-apps/ui 6.98.0 → 6.99.0

package/dist/types/components/data-display/RegionMap/RegionMapPin.d.ts

@@ -0,0 +1,102 @@
+import { type Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+import { type PlaneBox, type PlanePoint, type Projection } from './RegionMap.helpers';
+import type { RegionMapModel } from './RegionMap.hooks';
+import type { RegionMapCenter, RegionMapCopy, RegionMapDot, RegionMapGhost, RegionMapPin } from './RegionMap.types';
+/**
+ * The movable centre of a `RegionMap` (`pin`, `ghost`, `dots`): a pin the
+ * viewer drags with a mouse or one finger, or focuses and nudges with the
+ * arrow keys, while the VIEW stays where `center` put it — so the areas never
+ * slide under a dragging finger. The circles follow the pin; a dashed ring
+ * and dot stay at `ghost`; `dots` are small points (filled or hollow).
+ *
+ * The pin is HTML over the drawing, at its point by percent like the labels,
+ * carrying `data-region-pin` so a host that zooms the drawing's layers can
+ * move it with them. Its moves are reported, never applied: the host passes
+ * the new point back.
+ */
+/** The movable centre and what is drawn with it, as the drawing receives it. */
+export interface Moving {
+    center: RegionMapCenter;
+    pin?: RegionMapPin;
+    ghost?: RegionMapGhost;
+    dots?: readonly RegionMapDot[];
+    copy: RegionMapCopy;
+}
+type DrawnModel = Pick<RegionMapModel, 'projection' | 'radii'> & {
+    view: PlaneBox;
+};
+/**
+ * What the movable centre draws inside the SVG: the circles around the pin
+ * (else `fallback`, the centre's own circles), the ghost, and the dots.
+ */
+export declare function PinShapes({ model, moving, testId, theme, fallback }: {
+    model: DrawnModel;
+    moving: Moving | undefined;
+    testId: string;
+    theme: Theme;
+    fallback: React.ReactNode;
+}): React.JSX.Element;
+/** What the movable centre draws over the SVG, in HTML: the pin and the scale bar. */
+export declare function PinOverlay({ model, moving, svgRef, testId, theme, }: {
+    model: DrawnModel;
+    moving: Moving | undefined;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element | null;
+/** The flat projection's inverse around `center` — it is linear. */
+export declare function latLngAt(center: RegionMapCenter, point: PlanePoint): RegionMapCenter;
+interface PinLayerProps {
+    pin: RegionMapPin;
+    center: RegionMapCenter;
+    projection: Projection;
+    view: PlaneBox;
+    /** The drawing's SVG, whose on-screen box maps a pointer to the plane (zoomed or not). */
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    testId: string;
+    theme: Theme;
+}
+/** The draggable pin, as HTML over the drawing. */
+export declare function PinMarker({ pin, center, projection, view, svgRef, testId, theme }: PinLayerProps): React.JSX.Element;
+/** The circles around the pin: solid in the primary colour, faintly filled. */
+export declare function PinCircles({ at, radii, theme }: {
+    at: PlanePoint;
+    radii: readonly number[];
+    theme: Theme;
+}): React.JSX.Element;
+/** Where the circles stood: a dashed ring and dot at `ghost`, and a dashed line from it to the pin. */
+export declare function GhostShapes({ ghost, pinAt, projection, view, testId, theme, }: {
+    ghost: RegionMapGhost;
+    pinAt: PlanePoint;
+    projection: Projection;
+    view: PlaneBox;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element;
+/** The dots: filled with the ink, or hollow (paper with an ink ring). */
+export declare function Dots({ dots, projection, view, testId, theme }: {
+    dots: readonly RegionMapDot[];
+    projection: Projection;
+    view: PlaneBox;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element;
+/** The longest nice length that fits in a quarter of the drawing's width. */
+export declare function scaleMetres(view: PlaneBox): number;
+/**
+ * A scale bar, bottom-left, when the host gives `copy.scale`. It reads what is
+ * on screen: a host that zooms the drawing's layers (a CSS scale on the SVG)
+ * shows fewer metres per pixel, so after every render the bar compares the
+ * SVG's drawn width with its laid-out width — both off the SVG itself — and
+ * spans the drawing's own width, so its share of it is a share of the view.
+ */
+export declare function ScaleBar({ view, copy, svgRef, testId, theme, }: {
+    view: PlaneBox;
+    copy: RegionMapCopy;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=RegionMapPin.d.ts.map

package/dist/types/components/data-display/RegionMap/RegionMapPin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionMapPin.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapPin.tsx"],"names":[],"mappings":"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"}

package/dist/types/components/data-display/RegionMap/index.d.ts

@@ -1,6 +1,7 @@
 export { RegionMap } from './RegionMap';
 export { decodePolyline, hitRegion, projectionAt } from './RegionMap.helpers';
+export { latLngAt, scaleMetres } from './RegionMapPin';
 export { boundsOfRings, regionMapView } from './RegionMap.view';
 export type { AreaGeometry, PlaneBox, PlanePoint, PlaneRegion, Projection } from './RegionMap.helpers';
-export type { RegionMapBounds, RegionMapCircle, RegionMapCopy, RegionMapLayer, RegionMapListMode, RegionMapListSort, RegionMapPoint, RegionMapProps, RegionMapReach, RegionMapRegion, RegionMapRing, } from './RegionMap.types';
+export type { RegionMapBounds, RegionMapCircle, RegionMapCenter, RegionMapCopy, RegionMapDot, RegionMapGhost, RegionMapLayer, RegionMapListMode, RegionMapListSort, RegionMapPin, RegionMapPoint, RegionMapProps, RegionMapReach, RegionMapRegion, RegionMapRing, } from './RegionMap.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/data-display/RegionMap/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvG,YAAY,EACV,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvG,YAAY,EACV,eAAe,EACf,eAAe,EACf,eAAe,EACf,aAAa,EACb,YAAY,EACZ,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,mBAAmB,CAAC"}

package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts

@@ -144,9 +144,12 @@ export declare const PULSE: {
  * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,
  * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)
  * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the
- * same on an opaque tint, a translucent wash and a gradient, and because it
- * paints above the background and below the content the ink keeps its own
- * contrast.
+ * same on an opaque tint, a translucent wash and a gradient.
+ *
+ * Painting above the background and below the content keeps the layer off the
+ * INK, but not off the ink's CONTRAST: the layer moves the surface toward the
+ * mode's absolute, which is the side the ink is on, so the two close in. That
+ * is what {@link POINTER_INK_STEP} answers (FUT-4506).
  */
 export declare const HOVER: {
     readonly tintAlpha: 0.06;
@@ -168,8 +171,11 @@ export declare const HOVER: {
  *
  * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,
  * so it reads the same on an opaque tint, a translucent wash and a gradient;
- * painted above the background and below the content, so the ink keeps its
- * own contrast; and animatable, which `background-image` is not.
+ * painted above the background and below the content, so it never dims the
+ * ink itself; and animatable, which `background-image` is not. It DOES dim the
+ * ink's contrast, because it darkens a light surface toward a dark ink (and
+ * lightens a dark one toward a light ink) — on Alert, {@link POINTER_INK_STEP}
+ * is the other half of the press.
  *
  * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE
  * property carries both states. CSS runs a transition from the DESTINATION
@@ -186,6 +192,68 @@ export declare const ACTIVE: {
     readonly tintAlpha: 0.2;
     readonly ms: 250;
 };
+/**
+ * How far the MESSAGE ink — title, description and children — steps toward the
+ * absolute on its own side while the alert is hovered or pressed (FUT-4506,
+ * option C).
+ *
+ * The tint layer above moves the surface toward the mode's absolute — black in
+ * light mode, white in dark — which is the side the ink sits on, so every
+ * pointer state CLOSED the gap the ink is read across. Measured on a host pane
+ * whose summary sat at 4.71:1 idle: 4.22 hovered, 3.17 pressed in light mode,
+ * and down to 2.68 pressed in dark. The title, at 16.8px/600, is not WCAG
+ * "large" text, so it is held to 4.5:1 as well.
+ *
+ * The answer keeps the layer (the pointer still gets its feedback) and moves
+ * the ink FURTHER the same way, so the gap re-opens. The amounts are the
+ * prototype's measured steps on that host pane, the worst case in reach: they
+ * hold the 0.9 summary at 4.75–6.07:1 there, and at 6.38:1 or more on this
+ * package's default palette in both modes. White needs the bigger step because
+ * a light ink has less room above it than a dark ink has below it, and dark
+ * mode's pressed step needs at least 0.55.
+ *
+ * Keyed by the absolute the ink moves TOWARD, which is the mode's: black in
+ * light mode, white in dark. The web applies the step as `color-mix()` over
+ * `currentColor`, so its AMOUNT lands on whatever ink is actually painted — a
+ * host's repaint of a semantic or `glass` alert included. Its DIRECTION is the
+ * mode's, which is only safe where the surface tracks the mode, so `gradient`
+ * is not stepped at all (`inkAbsolute` in `Alert.ink.ts`): a host that
+ * repaints it to a light pane and a dark ink would otherwise have its ink
+ * stepped toward white under a black layer. DOM only; native has no pointer
+ * states. `Banner` paints the same tint and does not step yet.
+ */
+export declare const POINTER_INK_STEP: {
+    readonly hover: {
+        readonly black: 0.15;
+        readonly white: 0.2;
+    };
+    readonly press: {
+        readonly black: 0.35;
+        readonly white: 0.6;
+    };
+};
+/**
+ * Both pointer states as a host reads them: the tint layer's alpha and the ink
+ * step, per absolute. Exported (as `ALERT_POINTER_STATES`) so a theme that
+ * repaints the alert's pane and ink can assert its own tones still clear 4.5:1
+ * hovered and pressed, against the numbers the package actually draws with.
+ */
+export declare const POINTER_STATES: {
+    readonly hover: {
+        readonly tintAlpha: 0.06;
+        readonly inkStep: {
+            readonly black: 0.15;
+            readonly white: 0.2;
+        };
+    };
+    readonly press: {
+        readonly tintAlpha: 0.2;
+        readonly inkStep: {
+            readonly black: 0.35;
+            readonly white: 0.6;
+        };
+    };
+};
 export declare const FOCUS: {
     readonly ringWidth: 2;
     readonly ringAlpha: 1;

package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.metrics.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Alert.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,EAAgB,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEpF;;;;;;;;;;GAUG;AAEH,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,mBAAmB;;;CAA6C,CAAC;AAC9E,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,YAAY,iCAAiC,CAAC;AAE3D,4EAA4E;AAC5E,eAAO,MAAM,OAAO;;;;CAA8C,CAAC;AACnE,eAAO,MAAM,SAAS;;;;CAA4C,CAAC;AACnE,oEAAoE;AACpE,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,2FAA2F;AAC3F,eAAO,MAAM,cAAc;;;CAAsD,CAAC;AAElF,2GAA2G;AAC3G,eAAO,MAAM,KAAK;;;;;CAAsF,CAAC;AACzG,iDAAiD;AACjD,eAAO,MAAM,WAAW;;;CAA4C,CAAC;AAErE,qHAAqH;AACrH,eAAO,MAAM,UAAU;;;CAA+C,CAAC;AACvE,qGAAqG;AACrG,eAAO,MAAM,SAAS;;;;;;CAAuG,CAAC;AAC9H,oGAAoG;AACpG,eAAO,MAAM,WAAW;;;;CAAmE,CAAC;AAC5F,mFAAmF;AACnF,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAEhG;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;CAA4E,CAAC;AAC1G,oEAAoE;AACpE,eAAO,MAAM,KAAK;;;;;CAAuF,CAAC;AAC1G;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAC;AAEX,oEAAoE;AACpE,eAAO,MAAM,IAAI;;;;;CAAiE,CAAC;AACnF,eAAO,MAAM,KAAK;;;;CAAgD,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK;;CAA+B,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;;;CAAuC,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;CAGnB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;CAGjB,CAAC;AAEX,eAAO,MAAM,KAAK;;;;CAAqD,CAAC;AAExE,mFAAmF;AACnF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,UAAU,CAAwC,CAAC;AAEhH,uFAAuF;AACvF,eAAO,MAAM,OAAO,GAAI,IAAI,MAAM,KAAG,MAAyB,CAAC;AAE/D,6FAA6F;AAC7F,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,CAkBlF;AAED,kGAAkG;AAClG,MAAM,WAAW,YAAY;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,YAAY,CAAqD,CAAC;AAE9G,8FAA8F;AAC9F,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY,CAUnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,YAAY,CAOzD;AAED,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAKjF;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,YAAY,CAGnE;AAED,kEAAkE;AAClE,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY,CAIvG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.98.0",
+  "version": "6.99.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/Alert/Alert.content.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { sxRem } from '../../../tokens/relative';
 
 import { testIdFor } from './Alert.helpers';
+import { ALERT_CHILDREN_CLASS, ALERT_DESCRIPTION_CLASS } from './Alert.ink';
 import { DESCRIPTION, ICON_SLOT, TITLE, TITLE_ICON } from './Alert.metrics';
 import type { AlertProps } from './Alert.types';
 
@@ -14,6 +15,19 @@ const BREAK_WORDS = {
   wordBreak: 'break-word',
 } as const;
 
+/**
+ * The caller's `children`, wrapped so the pointer step (`Alert.ink.ts`) reaches
+ * children-only text without reaching the title row's icon. `display: contents`
+ * gives the wrapper no box, so the column's flex layout is exactly what it was
+ * and a bare text node still inherits the stepped colour.
+ */
+const ChildrenInk: React.FC<{ children?: React.ReactNode }> = ({ children }) =>
+  children === undefined || children === null || children === false ? null : (
+    <Box component="span" className={ALERT_CHILDREN_CLASS} sx={{ display: 'contents' }}>
+      {children}
+    </Box>
+  );
+
 /**
  * The message column: title, description, then whatever the caller put inside.
  *
@@ -78,13 +92,14 @@ export const AlertContent: React.FC<{
       {description && (
         <Box
           component="div"
+          className={ALERT_DESCRIPTION_CLASS}
           data-testid={testIdFor(dataTestId, 'message')}
           sx={{ opacity: DESCRIPTION.opacity, fontSize: sxRem(DESCRIPTION.fontSize), ...BREAK_WORDS }}
         >
           {description}
         </Box>
       )}
-      {children}
+      <ChildrenInk>{children}</ChildrenInk>
     </>
   );
 };

package/src/components/data-display/Alert/Alert.ink.ts

@@ -0,0 +1,106 @@
+import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { absoluteInk } from '../../../tokens/ink';
+
+import { ACTIVE, ALERT_EASING, POINTER_INK_STEP, seconds } from './Alert.metrics';
+
+/**
+ * THE INK HALF OF THE POINTER STATES (FUT-4506, option C).
+ *
+ * The hover and press tint (`pointerShadow` in `Alert.tsx`) moves the SURFACE
+ * toward an absolute. On every surface that tracks the mode that is the side
+ * the ink is on, so the gap the message is read across closed under the
+ * pointer — a host summary at 4.71:1 idle fell to 3.17:1 pressed. These rules
+ * move the INK further the same way, by {@link POINTER_INK_STEP}, so it
+ * re-opens.
+ */
+
+/** The summary's class, so the pointer states can reach it without a test id. */
+export const ALERT_DESCRIPTION_CLASS = 'alert-description';
+/**
+ * The wrapper `AlertContent` puts around `children`, at `display: contents`:
+ * no box of its own, so the column's flex layout is what it was, and a bare
+ * text node still inherits its colour.
+ */
+export const ALERT_CHILDREN_CLASS = 'alert-children';
+
+/**
+ * What steps: the WORDS of the message — the title, the description and
+ * whatever the caller passed as `children` — each one step, none nested in
+ * another. Stepping only the title and the description left a children-only
+ * alert (about one in six in the first host measured) at its rest ink under
+ * the press tint.
+ *
+ * Not the whole message column, because the column is not only words: with
+ * `iconPlacement: 'title'` the icon sits in it, on the title's row, beside
+ * `.MuiAlertTitle-root` rather than inside it. The icon is the variant's
+ * meaning, not an affordance, so it stays still in both placements; the close
+ * button (`.MuiAlert-action`) is outside the column altogether. A control
+ * inside `children` keeps its own colour, because it declares one; only a
+ * `color="inherit"` one follows the step, on the same tinted surface as the
+ * words around it.
+ */
+const MESSAGE_INK = `& .MuiAlertTitle-root, & .${ALERT_DESCRIPTION_CLASS}, & .${ALERT_CHILDREN_CLASS}`;
+
+export type PointerInkState = keyof typeof POINTER_INK_STEP;
+export type InkAbsolute = 'black' | 'white';
+
+/**
+ * The absolute the ink steps toward — the mode's, the side the ink is on — or
+ * `null` for `gradient`, which does not step at all.
+ *
+ * Every other variant's surface tracks the mode: a dark ink on a light tint,
+ * a light ink on a dark one, so the step is toward black in light mode and
+ * toward white in dark, the same absolute the tint layer moves the surface to.
+ *
+ * `gradient` is the one surface where the package cannot know which side its
+ * ink is on. Its own ink is `getContrastText` of the hue, but a host that
+ * repaints alerts repaints the gradient too: a light pane and a dark ink under
+ * the variant's BLACK layer. Stepping by the package's own ink then moved that
+ * dark ink toward white — 1.02:1 pressed. A step that reads `currentColor` for
+ * its amount but not for its direction is only safe where the direction is the
+ * mode's, so `gradient` keeps today's ink. Its rest contrast and its dark ink
+ * on dark mode's light hues are FUT-4516's.
+ */
+export function inkAbsolute(theme: Theme, variant: string | undefined): InkAbsolute | null {
+  if (variant === 'gradient') return null;
+  return theme.palette.mode === 'dark' ? 'white' : 'black';
+}
+
+/**
+ * The CSS for the ink at one pointer state: the ink actually painted
+ * (`currentColor`, inherited from the root — a host's repaint included) mixed
+ * toward the absolute by the state's step.
+ *
+ * `currentColor` in a `color` declaration is the PARENT's colour, which is why
+ * this sits on the message's parts and never on the root: on the root it would
+ * read the page's text colour instead of the alert's ink. None of the three
+ * parts is nested in another, so nothing steps twice.
+ */
+export function steppedInkCss(absolute: string, step: number): string {
+  return `color-mix(in srgb, currentColor ${Math.round((1 - step) * 100)}%, ${absolute})`;
+}
+
+/**
+ * The three pieces of the ink's pointer behaviour, spread into the root's
+ * blocks by `Alert.tsx`:
+ *
+ * - `rest` eases the ink on the box-shadow's own clock, so ink and tint arrive
+ *   together rather than the ink snapping while the surface eases;
+ * - `hover` and `press` step it. The press declares `transition: none` for the
+ *   same reason the root's `:active` does: a click's `:active` is too short to
+ *   ease into. A `:hover` block declares no transition, ever (see `ACTIVE`).
+ *
+ * All three are empty for a variant that does not step.
+ */
+export function pointerInkStyles(theme: Theme, variant: string | undefined): Record<'rest' | PointerInkState, CSSObject> {
+  const side = inkAbsolute(theme, variant);
+  if (side === null) return { rest: {}, hover: {}, press: {} };
+  const absolute = absoluteInk(theme)[side];
+  const at = (state: PointerInkState): string => steppedInkCss(absolute, POINTER_INK_STEP[state][side]);
+  return {
+    rest: { [MESSAGE_INK]: { transition: `color ${seconds(ACTIVE.ms)} ${ALERT_EASING}` } },
+    hover: { [MESSAGE_INK]: { color: at('hover') } },
+    press: { [MESSAGE_INK]: { color: at('press'), transition: 'none' } },
+  };
+}

package/src/components/data-display/Alert/Alert.md

@@ -145,6 +145,46 @@ The Alert component implements comprehensive accessibility features:
 - High contrast colors meeting WCAG guidelines
 - Screen reader compatible content structure
 
+### Hover and press keep the words at 4.5:1
+
+An alert answers a pointer with a flat tint layer (`HOVER.tintAlpha` 0.06,
+`ACTIVE.tintAlpha` 0.2, eased back over `ACTIVE.ms`), and nothing moves. That
+layer moves the surface toward the mode's absolute — black in light mode, white
+in dark — which is the side the ink is on, so on its own it CLOSED the gap the
+words are read across: a summary at 4.71:1 idle fell to 3.17:1 pressed in
+light mode and 2.68:1 in dark (FUT-4506).
+
+So while the tint is on, the **message** — title, description and whatever
+is passed as `children` — steps its ink toward
+that same absolute (`POINTER_INK_STEP`; both states' tint and step are
+exported as `ALERT_POINTER_STATES` for a theme that asserts its own tones):
+
+| state | toward black (light mode) | toward white (dark mode) |
+|---|---|---|
+| hover | 0.15 | 0.2 |
+| press | 0.35 | 0.6 |
+
+The message holds 4.5:1 at rest, hovered and pressed — the title too, since
+16.8px/600 is not WCAG "large" text. The step sits on the title
+(`.MuiAlertTitle-root`), the description (`.alert-description`) and the
+children (wrapped in `.alert-children` at `display: contents`, so the layout
+does not change), each one step. It is a `color-mix()` over `currentColor`:
+its amount lands on whatever ink is actually painted, so a theme that repaints
+a semantic or `glass` alert's `color` gets the same step on its own ink. It
+eases on the tint's clock and lands at once on a press, like the tint.
+
+The icon does not step, in either placement: in the gutter (`.MuiAlert-icon`)
+and on the title's row (`iconPlacement: 'title'`), where it sits in the
+message column beside the title rather than inside it. The close button
+(`.MuiAlert-action`), the focus ring and any control in `children` that
+declares its own colour keep their colours and states; a `color="inherit"`
+control in `children` steps with the words around it.
+
+`gradient` is not stepped. The step's direction is the mode's, and a host that
+repaints a gradient to a light pane with a dark ink would have had that ink
+stepped toward white under the variant's black layer. Its rest contrast is
+FUT-4516's.
+
 ### `announce` — whether the alert interrupts
 
 `role` and `aria-live` are two attributes with one meaning between them, and by

package/src/components/data-display/Alert/Alert.metrics.ts

@@ -94,9 +94,12 @@ export const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;
  * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,
  * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)
  * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the
- * same on an opaque tint, a translucent wash and a gradient, and because it
- * paints above the background and below the content the ink keeps its own
- * contrast.
+ * same on an opaque tint, a translucent wash and a gradient.
+ *
+ * Painting above the background and below the content keeps the layer off the
+ * INK, but not off the ink's CONTRAST: the layer moves the surface toward the
+ * mode's absolute, which is the side the ink is on, so the two close in. That
+ * is what {@link POINTER_INK_STEP} answers (FUT-4506).
  */
 export const HOVER = { tintAlpha: 0.06 } as const;
 
@@ -117,8 +120,11 @@ export const HOVER = { tintAlpha: 0.06 } as const;
  *
  * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,
  * so it reads the same on an opaque tint, a translucent wash and a gradient;
- * painted above the background and below the content, so the ink keeps its
- * own contrast; and animatable, which `background-image` is not.
+ * painted above the background and below the content, so it never dims the
+ * ink itself; and animatable, which `background-image` is not. It DOES dim the
+ * ink's contrast, because it darkens a light surface toward a dark ink (and
+ * lightens a dark one toward a light ink) — on Alert, {@link POINTER_INK_STEP}
+ * is the other half of the press.
  *
  * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE
  * property carries both states. CSS runs a transition from the DESTINATION
@@ -133,6 +139,52 @@ export const HOVER = { tintAlpha: 0.06 } as const;
  */
 export const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;
 
+/**
+ * How far the MESSAGE ink — title, description and children — steps toward the
+ * absolute on its own side while the alert is hovered or pressed (FUT-4506,
+ * option C).
+ *
+ * The tint layer above moves the surface toward the mode's absolute — black in
+ * light mode, white in dark — which is the side the ink sits on, so every
+ * pointer state CLOSED the gap the ink is read across. Measured on a host pane
+ * whose summary sat at 4.71:1 idle: 4.22 hovered, 3.17 pressed in light mode,
+ * and down to 2.68 pressed in dark. The title, at 16.8px/600, is not WCAG
+ * "large" text, so it is held to 4.5:1 as well.
+ *
+ * The answer keeps the layer (the pointer still gets its feedback) and moves
+ * the ink FURTHER the same way, so the gap re-opens. The amounts are the
+ * prototype's measured steps on that host pane, the worst case in reach: they
+ * hold the 0.9 summary at 4.75–6.07:1 there, and at 6.38:1 or more on this
+ * package's default palette in both modes. White needs the bigger step because
+ * a light ink has less room above it than a dark ink has below it, and dark
+ * mode's pressed step needs at least 0.55.
+ *
+ * Keyed by the absolute the ink moves TOWARD, which is the mode's: black in
+ * light mode, white in dark. The web applies the step as `color-mix()` over
+ * `currentColor`, so its AMOUNT lands on whatever ink is actually painted — a
+ * host's repaint of a semantic or `glass` alert included. Its DIRECTION is the
+ * mode's, which is only safe where the surface tracks the mode, so `gradient`
+ * is not stepped at all (`inkAbsolute` in `Alert.ink.ts`): a host that
+ * repaints it to a light pane and a dark ink would otherwise have its ink
+ * stepped toward white under a black layer. DOM only; native has no pointer
+ * states. `Banner` paints the same tint and does not step yet.
+ */
+export const POINTER_INK_STEP = {
+  hover: { black: 0.15, white: 0.2 },
+  press: { black: 0.35, white: 0.6 },
+} as const;
+
+/**
+ * Both pointer states as a host reads them: the tint layer's alpha and the ink
+ * step, per absolute. Exported (as `ALERT_POINTER_STATES`) so a theme that
+ * repaints the alert's pane and ink can assert its own tones still clear 4.5:1
+ * hovered and pressed, against the numbers the package actually draws with.
+ */
+export const POINTER_STATES = {
+  hover: { tintAlpha: HOVER.tintAlpha, inkStep: POINTER_INK_STEP.hover },
+  press: { tintAlpha: ACTIVE.tintAlpha, inkStep: POINTER_INK_STEP.press },
+} as const;
+
 export const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;
 
 /** `neutral` has no palette slot; the web has always drawn it from three greys. */

package/src/components/data-display/Alert/Alert.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { absoluteInk, modeInk } from '../../../tokens/ink';
 
 import { AlertContent } from './Alert.content';
+import { pointerInkStyles } from './Alert.ink';
 import { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';
 import { resolveIconPlacement, type AlertIconPlacement } from './Alert.placement';
 import type { AlertPalette } from './Alert.metrics';
@@ -48,9 +49,11 @@ const transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
  *
  * The tint is an inset spread at 100vmax, which always exceeds the element, so
  * it covers the surface edge to edge. It paints ABOVE the background and BELOW
- * the content, which is what keeps the ink's own contrast out of these states
- * entirely — see `ACTIVE` in `Alert.metrics.ts` for why a layer replaced the
- * opacity dip and the brightness multiplier that each preceded it.
+ * the content, so it never dims the ink itself — see `ACTIVE` in
+ * `Alert.metrics.ts` for why a layer replaced the opacity dip and the
+ * brightness multiplier that each preceded it. It does move the surface toward
+ * the ink's side, which is the contrast `pointerInkStyles` (`Alert.ink.ts`)
+ * wins back by stepping the message's words the same way.
  *
  * The glow is COMPOSED rather than replaced, so hovering a glowing alert keeps
  * its glow; `glowStyles` gave up its `!important` for this.
@@ -61,15 +64,19 @@ function pointerShadow(
   glow: boolean,
   variant: string | undefined,
 ): (alpha_: number) => string {
-  // The tint moves the surface AWAY from its own ink, which is why this reads
-  // the variant and not only the mode.
+  // The tint's colour reads the variant and not only the mode. On every
+  // surface that tracks the mode it moves the surface TOWARD its ink's side —
+  // the contrast cost `pointerInkStyles` pays back.
   //
   // `gradient` is the one variant where the two disagree: it paints a
   // mid-lightness sweep (L* 42–61) under WHITE ink in BOTH modes, so the
   // mode-keyed answer tinted it white in dark mode — toward the text. Measured:
   // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1
   // floor and below its own idle. Every other variant's surface tracks the mode,
-  // so for them the two rules agree.
+  // so for them the two rules agree. (Not quite WHITE in both modes: dark
+  // mode's light hues get a dark `getContrastText` ink, which this black layer
+  // closes on. That ink is not stepped (`inkAbsolute`); its rest contrast is
+  // FUT-4516's.)
   const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);
   const glowShadow = glow
     ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`
@@ -91,6 +98,7 @@ const StyledAlert = styled(MuiAlert, {
   const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');
 
   const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);
+  const ink = pointerInkStyles(theme, customVariant);
 
   return {
     borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
@@ -101,13 +109,15 @@ const StyledAlert = styled(MuiAlert, {
     willChange: 'transform, opacity',
 
     ...alertLayoutStyles(theme, colorPalette, animate),
+    ...ink.rest,
 
     // Hover: one tint step, and nothing that moves. An alert is a surface
     // rather than a control, so the pointer only needs telling it is here. The
     // icon keeps its own place for the same reason — it is the variant's
-    // meaning, not an affordance to animate.
+    // meaning, not an affordance to animate. The message's ink steps too.
     '&:hover': {
       boxShadow: withTint(HOVER.tintAlpha),
+      ...ink.hover,
 
       '&::before': {
         opacity: 1,
@@ -136,6 +146,7 @@ const StyledAlert = styled(MuiAlert, {
     '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
       boxShadow: withTint(ACTIVE.tintAlpha),
       transition: 'none',
+      ...ink.press,
     },
 
     // Focus: `:focus-visible`, not `:focus-within`.

package/src/components/data-display/Alert/index.ts

@@ -6,3 +6,4 @@ export type {
   AlertVariant,
   UiAlertTheme,
 } from './Alert.types';
+export { POINTER_STATES as ALERT_POINTER_STATES } from './Alert.metrics';

package/src/components/data-display/RegionMap/RegionMap.helpers.ts

@@ -9,7 +9,7 @@ import type { RegionMapPoint, RegionMapRegion, RegionMapRing } from './RegionMap
  */
 
 /** Metres per degree of latitude on the mean sphere. */
-const METRES_PER_DEGREE = 111_195;
+export const METRES_PER_DEGREE = 111_195;
 
 /** A projected point, metres east (`x`) and south (`y`) of the centre. */
 export interface PlanePoint {