@12-apps/ui 6.98.0 → 6.98.1

package/dist/{chunk-ZKVSFVIA.js → chunk-CGLMWS7K.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-4SQ2WCZA.js";
 import {
   Alert
-} from "./chunk-NQCTANF3.js";
+} from "./chunk-RKAX37F4.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-ZKVSFVIA.js.map
+//# sourceMappingURL=chunk-CGLMWS7K.js.map

package/dist/{chunk-7HZ36QDH.js → chunk-GDWU7WF4.js}

@@ -1,3 +1,7 @@
+import {
+  ALERT_CHILDREN_CLASS,
+  ALERT_DESCRIPTION_CLASS
+} from "./chunk-LNZJJFZQ.js";
 import {
   testIdFor
 } from "./chunk-L7VH6IMR.js";
@@ -6,7 +10,7 @@ import {
   ICON_SLOT,
   TITLE,
   TITLE_ICON
-} from "./chunk-5ZY3IIIG.js";
+} from "./chunk-TBQR5VCN.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -20,6 +24,7 @@ var BREAK_WORDS = {
   overflowWrap: "break-word",
   wordBreak: "break-word"
 };
+var ChildrenInk = ({ children }) => children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx(Box, { component: "span", className: ALERT_CHILDREN_CLASS, sx: { display: "contents" }, children });
 var AlertContent = ({ title, description, titleIcon, dataTestId, children }) => {
   const heading = title ? /* @__PURE__ */ jsx(
     AlertTitle,
@@ -67,16 +72,17 @@ var AlertContent = ({ title, description, titleIcon, dataTestId, children }) =>
       Box,
       {
         component: "div",
+        className: ALERT_DESCRIPTION_CLASS,
         "data-testid": testIdFor(dataTestId, "message"),
         sx: { opacity: DESCRIPTION.opacity, fontSize: sxRem(DESCRIPTION.fontSize), ...BREAK_WORDS },
         children: description
       }
     ),
-    children
+    /* @__PURE__ */ jsx(ChildrenInk, { children })
   ] });
 };
 
 export {
   AlertContent
 };
-//# sourceMappingURL=chunk-7HZ36QDH.js.map
+//# sourceMappingURL=chunk-GDWU7WF4.js.map

package/dist/chunk-GDWU7WF4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.content.tsx"],"sourcesContent":["import AlertTitle from '@mui/material/AlertTitle/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\nimport { testIdFor } from './Alert.helpers';\nimport { ALERT_CHILDREN_CLASS, ALERT_DESCRIPTION_CLASS } from './Alert.ink';\nimport { DESCRIPTION, ICON_SLOT, TITLE, TITLE_ICON } from './Alert.metrics';\nimport type { AlertProps } from './Alert.types';\n\nconst BREAK_WORDS = {\n  wordWrap: 'break-word',\n  overflowWrap: 'break-word',\n  wordBreak: 'break-word',\n} as const;\n\n/**\n * The caller's `children`, wrapped so the pointer step (`Alert.ink.ts`) reaches\n * children-only text without reaching the title row's icon. `display: contents`\n * gives the wrapper no box, so the column's flex layout is exactly what it was\n * and a bare text node still inherits the stepped colour.\n */\nconst ChildrenInk: React.FC<{ children?: React.ReactNode }> = ({ children }) =>\n  children === undefined || children === null || children === false ? null : (\n    <Box component=\"span\" className={ALERT_CHILDREN_CLASS} sx={{ display: 'contents' }}>\n      {children}\n    </Box>\n  );\n\n/**\n * The message column: title, description, then whatever the caller put inside.\n *\n * `titleIcon` is the icon when it sits on the title's line\n * (`iconPlacement: 'title'`, see `Alert.placement.ts`). The title then shares\n * a row with it, and the description below is a sibling of that row — so it\n * starts at the column's own edge rather than under the title's first letter.\n */\nexport const AlertContent: React.FC<{\n  title?: AlertProps['title'];\n  description?: AlertProps['description'];\n  titleIcon?: React.ReactNode;\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ title, description, titleIcon, dataTestId, children }) => {\n  const heading = title ? (\n    <AlertTitle\n      data-testid={testIdFor(dataTestId, 'title')}\n      sx={{\n        fontWeight: TITLE.fontWeight,\n        fontSize: sxRem(TITLE.fontSize),\n        // On the icon's row MUI's 2px lift would push the title off the glyph,\n        // and the line height is stated so the glyph can be centred on it.\n        ...(titleIcon\n          ? { margin: 0, lineHeight: TITLE_ICON.lineHeight }\n          : { marginBottom: description ? TITLE.marginBottomUnits : 0 }),\n        ...BREAK_WORDS,\n      }}\n    >\n      {title}\n    </AlertTitle>\n  ) : null;\n\n  return (\n    <>\n      {titleIcon && heading ? (\n        <Box\n          data-testid={testIdFor(dataTestId, 'title-row')}\n          sx={{\n            display: 'flex',\n            // The FIRST line, not the block: a title that wraps to three lines\n            // on a phone would otherwise float its icon beside the second.\n            alignItems: 'flex-start',\n            gap: TITLE_ICON.gapUnits,\n            marginBottom: description ? TITLE.marginBottomUnits : 0,\n            '& > span': {\n              display: 'flex',\n              flex: 'none',\n              alignItems: 'center',\n              fontSize: sxRem(ICON_SLOT.size),\n              // One title line tall, so the glyph is centred on that line.\n              height: sxRem(TITLE.fontSize * TITLE_ICON.lineHeight),\n            },\n          }}\n        >\n          {titleIcon}\n          {heading}\n        </Box>\n      ) : (\n        heading\n      )}\n      {description && (\n        <Box\n          component=\"div\"\n          className={ALERT_DESCRIPTION_CLASS}\n          data-testid={testIdFor(dataTestId, 'message')}\n          sx={{ opacity: DESCRIPTION.opacity, fontSize: sxRem(DESCRIPTION.fontSize), ...BREAK_WORDS }}\n        >\n          {description}\n        </Box>\n      )}\n      <ChildrenInk>{children}</ChildrenInk>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAwBZ,SAuCA,UAvCA,KAyCI,YAzCJ;AAdJ,IAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AACb;AAQA,IAAM,cAAwD,CAAC,EAAE,SAAS,MACxE,aAAa,UAAa,aAAa,QAAQ,aAAa,QAAQ,OAClE,oBAAC,OAAI,WAAU,QAAO,WAAW,sBAAsB,IAAI,EAAE,SAAS,WAAW,GAC9E,UACH;AAWG,IAAM,eAMR,CAAC,EAAE,OAAO,aAAa,WAAW,YAAY,SAAS,MAAM;AAChE,QAAM,UAAU,QACd;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,UAAU,YAAY,OAAO;AAAA,MAC1C,IAAI;AAAA,QACF,YAAY,MAAM;AAAA,QAClB,UAAU,MAAM,MAAM,QAAQ;AAAA;AAAA;AAAA,QAG9B,GAAI,YACA,EAAE,QAAQ,GAAG,YAAY,WAAW,WAAW,IAC/C,EAAE,cAAc,cAAc,MAAM,oBAAoB,EAAE;AAAA,QAC9D,GAAG;AAAA,MACL;AAAA,MAEC;AAAA;AAAA,EACH,IACE;AAEJ,SACE,iCACG;AAAA,iBAAa,UACZ;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,UAAU,YAAY,WAAW;AAAA,QAC9C,IAAI;AAAA,UACF,SAAS;AAAA;AAAA;AAAA,UAGT,YAAY;AAAA,UACZ,KAAK,WAAW;AAAA,UAChB,cAAc,cAAc,MAAM,oBAAoB;AAAA,UACtD,YAAY;AAAA,YACV,SAAS;AAAA,YACT,MAAM;AAAA,YACN,YAAY;AAAA,YACZ,UAAU,MAAM,UAAU,IAAI;AAAA;AAAA,YAE9B,QAAQ,MAAM,MAAM,WAAW,WAAW,UAAU;AAAA,UACtD;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH,IAEA;AAAA,IAED,eACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAW;AAAA,QACX,eAAa,UAAU,YAAY,SAAS;AAAA,QAC5C,IAAI,EAAE,SAAS,YAAY,SAAS,UAAU,MAAM,YAAY,QAAQ,GAAG,GAAG,YAAY;AAAA,QAEzF;AAAA;AAAA,IACH;AAAA,IAEF,oBAAC,eAAa,UAAS;AAAA,KACzB;AAEJ;","names":[]}

package/dist/chunk-LNZJJFZQ.js

@@ -0,0 +1,41 @@
+import {
+  ACTIVE,
+  ALERT_EASING,
+  POINTER_INK_STEP,
+  seconds
+} from "./chunk-TBQR5VCN.js";
+import {
+  absoluteInk
+} from "./chunk-XJAD6E3V.js";
+
+// src/components/data-display/Alert/Alert.ink.ts
+var ALERT_DESCRIPTION_CLASS = "alert-description";
+var ALERT_CHILDREN_CLASS = "alert-children";
+var MESSAGE_INK = `& .MuiAlertTitle-root, & .${ALERT_DESCRIPTION_CLASS}, & .${ALERT_CHILDREN_CLASS}`;
+function inkAbsolute(theme, variant) {
+  if (variant === "gradient") return null;
+  return theme.palette.mode === "dark" ? "white" : "black";
+}
+function steppedInkCss(absolute, step) {
+  return `color-mix(in srgb, currentColor ${Math.round((1 - step) * 100)}%, ${absolute})`;
+}
+function pointerInkStyles(theme, variant) {
+  const side = inkAbsolute(theme, variant);
+  if (side === null) return { rest: {}, hover: {}, press: {} };
+  const absolute = absoluteInk(theme)[side];
+  const at = (state) => steppedInkCss(absolute, POINTER_INK_STEP[state][side]);
+  return {
+    rest: { [MESSAGE_INK]: { transition: `color ${seconds(ACTIVE.ms)} ${ALERT_EASING}` } },
+    hover: { [MESSAGE_INK]: { color: at("hover") } },
+    press: { [MESSAGE_INK]: { color: at("press"), transition: "none" } }
+  };
+}
+
+export {
+  ALERT_DESCRIPTION_CLASS,
+  ALERT_CHILDREN_CLASS,
+  inkAbsolute,
+  steppedInkCss,
+  pointerInkStyles
+};
+//# sourceMappingURL=chunk-LNZJJFZQ.js.map

package/dist/chunk-LNZJJFZQ.js.map

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

package/dist/{chunk-6D5AMANO.js → chunk-OV5NM4FY.js}

@@ -1,6 +1,6 @@
 import {
   useFocusOnScreen
-} from "./chunk-BQBEN44R.js";
+} from "./chunk-PNAKRHRT.js";
 import {
   actionSx,
   categoryDescriptionSx,
@@ -47,4 +47,4 @@ function SequenceOverviewBody(props) {
 export {
   SequenceOverviewBody
 };
-//# sourceMappingURL=chunk-6D5AMANO.js.map
+//# sourceMappingURL=chunk-OV5NM4FY.js.map

package/dist/{chunk-BQBEN44R.js → chunk-PNAKRHRT.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-2ORD2FMN.js";
 import {
   Alert
-} from "./chunk-NQCTANF3.js";
+} from "./chunk-RKAX37F4.js";
 import {
   Button
 } from "./chunk-YOXYSAUI.js";
@@ -160,4 +160,4 @@ export {
   SequenceStepBody,
   SequenceDoneBody
 };
-//# sourceMappingURL=chunk-BQBEN44R.js.map
+//# sourceMappingURL=chunk-PNAKRHRT.js.map

package/dist/{chunk-NQCTANF3.js → chunk-RKAX37F4.js}

@@ -1,3 +1,6 @@
+import {
+  AlertContent
+} from "./chunk-GDWU7WF4.js";
 import {
   alertEmphasisStyles,
   alertLayoutStyles,
@@ -5,13 +8,13 @@ import {
   fadeInScale,
   getColorFromTheme,
   getVariantIcon
-} from "./chunk-L5RS6QAT.js";
+} from "./chunk-YBF2WUGQ.js";
 import {
   resolveIconPlacement
 } from "./chunk-QXUXO22M.js";
 import {
-  AlertContent
-} from "./chunk-7HZ36QDH.js";
+  pointerInkStyles
+} from "./chunk-LNZJJFZQ.js";
 import {
   resolveAlertProps,
   resolveAnnouncement,
@@ -30,7 +33,7 @@ import {
   GLOW,
   HOVER,
   seconds
-} from "./chunk-5ZY3IIIG.js";
+} from "./chunk-TBQR5VCN.js";
 import {
   resolveTestId,
   withoutTestIdProps
@@ -64,6 +67,7 @@ var StyledAlert = styled(MuiAlert, {
 })(({ theme, customVariant, customColor, glow, pulse, animate }) => {
   const colorPalette = getColorFromTheme(theme, customColor || customVariant || "info");
   const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);
+  const ink = pointerInkStyles(theme, customVariant);
   return {
     borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
     transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,
@@ -72,12 +76,14 @@ var StyledAlert = styled(MuiAlert, {
     animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : "none",
     willChange: "transform, opacity",
     ...alertLayoutStyles(theme, colorPalette, animate),
+    ...ink.rest,
     // Hover: one tint step, and nothing that moves. An alert is a surface
     // rather than a control, so the pointer only needs telling it is here. The
     // icon keeps its own place for the same reason — it is the variant's
-    // meaning, not an affordance to animate.
+    // meaning, not an affordance to animate. The message's ink steps too.
     "&:hover": {
       boxShadow: withTint(HOVER.tintAlpha),
+      ...ink.hover,
       "&::before": {
         opacity: 1
       }
@@ -103,7 +109,8 @@ var StyledAlert = styled(MuiAlert, {
     // fired at all.
     '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
       boxShadow: withTint(ACTIVE.tintAlpha),
-      transition: "none"
+      transition: "none",
+      ...ink.press
     },
     // Focus: `:focus-visible`, not `:focus-within`.
     //
@@ -277,4 +284,4 @@ export {
   Alert,
   ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-NQCTANF3.js.map
+//# sourceMappingURL=chunk-RKAX37F4.js.map

package/dist/chunk-RKAX37F4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport MuiAlert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { absoluteInk, modeInk } from '../../../tokens/ink';\n\nimport { AlertContent } from './Alert.content';\nimport { pointerInkStyles } from './Alert.ink';\nimport { resolveAlertProps, resolveAnnouncement, testIdFor } from './Alert.helpers';\nimport { resolveIconPlacement, type AlertIconPlacement } from './Alert.placement';\nimport type { AlertPalette } from './Alert.metrics';\nimport {\n  ACTIVE,\n  GLOW,\n  ALERT_EASING,\n  ALERT_RADIUS_UNITS,\n  ALERT_TRANSITION_MS,\n  CLOSE_BUTTON,\n  CLOSE_DELAY_MS,\n  COLLAPSE_MS,\n  FADE_IN,\n  FOCUS,\n  HOVER,\n  seconds,\n} from './Alert.metrics';\nimport {\n  alertEmphasisStyles,\n  alertLayoutStyles,\n  alertVariantStyles,\n  fadeInScale,\n  getColorFromTheme,\n  getVariantIcon,\n} from './Alert.styles';\nimport type { AlertColor } from '@mui/material/Alert/index.js';\nimport type { AlertProps } from './Alert.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;\n\n// Define animations\n/**\n * The pointer states' shadow: a flat tint, plus the glow when the alert has one.\n *\n * The tint is an inset spread at 100vmax, which always exceeds the element, so\n * it covers the surface edge to edge. It paints ABOVE the background and BELOW\n * the content, so it never dims the ink itself — see `ACTIVE` in\n * `Alert.metrics.ts` for why a layer replaced the opacity dip and the\n * brightness multiplier that each preceded it. It does move the surface toward\n * the ink's side, which is the contrast `pointerInkStyles` (`Alert.ink.ts`)\n * wins back by stepping the message's words the same way.\n *\n * The glow is COMPOSED rather than replaced, so hovering a glowing alert keeps\n * its glow; `glowStyles` gave up its `!important` for this.\n */\nfunction pointerShadow(\n  theme: Theme,\n  colorPalette: AlertPalette,\n  glow: boolean,\n  variant: string | undefined,\n): (alpha_: number) => string {\n  // The tint's colour reads the variant and not only the mode. On every\n  // surface that tracks the mode it moves the surface TOWARD its ink's side —\n  // the contrast cost `pointerInkStyles` pays back.\n  //\n  // `gradient` is the one variant where the two disagree: it paints a\n  // mid-lightness sweep (L* 42–61) under WHITE ink in BOTH modes, so the\n  // mode-keyed answer tinted it white in dark mode — toward the text. Measured:\n  // white-on-gradient fell to 2.90:1 on hover and 2.41:1 pressed, under the 3:1\n  // floor and below its own idle. Every other variant's surface tracks the mode,\n  // so for them the two rules agree. (Not quite WHITE in both modes: dark\n  // mode's light hues get a dark `getContrastText` ink, which this black layer\n  // closes on. That ink is not stepped (`inkAbsolute`); its rest contrast is\n  // FUT-4516's.)\n  const ink = variant === 'gradient' ? absoluteInk(theme).black : modeInk(theme);\n  const glowShadow = glow\n    ? `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(colorPalette.main, GLOW.alpha)}`\n    : null;\n  return (alpha_) =>\n    [`inset 0 0 0 100vmax ${alpha(ink, alpha_)}`, glowShadow].filter(Boolean).join(', ');\n}\n\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n}>(({ theme, customVariant, customColor, glow, pulse, animate }) => {\n  const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');\n\n  const withTint = pointerShadow(theme, colorPalette, Boolean(glow), customVariant);\n  const ink = pointerInkStyles(theme, customVariant);\n\n  return {\n    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),\n    transition: `${transition}, box-shadow ${seconds(ACTIVE.ms)} ${ALERT_EASING}`,\n    position: 'relative',\n    overflow: 'hidden',\n    animation: animate ? `${fadeInScale(theme)} ${seconds(FADE_IN.ms)} ease-out` : 'none',\n    willChange: 'transform, opacity',\n\n    ...alertLayoutStyles(theme, colorPalette, animate),\n    ...ink.rest,\n\n    // Hover: one tint step, and nothing that moves. An alert is a surface\n    // rather than a control, so the pointer only needs telling it is here. The\n    // icon keeps its own place for the same reason — it is the variant's\n    // meaning, not an affordance to animate. The message's ink steps too.\n    '&:hover': {\n      boxShadow: withTint(HOVER.tintAlpha),\n      ...ink.hover,\n\n      '&::before': {\n        opacity: 1,\n      },\n    },\n\n    // Press: a 20% tint, landing at once and easing back. Still no geometry.\n    //\n    // `transition: none` here is what makes the dip INSTANT: a click's\n    // `:active` lasts about as long as the finger is down, so easing into it\n    // would be cut off in its first tenth and read as a flicker. The ease is on\n    // the way back, governed by the root.\n    //\n    // Neither `:hover` nor `:focus-visible` may declare `transition`, and that\n    // is not a style preference. `:active` under a mouse ALWAYS implies\n    // `:hover`, so a bare shorthand in the hover block outranks the root's\n    // (0,2,0 beats 0,1,0) and silently resets the timing this state rests on.\n    //\n    // The `:not(:has(…))` names CONTROLS, not any descendant. `:active`\n    // matches an ancestor of whatever is pressed, so dismissing an alert\n    // dimmed the alert being dismissed and pressing a call to action dimmed\n    // the message explaining it. Excluding `:has(:active)` wholesale does not\n    // work and was the first attempt: pressing the TEXT makes that text\n    // `:active` too, so the guard matched on every press and the state never\n    // fired at all.\n    '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n      boxShadow: withTint(ACTIVE.tintAlpha),\n      transition: 'none',\n      ...ink.press,\n    },\n\n    // Focus: `:focus-visible`, not `:focus-within`.\n    //\n    // The alert carries `tabIndex={0}`, so a MOUSE CLICK focused it and painted\n    // the ring — a keyboard affordance answering a pointer, which is what made\n    // clicking one look like an error state. `:focus-visible` is the browser's\n    // own answer to \"did this focus come from the keyboard\": the ring stays for\n    // whoever tabs here and never fires on a click.\n    //\n    // One ring, not three. It was a 3px outline at 3px offset UNDER a 6px halo,\n    // and stacking two rings on one edge is what read as unfinished rather than\n    // as emphasis.\n    // It declares no `transition`: `outline-style` is discrete, so the ring\n    // arrives at full width with only its COLOUR easing — from `currentcolor`,\n    // the near-black alert ink, to the blue. That is a visible dark flash on\n    // every keyboard focus, and it would also outrank the root's opacity\n    // transition the way the hover block did.\n    '&:focus-visible': {\n      outline: `${rem(theme, FOCUS.ringWidth)} solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n      outlineOffset: rem(theme, FOCUS.offset),\n    },\n\n    ...alertVariantStyles(theme, customVariant, colorPalette),\n    ...alertEmphasisStyles(theme, colorPalette, Boolean(glow), Boolean(pulse)),\n  };\n});\n\n// glass and gradient are our own looks with no MUI severity of their own; both\n// borrow info's. danger is MUI's error.\nconst MUI_SEVERITY: Record<string, AlertColor> = {\n  danger: 'error',\n  glass: 'info',\n  gradient: 'info',\n};\n\nconst toMuiSeverity = (variant: string): AlertColor =>\n  MUI_SEVERITY[variant] ?? (variant as AlertColor);\n\nconst AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose: () => void }> = ({\n  dataTestId,\n  label,\n  onClose,\n}) => (\n  <IconButton\n    data-testid={testIdFor(dataTestId, 'close')}\n    aria-label={label}\n    color=\"inherit\"\n    size=\"small\"\n    onClick={onClose}\n    sx={(theme) => ({\n      transition,\n      opacity: CLOSE_BUTTON.opacity,\n      // Opacity and a wash only: the button used to spin 90deg and grow 1.1,\n      // which drew the eye to the dismiss rather than to the message.\n      '&:hover': {\n        opacity: 1,\n        backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha),\n      },\n      // A REAL ring, on the keyboard-only selector.\n      //\n      // This used to be `&:focus` setting `outline: 'none'` over a\n      // `rgba(0,0,0,0.1)` wash — 1.25:1 against the info surface, and MUI's\n      // ButtonBase already sets `outline: 0`, so there was no UA fallback\n      // either. It went unnoticed while the ROOT still matched `:focus-within`\n      // and drew a ring around the whole alert; moving the root to\n      // `:focus-visible` took that away and left this button with no visible\n      // focus at all. `Banner`'s dismiss already draws its own outline, so\n      // this is also what keeps the two surfaces telling a keyboard user the\n      // same thing.\n      '&:focus-visible': {\n        opacity: 1,\n        // `currentColor` is the alert's own ink, inherited through\n        // `color=\"inherit\"`, so the ring is drawn in whatever colour was\n        // already chosen to be READ on this surface. Measured 11.2:1 on the\n        // semantic variants and 5.7:1 on `gradient`.\n        //\n        // That is a reasoned choice, not a test-backed one, and the difference\n        // matters: `alert-contrast.test.tsx` covers the ink of the four\n        // semantic variants only — its `glass` case asserts the pane's alpha\n        // rather than its ink, and `gradient` it does not render at all. A\n        // translucent surface's contrast depends on what sits behind it, which\n        // is why that test stops where it does and why this comment does not\n        // borrow a guarantee it never made.\n        outline: `${rem(theme, FOCUS.ringWidth)} solid currentColor`,\n        outlineOffset: rem(theme, FOCUS.offset),\n        backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha),\n      },\n    })}\n  >\n    <Close fontSize=\"inherit\" />\n  </IconButton>\n);\n\n/**\n * The dismiss button, or nothing.\n *\n * Reads `closeLabel` straight off the props rather than through the\n * `definedProps` merge, which would widen it to `string | undefined` and hand\n * the button an empty name. The UNION in `AlertProps` guarantees the label\n * wherever `closable` is true — that narrowing is gone inside the component,\n * which is why the fallback below exists and why it is unreachable.\n */\nfunction dismissButton(\n  props: AlertProps,\n  dataTestId: string | undefined,\n  onClose: () => void,\n): React.JSX.Element | null {\n  if (!props.closable) return null;\n  return <AlertCloseButton dataTestId={dataTestId} label={props.closeLabel} onClose={onClose} />;\n}\n\n/**\n * Where the icon goes: MUI's own slot (`slot`), or the title's row\n * (`titleIcon`) — never both. On the title's row only when there IS a title\n * and an icon to put on it (`Alert.placement.ts`).\n */\nfunction placeIcon({\n  icon,\n  dataTestId,\n  hasTitle,\n  placement,\n}: {\n  icon: React.ReactNode;\n  dataTestId: string | undefined;\n  hasTitle: boolean;\n  placement: AlertIconPlacement;\n}): { slot: React.ReactNode; titleIcon?: React.ReactNode } {\n  if (icon === null) return { slot: false };\n  const glyph = (\n    <Box component=\"span\" data-testid={testIdFor(dataTestId, 'icon')}>\n      {icon}\n    </Box>\n  );\n  return placement === 'title' && hasTitle ? { slot: false, titleIcon: glyph } : { slot: glyph };\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>((alertProps, ref) => {\n  const {\n    variant,\n    color,\n    glow,\n    pulse,\n    icon,\n    showIcon,\n    onClose,\n    title,\n    description,\n    children,\n    animate,\n    iconPlacement,\n    role: _role, announce: _announce, // resolved from `alertProps` — see `resolveAnnouncement`\n    'aria-atomic': ariaAtomic,\n    ...others\n  } = resolveAlertProps(alertProps);\n\n  // Every spelling of the test id the shared contract allows, mapped to the\n  // one the DOM reads and defaulted to `alert`; the native Alert does the same.\n  const dataTestId = resolveTestId(others, 'alert');\n  // Then the dismiss union, which `dismissButton` reads off `alertProps` rather\n  // than through this destructure — so without this strip it rides `...props`\n  // onto the DOM. `ALERT_DEFAULTS` supplies `closable: false`, so that happened\n  // on EVERY alert, not only the closable ones.\n  const props = withoutAlertOnlyProps(withoutTestIdProps(others));\n\n  // Depends on `variant`, so it cannot live in the static defaults above.\n  const announcement = resolveAnnouncement(alertProps, variant);\n  const theme = useTheme();\n  const [open, setOpen] = React.useState(true);\n  const [isClosing, setIsClosing] = React.useState(false);\n\n  const handleClose = () => {\n    setIsClosing(true);\n    window.setTimeout(() => {\n      setOpen(false);\n      onClose?.();\n    }, CLOSE_DELAY_MS);\n  };\n\n  const severity = toMuiSeverity(variant);\n\n  const { slot, titleIcon } = placeIcon({\n    icon: showIcon ? (icon ?? getVariantIcon(variant)) : null,\n    dataTestId,\n    hasTitle: Boolean(title),\n    placement: resolveIconPlacement(theme, iconPlacement),\n  });\n\n  return (\n    <Collapse in={open && !isClosing} timeout={COLLAPSE_MS}>\n      <StyledAlert\n        ref={ref}\n        data-testid={dataTestId}\n        severity={severity}\n        customVariant={variant}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        animate={animate}\n        icon={slot}\n        role={announcement.role}\n        aria-live={announcement['aria-live']}\n        aria-atomic={ariaAtomic}\n        tabIndex={0}\n        action={dismissButton(alertProps, dataTestId, handleClose)}\n        {...props}\n      >\n        <AlertContent title={title} description={description} titleIcon={titleIcon} dataTestId={dataTestId}>\n          {children}\n        </AlertContent>\n      </StyledAlert>\n    </Collapse>\n  );\n});\n\n/**\n * The props `Alert` OWNS, which must never reach the DOM.\n *\n * `AlertProps` extends MUI's, whose rest-spread is how a host's real HTML\n * attributes get onto the root — so the same spread carries the alert's own\n * configuration unless it is named here. Everything else the component consumes\n * leaves through the destructure above; these two do not, because\n * `dismissButton` reads them off the original props to keep the dismiss union's\n * narrowing intact.\n *\n * Exported so a test can render an alert carrying every name on it and assert\n * none reaches the DOM — the check that would have caught `closable`.\n */\nexport const ALERT_ONLY_PROPS = ['closable', 'closeLabel'] as const;\n\nfunction withoutAlertOnlyProps<P extends object>(rest: P): P {\n  const html = { ...rest } as Record<string, unknown>;\n  for (const key of ALERT_ONLY_PROPS) delete html[key];\n  return html as P;\n}\n\nAlert.displayName = 'Alert';\n"],"mappings":"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","names":[]}

package/dist/{chunk-Z4ZFJ565.js → chunk-SRAIV6U6.js}

@@ -4,10 +4,10 @@ import {
   bannerPointerStates,
   fadeInSlide,
   getVariantColor
-} from "./chunk-QIP37Y2C.js";
+} from "./chunk-2RC6EAGD.js";
 import {
   FOCUS
-} from "./chunk-5ZY3IIIG.js";
+} from "./chunk-TBQR5VCN.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -263,4 +263,4 @@ Banner.displayName = "Banner";
 export {
   Banner
 };
-//# sourceMappingURL=chunk-Z4ZFJ565.js.map
+//# sourceMappingURL=chunk-SRAIV6U6.js.map

package/dist/{chunk-5ZY3IIIG.js → chunk-TBQR5VCN.js}

@@ -42,6 +42,14 @@ var GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 };
 var PULSE = { alpha: 0.2, ms: 2e3, spread: 10 };
 var HOVER = { tintAlpha: 0.06 };
 var ACTIVE = { tintAlpha: 0.2, ms: 250 };
+var POINTER_INK_STEP = {
+  hover: { black: 0.15, white: 0.2 },
+  press: { black: 0.35, white: 0.6 }
+};
+var POINTER_STATES = {
+  hover: { tintAlpha: HOVER.tintAlpha, inkStep: POINTER_INK_STEP.hover },
+  press: { tintAlpha: ACTIVE.tintAlpha, inkStep: POINTER_INK_STEP.press }
+};
 var FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 };
 var NEUTRAL_GREY = { main: 500, light: 300, dark: 700 };
 var seconds = (ms) => `${ms / 1e3}s`;
@@ -124,6 +132,8 @@ export {
   PULSE,
   HOVER,
   ACTIVE,
+  POINTER_INK_STEP,
+  POINTER_STATES,
   FOCUS,
   NEUTRAL_GREY,
   seconds,
@@ -135,4 +145,4 @@ export {
   gradientSurface,
   alertSurface
 };
-//# sourceMappingURL=chunk-5ZY3IIIG.js.map
+//# sourceMappingURL=chunk-TBQR5VCN.js.map

package/dist/chunk-TBQR5VCN.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 { NEUTRAL_RAMP } from '../../../tokens/ink.core';\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 on the title's line (`iconPlacement: 'title'`): 10px from the title, centred on its first line (1.5). */\nexport const TITLE_ICON = { gapUnits: 1.25, lineHeight: 1.5 } as const;\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.\n *\n * Painting above the background and below the content keeps the layer off the\n * INK, but not off the ink's CONTRAST: the layer moves the surface toward the\n * mode's absolute, which is the side the ink is on, so the two close in. That\n * is what {@link POINTER_INK_STEP} answers (FUT-4506).\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 it never dims the\n * ink itself; and animatable, which `background-image` is not. It DOES dim the\n * ink's contrast, because it darkens a light surface toward a dark ink (and\n * lightens a dark one toward a light ink) — on Alert, {@link POINTER_INK_STEP}\n * is the other half of the press.\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\n/**\n * How far the MESSAGE ink — title, description and children — steps toward the\n * absolute on its own side while the alert is hovered or pressed (FUT-4506,\n * option C).\n *\n * The tint layer above moves the surface toward the mode's absolute — black in\n * light mode, white in dark — which is the side the ink sits on, so every\n * pointer state CLOSED the gap the ink is read across. Measured on a host pane\n * whose summary sat at 4.71:1 idle: 4.22 hovered, 3.17 pressed in light mode,\n * and down to 2.68 pressed in dark. The title, at 16.8px/600, is not WCAG\n * \"large\" text, so it is held to 4.5:1 as well.\n *\n * The answer keeps the layer (the pointer still gets its feedback) and moves\n * the ink FURTHER the same way, so the gap re-opens. The amounts are the\n * prototype's measured steps on that host pane, the worst case in reach: they\n * hold the 0.9 summary at 4.75–6.07:1 there, and at 6.38:1 or more on this\n * package's default palette in both modes. White needs the bigger step because\n * a light ink has less room above it than a dark ink has below it, and dark\n * mode's pressed step needs at least 0.55.\n *\n * Keyed by the absolute the ink moves TOWARD, which is the mode's: black in\n * light mode, white in dark. The web applies the step as `color-mix()` over\n * `currentColor`, so its AMOUNT lands on whatever ink is actually painted — a\n * host's repaint of a semantic or `glass` alert included. Its DIRECTION is the\n * mode's, which is only safe where the surface tracks the mode, so `gradient`\n * is not stepped at all (`inkAbsolute` in `Alert.ink.ts`): a host that\n * repaints it to a light pane and a dark ink would otherwise have its ink\n * stepped toward white under a black layer. DOM only; native has no pointer\n * states. `Banner` paints the same tint and does not step yet.\n */\nexport const POINTER_INK_STEP = {\n  hover: { black: 0.15, white: 0.2 },\n  press: { black: 0.35, white: 0.6 },\n} as const;\n\n/**\n * Both pointer states as a host reads them: the tint layer's alpha and the ink\n * step, per absolute. Exported (as `ALERT_POINTER_STATES`) so a theme that\n * repaints the alert's pane and ink can assert its own tones still clear 4.5:1\n * hovered and pressed, against the numbers the package actually draws with.\n */\nexport const POINTER_STATES = {\n  hover: { tintAlpha: HOVER.tintAlpha, inkStep: POINTER_INK_STEP.hover },\n  press: { tintAlpha: ACTIVE.tintAlpha, inkStep: POINTER_INK_STEP.press },\n} 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: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n        light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n        dark: NEUTRAL_RAMP[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":"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","names":[]}

package/dist/{chunk-L5RS6QAT.js → chunk-YBF2WUGQ.js}

@@ -20,7 +20,7 @@ import {
   SEMANTIC_SURFACE,
   SEMANTIC_VARIANTS,
   seconds
-} from "./chunk-5ZY3IIIG.js";
+} from "./chunk-TBQR5VCN.js";
 import {
   sheen,
   softNeutral
@@ -267,4 +267,4 @@ export {
   alertVariantStyles,
   alertEmphasisStyles
 };
-//# sourceMappingURL=chunk-L5RS6QAT.js.map
+//# sourceMappingURL=chunk-YBF2WUGQ.js.map

package/dist/data-display/Alert.js

@@ -1,12 +1,15 @@
-import "../chunk-NUGT7LMR.js";
+import "../chunk-AG4F6NVT.js";
 import {
   Alert
-} from "../chunk-NQCTANF3.js";
-import "../chunk-L5RS6QAT.js";
+} from "../chunk-RKAX37F4.js";
+import "../chunk-GDWU7WF4.js";
+import "../chunk-YBF2WUGQ.js";
 import "../chunk-QXUXO22M.js";
-import "../chunk-7HZ36QDH.js";
+import "../chunk-LNZJJFZQ.js";
 import "../chunk-L7VH6IMR.js";
-import "../chunk-5ZY3IIIG.js";
+import {
+  POINTER_STATES
+} from "../chunk-TBQR5VCN.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-2FBGDSGC.js";
 import "../chunk-VBP46YP4.js";
@@ -21,6 +24,7 @@ import "../chunk-N3GAFIXG.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {
+  POINTER_STATES as ALERT_POINTER_STATES,
   Alert
 };
 //# sourceMappingURL=Alert.js.map

package/dist/data-display/Banner.js

@@ -1,8 +1,8 @@
 import {
   Banner
-} from "../chunk-Z4ZFJ565.js";
-import "../chunk-QIP37Y2C.js";
-import "../chunk-5ZY3IIIG.js";
+} from "../chunk-SRAIV6U6.js";
+import "../chunk-2RC6EAGD.js";
+import "../chunk-TBQR5VCN.js";
 import "../chunk-2FBGDSGC.js";
 import "../chunk-VBP46YP4.js";
 import "../chunk-44BD7SFH.js";

package/dist/data-display/CardKit.js

@@ -6,7 +6,7 @@ import {
 } from "../chunk-3LD42RNV.js";
 import {
   useRemoveConfirm
-} from "../chunk-AP7GEUJS.js";
+} from "../chunk-67GTAPK6.js";
 import {
   rowActionsToMenuItems
 } from "../chunk-ZBXG6RVJ.js";
@@ -20,7 +20,7 @@ import {
 import {
   CardActionsProvider,
   useCardActions
-} from "../chunk-RCTHCXS6.js";
+} from "../chunk-4N4M237A.js";
 import "../chunk-WVML3ENZ.js";
 import "../chunk-AY5GKCH7.js";
 import "../chunk-XCBQXSTR.js";
@@ -31,16 +31,17 @@ import "../chunk-4P63RSSY.js";
 import "../chunk-EMYESBIT.js";
 import "../chunk-LZRVUOMU.js";
 import "../chunk-EEB66IVH.js";
-import "../chunk-NUGT7LMR.js";
-import "../chunk-NQCTANF3.js";
-import "../chunk-L5RS6QAT.js";
+import "../chunk-AG4F6NVT.js";
+import "../chunk-RKAX37F4.js";
+import "../chunk-GDWU7WF4.js";
+import "../chunk-YBF2WUGQ.js";
 import "../chunk-QXUXO22M.js";
-import "../chunk-7HZ36QDH.js";
+import "../chunk-LNZJJFZQ.js";
 import "../chunk-L7VH6IMR.js";
 import "../chunk-2IBFEHIX.js";
 import "../chunk-TTBLQZVT.js";
 import "../chunk-WGK7VNCO.js";
-import "../chunk-5ZY3IIIG.js";
+import "../chunk-TBQR5VCN.js";
 import "../chunk-6DPAWXZ3.js";
 import "../chunk-BA4RHQ3B.js";
 import "../chunk-YOXYSAUI.js";

package/dist/data-display/DataViews.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-MBMZNSBP.js";
 import {
   DataViewsTableBase
-} from "../chunk-U4PV2ZKK.js";
+} from "../chunk-AESKKFA5.js";
 import {
   DataViewsGrid
 } from "../chunk-SOXO2VN3.js";
@@ -66,7 +66,7 @@ import "../chunk-YLGY3D52.js";
 import "../chunk-4NG3LTRX.js";
 import "../chunk-4IE66GY2.js";
 import "../chunk-2MT6VSS2.js";
-import "../chunk-ZKVSFVIA.js";
+import "../chunk-CGLMWS7K.js";
 import "../chunk-RVBLOR32.js";
 import "../chunk-OFRQMFWD.js";
 import "../chunk-5M4TYFR3.js";
@@ -223,18 +223,19 @@ import "../chunk-G3E66C6J.js";
 import "../chunk-LL2BWQPM.js";
 import "../chunk-SNCSGLJ6.js";
 import "../chunk-UMICTXMP.js";
-import "../chunk-NUGT7LMR.js";
-import "../chunk-NQCTANF3.js";
-import "../chunk-L5RS6QAT.js";
+import "../chunk-AG4F6NVT.js";
+import "../chunk-RKAX37F4.js";
+import "../chunk-GDWU7WF4.js";
+import "../chunk-YBF2WUGQ.js";
 import "../chunk-QXUXO22M.js";
-import "../chunk-7HZ36QDH.js";
+import "../chunk-LNZJJFZQ.js";
 import "../chunk-L7VH6IMR.js";
 import "../chunk-2IBFEHIX.js";
 import "../chunk-TTBLQZVT.js";
 import "../chunk-WGK7VNCO.js";
 import "../chunk-3UIDKLML.js";
 import "../chunk-PYC4CWCQ.js";
-import "../chunk-5ZY3IIIG.js";
+import "../chunk-TBQR5VCN.js";
 import "../chunk-6DPAWXZ3.js";
 import "../chunk-WEBEOBN5.js";
 import "../chunk-VUHLNYAE.js";

package/dist/feedback/NotificationStatusNotice.js

@@ -1,18 +1,19 @@
 import "../chunk-JQRKXMSH.js";
 import {
   NotificationStatusNotice
-} from "../chunk-YNZUYZ2O.js";
+} from "../chunk-6FGP7RMV.js";
 import "../chunk-55FFONIV.js";
 import {
   detectNotificationBrowser,
   notificationUnblockSteps
 } from "../chunk-L7BRU4UF.js";
-import "../chunk-NQCTANF3.js";
-import "../chunk-L5RS6QAT.js";
+import "../chunk-RKAX37F4.js";
+import "../chunk-GDWU7WF4.js";
+import "../chunk-YBF2WUGQ.js";
 import "../chunk-QXUXO22M.js";
-import "../chunk-7HZ36QDH.js";
+import "../chunk-LNZJJFZQ.js";
 import "../chunk-L7VH6IMR.js";
-import "../chunk-5ZY3IIIG.js";
+import "../chunk-TBQR5VCN.js";
 import "../chunk-YOXYSAUI.js";
 import "../chunk-PPEHBI5O.js";
 import "../chunk-G2FUZALJ.js";

package/dist/feedback/SequenceResolver.js

@@ -1,10 +1,10 @@
 import "../chunk-TWAKMV5B.js";
 import {
   SequenceResolver
-} from "../chunk-64LNNC54.js";
+} from "../chunk-3R5MCSYO.js";
 import "../chunk-74IH3ZGD.js";
-import "../chunk-6D5AMANO.js";
-import "../chunk-BQBEN44R.js";
+import "../chunk-OV5NM4FY.js";
+import "../chunk-PNAKRHRT.js";
 import "../chunk-JO6D7YGN.js";
 import "../chunk-2ORD2FMN.js";
 import "../chunk-2SRWPNQ7.js";
@@ -23,13 +23,14 @@ import "../chunk-Z2JH5KW5.js";
 import "../chunk-AL5E624U.js";
 import "../chunk-GYXUCS37.js";
 import "../chunk-LV7LSPBF.js";
-import "../chunk-NUGT7LMR.js";
-import "../chunk-NQCTANF3.js";
-import "../chunk-L5RS6QAT.js";
+import "../chunk-AG4F6NVT.js";
+import "../chunk-RKAX37F4.js";
+import "../chunk-GDWU7WF4.js";
+import "../chunk-YBF2WUGQ.js";
 import "../chunk-QXUXO22M.js";
-import "../chunk-7HZ36QDH.js";
+import "../chunk-LNZJJFZQ.js";
 import "../chunk-L7VH6IMR.js";
-import "../chunk-5ZY3IIIG.js";
+import "../chunk-TBQR5VCN.js";
 import "../chunk-BA4RHQ3B.js";
 import "../chunk-YOXYSAUI.js";
 import "../chunk-PPEHBI5O.js";

package/dist/native/data-display/Alert.js

@@ -101,6 +101,16 @@ var GRADIENT = {
 };
 var GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 };
 var PULSE = { alpha: 0.2, ms: 2e3, spread: 10 };
+var HOVER = { tintAlpha: 0.06 };
+var ACTIVE = { tintAlpha: 0.2, ms: 250 };
+var POINTER_INK_STEP = {
+  hover: { black: 0.15, white: 0.2 },
+  press: { black: 0.35, white: 0.6 }
+};
+var POINTER_STATES = {
+  hover: { tintAlpha: HOVER.tintAlpha, inkStep: POINTER_INK_STEP.hover },
+  press: { tintAlpha: ACTIVE.tintAlpha, inkStep: POINTER_INK_STEP.press }
+};
 var NEUTRAL_GREY = { main: 500, light: 300, dark: 700 };
 function alertPalette(theme, key) {
   switch (key) {