@12-apps/ui 6.24.2 → 6.24.3

package/NATIVE.md

@@ -84,7 +84,7 @@ Ported: **27 of 141** public subpaths carry a `react-native` condition.
 
 | subpath | shared stories run natively | skipped (`native-skip`) | known gaps |
 |---|---|---|---|
-| `@12-apps/ui/data-display/Alert` | 41 | 2 | `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.; 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. |
+| `@12-apps/ui/data-display/Alert` | 41 | 2 | `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 (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. |
 | `@12-apps/ui/data-display/Avatar` | 45 | 1 | Hover has no touch equivalent: the interactive lift (`scale(1.1) translateY(-2px)`, the `0 8px 20px` shadow and the brightness), the `:active` squeeze and the `:focus-visible` ring are all web-only. The avatar still reports itself as a button and takes a tab stop.; The shimmer that runs across a loading avatar is a moving gradient; React Native core has neither, so the box keeps its accent and only the overlay and its spinner say it is loading. `backdrop-filter: blur(2px)` behind that overlay has no equivalent either — the wash is the flat `alpha(paper, 0.7)`.; `glow` paints the halo but not the `brightness(1.05)` filter that goes with it; React Native has no filters.; `pulse` is a ring behind the avatar scaling out to 10px and fading, rather than MUI's growing `box-shadow` on an `::after` — the same colour, cadence and travel, drawn by a sibling.; The status dot is a bordered circle placed at MUI's `overlap="circular"` inset; MUI's `Badge` additionally draws a `::after` ripple layer over it.; `AvatarGroup` overlaps and counts exactly as the web does, but the web ALSO gives every child a paper ring through a `& > *` descendant rule. A native renderer cannot restyle children, so an avatar in a group takes `bordered` from its own prop.; The default and broken-image glyphs are the house `Icon` at 24px, which is what MUI's `SvgIcon` draws them at here; the initials are set in the theme's own font rather than MUI's `Avatar` typography. |
 | `@12-apps/ui/data-display/Badge` | 55 | 1 | `gradient` paints the 135° run's first stop flat and `glass` keeps its 10% wash and 20% hairline without the `blur(10px) saturate(200%)` backdrop or the inset white highlight — React Native has no gradient fill, no backdrop filter and no inset shadow.; `shimmer` is a gradient sweeping across a pseudo-element and is not drawn at all; the chip keeps its variant's paint.; `glow` draws the 15px halo but not the `brightness(1.1)` filter beside it, and `glow` WITH `pulse` breathes only the scale and the opacity — the halo itself cannot be animated, because a box shadow is not an animatable style there.; Hover has no touch equivalent: the chip's `scale(1.1)` under the pointer and the glow's brighter hover halo are web-only.; `count` is drawn as a pill (`height / 2`); MUI asks for `border-radius: 50%`, which on a chip wider than it is tall is an ellipse React Native cannot express.; MUI's `transition: all 0.3s` on the chip has no equivalent: a colour or size change is drawn immediately. The mount, pulse and close animations are `Animated` and do run.; `onClick` on the badge reaches the DOM through react-native-web and fires there, as it does on the web; a device has no click, so a shared screen that needs a press should put one on its own child. |
 | `@12-apps/ui/data-display/Chip` | 25 | 0 | Hover has no touch equivalent, so a press stands in for it: the chip takes MUI's hover wash (`palette[color].dark` filled, `alpha(main, 0.04)` outlined) while pressed, but not this package's own 1px lift or the `0 4px 12px` shadow under it, which are `:hover`-only.; The keyboard contract — Enter and Space activate, Delete and Backspace remove — is shared (`chipKeyAction`) and answered under react-native-web, half by its `Pressable` and half by the chip's own handler. On a DEVICE none of it runs: React Native delivers no key events to a `View`, so a chip there is pressed and removed by touch.; MUI restyles the leading icon ELEMENT through a class — 24px, 18px when small, and `inherit` ink on a coloured chip. A native renderer cannot restyle an arbitrary node, so the slot carries MUI's margins and the glyph keeps the size and colour it was given.; An `avatarSrc` is drawn as a round `Image` at MUI's 24px (18px small) box; MUI's own `Avatar` additionally shows an initials fallback and repaints itself in `primary.dark`/`secondary.dark` for those two colours.; MUI's `transition: background-color, box-shadow` and this package's `all 0.2s cubic-bezier(0.4, 0, 0.2, 1)` have no equivalent: a colour change is drawn immediately.; A keyboard activation (Space on a selectable chip, Delete on a deletable one) fires `onClick` and `onDelete` but not `onPress`: it only exists under react-native-web, where the chip synthesizes the activation `Pressable` will not, and so has no `GestureResponderEvent` to pass. A press on a device fires both. |

package/dist/_internal/components/data-display/Alert/Alert.js

@@ -1,9 +1,10 @@
 import {
+  ALERT_ONLY_PROPS,
   Alert
-} from "../../../../chunk-QFVFHIHE.js";
-import "../../../../chunk-E27Y7FF2.js";
-import "../../../../chunk-B2Y3BABA.js";
+} from "../../../../chunk-WNMYWQ7D.js";
+import "../../../../chunk-57Z2ND3N.js";
 import "../../../../chunk-N3QUEBNS.js";
+import "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-NQN5Z36J.js";
 import "../../../../chunk-AG66JBNH.js";
@@ -11,6 +12,7 @@ import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
+  ALERT_ONLY_PROPS,
   Alert
 };
 //# sourceMappingURL=Alert.js.map

package/dist/_internal/components/data-display/Alert/Alert.metrics.js

@@ -33,7 +33,7 @@ import {
   gradientSurface,
   seconds,
   semanticSurface
-} from "../../../../chunk-B2Y3BABA.js";
+} from "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-NQN5Z36J.js";
 import "../../../../chunk-AG66JBNH.js";
 import "../../../../chunk-6JAIFIPW.js";

package/dist/_internal/components/data-display/Alert/Alert.styles.js

@@ -8,9 +8,9 @@ import {
   iconRotate,
   pulseAnimation,
   shimmerAnimation
-} from "../../../../chunk-E27Y7FF2.js";
-import "../../../../chunk-B2Y3BABA.js";
+} from "../../../../chunk-57Z2ND3N.js";
 import "../../../../chunk-N3QUEBNS.js";
+import "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-NQN5Z36J.js";
 import "../../../../chunk-AG66JBNH.js";
 import "../../../../chunk-6JAIFIPW.js";

package/dist/_internal/components/data-display/Banner/Banner.js

@@ -1,7 +1,12 @@
 import {
   Banner
-} from "../../../../chunk-7L6LAVJ7.js";
-import "../../../../chunk-2YEZONLX.js";
+} from "../../../../chunk-4IVDVZZ2.js";
+import "../../../../chunk-M4LFDGI6.js";
+import "../../../../chunk-TXKZEKJN.js";
+import "../../../../chunk-NQN5Z36J.js";
+import "../../../../chunk-AG66JBNH.js";
+import "../../../../chunk-6JAIFIPW.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   Banner

package/dist/_internal/components/data-display/Banner/Banner.styles.js

@@ -1,11 +1,20 @@
 import {
+  BANNER_TINT_S,
   bannerPartStyles,
+  bannerPointerStates,
   fadeInSlide,
   getVariantColor
-} from "../../../../chunk-2YEZONLX.js";
+} from "../../../../chunk-M4LFDGI6.js";
+import "../../../../chunk-TXKZEKJN.js";
+import "../../../../chunk-NQN5Z36J.js";
+import "../../../../chunk-AG66JBNH.js";
+import "../../../../chunk-6JAIFIPW.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
+  BANNER_TINT_S,
   bannerPartStyles,
+  bannerPointerStates,
   fadeInSlide,
   getVariantColor
 };

package/dist/_internal/components/data-display/CardKit/card-actions-context.js

@@ -2,12 +2,12 @@
 import {
   CardActionsProvider,
   useCardActions
-} from "../../../../chunk-O3336DJ6.js";
+} from "../../../../chunk-SYJMI2NP.js";
 import "../../../../chunk-NUGT7LMR.js";
-import "../../../../chunk-QFVFHIHE.js";
-import "../../../../chunk-E27Y7FF2.js";
-import "../../../../chunk-B2Y3BABA.js";
+import "../../../../chunk-WNMYWQ7D.js";
+import "../../../../chunk-57Z2ND3N.js";
 import "../../../../chunk-N3QUEBNS.js";
+import "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-NQN5Z36J.js";
 import "../../../../chunk-AG66JBNH.js";

package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useRemoveConfirm
-} from "../../../../chunk-PRUSQQDT.js";
-import "../../../../chunk-O3336DJ6.js";
+} from "../../../../chunk-KM5O4ICK.js";
+import "../../../../chunk-SYJMI2NP.js";
 import "../../../../chunk-XCBQXSTR.js";
 import "../../../../chunk-NWNSUHEB.js";
 import "../../../../chunk-HJOABXKN.js";
@@ -10,12 +10,12 @@ import "../../../../chunk-3P4THDBM.js";
 import "../../../../chunk-QQS3GQYS.js";
 import "../../../../chunk-EMYESBIT.js";
 import "../../../../chunk-NUGT7LMR.js";
-import "../../../../chunk-QFVFHIHE.js";
-import "../../../../chunk-E27Y7FF2.js";
-import "../../../../chunk-B2Y3BABA.js";
+import "../../../../chunk-WNMYWQ7D.js";
+import "../../../../chunk-57Z2ND3N.js";
 import "../../../../chunk-N3QUEBNS.js";
 import "../../../../chunk-2IBFEHIX.js";
 import "../../../../chunk-BWB2MVWP.js";
+import "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-BA4RHQ3B.js";
 import "../../../../chunk-YTOYMJPM.js";
 import "../../../../chunk-JT6TERQL.js";

package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   DataViewsTableBase
-} from "../../../../chunk-DI7HGYPX.js";
+} from "../../../../chunk-JPV45AD6.js";
 import "../../../../chunk-4X4KM4ZB.js";
 import "../../../../chunk-QX2PLXQA.js";
 import "../../../../chunk-ZOLAYP2D.js";
@@ -39,7 +39,7 @@ import "../../../../chunk-SNR537TI.js";
 import "../../../../chunk-XUJG2HFW.js";
 import "../../../../chunk-ZPIMPOHV.js";
 import "../../../../chunk-O6AZDQJJ.js";
-import "../../../../chunk-U2YJCNRU.js";
+import "../../../../chunk-4T7TXRGM.js";
 import "../../../../chunk-CHPZTF34.js";
 import "../../../../chunk-6JGPPTLX.js";
 import "../../../../chunk-5M4TYFR3.js";
@@ -139,12 +139,12 @@ import "../../../../chunk-KZLLTOB2.js";
 import "../../../../chunk-E5LWJDI3.js";
 import "../../../../chunk-G3E66C6J.js";
 import "../../../../chunk-NUGT7LMR.js";
-import "../../../../chunk-QFVFHIHE.js";
-import "../../../../chunk-E27Y7FF2.js";
-import "../../../../chunk-B2Y3BABA.js";
+import "../../../../chunk-WNMYWQ7D.js";
+import "../../../../chunk-57Z2ND3N.js";
 import "../../../../chunk-N3QUEBNS.js";
 import "../../../../chunk-2IBFEHIX.js";
 import "../../../../chunk-BWB2MVWP.js";
+import "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-6DPAWXZ3.js";
 import "../../../../chunk-WEBEOBN5.js";
 import "../../../../chunk-VUHLNYAE.js";

package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js

@@ -3,7 +3,7 @@ import {
   ViewDialogs,
   ViewMutationErrorAlert,
   ViewsMenuSlot
-} from "../../../../chunk-U2YJCNRU.js";
+} from "../../../../chunk-4T7TXRGM.js";
 import "../../../../chunk-CHPZTF34.js";
 import "../../../../chunk-6JGPPTLX.js";
 import "../../../../chunk-5M4TYFR3.js";
@@ -43,12 +43,12 @@ import "../../../../chunk-5KEMPCW4.js";
 import "../../../../chunk-VM3HRSAU.js";
 import "../../../../chunk-GYXUCS37.js";
 import "../../../../chunk-NUGT7LMR.js";
-import "../../../../chunk-QFVFHIHE.js";
-import "../../../../chunk-E27Y7FF2.js";
-import "../../../../chunk-B2Y3BABA.js";
+import "../../../../chunk-WNMYWQ7D.js";
+import "../../../../chunk-57Z2ND3N.js";
 import "../../../../chunk-N3QUEBNS.js";
 import "../../../../chunk-2IBFEHIX.js";
 import "../../../../chunk-BWB2MVWP.js";
+import "../../../../chunk-TXKZEKJN.js";
 import "../../../../chunk-6DPAWXZ3.js";
 import "../../../../chunk-WEBEOBN5.js";
 import "../../../../chunk-VUHLNYAE.js";

package/dist/_internal/components/data-display/index.js

@@ -191,9 +191,8 @@ import "../../../chunk-MWFSIB6K.js";
 import "../../../chunk-NUGT7LMR.js";
 import {
   Alert
-} from "../../../chunk-QFVFHIHE.js";
-import "../../../chunk-E27Y7FF2.js";
-import "../../../chunk-B2Y3BABA.js";
+} from "../../../chunk-WNMYWQ7D.js";
+import "../../../chunk-57Z2ND3N.js";
 import "../../../chunk-N3QUEBNS.js";
 import "../../../chunk-2IBFEHIX.js";
 import {
@@ -210,8 +209,9 @@ import "../../../chunk-HI2OFZSZ.js";
 import "../../../chunk-KVEHH4SA.js";
 import {
   Banner
-} from "../../../chunk-7L6LAVJ7.js";
-import "../../../chunk-2YEZONLX.js";
+} from "../../../chunk-4IVDVZZ2.js";
+import "../../../chunk-M4LFDGI6.js";
+import "../../../chunk-TXKZEKJN.js";
 import "../../../chunk-5KLSLD72.js";
 import {
   SpecChart

package/dist/_internal/components/index.js

@@ -695,9 +695,8 @@ import "../../chunk-MWFSIB6K.js";
 import "../../chunk-NUGT7LMR.js";
 import {
   Alert
-} from "../../chunk-QFVFHIHE.js";
-import "../../chunk-E27Y7FF2.js";
-import "../../chunk-B2Y3BABA.js";
+} from "../../chunk-WNMYWQ7D.js";
+import "../../chunk-57Z2ND3N.js";
 import "../../chunk-N3QUEBNS.js";
 import "../../chunk-2IBFEHIX.js";
 import {
@@ -714,8 +713,9 @@ import "../../chunk-HI2OFZSZ.js";
 import "../../chunk-KVEHH4SA.js";
 import {
   Banner
-} from "../../chunk-7L6LAVJ7.js";
-import "../../chunk-2YEZONLX.js";
+} from "../../chunk-4IVDVZZ2.js";
+import "../../chunk-M4LFDGI6.js";
+import "../../chunk-TXKZEKJN.js";
 import "../../chunk-RTSK5OZT.js";
 import "../../chunk-5KLSLD72.js";
 import {

package/dist/{chunk-7L6LAVJ7.js → chunk-4IVDVZZ2.js}

@@ -1,8 +1,13 @@
 import {
+  BANNER_TINT_S,
   bannerPartStyles,
+  bannerPointerStates,
   fadeInSlide,
   getVariantColor
-} from "./chunk-2YEZONLX.js";
+} from "./chunk-M4LFDGI6.js";
+import {
+  FOCUS
+} from "./chunk-TXKZEKJN.js";
 
 // src/components/data-display/Banner/Banner.tsx
 import CheckCircle from "@mui/icons-material/CheckCircle";
@@ -37,11 +42,19 @@ var 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),
     // Responsive layout
@@ -97,9 +110,11 @@ var buildActionSx = (theme, variant, actionVariant) => {
     ...actionVariant === "primary" && {
       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)"
+        backgroundColor: palette.dark || palette.main
       }
     },
     ...actionVariant === "secondary" && {
@@ -107,8 +122,7 @@ var buildActionSx = (theme, variant, actionVariant) => {
       color: palette.main,
       "&:hover": {
         backgroundColor: alpha(palette.main, 0.1),
-        borderColor: palette.main,
-        transform: "translateY(-1px)"
+        borderColor: palette.main
       }
     }
   };
@@ -246,4 +260,4 @@ Banner.displayName = "Banner";
 export {
   Banner
 };
-//# sourceMappingURL=chunk-7L6LAVJ7.js.map
+//# sourceMappingURL=chunk-4IVDVZZ2.js.map

package/dist/chunk-4IVDVZZ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Banner/Banner.tsx"],"sourcesContent":["import CheckCircle from '@mui/icons-material/CheckCircle';\nimport Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Warning from '@mui/icons-material/Warning';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';\nimport { FOCUS } from '../Alert/Alert.metrics';\nimport type { BannerProps, BannerVariant } from './Banner.types';\n\n\n\nconst StyledBanner = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'sticky', 'fullWidth'].includes(prop as string),\n})<{\n  variant: BannerVariant;\n  sticky: boolean;\n  fullWidth: boolean;\n}>(({ theme, variant, sticky, fullWidth }) => {\n\n  const colorPalette = getVariantColor(theme, variant);\n\n  return {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(1.5),\n    padding: theme.spacing(1.5, 2),\n    borderRadius: theme.spacing(1),\n    backgroundColor: alpha(colorPalette.main, 0.1),\n    border: `1px solid ${alpha(colorPalette.main, 0.2)}`,\n    color: colorPalette.main,\n    position: sticky ? 'sticky' : 'relative',\n    top: sticky ? 0 : 'auto',\n    zIndex: sticky ? theme.zIndex.appBar : 'auto',\n    width: fullWidth ? '100vw' : '100%',\n    marginLeft: fullWidth ? '50%' : 0,\n    transform: fullWidth ? 'translateX(-50%)' : 'none',\n    animation: `${fadeInSlide} 0.3s ease-out`,\n    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)`,\n\n    ...bannerPointerStates(theme),\n\n    // Focus: `:focus-visible`, not `:focus-within`.\n    //\n    // The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and\n    // painted this ring — a keyboard affordance answering a pointer, which is\n    // what made clicking one look like an error state. `:focus-visible` is the\n    // browser's own answer to whether the focus came from the keyboard: the\n    // ring stays for whoever tabs here and never fires on a click. Same defect\n    // and same fix as `Alert`, which is the sibling surface (FUT-1458).\n    '&:focus-visible': {\n      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n      outlineOffset: `${FOCUS.offset}px`,\n    },\n\n    ...bannerPartStyles(theme, colorPalette),\n\n    // Responsive layout\n    [theme.breakpoints.down('sm')]: {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(1),\n      \n      '.banner-content': {\n        order: 1,\n      },\n\n      '.banner-actions': {\n        order: 2,\n        justifyContent: 'flex-start',\n        marginTop: theme.spacing(1),\n        marginLeft: 0,\n      },\n    },\n\n    // Glass effect variant (optional enhancement)\n    '&.banner-glass': {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      color: theme.palette.text.primary,\n      \n      '.banner-icon': {\n        color: colorPalette.main,\n      },\n    },\n  };\n});\n\nconst getVariantIcon = (variant: BannerVariant) => {\n  const iconMap: Record<BannerVariant, React.ReactNode> = {\n    info: <Info />,\n    success: <CheckCircle />,\n    warning: <Warning />,\n    critical: <Error />,\n  };\n  return iconMap[variant];\n};\n\ntype BannerAction = NonNullable<BannerProps['actions']>[number];\n\n// Warnings and criticals interrupt the screen reader; the rest are announced\n// politely when it next pauses.\nconst resolveAriaAnnouncement = (variant: BannerVariant) => ({\n  role: variant === 'warning' || variant === 'critical' ? 'alert' : 'status',\n  live: (variant === 'critical' ? 'assertive' : 'polite') as 'assertive' | 'polite',\n});\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : `banner-${suffix}`;\n\n// Resolves the banner's palette once, rather than per property as the inline\n// version did — getVariantColor was being called nine times to build one button.\nconst buildActionSx = (\n  theme: Theme,\n  variant: BannerVariant,\n  actionVariant: BannerAction['variant'],\n) => {\n  const palette = getVariantColor(theme, variant);\n\n  return {\n    minWidth: 'auto',\n    px: 1.5,\n    py: 0.5,\n    fontSize: '0.8125rem',\n    fontWeight: 500,\n    borderRadius: 1,\n\n    ...(actionVariant === 'primary' && {\n      backgroundColor: palette.main,\n      color: theme.palette.getContrastText(palette.main),\n\n      // Colour only. The banner itself moves nothing under a pointer, and an\n      // action that lifts inside one that does not is the inconsistency a\n      // reader notices without being able to name it (FUT-1458).\n      '&:hover': {\n        backgroundColor: palette.dark || palette.main,\n      },\n    }),\n\n    ...(actionVariant === 'secondary' && {\n      borderColor: palette.main,\n      color: palette.main,\n\n      '&:hover': {\n        backgroundColor: alpha(palette.main, 0.1),\n        borderColor: palette.main,\n      },\n    }),\n  };\n};\n\nconst BannerActionButton: React.FC<{\n  action: BannerAction;\n  variant: BannerVariant;\n  dataTestId?: string;\n}> = ({ action, variant, dataTestId }) => (\n  <Button\n    size=\"small\"\n    variant={action.variant === 'primary' ? 'contained' : 'outlined'}\n    onClick={action.onClick}\n    data-testid={testIdFor(dataTestId, 'action')}\n    sx={(theme) => buildActionSx(theme, variant, action.variant)}\n  >\n    {action.label}\n  </Button>\n);\n\nconst BannerBody: React.FC<{\n  displayIcon: React.ReactNode;\n  title?: BannerProps['title'];\n  description?: BannerProps['description'];\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ displayIcon, title, description, dataTestId, children }) => (\n  <>\n    {displayIcon && (\n      <Box className=\"banner-icon\" aria-hidden=\"true\" data-testid={testIdFor(dataTestId, 'icon')}>\n        {displayIcon}\n      </Box>\n    )}\n\n    <Box className=\"banner-content\">\n      {title && (\n        <Typography\n          className=\"banner-title\"\n          variant=\"subtitle2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'title')}\n        >\n          {title}\n        </Typography>\n      )}\n      {description && (\n        <Typography\n          className=\"banner-description\"\n          variant=\"body2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'message')}\n        >\n          {description}\n        </Typography>\n      )}\n      {children}\n    </Box>\n  </>\n);\n\nconst BannerTrailing: React.FC<{\n  actions?: BannerProps['actions'];\n  variant: BannerVariant;\n  dismissible: boolean;\n  onDismissClick: () => void;\n  dismissLabel: string;\n  dataTestId?: string;\n}> = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => (\n  <Box display=\"flex\" alignItems=\"center\" gap={1}>\n    {actions && actions.length > 0 && (\n      <Box className=\"banner-actions\">\n        {actions.map((action, index) => (\n          <BannerActionButton\n            key={index}\n            action={action}\n            variant={variant}\n            dataTestId={dataTestId}\n          />\n        ))}\n      </Box>\n    )}\n\n    {dismissible && (\n      <IconButton\n        className=\"banner-dismiss\"\n        size=\"small\"\n        onClick={onDismissClick}\n        aria-label={dismissLabel}\n        data-testid={testIdFor(dataTestId, 'close')}\n        sx={{ transition: 'all 0.2s ease' }}\n      >\n        <Close fontSize=\"small\" />\n      </IconButton>\n    )}\n  </Box>\n);\n\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  (\n    {\n      variant = 'info',\n      title,\n      description,\n      icon,\n      dismissible = false,\n      dismissLabel,\n      onDismiss,\n      actions,\n      sticky = false,\n      fullWidth = false,\n      className,\n      children,\n      'data-testid': dataTestId = 'banner',\n      ...props\n    },\n    ref,\n  ) => {\n    const [visible, setVisible] = React.useState(true);\n\n    const handleDismiss = React.useCallback(() => {\n      setVisible(false);\n      onDismiss?.();\n    }, [onDismiss]);\n\n    const displayIcon = icon || getVariantIcon(variant);\n\n    const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);\n\n    if (!visible) {\n      return null;\n    }\n\n    return (\n      <StyledBanner\n        ref={ref}\n        variant={variant}\n        sticky={sticky}\n        fullWidth={fullWidth}\n        className={className}\n        role={ariaRole}\n        aria-live={ariaLive}\n        aria-atomic=\"true\"\n        tabIndex={0}\n        data-testid={dataTestId}\n        {...props}\n      >\n        <BannerBody\n          displayIcon={displayIcon}\n          title={title}\n          description={description}\n          dataTestId={dataTestId}\n        >\n          {children}\n        </BannerBody>\n\n        <BannerTrailing\n          actions={actions}\n          variant={variant}\n          dismissible={dismissible}\n          onDismissClick={handleDismiss}\n          dismissLabel={dismissLabel}\n          dataTestId={dataTestId}\n        />\n      </StyledBanner>\n    );\n  },\n);\n\nBanner.displayName = 'Banner';"],"mappings":"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","names":[]}

package/dist/{chunk-U2YJCNRU.js → chunk-4T7TXRGM.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-EFEZWG4C.js";
 import {
   Alert
-} from "./chunk-QFVFHIHE.js";
+} from "./chunk-WNMYWQ7D.js";
 
 // src/components/data-display/DataViews/data-views-table-parts.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -121,4 +121,4 @@ export {
   ViewsMenuSlot,
   ViewDialogs
 };
-//# sourceMappingURL=chunk-U2YJCNRU.js.map
+//# sourceMappingURL=chunk-4T7TXRGM.js.map

package/dist/{chunk-E27Y7FF2.js → chunk-57Z2ND3N.js}

@@ -1,3 +1,6 @@
+import {
+  VARIANT_ICON
+} from "./chunk-N3QUEBNS.js";
 import {
   ACTION_SLOT,
   ALERT_EASING,
@@ -18,10 +21,7 @@ import {
   SEMANTIC_SURFACE,
   SEMANTIC_VARIANTS,
   seconds
-} from "./chunk-B2Y3BABA.js";
-import {
-  VARIANT_ICON
-} from "./chunk-N3QUEBNS.js";
+} from "./chunk-TXKZEKJN.js";
 import {
   px
 } from "./chunk-NQN5Z36J.js";
@@ -216,15 +216,14 @@ var alertVariantStyles = (theme, customVariant, colorPalette) => ({
       height: "100%",
       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})`
     }
   }
 });
 var glowStyles = (colorPalette) => ({
-  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})`
 });
 var pulseAfter = (colorPalette) => ({
@@ -267,4 +266,4 @@ export {
   alertVariantStyles,
   alertEmphasisStyles
 };
-//# sourceMappingURL=chunk-E27Y7FF2.js.map
+//# sourceMappingURL=chunk-57Z2ND3N.js.map

package/dist/{chunk-E27Y7FF2.js.map → chunk-57Z2ND3N.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { AlertVariant } from './Alert.base';\nimport { VARIANT_ICON } from './Alert.helpers';\nimport {\n  ACTION_SLOT,\n  ALERT_EASING,\n  ALERT_PADDING_UNITS,\n  ALERT_TRANSITION_MS,\n  type AlertPalette,\n  FADE_IN,\n  GLASS,\n  GLOW,\n  GRADIENT,\n  ICON_SLOT,\n  ICON_SPIN,\n  MESSAGE_BUTTON,\n  MESSAGE_FONT_SIZE,\n  MESSAGE_GAP_UNITS,\n  MESSAGE_LINE_HEIGHT,\n  NEUTRAL_GREY,\n  PULSE,\n  seconds,\n  SEMANTIC_SURFACE,\n  SEMANTIC_VARIANTS,\n} from './Alert.metrics';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { px } from '../../../tokens/theme';\n\nexport type { AlertPalette } from './Alert.metrics';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${PULSE.spread}px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n//   from {\n//     transform: translateX(-100%);\n//     opacity: 0;\n//   }\n//   to {\n//     transform: translateX(0);\n//     opacity: 1;\n//   }\n// `;\n\n// const bounceIn = keyframes`\n//   0% {\n//     transform: scale(0.3);\n//     opacity: 0;\n//   }\n//   50% {\n//     transform: scale(1.05);\n//   }\n//   70% {\n//     transform: scale(0.9);\n//   }\n//   100% {\n//     transform: scale(1);\n//     opacity: 1;\n//   }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -${GRADIENT.shimmerTravel}px 0;\n  }\n  100% {\n    background-position: ${GRADIENT.shimmerTravel}px 0;\n  }\n`;\n\nexport const fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n`;\n\nexport const iconRotate = keyframes`\n  0% {\n    transform: rotate(0deg) scale(${ICON_SPIN.from});\n  }\n  50% {\n    transform: rotate(180deg) scale(${ICON_SPIN.mid});\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\n// The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,\n// same three greys for `neutral`, same fallback to `info`.\nexport const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {\n  const colorMap: Record<string, AlertPalette> = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    danger: theme.palette.error,\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    neutral: {\n      main: theme.palette.grey[NEUTRAL_GREY.main] || '#9E9E9E',\n      light: theme.palette.grey[NEUTRAL_GREY.light] || '#E0E0E0',\n      dark: theme.palette.grey[NEUTRAL_GREY.dark] || '#616161',\n    },\n  };\n\n  return colorMap[variant] || theme.palette.info;\n};\n\n/** The shared glyph names drawn with MUI's icons; the native side draws the same names from the icon set. */\nconst VARIANT_ICONS: Partial<Record<IconName, React.ReactNode>> = {\n  Info: <Info />,\n  CheckCircle: <CheckCircle />,\n  Warning: <Warning />,\n  Error: <Error />,\n};\n\nexport const getVariantIcon = (variant: string): React.ReactNode => {\n  const name = VARIANT_ICON[variant as AlertVariant];\n  return name ? VARIANT_ICONS[name] : undefined;\n};\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  animate: boolean | undefined,\n): CSSObject => ({\n  // ROOM TO READ.\n  //\n  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n  // routinely carries three things stacked — a sentence, a smaller explanation,\n  // then a control — and at 6px they touched top and bottom and ran together\n  // vertically, so the whole card read as one dense block instead of as a\n  // message with parts. The generosity is what makes the structure legible; it\n  // is not decoration.\n  //\n  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n  // it tight), because this is a default rather than a rule.\n  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),\n\n  '.MuiAlert-message': {\n    display: 'flex',\n    flexDirection: 'column',\n    // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n    // spacing bug rather than as a group. 1 separates the lines; the extra\n    // margin below goes to whatever CONTROL sits at the end, because the gap\n    // between prose and a thing you press has to be bigger than the gap between\n    // two lines of prose or the button looks like part of the text.\n    gap: theme.spacing(MESSAGE_GAP_UNITS),\n    fontSize: px(MESSAGE_FONT_SIZE),\n    lineHeight: MESSAGE_LINE_HEIGHT,\n    // No padding of its own — the root's is now doing that job, and MUI's\n    // default `8px 0` on top of it would double the vertical space.\n    padding: 0,\n    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n    //\n    // `ghost` and `text` paint no background and no border — bare labels, which\n    // works on white where the surrounding page is obviously not clickable.\n    // Inside a coloured Alert it stops working: the label is one more coloured\n    // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n    // part of the prose.\n    //\n    // Only the BORDER is set, never the background or the colour, and that is\n    // what makes it safe to apply to every button rather than just the bare\n    // ones: a `solid` keeps its fill and its light label and gains a hairline\n    // in the same hue, while a `ghost` gains the whole affordance.\n    '.MuiButton-root': {\n      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),\n      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`,\n    },\n  },\n\n  '.MuiAlert-icon': {\n    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,\n    alignItems: 'center',\n    // Clear of the words rather than nearly touching them, and aligned to the\n    // FIRST line instead of centred on the whole block — an icon floating\n    // halfway down a three-line message points at nothing.\n    alignSelf: 'flex-start',\n    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : 'none',\n  },\n\n  // The close button, kept off the text it sits beside.\n  '.MuiAlert-action': {\n    alignItems: 'flex-start',\n    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n  },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n *\n * The ratios live in `Alert.metrics.ts` (`SEMANTIC_SURFACE`), where the\n * native renderer reads the same three through the same colour arithmetic.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n  const dark = theme.palette.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark\n      ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink)\n      : darken(colorPalette.main, SEMANTIC_SURFACE.ink),\n    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,\n    '.MuiAlert-icon': {\n      color: colorPalette.main,\n    },\n  };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: AlertPalette,\n): CSSObject => ({\n  ...(customVariant !== undefined &&\n    SEMANTIC_VARIANTS.has(customVariant as AlertVariant) &&\n    semanticSurface(theme, colorPalette)),\n\n  ...(customVariant === 'glass' && {\n    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n    // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n    // be mostly pane — the backdrop should be legible AS texture behind the\n    // text, never as competition with it.\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n    WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n    border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,\n    color: theme.palette.text.primary,\n    '.MuiAlert-icon': {\n      color: theme.palette.primary.main,\n    },\n    // Safari before 18 and Firefox with the filter disabled paint the declared\n    // alpha with nothing blurred behind it — the see-through banner this is\n    // fixing. There is no degraded frost to fall back to, so it falls back to an\n    // opaque pane: less pretty, still readable.\n    '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n      backgroundColor: theme.palette.background.paper,\n    },\n  }),\n\n  ...(customVariant === 'gradient' && {\n    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,\n    color: theme.palette.getContrastText(colorPalette.main),\n    border: 'none',\n    position: 'relative',\n    overflow: 'hidden',\n    '.MuiAlert-icon': {\n      color: theme.palette.getContrastText(colorPalette.main),\n    },\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: `-${GRADIENT.shimmerTravel}px`,\n      width: '100%',\n      height: '100%',\n      background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,\n      animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,\n    },\n    '&:hover': {\n      filter: `brightness(${GRADIENT.hoverBrightness})`,\n      transform: `translateY(-${GRADIENT.hoverLift}px) scale(${GRADIENT.hoverScale})`,\n    },\n  }),\n});\n\n/** The web's glow: a soft shadow of the hue and a touch of brightness. */\nconst glowStyles = (colorPalette: AlertPalette): CSSObject => ({\n  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)} !important`,\n  filter: `brightness(${GLOW.brightness})`,\n});\n\n/** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */\nconst pulseAfter = (colorPalette: AlertPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  borderRadius: 'inherit',\n  backgroundColor: colorPalette.main,\n  opacity: PULSE.alpha,\n  animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,\n  pointerEvents: 'none',\n  zIndex: -1,\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case. Declaration ORDER is kept as it has always\n// been, because emotion hashes the serialised block into the class name.\nexport const alertEmphasisStyles = (\n  colorPalette: AlertPalette,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && !pulse && glowStyles(colorPalette)),\n\n  // Pulse animation\n  ...(pulse &&\n    !glow && {\n      position: 'relative',\n      '&::after': pulseAfter(colorPalette),\n    }),\n\n  // Both glow and pulse\n  ...(glow &&\n    pulse && {\n      position: 'relative',\n      ...glowStyles(colorPalette),\n      '&::after': pulseAfter(colorPalette),\n    }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { AlertVariant } from './Alert.base';\nimport { VARIANT_ICON } from './Alert.helpers';\nimport {\n  ACTION_SLOT,\n  ALERT_EASING,\n  ALERT_PADDING_UNITS,\n  ALERT_TRANSITION_MS,\n  type AlertPalette,\n  FADE_IN,\n  GLASS,\n  GLOW,\n  GRADIENT,\n  ICON_SLOT,\n  ICON_SPIN,\n  MESSAGE_BUTTON,\n  MESSAGE_FONT_SIZE,\n  MESSAGE_GAP_UNITS,\n  MESSAGE_LINE_HEIGHT,\n  NEUTRAL_GREY,\n  PULSE,\n  seconds,\n  SEMANTIC_SURFACE,\n  SEMANTIC_VARIANTS,\n} from './Alert.metrics';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { px } from '../../../tokens/theme';\n\nexport type { AlertPalette } from './Alert.metrics';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${PULSE.spread}px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n//   from {\n//     transform: translateX(-100%);\n//     opacity: 0;\n//   }\n//   to {\n//     transform: translateX(0);\n//     opacity: 1;\n//   }\n// `;\n\n// const bounceIn = keyframes`\n//   0% {\n//     transform: scale(0.3);\n//     opacity: 0;\n//   }\n//   50% {\n//     transform: scale(1.05);\n//   }\n//   70% {\n//     transform: scale(0.9);\n//   }\n//   100% {\n//     transform: scale(1);\n//     opacity: 1;\n//   }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -${GRADIENT.shimmerTravel}px 0;\n  }\n  100% {\n    background-position: ${GRADIENT.shimmerTravel}px 0;\n  }\n`;\n\nexport const fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n`;\n\nexport const iconRotate = keyframes`\n  0% {\n    transform: rotate(0deg) scale(${ICON_SPIN.from});\n  }\n  50% {\n    transform: rotate(180deg) scale(${ICON_SPIN.mid});\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\n// The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,\n// same three greys for `neutral`, same fallback to `info`.\nexport const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {\n  const colorMap: Record<string, AlertPalette> = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    danger: theme.palette.error,\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    neutral: {\n      main: theme.palette.grey[NEUTRAL_GREY.main] || '#9E9E9E',\n      light: theme.palette.grey[NEUTRAL_GREY.light] || '#E0E0E0',\n      dark: theme.palette.grey[NEUTRAL_GREY.dark] || '#616161',\n    },\n  };\n\n  return colorMap[variant] || theme.palette.info;\n};\n\n/** The shared glyph names drawn with MUI's icons; the native side draws the same names from the icon set. */\nconst VARIANT_ICONS: Partial<Record<IconName, React.ReactNode>> = {\n  Info: <Info />,\n  CheckCircle: <CheckCircle />,\n  Warning: <Warning />,\n  Error: <Error />,\n};\n\nexport const getVariantIcon = (variant: string): React.ReactNode => {\n  const name = VARIANT_ICON[variant as AlertVariant];\n  return name ? VARIANT_ICONS[name] : undefined;\n};\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  animate: boolean | undefined,\n): CSSObject => ({\n  // ROOM TO READ.\n  //\n  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n  // routinely carries three things stacked — a sentence, a smaller explanation,\n  // then a control — and at 6px they touched top and bottom and ran together\n  // vertically, so the whole card read as one dense block instead of as a\n  // message with parts. The generosity is what makes the structure legible; it\n  // is not decoration.\n  //\n  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n  // it tight), because this is a default rather than a rule.\n  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),\n\n  '.MuiAlert-message': {\n    display: 'flex',\n    flexDirection: 'column',\n    // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n    // spacing bug rather than as a group. 1 separates the lines; the extra\n    // margin below goes to whatever CONTROL sits at the end, because the gap\n    // between prose and a thing you press has to be bigger than the gap between\n    // two lines of prose or the button looks like part of the text.\n    gap: theme.spacing(MESSAGE_GAP_UNITS),\n    fontSize: px(MESSAGE_FONT_SIZE),\n    lineHeight: MESSAGE_LINE_HEIGHT,\n    // No padding of its own — the root's is now doing that job, and MUI's\n    // default `8px 0` on top of it would double the vertical space.\n    padding: 0,\n    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n    //\n    // `ghost` and `text` paint no background and no border — bare labels, which\n    // works on white where the surrounding page is obviously not clickable.\n    // Inside a coloured Alert it stops working: the label is one more coloured\n    // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n    // part of the prose.\n    //\n    // Only the BORDER is set, never the background or the colour, and that is\n    // what makes it safe to apply to every button rather than just the bare\n    // ones: a `solid` keeps its fill and its light label and gains a hairline\n    // in the same hue, while a `ghost` gains the whole affordance.\n    '.MuiButton-root': {\n      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),\n      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`,\n    },\n  },\n\n  '.MuiAlert-icon': {\n    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,\n    alignItems: 'center',\n    // Clear of the words rather than nearly touching them, and aligned to the\n    // FIRST line instead of centred on the whole block — an icon floating\n    // halfway down a three-line message points at nothing.\n    alignSelf: 'flex-start',\n    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : 'none',\n  },\n\n  // The close button, kept off the text it sits beside.\n  '.MuiAlert-action': {\n    alignItems: 'flex-start',\n    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n  },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n *\n * The ratios live in `Alert.metrics.ts` (`SEMANTIC_SURFACE`), where the\n * native renderer reads the same three through the same colour arithmetic.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n  const dark = theme.palette.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark\n      ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink)\n      : darken(colorPalette.main, SEMANTIC_SURFACE.ink),\n    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,\n    '.MuiAlert-icon': {\n      color: colorPalette.main,\n    },\n  };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: AlertPalette,\n): CSSObject => ({\n  ...(customVariant !== undefined &&\n    SEMANTIC_VARIANTS.has(customVariant as AlertVariant) &&\n    semanticSurface(theme, colorPalette)),\n\n  ...(customVariant === 'glass' && {\n    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n    // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n    // be mostly pane — the backdrop should be legible AS texture behind the\n    // text, never as competition with it.\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n    WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n    border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,\n    color: theme.palette.text.primary,\n    '.MuiAlert-icon': {\n      color: theme.palette.primary.main,\n    },\n    // Safari before 18 and Firefox with the filter disabled paint the declared\n    // alpha with nothing blurred behind it — the see-through banner this is\n    // fixing. There is no degraded frost to fall back to, so it falls back to an\n    // opaque pane: less pretty, still readable.\n    '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n      backgroundColor: theme.palette.background.paper,\n    },\n  }),\n\n  ...(customVariant === 'gradient' && {\n    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,\n    color: theme.palette.getContrastText(colorPalette.main),\n    border: 'none',\n    position: 'relative',\n    overflow: 'hidden',\n    '.MuiAlert-icon': {\n      color: theme.palette.getContrastText(colorPalette.main),\n    },\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: `-${GRADIENT.shimmerTravel}px`,\n      width: '100%',\n      height: '100%',\n      background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,\n      animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,\n    },\n  }),\n});\n\n/** The web's glow: a soft shadow of the hue and a touch of brightness. */\nconst glowStyles = (colorPalette: AlertPalette): CSSObject => ({\n  // No `!important`: the pointer states paint their tint as an INSET shadow on\n  // the same property, and compose this one alongside it rather than fighting\n  // it. `glowShadow` in `Alert.tsx` is the other half of that pair.\n  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,\n  filter: `brightness(${GLOW.brightness})`,\n});\n\n/** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */\nconst pulseAfter = (colorPalette: AlertPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  borderRadius: 'inherit',\n  backgroundColor: colorPalette.main,\n  opacity: PULSE.alpha,\n  animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,\n  pointerEvents: 'none',\n  zIndex: -1,\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case. Declaration ORDER is kept as it has always\n// been, because emotion hashes the serialised block into the class name.\nexport const alertEmphasisStyles = (\n  colorPalette: AlertPalette,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && !pulse && glowStyles(colorPalette)),\n\n  // Pulse animation\n  ...(pulse &&\n    !glow && {\n      position: 'relative',\n      '&::after': pulseAfter(colorPalette),\n    }),\n\n  // Both glow and pulse\n  ...(glow &&\n    pulse && {\n      position: 'relative',\n      ...glowStyles(colorPalette),\n      '&::after': pulseAfter(colorPalette),\n    }),\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-DI7HGYPX.js → chunk-JPV45AD6.js}

@@ -10,7 +10,7 @@ import {
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-U2YJCNRU.js";
+} from "./chunk-4T7TXRGM.js";
 import {
   useSavedViewsController
 } from "./chunk-HR7YTBR7.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-DI7HGYPX.js.map
+//# sourceMappingURL=chunk-JPV45AD6.js.map

package/dist/{chunk-PRUSQQDT.js → chunk-KM5O4ICK.js}

@@ -1,6 +1,6 @@
 import {
   useCardActions
-} from "./chunk-O3336DJ6.js";
+} from "./chunk-SYJMI2NP.js";
 import {
   ConfirmActionDialog
 } from "./chunk-QQS3GQYS.js";
@@ -50,4 +50,4 @@ function useRemoveConfirm({
 export {
   useRemoveConfirm
 };
-//# sourceMappingURL=chunk-PRUSQQDT.js.map
+//# sourceMappingURL=chunk-KM5O4ICK.js.map

package/dist/{chunk-2YEZONLX.js → chunk-M4LFDGI6.js}

@@ -1,3 +1,8 @@
+import {
+  ACTIVE,
+  HOVER
+} from "./chunk-TXKZEKJN.js";
+
 // src/components/data-display/Banner/Banner.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
 var fadeInSlide = keyframes`
@@ -91,22 +96,42 @@ var bannerPartStyles = (theme, colorPalette) => ({
     opacity: 0.7,
     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)"
+      backgroundColor: alpha(colorPalette.main, 0.1)
     },
-    "&:focus": {
+    "&:focus-visible": {
       opacity: 1,
       outline: `2px solid ${colorPalette.main}`,
       outlineOffset: "2px"
     }
   }
 });
+var tint = (theme, a) => `inset 0 0 0 100vmax ${alpha(theme.palette.mode === "light" ? "#000000" : "#ffffff", a)}`;
+var bannerPointerStates = (theme) => ({
+  "&: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"
+  }
+});
+var BANNER_TINT_S = ACTIVE.ms / 1e3;
 
 export {
   fadeInSlide,
   getVariantColor,
-  bannerPartStyles
+  bannerPartStyles,
+  bannerPointerStates,
+  BANNER_TINT_S
 };
-//# sourceMappingURL=chunk-2YEZONLX.js.map
+//# sourceMappingURL=chunk-M4LFDGI6.js.map