@12-apps/ui 6.24.2 → 6.24.4

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

package/dist/chunk-M4LFDGI6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Banner/Banner.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';\n\nimport type { BannerVariant } from './Banner.types';\nimport { ACTIVE, HOVER } from '../Alert/Alert.metrics';\n\n// Animations\nexport const fadeInSlide = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0.7;\n  }\n  70% {\n    box-shadow: 0 0 0 8px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const getVariantColor = (theme: Theme, variant: BannerVariant) => {\n  const colorMap = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    critical: theme.palette.error,\n  };\n  return colorMap[variant];\n};\n\nexport const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSObject => ({\n  // Icon container\n  '.banner-icon': {\n    flexShrink: 0,\n    marginTop: theme.spacing(0.25),\n    color: colorPalette.main,\n    fontSize: '1.25rem',\n    display: 'flex',\n    alignItems: 'center',\n    position: 'relative',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: -4,\n      borderRadius: '50%',\n      background: alpha(colorPalette.main, 0.1),\n      animation: `${pulseAnimation} 3s infinite`,\n    },\n  },\n\n  // Content area\n  '.banner-content': {\n    flex: 1,\n    minWidth: 0, // Prevents flex item overflow\n  },\n\n  // Title styles\n  '.banner-title': {\n    fontWeight: 600,\n    fontSize: '1rem',\n    lineHeight: 1.4,\n    marginBottom: theme.spacing(0.5),\n    color: colorPalette.dark || colorPalette.main,\n  },\n\n  // Description styles  \n  '.banner-description': {\n    fontSize: '0.875rem',\n    lineHeight: 1.5,\n    opacity: 0.9,\n    color: 'inherit',\n  },\n\n  // Actions area\n  '.banner-actions': {\n    display: 'flex',\n    flexShrink: 0,\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginTop: theme.spacing(1),\n\n    [theme.breakpoints.up('sm')]: {\n      marginTop: 0,\n      marginLeft: theme.spacing(2),\n    },\n  },\n\n  // Dismiss button\n  '.banner-dismiss': {\n    color: 'inherit',\n    opacity: 0.7,\n    marginLeft: theme.spacing(1),\n    flexShrink: 0,\n\n    // Opacity and a wash only: the dismiss used to spin 90deg, which drew the\n    // eye to the way out rather than to the message. Same fix as `Alert`'s\n    // close button, which is the sibling surface (FUT-1458).\n    '&:hover': {\n      opacity: 1,\n      backgroundColor: alpha(colorPalette.main, 0.1),\n    },\n\n    '&:focus-visible': {\n      opacity: 1,\n      outline: `2px solid ${colorPalette.main}`,\n      outlineOffset: '2px',\n    },\n  },\n});\n\n/**\n * The pointer states, from `Alert`'s own table.\n *\n * Banner had NO hover at all — measured ΔE76 0.00 on every variant in both\n * modes — so moving between the two surfaces gave feedback on one and silence\n * on the other. They are the same kind of thing and now answer a pointer the\n * same way.\n *\n * Neither block may declare `transition`: `:active` under a mouse always\n * implies `:hover`, so a shorthand here would outrank the root's and reset the\n * opacity fade the press is built on.\n */\n/** The same flat inset tint `Alert` paints; see `ACTIVE` for why it is a layer. */\nconst tint = (theme: Theme, a: number): string =>\n  `inset 0 0 0 100vmax ${alpha(theme.palette.mode === 'light' ? '#000000' : '#ffffff', a)}`;\n\nexport const bannerPointerStates = (theme: Theme): CSSObject => ({\n  '&:hover': {\n    boxShadow: tint(theme, HOVER.tintAlpha),\n  },\n\n  // The `:not(:has(…))` names CONTROLS, not any descendant: `:active` matches\n  // an ancestor of whatever is pressed, so without it pressing the dismiss or\n  // an action dimmed the message that owns it. Excluding `:has(:active)`\n  // wholesale does not work — pressing the TEXT makes that text `:active` too,\n  // so the guard matched on every press and the state never fired.\n  '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n    boxShadow: tint(theme, ACTIVE.tintAlpha),\n    transition: 'none',\n  },\n});\n\n/** The seconds the tint takes easing back, shared with `Alert`. */\nexport const BANNER_TINT_S = ACTIVE.ms / 1000;\n"],"mappings":";;;;;;AAAA,SAAS,OAAO,iBAAiB;AAO1B,IAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW3B,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAehB,IAAM,kBAAkB,CAAC,OAAc,YAA2B;AACvE,QAAM,WAAW;AAAA,IACf,MAAM,MAAM,QAAQ;AAAA,IACpB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,UAAU,MAAM,QAAQ;AAAA,EAC1B;AACA,SAAO,SAAS,OAAO;AACzB;AAEO,IAAM,mBAAmB,CAAC,OAAc,kBAA2C;AAAA;AAAA,EAExF,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ,IAAI;AAAA,IAC7B,OAAO,aAAa;AAAA,IACpB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,cAAc;AAAA,MACd,YAAY,MAAM,aAAa,MAAM,GAAG;AAAA,MACxC,WAAW,GAAG,cAAc;AAAA,IAC9B;AAAA,EACF;AAAA;AAAA,EAGA,mBAAmB;AAAA,IACjB,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EACZ;AAAA;AAAA,EAGA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc,MAAM,QAAQ,GAAG;AAAA,IAC/B,OAAO,aAAa,QAAQ,aAAa;AAAA,EAC3C;AAAA;AAAA,EAGA,uBAAuB;AAAA,IACrB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA,EAGA,mBAAmB;AAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ,CAAC;AAAA,IAE1B,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,MAC5B,WAAW;AAAA,MACX,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC7B;AAAA,EACF;AAAA;AAAA,EAGA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,YAAY;AAAA;AAAA;AAAA;AAAA,IAKZ,WAAW;AAAA,MACT,SAAS;AAAA,MACT,iBAAiB,MAAM,aAAa,MAAM,GAAG;AAAA,IAC/C;AAAA,IAEA,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,SAAS,aAAa,aAAa,IAAI;AAAA,MACvC,eAAe;AAAA,IACjB;AAAA,EACF;AACF;AAeA,IAAM,OAAO,CAAC,OAAc,MAC1B,uBAAuB,MAAM,MAAM,QAAQ,SAAS,UAAU,YAAY,WAAW,CAAC,CAAC;AAElF,IAAM,sBAAsB,CAAC,WAA6B;AAAA,EAC/D,WAAW;AAAA,IACT,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,uEAAuE;AAAA,IACrE,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,IACvC,YAAY;AAAA,EACd;AACF;AAGO,IAAM,gBAAgB,OAAO,KAAK;","names":[]}

package/dist/{chunk-O3336DJ6.js → chunk-SYJMI2NP.js}

@@ -1,6 +1,6 @@
 import {
   Alert
-} from "./chunk-QFVFHIHE.js";
+} from "./chunk-WNMYWQ7D.js";
 
 // src/components/data-display/CardKit/card-actions-context.tsx
 import { createContext, useCallback, useContext, useState } from "react";
@@ -54,4 +54,4 @@ export {
   CardActionsProvider,
   useCardActions
 };
-//# sourceMappingURL=chunk-O3336DJ6.js.map
+//# sourceMappingURL=chunk-SYJMI2NP.js.map

package/dist/{chunk-W2YNUUVJ.js → chunk-TU6RNZUQ.js}

@@ -68,35 +68,95 @@ var AppHeaderStatus = ({
   );
 };
 AppHeaderStatus.displayName = "AppHeaderStatus";
-var IdentityText = ({ title, subtitle, status, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        component: "span",
-        "data-testid": `${dataTestId}-title`,
-        sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
-        children: title
+var IdentityTitle = ({ title, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0, width: "100%" }, children: [
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      "data-testid": `${dataTestId}-title`,
+      sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
+      children: title
+    }
+  ),
+  interactive && /* @__PURE__ */ jsx(
+    KeyboardArrowDown,
+    {
+      "aria-hidden": true,
+      "data-testid": `${dataTestId}-chevron`,
+      sx: {
+        flex: "0 0 auto",
+        fontSize: 20,
+        opacity: 0.7,
+        transition: "transform 150ms ease",
+        transform: disclosed ? "rotate(180deg)" : "none"
       }
-    ),
-    interactive && /* @__PURE__ */ jsx(
-      KeyboardArrowDown,
+    }
+  )
+] });
+var discloseSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 0.25,
+  width: "100%",
+  minWidth: 0,
+  appearance: "none",
+  px: 0.5,
+  mx: -0.5,
+  py: 0.25,
+  my: -0.25,
+  border: "none",
+  borderRadius: 1.5,
+  background: "none",
+  color: "inherit",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that
+  // opened the panel, so the row stays highlighted behind it.
+  "@media (hover: hover)": { "&:hover": { backgroundColor: "action.hover" } },
+  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
+};
+var IdentityText = ({
+  title,
+  subtitle,
+  status,
+  size = "md",
+  onDisclose,
+  disclosed,
+  discloseLabel,
+  className,
+  dataTestId
+}) => {
+  const name = /* @__PURE__ */ jsx(
+    IdentityTitle,
+    {
+      title,
+      size,
+      interactive: Boolean(onDisclose),
+      disclosed,
+      dataTestId
+    }
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    onDisclose ? /* @__PURE__ */ jsx(
+      Box,
       {
-        "aria-hidden": true,
-        "data-testid": `${dataTestId}-chevron`,
-        sx: {
-          flex: "0 0 auto",
-          fontSize: 20,
-          opacity: 0.7,
-          transition: "transform 150ms ease",
-          transform: disclosed ? "rotate(180deg)" : "none"
-        }
+        component: "button",
+        type: "button",
+        className,
+        "data-testid": dataTestId,
+        onClick: onDisclose,
+        "aria-haspopup": "dialog",
+        "aria-expanded": disclosed,
+        "aria-label": discloseLabel ?? `Detalhes de ${title}`,
+        sx: discloseSx,
+        children: name
       }
-    )
-  ] }),
-  subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
-  status
-] });
+    ) : name,
+    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
+    status
+  ] });
+};
 var IdentitySkeleton = ({
   size,
   dataTestId
@@ -138,59 +198,38 @@ var AppHeaderIdentity = ({
   dataTestId = "app-header-identity"
 }) => {
   if (loading) return /* @__PURE__ */ jsx(IdentitySkeleton, { size, dataTestId });
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    mark ?? /* @__PURE__ */ jsx(
-      AppHeaderBrand,
-      {
-        name: title,
-        logoUrl,
-        seedColor,
-        size,
-        dataTestId: `${dataTestId}-brand`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IdentityText,
-      {
-        title,
-        subtitle,
-        status,
-        size,
-        interactive: Boolean(onDisclose),
-        disclosed,
-        dataTestId
-      }
-    )
-  ] });
-  if (!onDisclose) {
-    return /* @__PURE__ */ jsx(Box, { className, "data-testid": dataTestId, sx: rowSx, children: body });
-  }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
-      component: "button",
-      type: "button",
-      className,
-      "data-testid": dataTestId,
-      onClick: onDisclose,
-      "aria-haspopup": "dialog",
-      "aria-expanded": disclosed,
-      "aria-label": discloseLabel ?? `Detalhes de ${title}`,
-      sx: {
-        ...rowSx,
-        appearance: "none",
-        p: 0.5,
-        ml: -0.5,
-        border: "none",
-        borderRadius: 1.5,
-        background: "none",
-        color: "inherit",
-        font: "inherit",
-        cursor: "pointer",
-        "&:hover": { backgroundColor: "action.hover" },
-        "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
-      },
-      children: body
+      className: onDisclose ? void 0 : className,
+      "data-testid": onDisclose ? void 0 : dataTestId,
+      sx: rowSx,
+      children: [
+        mark ?? /* @__PURE__ */ jsx(
+          AppHeaderBrand,
+          {
+            name: title,
+            logoUrl,
+            seedColor,
+            size,
+            dataTestId: `${dataTestId}-brand`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IdentityText,
+          {
+            title,
+            subtitle,
+            status,
+            size,
+            onDisclose,
+            disclosed,
+            discloseLabel,
+            className,
+            dataTestId
+          }
+        )
+      ]
     }
   );
 };
@@ -200,4 +239,4 @@ export {
   AppHeaderStatus,
   AppHeaderIdentity
 };
-//# sourceMappingURL=chunk-W2YNUUVJ.js.map
+//# sourceMappingURL=chunk-TU6RNZUQ.js.map

package/dist/chunk-TU6RNZUQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"sourcesContent":["'use client';\n\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { accentFor, type SizeValue } from '../../../tokens/scales';\n\nimport { AppHeaderBrand } from './AppHeader.brand';\nimport type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';\n\n/** Title type scale, per house size step. */\nconst TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };\n\n/** One line, ellipsised — a long store name must not push the actions off-screen. */\nconst ONE_LINE = {\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The dotted state line: \"● Aberto agora · Retirada no balcão\".\n *\n * Segments are joined here rather than by the caller because the separator is a\n * presentational choice — a caller that pre-joins its own string can never be\n * restyled, and each segment loses the chance to carry its own markup.\n */\nexport const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({\n  tone,\n  items,\n  separator = '·',\n  className,\n  dataTestId = 'app-header-status',\n}) => {\n  const theme = useTheme();\n  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');\n  if (visible.length === 0) return null;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}\n    >\n      {tone && (\n        <Box\n          aria-hidden\n          data-testid={`${dataTestId}-dot`}\n          sx={{\n            width: 8,\n            height: 8,\n            flex: '0 0 auto',\n            borderRadius: '50%',\n            backgroundColor: accentFor(theme, tone).main,\n          }}\n        />\n      )}\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {visible.map((item, index) => (\n          // Index keys: the segments are positional presentation, and nothing\n          // here reorders or is keyed on identity elsewhere.\n          <React.Fragment key={index}>\n            {index > 0 && (\n              <>\n                {/* Real spaces, not margin. A screen reader reads `textContent`,\n                    and a CSS-only gap runs \"Aberto agora\" straight into\n                    \"Retirada no balcão\" as one word. The glyph itself is\n                    hidden — it is punctuation, not something to announce. */}\n                {' '}\n                <Box component=\"span\" aria-hidden>\n                  {separator}\n                </Box>{' '}\n              </>\n            )}\n            {item}\n          </React.Fragment>\n        ))}\n      </Typography>\n    </Box>\n  );\n};\n\nAppHeaderStatus.displayName = 'AppHeaderStatus';\n\n/** The name and, when the block opens onto something, the chevron beside it. */\nconst IdentityTitle: React.FC<\n  Pick<AppHeaderIdentityProps, 'title' | 'size'> & {\n    interactive: boolean;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({ title, size = 'md', interactive, disclosed, dataTestId }) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0, width: '100%' }}>\n    <Typography\n      component=\"span\"\n      data-testid={`${dataTestId}-title`}\n      sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}\n    >\n      {title}\n    </Typography>\n    {interactive && (\n      <KeyboardArrowDown\n        aria-hidden\n        data-testid={`${dataTestId}-chevron`}\n        sx={{\n          flex: '0 0 auto',\n          fontSize: 20,\n          opacity: 0.7,\n          transition: 'transform 150ms ease',\n          transform: disclosed ? 'rotate(180deg)' : 'none',\n        }}\n      />\n    )}\n  </Box>\n);\n\n/**\n * The disclosure, wrapping the NAME ROW and nothing else (12-63).\n *\n * The padding is cancelled by an equal negative margin, so the hover and the\n * focus ring bleed outward while the title still starts on the same pixel as\n * the lines under it. A padded button with no offset moves one of the two.\n */\nconst discloseSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 0.25,\n  width: '100%',\n  minWidth: 0,\n  appearance: 'none',\n  px: 0.5,\n  mx: -0.5,\n  py: 0.25,\n  my: -0.25,\n  border: 'none',\n  borderRadius: 1.5,\n  background: 'none',\n  color: 'inherit',\n  font: 'inherit',\n  textAlign: 'left',\n  cursor: 'pointer',\n  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that\n  // opened the panel, so the row stays highlighted behind it.\n  '@media (hover: hover)': { '&:hover': { backgroundColor: 'action.hover' } },\n  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },\n} as const;\n\n/**\n * The text column: the name row, then the quieter lines under it.\n *\n * ## `subtitle` and `status` are OUTSIDE the disclosure, on purpose (12-63)\n *\n * Both are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]` — so a\n * segment of the state line is free to be a control, and consumers put controls\n * there: a mesa chip, a service-mode picker. While the whole block was one\n * `<button>` those were `<button>`s inside a `<button>`, which is invalid HTML\n * (the content model of `button` excludes interactive content) and, more\n * visibly, means one tap fires two handlers. An adopting storefront opened two\n * popups on every tap of either control because of it, and had already\n * hand-rolled this component at one tier to dodge the nesting — a consumer\n * working around the component is the report.\n *\n * The target stays large. The button is the full-width NAME ROW, which is the\n * thing a reader aims at — what it gives up is the mark beside it, and a mark\n * that opens the panel is not worth a state line that cannot hold a control.\n */\nconst IdentityText: React.FC<\n  Pick<\n    AppHeaderIdentityProps,\n    'title' | 'subtitle' | 'status' | 'size' | 'discloseLabel' | 'className'\n  > & {\n    onDisclose: (() => void) | undefined;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({\n  title,\n  subtitle,\n  status,\n  size = 'md',\n  onDisclose,\n  disclosed,\n  discloseLabel,\n  className,\n  dataTestId,\n}) => {\n  const name = (\n    <IdentityTitle\n      title={title}\n      size={size}\n      interactive={Boolean(onDisclose)}\n      disclosed={disclosed}\n      dataTestId={dataTestId}\n    />\n  );\n  return (\n    <Box sx={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {onDisclose ? (\n        <Box\n          component=\"button\"\n          type=\"button\"\n          className={className}\n          data-testid={dataTestId}\n          onClick={onDisclose}\n          aria-haspopup=\"dialog\"\n          aria-expanded={disclosed}\n          aria-label={discloseLabel ?? `Detalhes de ${title}`}\n          sx={discloseSx}\n        >\n          {name}\n        </Box>\n      ) : (\n        name\n      )}\n      {subtitle && (\n        <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n          {subtitle}\n        </Typography>\n      )}\n      {status}\n    </Box>\n  );\n};\n\n/** The placeholder held while the identity is still resolving. */\nconst IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({\n  size,\n  dataTestId,\n}) => (\n  <Box\n    data-testid={`${dataTestId}-loading`}\n    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n  >\n    <Skeleton variant=\"rounded\" width={40} height={40} sx={{ flex: '0 0 auto' }} />\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Skeleton variant=\"text\" width={140} height={TITLE_PX[size] * 1.4} />\n      <Skeleton variant=\"text\" width={180} height={16} />\n    </Box>\n  </Box>\n);\n\n/**\n * The BLOCK's row: the mark, then the text column beside it.\n *\n * Always a `Box` div now — since 12-63 the disclosure is the name row inside\n * the text column ({@link discloseSx}), not this element. `width: '100%'` and\n * `minWidth: 0` stay because the column below still has to ellipsise against\n * something; the argument about a `<button>` sizing to max-content moved to\n * `discloseSx`, which is where the button now is.\n */\nconst rowSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1.25,\n  width: '100%',\n  minWidth: 0,\n  textAlign: 'left',\n} as const;\n\n/**\n * Mark + title + state line, and — when it can be opened — a name row that is\n * the button.\n *\n * The disclosure used to wrap EVERYTHING, on the argument that the chevron\n * alone is a 20px target next to a 40px mark that does nothing. The target is\n * still not the chevron: the button is the full-width NAME ROW, which is what a\n * reader aims at. What it no longer swallows is the mark beside it and the\n * quieter lines below — because those lines take `ReactNode`s, consumers put\n * CONTROLS in them, and a control inside a button is invalid HTML whose every\n * tap fires two handlers. See {@link IdentityText} (12-63).\n *\n * `className` and `dataTestId` stay on the same elements they always named: the\n * block when it is static, the disclosure when there is one.\n */\nexport const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({\n  title,\n  subtitle,\n  status,\n  mark,\n  logoUrl,\n  seedColor,\n  onDisclose,\n  disclosed = false,\n  discloseLabel,\n  loading = false,\n  size = 'md',\n  className,\n  dataTestId = 'app-header-identity',\n}) => {\n  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;\n\n  return (\n    <Box\n      className={onDisclose ? undefined : className}\n      data-testid={onDisclose ? undefined : dataTestId}\n      sx={rowSx}\n    >\n      {mark ?? (\n        <AppHeaderBrand\n          name={title}\n          logoUrl={logoUrl}\n          seedColor={seedColor}\n          size={size}\n          dataTestId={`${dataTestId}-brand`}\n        />\n      )}\n      <IdentityText\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        size={size}\n        onDisclose={onDisclose}\n        disclosed={disclosed}\n        discloseLabel={discloseLabel}\n        className={className}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n};\n\nAppHeaderIdentity.displayName = 'AppHeaderIdentity';\n"],"mappings":"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","names":[]}

package/dist/{chunk-B2Y3BABA.js → chunk-TXKZEKJN.js}

@@ -24,7 +24,7 @@ var TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits:
 var DESCRIPTION = { fontSize: 14.8, opacity: 0.9 };
 var ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 };
 var ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 };
-var CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, hoverRotateDeg: 90, hoverScale: 1.1, washAlpha: 0.1 };
+var CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 };
 var SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 };
 var GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 };
 var GRADIENT = {
@@ -32,16 +32,13 @@ var GRADIENT = {
   stopAlpha: 0.9,
   shimmerAlpha: 0.2,
   shimmerMs: 3e3,
-  shimmerTravel: 1e3,
-  hoverBrightness: 1.1,
-  hoverLift: 2,
-  hoverScale: 1.01
+  shimmerTravel: 1e3
 };
 var GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 };
 var PULSE = { alpha: 0.2, ms: 2e3, spread: 10 };
-var HOVER = { lift: 3, scale: 1.01, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.2, iconScale: 1.15, iconRotateDeg: 10 };
-var ACTIVE = { lift: 1, scale: 0.99, ms: 100 };
-var FOCUS = { ringWidth: 3, ringAlpha: 0.5, offset: 3, haloSpread: 6, haloAlpha: 0.1, ms: 200 };
+var HOVER = { tintAlpha: 0.06 };
+var ACTIVE = { tintAlpha: 0.2, ms: 250 };
+var FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 };
 var NEUTRAL_GREY = { main: 500, light: 300, dark: 700 };
 var seconds = (ms) => `${ms / 1e3}s`;
 function alertPalette(theme, key) {
@@ -133,4 +130,4 @@ export {
   gradientSurface,
   alertSurface
 };
-//# sourceMappingURL=chunk-B2Y3BABA.js.map
+//# sourceMappingURL=chunk-TXKZEKJN.js.map

package/dist/chunk-TXKZEKJN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.metrics.ts"],"sourcesContent":["import type { AlertVariant } from './Alert.base';\nimport { alpha, darken, lighten } from '../../../tokens/color';\nimport { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Alert` RENDERERS DRAW WITH.\n *\n * `Alert.styles.tsx` / `Alert.tsx` (MUI) and `Alert.native.tsx` (React\n * Native) read this one table. Spacing is in SPACING UNITS where the web\n * writes `theme.spacing(n)`; durations are ms (the web turns them into `s`\n * through {@link seconds} so its emitted CSS is byte-for-byte what it was);\n * everything else is px, a ratio or an alpha. The hover, active and focus\n * numbers are here too although only the DOM can honour them — a number the\n * web draws with belongs in the table whether or not native can reach it.\n */\n\n/** The root: 12px corners, 14px 16px of padding, one 300ms curve for everything. */\nexport const ALERT_RADIUS_UNITS = 1.5;\nexport const ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 } as const;\nexport const ALERT_TRANSITION_MS = 300;\nexport const ALERT_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** Mount: the web's `fadeInScale` keyframes and the icon's `iconRotate`. */\nexport const FADE_IN = { ms: 300, scale: 0.95, lift: 10 } as const;\nexport const ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 } as const;\n/** Dismiss: MUI `Collapse` runs 300ms; `onClose` fires 200ms in. */\nexport const COLLAPSE_MS = 300;\nexport const CLOSE_DELAY_MS = 200;\n\n/** The message column: 8px between title, description and children; 0.95rem body on 1.5. */\nexport const MESSAGE_GAP_UNITS = 1;\nexport const MESSAGE_FONT_SIZE = 15.2;\nexport const MESSAGE_LINE_HEIGHT = 1.5;\n/** A control inside the message gets an edge: 4px above, a hairline at 0.45 of the hue. */\nexport const MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 } as const;\n\n/** The title: 1.05rem at 600; MUI's `AlertTitle` lifts it 2px; 4px below it when a description follows. */\nexport const TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 } as const;\n/** The description: 0.925rem, slightly faded. */\nexport const DESCRIPTION = { fontSize: 14.8, opacity: 0.9 } as const;\n\n/** The icon slot: MUI's 22px glyph at 0.9, 14px from the words, 2px down (MUI's 7px stays below). */\nexport const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 } as const;\n/** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */\nexport const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;\n/** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */\nexport const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;\n\n/**\n * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark\n * ink of the same hue — MUI's own `standard` recipe, at its ratios. See\n * `semanticSurface` in `Alert.styles.tsx` for why not `alpha(main, 0.1)`.\n */\nexport const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;\n/** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */\nexport const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;\n/**\n * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.\n *\n * It carries no hover of its own, and that is load-bearing rather than an\n * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the\n * same object literal, so a second `'&:hover'` key does not merge with it — it\n * REPLACES it. While this variant had one, `gradient` was the only alert that\n * brightened on hover while every other variant darkened, and the only one to\n * lose the shimmer reveal the root's hover performs.\n */\nexport const GRADIENT = {\n  angleDeg: 135,\n  stopAlpha: 0.9,\n  shimmerAlpha: 0.2,\n  shimmerMs: 3000,\n  shimmerTravel: 1000,\n} as const;\n\n/** Emphasis: the glow's shadow and brightness, the pulse's wash. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;\nexport const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;\n\n/**\n * Pointer states — DOM only, kept so the web derives them.\n *\n * HOVER and ACTIVE carry NO geometry, and that is the point rather than an\n * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow\n * and spin the icon 10deg at 1.15 — four things moving at once on a surface\n * that is not a control, which made a page of alerts twitch under the pointer.\n *\n * Both are a TINT now: a flat inset layer over the surface. Two mechanisms\n * came before it and each failed on a case the next had to fix. Dropping the\n * element's `opacity` composites toward the PAGE, so it inverted the hover on\n * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a\n * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,\n * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)\n * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the\n * same on an opaque tint, a translucent wash and a gradient, and because it\n * paints above the background and below the content the ink keeps its own\n * contrast.\n */\nexport const HOVER = { tintAlpha: 0.06 } as const;\n\n/**\n * The press: a 20% tint LAYER, eased back fast.\n *\n * The layer is the point. The first attempt dropped the whole element's\n * opacity, which composites toward the PAGE and so behaves differently on\n * every surface it is asked about. Measured: over a light page it made a light\n * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the\n * surface looked like the pointer leaving; over a dark page it landed back on\n * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body\n * copy to 2.31:1, under AA; and it diluted the ink during a text-selection\n * drag. A `brightness()` step instead of it fixed the direction but not the\n * reach — a multiplier does nothing to a near-black `glass` in dark mode\n * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it\n * scales only what the element already paints.\n *\n * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,\n * so it reads the same on an opaque tint, a translucent wash and a gradient;\n * painted above the background and below the content, so the ink keeps its\n * own contrast; and animatable, which `background-image` is not.\n *\n * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE\n * property carries both states. CSS runs a transition from the DESTINATION\n * state's declaration, and entering hover and releasing a press share that\n * destination — so they cannot have different durations without a second\n * animatable property, and both free pseudo-elements are already spent on the\n * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the\n * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and\n * for ~360ms the alert you had just LEFT was darker than the one under the\n * pointer. A fast press-return is the smaller loss, and it is the call the\n * product owner made when shown both.\n */\nexport const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;\n\nexport const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;\n\n/** `neutral` has no palette slot; the web has always drawn it from three greys. */\nexport const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`, `300` → `0.3s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** The palette shape the web's `getColorFromTheme` returns — a main plus optional shades. */\nexport interface AlertPalette {\n  main: string;\n  light?: string;\n  dark?: string;\n}\n\n/**\n * The renderer-free twin of the web's `getColorFromTheme`: a variant or\n * colour name to its palette, `neutral` from the greys, anything unknown\n * (`glass`, `gradient`) to `info`.\n */\nexport function alertPalette(theme: UiTheme, key: string | undefined): AlertPalette {\n  switch (key) {\n    case 'info':\n    case 'success':\n    case 'warning':\n    case 'danger':\n    case 'primary':\n    case 'secondary':\n      return theme.palette[key];\n    case 'neutral':\n      return {\n        main: theme.palette.grey[NEUTRAL_GREY.main],\n        light: theme.palette.grey[NEUTRAL_GREY.light],\n        dark: theme.palette.grey[NEUTRAL_GREY.dark],\n      };\n    default:\n      return theme.palette.info;\n  }\n}\n\n/** What a variant paints: its fill, its ink, its hairline if any, and the colour of its glyph. */\nexport interface AlertSurface {\n  backgroundColor: string;\n  color: string;\n  borderColor?: string;\n  iconColor: string;\n}\n\nexport const SEMANTIC_VARIANTS: ReadonlySet<AlertVariant> = new Set(['info', 'success', 'warning', 'danger']);\n\n/** The opaque tint and same-hue ink, inverted for dark mode; the hairline keeps its alpha. */\nexport function semanticSurface(theme: UiTheme, palette: AlertPalette): AlertSurface {\n  const dark = theme.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(palette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(palette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),\n    borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),\n    iconColor: palette.main,\n  };\n}\n\nexport function glassSurface(theme: UiTheme): AlertSurface {\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    color: theme.palette.text.primary,\n    borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),\n    iconColor: theme.palette.primary.main,\n  };\n}\n\n/** The gradient's two stops; a renderer with no gradient fill paints `from`. */\nexport function gradientStops(palette: AlertPalette): { from: string; to: string } {\n  return {\n    from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),\n    to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha),\n  };\n}\n\nexport function gradientSurface(palette: AlertPalette): AlertSurface {\n  const ink = contrastText(palette.main);\n  return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };\n}\n\n/** The surface for a variant, `glass` and `gradient` included. */\nexport function alertSurface(theme: UiTheme, variant: AlertVariant, palette: AlertPalette): AlertSurface {\n  if (variant === 'glass') return glassSurface(theme);\n  if (variant === 'gradient') return gradientSurface(palette);\n  return semanticSurface(theme, palette);\n}\n"],"mappings":";;;;;;;;;;AAiBO,IAAM,qBAAqB;AAC3B,IAAM,sBAAsB,EAAE,UAAU,MAAM,YAAY,EAAE;AAC5D,IAAM,sBAAsB;AAC5B,IAAM,eAAe;AAGrB,IAAM,UAAU,EAAE,IAAI,KAAK,OAAO,MAAM,MAAM,GAAG;AACjD,IAAM,YAAY,EAAE,IAAI,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjD,IAAM,cAAc;AACpB,IAAM,iBAAiB;AAGvB,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;AAC1B,IAAM,sBAAsB;AAE5B,IAAM,iBAAiB,EAAE,gBAAgB,KAAK,aAAa,KAAK;AAGhE,IAAM,QAAQ,EAAE,UAAU,MAAM,YAAY,KAAK,WAAW,IAAI,mBAAmB,IAAI;AAEvF,IAAM,cAAc,EAAE,UAAU,MAAM,SAAS,IAAI;AAGnD,IAAM,YAAY,EAAE,MAAM,IAAI,SAAS,KAAK,kBAAkB,MAAM,iBAAiB,MAAM,eAAe,EAAE;AAE5G,IAAM,cAAc,EAAE,kBAAkB,GAAG,YAAY,GAAG,aAAa,GAAG;AAE1E,IAAM,eAAe,EAAE,SAAS,GAAG,UAAU,IAAI,SAAS,KAAK,WAAW,IAAI;AAO9E,IAAM,mBAAmB,EAAE,MAAM,EAAE,OAAO,KAAK,MAAM,IAAI,GAAG,KAAK,KAAK,aAAa,KAAK;AAExF,IAAM,QAAQ,EAAE,iBAAiB,MAAM,aAAa,KAAK,MAAM,IAAI,iBAAiB,IAAI;AAWxF,IAAM,WAAW;AAAA,EACtB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AAAA,EACX,eAAe;AACjB;AAGO,IAAM,OAAO,EAAE,MAAM,IAAI,QAAQ,GAAG,OAAO,KAAK,YAAY,KAAK;AACjE,IAAM,QAAQ,EAAE,OAAO,KAAK,IAAI,KAAM,QAAQ,GAAG;AAqBjD,IAAM,QAAQ,EAAE,WAAW,KAAK;AAiChC,IAAM,SAAS,EAAE,WAAW,KAAK,IAAI,IAAI;AAEzC,IAAM,QAAQ,EAAE,WAAW,GAAG,WAAW,GAAG,QAAQ,EAAE;AAGtD,IAAM,eAA8D,EAAE,MAAM,KAAK,OAAO,KAAK,MAAM,IAAI;AAGvG,IAAM,UAAU,CAAC,OAAuB,GAAG,KAAK,GAAI;AAcpD,SAAS,aAAa,OAAgB,KAAuC;AAClF,UAAQ,KAAK;AAAA,IACX,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO,MAAM,QAAQ,GAAG;AAAA,IAC1B,KAAK;AACH,aAAO;AAAA,QACL,MAAM,MAAM,QAAQ,KAAK,aAAa,IAAI;AAAA,QAC1C,OAAO,MAAM,QAAQ,KAAK,aAAa,KAAK;AAAA,QAC5C,MAAM,MAAM,QAAQ,KAAK,aAAa,IAAI;AAAA,MAC5C;AAAA,IACF;AACE,aAAO,MAAM,QAAQ;AAAA,EACzB;AACF;AAUO,IAAM,oBAA+C,oBAAI,IAAI,CAAC,QAAQ,WAAW,WAAW,QAAQ,CAAC;AAGrG,SAAS,gBAAgB,OAAgB,SAAqC;AACnF,QAAM,OAAO,MAAM,SAAS;AAC5B,SAAO;AAAA,IACL,iBAAiB,OACb,OAAO,QAAQ,MAAM,iBAAiB,KAAK,IAAI,IAC/C,QAAQ,QAAQ,MAAM,iBAAiB,KAAK,KAAK;AAAA,IACrD,OAAO,OAAO,QAAQ,QAAQ,MAAM,iBAAiB,GAAG,IAAI,OAAO,QAAQ,MAAM,iBAAiB,GAAG;AAAA,IACrG,aAAa,MAAM,QAAQ,MAAM,iBAAiB,WAAW;AAAA,IAC7D,WAAW,QAAQ;AAAA,EACrB;AACF;AAEO,SAAS,aAAa,OAA8B;AACzD,SAAO;AAAA,IACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,MAAM,eAAe;AAAA,IAC5E,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,aAAa,MAAM,MAAM,QAAQ,SAAS,MAAM,WAAW;AAAA,IAC3D,WAAW,MAAM,QAAQ,QAAQ;AAAA,EACnC;AACF;AAGO,SAAS,cAAc,SAAqD;AACjF,SAAO;AAAA,IACL,MAAM,MAAM,QAAQ,SAAS,QAAQ,MAAM,SAAS,SAAS;AAAA,IAC7D,IAAI,MAAM,QAAQ,QAAQ,QAAQ,MAAM,SAAS,SAAS;AAAA,EAC5D;AACF;AAEO,SAAS,gBAAgB,SAAqC;AACnE,QAAM,MAAM,aAAa,QAAQ,IAAI;AACrC,SAAO,EAAE,iBAAiB,cAAc,OAAO,EAAE,MAAM,OAAO,KAAK,WAAW,IAAI;AACpF;AAGO,SAAS,aAAa,OAAgB,SAAuB,SAAqC;AACvG,MAAI,YAAY,QAAS,QAAO,aAAa,KAAK;AAClD,MAAI,YAAY,WAAY,QAAO,gBAAgB,OAAO;AAC1D,SAAO,gBAAgB,OAAO,OAAO;AACvC;","names":[]}

package/dist/{chunk-QFVFHIHE.js → chunk-WNMYWQ7D.js}

@@ -5,7 +5,12 @@ import {
   fadeInScale,
   getColorFromTheme,
   getVariantIcon
-} from "./chunk-E27Y7FF2.js";
+} from "./chunk-57Z2ND3N.js";
+import {
+  defaultAriaLive,
+  resolveAlertProps,
+  testIdFor
+} from "./chunk-N3QUEBNS.js";
 import {
   ACTIVE,
   ALERT_EASING,
@@ -17,15 +22,11 @@ import {
   DESCRIPTION,
   FADE_IN,
   FOCUS,
+  GLOW,
   HOVER,
   TITLE,
   seconds
-} from "./chunk-B2Y3BABA.js";
-import {
-  defaultAriaLive,
-  resolveAlertProps,
-  testIdFor
-} from "./chunk-N3QUEBNS.js";
+} from "./chunk-TXKZEKJN.js";
 import {
   resolveTestId,
   withoutTestIdProps
@@ -45,41 +46,76 @@ import { alpha, styled } from "@mui/material/styles/index.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
+function pointerShadow(theme, colorPalette, glow, variant) {
+  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(", ");
+}
 var StyledAlert = styled(MuiAlert, {
   shouldForwardProp: (prop) => !["customVariant", "customColor", "glow", "pulse", "animate"].includes(prop)
 })(({ 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",
     willChange: "transform, opacity",
     ...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`
+      outlineOffset: `${FOCUS.offset}px`
     },
     ...alertVariantStyles(theme, customVariant, colorPalette),
     ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse))
@@ -139,14 +175,39 @@ var AlertCloseButton = ({
     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)
       }
     }),
@@ -175,7 +236,7 @@ var Alert = React.forwardRef((alertProps, ref) => {
     ...others
   } = resolveAlertProps(alertProps);
   const dataTestId = resolveTestId(others, "alert");
-  const props = withoutTestIdProps(others);
+  const props = withoutAlertOnlyProps(withoutTestIdProps(others));
   const ariaLive = alertProps["aria-live"] ?? defaultAriaLive(variant);
   const [open, setOpen] = React.useState(true);
   const [isClosing, setIsClosing] = React.useState(false);
@@ -211,9 +272,16 @@ var Alert = React.forwardRef((alertProps, ref) => {
     }
   ) });
 });
+var ALERT_ONLY_PROPS = ["closable", "closeLabel"];
+function withoutAlertOnlyProps(rest) {
+  const html = { ...rest };
+  for (const key of ALERT_ONLY_PROPS) delete html[key];
+  return html;
+}
 Alert.displayName = "Alert";
 
 export {
-  Alert
+  Alert,
+  ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-QFVFHIHE.js.map
+//# sourceMappingURL=chunk-WNMYWQ7D.js.map