@12-apps/ui 6.24.2 → 6.24.4

package/dist/types/components/navigation/AppHeader/AppHeader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/AppHeader/AppHeader.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/AppHeader/AppHeader.types.ts"],"names":[],"mappings":"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"}

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

@@ -73,8 +73,6 @@ export declare const CLOSE_BUTTON: {
     readonly padding: 5;
     readonly iconSize: 18;
     readonly opacity: 0.7;
-    readonly hoverRotateDeg: 90;
-    readonly hoverScale: 1.1;
     readonly washAlpha: 0.1;
 };
 /**
@@ -97,16 +95,22 @@ export declare const GLASS: {
     readonly blur: 20;
     readonly saturatePercent: 180;
 };
-/** `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s. */
+/**
+ * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.
+ *
+ * It carries no hover of its own, and that is load-bearing rather than an
+ * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the
+ * same object literal, so a second `'&:hover'` key does not merge with it — it
+ * REPLACES it. While this variant had one, `gradient` was the only alert that
+ * brightened on hover while every other variant darkened, and the only one to
+ * lose the shimmer reveal the root's hover performs.
+ */
 export declare const GRADIENT: {
     readonly angleDeg: 135;
     readonly stopAlpha: 0.9;
     readonly shimmerAlpha: 0.2;
     readonly shimmerMs: 3000;
     readonly shimmerTravel: 1000;
-    readonly hoverBrightness: 1.1;
-    readonly hoverLift: 2;
-    readonly hoverScale: 1.01;
 };
 /** Emphasis: the glow's shadow and brightness, the pulse's wash. */
 export declare const GLOW: {
@@ -120,28 +124,67 @@ export declare const PULSE: {
     readonly ms: 2000;
     readonly spread: 10;
 };
-/** Pointer states — DOM only, kept so the web derives them. */
+/**
+ * Pointer states — DOM only, kept so the web derives them.
+ *
+ * HOVER and ACTIVE carry NO geometry, and that is the point rather than an
+ * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow
+ * and spin the icon 10deg at 1.15 — four things moving at once on a surface
+ * that is not a control, which made a page of alerts twitch under the pointer.
+ *
+ * Both are a TINT now: a flat inset layer over the surface. Two mechanisms
+ * came before it and each failed on a case the next had to fix. Dropping the
+ * element's `opacity` composites toward the PAGE, so it inverted the hover on
+ * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a
+ * 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.
+ */
 export declare const HOVER: {
-    readonly lift: 3;
-    readonly scale: 1.01;
-    readonly shadowY: 8;
-    readonly shadowBlur: 20;
-    readonly shadowAlpha: 0.2;
-    readonly iconScale: 1.15;
-    readonly iconRotateDeg: 10;
+    readonly tintAlpha: 0.06;
 };
+/**
+ * The press: a 20% tint LAYER, eased back fast.
+ *
+ * The layer is the point. The first attempt dropped the whole element's
+ * opacity, which composites toward the PAGE and so behaves differently on
+ * every surface it is asked about. Measured: over a light page it made a light
+ * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the
+ * surface looked like the pointer leaving; over a dark page it landed back on
+ * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body
+ * copy to 2.31:1, under AA; and it diluted the ink during a text-selection
+ * drag. A `brightness()` step instead of it fixed the direction but not the
+ * reach — a multiplier does nothing to a near-black `glass` in dark mode
+ * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it
+ * scales only what the element already paints.
+ *
+ * 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.
+ *
+ * `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
+ * state's declaration, and entering hover and releasing a press share that
+ * destination — so they cannot have different durations without a second
+ * animatable property, and both free pseudo-elements are already spent on the
+ * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the
+ * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and
+ * for ~360ms the alert you had just LEFT was darker than the one under the
+ * pointer. A fast press-return is the smaller loss, and it is the call the
+ * product owner made when shown both.
+ */
 export declare const ACTIVE: {
-    readonly lift: 1;
-    readonly scale: 0.99;
-    readonly ms: 100;
+    readonly tintAlpha: 0.2;
+    readonly ms: 250;
 };
 export declare const FOCUS: {
-    readonly ringWidth: 3;
-    readonly ringAlpha: 0.5;
-    readonly offset: 3;
-    readonly haloSpread: 6;
-    readonly haloAlpha: 0.1;
-    readonly ms: 200;
+    readonly ringWidth: 2;
+    readonly ringAlpha: 1;
+    readonly offset: 2;
 };
 /** `neutral` has no palette slot; the web has always drawn it from three greys. */
 export declare const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep>;

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":"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"}

package/package.json

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

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

@@ -44,7 +44,7 @@ export const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddi
 /** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */
 export const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;
 /** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */
-export const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, hoverRotateDeg: 90, hoverScale: 1.1, washAlpha: 0.1 } as const;
+export const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;
 
 /**
  * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark
@@ -54,26 +54,83 @@ export const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, hoverRotat
 export const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;
 /** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */
 export const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;
-/** `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s. */
+/**
+ * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.
+ *
+ * It carries no hover of its own, and that is load-bearing rather than an
+ * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the
+ * same object literal, so a second `'&:hover'` key does not merge with it — it
+ * REPLACES it. While this variant had one, `gradient` was the only alert that
+ * brightened on hover while every other variant darkened, and the only one to
+ * lose the shimmer reveal the root's hover performs.
+ */
 export const GRADIENT = {
   angleDeg: 135,
   stopAlpha: 0.9,
   shimmerAlpha: 0.2,
   shimmerMs: 3000,
   shimmerTravel: 1000,
-  hoverBrightness: 1.1,
-  hoverLift: 2,
-  hoverScale: 1.01,
 } as const;
 
 /** Emphasis: the glow's shadow and brightness, the pulse's wash. */
 export const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;
 export const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;
 
-/** Pointer states — DOM only, kept so the web derives them. */
-export const HOVER = { lift: 3, scale: 1.01, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.2, iconScale: 1.15, iconRotateDeg: 10 } as const;
-export const ACTIVE = { lift: 1, scale: 0.99, ms: 100 } as const;
-export const FOCUS = { ringWidth: 3, ringAlpha: 0.5, offset: 3, haloSpread: 6, haloAlpha: 0.1, ms: 200 } as const;
+/**
+ * Pointer states — DOM only, kept so the web derives them.
+ *
+ * HOVER and ACTIVE carry NO geometry, and that is the point rather than an
+ * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow
+ * and spin the icon 10deg at 1.15 — four things moving at once on a surface
+ * that is not a control, which made a page of alerts twitch under the pointer.
+ *
+ * Both are a TINT now: a flat inset layer over the surface. Two mechanisms
+ * came before it and each failed on a case the next had to fix. Dropping the
+ * element's `opacity` composites toward the PAGE, so it inverted the hover on
+ * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a
+ * 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.
+ */
+export const HOVER = { tintAlpha: 0.06 } as const;
+
+/**
+ * The press: a 20% tint LAYER, eased back fast.
+ *
+ * The layer is the point. The first attempt dropped the whole element's
+ * opacity, which composites toward the PAGE and so behaves differently on
+ * every surface it is asked about. Measured: over a light page it made a light
+ * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the
+ * surface looked like the pointer leaving; over a dark page it landed back on
+ * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body
+ * copy to 2.31:1, under AA; and it diluted the ink during a text-selection
+ * drag. A `brightness()` step instead of it fixed the direction but not the
+ * reach — a multiplier does nothing to a near-black `glass` in dark mode
+ * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it
+ * scales only what the element already paints.
+ *
+ * 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.
+ *
+ * `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
+ * state's declaration, and entering hover and releasing a press share that
+ * destination — so they cannot have different durations without a second
+ * animatable property, and both free pseudo-elements are already spent on the
+ * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the
+ * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and
+ * for ~360ms the alert you had just LEFT was darker than the one under the
+ * pointer. A fast press-return is the smaller loss, and it is the call the
+ * product owner made when shown both.
+ */
+export const ACTIVE = { tintAlpha: 0.2, ms: 250 } 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. */
 export const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };

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

@@ -333,16 +333,15 @@ export const alertVariantStyles = (
       background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,
       animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,
     },
-    '&:hover': {
-      filter: `brightness(${GRADIENT.hoverBrightness})`,
-      transform: `translateY(-${GRADIENT.hoverLift}px) scale(${GRADIENT.hoverScale})`,
-    },
   }),
 });
 
 /** The web's glow: a soft shadow of the hue and a touch of brightness. */
 const glowStyles = (colorPalette: AlertPalette): CSSObject => ({
-  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)} !important`,
+  // No `!important`: the pointer states paint their tint as an INSET shadow on
+  // the same property, and compose this one alongside it rather than fighting
+  // it. `glowShadow` in `Alert.tsx` is the other half of that pair.
+  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
   filter: `brightness(${GLOW.brightness})`,
 });
 

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

@@ -5,11 +5,14 @@ import Box from '@mui/material/Box/index.js';
 import Collapse from '@mui/material/Collapse/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { defaultAriaLive, resolveAlertProps, testIdFor } from './Alert.helpers';
+import type { AlertPalette } from './Alert.metrics';
 import {
   ACTIVE,
+  GLOW,
   ALERT_EASING,
   ALERT_RADIUS_UNITS,
   ALERT_TRANSITION_MS,
@@ -39,6 +42,41 @@ import { px } from '../../../tokens/theme';
 const transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
 
 // Define animations
+/**
+ * The pointer states' shadow: a flat tint, plus the glow when the alert has one.
+ *
+ * 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 glow is COMPOSED rather than replaced, so hovering a glowing alert keeps
+ * its glow; `glowStyles` gave up its `!important` for this.
+ */
+function pointerShadow(
+  theme: Theme,
+  colorPalette: AlertPalette,
+  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.
+  //
+  // `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.
+  const ink = variant === 'gradient' || theme.palette.mode === 'light' ? '#000000' : '#ffffff';
+  const glowShadow = glow
+    ? `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`
+    : null;
+  return (alpha_) =>
+    [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(', ');
+}
+
 const StyledAlert = styled(MuiAlert, {
   shouldForwardProp: (prop) =>
     !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string),
@@ -51,9 +89,11 @@ const StyledAlert = styled(MuiAlert, {
 }>(({ theme, customVariant, customColor, glow, pulse, animate }) => {
   const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');
 
+  const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);
+
   return {
     borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
-    transition,
+    transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,
     position: 'relative',
     overflow: 'hidden',
     animation: animate ? `${fadeInScale} ${seconds(FADE_IN.ms)} ease-out` : 'none',
@@ -61,33 +101,61 @@ const StyledAlert = styled(MuiAlert, {
 
     ...alertLayoutStyles(theme, colorPalette, animate),
 
-    // Hover effects
+    // 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.
     '&:hover': {
-      transform: `translateY(-${HOVER.lift}px) scale(${HOVER.scale})`,
-      boxShadow: `0 ${HOVER.shadowY}px ${HOVER.shadowBlur}px ${alpha(colorPalette.main, HOVER.shadowAlpha)}`,
-      transition,
-
-      '.MuiAlert-icon': {
-        transform: `scale(${HOVER.iconScale}) rotate(${HOVER.iconRotateDeg}deg)`,
-      },
+      boxShadow: withTint(HOVER.tintAlpha),
 
       '&::before': {
         opacity: 1,
       },
     },
 
-    // Active state
-    '&:active': {
-      transform: `translateY(-${ACTIVE.lift}px) scale(${ACTIVE.scale})`,
-      transition: `transform ${seconds(ACTIVE.ms)} ease`,
+    // Press: a 20% tint, landing at once and easing back. Still no geometry.
+    //
+    // `transition: none` here is what makes the dip INSTANT: a click's
+    // `:active` lasts about as long as the finger is down, so easing into it
+    // would be cut off in its first tenth and read as a flicker. The ease is on
+    // the way back, governed by the root.
+    //
+    // Neither `:hover` nor `:focus-visible` may declare `transition`, and that
+    // is not a style preference. `:active` under a mouse ALWAYS implies
+    // `:hover`, so a bare shorthand in the hover block outranks the root's
+    // (0,2,0 beats 0,1,0) and silently resets the timing this state rests on.
+    //
+    // The `:not(:has(…))` names CONTROLS, not any descendant. `:active`
+    // matches an ancestor of whatever is pressed, so dismissing an alert
+    // dimmed the alert being dismissed and pressing a call to action dimmed
+    // the message explaining it. Excluding `:has(:active)` wholesale does not
+    // work and was the first attempt: pressing the TEXT makes that text
+    // `:active` too, so the guard matched on every press and the state never
+    // fired at all.
+    '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
+      boxShadow: withTint(ACTIVE.tintAlpha),
+      transition: 'none',
     },
 
-    // Focus styles for accessibility
-    '&:focus-within': {
+    // Focus: `:focus-visible`, not `:focus-within`.
+    //
+    // The alert carries `tabIndex={0}`, so a MOUSE CLICK focused it and painted
+    // the ring — a keyboard affordance answering a pointer, which is what made
+    // clicking one look like an error state. `:focus-visible` is the browser's
+    // own answer to "did this focus come from the keyboard": the ring stays for
+    // whoever tabs here and never fires on a click.
+    //
+    // One ring, not three. It was a 3px outline at 3px offset UNDER a 6px halo,
+    // and stacking two rings on one edge is what read as unfinished rather than
+    // as emphasis.
+    // It declares no `transition`: `outline-style` is discrete, so the ring
+    // arrives at full width with only its COLOUR easing — from `currentcolor`,
+    // the near-black alert ink, to the blue. That is a visible dark flash on
+    // every keyboard focus, and it would also outrank the root's opacity
+    // transition the way the hover block did.
+    '&:focus-visible': {
       outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
       outlineOffset: `${FOCUS.offset}px`,
-      boxShadow: `0 0 0 ${FOCUS.haloSpread}px ${alpha(colorPalette.main, FOCUS.haloAlpha)}`,
-      transition: `all ${seconds(FOCUS.ms)} ease`,
     },
 
     ...alertVariantStyles(theme, customVariant, colorPalette),
@@ -161,14 +229,39 @@ const AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose:
     sx={(theme) => ({
       transition,
       opacity: CLOSE_BUTTON.opacity,
+      // Opacity and a wash only: the button used to spin 90deg and grow 1.1,
+      // which drew the eye to the dismiss rather than to the message.
       '&:hover': {
-        transform: `rotate(${CLOSE_BUTTON.hoverRotateDeg}deg) scale(${CLOSE_BUTTON.hoverScale})`,
         opacity: 1,
         backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha),
       },
-      '&:focus': {
+      // A REAL ring, on the keyboard-only selector.
+      //
+      // This used to be `&:focus` setting `outline: 'none'` over a
+      // `rgba(0,0,0,0.1)` wash — 1.25:1 against the info surface, and MUI's
+      // ButtonBase already sets `outline: 0`, so there was no UA fallback
+      // either. It went unnoticed while the ROOT still matched `:focus-within`
+      // and drew a ring around the whole alert; moving the root to
+      // `:focus-visible` took that away and left this button with no visible
+      // focus at all. `Banner`'s dismiss already draws its own outline, so
+      // this is also what keeps the two surfaces telling a keyboard user the
+      // same thing.
+      '&:focus-visible': {
         opacity: 1,
-        outline: 'none',
+        // `currentColor` is the alert's own ink, inherited through
+        // `color="inherit"`, so the ring is drawn in whatever colour was
+        // already chosen to be READ on this surface. Measured 11.2:1 on the
+        // semantic variants and 5.7:1 on `gradient`.
+        //
+        // That is a reasoned choice, not a test-backed one, and the difference
+        // matters: `alert-contrast.test.tsx` covers the ink of the four
+        // semantic variants only — its `glass` case asserts the pane's alpha
+        // rather than its ink, and `gradient` it does not render at all. A
+        // translucent surface's contrast depends on what sits behind it, which
+        // is why that test stops where it does and why this comment does not
+        // borrow a guarantee it never made.
+        outline: `${FOCUS.ringWidth}px solid currentColor`,
+        outlineOffset: `${FOCUS.offset}px`,
         backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),
       },
     })}
@@ -216,7 +309,11 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, r
   // Every spelling of the test id the shared contract allows, mapped to the
   // one the DOM reads and defaulted to `alert`; the native Alert does the same.
   const dataTestId = resolveTestId(others, 'alert');
-  const props = withoutTestIdProps(others);
+  // Then the dismiss union, which `dismissButton` reads off `alertProps` rather
+  // than through this destructure — so without this strip it rides `...props`
+  // onto the DOM. `ALERT_DEFAULTS` supplies `closable: false`, so that happened
+  // on EVERY alert, not only the closable ones.
+  const props = withoutAlertOnlyProps(withoutTestIdProps(others));
 
   // Depends on `variant`, so it cannot live in the static defaults above.
   const ariaLive = alertProps['aria-live'] ?? defaultAriaLive(variant);
@@ -272,4 +369,25 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, r
   );
 });
 
+/**
+ * The props `Alert` OWNS, which must never reach the DOM.
+ *
+ * `AlertProps` extends MUI's, whose rest-spread is how a host's real HTML
+ * attributes get onto the root — so the same spread carries the alert's own
+ * configuration unless it is named here. Everything else the component consumes
+ * leaves through the destructure above; these two do not, because
+ * `dismissButton` reads them off the original props to keep the dismiss union's
+ * narrowing intact.
+ *
+ * Exported so a test can render an alert carrying every name on it and assert
+ * none reaches the DOM — the check that would have caught `closable`.
+ */
+export const ALERT_ONLY_PROPS = ['closable', 'closeLabel'] as const;
+
+function withoutAlertOnlyProps<P extends object>(rest: P): P {
+  const html = { ...rest } as Record<string, unknown>;
+  for (const key of ALERT_ONLY_PROPS) delete html[key];
+  return html as P;
+}
+
 Alert.displayName = 'Alert';

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

@@ -4,7 +4,7 @@ Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
 
 - `glass` paints its 0.85 paper wash and hairline without the 20px backdrop blur and saturation — React Native has no backdrop filter.
 - `gradient` paints its first stop (`alpha(light, 0.9)`) flat and has no shimmer sweep — React Native core has no gradient fill and no pseudo-elements.
-- Hover, active and focus-within (the lift, the hue shadow, the icon tilt, the focus ring) have no touch equivalent; the close button's pressed state stands in for its hover.
+- Hover (a 6% tint layer), press (a 20% one, easing back) and `:focus-visible` (the keyboard ring) have no touch equivalent; the close button's pressed state stands in for its hover.
 - The hairline the web draws around a `Button` placed inside the message is a descendant selector; native children are rendered as given. Consecutive text children DO flow as one sentence (`src/platform/text-children.tsx`); an element child breaks the run, as a block would on the web.
 - After dismissal the web keeps a collapsed, hidden node in the DOM; native unmounts once the 300ms collapse has run.
 - Title, description and children are set in MUI's default `body1`/`body2` numbers; a host that re-themes MUI's typography variants moves the web only.

package/src/components/data-display/Banner/Banner.styles.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';
 
 import type { BannerVariant } from './Banner.types';
+import { ACTIVE, HOVER } from '../Alert/Alert.metrics';
 
 // Animations
 export const fadeInSlide = keyframes`
@@ -105,16 +106,53 @@ export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSO
     marginLeft: theme.spacing(1),
     flexShrink: 0,
 
+    // Opacity and a wash only: the dismiss used to spin 90deg, which drew the
+    // eye to the way out rather than to the message. Same fix as `Alert`'s
+    // close button, which is the sibling surface (FUT-1458).
     '&:hover': {
       opacity: 1,
       backgroundColor: alpha(colorPalette.main, 0.1),
-      transform: 'rotate(90deg)',
     },
 
-    '&:focus': {
+    '&:focus-visible': {
       opacity: 1,
       outline: `2px solid ${colorPalette.main}`,
       outlineOffset: '2px',
     },
   },
 });
+
+/**
+ * The pointer states, from `Alert`'s own table.
+ *
+ * Banner had NO hover at all — measured ΔE76 0.00 on every variant in both
+ * modes — so moving between the two surfaces gave feedback on one and silence
+ * on the other. They are the same kind of thing and now answer a pointer the
+ * same way.
+ *
+ * Neither block may declare `transition`: `:active` under a mouse always
+ * implies `:hover`, so a shorthand here would outrank the root's and reset the
+ * opacity fade the press is built on.
+ */
+/** The same flat inset tint `Alert` paints; see `ACTIVE` for why it is a layer. */
+const tint = (theme: Theme, a: number): string =>
+  `inset 0 0 0 100vmax ${alpha(theme.palette.mode === 'light' ? '#000000' : '#ffffff', a)}`;
+
+export const bannerPointerStates = (theme: Theme): CSSObject => ({
+  '&:hover': {
+    boxShadow: tint(theme, HOVER.tintAlpha),
+  },
+
+  // The `:not(:has(…))` names CONTROLS, not any descendant: `:active` matches
+  // an ancestor of whatever is pressed, so without it pressing the dismiss or
+  // an action dimmed the message that owns it. Excluding `:has(:active)`
+  // wholesale does not work — pressing the TEXT makes that text `:active` too,
+  // so the guard matched on every press and the state never fired.
+  '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
+    boxShadow: tint(theme, ACTIVE.tintAlpha),
+    transition: 'none',
+  },
+});
+
+/** The seconds the tint takes easing back, shared with `Alert`. */
+export const BANNER_TINT_S = ACTIVE.ms / 1000;

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

@@ -11,9 +11,12 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { bannerPartStyles, fadeInSlide, getVariantColor } from './Banner.styles';
+import { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';
+import { FOCUS } from '../Alert/Alert.metrics';
 import type { BannerProps, BannerVariant } from './Banner.types';
 
+
+
 const StyledBanner = styled(Box, {
   shouldForwardProp: (prop) => !['variant', 'sticky', 'fullWidth'].includes(prop as string),
 })<{
@@ -40,12 +43,21 @@ const StyledBanner = styled(Box, {
     marginLeft: fullWidth ? '50%' : 0,
     transform: fullWidth ? 'translateX(-50%)' : 'none',
     animation: `${fadeInSlide} 0.3s ease-out`,
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-
-    // Enhanced accessibility and focus styles
-    '&:focus-within': {
-      outline: `3px solid ${alpha(colorPalette.main, 0.5)}`,
-      outlineOffset: '2px',
+    transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,
+
+    ...bannerPointerStates(theme),
+
+    // Focus: `:focus-visible`, not `:focus-within`.
+    //
+    // The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and
+    // painted this ring — a keyboard affordance answering a pointer, which is
+    // what made clicking one look like an error state. `:focus-visible` is the
+    // browser's own answer to whether the focus came from the keyboard: the
+    // ring stays for whoever tabs here and never fires on a click. Same defect
+    // and same fix as `Alert`, which is the sibling surface (FUT-1458).
+    '&:focus-visible': {
+      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: `${FOCUS.offset}px`,
     },
 
     ...bannerPartStyles(theme, colorPalette),
@@ -125,9 +137,11 @@ const buildActionSx = (
       backgroundColor: palette.main,
       color: theme.palette.getContrastText(palette.main),
 
+      // Colour only. The banner itself moves nothing under a pointer, and an
+      // action that lifts inside one that does not is the inconsistency a
+      // reader notices without being able to name it (FUT-1458).
       '&:hover': {
         backgroundColor: palette.dark || palette.main,
-        transform: 'translateY(-1px)',
       },
     }),
 
@@ -138,7 +152,6 @@ const buildActionSx = (
       '&:hover': {
         backgroundColor: alpha(palette.main, 0.1),
         borderColor: palette.main,
-        transform: 'translateY(-1px)',
       },
     }),
   };